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