fix: showXXX=false will make others as true (#795)

* fix: part of !show logic * test: test dricen * fix: of it * test: update test case * fix: adjust logic * chore: cleanup
react-component · Apr 12, 2024 · f114e70 · f114e70
1 parent a4dba36
commit f114e70
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 139 deletions.
diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import '../../assets/index.less';
-import type { Locale, PickerRef } from '../../src/interface';
+import type { Locale } from '../../src/interface';
 import RangePicker from '../../src/PickerInput/RangePicker';
 import SinglePicker from '../../src/PickerInput/SinglePicker';
 import PickerPanel from '../../src/PickerPanel';
@@ -18,14 +18,13 @@ dayjs.locale('zh-cn');
 dayjs.extend(buddhistEra);
 dayjs.extend(LocalizedFormat);
 
-console.log('>>', RangePicker, SinglePicker, PickerPanel, Origin7Range);
 console.clear();
 
 (window as any).dayjs = dayjs;
 
 const myLocale: Locale = {
   ...zhCN,
-  cellQuarterFormat: '第Q季度',
+  // cellQuarterFormat: '第Q季度',
   // fieldYearFormat: 'BBBB',
   // cellYearFormat: 'BBBB',
   // yearFormat: 'BBBB',
@@ -37,121 +36,19 @@ const sharedLocale = {
   generateConfig: dayjsGenerateConfig,
 };
 
-function Origin7Range() {
-  const [dates, setDates] = React.useState<any>(null);
-  const [value, setValue] = React.useState<any>(null);
-
-  const disabledDate = (current: Dayjs) => {
-    if (!dates) {
-      return false;
-    }
-
-    const tooLate = dates[0] && current.diff(dates[0], 'days') >= 7;
-    const tooEarly = dates[1] && dates[1].diff(current, 'days') >= 7;
-
-    console.log(
-      '>>>',
-      current?.format('YYYY-MM-DD'),
-      dates[0]?.format('YYYY-MM-DD'),
-      dates[1]?.format('YYYY-MM-DD'),
-      tooEarly,
-      tooLate,
-    );
-
-    return !!tooEarly || !!tooLate;
-  };
-
-  const onOpenChange = (open: boolean) => {
-    if (open) {
-      setDates([null, null]);
-    } else {
-      setDates(null);
-    }
-  };
-
-  return (
-    <RangePicker
-      {...sharedLocale}
-      value={dates || value}
-      disabledDate={disabledDate}
-      onCalendarChange={(val) => {
-        setDates(val);
-      }}
-      onChange={(val) => {
-        setValue(val);
-      }}
-      onOpenChange={onOpenChange}
-      changeOnBlur
-    />
-  );
-}
-
-const MyInput = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
-  (props, ref) => {
-    const { 'data-range': range, value, style } = props as any;
-
-    // return (
-    //   <div>
-    //     <input {...props} ref={ref} />
-    //   </div>
-    // );
-
-    return (
-      <div style={{ position: 'relative' }}>
-        <input
-          {...props}
-          style={{
-            ...style,
-            opacity: value ? 1 : 0,
-          }}
-          ref={ref}
-        />
-        {!value && (
-          <div
-            style={{
-              position: 'absolute',
-              left: 0,
-              top: 0,
-              pointerEvents: 'none',
-            }}
-          >
-            {range === 'start' ? '从未' : '至今'}
-          </div>
-        )}
-      </div>
-    );
-  },
-);
-MyInput.displayName = 'MyInput';
-
 export default () => {
-  const [value, setValue] = React.useState<Dayjs>(dayjs('2024-01-15'));
-  const setSingleValue = (nextVal: Dayjs) => {
-    setValue(nextVal);
-  };
-
-  React.useEffect(() => {
-    setTimeout(() => {
-      setValue(dayjs('2024-03-03'));
-    }, 2000);
-  }, []);
-
   return (
     <div>
-      <RangePicker {...sharedLocale} open picker="time" style={{ width: 400 }} />
-
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
-        <PickerPanel
-          generateConfig={dayjsGenerateConfig}
-          locale={zhCN}
-          value={value}
-          onChange={setSingleValue}
-          onPanelChange={(panelValue, mode) => {
-            console.error('1');
-            console.log('🎲 PanelValue Change:', panelValue, mode);
-          }}
-        />
-      </div>
+      {/* <RangePicker {...sharedLocale} style={{ width: 400 }} showTime />
+      <RangePicker {...sharedLocale} style={{ width: 400 }} showTime showMinute={false} /> */}
+      <SinglePicker
+        {...sharedLocale}
+        style={{ width: 400 }}
+        showTime
+        showHour
+        showMinute
+        // showSecond={false}
+      />
     </div>
   );
 };
diff --git a/docs/examples/multiple.tsx b/docs/examples/multiple.tsx
@@ -30,6 +30,10 @@ export default () => {
     <div>
       <SinglePicker {...sharedLocale} multiple ref={singleRef} onOpenChange={console.error} />
       <SinglePicker {...sharedLocale} multiple ref={singleRef} needConfirm />
+      <SinglePicker {...sharedLocale} multiple picker="week" defaultValue={[
+        dayjs('2021-01-01'),
+        dayjs('2021-01-08'),
+      ]} />
     </div>
   );
 };
diff --git a/src/PickerInput/hooks/useFilledProps.ts b/src/PickerInput/hooks/useFilledProps.ts
@@ -211,12 +211,5 @@ export default function useFilledProps<
     [filledProps, mergedNeedConfirm, mergedInputReadOnly, disabledBoundaryDate],
   );
 
-  return [
-    mergedProps,
-    internalPicker,
-    complexPicker,
-    formatList,
-    maskFormat,
-    isInvalidateDate,
-  ];
+  return [mergedProps, internalPicker, complexPicker, formatList, maskFormat, isInvalidateDate];
 }
diff --git a/src/hooks/useTimeConfig.ts b/src/hooks/useTimeConfig.ts
@@ -66,6 +66,55 @@ export interface ComponentProps<DateType extends object> {
   format?: SharedPickerProps['format'];
 }
 
+/** Check if all the showXXX is `undefined` */
+function existShowConfig(
+  showHour: boolean,
+  showMinute: boolean,
+  showSecond: boolean,
+  showMillisecond: boolean,
+) {
+  return [showHour, showMinute, showSecond, showMillisecond].some((show) => show !== undefined);
+}
+
+/** Fill the showXXX if needed */
+function fillShowConfig(
+  hasShowConfig: boolean,
+  showHour: boolean,
+  showMinute: boolean,
+  showSecond: boolean,
+  showMillisecond: boolean,
+): [showHour: boolean, showMinute: boolean, showSecond: boolean, showMillisecond: boolean] {
+  let parsedShowHour = showHour;
+  let parsedShowMinute = showMinute;
+  let parsedShowSecond = showSecond;
+
+  if (
+    !hasShowConfig &&
+    !parsedShowHour &&
+    !parsedShowMinute &&
+    !parsedShowSecond &&
+    !showMillisecond
+  ) {
+    parsedShowHour = true;
+    parsedShowMinute = true;
+    parsedShowSecond = true;
+  } else if (hasShowConfig) {
+    const existFalse = [parsedShowHour, parsedShowMinute, parsedShowSecond].some(
+      (show) => show === false,
+    );
+    const existTrue = [parsedShowHour, parsedShowMinute, parsedShowSecond].some(
+      (show) => show === true,
+    );
+    const defaultShow = existFalse ? true : !existTrue;
+
+    parsedShowHour = parsedShowHour ?? defaultShow;
+    parsedShowMinute = parsedShowMinute ?? defaultShow;
+    parsedShowSecond = parsedShowSecond ?? defaultShow;
+  }
+
+  return [parsedShowHour, parsedShowMinute, parsedShowSecond, showMillisecond];
+}
+
 /**
  * Get `showHour`, `showMinute`, `showSecond` or other from the props.
  * This is pure function, will not get `showXXX` from the `format` prop.
@@ -91,12 +140,15 @@ export function getTimeProps<DateType extends object>(
 
   const { showMillisecond } = timeConfig;
   let { showHour, showMinute, showSecond } = timeConfig;
+  const hasShowConfig = existShowConfig(showHour, showMinute, showSecond, showMillisecond);
 
-  if (!showHour && !showMinute && !showSecond && !showMillisecond) {
-    showHour = true;
-    showMinute = true;
-    showSecond = true;
-  }
+  [showHour, showMinute, showSecond] = fillShowConfig(
+    hasShowConfig,
+    showHour,
+    showMinute,
+    showSecond,
+    showMillisecond,
+  );
 
   return [
     timeConfig,
@@ -145,9 +197,7 @@ export function fillShowTimeConfig<DateType extends object>(
 
     const showMeridiem = checkShow(baselineFormat, ['a', 'A', 'LT', 'LLL', 'LTS'], use12Hours);
 
-    const hasShowConfig = [showHour, showMinute, showSecond, showMillisecond].some(
-      (show) => show !== undefined,
-    );
+    const hasShowConfig = existShowConfig(showHour, showMinute, showSecond, showMillisecond);
 
     // Fill with format, if needed
     if (!hasShowConfig) {
@@ -158,11 +208,13 @@ export function fillShowTimeConfig<DateType extends object>(
     }
 
     // Fallback if all can not see
-    if (!hasShowConfig && !showHour && !showMinute && !showSecond && !showMillisecond) {
-      showHour = true;
-      showMinute = true;
-      showSecond = true;
-    }
+    [showHour, showMinute, showSecond] = fillShowConfig(
+      hasShowConfig,
+      showHour,
+      showMinute,
+      showSecond,
+      showMillisecond,
+    );
 
     // ======================== Format ========================
     const timeFormat =

diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx
@@ -281,7 +281,6 @@ describe('NewPicker.Range', () => {
       const { rerender } = render(<DayRangePicker picker="time" format="LT" open />);
       expect(document.querySelectorAll('.rc-picker-time-panel-column')).toHaveLength(3);
 
-      console.log('~~~~~~~~~~~~~~~~');
       // With second
       rerender(<DayRangePicker picker="time" format="LTS" open />);
       expect(document.querySelectorAll('.rc-picker-time-panel-column')).toHaveLength(4);

diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
@@ -1722,7 +1722,6 @@ describe('Picker.Range', () => {
       />,
     );
     openPicker(container, 1);
-    console.log(document.querySelector<HTMLElement>('.rc-picker-panel-container').style.cssText);
     expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({ marginLeft: 0 });
     mock.mockRestore();
   });

diff --git a/tests/time.spec.tsx b/tests/time.spec.tsx
@@ -0,0 +1,28 @@
+import { render } from '@testing-library/react';
+import { resetWarned } from 'rc-util/lib/warning';
+import React from 'react';
+import { DayPicker, getDay, openPicker, selectCell } from './util/commonUtil';
+
+describe('Picker.Time', () => {
+  beforeEach(() => {
+    resetWarned();
+    jest.useFakeTimers().setSystemTime(getDay('1990-09-03 00:00:00').valueOf());
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it('show columns for one of it is false', async () => {
+    const { container } = render(<DayPicker showTime showMinute={false} />);
+
+    openPicker(container);
+    expect(document.querySelectorAll('.rc-picker-time-panel-column')).toHaveLength(2);
+
+    // Select
+    selectCell(3);
+
+    expect(container.querySelector('input')).toHaveValue('1990-09-03 00:00');
+  });
+});
diff --git a/tsconfig.json b/tsconfig.json
@@ -17,7 +17,7 @@
     ".dumirc.ts",
     "src/**/*.ts",
     "src/**/*.tsx",
-    "docs/examples/focus.tsx",
+    "docs/examples/*.tsx",
     "tests/**/*.ts",
     "tests/**/*.tsx"
   ]