Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions src/hooks/useTimeSelection.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import type { GenerateConfig } from '../generate';
import type { Unit } from '../panels/TimePanel/TimeUnitColumn';
import { setTime as utilSetTime } from '../utils/timeUtil';

export default function useTimeSelection<DateType>({
value,
generateConfig,
disabledMinutes,
disabledSeconds,
minutes,
seconds,
use12Hours,
}: {
value: DateType;
generateConfig: GenerateConfig<DateType>;
disabledMinutes: (hour: number) => number[];
disabledSeconds: (hour: number, minute: number) => number[];
minutes: Unit[];
seconds: Unit[];
use12Hours: boolean;
}) {
const setTime = (
isNewPM: boolean | undefined,
newHour: number,
newMinute: number,
newSecond: number,
) => {
let newDate = value || generateConfig.getNow();

const mergedHour = Math.max(0, newHour);
let mergedMinute = Math.max(0, newMinute);
let mergedSecond = Math.max(0, newSecond);

const newDisabledMinutes = disabledMinutes && disabledMinutes(mergedHour);
if (newDisabledMinutes?.includes(mergedMinute)) {
// find the first available minute in minutes
const availableMinute = minutes.find((i) => !newDisabledMinutes.includes(i.value));
if (availableMinute) {
mergedMinute = availableMinute.value;
} else {
return null;
}
}
const newDisabledSeconds = disabledSeconds && disabledSeconds(mergedHour, mergedMinute);
if (newDisabledSeconds?.includes(mergedSecond)) {
// find the first available second in seconds
const availableSecond = seconds.find((i) => !newDisabledSeconds.includes(i.value));
if (availableSecond) {
mergedSecond = availableSecond.value;
} else {
return null;
}
}

newDate = utilSetTime(
generateConfig,
newDate,
!use12Hours || !isNewPM ? mergedHour : mergedHour + 12,
mergedMinute,
mergedSecond,
);

return newDate;
};

return setTime;
}
43 changes: 15 additions & 28 deletions src/panels/TimePanel/TimeBody.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import * as React from 'react';
import useMemo from 'rc-util/lib/hooks/useMemo';
import * as React from 'react';
import type { SharedTimeProps } from '.';
import type { GenerateConfig } from '../../generate';
import useTimeSelection from '../../hooks/useTimeSelection';
import type { Locale, OnSelect } from '../../interface';
import { leftPad } from '../../utils/miscUtil';
import type { Unit } from './TimeUnitColumn';
import TimeUnitColumn from './TimeUnitColumn';
import { leftPad } from '../../utils/miscUtil';
import type { SharedTimeProps } from '.';
import { setTime as utilSetTime } from '../../utils/timeUtil';

function shouldUnitsUpdate(prevUnits: Unit[], nextUnits: Unit[]) {
if (prevUnits.length !== nextUnits.length) return true;
Expand Down Expand Up @@ -102,30 +102,6 @@ function TimeBody<DateType>(props: TimeBodyProps<DateType>) {
return [disabledHours, disabledMinutes, disabledSeconds];
}, [disabledHours, disabledMinutes, disabledSeconds, disabledTime, now]);

// Set Time
const setTime = (
isNewPM: boolean | undefined,
newHour: number,
newMinute: number,
newSecond: number,
) => {
let newDate = value || generateConfig.getNow();

const mergedHour = Math.max(0, newHour);
const mergedMinute = Math.max(0, newMinute);
const mergedSecond = Math.max(0, newSecond);

newDate = utilSetTime(
generateConfig,
newDate,
!use12Hours || !isNewPM ? mergedHour : mergedHour + 12,
mergedMinute,
mergedSecond,
);

return newDate;
};

// ========================= Unit =========================
const rawHours = generateUnits(0, 23, hourStep, mergedDisabledHours && mergedDisabledHours());

Expand Down Expand Up @@ -182,6 +158,17 @@ function TimeBody<DateType>(props: TimeBodyProps<DateType>) {
mergedDisabledSeconds && mergedDisabledSeconds(originHour, minute),
);

// Set Time
const setTime = useTimeSelection({
value,
generateConfig,
disabledMinutes: mergedDisabledMinutes,
disabledSeconds: mergedDisabledSeconds,
minutes,
seconds,
use12Hours,
});

// ====================== Operations ======================
operationRef.current = {
onUpDown: (diff) => {
Expand Down
59 changes: 57 additions & 2 deletions tests/disabledTime.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import type { Moment } from 'moment';
import { resetWarned } from 'rc-util/lib/warning';
import { mount, getMoment, isSame, MomentPicker, MomentRangePicker } from './util/commonUtil';
import { getMoment, isSame, MomentPicker, MomentRangePicker, mount } from './util/commonUtil';

describe('Picker.DisabledTime', () => {
it('disabledTime on TimePicker', () => {
Expand Down Expand Up @@ -90,6 +89,62 @@ describe('Picker.DisabledTime', () => {
wrapper.closePicker(1);
});

it('dynamic disabledTime should be correct', () => {
const wrapper = mount(
<MomentPicker
open
picker="time"
disabledTime={() => ({
disabledHours: () => [0, 1],
disabledMinutes: (selectedHour) => {
if (selectedHour === 2) {
return [0, 1];
} else {
return [];
}
},
disabledSeconds: (_, selectMinute) => {
if (selectMinute === 2) {
return [0, 1];
} else {
return [];
}
},
})}
/>,
);

wrapper
.find('.rc-picker-time-panel-column')
.first()
.find('.rc-picker-time-panel-cell')
.at(2)
.simulate('click');

wrapper
.find('.rc-picker-time-panel-column')
.at(1)
.find('.rc-picker-time-panel-cell')
.first()
.simulate('click');

wrapper
.find('.rc-picker-time-panel-column')
.at(2)
.find('.rc-picker-time-panel-cell')
.first()
.simulate('click');

wrapper
.find('.rc-picker-time-panel-column')
.first()
.find('.rc-picker-time-panel-cell')
.at(1)
.simulate('click');

expect(wrapper.find('input').prop('value')).toEqual('02:02:02');
});

describe('warning for legacy props', () => {
it('single', () => {
resetWarned();
Expand Down