1.3.0 Custom Picker Size

ealush · Aug 24, 2017 · d24602a · d24602a
1 parent ec7743c
commit d24602a
Show file tree

Hide file tree

Showing 20 changed files with 156 additions and 97 deletions.
diff --git a/README.md b/README.md
@@ -30,6 +30,28 @@ class MyComponent extends Component {
 
 ```
 
+## Customization
+
+## Modifying the picker's height and width
+By default the picker is 240px wide and ~315px tall (depending on the position of the categories panel). To change the width and height of the picker, simply:
+
+```js
+    <EmojiPicker width="315" height="280"/>
+    <EmojiPicker height="280"/> // width will default to 240
+    <EmojiPicker width="315"/> // height will default to 240
+```
+A word on height: The height you determine by the height property, is of the emoji-list only, the search and categories panel are added to the height you specify.
+
+![alt tag](https://raw.githubusercontent.com/ealush/emoji-picker/gh-pages/screenshots/5.png)
+
+## Moving the categories panel around
+
+```js
+<EmojiPicker nav="top"/> // default. no need to pass nav="top"
+<EmojiPicker nav="left"/>
+<EmojiPicker nav="bottom"/>
+```
+
 ## Getting the clicked-on emoji
 In order to use the picker in your application, you need a way to grab the name and code of the clicked-on emoji. To do this, you just need to pass the `onEmojiClick` prop. It should be a callback function to your application, and it should get two arguments: the emoji code, and the rest of the emoji data.
 
@@ -109,14 +131,6 @@ Long clicking on diversity (skin-tone) enabled Emojies (mostly the hand Emojis),
 
 ![alt tag](https://raw.githubusercontent.com/ealush/emoji-picker/gh-pages/screenshots/4.png)
 
-## Customization
-At the moment, not many customizations are supported (they are coming). You may choose, though, to have the navigation in different locations. You may choose any of the following three:
-```js
- <EmojiPicker nav="top"/> // default. no need to pass nav="top"
- <EmojiPicker nav="left"/>
- <EmojiPicker nav="bottom"/>
-```
-
 # Attributions
 You can use this **picker**, free of charge, no attribution is needed. The emojis have their own license.
 

diff --git a/docs/iframe.html b/docs/iframe.html
@@ -16,7 +16,7 @@
       <body>
         <div id="root"></div>
         <div id="error-display"></div>
-        <script src="static/preview.119eb4680620fd473286.bundle.js"></script>
+        <script src="static/preview.52b5a34a5a8fcb43e9b0.bundle.js"></script>
       </body>
     </html>
 
diff --git a/docs/index.html b/docs/index.html
@@ -38,7 +38,7 @@
       </head>
       <body style="margin: 0;">
         <div id="root"></div>
-        <script src="static/manager.68417e5d810376b1e40e.bundle.js"></script>
+        <script src="static/manager.ef6fecb46e3c429d06e2.bundle.js"></script>
       </body>
     </html>
 
diff --git a/docs/static/manager.68417e5d810376b1e40e.bundle.js.map b/docs/static/manager.68417e5d810376b1e40e.bundle.js.map
diff --git a/...ic/manager.68417e5d810376b1e40e.bundle.js → ...ic/manager.ef6fecb46e3c429d06e2.bundle.js b/...ic/manager.68417e5d810376b1e40e.bundle.js → ...ic/manager.ef6fecb46e3c429d06e2.bundle.js
diff --git a/docs/static/manager.ef6fecb46e3c429d06e2.bundle.js.map b/docs/static/manager.ef6fecb46e3c429d06e2.bundle.js.map
diff --git a/docs/static/preview.119eb4680620fd473286.bundle.js b/docs/static/preview.119eb4680620fd473286.bundle.js
diff --git a/docs/static/preview.119eb4680620fd473286.bundle.js.map b/docs/static/preview.119eb4680620fd473286.bundle.js.map
diff --git a/docs/static/preview.52b5a34a5a8fcb43e9b0.bundle.js b/docs/static/preview.52b5a34a5a8fcb43e9b0.bundle.js
diff --git a/docs/static/preview.52b5a34a5a8fcb43e9b0.bundle.js.map b/docs/static/preview.52b5a34a5a8fcb43e9b0.bundle.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "emoji-picker-react",
-  "version": "1.2.14",
+  "version": "1.3.0",
   "description": "React emoji-picker component",
   "main": "./dist/index.js",
   "scripts": {

diff --git a/src/EmojiCategory/style.scss b/src/EmojiCategory/style.scss
@@ -11,7 +11,6 @@
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: flex-start;
-        width: $picker_width;
 
         .category-name {
             background-color: rgba($picker_bg, .9);

diff --git a/src/EmojiList/index.js b/src/EmojiList/index.js
@@ -26,10 +26,13 @@ class EmojiList extends Component {
     }
 
     render() {
-        const { filter, emojiProps, onScroll, seenCategories } = this.props;
+        const { filter, emojiProps, onScroll, seenCategories, style } = this.props;
         const filterClass = filter ? ' filter' : '';
         return (
-            <div className={`emoji-list${filterClass}`} ref={(list) => this._list = list} onScroll={onScroll}>
+            <div className={`emoji-list${filterClass}`}
+                ref={(list) => this._list = list}
+                onScroll={onScroll}
+                style={style}>
                 {categories.map((category, index) => {
                     const isCategorySeen = seenCategories[index];
                     return (

diff --git a/src/EmojiPicker/helpers/get_proximity/index.js b/src/EmojiPicker/helpers/get_proximity/index.js
@@ -1,4 +1,4 @@
-import { Header_Height } from '../../../constants';
+import { HEADER_HEIGHT } from '../../../constants';
 
 function checkIfActiveCategory({ offset, offsets, scrollTop, next }) {
     return offset <= scrollTop && (offsets[next] >= scrollTop || offsets[next] === undefined);
@@ -9,8 +9,8 @@ function isInViewport({ scrollTop, listHeight, offsets, index}) {
 }
 
 function isElementInProximity({scrollTop, offset}) {
-    const elementIsUp = scrollTop + Header_Height >= offset,
-        elementIsDown = scrollTop - Header_Height <= offset;
+    const elementIsUp = scrollTop + HEADER_HEIGHT >= offset,
+        elementIsDown = scrollTop - HEADER_HEIGHT <= offset;
 
     return elementIsDown && elementIsUp; // logically not true, better naming needed
 }

diff --git a/src/EmojiPicker/helpers/header_transform/index.js b/src/EmojiPicker/helpers/header_transform/index.js
@@ -1,6 +1,6 @@
-import { Header_Height } from '../../../constants';
+import { HEADER_HEIGHT } from '../../../constants';
 
 export default function headerTransform(distance) {
 
-    return `transform: translateY(${distance-Header_Height}px);`;
+    return `transform: translateY(${distance-HEADER_HEIGHT}px);`;
 }
diff --git a/src/EmojiPicker/helpers/index.js b/src/EmojiPicker/helpers/index.js
@@ -6,6 +6,7 @@ import getScrollbarWidth from './get_scrollbar_width';
 import getScrollDirection from './get_scroll_direction';
 import headerTransform from './header_transform';
 import isFirefoxOnMac from './is_firefox_on_mac';
+import inlineStyleTags from './inline_style_tags';
 
 export {
     adjustScrollbar,
@@ -15,5 +16,6 @@ export {
     getScrollbarWidth,
     getScrollDirection,
     headerTransform,
-    isFirefoxOnMac
+    isFirefoxOnMac,
+    inlineStyleTags
 };
diff --git a/src/EmojiPicker/helpers/inline_style_tags/index.js b/src/EmojiPicker/helpers/inline_style_tags/index.js
@@ -0,0 +1,21 @@
+import {
+    PICKER_WIDTH,
+    PICKER_HEIGHT,
+    EMOJI_SIZE
+} from '../../../constants';
+
+export default function inlineStyleTags({ width, height }) {
+    const pickerWidth = width || PICKER_WIDTH,
+        pickerHeight = height || PICKER_HEIGHT;
+
+    return {
+        picker: {
+            width: `${pickerWidth}px`
+        },
+        list: {
+            width: `${Math.floor(pickerWidth/EMOJI_SIZE) * EMOJI_SIZE}px`,
+            height: `${pickerHeight}px`
+
+        }
+    };
+}
diff --git a/src/EmojiPicker/index.js b/src/EmojiPicker/index.js
@@ -17,7 +17,8 @@ import { getOffsets,
     adjustScrollbar,
     getScrollDirection,
     headerTransform,
-    isFirefoxOnMac } from './helpers';
+    isFirefoxOnMac,
+    inlineStyleTags } from './helpers';
 
 const isFFMac = isFirefoxOnMac();
 
@@ -40,6 +41,10 @@ class EmojiPicker extends Component {
         this.active = null; // this is for updating the category name
         this.transformed = [];
         this.pickerClassName = `emoji-picker nav-${props.nav ? props.nav : 'top'}`;
+        this.inlineStyle = inlineStyleTags({
+            width: parseInt(props.width, 10),
+            height: parseInt(props.height, 10)
+        });
 
         this.onScroll = throttle(16, this.onScroll.bind(this));
         this.onCategoryClick = this.onCategoryClick.bind(this);
@@ -280,17 +285,19 @@ class EmojiPicker extends Component {
     render() {
         const { assetPath, emojiResolution } = this.props;
         const { filter, activeModifier, seenCategories, seenInSearch, diversityPicker, modifiersSpread } = this.state;
-        const { openDiversitiesMenu, closeDiversitiesMenu, _emojiName } = this;
+        const { openDiversitiesMenu, closeDiversitiesMenu, _emojiName, pickerClassName, onModifierClick, onScroll, inlineStyle } = this;
         const emojiProps = { onEmojiClick: this.onEmojiClick, parent: this, assetPath, activeModifier, emojiResolution, _emojiName, openDiversitiesMenu },
             visibleCategories = Object.assign({}, seenCategories, seenInSearch);
 
         const wrapperClassName = `wrapper${filter && Object.keys(filter).length === 0 ? ' no-results' : ''}`;
 
         return (
-            <aside className={this.pickerClassName} ref={(picker) => this._picker = picker}>
+            <aside className={pickerClassName}
+                style={this.inlineStyle.picker}
+                ref={(picker) => this._picker = picker}>
                 <CategoriesNav onClick={this.onCategoryClick}/>
                 <div className="bar-wrapper">
-                    <SkinTones onModifierClick={this.onModifierClick} activeModifier={activeModifier} spread={modifiersSpread}/>
+                    <SkinTones onModifierClick={onModifierClick} activeModifier={activeModifier} spread={modifiersSpread}/>
                     <SearchBar onChange={this.onSearch}/>
                 </div>
                 <div className={wrapperClassName}>
@@ -302,8 +309,9 @@ class EmojiPicker extends Component {
                     <div className="scroller" ref={(scroller) => this._scroller = scroller}><div/></div>
                     <span className="emoji-name" ref={(emojiName) => this._emojiName = emojiName}></span>
                     <EmojiList emojiProps={emojiProps}
+                        style={inlineStyle.list}
                         filter={filter}
-                        onScroll={this.onScroll}
+                        onScroll={onScroll}
                         seenCategories={visibleCategories}
                         modifiersSpread={modifiersSpread}
                         ref={(list) => this._list = (list ? list._list : null)}/>
@@ -317,7 +325,9 @@ EmojiPicker.propTypes = {
     onEmojiClick: PropTypes.func.isRequired,
     nav: PropTypes.string,
     assetPath: PropTypes.string,
-    emojiResolution: PropTypes.number
+    emojiResolution: PropTypes.number,
+    width: PropTypes.number,
+    height: PropTypes.number
 };
 
 export default EmojiPicker;
diff --git a/src/constants/index.js b/src/constants/index.js
@@ -1,11 +1,21 @@
 import { keywords } from '../emoji-data';
 import keywordsSingleChar from '../SearchBar/helpers/init_keywords_single';
 
-export const Header_Height = 25;
+// view
+export const HEADER_HEIGHT = 25;
+export const PICKER_WIDTH = 240;
+export const PICKER_HEIGHT = 240;
+export const EMOJI_SIZE = 34;
+
+// timers
 export const OPEN_DIVERSITIES_TIMEOUT = 1000;
 export const HIDE_SCROLL_DEBOUNCE = 550;
 export const FILTER_UPDATE_DEBOUNCE = 200;
+
+// images
 export const DEFAULT_CDN_PATH = 'https://cdn.jsdelivr.net/emojione/assets/3.0/png';
 export const DEFAULT_IMAGE_RESOLUTION = '32';
+
+// keywords
 export const ALL_KEYWORDS = Object.keys(keywords);
 export const KEYWORDS_SINGLE = keywordsSingleChar;
diff --git a/stories/textarea/index.js b/stories/textarea/index.js
@@ -112,7 +112,7 @@ class EmojiTextarea extends Component {
                     <footer>
                         <CharCount curr={curr} max={1500}/>
                         <SmileyFace onClick={this.onTriggerClick}/>
-                        {pickerOpen && <EmojiPicker onEmojiClick={this.onEmojiClick} ref={(picker) => this._picker = picker}/>}
+                        {pickerOpen && <EmojiPicker width={310} height={260} onEmojiClick={this.onEmojiClick} ref={(picker) => this._picker = picker}/>}
                     </footer>
                 </div>
             </div>