IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

[MM-56845] Convert ./components/suggestion/suggestion_date.tsx from Class Component to Function Component (#26236)

Browse Source 
Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
Syed Ali Abbas Zaidi 2024-02-27 14:08:49 +05:00 committed by GitHub
parent fac1245143
commit a19e999c11
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 31 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
webapp/channels/src/components/suggestion/suggestion_date.tsx
View File

@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React from 'react'; import React, {memo} from 'react';
import Popover from 'components/widgets/popover'; import Popover from 'components/widgets/popover';
@ -27,40 +27,44 @@ type Props = {
components: Array<React.ComponentType<SuggestionItem>>; components: Array<React.ComponentType<SuggestionItem>>;
} }
export default class SuggestionDate extends React.PureComponent<Props> { const SuggestionDate = ({
render() { items,
if (this.props.items.length === 0) { terms,
return null; components,
} matchedPretext,
onCompleteWord,
preventClose,
handleEscape,
}: Props) => {
if (items.length === 0) {
return null;
}
const item = this.props.items[0]; const item = items[0];
const term = this.props.terms[0]; const term = terms[0];
// ReactComponent names need to be upper case when used in JSX // ReactComponent names need to be upper case when used in JSX
const Component = this.props.components[0]; const Component = components[0];
const itemComponent = ( return (
<Popover
id='search-autocomplete__popover'
className='search-help-popover autocomplete visible'
placement='bottom'
>
<Component <Component
key={term} key={term}
ref={term} ref={term}
item={item} item={item}
term={term} term={term}
matchedPretext={this.props.matchedPretext[0]} matchedPretext={matchedPretext[0]}
isSelection={false} isSelection={false}
onClick={this.props.onCompleteWord} onClick={onCompleteWord}
preventClose={this.props.preventClose} preventClose={preventClose}
handleEscape={this.props.handleEscape} handleEscape={handleEscape}
/> />
); </Popover>
);
};
return ( export default memo(SuggestionDate);
<Popover
id='search-autocomplete__popover'
className='search-help-popover autocomplete visible'
placement='bottom'
>
{itemComponent}
</Popover>
);
}
}