From cdb6c26a08823022f665394a41f354df2730d1b8 Mon Sep 17 00:00:00 2001
From: SaraRandolph <sara.randolph222@gmail.com>
Date: Wed, 4 Mar 2020 15:47:53 -0700
Subject: [PATCH] adds functionality to disable the frequent emoji sorting,
 updates storybook for visibility

---
 src/components/picker/nimble-picker.js |  5 ++++-
 src/utils/shared-default-props.js      |  1 +
 src/utils/shared-props.js              |  1 +
 stories/index.js                       | 22 ++++++++++++++++++++++
 4 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
index 631f091..0beb0e6 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.disableFrequentEmojiSort){
+        component.forceUpdate()
+      }
 
       requestAnimationFrame(() => {
         if (!this.scroll) return
@@ -523,6 +525,7 @@ export default class NimblePicker extends React.PureComponent {
         exclude,
         recent,
         autoFocus,
+        disableFrequentEmojiSort,
         skinEmoji,
         notFound,
         notFoundEmoji,
diff --git a/src/utils/shared-default-props.js b/src/utils/shared-default-props.js
index 8d58606..1fa9bb2 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,
+  disableFrequentEmojiSort: false,
   custom: [],
   skinEmoji: '',
   notFound: () => {},
diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js
index a0309dd..b2d0fa5 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,
+  disableFrequentEmojiSort: PropTypes.bool,
   custom: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,
diff --git a/stories/index.js b/stories/index.js
index 8908102..df32e5c 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -74,6 +74,28 @@ storiesOf('Picker', module)
     />
   ))
 
+  .add('Pause Frequent Emoji Sort', () => (
+    <Picker
+      disableFrequentEmojiSort={boolean('Unicode', true)}
+      onClick={action('clicked')}
+      onSelect={action('selected')}
+      onSkinChange={action('skin changed')}
+      native={boolean('Unicode', true)}
+      darkMode={boolean('Dark mode', false)}
+      set={select('Emoji pack', SETS, SETS[0])}
+      emojiSize={number('Emoji size', 24)}
+      perLine={number('Per line', 9)}
+      title={text('Idle text', 'Your Title Here')}
+      emoji={text('Idle emoji', 'department_store')}
+      notFoundEmoji={text('Not found emoji', 'sleuth_or_spy')}
+      defaultSkin={number('Default skin tone', 1)}
+      color={color('Highlight color', '#ae65c5')}
+      showPreview={boolean('Show preview', true)}
+      showSkinTones={boolean('Show skin tones', true)}
+      custom={CUSTOM_EMOJIS}
+    />
+  ))
+
   .add('Custom category icons', () => (
     <Picker
       custom={CUSTOM_EMOJIS}