on preview change props

missive · Jul 20, 2020 · 48bed5c · 48bed5c
1 parent d994d50
commit 48bed5c
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 42 deletions.
diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
@@ -322,6 +322,7 @@ export default class NimblePicker extends React.PureComponent {
         // Focus on first category anchor
         this.anchors.buttons.firstChild.focus()
         this.setState({ emoji: null })
+        this.props.onShowSkin()
         return
 
       case 'ArrowLeft':
@@ -824,6 +825,7 @@ export default class NimblePicker extends React.PureComponent {
               title={title}
               emoji={emoji}
               idleEmoji={idleEmoji}
+              onShowSkin={this.props.onShowSkin}
               showSkinTones={showSkinTones}
               showPreview={showPreview}
               emojiProps={{

diff --git a/src/components/preview.js b/src/components/preview.js
@@ -13,6 +13,12 @@ export default class Preview extends React.PureComponent {
     this.data = props.data
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.emoji && !this.props.emoji) {
+      this.props.onShowSkin()
+    }
+  }
+
   render() {
     const {
       emoji,
@@ -70,54 +76,55 @@ export default class Preview extends React.PureComponent {
           </div>
         </div>
       )
-    } else {
-      return (
-        <div className="emoji-mart-preview">
-          <div className="emoji-mart-preview-emoji" aria-hidden="true">
-            {idleEmoji &&
-              idleEmoji.length &&
-              NimbleEmoji({
-                emoji: idleEmoji,
-                data: this.data,
-                ...emojiProps,
-              })}
-          </div>
+    }
 
-          <div className="emoji-mart-preview-data" aria-hidden="true">
-            <span className="emoji-mart-title-label">{title}</span>
-          </div>
+    return (
+      <div className="emoji-mart-preview">
+        <div className="emoji-mart-preview-emoji" aria-hidden="true">
+          {idleEmoji &&
+            idleEmoji.length &&
+            NimbleEmoji({
+              emoji: idleEmoji,
+              data: this.data,
+              ...emojiProps,
+            })}
+        </div>
 
-          {showSkinTones && (
-            <div
-              className={`emoji-mart-preview-skins${
-                skinsProps.skinEmoji ? ' custom' : ''
-              }`}
-            >
-              {skinsProps.skinEmoji ? (
-                <SkinsEmoji
-                  skin={skinsProps.skin}
-                  emojiProps={emojiProps}
-                  data={this.data}
-                  skinEmoji={skinsProps.skinEmoji}
-                  i18n={i18n}
-                  onChange={skinsProps.onChange}
-                />
-              ) : (
-                <SkinsDot
-                  skin={skinsProps.skin}
-                  i18n={i18n}
-                  onChange={skinsProps.onChange}
-                />
-              )}
-            </div>
-          )}
+        <div className="emoji-mart-preview-data" aria-hidden="true">
+          <span className="emoji-mart-title-label">{title}</span>
         </div>
-      )
-    }
+
+        {showSkinTones && (
+          <div
+            className={`emoji-mart-preview-skins${
+              skinsProps.skinEmoji ? ' custom' : ''
+            }`}
+          >
+            {skinsProps.skinEmoji ? (
+              <SkinsEmoji
+                skin={skinsProps.skin}
+                emojiProps={emojiProps}
+                data={this.data}
+                skinEmoji={skinsProps.skinEmoji}
+                i18n={i18n}
+                onChange={skinsProps.onChange}
+              />
+            ) : (
+              <SkinsDot
+                skin={skinsProps.skin}
+                i18n={i18n}
+                onChange={skinsProps.onChange}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    )
   }
 }
 
 Preview.propTypes = {
+  onShowSkin: PropTypes.func.isRequired,
   showSkinTones: PropTypes.bool,
   title: PropTypes.string.isRequired,
   idleEmoji: PropTypes.string.isRequired,

diff --git a/src/components/skins-dot.js b/src/components/skins-dot.js
@@ -52,7 +52,6 @@ export default class SkinsDot extends Skins {
 
       case 'Tab':
         e.preventDefault()
-        e.stopPropagation()
         if (e.shiftKey) {
           selectLeft()
         } else {
@@ -75,6 +74,7 @@ export default class SkinsDot extends Skins {
       default:
         break
     }
+    e.stopPropagation()
   }
 
   setSkinTonesRef(c) {

diff --git a/src/utils/shared-default-props.js b/src/utils/shared-default-props.js
@@ -16,6 +16,7 @@ const PickerDefaultProps = {
   onClick: () => {},
   onSelect: () => {},
   onSkinChange: () => {},
+  onShowSkin: () => {},
   emojiSize: 24,
   perLine: 9,
   i18n: {},

diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js
@@ -24,6 +24,7 @@ const PickerPropTypes = {
   onClick: PropTypes.func,
   onSelect: PropTypes.func,
   onSkinChange: PropTypes.func,
+  onShowSkin: PropTypes.func,
   perLine: PropTypes.number,
   emojiSize: PropTypes.number,
   i18n: PropTypes.object,