#24773 Converted ./components/emoji_picker/components/emoji_picker_header.tsx to Function Component (#24803)

* #24773 Converted ./components/emoji_picker/components/emoji_picker_header.tsx to Function Component

* Fixed the lint errors and removed the explicit functional component type

* Added memo to make the functional component pure.
This commit is contained in:
Balaji K 2023-10-17 16:29:36 +05:30 committed by GitHub
parent 654669aa00
commit f86ec9da18
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -9,30 +9,30 @@ type Props = {
handleEmojiPickerClose: MouseEventHandler;
}
export default class EmojiPickerHeader extends React.PureComponent<Props> {
render(): React.ReactNode {
return (
<div className='emoji-picker__header modal-header'>
<button
type='button'
className='close emoji-picker__header-close-button'
onClick={this.props.handleEmojiPickerClose}
>
<span aria-hidden='true'>{'×'}</span>
<span className='sr-only'>
<FormattedMessage
id={'emoji_picker.close'}
defaultMessage={'Close'}
/>
</span>
</button>
<h4 className='modal-title emoji-picker__header-title'>
const EmojiPickerHeader = ({handleEmojiPickerClose}: Props) => {
return (
<div className='emoji-picker__header modal-header'>
<button
type='button'
className='close emoji-picker__header-close-button'
onClick={handleEmojiPickerClose}
>
<span aria-hidden='true'>{'×'}</span>
<span className='sr-only'>
<FormattedMessage
id={'emoji_picker.header'}
defaultMessage={'Emoji Picker'}
id={'emoji_picker.close'}
defaultMessage={'Close'}
/>
</h4>
</div>
);
}
}
</span>
</button>
<h4 className='modal-title emoji-picker__header-title'>
<FormattedMessage
id={'emoji_picker.header'}
defaultMessage={'Emoji Picker'}
/>
</h4>
</div>
);
};
export default React.memo(EmojiPickerHeader);