adds functionality to disable the frequent emoji sorting, updates storybook for visibility

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
+      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,

src/utils/shared-default-props.js

@@ -37,6 +37,7 @@ const PickerDefaultProps = {
   ),
   emojiTooltip: EmojiDefaultProps.tooltip,
   autoFocus: false,
+  disableFrequentEmojiSort: false,
   custom: [],
   skinEmoji: '',
   notFound: () => {},

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,

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}