vanilla parameters, more robust merge

ant-design · Aug 4, 2023 · bae3fa7 · bae3fa7
1 parent 847faa9
commit bae3fa7
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 16 deletions.
diff --git a/components/date-picker/__tests__/DatePicker.test.tsx b/components/date-picker/__tests__/DatePicker.test.tsx
@@ -316,18 +316,30 @@ describe('DatePicker', () => {
     ).toBe(60);
   });
 
-  it('allows clear by default, and when clearIcon nested within allowClear, but disallows when allowClear false', async () => {
+  it('allows or prohibits clearing as applicable', async () => {
     const somepoint = dayjs('2023-08-01');
     const { rerender } = render(<DatePicker value={somepoint} />);
 
     const { role, options } = closeCircleByRole;
     await userEvent.hover(screen.getByRole(role, options));
-    expectCloseCircle(true);
+    await waitFor(() => expectCloseCircle(true));
+
+    rerender(<DatePicker value={somepoint} allowClear={false} />);
+    await waitFor(() => expectCloseCircle(false));
 
     rerender(<DatePicker value={somepoint} allowClear={{ clearIcon: <CloseCircleFilled /> }} />);
-    expectCloseCircle(true);
+    await waitFor(() => expectCloseCircle(true));
 
-    rerender(<DatePicker value={somepoint} allowClear={false} />);
+    rerender(
+      <DatePicker
+        value={somepoint}
+        allowClear={{ clearIcon: <div data-testid="custom-clear" /> }}
+      />,
+    );
     await waitFor(() => expectCloseCircle(false));
+    await userEvent.hover(screen.getByTestId('custom-clear'));
+
+    rerender(<DatePicker value={somepoint} allowClear={{}} />);
+    await waitFor(() => expectCloseCircle(true));
   });
 });
diff --git a/components/date-picker/__tests__/RangePicker.test.tsx b/components/date-picker/__tests__/RangePicker.test.tsx
@@ -129,13 +129,16 @@ describe('RangePicker', () => {
     errSpy.mockRestore();
   });
 
-  it('allows clear by default, and when clearIcon nested within allowClear, but disallows when allowClear false', async () => {
+  it('allows or prohibits clearing as applicable', async () => {
     const somepoint = dayjs('2023-08-01');
     const { rerender } = render(<RangePicker locale={enUS} value={[somepoint, somepoint]} />);
 
     const { role, options } = closeCircleByRole;
     await userEvent.hover(screen.getByRole(role, options));
-    expectCloseCircle(true);
+    await waitFor(() => expectCloseCircle(true));
+
+    rerender(<RangePicker locale={enUS} value={[somepoint, somepoint]} allowClear={false} />);
+    await waitFor(() => expectCloseCircle(false));
 
     rerender(
       <RangePicker
@@ -144,9 +147,19 @@ describe('RangePicker', () => {
         allowClear={{ clearIcon: <CloseCircleFilled /> }}
       />,
     );
-    expectCloseCircle(true);
+    await waitFor(() => expectCloseCircle(true));
 
-    rerender(<RangePicker locale={enUS} value={[somepoint, somepoint]} allowClear={false} />);
+    rerender(
+      <RangePicker
+        locale={enUS}
+        value={[somepoint, somepoint]}
+        allowClear={{ clearIcon: <div data-testid="custom-clear" /> }}
+      />,
+    );
     await waitFor(() => expectCloseCircle(false));
+    await userEvent.hover(screen.getByTestId('custom-clear'));
+
+    rerender(<RangePicker locale={enUS} value={[somepoint, somepoint]} allowClear={{}} />);
+    await waitFor(() => expectCloseCircle(true));
   });
 });
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -147,7 +147,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
         components={Components}
         direction={direction}
         dropdownClassName={classNames(hashId, popupClassName || dropdownClassName)}
-        allowClear={mergeAllowClear({ clearIcon, allowClear }, <CloseCircleFilled />)}
+        allowClear={mergeAllowClear(allowClear, clearIcon, <CloseCircleFilled />)}
       />,
     );
   });

diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -183,7 +183,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
               rootClassName,
               popupClassName || dropdownClassName,
             )}
-            allowClear={mergeAllowClear({ clearIcon, allowClear }, <CloseCircleFilled />)}
+            allowClear={mergeAllowClear(allowClear, clearIcon, <CloseCircleFilled />)}
           />,
         );
       },

diff --git a/components/date-picker/util.ts b/components/date-picker/util.ts
@@ -161,13 +161,18 @@ export function getTimeProps<DateType, DisabledTime>(
   };
 }
 
-export type MergeAllowClearProps = Pick<PickerProps<unknown>, 'clearIcon' | 'allowClear'>;
+type AllowClear = PickerProps<unknown>['allowClear'];
+type ClearIcon = PickerProps<unknown>['clearIcon'];
 
 export function mergeAllowClear(
-  { clearIcon, allowClear }: MergeAllowClearProps,
-  defaultClearIcon: MergeAllowClearProps['clearIcon'],
+  allowClear: AllowClear,
+  clearIcon: ClearIcon,
+  defaultClearIcon: NonNullable<ClearIcon>,
 ) {
-  return allowClear === false || (typeof allowClear === 'object' && 'clearIcon' in allowClear)
-    ? allowClear
-    : ({ clearIcon: clearIcon ?? defaultClearIcon } as const);
+  if (allowClear === false) {
+    return false;
+  }
+
+  const defaults = { clearIcon: clearIcon ?? defaultClearIcon };
+  return typeof allowClear === 'object' && allowClear ? { ...defaults, ...allowClear } : defaults;
 }