fix: clear value when format is function (#144)

* fix: should can clear value when format is function

* chore: parse value

Author: kerm1it

src/Picker.tsx

@@ -22,7 +22,7 @@ import PickerPanel, {
   PickerPanelTimeProps,
 } from './PickerPanel';
 import PickerTrigger from './PickerTrigger';
-import { formatValue, isEqual } from './utils/dateUtil';
+import { formatValue, isEqual, parseValue } from './utils/dateUtil';
 import getDataOrAriaProps, { toArray } from './utils/miscUtil';
 import PanelContext, { ContextOperationRefProps } from './PanelContext';
 import { CustomFormat, PickerMode } from './interface';
@@ -225,7 +225,11 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   const [text, triggerTextChange, resetText] = useTextValueMapping({
     valueTexts,
     onTextChange: newText => {
-      const inputDate = generateConfig.locale.parse(locale.locale, newText, formatList as string[]);
+      const inputDate = parseValue(newText, {
+        locale,
+        formatList,
+        generateConfig,
+      });
       if (inputDate && (!disabledDate || !disabledDate(inputDate))) {
         setSelectedValue(inputDate);
       }

src/RangePicker.tsx

@@ -19,6 +19,7 @@ import {
   isSameWeek,
   isSameQuarter,
   formatValue,
+  parseValue,
 } from './utils/dateUtil';
 import useValueTexts from './hooks/useValueTexts';
 import useTextValueMapping from './hooks/useTextValueMapping';
@@ -516,7 +517,11 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   );
 
   const onTextChange = (newText: string, index: 0 | 1) => {
-    const inputDate = generateConfig.locale.parse(locale.locale, newText, formatList as string[]);
+    const inputDate = parseValue(newText, {
+      locale,
+      formatList,
+      generateConfig,
+    });
 
     const disabledFunc = index === 0 ? disabledStartDate : disabledEndDate;
 

src/utils/dateUtil.ts

@@ -209,3 +209,22 @@ export function formatValue<DateType>(
     ? format(value)
     : generateConfig.locale.format(locale.locale, value, format);
 }
+
+export function parseValue<DateType>(
+  value: string,
+  {
+    generateConfig,
+    locale,
+    formatList,
+  }: {
+    generateConfig: GenerateConfig<DateType>;
+    locale: Locale;
+    formatList: Array<string | CustomFormat<DateType>>;
+  },
+) {
+  if (!value || typeof formatList[0] === 'function') {
+    return null;
+  }
+
+  return generateConfig.locale.parse(locale.locale, value, formatList as string[]);
+}

tests/picker.spec.tsx

@@ -729,6 +729,7 @@ describe('Picker.Basic', () => {
   it('custom format', () => {
     const wrapper = mount(
       <MomentPicker
+        allowClear
         defaultValue={getMoment('2020-09-17')}
         format={[(val: Moment) => `custom format:${val.format('YYYYMMDD')}`, 'YYYY-MM-DD']}
       />,
@@ -738,6 +739,11 @@ describe('Picker.Basic', () => {
     wrapper.selectCell(24);
     wrapper.closePicker();
     expect(wrapper.find('input').prop('value')).toEqual('custom format:20200924');
+
+    // clear
+    const clearNode = wrapper.find('.rc-picker-clear');
+    expect(clearNode.simulate.bind(clearNode, 'mouseUp')).not.toThrow();
+    expect(wrapper.find('input').prop('value')).toEqual('');
   });
 
   it('panelRender', () => {

tests/range.spec.tsx

@@ -1256,6 +1256,7 @@ describe('Picker.Range', () => {
   it('custom format', () => {
     const wrapper = mount(
       <MomentRangePicker
+        allowClear
         format={[(val: Moment) => `custom format:${val.format('YYYYMMDD')}`, 'YYYY-MM-DD']}
         defaultValue={[getMoment('2020-09-17'), getMoment('2020-10-17')]}
       />,
@@ -1296,6 +1297,22 @@ describe('Picker.Range', () => {
         .last()
         .prop('value'),
     ).toEqual('custom format:20201024');
+
+    // clear
+    const clearNode = wrapper.find('.rc-picker-clear');
+    expect(clearNode.simulate.bind(clearNode, 'mouseUp')).not.toThrow();
+    expect(
+      wrapper
+        .find('input')
+        .first()
+        .prop('value'),
+    ).toEqual('');
+    expect(
+      wrapper
+        .find('input')
+        .last()
+        .prop('value'),
+    ).toEqual('');
   });
 
   describe('auto open', () => {