fix: null can be a value (#459)

* init * refactor option list select logic * add test case * add compile ci
react-component · Mar 3, 2020 · de9d860 · de9d860 · vercel · Mar 3, 2020
1 parent 76e8c13
commit de9d860
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 10 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -29,9 +29,24 @@ jobs:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
       - run: npm test -- --coverage
+  compile:
+    docker:
+      - image: circleci/node:latest
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+      - run: npm install
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+      - run: npm run compile
 workflows:
   version: 2
   build_and_test:
     jobs:
       - lint
       - test
+      - compile
diff --git a/examples/single.tsx b/examples/single.tsx
@@ -79,6 +79,7 @@ class Test extends React.Component {
               console.log('Scroll:', args);
             }}
           >
+            <Option value={null}>不选择</Option>
             <Option value="01" text="jack" title="jack">
               <b
                 style={{

diff --git a/src/OptionList.tsx b/src/OptionList.tsx
@@ -143,7 +143,7 @@ const OptionList: React.RefForwardingComponent<
 
   // ========================== Values ==========================
   const onSelectValue = (value: RawValueType) => {
-    if (value !== null) {
+    if (value !== undefined) {
       onSelect(value, { selected: !values.has(value) });
     }
 
@@ -187,7 +187,7 @@ const OptionList: React.RefForwardingComponent<
           if (item && !(item.data as OptionData).disabled) {
             onSelectValue((item.data as OptionData).value);
           } else {
-            onSelectValue(null);
+            onSelectValue(undefined);
           }
 
           if (open) {

diff --git a/src/generate.tsx b/src/generate.tsx
@@ -378,8 +378,7 @@ export default function generateSelector<
     const [innerValue, setInnerValue] = React.useState<ValueType>(
       value || defaultValue,
     );
-    const baseValue =
-      value !== undefined && value !== null ? value : innerValue;
+    const baseValue = value !== undefined ? value : innerValue;
 
     // Should reset when controlled to be uncontrolled
     const prevValueRef = React.useRef(value);

diff --git a/src/utils/commonUtil.ts b/src/utils/commonUtil.ts
@@ -20,14 +20,16 @@ export function toInnerValue(
   value: DefaultValueType,
   { labelInValue, combobox }: { labelInValue: boolean; combobox: boolean },
 ): RawValueType[] {
-  if (value === undefined || value === null || (value === '' && combobox)) {
+  if (value === undefined || (value === '' && combobox)) {
     return [];
   }
 
   const values = Array.isArray(value) ? value : [value];
 
   if (labelInValue) {
-    return values.map(({ key, value: val }: LabelValueType) => (val !== undefined ? val : key));
+    return (values as LabelValueType[]).map(
+      ({ key, value: val }: LabelValueType) => (val !== undefined ? val : key),
+    );
   }
 
   return values as RawValueType[];
@@ -56,7 +58,12 @@ export function toOuterValues<FOT extends FlattenOptionsType>(
 
   if (labelInValue) {
     values = values.map(val =>
-      getLabeledValue(val, { options, prevValue, labelInValue, optionLabelProp }),
+      getLabeledValue(val, {
+        options,
+        prevValue,
+        labelInValue,
+        optionLabelProp,
+      }),
     );
   }
 
@@ -70,7 +77,11 @@ export function removeLastEnabledValue<
   const newValues = [...values];
 
   let removeIndex: number;
-  for (removeIndex = measureValues.length - 1; removeIndex >= 0; removeIndex -= 1) {
+  for (
+    removeIndex = measureValues.length - 1;
+    removeIndex >= 0;
+    removeIndex -= 1
+  ) {
     if (!measureValues[removeIndex].disabled) {
       break;
     }
@@ -90,7 +101,9 @@ export function removeLastEnabledValue<
 }
 
 export const isClient =
-  typeof window !== 'undefined' && window.document && window.document.documentElement;
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.documentElement;
 
 /** Is client side and not jsdom */
 export const isBrowserClient = process.env.NODE_ENV !== 'test' && isClient;

diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx
@@ -1450,7 +1450,7 @@ describe('Select.Basic', () => {
   });
 
   describe('reset value to undefined should reset display value', () => {
-    [undefined, null].forEach(value => {
+    [undefined].forEach(value => {
       it(`to ${value}`, () => {
         const wrapper = mount(<Select value="light" />);
         expect(wrapper.find('.rc-select-selection-item').text()).toEqual(
@@ -1525,4 +1525,25 @@ describe('Select.Basic', () => {
       background: 'yellow',
     });
   });
+
+  it('`null` is a value', () => {
+    const onChange = jest.fn();
+
+    const wrapper = mount(
+      <Select onChange={onChange}>
+        <Option value={1}>1</Option>
+        <Option value={null}>No</Option>
+      </Select>,
+    );
+
+    toggleOpen(wrapper);
+    selectItem(wrapper, 0);
+    expect(onChange).toHaveBeenCalledWith(1, expect.anything());
+    expect(wrapper.find('.rc-select-selection-item').text()).toEqual('1');
+
+    toggleOpen(wrapper);
+    selectItem(wrapper, 1);
+    expect(onChange).toHaveBeenCalledWith(null, expect.anything());
+    expect(wrapper.find('.rc-select-selection-item').text()).toEqual('No');
+  });
 });