fix: connectable props

sebinsua · Jan 7, 2018 · e1a86f7 · e1a86f7
1 parent 222cbef
commit e1a86f7
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "classnames-es": "^2.2.6",
-    "conventional-component": "^0.4.0"
+    "conventional-component": "^0.5.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^5.2.8",

diff --git a/src/reducer.js b/src/reducer.js
@@ -81,7 +81,7 @@ const reducer = (state = initialState, action) => {
         name: action.payload.name,
         availableStates: action.payload.availableStates,
         defaultValue: action.payload.defaultValue,
-        selectedValue: action.payload.value
+        selectedValue: action.payload.selectedValue
       }
     }
     case PREVIOUS_VALUE: {

diff --git a/src/utils.js b/src/utils.js
@@ -18,3 +18,6 @@ export function compose(...funcs) {
 
   return funcs.reduce((a, b) => (...args) => a(b(...args)))
 }
+
+export const whenDifferent = (connectableProps = []) => (props, nextProps) =>
+  connectableProps.some(prop => props[prop] !== nextProps[prop])
diff --git a/src/withLogic.js b/src/withLogic.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { withRenderProp, withLifecycleStateLogic } from 'conventional-component'
-import { KEYCODE } from './utils'
+import { KEYCODE, whenDifferent } from './utils'
 
 import ChoicesDisplay from './ChoicesDisplay'
 
@@ -179,7 +179,12 @@ function withLogic(Template = ChoicesDisplay) {
   }
 
   return withLifecycleStateLogic({
-    shouldDispatchReceiveNextProps: false
+    shouldDispatchReceiveNextProps: whenDifferent([
+      'name',
+      'availableStates',
+      'defaultValue',
+      'selectedValue'
+    ])
   })(Choices)
 }
 

diff --git a/stories/index.js b/stories/index.js
@@ -12,8 +12,8 @@ const choices = storiesOf('Choices', module)
 
 choices.add('with default template', () => (
   <div className="choices__container">
-    <input type="text" name="thing_1" value="unrelated" />
-    <input type="text" name="thing_2" value="fields" />
+    <input type="text" name="thing_1" defaultValue="unrelated" />
+    <input type="text" name="thing_2" defaultValue="fields" />
     <Choices
       name="basic_speed"
       availableStates={[
@@ -32,8 +32,8 @@ choices.add('with default template', () => (
 
 choices.add('with slider-like template', () => (
   <div className="choices__container">
-    <input type="text" name="thing_1" value="unrelated" />
-    <input type="text" name="thing_2" value="fields" />
+    <input type="text" name="thing_1" defaultValue="unrelated" />
+    <input type="text" name="thing_2" defaultValue="fields" />
     <Choices
       name="slider_like_speed"
       availableStates={[
@@ -54,9 +54,7 @@ choices.add('with slider-like template', () => (
         hoveredValue,
         selectedValue,
         setValue,
-        hoverValue,
-        previousValue,
-        nextValue
+        hoverValue
       }) => (
         <div className="speed-choices-container">
           <div className="speed-choices">

diff --git a/stories/styles/basic.css b/stories/styles/basic.css
@@ -1,6 +1,10 @@
 .choice {
   background-color: lightgrey;
 }
+.choice:focus {
+  outline-color: transparent;
+  outline-style: none;
+}
 .choice.choice__selected {
   background-color: red;
   color: white;

diff --git a/stories/styles/slider-like.css b/stories/styles/slider-like.css
@@ -37,7 +37,7 @@
 
   cursor: pointer;
 }
-.speed-choice__not-settable {
+.speed-choice__not-settable:not(.speed-choice__selected) {
   visibility: hidden;
   cursor: default;
 }
@@ -54,6 +54,7 @@
   outline: none;
   padding: 0;
   cursor: pointer;
+  overflow: hidden;
 
   height: 4px;
   width: 4px;

diff --git a/yarn.lock b/yarn.lock
@@ -2250,9 +2250,9 @@ conventional-commits-parser@^2.1.0:
     through2 "^2.0.0"
     trim-off-newlines "^1.0.0"
 
-conventional-component@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/conventional-component/-/conventional-component-0.4.0.tgz#a7694ff1da525d7a2457b5dd7b11b81ac3f9874a"
+conventional-component@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/conventional-component/-/conventional-component-0.5.1.tgz#13a4ad6d18510f069de0b8a1b0084c58f40fed6f"
 
 conventional-recommended-bump@^1.0.0:
   version "1.1.0"