fix: showTime align logic (#724)

* test: test driven

* fix: part show time config

* fix: logic

* fix: format logic

* chore: update types

Author: zombieJ

docs/examples/debug.tsx

@@ -168,7 +168,8 @@ export default () => {
         //   console.log('Popup!', node);
         //   return node.parentElement!;
         // }}
-        picker="time"
+        // picker="time"
+        showTime={{ showHour: true, showMinute: true }}
         defaultPickerValue={dayjs('2000-01-01 03:05:08')}
         presets={[
           {
@@ -250,12 +251,13 @@ export default () => {
       </button>
 
       <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
-        {/* <PickerPanel
+        <PickerPanel
           generateConfig={dayjsGenerateConfig}
           locale={zhCN}
           value={value}
           // multiple
-          picker="month"
+          picker="time"
+          use12Hours
           onChange={setSingleValue}
           // onPickerValueChange={(pickerValue) => {
           //   console.log('🎼 PickerValue Change:', pickerValue);
@@ -264,7 +266,7 @@ export default () => {
             console.error('1');
             console.log('🎲 PanelValue Change:', panelValue, mode);
           }}
-        /> */}
+        />
         {/* <CellPicker
           picker="time"
           locale={{

src/hooks/useTimeConfig.ts

@@ -40,23 +40,23 @@ function pickTimeProps<DateType extends object = any>(props: any): SharedTimePro
   return timeProps;
 }
 
-export function getTimeConfig<Config extends object>(
+export function getTimeConfig<DateType extends object>(
   componentProps: {
     picker?: PickerMode;
-    showTime?: boolean | Config;
+    showTime?: boolean | Partial<SharedTimeProps<DateType>>;
   } = {},
-): Config {
+): SharedTimeProps<DateType> {
   const { showTime, picker } = componentProps;
 
   if (showTime || picker === 'time') {
     const timeConfig =
-      showTime && typeof showTime === 'object'
-        ? showTime
-        : (pickTimeProps(componentProps) as Config);
+      showTime && typeof showTime === 'object' ? showTime : pickTimeProps(componentProps);
+
+    const pickedProps = pickProps(timeConfig);
 
     return {
-      format: 'HH:mm:ss',
-      ...pickProps(timeConfig),
+      format: pickedProps.use12Hours ? 'HH:mm:ss A' : 'HH:mm:ss',
+      ...pickedProps,
     };
   }
 

src/hooks/useTimeInfo.ts

@@ -15,8 +15,16 @@ function emptyDisabled<T>(): T[] {
   return [];
 }
 
-function checkShow(format: string, keywords: string[], propShow?: boolean) {
-  return propShow ?? keywords.some((keyword) => format.includes(keyword));
+function checkShow(
+  format: string,
+  keywords: string[],
+  hasOtherShowConfig: boolean,
+  show?: boolean,
+) {
+  if (show !== undefined) {
+    return show;
+  }
+  return !hasOtherShowConfig && keywords.some((keyword) => format.includes(keyword));
 }
 
 function generateUnits(
@@ -96,11 +104,15 @@ export default function useTimeInfo<DateType extends object = any>(
   }
 
   // ========================== Show ==========================
-  let mergedShowHour = checkShow(format, ['H', 'h', 'k', 'LT', 'LLL'], showHour);
-  let mergedShowMinute = checkShow(format, ['m', 'LT', 'LLL'], showMinute);
-  let mergedShowSecond = checkShow(format, ['s', 'LTS'], showSecond);
-  const mergedShowMillisecond = checkShow(format, ['SSS'], showMillisecond);
-  const mergedShowMeridiem = checkShow(format, ['a', 'A', 'LT', 'LLL'], use12Hours);
+  const hasShowConfig = [showHour, showMinute, showSecond, showMillisecond].some(
+    (show) => show !== undefined,
+  );
+
+  let mergedShowHour = checkShow(format, ['H', 'h', 'k', 'LT', 'LLL'], hasShowConfig, showHour);
+  let mergedShowMinute = checkShow(format, ['m', 'LT', 'LLL'], hasShowConfig, showMinute);
+  let mergedShowSecond = checkShow(format, ['s', 'LTS'], hasShowConfig, showSecond);
+  const mergedShowMillisecond = checkShow(format, ['SSS'], hasShowConfig, showMillisecond);
+  const mergedShowMeridiem = checkShow(format, ['a', 'A', 'LT', 'LLL'], hasShowConfig, use12Hours);
 
   // Fallback if all can not see
   if (!mergedShowHour && !mergedShowMinute && !mergedShowSecond && !mergedShowMillisecond) {

tests/panel.spec.tsx

@@ -688,4 +688,25 @@ describe('Picker.Panel', () => {
       expect(onChange.mock.calls[0][0].format('HH:mm:ss')).toEqual('03:03:03');
     });
   });
+
+  it('showHour, showMinute, !showSecond', () => {
+    const { container } = render(
+      <DayPickerPanel
+        showTime={{
+          showHour: true,
+          showMinute: true,
+        }}
+      />,
+    );
+
+    expect(container.querySelectorAll('.rc-picker-time-panel-column')).toHaveLength(2);
+  });
+
+  it('use12Hours with format', () => {
+    const { container } = render(
+      <DayPickerPanel picker="time" use12Hours defaultValue={getDay('2000-01-01 01:02:03')} />,
+    );
+
+    expect(container.querySelector('.rc-picker-header-view').textContent).toEqual('01:02:03 AM');
+  });
 });