1.2.12 Add Filter Empty State

ealush · Aug 15, 2017 · 97d5277 · 97d5277
1 parent f94e452
commit 97d5277
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 48 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.77d1a63fd6652ab7d7ab.bundle.js"></script>
+ <script src="static/preview.d2b463239f237a2daa7b.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.1bab24b126040818739b.bundle.js"></script>
+ <script src="static/manager.1a9f8fa53bb0b1f0943a.bundle.js"></script>
  </body>
  </html>
 
diff --git a/...ic/manager.1bab24b126040818739b.bundle.js → ...ic/manager.1a9f8fa53bb0b1f0943a.bundle.js b/...ic/manager.1bab24b126040818739b.bundle.js → ...ic/manager.1a9f8fa53bb0b1f0943a.bundle.js
diff --git a/...anager.1bab24b126040818739b.bundle.js.map → ...anager.1a9f8fa53bb0b1f0943a.bundle.js.map b/...anager.1bab24b126040818739b.bundle.js.map → ...anager.1a9f8fa53bb0b1f0943a.bundle.js.map
diff --git a/docs/static/preview.77d1a63fd6652ab7d7ab.bundle.js.map b/docs/static/preview.77d1a63fd6652ab7d7ab.bundle.js.map
diff --git a/...ic/preview.77d1a63fd6652ab7d7ab.bundle.js → ...ic/preview.d2b463239f237a2daa7b.bundle.js b/...ic/preview.77d1a63fd6652ab7d7ab.bundle.js → ...ic/preview.d2b463239f237a2daa7b.bundle.js
diff --git a/docs/static/preview.d2b463239f237a2daa7b.bundle.js.map b/docs/static/preview.d2b463239f237a2daa7b.bundle.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "emoji-picker-react",
- "version": "1.2.11",
+ "version": "1.2.12",
  "description": "React emoji-picker component",
  "main": "./dist/index.js",
  "scripts": {

diff --git a/src/Emoji/index.js b/src/Emoji/index.js
@@ -38,8 +38,8 @@ class Emoji extends Component {
  }
 
  onMouseEnter() {
- if (this.props.emojiProps._emojiName) {
- this.props.emojiProps._emojiName.textContent = this.emoji.name;
+ if (this.props.emojiProps.parent._emojiName) {
+ this.props.emojiProps.parent._emojiName.textContent = this.emoji.name;
  }
  }
 
@@ -49,8 +49,8 @@ class Emoji extends Component {
  return;
  }
 
- if (this.props.emojiProps._emojiName) {
- this.props.emojiProps._emojiName.textContent = '';
+ if (this.props.emojiProps.parent._emojiName) {
+ this.props.emojiProps.parent._emojiName.textContent = '';
  }
  }
 

diff --git a/src/EmojiPicker/index.js b/src/EmojiPicker/index.js
@@ -278,21 +278,22 @@ 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 emojiProps = { onEmojiClick: this.onEmojiClick, assetPath, activeModifier, emojiResolution, _emojiName, openDiversitiesMenu },
+ 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}>
  <CategoriesNav onClick={this.onCategoryClick}/>
  <div className="bar-wrapper">
  <SkinTones onModifierClick={this.onModifierClick} activeModifier={activeModifier} spread={modifiersSpread}/>
  <SearchBar onChange={this.onSearch}/>
  </div>
- <div className="wrapper">
+ <div className={wrapperClassName}>
  <DiversityPicker name={diversityPicker}
  assetPath={assetPath}
  emojiResolution={emojiResolution}

diff --git a/src/EmojiPicker/picker.scss b/src/EmojiPicker/picker.scss
@@ -42,6 +42,27 @@
  position: relative;
  overflow: hidden;
 
+ &.no-results {
+ &:before {
+ content: '';
+ background-repeat: no-repeat;
+ background-image: url("../SearchBar/svg/find.svg");
+ background-position: 50% 50%;
+ background-size: 100px 100px;
+ display: block;
+ width: 100px;
+ height: 100px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ opacity: .07;
+ transform: translateX(-50%) translateY(-50%);
+ }
+
+ .emoji-name {
+ display: none;
+ }
+ }
 
  .scroller {
  display: block;