diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js index 631f091..6f63a56 100644 --- a/src/components/picker/nimble-picker.js +++ b/src/components/picker/nimble-picker.js @@ -289,7 +289,9 @@ export default class NimblePicker extends React.PureComponent { var component = this.categoryRefs['category-1'] if (component) { let maxMargin = component.maxMargin - component.forceUpdate() + if (this.props.enableFrequentEmojiSort) { + component.forceUpdate() + } requestAnimationFrame(() => { if (!this.scroll) return diff --git a/src/utils/shared-default-props.js b/src/utils/shared-default-props.js index 8d58606..c4c869e 100644 --- a/src/utils/shared-default-props.js +++ b/src/utils/shared-default-props.js @@ -37,6 +37,7 @@ const PickerDefaultProps = { ), emojiTooltip: EmojiDefaultProps.tooltip, autoFocus: false, + enableFrequentEmojiSort: false, custom: [], skinEmoji: '', notFound: () => {}, diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js index a0309dd..8f6eb85 100644 --- a/src/utils/shared-props.js +++ b/src/utils/shared-props.js @@ -43,6 +43,7 @@ const PickerPropTypes = { exclude: PropTypes.arrayOf(PropTypes.string), recent: PropTypes.arrayOf(PropTypes.string), autoFocus: PropTypes.bool, + enableFrequentEmojiSort: PropTypes.bool, custom: PropTypes.arrayOf( PropTypes.shape({ name: PropTypes.string.isRequired, diff --git a/stories/index.js b/stories/index.js index 8908102..20ed726 100644 --- a/stories/index.js +++ b/stories/index.js @@ -56,6 +56,7 @@ storiesOf('Picker', module) color={color('Highlight color', '#ae65c5')} showPreview={boolean('Show preview', true)} showSkinTones={boolean('Show skin tones', true)} + enableFrequentEmojiSort={boolean('Enable frequent sort', false)} custom={CUSTOM_EMOJIS} /> ))