1.5.0 Minor - add preload mode (#33)

Author: ealush

package.json

@@ -1,6 +1,6 @@
 {
   "name": "emoji-picker-react",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "description": "React emoji-picker component",
   "main": "./dist/index.js",
   "scripts": {

src/EmojiList/index.js

@@ -26,15 +26,15 @@ class EmojiList extends Component {
     }
 
     render() {
-        const { filter, onScroll, seenCategories, style } = this.props;
+        const { filter, onScroll, seenCategories, style, preload } = this.props;
         const filterClass = filter ? ' filter' : '';
         return (
             <div className={`emoji-list${filterClass}`}
                 ref={(list) => this._list = list}
                 onScroll={onScroll}
                 style={style}>
                 {categories.map((category, index) => {
-                    const isCategorySeen = seenCategories[index];
+                    const isCategorySeen = preload || seenCategories[index];
                     return (
                         <EmojiCategory category={category}
                             index={index}
@@ -52,7 +52,8 @@ EmojiList.propTypes = {
     filter: PropTypes.object,
     onScroll: PropTypes.func.isRequired,
     seenCategories: PropTypes.object.isRequired,
-    style: PropTypes.object
+    style: PropTypes.object,
+    preload: PropTypes.bool
 };
 
 EmojiList.contextTypes = {

src/EmojiPicker/index.js

@@ -294,7 +294,7 @@ class EmojiPicker extends Component {
     }
 
     render() {
-        const { assetPath, emojiResolution } = this.props;
+        const { assetPath, emojiResolution, preload } = this.props;
         const { filter, activeModifier, seenCategories, seenInSearch, diversityPicker, modifiersSpread } = this.state;
         const { closeDiversitiesMenu, pickerClassName, onModifierClick, onScroll, inlineStyle } = this;
         const visibleCategories = Object.assign({}, seenCategories, seenInSearch);
@@ -322,6 +322,7 @@ class EmojiPicker extends Component {
                         onScroll={onScroll}
                         seenCategories={visibleCategories}
                         modifiersSpread={modifiersSpread}
+                        preload={preload}
                         ref={(list) => this._list = (list ? list._list : null)}/>
                 </div>
             </aside>

stories/index.js

@@ -13,7 +13,7 @@ Give it a try by clicking the smiley face blow the textarea. :nerd_face:`;
 // eslint-disable-next-line no-undef
 storiesOf('Text area with picker', module)
     .add('Sample textarea with emoji picker', () => (
-        <div style={{maxWidth: '450px'}}>
+        <div>
             <EmojiTextarea value={text}/>
         </div>
     ))
@@ -28,6 +28,9 @@ storiesOf('Standalone picker', module)
     .add('Top Navigation CDN hosted 32px/fastest', () => (
         <EmojiPicker onEmojiClick={action('emoji-click')}/>
     ))
+    .add('Top Navigation [preload]', () => (
+        <EmojiPicker onEmojiClick={action('emoji-click')} preload/>
+    ))
     .add('Left Navigation CDN hosted 64px/slower', () => (
         <EmojiPicker emojiResolution="64" nav="left" onEmojiClick={action('emoji-click')}/>
     ))