Merge pull request #22431 from AGarciaNY/main

feat[issue #16143]: Changed CategoryShortcutButton class component
Expensify · Jul 14, 2023 · 76e53bb · 76e53bb
2 parents d4cf9a8 + fa027b0
commit 76e53bb
Showing 1 changed file with 29 additions and 41 deletions.
diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js
@@ -1,8 +1,8 @@
-import React, {PureComponent} from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import Icon from '../Icon';
 import Tooltip from '../Tooltip';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import useLocalize from '../../hooks/useLocalize';
 import variables from '../../styles/variables';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
@@ -20,48 +20,36 @@ const propTypes = {
 
     /** The function to call when an emoji is selected */
     onPress: PropTypes.func.isRequired,
-
-    ...withLocalizePropTypes,
 };
 
-class CategoryShortcutButton extends PureComponent {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isHighlighted: false,
-        };
-    }
+function CategoryShortcutButton(props) {
+    const {translate} = useLocalize();
+    const [isHighlighted, setIsHighlighted] = useState(false);
 
-    render() {
-        return (
-            <Tooltip
-                text={this.props.translate(`emojiPicker.headers.${this.props.code}`)}
-                shiftVertical={-4}
+    return (
+        <Tooltip
+            text={translate(`emojiPicker.headers.${props.code}`)}
+            shiftVertical={-4}
+        >
+            <PressableWithoutFeedback
+                shouldUseAutoHitSlop={false}
+                onPress={props.onPress}
+                onHoverIn={() => setIsHighlighted(true)}
+                onHoverOut={() => setIsHighlighted(false)}
+                style={({pressed}) => [StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), styles.categoryShortcutButton, isHighlighted && styles.emojiItemHighlighted]}
+                accessibilityLabel={`emojiPicker.headers.${props.code}`}
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
             >
-                <PressableWithoutFeedback
-                    shouldUseAutoHitSlop={false}
-                    onPress={this.props.onPress}
-                    onHoverIn={() => this.setState({isHighlighted: true})}
-                    onHoverOut={() => this.setState({isHighlighted: false})}
-                    style={({pressed}) => [
-                        StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
-                        styles.categoryShortcutButton,
-                        this.state.isHighlighted && styles.emojiItemHighlighted,
-                    ]}
-                    accessibilityLabel={`emojiPicker.headers.${this.props.code}`}
-                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                >
-                    <Icon
-                        fill={themeColors.icon}
-                        src={this.props.icon}
-                        height={variables.iconSizeNormal}
-                        width={variables.iconSizeNormal}
-                    />
-                </PressableWithoutFeedback>
-            </Tooltip>
-        );
-    }
+                <Icon
+                    fill={themeColors.icon}
+                    src={props.icon}
+                    height={variables.iconSizeNormal}
+                    width={variables.iconSizeNormal}
+                />
+            </PressableWithoutFeedback>
+        </Tooltip>
+    );
 }
 CategoryShortcutButton.propTypes = propTypes;
-
-export default withLocalize(CategoryShortcutButton);
+CategoryShortcutButton.displayName = 'CategoryShortcutButton';
+export default React.memo(CategoryShortcutButton);