refactor: time-picker
parent
ff49f57754
commit
11b718518d
|
@ -17,7 +17,10 @@ import { PanelMode, RangeValue } from '../../vc-picker/interface';
|
|||
import { RangePickerSharedProps } from '../../vc-picker/RangePicker';
|
||||
import devWarning from '../../vc-util/devWarning';
|
||||
|
||||
export default function generateRangePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
|
||||
export default function generateRangePicker<DateType>(
|
||||
generateConfig: GenerateConfig<DateType>,
|
||||
extraProps: Record<string, any> = {},
|
||||
) {
|
||||
const RangePicker = defineComponent<RangePickerProps<DateType> & ExtraRangePickerProps<DateType>>(
|
||||
{
|
||||
name: 'ARangePicker',
|
||||
|
@ -25,6 +28,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
|
|||
props: {
|
||||
...commonProps<DateType>(),
|
||||
...rangePickerProps<DateType>(),
|
||||
...extraProps,
|
||||
} as any,
|
||||
slots: [
|
||||
'suffixIcon',
|
||||
|
@ -44,6 +48,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
|
|||
'ok',
|
||||
'openChange',
|
||||
'update:value',
|
||||
'update:open',
|
||||
'calendarChange',
|
||||
'focus',
|
||||
'blur',
|
||||
|
@ -75,6 +80,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
|
|||
emit('change', values, dateStrings);
|
||||
};
|
||||
const onOpenChange = (open: boolean) => {
|
||||
emit('update:open', open);
|
||||
emit('openChange', open);
|
||||
};
|
||||
const onFoucs = () => {
|
||||
|
|
|
@ -15,7 +15,10 @@ import classNames from '../../_util/classNames';
|
|||
import { commonProps, datePickerProps, ExtraDatePickerProps } from './props';
|
||||
import devWarning from '../../vc-util/devWarning';
|
||||
|
||||
export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
|
||||
export default function generatePicker<DateType>(
|
||||
generateConfig: GenerateConfig<DateType>,
|
||||
extraProps: Record<string, any> = {},
|
||||
) {
|
||||
type DatePickerProps = PickerProps<DateType> & ExtraDatePickerProps<DateType>;
|
||||
|
||||
function getPicker<InnerPickerProps extends DatePickerProps>(
|
||||
|
@ -28,6 +31,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
|
|||
props: {
|
||||
...commonProps<DateType>(),
|
||||
...datePickerProps<DateType>(),
|
||||
...extraProps,
|
||||
} as any,
|
||||
slots: [
|
||||
'suffixIcon',
|
||||
|
@ -41,7 +45,16 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
|
|||
'renderExtraFooter',
|
||||
'monthCellRender',
|
||||
],
|
||||
emits: ['change', 'openChange', 'focus', 'blur', 'panelChange', 'ok', 'update:value'],
|
||||
emits: [
|
||||
'change',
|
||||
'openChange',
|
||||
'focus',
|
||||
'blur',
|
||||
'panelChange',
|
||||
'ok',
|
||||
'update:value',
|
||||
'update:open',
|
||||
],
|
||||
setup(props, { slots, expose, attrs, emit }) {
|
||||
devWarning(
|
||||
!((props as any).monthCellContentRender || slots.monthCellContentRender),
|
||||
|
@ -73,6 +86,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
|
|||
emit('change', value, dateString);
|
||||
};
|
||||
const onOpenChange = (open: boolean) => {
|
||||
emit('update:open', open);
|
||||
emit('openChange', open);
|
||||
};
|
||||
const onFoucs = () => {
|
||||
|
|
|
@ -125,13 +125,16 @@ export type RangePickerProps<DateType> =
|
|||
| RangePickerDateProps<DateType>
|
||||
| RangePickerTimeProps<DateType>;
|
||||
|
||||
function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
|
||||
function generatePicker<DateType>(
|
||||
generateConfig: GenerateConfig<DateType>,
|
||||
extraProps: Record<string, any> = {},
|
||||
) {
|
||||
// =========================== Picker ===========================
|
||||
const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker } =
|
||||
generateSinglePicker(generateConfig);
|
||||
generateSinglePicker(generateConfig, extraProps);
|
||||
|
||||
// ======================== Range Picker ========================
|
||||
const RangePicker = generateRangePicker(generateConfig);
|
||||
const RangePicker = generateRangePicker(generateConfig, extraProps);
|
||||
|
||||
// =========================== Export ===========================
|
||||
type MergedDatePickerType = typeof DatePicker & {
|
||||
|
|
|
@ -20,20 +20,23 @@ export interface TimePickerLocale {
|
|||
|
||||
const timpePickerProps = {
|
||||
format: String,
|
||||
showNow: Boolean,
|
||||
showHour: Boolean,
|
||||
showMinute: Boolean,
|
||||
showSecond: Boolean,
|
||||
use12Hours: Boolean,
|
||||
showNow: { type: Boolean, default: undefined },
|
||||
showHour: { type: Boolean, default: undefined },
|
||||
showMinute: { type: Boolean, default: undefined },
|
||||
showSecond: { type: Boolean, default: undefined },
|
||||
use12Hours: { type: Boolean, default: undefined },
|
||||
hourStep: Number,
|
||||
minuteStep: Number,
|
||||
secondStep: Number,
|
||||
hideDisabledOptions: Boolean,
|
||||
hideDisabledOptions: { type: Boolean, default: undefined },
|
||||
popupClassName: String,
|
||||
};
|
||||
|
||||
function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
|
||||
const DatePicker = generatePicker<DateType>(generateConfig);
|
||||
const DatePicker = generatePicker<DateType>(generateConfig, {
|
||||
...timpePickerProps,
|
||||
order: { type: Boolean, default: true },
|
||||
});
|
||||
const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker as any;
|
||||
interface TimeRangePickerProps extends Omit<RangePickerTimeProps<DateType>, 'picker'> {
|
||||
popupClassName?: string;
|
||||
|
@ -52,7 +55,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
|
|||
...timpePickerProps,
|
||||
} as any,
|
||||
slot: ['addon', 'renderExtraFooter', 'suffixIcon', 'clearIcon'],
|
||||
emits: ['change', 'openChange', 'focus', 'blur', 'ok', 'update:value'],
|
||||
emits: ['change', 'openChange', 'focus', 'blur', 'ok', 'update:value', 'update:open'],
|
||||
setup(props, { slots, expose, emit, attrs }) {
|
||||
devWarning(
|
||||
!slots.addon,
|
||||
|
@ -73,6 +76,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
|
|||
emit('change', value, dateString);
|
||||
};
|
||||
const onOpenChange = (open: boolean) => {
|
||||
emit('update:open', open);
|
||||
emit('openChange', open);
|
||||
};
|
||||
const onFoucs = () => {
|
||||
|
@ -121,6 +125,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
|
|||
'ok',
|
||||
'openChange',
|
||||
'update:value',
|
||||
'update:open',
|
||||
'calendarChange',
|
||||
'focus',
|
||||
'blur',
|
||||
|
@ -143,6 +148,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
|
|||
emit('change', values, dateStrings);
|
||||
};
|
||||
const onOpenChange = (open: boolean) => {
|
||||
emit('update:open', open);
|
||||
emit('openChange', open);
|
||||
};
|
||||
const onFoucs = () => {
|
||||
|
|
|
@ -442,6 +442,8 @@ function Picker<DateType>() {
|
|||
// Remove `picker` & `format` here since TimePicker is little different with other panel
|
||||
...(props as Omit<MergedPickerProps<DateType>, 'picker' | 'format'>),
|
||||
...attrs,
|
||||
class: undefined,
|
||||
style: undefined,
|
||||
pickerValue: undefined,
|
||||
onPickerValueChange: undefined,
|
||||
onChange: null,
|
||||
|
|
|
@ -139,7 +139,7 @@ function PickerPanel<DateType>() {
|
|||
showToday: Boolean,
|
||||
renderExtraFooter: Function,
|
||||
dateRender: Function,
|
||||
hideHeader: Boolean,
|
||||
hideHeader: { type: Boolean, default: undefined },
|
||||
onSelect: Function,
|
||||
onChange: Function,
|
||||
onPanelChange: Function,
|
||||
|
@ -417,8 +417,8 @@ function PickerPanel<DateType>() {
|
|||
|
||||
// ============================ Panels ============================
|
||||
let panelNode: VueNode;
|
||||
|
||||
const pickerProps = {
|
||||
...attrs,
|
||||
...(props as MergedPickerPanelProps<DateType>),
|
||||
operationRef: panelRef,
|
||||
prefixCls,
|
||||
|
@ -540,7 +540,7 @@ function PickerPanel<DateType>() {
|
|||
prefixCls,
|
||||
components,
|
||||
needConfirmButton: needConfirmButton.value,
|
||||
okDisabled: !mergedValue || (disabledDate && disabledDate(mergedValue.value)),
|
||||
okDisabled: !mergedValue.value || (disabledDate && disabledDate(mergedValue.value)),
|
||||
locale,
|
||||
showNow,
|
||||
onNow: needConfirmButton.value && onNow,
|
||||
|
|
Loading…
Reference in New Issue