refactor: time-picker

pull/4499/head
tangjinzhou 2021-08-05 09:09:58 +08:00
parent ff49f57754
commit 11b718518d
6 changed files with 48 additions and 17 deletions

View File

@ -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 = () => {

View File

@ -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 = () => {

View File

@ -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 & {

View File

@ -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 = () => {

View File

@ -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,

View File

@ -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,