diff --git a/README.md b/README.md index 3126b54d5..64f88d919 100644 --- a/README.md +++ b/README.md @@ -103,7 +103,7 @@ render(, mountNode); | renderExtraFooter | (mode) => React.Node | | extra footer | | onSelect | Function(date: moment) | | a callback function, can be executed when the selected time | | onPanelChange | Function(value: moment, mode) | | callback when picker panel mode is changed | -| onMouseDown | (event:React.MouseEvent\) => void | | callback when executed onMouseDown evnent | +| onMouseDown | (event:React.MouseEvent\) => void | | callback when executed onMouseDown event | | direction | String: ltr or rtl | | Layout direction of picker component, it supports RTL direction too. | ### RangePicker diff --git a/assets/index.less b/assets/index.less index 620649fac..0178d0473 100644 --- a/assets/index.less +++ b/assets/index.less @@ -30,10 +30,10 @@ border: 1px solid blue; } &-panel { - border: 1px solid #666; - background: @background-color; display: inline-block; vertical-align: top; + background: @background-color; + border: 1px solid #666; &-focused { border-color: blue; @@ -73,8 +73,8 @@ text-align: center; > button { - border: 0; padding: 0; + border: 0; } } } @@ -88,19 +88,19 @@ } &-inner { - font-size: 12px; - width: 100%; - height: 20px; - line-height: 20px; display: inline-block; box-sizing: border-box; - border: 0; - padding: 0; + width: 100%; + height: 20px; margin: 0; + padding: 0; + font-size: 12px; + line-height: 20px; background: transparent; - cursor: pointer; - outline: none; + border: 0; border: none; + outline: none; + cursor: pointer; transition: background 0.3s, border 0.3s; &:hover { @@ -120,15 +120,15 @@ &-range-hover { position: relative; &::after { - content: ''; position: absolute; top: 3px; + right: 0; bottom: 0; left: 0; - right: 0; border: 1px solid green; - border-left: 0; border-right: 0; + border-left: 0; + content: ''; pointer-events: none; } } @@ -200,9 +200,9 @@ } .@{prefix-cls}-cell-week { - font-size: 12px; color: #999; font-weight: bold; + font-size: 12px; } .@{prefix-cls}-cell:hover > .@{prefix-cls}-cell-inner, @@ -229,15 +229,15 @@ &-column { flex: none; - text-align: left; - list-style: none; + width: 50px; margin: 0; padding: 0 0 180px 0; - overflow-y: hidden; overflow-x: hidden; - width: 50px; - transition: background 0.3s; + overflow-y: hidden; font-size: 12px; + text-align: left; + list-style: none; + transition: background 0.3s; &-active { background: rgba(0, 0, 255, 0.1); @@ -248,18 +248,24 @@ } > li { - padding: 0; margin: 0; + padding: 0; cursor: pointer; + &.@{prefix-cls}-time-panel-cell { + &-disabled { + opacity: 0.5; + } + } + .@{prefix-cls}-time-panel-cell-inner { - color: #333; - padding: 0 0 0 12px; - margin: 0; - height: 20px; - line-height: 20px; display: block; width: 100%; + height: 20px; + margin: 0; + padding: 0 0 0 12px; + color: #333; + line-height: 20px; text-align: left; .@{prefix-cls}-panel-rtl & { @@ -321,8 +327,8 @@ &-clear { position: absolute; - right: 4px; top: 0; + right: 4px; cursor: pointer; .@{prefix-cls}-rtl & { @@ -368,28 +374,28 @@ .@{prefix-cls}-range-arrow { position: absolute; + left: @arrow-size; + z-index: 1; width: @arrow-size; height: @arrow-size; - z-index: 1; - left: @arrow-size; margin-left: 10px; transition: all 0.3s; .@{prefix-cls}-dropdown-rtl& { right: @arrow-size; left: auto; - margin-left: 0; margin-right: 10px; + margin-left: 0; } &::before, &::after { - content: ''; position: absolute; - box-sizing: border-box; top: 50%; left: 50%; + box-sizing: border-box; transform: translate(-50%, -50%); + content: ''; .@{prefix-cls}-dropdown-rtl& { right: 50%; @@ -408,8 +414,7 @@ width: @arrow-size - 2px; height: @arrow-size - 2px; border: (@arrow-size - 2px) / 2 solid blue; - border-color: @background-color @background-color transparent - transparent; + border-color: @background-color @background-color transparent transparent; } } } @@ -418,20 +423,20 @@ // = Range Picker = // ======================================================== &-range { - display: inline-flex; position: relative; + display: inline-flex; &-wrapper { display: flex; } .@{prefix-cls}-active-bar { - background: green; bottom: 0; height: 3px; - pointer-events: none; - transition: all 0.3s; + background: green; opacity: 0; + transition: all 0.3s; + pointer-events: none; } &.@{prefix-cls}-focused { diff --git a/docs/demo/time.md b/docs/demo/time.md new file mode 100644 index 000000000..640d32f31 --- /dev/null +++ b/docs/demo/time.md @@ -0,0 +1,2 @@ +## time + diff --git a/docs/examples/time.tsx b/docs/examples/time.tsx new file mode 100644 index 000000000..51a4fe9ff --- /dev/null +++ b/docs/examples/time.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import moment from 'moment'; +import Picker, { RangePicker } from '../../src'; +import momentGenerateConfig from '../../src/generate/moment'; +import zhCN from '../../src/locale/zh_CN'; +import '../../assets/index.less'; + +const defaultValue = moment('2019-11-28 01:02:03'); + +export default () => { + return ( +
+

DatePicker

+ ({ + disabledHours: () => [1, 2, 3, 4, 5, 6], + })} + locale={zhCN} + generateConfig={momentGenerateConfig} + /> + +

TimePicker

+ ({ + disabledHours: () => [now.hours()], + })} + generateConfig={momentGenerateConfig} + /> + +

RangePicker

+ ({ + disabledHours: () => (type === 'start' ? [now.hours()] : [now.hours() - 5]), + })} + /> +
+ ); +}; diff --git a/src/Picker.tsx b/src/Picker.tsx index d6d0e3e89..acc07739e 100644 --- a/src/Picker.tsx +++ b/src/Picker.tsx @@ -33,6 +33,7 @@ import usePickerInput from './hooks/usePickerInput'; import useTextValueMapping from './hooks/useTextValueMapping'; import useValueTexts from './hooks/useValueTexts'; import useHoverValue from './hooks/useHoverValue'; +import { legacyPropsWarning } from './utils/warnUtil'; export type PickerRefConfig = { focus: () => void; @@ -180,6 +181,11 @@ function InnerPicker(props: PickerProps) { const needConfirmButton: boolean = (picker === 'date' && !!showTime) || picker === 'time'; + // ============================ Warning ============================ + if (process.env.NODE_ENV !== 'production') { + legacyPropsWarning(props); + } + // ============================= State ============================= const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours)); diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index d52903412..49f898ff8 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -33,6 +33,7 @@ import getRanges from './utils/getRanges'; import useRangeViewDates from './hooks/useRangeViewDates'; import type { DateRender } from './panels/DatePanel/DateBody'; import useHoverValue from './hooks/useHoverValue'; +import { legacyPropsWarning } from './utils/warnUtil'; function reorderValues( values: RangeValue, @@ -233,6 +234,11 @@ function InnerRangePicker(props: RangePickerProps) { const startInputRef = useRef(null); const endInputRef = useRef(null); + // ============================ Warning ============================ + if (process.env.NODE_ENV !== 'production') { + legacyPropsWarning(props); + } + // ============================= Misc ============================== const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours)); diff --git a/src/panels/DatetimePanel/index.tsx b/src/panels/DatetimePanel/index.tsx index a3e5d490f..90efe72d0 100644 --- a/src/panels/DatetimePanel/index.tsx +++ b/src/panels/DatetimePanel/index.tsx @@ -13,10 +13,7 @@ export type DatetimePanelProps = { disabledTime?: DisabledTime; showTime?: boolean | SharedTimeProps; defaultValue?: DateType; -} & Omit< - DatePanelProps, - 'disabledHours' | 'disabledMinutes' | 'disabledSeconds' - >; +} & Omit, 'disabledHours' | 'disabledMinutes' | 'disabledSeconds'>; const ACTIVE_PANEL = tuple('date', 'time'); type ActivePanelType = typeof ACTIVE_PANEL[number]; @@ -33,9 +30,7 @@ function DatetimePanel(props: DatetimePanelProps) { onSelect, } = props; const panelPrefixCls = `${prefixCls}-datetime-panel`; - const [activePanel, setActivePanel] = React.useState( - null, - ); + const [activePanel, setActivePanel] = React.useState(null); const dateOperationRef = React.useRef({}); const timeOperationRef = React.useRef({}); @@ -57,7 +52,7 @@ function DatetimePanel(props: DatetimePanelProps) { }; operationRef.current = { - onKeyDown: event => { + onKeyDown: (event) => { // Switch active panel if (event.which === KeyCode.TAB) { const nextActivePanel = getNextActive(event.shiftKey ? -1 : 1); @@ -72,8 +67,7 @@ function DatetimePanel(props: DatetimePanelProps) { // Operate on current active panel if (activePanel) { - const ref = - activePanel === 'date' ? dateOperationRef : timeOperationRef; + const ref = activePanel === 'date' ? dateOperationRef : timeOperationRef; if (ref.current && ref.current.onKeyDown) { ref.current.onKeyDown(event); @@ -83,11 +77,7 @@ function DatetimePanel(props: DatetimePanelProps) { } // Switch first active panel if operate without panel - if ( - [KeyCode.LEFT, KeyCode.RIGHT, KeyCode.UP, KeyCode.DOWN].includes( - event.which, - ) - ) { + if ([KeyCode.LEFT, KeyCode.RIGHT, KeyCode.UP, KeyCode.DOWN].includes(event.which)) { setActivePanel('date'); return true; } @@ -117,18 +107,9 @@ function DatetimePanel(props: DatetimePanelProps) { generateConfig.getSecond(timeProps.defaultValue), ); } else if (source === 'time' && !value && defaultValue) { - selectedDate = generateConfig.setYear( - selectedDate, - generateConfig.getYear(defaultValue), - ); - selectedDate = generateConfig.setMonth( - selectedDate, - generateConfig.getMonth(defaultValue), - ); - selectedDate = generateConfig.setDate( - selectedDate, - generateConfig.getDate(defaultValue), - ); + selectedDate = generateConfig.setYear(selectedDate, generateConfig.getYear(defaultValue)); + selectedDate = generateConfig.setMonth(selectedDate, generateConfig.getMonth(defaultValue)); + selectedDate = generateConfig.setDate(selectedDate, generateConfig.getDate(defaultValue)); } if (onSelect) { @@ -149,14 +130,12 @@ function DatetimePanel(props: DatetimePanelProps) { {...props} operationRef={dateOperationRef} active={activePanel === 'date'} - onSelect={date => { + onSelect={(date) => { onInternalSelect( setTime( generateConfig, date, - showTime && typeof showTime === 'object' - ? showTime.defaultValue - : null, + showTime && typeof showTime === 'object' ? showTime.defaultValue : null, ), 'date', ); @@ -167,10 +146,11 @@ function DatetimePanel(props: DatetimePanelProps) { format={undefined} {...timeProps} {...disabledTimes} + disabledTime={null} defaultValue={undefined} operationRef={timeOperationRef} active={activePanel === 'time'} - onSelect={date => { + onSelect={(date) => { onInternalSelect(date, 'time'); }} /> diff --git a/src/panels/TimePanel/TimeBody.tsx b/src/panels/TimePanel/TimeBody.tsx index daba920e1..186182a4e 100644 --- a/src/panels/TimePanel/TimeBody.tsx +++ b/src/panels/TimePanel/TimeBody.tsx @@ -65,10 +65,12 @@ function TimeBody(props: TimeBodyProps) { disabledHours, disabledMinutes, disabledSeconds, + disabledTime, hideDisabledOptions, onSelect, } = props; + // Misc const columns: { node: React.ReactElement; value: number; @@ -84,6 +86,22 @@ function TimeBody(props: TimeBodyProps) { const minute = value ? generateConfig.getMinute(value) : -1; const second = value ? generateConfig.getSecond(value) : -1; + // Disabled Time + const now = generateConfig.getNow(); + const [mergedDisabledHours, mergedDisabledMinutes, mergedDisabledSeconds] = React.useMemo(() => { + if (disabledTime) { + const disabledConfig = disabledTime(now); + return [ + disabledConfig.disabledHours, + disabledConfig.disabledMinutes, + disabledConfig.disabledSeconds, + ]; + } + + return [disabledHours, disabledMinutes, disabledSeconds]; + }, [disabledHours, disabledMinutes, disabledSeconds, disabledTime, now]); + + // Set Time const setTime = ( isNewPM: boolean | undefined, newHour: number, @@ -108,7 +126,7 @@ function TimeBody(props: TimeBodyProps) { }; // ========================= Unit ========================= - const rawHours = generateUnits(0, 23, hourStep, disabledHours && disabledHours()); + const rawHours = generateUnits(0, 23, hourStep, mergedDisabledHours && mergedDisabledHours()); const memorizedRawHours = useMemo(() => rawHours, rawHours, shouldUnitsUpdate); @@ -137,8 +155,8 @@ function TimeBody(props: TimeBodyProps) { const hours = React.useMemo(() => { if (!use12Hours) return memorizedRawHours; return memorizedRawHours - .filter(isPM ? hourMeta => hourMeta.value >= 12 : hourMeta => hourMeta.value < 12) - .map(hourMeta => { + .filter(isPM ? (hourMeta) => hourMeta.value >= 12 : (hourMeta) => hourMeta.value < 12) + .map((hourMeta) => { const hourValue = hourMeta.value % 12; const hourLabel = hourValue === 0 ? '12' : leftPad(hourValue, 2); return { @@ -149,21 +167,26 @@ function TimeBody(props: TimeBodyProps) { }); }, [use12Hours, isPM, memorizedRawHours]); - const minutes = generateUnits(0, 59, minuteStep, disabledMinutes && disabledMinutes(originHour)); + const minutes = generateUnits( + 0, + 59, + minuteStep, + mergedDisabledMinutes && mergedDisabledMinutes(originHour), + ); const seconds = generateUnits( 0, 59, secondStep, - disabledSeconds && disabledSeconds(originHour, minute), + mergedDisabledSeconds && mergedDisabledSeconds(originHour, minute), ); // ====================== Operations ====================== operationRef.current = { - onUpDown: diff => { + onUpDown: (diff) => { const column = columns[activeColumnIndex]; if (column) { - const valueIndex = column.units.findIndex(unit => unit.value === column.value); + const valueIndex = column.units.findIndex((unit) => unit.value === column.value); const unitLen = column.units.length; for (let i = 1; i < unitLen; i += 1) { @@ -204,17 +227,17 @@ function TimeBody(props: TimeBodyProps) { } // Hour - addColumnNode(showHour, , hour, hours, num => { + addColumnNode(showHour, , hour, hours, (num) => { onSelect(setTime(isPM, num, minute, second), 'mouse'); }); // Minute - addColumnNode(showMinute, , minute, minutes, num => { + addColumnNode(showMinute, , minute, minutes, (num) => { onSelect(setTime(isPM, hour, num, second), 'mouse'); }); // Second - addColumnNode(showSecond, , second, seconds, num => { + addColumnNode(showSecond, , second, seconds, (num) => { onSelect(setTime(isPM, hour, minute, num), 'mouse'); }); @@ -232,7 +255,7 @@ function TimeBody(props: TimeBodyProps) { { label: 'AM', value: 0, disabled: AMDisabled }, { label: 'PM', value: 1, disabled: PMDisabled }, ], - num => { + (num) => { onSelect(setTime(!!num, hour, minute, second), 'mouse'); }, ); diff --git a/src/panels/TimePanel/index.tsx b/src/panels/TimePanel/index.tsx index 0b490f3b5..8025a3a14 100644 --- a/src/panels/TimePanel/index.tsx +++ b/src/panels/TimePanel/index.tsx @@ -18,15 +18,25 @@ export type SharedTimeProps = { secondStep?: number; hideDisabledOptions?: boolean; defaultValue?: DateType; -} & DisabledTimes; + + /** @deprecated Please use `disabledTime` instead. */ + disabledHours?: DisabledTimes['disabledHours']; + /** @deprecated Please use `disabledTime` instead. */ + disabledMinutes?: DisabledTimes['disabledMinutes']; + /** @deprecated Please use `disabledTime` instead. */ + disabledSeconds?: DisabledTimes['disabledSeconds']; + + disabledTime?: (date: DateType) => DisabledTimes; +}; export type TimePanelProps = { format?: string; active?: boolean; -} & PanelSharedProps & SharedTimeProps; +} & PanelSharedProps & + SharedTimeProps; const countBoolean = (boolList: (boolean | undefined)[]) => - boolList.filter(bool => bool !== false).length; + boolList.filter((bool) => bool !== false).length; function TimePanel(props: TimePanelProps) { const { @@ -50,12 +60,12 @@ function TimePanel(props: TimePanelProps) { const columnsCount = countBoolean([showHour, showMinute, showSecond, use12Hours]); operationRef.current = { - onKeyDown: event => + onKeyDown: (event) => createKeyDownHandler(event, { - onLeftRight: diff => { + onLeftRight: (diff) => { setActiveColumnIndex((activeColumnIndex + diff + columnsCount) % columnsCount); }, - onUpDown: diff => { + onUpDown: (diff) => { if (activeColumnIndex === -1) { setActiveColumnIndex(0); } else if (bodyOperationRef.current) { diff --git a/src/utils/warnUtil.ts b/src/utils/warnUtil.ts new file mode 100644 index 000000000..6e169a121 --- /dev/null +++ b/src/utils/warnUtil.ts @@ -0,0 +1,17 @@ +import type { DisabledTimes, PickerMode } from '../interface'; +import warning from 'rc-util/lib/warning'; + +export interface WarningProps extends DisabledTimes { + picker?: PickerMode; +} + +export function legacyPropsWarning(props: WarningProps) { + const { picker, disabledHours, disabledMinutes, disabledSeconds } = props; + + if (picker === 'time' && (disabledHours || disabledMinutes || disabledSeconds)) { + warning( + false, + `'disabledHours', 'disabledMinutes', 'disabledSeconds' will be removed in the next major version, please use 'disabledTime' instead.`, + ); + } +} diff --git a/tests/disabledTime.spec.tsx b/tests/disabledTime.spec.tsx new file mode 100644 index 000000000..a48c61984 --- /dev/null +++ b/tests/disabledTime.spec.tsx @@ -0,0 +1,118 @@ +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'; + +describe('Picker.DisabledTime', () => { + it('disabledTime on TimePicker', () => { + const wrapper = mount( + ({ + disabledSeconds: () => new Array(59).fill(0).map((_, index) => index), + })} + />, + ); + + expect( + wrapper.find('ul.rc-picker-time-panel-column li.rc-picker-time-panel-cell-disabled'), + ).toHaveLength(59); + }); + + it('disabledTime on TimeRangePicker', () => { + const wrapper = mount( + ({ + disabledHours: () => (type === 'start' ? [1, 3, 5] : [2, 4]), + })} + />, + ); + + expect( + wrapper.find('ul.rc-picker-time-panel-column li.rc-picker-time-panel-cell-disabled'), + ).toHaveLength(3); + + // Click another one + wrapper.find('input').last().simulate('mouseDown'); + expect( + wrapper.find('ul.rc-picker-time-panel-column li.rc-picker-time-panel-cell-disabled'), + ).toHaveLength(2); + }); + + it('disabledTime', () => { + /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ + const disabledTime = jest.fn((_: Moment | null, __: 'start' | 'end') => ({ + disabledHours: () => [11], + })); + + const wrapper = mount( + , + ); + + // Start + wrapper.openPicker(); + expect( + wrapper + .find('PickerPanel') + .first() + .find('.rc-picker-time-panel-column') + .first() + .find('li') + .at(11) + .hasClass('rc-picker-time-panel-cell-disabled'), + ).toBeTruthy(); + expect(isSame(disabledTime.mock.calls[0][0], '1989-11-28')).toBeTruthy(); + expect(disabledTime.mock.calls[0][1]).toEqual('start'); + wrapper.closePicker(); + + // End + disabledTime.mockClear(); + wrapper.openPicker(1); + expect( + wrapper + .find('PickerPanel') + .last() + .find('.rc-picker-time-panel-column') + .first() + .find('li') + .at(11) + .hasClass('rc-picker-time-panel-cell-disabled'), + ).toBeTruthy(); + expect(isSame(disabledTime.mock.calls[0][0], '1990-09-03')).toBeTruthy(); + expect(disabledTime.mock.calls[0][1]).toEqual('end'); + wrapper.closePicker(1); + }); + + describe('warning for legacy props', () => { + it('single', () => { + resetWarned(); + const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + + mount( []} />); + expect(errSpy).toHaveBeenCalledWith( + "Warning: 'disabledHours', 'disabledMinutes', 'disabledSeconds' will be removed in the next major version, please use 'disabledTime' instead.", + ); + + errSpy.mockRestore(); + }); + + it('range', () => { + resetWarned(); + const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + + mount( []} />); + expect(errSpy).toHaveBeenCalledWith( + "Warning: 'disabledHours', 'disabledMinutes', 'disabledSeconds' will be removed in the next major version, please use 'disabledTime' instead.", + ); + + errSpy.mockRestore(); + }); + }); +}); diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 9223f9705..af724a54e 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -370,54 +370,6 @@ describe('Picker.Range', () => { wrapper.closePicker(1); }); - it('disabledTime', () => { - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - const disabledTime = jest.fn((_: Moment | null, __: 'start' | 'end') => ({ - disabledHours: () => [11], - })); - - const wrapper = mount( - , - ); - - // Start - wrapper.openPicker(); - expect( - wrapper - .find('PickerPanel') - .first() - .find('.rc-picker-time-panel-column') - .first() - .find('li') - .at(11) - .hasClass('rc-picker-time-panel-cell-disabled'), - ).toBeTruthy(); - expect(isSame(disabledTime.mock.calls[0][0], '1989-11-28')).toBeTruthy(); - expect(disabledTime.mock.calls[0][1]).toEqual('start'); - wrapper.closePicker(); - - // End - disabledTime.mockClear(); - wrapper.openPicker(1); - expect( - wrapper - .find('PickerPanel') - .last() - .find('.rc-picker-time-panel-column') - .first() - .find('li') - .at(11) - .hasClass('rc-picker-time-panel-cell-disabled'), - ).toBeTruthy(); - expect(isSame(disabledTime.mock.calls[0][0], '1990-09-03')).toBeTruthy(); - expect(disabledTime.mock.calls[0][1]).toEqual('end'); - wrapper.closePicker(1); - }); - describe('focus test', () => { let domMock: ReturnType; let focused = false;