refactor: time-picker
tangjinzhou
parent
93566869c6
commit
ff49f57754
|
|
@ -179,7 +179,7 @@ export { default as Tabs, TabPane, TabContent } from './tabs';
|
|||
export type { TagProps } from './tag';
|
||||
export { default as Tag, CheckableTag } from './tag';
|
||||
|
||||
export type { TimePickerProps } from './time-picker';
|
||||
export type { TimePickerProps, TimeRangePickerProps } from './time-picker';
|
||||
export { default as TimePicker } from './time-picker';
|
||||
|
||||
export type { TimelineProps, TimelineItemProps } from './timeline';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import type { App } from 'vue';
|
||||
import dataFnsGenerateConfig from '../vc-picker/generate/dataFns';
|
||||
import dataFnsGenerateConfig from '../vc-picker/generate/dateFns';
|
||||
import type {
|
||||
PickerProps,
|
||||
PickerDateProps,
|
||||
|
|
@ -32,4 +32,10 @@ DatePicker.install = function (app: App) {
|
|||
|
||||
export { RangePicker, WeekPicker, MonthPicker, QuarterPicker };
|
||||
|
||||
export default DatePicker as typeof DatePicker & Plugin;
|
||||
export default DatePicker as typeof DatePicker &
|
||||
Plugin & {
|
||||
readonly RangePicker: typeof RangePicker;
|
||||
readonly MonthPicker: typeof MonthPicker;
|
||||
readonly WeekPicker: typeof WeekPicker;
|
||||
readonly QuarterPicker: typeof QuarterPicker;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -33,4 +33,10 @@ DatePicker.install = function (app: App) {
|
|||
|
||||
export { RangePicker, WeekPicker, MonthPicker, QuarterPicker };
|
||||
|
||||
export default DatePicker as typeof DatePicker & Plugin;
|
||||
export default DatePicker as typeof DatePicker &
|
||||
Plugin & {
|
||||
readonly RangePicker: typeof RangePicker;
|
||||
readonly MonthPicker: typeof MonthPicker;
|
||||
readonly WeekPicker: typeof WeekPicker;
|
||||
readonly QuarterPicker: typeof QuarterPicker;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
|
|||
additionalOverrideProps = {
|
||||
...additionalOverrideProps,
|
||||
...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
|
||||
...(picker === 'time' ? getTimeProps({ format, ...p, picker }) : {}),
|
||||
...(picker === 'time' ? getTimeProps({ format, ...restProps, picker }) : {}),
|
||||
};
|
||||
const pre = prefixCls.value;
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { getPlaceholder } from '../util';
|
|||
import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver';
|
||||
import type { PickerProps, PickerDateProps, PickerTimeProps } from '.';
|
||||
import { getTimeProps, Components } from '.';
|
||||
import { computed, defineComponent, ref } from 'vue';
|
||||
import { computed, DefineComponent, defineComponent, ref } from 'vue';
|
||||
import useConfigInject from '../../_util/hooks/useConfigInject';
|
||||
import classNames from '../../_util/classNames';
|
||||
import { commonProps, datePickerProps, ExtraDatePickerProps } from './props';
|
||||
|
|
@ -21,7 +21,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
|
|||
function getPicker<InnerPickerProps extends DatePickerProps>(
|
||||
picker?: PickerMode,
|
||||
displayName?: string,
|
||||
) {
|
||||
): DefineComponent<InnerPickerProps> {
|
||||
return defineComponent<InnerPickerProps>({
|
||||
name: displayName,
|
||||
inheritAttrs: false,
|
||||
|
|
@ -152,7 +152,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
|
|||
})
|
||||
: {}),
|
||||
...(mergedPicker === 'time'
|
||||
? getTimeProps({ format, ...p, picker: mergedPicker })
|
||||
? getTimeProps({ format, ...restProps, picker: mergedPicker })
|
||||
: {}),
|
||||
};
|
||||
const pre = prefixCls.value;
|
||||
|
|
@ -204,7 +204,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
|
|||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
}) as unknown as DefineComponent<InnerPickerProps>;
|
||||
}
|
||||
|
||||
const DatePicker = getPicker<DatePickerProps>(undefined, 'ADatePicker');
|
||||
|
|
|
|||
|
|
@ -35,4 +35,10 @@ DatePicker.install = function (app: App) {
|
|||
|
||||
export { RangePicker, WeekPicker, MonthPicker, QuarterPicker };
|
||||
|
||||
export default DatePicker as typeof DatePicker & Plugin;
|
||||
export default DatePicker as typeof DatePicker &
|
||||
Plugin & {
|
||||
readonly RangePicker: typeof RangePicker;
|
||||
readonly MonthPicker: typeof MonthPicker;
|
||||
readonly WeekPicker: typeof WeekPicker;
|
||||
readonly QuarterPicker: typeof QuarterPicker;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
import createTimePicker from './time-picker';
|
||||
import dateFnsGenerateConfig from '../vc-picker/generate/dateFns';
|
||||
import { App } from 'vue';
|
||||
import { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
|
||||
|
||||
const { TimePicker, TimeRangePicker } = createTimePicker<Date>(dateFnsGenerateConfig);
|
||||
|
||||
export interface TimeRangePickerProps extends Omit<RangePickerTimeProps<Date>, 'picker'> {
|
||||
popupClassName?: string;
|
||||
valueFormat?: string;
|
||||
}
|
||||
export interface TimePickerProps extends Omit<PickerTimeProps<Date>, 'picker'> {
|
||||
popupClassName?: string;
|
||||
valueFormat?: string;
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
TimePicker.install = function (app: App) {
|
||||
app.component(TimePicker.name, TimePicker);
|
||||
app.component(TimeRangePicker.name, TimeRangePicker);
|
||||
return app;
|
||||
};
|
||||
TimePicker.TimeRangePicker = TimeRangePicker;
|
||||
|
||||
export { TimePicker, TimeRangePicker };
|
||||
|
||||
export default TimePicker as typeof TimePicker &
|
||||
Plugin & {
|
||||
readonly TimeRangePicker: typeof TimeRangePicker;
|
||||
};
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { Dayjs } from 'dayjs';
|
||||
import createTimePicker from './time-picker';
|
||||
import dayjsGenerateConfig from '../vc-picker/generate/dayjs';
|
||||
import { App } from 'vue';
|
||||
import { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
|
||||
|
||||
const { TimePicker, TimeRangePicker } = createTimePicker<Dayjs>(dayjsGenerateConfig);
|
||||
|
||||
export interface TimeRangePickerProps extends Omit<RangePickerTimeProps<Dayjs>, 'picker'> {
|
||||
popupClassName?: string;
|
||||
valueFormat?: string;
|
||||
}
|
||||
export interface TimePickerProps extends Omit<PickerTimeProps<Dayjs>, 'picker'> {
|
||||
popupClassName?: string;
|
||||
valueFormat?: string;
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
TimePicker.install = function (app: App) {
|
||||
app.component(TimePicker.name, TimePicker);
|
||||
app.component(TimeRangePicker.name, TimeRangePicker);
|
||||
return app;
|
||||
};
|
||||
TimePicker.TimeRangePicker = TimeRangePicker;
|
||||
|
||||
export { TimePicker, TimeRangePicker };
|
||||
|
||||
export default TimePicker as typeof TimePicker &
|
||||
Plugin & {
|
||||
readonly TimeRangePicker: typeof TimeRangePicker;
|
||||
};
|
||||
|
|
@ -1,276 +1,8 @@
|
|||
import omit from 'omit.js';
|
||||
import type { ExtractPropTypes } from 'vue';
|
||||
import { defineComponent, inject, provide } from 'vue';
|
||||
import VcTimePicker from '../vc-time-picker';
|
||||
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import warning from '../_util/warning';
|
||||
import ClockCircleOutlined from '@ant-design/icons-vue/ClockCircleOutlined';
|
||||
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
|
||||
import enUS from './locale/en_US';
|
||||
import { hasProp, getOptionProps, getComponent, isValidElement } from '../_util/props-util';
|
||||
import initDefaultProps from '../_util/props-util/initDefaultProps';
|
||||
import { cloneElement } from '../_util/vnode';
|
||||
import { defaultConfigProvider } from '../config-provider';
|
||||
import {
|
||||
checkValidate,
|
||||
stringToMoment,
|
||||
momentToString,
|
||||
TimeOrTimesType,
|
||||
} from '../_util/moment-util';
|
||||
import { tuple, withInstall } from '../_util/type';
|
||||
import classNames from '../_util/classNames';
|
||||
|
||||
export function generateShowHourMinuteSecond(format: string) {
|
||||
// Ref: http://momentjs.com/docs/#/parsing/string-format/
|
||||
return {
|
||||
showHour: format.indexOf('H') > -1 || format.indexOf('h') > -1 || format.indexOf('k') > -1,
|
||||
showMinute: format.indexOf('m') > -1,
|
||||
showSecond: format.indexOf('s') > -1,
|
||||
};
|
||||
}
|
||||
|
||||
import TimePicker from './dayjs';
|
||||
export * from './dayjs';
|
||||
export interface TimePickerLocale {
|
||||
placeholder?: string;
|
||||
rangePlaceholder?: [string, string];
|
||||
}
|
||||
|
||||
export const timePickerProps = () => ({
|
||||
size: PropTypes.oneOf(tuple('large', 'default', 'small')),
|
||||
value: TimeOrTimesType,
|
||||
defaultValue: TimeOrTimesType,
|
||||
open: PropTypes.looseBool,
|
||||
format: PropTypes.string,
|
||||
disabled: PropTypes.looseBool,
|
||||
placeholder: PropTypes.string,
|
||||
prefixCls: PropTypes.string,
|
||||
hideDisabledOptions: PropTypes.looseBool,
|
||||
disabledHours: PropTypes.func,
|
||||
disabledMinutes: PropTypes.func,
|
||||
disabledSeconds: PropTypes.func,
|
||||
getPopupContainer: PropTypes.func,
|
||||
use12Hours: PropTypes.looseBool,
|
||||
focusOnOpen: PropTypes.looseBool,
|
||||
hourStep: PropTypes.number,
|
||||
minuteStep: PropTypes.number,
|
||||
secondStep: PropTypes.number,
|
||||
allowEmpty: PropTypes.looseBool,
|
||||
allowClear: PropTypes.looseBool,
|
||||
inputReadOnly: PropTypes.looseBool,
|
||||
clearText: PropTypes.string,
|
||||
defaultOpenValue: PropTypes.object,
|
||||
popupClassName: PropTypes.string,
|
||||
popupStyle: PropTypes.style,
|
||||
suffixIcon: PropTypes.any,
|
||||
align: PropTypes.object,
|
||||
placement: PropTypes.any,
|
||||
transitionName: PropTypes.string,
|
||||
autofocus: PropTypes.looseBool,
|
||||
addon: PropTypes.any,
|
||||
clearIcon: PropTypes.any,
|
||||
locale: PropTypes.object,
|
||||
valueFormat: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
onAmPmChange: PropTypes.func,
|
||||
onOpen: PropTypes.func,
|
||||
onClose: PropTypes.func,
|
||||
onFocus: PropTypes.func,
|
||||
onBlur: PropTypes.func,
|
||||
onKeydown: PropTypes.func,
|
||||
onOpenChange: PropTypes.func,
|
||||
});
|
||||
|
||||
export type TimePickerProps = Partial<ExtractPropTypes<ReturnType<typeof timePickerProps>>>;
|
||||
|
||||
const TimePicker = defineComponent({
|
||||
name: 'ATimePicker',
|
||||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
props: initDefaultProps(timePickerProps(), {
|
||||
align: {
|
||||
offset: [0, -2],
|
||||
},
|
||||
disabled: false,
|
||||
disabledHours: undefined,
|
||||
disabledMinutes: undefined,
|
||||
disabledSeconds: undefined,
|
||||
hideDisabledOptions: false,
|
||||
placement: 'bottomLeft',
|
||||
transitionName: 'slide-up',
|
||||
focusOnOpen: true,
|
||||
allowClear: true,
|
||||
}),
|
||||
emits: ['update:value', 'update:open', 'change', 'openChange', 'focus', 'blur', 'keydown'],
|
||||
setup() {
|
||||
return {
|
||||
popupRef: null,
|
||||
timePickerRef: null,
|
||||
configProvider: inject('configProvider', defaultConfigProvider),
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
const { value, defaultValue, valueFormat } = this;
|
||||
|
||||
checkValidate('TimePicker', defaultValue, 'defaultValue', valueFormat);
|
||||
checkValidate('TimePicker', value, 'value', valueFormat);
|
||||
warning(
|
||||
!hasProp(this, 'allowEmpty'),
|
||||
'TimePicker',
|
||||
'`allowEmpty` is deprecated. Please use `allowClear` instead.',
|
||||
);
|
||||
return {
|
||||
sValue: stringToMoment(value || defaultValue, valueFormat),
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
checkValidate('TimePicker', val, 'value', this.valueFormat);
|
||||
this.setState({ sValue: stringToMoment(val, this.valueFormat) });
|
||||
},
|
||||
},
|
||||
created() {
|
||||
provide('savePopupRef', this.savePopupRef);
|
||||
},
|
||||
methods: {
|
||||
getDefaultFormat() {
|
||||
const { format, use12Hours } = this;
|
||||
if (format) {
|
||||
return format;
|
||||
} else if (use12Hours) {
|
||||
return 'h:mm:ss a';
|
||||
}
|
||||
return 'HH:mm:ss';
|
||||
},
|
||||
|
||||
getAllowClear() {
|
||||
const { allowClear, allowEmpty } = this.$props;
|
||||
if (hasProp(this, 'allowClear')) {
|
||||
return allowClear;
|
||||
}
|
||||
return allowEmpty;
|
||||
},
|
||||
getDefaultLocale() {
|
||||
const defaultLocale = {
|
||||
...enUS,
|
||||
...this.$props.locale,
|
||||
};
|
||||
return defaultLocale;
|
||||
},
|
||||
savePopupRef(ref) {
|
||||
this.popupRef = ref;
|
||||
},
|
||||
saveTimePicker(timePickerRef) {
|
||||
this.timePickerRef = timePickerRef;
|
||||
},
|
||||
handleChange(value) {
|
||||
if (!hasProp(this, 'value')) {
|
||||
this.setState({ sValue: value });
|
||||
}
|
||||
const { format = 'HH:mm:ss' } = this;
|
||||
const val = this.valueFormat ? momentToString(value, this.valueFormat) : value;
|
||||
this.$emit('update:value', val);
|
||||
this.$emit('change', val, (value && value.format(format)) || '');
|
||||
},
|
||||
|
||||
handleOpenClose({ open }) {
|
||||
this.$emit('update:open', open);
|
||||
this.$emit('openChange', open);
|
||||
},
|
||||
|
||||
focus() {
|
||||
(this.timePickerRef as any).focus();
|
||||
},
|
||||
|
||||
blur() {
|
||||
(this.timePickerRef as any).blur();
|
||||
},
|
||||
|
||||
renderInputIcon(prefixCls: string) {
|
||||
let suffixIcon = getComponent(this, 'suffixIcon');
|
||||
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
|
||||
const clockIcon = (suffixIcon &&
|
||||
isValidElement(suffixIcon) &&
|
||||
cloneElement(suffixIcon, {
|
||||
class: `${prefixCls}-clock-icon`,
|
||||
})) || <ClockCircleOutlined class={`${prefixCls}-clock-icon`} />;
|
||||
|
||||
return <span class={`${prefixCls}-icon`}>{clockIcon}</span>;
|
||||
},
|
||||
|
||||
renderClearIcon(prefixCls: string) {
|
||||
const clearIcon = getComponent(this, 'clearIcon');
|
||||
const clearIconPrefixCls = `${prefixCls}-clear`;
|
||||
|
||||
if (clearIcon && isValidElement(clearIcon)) {
|
||||
return cloneElement(clearIcon, {
|
||||
class: clearIconPrefixCls,
|
||||
});
|
||||
}
|
||||
|
||||
return <CloseCircleFilled class={clearIconPrefixCls} />;
|
||||
},
|
||||
|
||||
renderTimePicker(locale) {
|
||||
let props = getOptionProps(this);
|
||||
props = omit(props, ['defaultValue', 'suffixIcon', 'allowEmpty', 'allowClear']);
|
||||
const { class: className } = this.$attrs;
|
||||
const { prefixCls: customizePrefixCls, getPopupContainer, placeholder, size } = props;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('time-picker', customizePrefixCls);
|
||||
const inputPrefixCls = getPrefixCls('input');
|
||||
const pickerInputClass = classNames(`${prefixCls}-input`, inputPrefixCls);
|
||||
|
||||
const format = this.getDefaultFormat();
|
||||
const pickerClassName = {
|
||||
[className as string]: className,
|
||||
[`${prefixCls}-${size}`]: !!size,
|
||||
};
|
||||
const tempAddon = getComponent(this, 'addon', {}, false);
|
||||
const pickerAddon = panel => {
|
||||
return tempAddon ? (
|
||||
<div class={`${prefixCls}-panel-addon`}>
|
||||
{typeof tempAddon === 'function' ? tempAddon(panel) : tempAddon}
|
||||
</div>
|
||||
) : null;
|
||||
};
|
||||
const inputIcon = this.renderInputIcon(prefixCls);
|
||||
const clearIcon = this.renderClearIcon(prefixCls);
|
||||
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
|
||||
const timeProps = {
|
||||
...generateShowHourMinuteSecond(format),
|
||||
...props,
|
||||
...this.$attrs,
|
||||
allowEmpty: this.getAllowClear(),
|
||||
prefixCls,
|
||||
pickerInputClass,
|
||||
getPopupContainer: getPopupContainer || getContextPopupContainer,
|
||||
format,
|
||||
value: this.sValue,
|
||||
placeholder: placeholder === undefined ? locale.placeholder : placeholder,
|
||||
addon: pickerAddon,
|
||||
inputIcon,
|
||||
clearIcon,
|
||||
class: pickerClassName,
|
||||
ref: this.saveTimePicker,
|
||||
onChange: this.handleChange,
|
||||
onOpen: this.handleOpenClose,
|
||||
onClose: this.handleOpenClose,
|
||||
};
|
||||
return <VcTimePicker {...timeProps} />;
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<LocaleReceiver
|
||||
componentName="TimePicker"
|
||||
defaultLocale={this.getDefaultLocale()}
|
||||
children={this.renderTimePicker}
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
export default withInstall(TimePicker);
|
||||
export default TimePicker;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
import { Moment } from 'moment';
|
||||
import createTimePicker from './time-picker';
|
||||
import momentGenerateConfig from '../vc-picker/generate/moment';
|
||||
import { App } from 'vue';
|
||||
import { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
|
||||
|
||||
const { TimePicker, TimeRangePicker } = createTimePicker<Moment>(momentGenerateConfig);
|
||||
|
||||
export interface TimeRangePickerProps extends Omit<RangePickerTimeProps<Moment>, 'picker'> {
|
||||
popupClassName?: string;
|
||||
valueFormat?: string;
|
||||
}
|
||||
export interface TimePickerProps extends Omit<PickerTimeProps<Moment>, 'picker'> {
|
||||
popupClassName?: string;
|
||||
valueFormat?: string;
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
TimePicker.install = function (app: App) {
|
||||
app.component(TimePicker.name, TimePicker);
|
||||
app.component(TimeRangePicker.name, TimeRangePicker);
|
||||
return app;
|
||||
};
|
||||
TimePicker.TimeRangePicker = TimeRangePicker;
|
||||
|
||||
export { TimePicker, TimeRangePicker };
|
||||
|
||||
export default TimePicker as typeof TimePicker &
|
||||
Plugin & {
|
||||
readonly TimeRangePicker: typeof TimeRangePicker;
|
||||
};
|
||||
|
|
@ -0,0 +1,199 @@
|
|||
import { defineComponent, ref } from 'vue';
|
||||
import generatePicker, {
|
||||
PickerTimeProps,
|
||||
RangePickerTimeProps,
|
||||
} from '../date-picker/generatePicker';
|
||||
import {
|
||||
commonProps,
|
||||
datePickerProps,
|
||||
rangePickerProps,
|
||||
} from '../date-picker/generatePicker/props';
|
||||
import { GenerateConfig } from '../vc-picker/generate';
|
||||
import { PanelMode, RangeValue } from '../vc-picker/interface';
|
||||
import { RangePickerSharedProps } from '../vc-picker/RangePicker';
|
||||
import devWarning from '../vc-util/devWarning';
|
||||
|
||||
export interface TimePickerLocale {
|
||||
placeholder?: string;
|
||||
rangePlaceholder?: [string, string];
|
||||
}
|
||||
|
||||
const timpePickerProps = {
|
||||
format: String,
|
||||
showNow: Boolean,
|
||||
showHour: Boolean,
|
||||
showMinute: Boolean,
|
||||
showSecond: Boolean,
|
||||
use12Hours: Boolean,
|
||||
hourStep: Number,
|
||||
minuteStep: Number,
|
||||
secondStep: Number,
|
||||
hideDisabledOptions: Boolean,
|
||||
popupClassName: String,
|
||||
};
|
||||
|
||||
function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
|
||||
const DatePicker = generatePicker<DateType>(generateConfig);
|
||||
const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker as any;
|
||||
interface TimeRangePickerProps extends Omit<RangePickerTimeProps<DateType>, 'picker'> {
|
||||
popupClassName?: string;
|
||||
valueFormat?: string;
|
||||
}
|
||||
interface TimePickerProps extends Omit<PickerTimeProps<DateType>, 'picker'> {
|
||||
popupClassName?: string;
|
||||
valueFormat?: string;
|
||||
}
|
||||
const TimePicker = defineComponent<TimePickerProps>({
|
||||
name: 'ATimePicker',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
...commonProps<DateType>(),
|
||||
...datePickerProps<DateType>(),
|
||||
...timpePickerProps,
|
||||
} as any,
|
||||
slot: ['addon', 'renderExtraFooter', 'suffixIcon', 'clearIcon'],
|
||||
emits: ['change', 'openChange', 'focus', 'blur', 'ok', 'update:value'],
|
||||
setup(props, { slots, expose, emit, attrs }) {
|
||||
devWarning(
|
||||
!slots.addon,
|
||||
'TimePicker',
|
||||
'`addon` is deprecated. Please use `renderExtraFooter` instead.',
|
||||
);
|
||||
const pickerRef = ref();
|
||||
expose({
|
||||
focus: () => {
|
||||
pickerRef.value?.focus();
|
||||
},
|
||||
blur: () => {
|
||||
pickerRef.value?.blur();
|
||||
},
|
||||
});
|
||||
const onChange = (value: DateType | string, dateString: string) => {
|
||||
emit('update:value', value);
|
||||
emit('change', value, dateString);
|
||||
};
|
||||
const onOpenChange = (open: boolean) => {
|
||||
emit('openChange', open);
|
||||
};
|
||||
const onFoucs = () => {
|
||||
emit('focus');
|
||||
};
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
const onOk = (value: DateType) => {
|
||||
emit('ok', value);
|
||||
};
|
||||
return () => {
|
||||
return (
|
||||
<InternalTimePicker
|
||||
{...attrs}
|
||||
{...slots}
|
||||
{...props}
|
||||
dropdownClassName={props.popupClassName}
|
||||
mode={undefined}
|
||||
ref={pickerRef}
|
||||
renderExtraFooter={slots.addon ?? props.renderExtraFooter ?? slots.renderExtraFooter}
|
||||
onChange={onChange}
|
||||
onOpenChange={onOpenChange}
|
||||
onFocus={onFoucs}
|
||||
onBlur={onBlur}
|
||||
onOk={onOk}
|
||||
/>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const TimeRangePicker = defineComponent<TimeRangePickerProps>({
|
||||
name: 'ATimeRangePicker',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
...commonProps<DateType>(),
|
||||
...rangePickerProps<DateType>(),
|
||||
...timpePickerProps,
|
||||
order: { type: Boolean, default: true },
|
||||
} as any,
|
||||
slot: ['renderExtraFooter', 'suffixIcon', 'clearIcon'],
|
||||
emits: [
|
||||
'change',
|
||||
'panelChange',
|
||||
'ok',
|
||||
'openChange',
|
||||
'update:value',
|
||||
'calendarChange',
|
||||
'focus',
|
||||
'blur',
|
||||
],
|
||||
setup(props, { slots, expose, emit, attrs }) {
|
||||
const pickerRef = ref();
|
||||
expose({
|
||||
focus: () => {
|
||||
pickerRef.value?.focus();
|
||||
},
|
||||
blur: () => {
|
||||
pickerRef.value?.blur();
|
||||
},
|
||||
});
|
||||
const onChange = (
|
||||
values: [DateType, DateType] | [string, string],
|
||||
dateStrings: [string, string],
|
||||
) => {
|
||||
emit('update:value', values);
|
||||
emit('change', values, dateStrings);
|
||||
};
|
||||
const onOpenChange = (open: boolean) => {
|
||||
emit('openChange', open);
|
||||
};
|
||||
const onFoucs = () => {
|
||||
emit('focus');
|
||||
};
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
const onPanelChange = (
|
||||
values: string | RangeValue<DateType>,
|
||||
modes: [PanelMode, PanelMode],
|
||||
) => {
|
||||
emit('panelChange', values, modes);
|
||||
};
|
||||
const onOk = (value: DateType) => {
|
||||
emit('ok', value);
|
||||
};
|
||||
const onCalendarChange: RangePickerSharedProps<DateType>['onCalendarChange'] = (
|
||||
values: [DateType, DateType] | [string, string],
|
||||
dateStrings: [string, string],
|
||||
info,
|
||||
) => {
|
||||
emit('calendarChange', values, dateStrings, info);
|
||||
};
|
||||
return () => {
|
||||
return (
|
||||
<InternalRangePicker
|
||||
{...attrs}
|
||||
{...slots}
|
||||
{...props}
|
||||
dropdownClassName={props.popupClassName}
|
||||
picker="time"
|
||||
mode={undefined}
|
||||
ref={pickerRef}
|
||||
onChange={onChange}
|
||||
onOpenChange={onOpenChange}
|
||||
onFocus={onFoucs}
|
||||
onBlur={onBlur}
|
||||
onPanelChange={onPanelChange}
|
||||
onOk={onOk}
|
||||
onCalendarChange={onCalendarChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
TimePicker,
|
||||
TimeRangePicker,
|
||||
};
|
||||
}
|
||||
|
||||
export default createTimePicker;
|
||||
|
|
@ -191,7 +191,7 @@ function Picker<DateType>() {
|
|||
// ],
|
||||
setup(props, { attrs, expose }) {
|
||||
const inputRef = ref(null);
|
||||
const picker = computed(() => picker.value ?? 'date');
|
||||
const picker = computed(() => props.picker ?? 'date');
|
||||
const needConfirmButton = computed(
|
||||
() => (picker.value === 'date' && !!props.showTime) || picker.value === 'time',
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { useInjectPanel } from '../../PanelContext';
|
|||
import classNames from '../../../_util/classNames';
|
||||
import { ref } from '@vue/reactivity';
|
||||
import { onBeforeUnmount, watch } from '@vue/runtime-core';
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, nextTick } from 'vue';
|
||||
|
||||
export type Unit = {
|
||||
label: any;
|
||||
|
|
@ -43,8 +43,11 @@ export default defineComponent<TimeUnitColumnProps>({
|
|||
scrollRef.value?.();
|
||||
});
|
||||
|
||||
watch(open, () => {
|
||||
watch(
|
||||
open,
|
||||
() => {
|
||||
scrollRef.value?.();
|
||||
nextTick(() => {
|
||||
if (open.value) {
|
||||
const li = liRefs.value.get(props.value!);
|
||||
if (li) {
|
||||
|
|
@ -54,6 +57,9 @@ export default defineComponent<TimeUnitColumnProps>({
|
|||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
{ immediate: true, flush: 'post' },
|
||||
);
|
||||
return () => {
|
||||
const { prefixCls, units, onSelect, value, active, hideDisabledOptions } = props;
|
||||
const cellPrefixCls = `${prefixCls}-cell`;
|
||||
|
|
|
|||
Loading…
Reference in New Issue