fix: first formats work (#84)

* fix: Format logic

* add test case

* update test case

Author: zombieJ

src/Picker.tsx

@@ -213,7 +213,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   });
 
   // ============================= Text ==============================
-  const valueTexts = useValueTexts(selectedValue, {
+  const [valueTexts, firstValueText] = useValueTexts(selectedValue, {
     formatList,
     generateConfig,
     locale,
@@ -316,7 +316,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
 
       if (!valueTexts.length || valueTexts[0] === '') {
         triggerTextChange('');
-      } else if (!valueTexts.includes(text)) {
+      } else if (firstValueText !== text) {
         resetText();
       }
     }

src/RangePicker.tsx

@@ -472,9 +472,15 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     locale,
   };
 
-  const startValueTexts = useValueTexts<DateType>(getValue(selectedValue, 0), sharedTextHooksProps);
+  const [startValueTexts, firstStartValueText] = useValueTexts<DateType>(
+    getValue(selectedValue, 0),
+    sharedTextHooksProps,
+  );
 
-  const endValueTexts = useValueTexts<DateType>(getValue(selectedValue, 1), sharedTextHooksProps);
+  const [endValueTexts, firstEndValueText] = useValueTexts<DateType>(
+    getValue(selectedValue, 1),
+    sharedTextHooksProps,
+  );
 
   const onTextChange = (newText: string, index: 0 | 1) => {
     const inputDate = generateConfig.locale.parse(locale.locale, newText, formatList);
@@ -552,12 +558,12 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
 
       if (!startValueTexts.length || startValueTexts[0] === '') {
         triggerStartTextChange('');
-      } else if (!startValueTexts.includes(startText)) {
+      } else if (firstStartValueText !== startText) {
         resetStartText();
       }
       if (!endValueTexts.length || endValueTexts[0] === '') {
         triggerEndTextChange('');
-      } else if (!endValueTexts.includes(endText)) {
+      } else if (firstEndValueText !== endText) {
         resetEndText();
       }
     }

src/hooks/useValueTexts.ts

@@ -13,14 +13,27 @@ export default function useValueTexts<DateType>(
   value: DateType | null,
   { formatList, generateConfig, locale }: ValueTextConfig<DateType>,
 ) {
-  return useMemo<string[]>(
+  return useMemo<[string[], string]>(
     () => {
       if (!value) {
-        return [''];
+        return [[''], ''];
       }
-      return formatList.map(subFormat =>
-        generateConfig.locale.format(locale.locale, value, subFormat),
-      );
+
+      // We will convert data format back to first format
+      let firstValueText: string = '';
+      const fullValueTexts: string[] = [];
+
+      for (let i = 0; i < formatList.length; i += 1) {
+        const format = formatList[i];
+        const formatStr = generateConfig.locale.format(locale.locale, value, format);
+        fullValueTexts.push(formatStr);
+
+        if (i === 0) {
+          firstValueText = formatStr;
+        }
+      }
+
+      return [fullValueTexts, firstValueText];
     },
     [value, formatList],
     (prev, next) => prev[0] !== next[0] || !shallowEqual(prev[1], next[1]),

tests/picker.spec.tsx

@@ -640,4 +640,16 @@ describe('Picker.Basic', () => {
         .text(),
     ).toEqual('1990-10-06');
   });
+
+  it('format', () => {
+    const wrapper = mount(<MomentPicker format={['YYYYMMDD', 'YYYY-MM-DD']} />);
+    wrapper.openPicker();
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: '2000-01-01',
+      },
+    });
+    wrapper.closePicker();
+    expect(wrapper.find('input').prop('value')).toEqual('20000101');
+  });
 });

tests/range.spec.tsx

@@ -1155,4 +1155,49 @@ describe('Picker.Range', () => {
     wrapper.openPicker(1);
     expect(wrapper.findCell('15').hasClass('rc-picker-cell-disabled')).toBeFalsy();
   });
+
+  it('format', () => {
+    const wrapper = mount(
+      <MomentRangePicker
+        format={['YYYYMMDD', 'YYYY-MM-DD']}
+        defaultValue={[getMoment('2000-12-15'), getMoment('2021-02-03')]}
+      />,
+    );
+
+    // Start date
+    wrapper.openPicker();
+    wrapper
+      .find('input')
+      .first()
+      .simulate('change', {
+        target: {
+          value: '1989-09-03',
+        },
+      });
+    wrapper.closePicker();
+    expect(
+      wrapper
+        .find('input')
+        .first()
+        .prop('value'),
+    ).toEqual('19890903');
+
+    // end date
+    wrapper.openPicker(1);
+    wrapper
+      .find('input')
+      .last()
+      .simulate('change', {
+        target: {
+          value: '1990-11-28',
+        },
+      });
+    wrapper.closePicker(1);
+    expect(
+      wrapper
+        .find('input')
+        .last()
+        .prop('value'),
+    ).toEqual('19901128');
+  });
 });