ant-design/components/time-picker/index.tsx
MadCcc 010f82bd1a
feat: ConfigProvider support variant (#49535)
* feat: ConfigProvider support variant

* docs: add docs for variant

* feat: support config all components variant

* chore: fix lint

* chore: add test

* test: add test
2024-06-21 17:47:09 +08:00

99 lines
2.8 KiB
TypeScript

import * as React from 'react';
import type { Dayjs } from 'dayjs';
import genPurePanel from '../_util/PurePanel';
import type { InputStatus } from '../_util/statusUtils';
import type { AnyObject } from '../_util/type';
import { devUseWarning } from '../_util/warning';
import DatePicker from '../date-picker';
import type {
GenericTimePickerProps,
PickerPropsWithMultiple,
RangePickerProps,
} from '../date-picker/generatePicker/interface';
import useVariant from '../form/hooks/useVariants';
export type PickerTimeProps<DateType extends AnyObject> = PickerPropsWithMultiple<
DateType,
GenericTimePickerProps<DateType>
>;
export type RangePickerTimeProps<DateType extends AnyObject> = Omit<
RangePickerProps<DateType>,
'showTime' | 'picker'
>;
const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker;
export interface TimePickerLocale {
placeholder?: string;
rangePlaceholder?: [string, string];
}
export interface TimeRangePickerProps extends Omit<RangePickerTimeProps<Dayjs>, 'picker'> {
popupClassName?: string;
}
const RangePicker = React.forwardRef<any, TimeRangePickerProps>((props, ref) => (
<InternalRangePicker {...props} picker="time" mode={undefined} ref={ref} />
));
export interface TimePickerProps extends Omit<PickerTimeProps<Dayjs>, 'picker'> {
addon?: () => React.ReactNode;
status?: InputStatus;
popupClassName?: string;
rootClassName?: string;
}
const TimePicker = React.forwardRef<any, TimePickerProps>(
({ addon, renderExtraFooter, variant, bordered, ...restProps }, ref) => {
if (process.env.NODE_ENV !== 'production') {
const warning = devUseWarning('TimePicker');
warning.deprecated(!addon, 'addon', 'renderExtraFooter');
}
const [mergedVariant] = useVariant('timePicker', variant, bordered);
const internalRenderExtraFooter = React.useMemo(() => {
if (renderExtraFooter) {
return renderExtraFooter;
}
if (addon) {
return addon;
}
return undefined;
}, [addon, renderExtraFooter]);
return (
<InternalTimePicker
{...restProps}
mode={undefined}
ref={ref}
renderExtraFooter={internalRenderExtraFooter}
variant={mergedVariant}
/>
);
},
);
if (process.env.NODE_ENV !== 'production') {
TimePicker.displayName = 'TimePicker';
}
// We don't care debug panel
/* istanbul ignore next */
const PurePanel = genPurePanel(TimePicker, 'picker');
(TimePicker as MergedTimePicker)._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
type MergedTimePicker = typeof TimePicker & {
RangePicker: typeof RangePicker;
_InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
};
(TimePicker as MergedTimePicker).RangePicker = RangePicker;
(TimePicker as MergedTimePicker)._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
export default TimePicker as MergedTimePicker;