1.2.5 improved filter scrolling experience

ealush · Aug 10, 2017 · d4be98e · d4be98e
1 parent b21a737
commit d4be98e
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "emoji-picker-react",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "React emoji-picker component",
   "main": "./dist/index.js",
   "scripts": {

diff --git a/src/EmojiList/style.scss b/src/EmojiList/style.scss
@@ -16,5 +16,24 @@
             height: 0;
             width: 0;
         }
+
+        &.filter {
+            &:before {
+                content: '';
+                background: $md-grey-50;
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                height: 25px;
+                z-index: 2;
+                opacity: .9;
+            }
+
+            .category-name {
+                background: none;
+                z-index: 3;
+            }
+        }
     }
 }
diff --git a/src/EmojiPicker/helpers/get_proximity/index.js b/src/EmojiPicker/helpers/get_proximity/index.js
@@ -28,9 +28,9 @@ export default function getProximity(offsets, scrollTop, listHeight) {
             next = index + 1,
             inProximity = isElementInProximity({scrollTop, offset}),
             isActiveCategory = checkIfActiveCategory({ offset, offsets, scrollTop, next }),
-            notActiveVisibleCategory = !isActiveCategory && isInViewport({ scrollTop, listHeight, offsets, index});
+            isVisible = isInViewport({ scrollTop, listHeight, offsets, index});
 
-        if (notActiveVisibleCategory) {
+        if (isVisible) {
             inViewPort[index] = true;
         }
 

diff --git a/src/EmojiPicker/index.js b/src/EmojiPicker/index.js
@@ -94,10 +94,21 @@ class EmojiPicker extends Component {
             }
         });
 
+        if (this.state.filter) {
+            return;
+        }
+
         classList.add(categories[index].name);
         this.active = index;
     }
 
+    unsetActiveCategory() {
+        const classList = this._picker.classList;
+        categories.forEach((category) => {
+            classList.remove(category.name);
+        });
+    }
+
     setSeenCategory(index, categories) {
 
         const seenCategories = {...this.state.seenCategories};
@@ -143,7 +154,12 @@ class EmojiPicker extends Component {
             inViewPort // partially visible, not active
         } = this.proximity;
 
-        this.setSeenCategory(0, inViewPort);
+        if (this.state.filter) {
+            this.setSeenInSearch(inViewPort);
+            return this.transformed = clearTransform(this.transformed);
+        } else {
+            this.setSeenCategory(0, inViewPort);
+        }
 
         if (activeCategory !== active) {
             this.setSeenCategory(activeCategory);
@@ -198,7 +214,9 @@ class EmojiPicker extends Component {
             this.listHeight = positions.listHeight;
             this._list.scrollTop = 0;
             this.proximity = getProximity(this.offsets, 0, this.listHeight);
+            if (!filter) { return this.setActiveCategory(0); }
             this.setSeenInSearch(this.proximity.inViewPort);
+            this.unsetActiveCategory();
         });
     }
 

diff --git a/src/EmojiPicker/picker.scss b/src/EmojiPicker/picker.scss
@@ -49,7 +49,7 @@
             width: 5px;
             padding-top: 5px;
             height: 20px;
-            z-index: 2;
+            z-index: 3;
             right: 3px;
             box-sizing: border-box;
             opacity: 0;
@@ -72,7 +72,7 @@
             top: 7px;
             font-size: 9px;
             font-weight: 100;
-            z-index: 2;
+            z-index: 3;
             color: $shortname-color;
             max-width: 130px;
             white-space: nowrap;