Improve value propType

package.json

@@ -52,7 +52,7 @@
     "enzyme-to-json": "^1.4.5",
     "es6-promise": "^3.0.2",
     "expect.js": "0.3.x",
-    "jest": "^18.1.0",
+    "jest": "^19.0.2",
     "jquery": "^2.2.0",
     "pre-commit": "1.x",
     "rc-dialog": "^6.0.3",

src/PropTypes.js

@@ -0,0 +1,99 @@
+import { PropTypes } from 'react';
+import { SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from './strategies';
+
+function valueType(props, propName, componentName) {
+  const labelInValueShape = PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.string,
+  });
+  if (props.labelInValue) {
+    const validate = PropTypes.oneOfType([
+      PropTypes.arrayOf(labelInValueShape),
+      labelInValueShape,
+    ]);
+    const error = validate(...arguments);
+    if (error) {
+      return new Error(
+        `Invalid prop \`${propName}\` supplied to \`${componentName}\`, ` +
+        `when \`labelInValue\` is \`true\`, \`${propName}\` should in ` +
+        `shape of \`{ value: string, label?: string }\`.`
+      );
+    }
+  } else if (props.treeCheckable && props.treeCheckStrictly) {
+    const validate = PropTypes.oneOfType([
+      PropTypes.arrayOf(labelInValueShape),
+      labelInValueShape,
+    ]);
+    const error = validate(...arguments);
+    if (error) {
+      return new Error(
+        `Invalid prop \`${propName}\` supplied to \`${componentName}\`, ` +
+        `when \`treeCheckable\` and \`treeCheckStrictly\` are \`true\`, ` +
+        `\`${propName}\` should in shape of \`{ value: string, label?: string }\`.`
+      );
+    }
+  } else if (props.multiple && props[propName] === '') {
+    return new Error(
+      `Invalid prop \`${propName}\` of type \`string\` supplied to \`${componentName}\`, ` +
+      `expected \`array\` when \`multiple\` is \`true\`.`
+    );
+  } else {
+    const validate = PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.string),
+      PropTypes.string,
+    ]);
+    return validate(...arguments);
+  }
+}
+
+export const SelectPropTypes = {
+  className: PropTypes.string,
+  prefixCls: PropTypes.string,
+  multiple: PropTypes.bool,
+  filterTreeNode: PropTypes.any,
+  showSearch: PropTypes.bool,
+  disabled: PropTypes.bool,
+  showArrow: PropTypes.bool,
+  allowClear: PropTypes.bool,
+  defaultOpen: PropTypes.bool,
+  open: PropTypes.bool,
+  transitionName: PropTypes.string,
+  animation: PropTypes.string,
+  choiceTransitionName: PropTypes.string,
+  onClick: PropTypes.func,
+  onChange: PropTypes.func,
+  onSelect: PropTypes.func,
+  onDeselect: PropTypes.func,
+  onSearch: PropTypes.func,
+  searchPlaceholder: PropTypes.string,
+  placeholder: PropTypes.any,
+  inputValue: PropTypes.any,
+  value: valueType,
+  defaultValue: valueType,
+  label: PropTypes.any,
+  defaultLabel: PropTypes.any,
+  labelInValue: PropTypes.bool,
+  dropdownStyle: PropTypes.object,
+  drodownPopupAlign: PropTypes.object,
+  onDropdownVisibleChange: PropTypes.func,
+  maxTagTextLength: PropTypes.number,
+  showCheckedStrategy: PropTypes.oneOf([
+    SHOW_ALL, SHOW_PARENT, SHOW_CHILD,
+  ]),
+  treeCheckStrictly: PropTypes.bool,
+  treeIcon: PropTypes.bool,
+  treeLine: PropTypes.bool,
+  treeDefaultExpandAll: PropTypes.bool,
+  treeCheckable: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.node,
+  ]),
+  treeNodeLabelProp: PropTypes.string,
+  treeNodeFilterProp: PropTypes.string,
+  treeData: PropTypes.array,
+  treeDataSimpleMode: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.object,
+  ]),
+  loadData: PropTypes.func,
+};

src/Select.jsx

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
 import KeyCode from 'rc-util/lib/KeyCode';
 import classnames from 'classnames';
@@ -16,6 +16,8 @@ import {
 } from './util';
 import SelectTrigger from './SelectTrigger';
 import _TreeNode from './TreeNode';
+import { SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from './strategies';
+import { SelectPropTypes } from './PropTypes';
 
 function noop() {
 }
@@ -50,65 +52,8 @@ function loopTreeData(data, level = 0) {
   });
 }
 
-const SHOW_ALL = 'SHOW_ALL';
-const SHOW_PARENT = 'SHOW_PARENT';
-const SHOW_CHILD = 'SHOW_CHILD';
-
 const Select = React.createClass({
-  propTypes: {
-    children: PropTypes.any,
-    className: PropTypes.string,
-    prefixCls: PropTypes.string,
-    multiple: PropTypes.bool,
-    filterTreeNode: PropTypes.any,
-    showSearch: PropTypes.bool,
-    disabled: PropTypes.bool,
-    showArrow: PropTypes.bool,
-    allowClear: PropTypes.bool,
-    // tags: PropTypes.bool,
-    defaultOpen: PropTypes.bool,
-    open: PropTypes.bool,
-    transitionName: PropTypes.string,
-    animation: PropTypes.string,
-    choiceTransitionName: PropTypes.string,
-    onClick: PropTypes.func,
-    onChange: PropTypes.func,
-    onSelect: PropTypes.func,
-    onDeselect: PropTypes.func,
-    onSearch: PropTypes.func,
-    searchPlaceholder: PropTypes.string,
-    placeholder: PropTypes.any,
-    inputValue: PropTypes.any,
-    value: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object]),
-    defaultValue: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object]),
-    label: PropTypes.any,
-    defaultLabel: PropTypes.any,
-    labelInValue: PropTypes.bool,
-    dropdownStyle: PropTypes.object,
-    drodownPopupAlign: PropTypes.object,
-    onDropdownVisibleChange: PropTypes.func,
-    maxTagTextLength: PropTypes.number,
-    showCheckedStrategy: PropTypes.oneOf([
-      SHOW_ALL, SHOW_PARENT, SHOW_CHILD,
-    ]),
-    // skipHandleInitValue: PropTypes.bool, // Deprecated (use treeCheckStrictly)
-    treeCheckStrictly: PropTypes.bool,
-    treeIcon: PropTypes.bool,
-    treeLine: PropTypes.bool,
-    treeDefaultExpandAll: PropTypes.bool,
-    treeCheckable: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.node,
-    ]),
-    treeNodeLabelProp: PropTypes.string,
-    treeNodeFilterProp: PropTypes.string,
-    treeData: PropTypes.array,
-    treeDataSimpleMode: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.object,
-    ]),
-    loadData: PropTypes.func,
-  },
+  propTypes: SelectPropTypes,
 
   getDefaultProps() {
     return {
@@ -119,7 +64,6 @@ const Select = React.createClass({
       placeholder: '',
       searchPlaceholder: '',
       labelInValue: false,
-      defaultValue: [],
       inputValue: '',
       onClick: noop,
       onChange: noop,

src/strategies.js

@@ -0,0 +1,3 @@
+export const SHOW_ALL = 'SHOW_ALL';
+export const SHOW_PARENT = 'SHOW_PARENT';
+export const SHOW_CHILD = 'SHOW_CHILD';

tests/Select.spec.js

@@ -252,4 +252,57 @@ describe('TreeSelect', () => {
     const node = treeWrapper.find('.rc-tree-select-tree-node-content-wrapper').at(1);
     expect(node.hasClass('rc-tree-select-tree-node-content-wrapper-open')).toBe(true);
   });
+
+  describe('propTypes', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    afterEach(() => {
+      spy.mockReset();
+    });
+
+    afterAll(() => {
+      spy.mockRestore();
+    });
+
+    it('warns on invalid value when labelInValue', () => {
+      mount(
+        <TreeSelect
+          labelInValue
+          value="foo"
+        />
+      );
+      expect(spy.mock.calls[0][0]).toMatch(
+        'Invalid prop `value` supplied to `Select`, when `labelInValue` ' +
+        'is `true`, `value` should in shape of `{ value: string, label?: string }`'
+      );
+    });
+
+    it('warns on invalid value when treeCheckable and treeCheckStrictly', () => {
+      mount(
+        <TreeSelect
+          treeCheckable
+          treeCheckStrictly
+          value="foo"
+        />
+      );
+      expect(spy.mock.calls[0][0]).toMatch(
+        'Invalid prop `value` supplied to `Select`, when `treeCheckable` ' +
+        'and `treeCheckStrictly` are `true`, `value` should in shape of ' +
+        '`{ value: string, label?: string }`'
+      );
+    });
+
+    it('warns on invalid value when multiple', () => {
+      mount(
+        <TreeSelect
+          multiple
+          value=""
+        />
+      );
+      expect(spy.mock.calls[0][0]).toMatch(
+        'Invalid prop `value` of type `string` supplied to `Select`, ' +
+        'expected `array` when `multiple` is `true`'
+      );
+    });
+  });
 });