1.4.0 [Feauture] Change the scrollbar size relative to the content of…

… the picker
ealush · Aug 25, 2017 · 82cbea1 · 82cbea1
1 parent 5e48c91
commit 82cbea1
Show file tree

Hide file tree

Showing 11 changed files with 35 additions and 30 deletions.
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.1153246074b22a3b7602.bundle.js"></script>
+        <script src="static/preview.22fbecbe07f7941da267.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.ef6fecb46e3c429d06e2.bundle.js"></script>
+        <script src="static/manager.56cfe3116ef4dfe0e5a9.bundle.js"></script>
       </body>
     </html>
 
diff --git a/...ic/manager.ef6fecb46e3c429d06e2.bundle.js → ...ic/manager.56cfe3116ef4dfe0e5a9.bundle.js b/...ic/manager.ef6fecb46e3c429d06e2.bundle.js → ...ic/manager.56cfe3116ef4dfe0e5a9.bundle.js
diff --git a/...anager.ef6fecb46e3c429d06e2.bundle.js.map → ...anager.56cfe3116ef4dfe0e5a9.bundle.js.map b/...anager.ef6fecb46e3c429d06e2.bundle.js.map → ...anager.56cfe3116ef4dfe0e5a9.bundle.js.map
diff --git a/docs/static/preview.1153246074b22a3b7602.bundle.js.map b/docs/static/preview.1153246074b22a3b7602.bundle.js.map
diff --git a/...ic/preview.1153246074b22a3b7602.bundle.js → ...ic/preview.22fbecbe07f7941da267.bundle.js b/...ic/preview.1153246074b22a3b7602.bundle.js → ...ic/preview.22fbecbe07f7941da267.bundle.js
diff --git a/docs/static/preview.22fbecbe07f7941da267.bundle.js.map b/docs/static/preview.22fbecbe07f7941da267.bundle.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "emoji-picker-react",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "React emoji-picker component",
   "main": "./dist/index.js",
   "scripts": {

diff --git a/src/EmojiPicker/helpers/adjust_scrollbar/index.js b/src/EmojiPicker/helpers/adjust_scrollbar/index.js
@@ -1,8 +1,13 @@
+import { MIN_SCROLLBAR_HEIGHT_PADDED } from '../../../constants';
+
 export default function adjustScrollbar(scrollHeight, scrollTop, listHeight, _scroller) {
 
+    const scrollbarHeight = Math.floor((listHeight/(scrollHeight/listHeight)) * 0.8);
+
     const wholeRange = scrollHeight - listHeight,
-        visibleRange = (listHeight - 15),
+        visibleRange = (listHeight - (scrollbarHeight < MIN_SCROLLBAR_HEIGHT_PADDED ? MIN_SCROLLBAR_HEIGHT_PADDED : scrollbarHeight)),
         newPos = (scrollTop * visibleRange) / (wholeRange);
 
     _scroller.setAttribute('style', `transform: translateY(${newPos}px)`);
+    _scroller.children[0].setAttribute('style', `height: ${scrollbarHeight}px`);
 }
diff --git a/src/EmojiPicker/picker.scss b/src/EmojiPicker/picker.scss
@@ -69,7 +69,6 @@
             position: absolute;
             width: 5px;
             padding-top: 5px;
-            height: 20px;
             z-index: 2;
             right: 3px;
             box-sizing: border-box;
@@ -83,7 +82,7 @@
             div {
                 background-color: $md-grey-400;
                 width: 100%;
-                height: 10px;
+                min-height: 10px;
             }
         }
 

diff --git a/src/constants/index.js b/src/constants/index.js
@@ -6,6 +6,7 @@ export const HEADER_HEIGHT = 25;
 export const PICKER_WIDTH = 240;
 export const PICKER_HEIGHT = 240;
 export const EMOJI_SIZE = 34;
+export const MIN_SCROLLBAR_HEIGHT_PADDED = 15;
 
 // timers
 export const OPEN_DIVERSITIES_TIMEOUT = 1000;