Merge pull request #1 from 10xjs/react-16.4-compat

Fix compatibility with React 16.4

Author: 10xjs

.eslintrc

@@ -1,9 +1,6 @@
 extends:
   - metalab
   - metalab/react
-rules:
-  complexity: 0
-  max-len: 0
 overrides:
   -
     files: "*.test.js"

.flowconfig

@@ -1,5 +1,5 @@
 [version]
-0.71.0
+0.84.0
 
 [include]
 <PROJECT_ROOT>/**/node_modules

package-lock.json

@@ -3,7 +3,7 @@
   "version": "0.1.5",
   "scripts": {
     "build": "npm run clean && npm run build:flow && npm run build:lib && npm run build:esnext",
-    "build:flow": "ncp src lib && ncp src esnext && npx renamer --regex --find '$' --replace '.flow' '@(lib|esnext)/**/*.js'",
+    "build:flow": "ncp src lib && ncp src esnext && npx renamer --find '$' --replace '.flow' '@(lib|esnext)/**/*.js'",
     "build:lib": "BABEL_ENV=lib npx rollup src/index.js --file lib/index.js --config",
     "build:esnext": "npx babel -s -d esnext src",
     "clean": "npx rimraf lib",
@@ -31,28 +31,28 @@
     "react": ">=16.3.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.46",
-    "@babel/core": "^7.0.0-beta.46",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.46",
-    "@babel/plugin-syntax-class-properties": "^7.0.0-beta.46",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.46",
-    "@babel/plugin-transform-flow-strip-types": "^7.0.0-beta.46",
-    "@babel/plugin-transform-object-assign": "^7.0.0-beta.46",
-    "@babel/preset-env": "^7.0.0-beta.46",
-    "@babel/preset-react": "^7.0.0-beta.46",
+    "@babel/cli": "^7.1.2",
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-syntax-class-properties": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
+    "@babel/plugin-transform-object-assign": "^7.0.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
     "babel-core": "^7.0.0-bridge.0",
-    "eslint": "^4.19.1",
-    "eslint-config-metalab": "^9.0.1",
-    "flow-bin": "^0.71.0",
-    "jest": "^22.4.3",
+    "eslint": "^5.8.0",
+    "eslint-config-metalab": "^10.0.0",
+    "flow-bin": "^0.84.0",
+    "jest": "^23.6.0",
     "ncp": "^2.0.0",
-    "prettier": "^1.12.1",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
-    "renamer": "^0.6.1",
+    "prettier": "^1.14.3",
+    "react": "^16.4",
+    "react-dom": "^16.4",
+    "renamer": "^1.1.0",
     "rimraf": "^2.6.2",
-    "rollup": "^0.58.2",
-    "rollup-plugin-babel": "^4.0.0-beta.4"
+    "rollup": "^0.66.6",
+    "rollup-plugin-babel": "^4.0.3"
   },
   "jest": {
     "modulePathIgnorePatterns": [

package.json

@@ -11,5 +11,5 @@ export default {
       exclude: 'node_modules/**',
     }),
   ],
-  external: ['es6-error', 'react', 'hoist-non-react-statics'],
+  external: ['react'],
 };

rollup.config.js

@@ -98,29 +98,22 @@ DateInputController.defaultProps = {
 };
 
 DateInputController.getDerivedStateFromProps = (props: Props, state: State) => {
-  const newValue = !areEqualDates(state.value, props.value);
-  const newMin = !areEqualDates(state.min, props.min);
-  const newMax = !areEqualDates(state.max, props.max);
-  const newUTC = state.utc !== props.utc;
+  const {value = new Date(0), min, max, utc} = props;
+
+  const newValue = !areEqualDates(state.props.value, value);
+  const newMin = !areEqualDates(state.props.min, min);
+  const newMax = !areEqualDates(state.props.max, max);
+  const newUTC = state.props.utc !== utc;
 
   // Check if any of the props that can affect state have changed.
   if (!newValue && !newMin && !newMax && !newUTC) {
     return null;
   }
 
-  let nextState = Object.assign({}, state);
-  nextState.utc = props.utc;
-
-  if (newMin) {
-    nextState.min = props.min;
-  }
-
-  if (newMax) {
-    nextState.max = props.max;
-  }
+  let nextState = Object.assign({}, state, {props: {value, min, max, utc}});
 
   const updaters = fieldKeys.map((_, i) =>
-    updateField(i, getDateField[i](props.value, props.utc)),
+    updateField(i, getDateField[i](newValue ? value : state.value, utc)),
   );
 
   // Calculate a new state from the incoming props.

src/DateInputController.js

@@ -33,10 +33,13 @@ export type FieldActions = {
 };
 
 export type State = {
+  props: {
+    value: Date,
+    min?: Date,
+    max?: Date,
+    utc: boolean,
+  },
   value: Date,
-  min?: Date,
-  max?: Date,
-  utc: boolean,
 
   setFields(fields: {
     year?: number | string,

src/types.js

@@ -40,7 +40,7 @@ export const fieldKeys = ['year', 'month', 'day', 'hour', 'minute', 'second'];
 
 export const dateValue = (state: State): Date => {
   const args = fieldKeys.map((_, i) => state[fieldKeys[i]]);
-  if (state.utc) {
+  if (state.props.utc) {
     return new Date(Date.UTC.apply(null, args));
   }
   // $ExpectError Flow doesn't like us touching Date.bind
@@ -53,11 +53,11 @@ const atMin = (state: State, index: number) => {
     return true;
   }
 
-  const min = state.min;
+  const min = state.props.min;
   return (
     min &&
     ((index === 0 ? true : atMin(state, index - 1)) &&
-      getDateField[index](min, state.utc) >= state[fieldKeys[index]])
+      getDateField[index](min, state.props.utc) >= state[fieldKeys[index]])
   );
 };
 
@@ -66,11 +66,11 @@ const atMax = (state: State, index: number) => {
     return true;
   }
 
-  const max = state.max;
+  const max = state.props.max;
   return (
     max &&
     ((index === 0 ? true : atMax(state, index - 1)) &&
-      getDateField[index](max, state.utc) <= state[fieldKeys[index]])
+      getDateField[index](max, state.props.utc) <= state[fieldKeys[index]])
   );
 };
 
@@ -84,21 +84,21 @@ const resolveDefaultMax = (state: State, index: number) => {
 };
 
 export const getMin = (state: State, index: number) => {
-  const min = state.min;
+  const min = state.props.min;
   // If min date is defined and the next-largest field is at its min value...
   return min && atMin(state, index - 1)
     ? // return the value of the min date at the current field...
-      getDateField[index](min, state.utc)
+      getDateField[index](min, state.props.utc)
     : // or return a default min value for the field.
       defaultMin[index];
 };
 
 export const getMax = (state: State, index: number) => {
-  const max = state.max;
+  const max = state.props.max;
   // If max date is defined and the next-largest field is at its max value...
   return max && atMax(state, index - 1)
     ? // return the value of the max date at the current field...
-      getDateField[index](max, state.utc)
+      getDateField[index](max, state.props.utc)
     : // or return a default max value for the field.
       resolveDefaultMax(state, index);
 };
@@ -144,16 +144,18 @@ export const getInitialState = (
 ): {state: State, actions: FieldActions} => {
   const updaters = [];
 
+  const {value = new Date(0), min, max, utc} = target.props;
+
   const actions: $Shape<FieldActions> = {};
   let state: $Shape<State> = {
-    value: target.props.value === undefined ? new Date(0) : target.props.value,
-    min: target.props.min,
-    max: target.props.max,
-    utc: target.props.utc,
+    value,
+    props: {value, min, max, utc},
   };
 
   fieldKeys.forEach((field, i) => {
-    updaters.push(updateField(i, getDateField[i](state.value, state.utc)));
+    updaters.push(
+      updateField(i, getDateField[i](state.value, state.props.utc)),
+    );
 
     const setter = (value) => {
       const fields = {};

src/util.js

@@ -79,6 +79,19 @@ describe('<DateInputController/>', () => {
         expect(state).toEqual(null);
       });
 
+      it('should default undefined value to date with value 0', () => {
+        const instance = getInstance({value: date});
+
+        const nextProps = {...instance.props, value: undefined};
+
+        const state = DateInputController.getDerivedStateFromProps(
+          nextProps,
+          instance.state,
+        );
+
+        expect(state.props.value.getTime()).toEqual(new Date(0).getTime());
+      });
+
       it('should return updated state if value prop has changed', () => {
         const instance = getInstance({value: date});
 
@@ -99,7 +112,7 @@ describe('<DateInputController/>', () => {
           // $ExpectError cast nullable state as any
         ): any);
 
-        const {value, day, second, ...rest} = state;
+        const {value, day, second, props: _props, ...rest} = state;
 
         expect(day).toEqual(nextDate.getDate());
 
@@ -132,11 +145,9 @@ describe('<DateInputController/>', () => {
           // $ExpectError cast nullable state as any
         ): any);
 
-        const {value, min, hour, hourMin, ...rest} = state;
-
-        expect(min).toBe(min);
+        const {value, hour, hourMin, props, ...rest} = state;
 
-        expect(value.getHours()).toBe(min.getHours());
+        expect(value.getHours()).toBe(props.min.getHours());
 
         expect(hour).toBe(nextMin.getHours());
 
@@ -166,11 +177,9 @@ describe('<DateInputController/>', () => {
           // $ExpectError cast nullable state as any
         ): any);
 
-        const {value, max, hour, hourMax, ...rest} = state;
+        const {value, hour, hourMax, props, ...rest} = state;
 
-        expect(max).toBe(max);
-
-        expect(value.getHours()).toBe(max.getHours());
+        expect(value.getHours()).toBe(props.max.getHours());
 
         expect(hour).toBe(nextMax.getHours());
 
@@ -192,28 +201,42 @@ describe('<DateInputController/>', () => {
         ): any);
 
         const {
-          max,
           yearMax,
           monthMax,
           dayMax,
           hourMax,
           minuteMax,
           secondMax,
+          props,
           ...rest
         } = state;
 
-        expect(max).toBe(date);
+        expect(props.max).toBe(date);
 
-        expect(yearMax).toBe(max.getFullYear());
-        expect(monthMax).toBe(max.getMonth());
-        expect(dayMax).toBe(max.getDate());
-        expect(hourMax).toBe(max.getHours());
-        expect(minuteMax).toBe(max.getMinutes());
-        expect(secondMax).toBe(max.getSeconds());
+        expect(yearMax).toBe(props.max.getFullYear());
+        expect(monthMax).toBe(props.max.getMonth());
+        expect(dayMax).toBe(props.max.getDate());
+        expect(hourMax).toBe(props.max.getHours());
+        expect(minuteMax).toBe(props.max.getMinutes());
+        expect(secondMax).toBe(props.max.getSeconds());
 
         // it should leave remaining state value unchanged
         expect(shallowIntersect(rest, instance.state)).toBe(true);
       });
+
+      it('should not overwrite state change with props', () => {
+        const instance = getInstance({value: date});
+
+        // Update internal state.
+        instance.setFields({year: date.getFullYear() + 1});
+
+        const state = DateInputController.getDerivedStateFromProps(
+          instance.props,
+          instance.state,
+        );
+
+        expect(state).toEqual(null);
+      });
     });
   });
 

test/DateInputController.test.js

@@ -208,7 +208,7 @@ describe('utils', () => {
       });
 
       it('should return a Date representation of the state in UTC', () => {
-        state.utc = true;
+        state.props.utc = true;
 
         expect(dateValue(state).getTime()).toEqual(
           Date.UTC(