Skip to content

Commit f114e70

Browse files
zombieJzombieJ
authored
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
1 parent a4dba36 commit f114e70

File tree

8 files changed

+111
-139
lines changed

8 files changed

+111
-139
lines changed

‎docs/examples/debug.tsx‎

Lines changed: 12 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import '../../assets/index.less';
3-
import type { Locale, PickerRef } from '../../src/interface';
3+
import type { Locale } from '../../src/interface';
44
import RangePicker from '../../src/PickerInput/RangePicker';
55
import SinglePicker from '../../src/PickerInput/SinglePicker';
66
import PickerPanel from '../../src/PickerPanel';
@@ -18,14 +18,13 @@ dayjs.locale('zh-cn');
1818
dayjs.extend(buddhistEra);
1919
dayjs.extend(LocalizedFormat);
2020

21-
console.log('>>', RangePicker, SinglePicker, PickerPanel, Origin7Range);
2221
console.clear();
2322

2423
(window as any).dayjs = dayjs;
2524

2625
const myLocale: Locale = {
2726
...zhCN,
28-
cellQuarterFormat: '第Q季度',
27+
// cellQuarterFormat: '第Q季度',
2928
// fieldYearFormat: 'BBBB',
3029
// cellYearFormat: 'BBBB',
3130
// yearFormat: 'BBBB',
@@ -37,121 +36,19 @@ const sharedLocale = {
3736
generateConfig: dayjsGenerateConfig,
3837
};
3938

40-
function Origin7Range() {
41-
const [dates, setDates] = React.useState<any>(null);
42-
const [value, setValue] = React.useState<any>(null);
43-
44-
const disabledDate = (current: Dayjs) => {
45-
if (!dates) {
46-
return false;
47-
}
48-
49-
const tooLate = dates[0] && current.diff(dates[0], 'days') >= 7;
50-
const tooEarly = dates[1] && dates[1].diff(current, 'days') >= 7;
51-
52-
console.log(
53-
'>>>',
54-
current?.format('YYYY-MM-DD'),
55-
dates[0]?.format('YYYY-MM-DD'),
56-
dates[1]?.format('YYYY-MM-DD'),
57-
tooEarly,
58-
tooLate,
59-
);
60-
61-
return !!tooEarly || !!tooLate;
62-
};
63-
64-
const onOpenChange = (open: boolean) => {
65-
if (open) {
66-
setDates([null, null]);
67-
} else {
68-
setDates(null);
69-
}
70-
};
71-
72-
return (
73-
<RangePicker
74-
{...sharedLocale}
75-
value={dates || value}
76-
disabledDate={disabledDate}
77-
onCalendarChange={(val) => {
78-
setDates(val);
79-
}}
80-
onChange={(val) => {
81-
setValue(val);
82-
}}
83-
onOpenChange={onOpenChange}
84-
changeOnBlur
85-
/>
86-
);
87-
}
88-
89-
const MyInput = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
90-
(props, ref) => {
91-
const { 'data-range': range, value, style } = props as any;
92-
93-
// return (
94-
// <div>
95-
// <input {...props} ref={ref} />
96-
// </div>
97-
// );
98-
99-
return (
100-
<div style={{ position: 'relative' }}>
101-
<input
102-
{...props}
103-
style={{
104-
...style,
105-
opacity: value ? 1 : 0,
106-
}}
107-
ref={ref}
108-
/>
109-
{!value && (
110-
<div
111-
style={{
112-
position: 'absolute',
113-
left: 0,
114-
top: 0,
115-
pointerEvents: 'none',
116-
}}
117-
>
118-
{range === 'start' ? '从未' : '至今'}
119-
</div>
120-
)}
121-
</div>
122-
);
123-
},
124-
);
125-
MyInput.displayName = 'MyInput';
126-
12739
export default () => {
128-
const [value, setValue] = React.useState<Dayjs>(dayjs('2024-01-15'));
129-
const setSingleValue = (nextVal: Dayjs) => {
130-
setValue(nextVal);
131-
};
132-
133-
React.useEffect(() => {
134-
setTimeout(() => {
135-
setValue(dayjs('2024-03-03'));
136-
}, 2000);
137-
}, []);
138-
13940
return (
14041
<div>
141-
<RangePicker {...sharedLocale} open picker="time" style={{ width: 400 }} />
142-
143-
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
144-
<PickerPanel
145-
generateConfig={dayjsGenerateConfig}
146-
locale={zhCN}
147-
value={value}
148-
onChange={setSingleValue}
149-
onPanelChange={(panelValue, mode) => {
150-
console.error('1');
151-
console.log('🎲 PanelValue Change:', panelValue, mode);
152-
}}
153-
/>
154-
</div>
42+
{/* <RangePicker {...sharedLocale} style={{ width: 400 }} showTime />
43+
<RangePicker {...sharedLocale} style={{ width: 400 }} showTime showMinute={false} /> */}
44+
<SinglePicker
45+
{...sharedLocale}
46+
style={{ width: 400 }}
47+
showTime
48+
showHour
49+
showMinute
50+
// showSecond={false}
51+
/>
15552
</div>
15653
);
15754
};

‎docs/examples/multiple.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ export default () => {
3030
<div>
3131
<SinglePicker {...sharedLocale} multiple ref={singleRef} onOpenChange={console.error} />
3232
<SinglePicker {...sharedLocale} multiple ref={singleRef} needConfirm />
33+
<SinglePicker {...sharedLocale} multiple picker="week" defaultValue={[
34+
dayjs('2021-01-01'),
35+
dayjs('2021-01-08'),
36+
]} />
3337
</div>
3438
);
3539
};

‎src/PickerInput/hooks/useFilledProps.ts‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -211,12 +211,5 @@ export default function useFilledProps<
211211
[filledProps, mergedNeedConfirm, mergedInputReadOnly, disabledBoundaryDate],
212212
);
213213

214-
return [
215-
mergedProps,
216-
internalPicker,
217-
complexPicker,
218-
formatList,
219-
maskFormat,
220-
isInvalidateDate,
221-
];
214+
return [mergedProps, internalPicker, complexPicker, formatList, maskFormat, isInvalidateDate];
222215
}

‎src/hooks/useTimeConfig.ts‎

Lines changed: 65 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,55 @@ export interface ComponentProps<DateType extends object> {
6666
format?: SharedPickerProps['format'];
6767
}
6868

69+
/** Check if all the showXXX is `undefined` */
70+
function existShowConfig(
71+
showHour: boolean,
72+
showMinute: boolean,
73+
showSecond: boolean,
74+
showMillisecond: boolean,
75+
) {
76+
return [showHour, showMinute, showSecond, showMillisecond].some((show) => show !== undefined);
77+
}
78+
79+
/** Fill the showXXX if needed */
80+
function fillShowConfig(
81+
hasShowConfig: boolean,
82+
showHour: boolean,
83+
showMinute: boolean,
84+
showSecond: boolean,
85+
showMillisecond: boolean,
86+
): [showHour: boolean, showMinute: boolean, showSecond: boolean, showMillisecond: boolean] {
87+
let parsedShowHour = showHour;
88+
let parsedShowMinute = showMinute;
89+
let parsedShowSecond = showSecond;
90+
91+
if (
92+
!hasShowConfig &&
93+
!parsedShowHour &&
94+
!parsedShowMinute &&
95+
!parsedShowSecond &&
96+
!showMillisecond
97+
) {
98+
parsedShowHour = true;
99+
parsedShowMinute = true;
100+
parsedShowSecond = true;
101+
} else if (hasShowConfig) {
102+
const existFalse = [parsedShowHour, parsedShowMinute, parsedShowSecond].some(
103+
(show) => show === false,
104+
);
105+
const existTrue = [parsedShowHour, parsedShowMinute, parsedShowSecond].some(
106+
(show) => show === true,
107+
);
108+
const defaultShow = existFalse ? true : !existTrue;
109+
110+
parsedShowHour = parsedShowHour ?? defaultShow;
111+
parsedShowMinute = parsedShowMinute ?? defaultShow;
112+
parsedShowSecond = parsedShowSecond ?? defaultShow;
113+
}
114+
115+
return [parsedShowHour, parsedShowMinute, parsedShowSecond, showMillisecond];
116+
}
117+
69118
/**
70119
* Get `showHour`, `showMinute`, `showSecond` or other from the props.
71120
* This is pure function, will not get `showXXX` from the `format` prop.
@@ -91,12 +140,15 @@ export function getTimeProps<DateType extends object>(
91140

92141
const { showMillisecond } = timeConfig;
93142
let { showHour, showMinute, showSecond } = timeConfig;
143+
const hasShowConfig = existShowConfig(showHour, showMinute, showSecond, showMillisecond);
94144

95-
if (!showHour && !showMinute && !showSecond && !showMillisecond) {
96-
showHour = true;
97-
showMinute = true;
98-
showSecond = true;
99-
}
145+
[showHour, showMinute, showSecond] = fillShowConfig(
146+
hasShowConfig,
147+
showHour,
148+
showMinute,
149+
showSecond,
150+
showMillisecond,
151+
);
100152

101153
return [
102154
timeConfig,
@@ -145,9 +197,7 @@ export function fillShowTimeConfig<DateType extends object>(
145197

146198
const showMeridiem = checkShow(baselineFormat, ['a', 'A', 'LT', 'LLL', 'LTS'], use12Hours);
147199

148-
const hasShowConfig = [showHour, showMinute, showSecond, showMillisecond].some(
149-
(show) => show !== undefined,
150-
);
200+
const hasShowConfig = existShowConfig(showHour, showMinute, showSecond, showMillisecond);
151201

152202
// Fill with format, if needed
153203
if (!hasShowConfig) {
@@ -158,11 +208,13 @@ export function fillShowTimeConfig<DateType extends object>(
158208
}
159209

160210
// Fallback if all can not see
161-
if (!hasShowConfig && !showHour && !showMinute && !showSecond && !showMillisecond) {
162-
showHour = true;
163-
showMinute = true;
164-
showSecond = true;
165-
}
211+
[showHour, showMinute, showSecond] = fillShowConfig(
212+
hasShowConfig,
213+
showHour,
214+
showMinute,
215+
showSecond,
216+
showMillisecond,
217+
);
166218

167219
// ======================== Format ========================
168220
const timeFormat =

‎tests/new-range.spec.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,6 @@ describe('NewPicker.Range', () => {
281281
const { rerender } = render(<DayRangePicker picker="time" format="LT" open />);
282282
expect(document.querySelectorAll('.rc-picker-time-panel-column')).toHaveLength(3);
283283

284-
console.log('~~~~~~~~~~~~~~~~');
285284
// With second
286285
rerender(<DayRangePicker picker="time" format="LTS" open />);
287286
expect(document.querySelectorAll('.rc-picker-time-panel-column')).toHaveLength(4);

‎tests/range.spec.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1722,7 +1722,6 @@ describe('Picker.Range', () => {
17221722
/>,
17231723
);
17241724
openPicker(container, 1);
1725-
console.log(document.querySelector<HTMLElement>('.rc-picker-panel-container').style.cssText);
17261725
expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({ marginLeft: 0 });
17271726
mock.mockRestore();
17281727
});

‎tests/time.spec.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { render } from '@testing-library/react';
2+
import { resetWarned } from 'rc-util/lib/warning';
3+
import React from 'react';
4+
import { DayPicker, getDay, openPicker, selectCell } from './util/commonUtil';
5+
6+
describe('Picker.Time', () => {
7+
beforeEach(() => {
8+
resetWarned();
9+
jest.useFakeTimers().setSystemTime(getDay('1990-09-03 00:00:00').valueOf());
10+
});
11+
12+
afterEach(() => {
13+
jest.clearAllTimers();
14+
jest.useRealTimers();
15+
});
16+
17+
it('show columns for one of it is false', async () => {
18+
const { container } = render(<DayPicker showTime showMinute={false} />);
19+
20+
openPicker(container);
21+
expect(document.querySelectorAll('.rc-picker-time-panel-column')).toHaveLength(2);
22+
23+
// Select
24+
selectCell(3);
25+
26+
expect(container.querySelector('input')).toHaveValue('1990-09-03 00:00');
27+
});
28+
});

‎tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
".dumirc.ts",
1818
"src/**/*.ts",
1919
"src/**/*.tsx",
20-
"docs/examples/focus.tsx",
20+
"docs/examples/*.tsx",
2121
"tests/**/*.ts",
2222
"tests/**/*.tsx"
2323
]

0 commit comments

Comments
 (0)