refactor: date-picker by ts
tangjinzhou
parent
db31c526d9
commit
54ca9021c3
|
|
@ -1,7 +1,7 @@
|
|||
import { VueTypeValidableDef, VueTypeDef } from 'vue-types';
|
||||
|
||||
const initDefaultProps = <T>(
|
||||
propTypes: T,
|
||||
types: T,
|
||||
defaultProps: {
|
||||
[K in keyof T]?: T[K] extends VueTypeValidableDef<infer U>
|
||||
? U
|
||||
|
|
@ -10,6 +10,7 @@ const initDefaultProps = <T>(
|
|||
: any;
|
||||
},
|
||||
): T => {
|
||||
const propTypes = { ...types };
|
||||
Object.keys(defaultProps).forEach(k => {
|
||||
const prop = propTypes[k] as VueTypeValidableDef;
|
||||
if (prop) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { isValidElement } from '../_util/props-util';
|
|||
import { cloneElement } from '../_util/vnode';
|
||||
import classNames from '../_util/classNames';
|
||||
|
||||
const InputIcon = (_, { attrs }) => {
|
||||
const InputIcon = (_: any, { attrs }) => {
|
||||
const { suffixIcon, prefixCls } = attrs;
|
||||
return (
|
||||
(suffixIcon && isValidElement(suffixIcon) ? (
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { inject } from 'vue';
|
||||
import { CSSProperties, defineComponent, inject } from 'vue';
|
||||
import moment from 'moment';
|
||||
import RangeCalendar from '../vc-calendar/src/RangeCalendar';
|
||||
import VcDatePicker from '../vc-calendar/src/Picker';
|
||||
|
|
@ -9,26 +9,40 @@ import Tag from '../tag';
|
|||
import { defaultConfigProvider } from '../config-provider';
|
||||
import interopDefault from '../_util/interopDefault';
|
||||
import { RangePickerProps } from './interface';
|
||||
import { hasProp, getOptionProps, initDefaultProps, getComponent } from '../_util/props-util';
|
||||
import { hasProp, getOptionProps, getComponent } from '../_util/props-util';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { formatDate } from './utils';
|
||||
import InputIcon from './InputIcon';
|
||||
import { getDataAndAriaProps } from '../_util/util';
|
||||
import initDefaultProps from '../_util/props-util/initDefaultProps';
|
||||
|
||||
function getShowDateFromValue(value, mode) {
|
||||
type RangePickerValue =
|
||||
| undefined[]
|
||||
| null[]
|
||||
| [moment.Moment]
|
||||
| [undefined, moment.Moment]
|
||||
| [moment.Moment, undefined]
|
||||
| [null, moment.Moment]
|
||||
| [moment.Moment, null]
|
||||
| [moment.Moment, moment.Moment];
|
||||
|
||||
export type RangePickerPresetRange = RangePickerValue | (() => RangePickerValue);
|
||||
function getShowDateFromValue(value: RangePickerValue, mode?: string | string[]) {
|
||||
const [start, end] = value;
|
||||
// value could be an empty array, then we should not reset showDate
|
||||
if (!start && !end) {
|
||||
return;
|
||||
}
|
||||
if (mode && mode[0] === 'month') {
|
||||
return [start, end];
|
||||
return [start, end] as RangePickerValue;
|
||||
}
|
||||
const newEnd = end && end.isSame(start, 'month') ? end.clone().add(1, 'month') : end;
|
||||
return [start, newEnd];
|
||||
return [start, newEnd] as RangePickerValue;
|
||||
}
|
||||
|
||||
function pickerValueAdapter(value) {
|
||||
function pickerValueAdapter(
|
||||
value?: moment.Moment | RangePickerValue,
|
||||
): RangePickerValue | undefined {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -38,14 +52,14 @@ function pickerValueAdapter(value) {
|
|||
return [value, value.clone().add(1, 'month')];
|
||||
}
|
||||
|
||||
function isEmptyArray(arr) {
|
||||
function isEmptyArray(arr: any) {
|
||||
if (Array.isArray(arr)) {
|
||||
return arr.length === 0 || arr.every(i => !i);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function fixLocale(value, localeCode) {
|
||||
function fixLocale(value: RangePickerValue | undefined, localeCode: string | undefined) {
|
||||
if (!localeCode) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -61,11 +75,18 @@ function fixLocale(value, localeCode) {
|
|||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
export interface RangePickerState {
|
||||
sValue?: RangePickerValue;
|
||||
sShowDate?: RangePickerValue;
|
||||
sOpen?: boolean;
|
||||
sHoverValue?: RangePickerValue;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ARangePicker',
|
||||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
props: initDefaultProps(RangePickerProps(), {
|
||||
props: initDefaultProps(RangePickerProps, {
|
||||
allowClear: true,
|
||||
showToday: false,
|
||||
separator: '~',
|
||||
|
|
@ -73,9 +94,12 @@ export default {
|
|||
setup() {
|
||||
return {
|
||||
configProvider: inject('configProvider', defaultConfigProvider),
|
||||
picker: null,
|
||||
sTagPrefixCls: undefined,
|
||||
sPrefixCls: '',
|
||||
};
|
||||
},
|
||||
data() {
|
||||
data(): RangePickerState {
|
||||
const value = this.value || this.defaultValue || [];
|
||||
const [start, end] = value;
|
||||
if (
|
||||
|
|
@ -89,7 +113,7 @@ export default {
|
|||
}
|
||||
const pickerValue = !value || isEmptyArray(value) ? this.defaultPickerValue : value;
|
||||
return {
|
||||
sValue: value,
|
||||
sValue: value as RangePickerValue,
|
||||
sShowDate: pickerValueAdapter(pickerValue || interopDefault(moment)()),
|
||||
sOpen: this.open,
|
||||
sHoverValue: [],
|
||||
|
|
@ -98,7 +122,7 @@ export default {
|
|||
watch: {
|
||||
value(val) {
|
||||
const value = val || [];
|
||||
let state = { sValue: value };
|
||||
let state: RangePickerState = { sValue: value };
|
||||
if (!shallowequal(val, this.sValue)) {
|
||||
state = {
|
||||
...state,
|
||||
|
|
@ -120,14 +144,14 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
setValue(value, hidePanel) {
|
||||
setValue(value: RangePickerValue, hidePanel?: boolean) {
|
||||
this.handleChange(value);
|
||||
if ((hidePanel || !this.showTime) && !hasProp(this, 'open')) {
|
||||
this.setState({ sOpen: false });
|
||||
}
|
||||
},
|
||||
|
||||
savePicker(node) {
|
||||
savePicker(node: any) {
|
||||
this.picker = node;
|
||||
},
|
||||
clearSelection(e) {
|
||||
|
|
@ -141,7 +165,7 @@ export default {
|
|||
this.setState({ sHoverValue: [] });
|
||||
},
|
||||
|
||||
handleChange(value) {
|
||||
handleChange(value: RangePickerValue) {
|
||||
if (!hasProp(this, 'value')) {
|
||||
this.setState(({ sShowDate }) => ({
|
||||
sValue: value,
|
||||
|
|
@ -155,7 +179,7 @@ export default {
|
|||
this.$emit('change', value, [formatDate(start, this.format), formatDate(end, this.format)]);
|
||||
},
|
||||
|
||||
handleOpenChange(open) {
|
||||
handleOpenChange(open: boolean) {
|
||||
if (!hasProp(this, 'open')) {
|
||||
this.setState({ sOpen: open });
|
||||
}
|
||||
|
|
@ -166,11 +190,11 @@ export default {
|
|||
this.$emit('openChange', open);
|
||||
},
|
||||
|
||||
handleShowDateChange(showDate) {
|
||||
handleShowDateChange(showDate: boolean) {
|
||||
this.setState({ sShowDate: showDate });
|
||||
},
|
||||
|
||||
handleHoverChange(hoverValue) {
|
||||
handleHoverChange(hoverValue: any) {
|
||||
this.setState({ sHoverValue: hoverValue });
|
||||
},
|
||||
|
||||
|
|
@ -180,7 +204,7 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
handleCalendarInputSelect(value) {
|
||||
handleCalendarInputSelect(value: RangePickerValue) {
|
||||
const [start] = value;
|
||||
if (!start) {
|
||||
return;
|
||||
|
|
@ -191,7 +215,7 @@ export default {
|
|||
}));
|
||||
},
|
||||
|
||||
handleRangeClick(value) {
|
||||
handleRangeClick(value: RangePickerPresetRange) {
|
||||
if (typeof value === 'function') {
|
||||
value = value();
|
||||
}
|
||||
|
|
@ -201,10 +225,10 @@ export default {
|
|||
this.$emit('openChange', false);
|
||||
},
|
||||
|
||||
onMouseEnter(e) {
|
||||
onMouseEnter(e: MouseEvent) {
|
||||
this.$emit('mouseenter', e);
|
||||
},
|
||||
onMouseLeave(e) {
|
||||
onMouseLeave(e: MouseEvent) {
|
||||
this.$emit('mouseleave', e);
|
||||
},
|
||||
|
||||
|
|
@ -218,7 +242,7 @@ export default {
|
|||
|
||||
renderFooter() {
|
||||
const { ranges, $slots } = this;
|
||||
const { _prefixCls: prefixCls, _tagPrefixCls: tagPrefixCls } = this;
|
||||
const { sPrefixCls: prefixCls, sTagPrefixCls: tagPrefixCls } = this;
|
||||
const renderExtraFooter = this.renderExtraFooter || $slots.renderExtraFooter;
|
||||
if (!ranges && !renderExtraFooter) {
|
||||
return null;
|
||||
|
|
@ -257,7 +281,7 @@ export default {
|
|||
},
|
||||
|
||||
render() {
|
||||
const props = { ...getOptionProps(this), ...this.$attrs };
|
||||
const props: any = { ...getOptionProps(this), ...this.$attrs };
|
||||
let suffixIcon = getComponent(this, 'suffixIcon');
|
||||
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
|
||||
const {
|
||||
|
|
@ -291,8 +315,8 @@ export default {
|
|||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('calendar', customizePrefixCls);
|
||||
const tagPrefixCls = getPrefixCls('tag', customizeTagPrefixCls);
|
||||
this._prefixCls = prefixCls;
|
||||
this._tagPrefixCls = tagPrefixCls;
|
||||
this.sPrefixCls = prefixCls;
|
||||
this.sTagPrefixCls = tagPrefixCls;
|
||||
|
||||
const dateRender = props.dateRender || $slots.dateRender;
|
||||
fixLocale(value, localeCode);
|
||||
|
|
@ -307,7 +331,7 @@ export default {
|
|||
const pickerChangeHandler = {
|
||||
onChange: this.handleChange,
|
||||
};
|
||||
let calendarProps = {
|
||||
let calendarProps: any = {
|
||||
onOk: this.handleChange,
|
||||
};
|
||||
if (props.timePicker) {
|
||||
|
|
@ -353,7 +377,7 @@ export default {
|
|||
const calendar = <RangeCalendar {...rangeCalendarProps} vSlots={$slots} />;
|
||||
|
||||
// default width for showTime
|
||||
const pickerStyle = {};
|
||||
const pickerStyle: CSSProperties = {};
|
||||
if (props.showTime) {
|
||||
pickerStyle.width = '350px';
|
||||
}
|
||||
|
|
@ -407,8 +431,6 @@ export default {
|
|||
id={props.id}
|
||||
class={classNames(props.class, props.pickerClass)}
|
||||
style={{ ...style, ...pickerStyle }}
|
||||
class={props.pickerClass}
|
||||
style={pickerStyle}
|
||||
tabindex={props.disabled ? -1 : 0}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
|
|
@ -420,4 +442,4 @@ export default {
|
|||
</span>
|
||||
);
|
||||
},
|
||||
};
|
||||
});
|
||||
|
|
@ -1,37 +1,46 @@
|
|||
import { inject } from 'vue';
|
||||
import { defineComponent, inject } from 'vue';
|
||||
import moment from 'moment';
|
||||
import Calendar from '../vc-calendar';
|
||||
import VcDatePicker from '../vc-calendar/src/Picker';
|
||||
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
|
||||
import { defaultConfigProvider } from '../config-provider';
|
||||
import { hasProp, getOptionProps, initDefaultProps, getComponent } from '../_util/props-util';
|
||||
import { hasProp, getOptionProps, getComponent } from '../_util/props-util';
|
||||
import classNames from '../_util/classNames';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { WeekPickerProps } from './interface';
|
||||
import interopDefault from '../_util/interopDefault';
|
||||
import InputIcon from './InputIcon';
|
||||
import { getDataAndAriaProps } from '../_util/util';
|
||||
import initDefaultProps from 'components/_util/props-util/initDefaultProps';
|
||||
|
||||
function formatValue(value, format) {
|
||||
function formatValue(value: moment.Moment | null, format: string): string {
|
||||
return (value && value.format(format)) || '';
|
||||
}
|
||||
|
||||
interface WeekPickerState {
|
||||
_open?: boolean;
|
||||
_value?: moment.Moment | null;
|
||||
}
|
||||
function noop() {}
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'AWeekPicker',
|
||||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
props: initDefaultProps(WeekPickerProps(), {
|
||||
props: initDefaultProps(WeekPickerProps, {
|
||||
format: 'gggg-wo',
|
||||
allowClear: true,
|
||||
}),
|
||||
setup() {
|
||||
return {
|
||||
configProvider: inject('configProvider', defaultConfigProvider),
|
||||
prevState: {} as WeekPickerState,
|
||||
input: undefined,
|
||||
sPrefixCls: undefined,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
const value = this.value || this.defaultValue;
|
||||
data(): WeekPickerState {
|
||||
const value: any = this.value || this.defaultValue;
|
||||
if (value && !interopDefault(moment).isMoment(value)) {
|
||||
throw new Error(
|
||||
'The value/defaultValue of WeekPicker or MonthPicker must be ' + 'a moment object',
|
||||
|
|
@ -72,12 +81,12 @@ export default {
|
|||
});
|
||||
},
|
||||
methods: {
|
||||
saveInput(node) {
|
||||
saveInput(node: any) {
|
||||
this.input = node;
|
||||
},
|
||||
weekDateRender({ current }) {
|
||||
const selectedValue = this.$data._value;
|
||||
const { _prefixCls: prefixCls, $slots } = this;
|
||||
const { sPrefixCls: prefixCls, $slots } = this;
|
||||
const dateRender = this.dateRender || $slots.dateRender;
|
||||
const dateNode = dateRender ? dateRender({ current }) : current.date();
|
||||
if (
|
||||
|
|
@ -93,19 +102,19 @@ export default {
|
|||
}
|
||||
return <div class={`${prefixCls}-date`}>{dateNode}</div>;
|
||||
},
|
||||
handleChange(value) {
|
||||
handleChange(value: moment.Moment | null) {
|
||||
if (!hasProp(this, 'value')) {
|
||||
this.setState({ _value: value });
|
||||
}
|
||||
this.$emit('change', value, formatValue(value, this.format));
|
||||
},
|
||||
handleOpenChange(open) {
|
||||
handleOpenChange(open: boolean) {
|
||||
if (!hasProp(this, 'open')) {
|
||||
this.setState({ _open: open });
|
||||
}
|
||||
this.$emit('openChange', open);
|
||||
},
|
||||
clearSelection(e) {
|
||||
clearSelection(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.handleChange(null);
|
||||
|
|
@ -117,8 +126,8 @@ export default {
|
|||
blur() {
|
||||
this.input.blur();
|
||||
},
|
||||
renderFooter(...args) {
|
||||
const { _prefixCls: prefixCls, $slots } = this;
|
||||
renderFooter(...args: any[]) {
|
||||
const { sPrefixCls: prefixCls, $slots } = this;
|
||||
const renderExtraFooter = this.renderExtraFooter || $slots.renderExtraFooter;
|
||||
return renderExtraFooter ? (
|
||||
<div class={`${prefixCls}-footer-extra`}>{renderExtraFooter(...args)}</div>
|
||||
|
|
@ -147,10 +156,10 @@ export default {
|
|||
} = this;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('calendar', customizePrefixCls);
|
||||
this._prefixCls = prefixCls;
|
||||
this.sPrefixCls = prefixCls;
|
||||
|
||||
const { _value: pickerValue, _open: open } = $data;
|
||||
const { class: className, style, id, onFocus = noop, onBlur = noop } = props;
|
||||
const { class: className, style, id, onFocus = noop, onBlur = noop } = props as any;
|
||||
|
||||
if (pickerValue && localeCode) {
|
||||
pickerValue.locale(localeCode);
|
||||
|
|
@ -169,7 +178,7 @@ export default {
|
|||
showToday={false}
|
||||
disabledDate={disabledDate}
|
||||
renderFooter={this.renderFooter}
|
||||
defaultValue={defaultPickerValue}
|
||||
defaultValue={defaultPickerValue as any}
|
||||
/>
|
||||
);
|
||||
const clearIcon =
|
||||
|
|
@ -214,8 +223,8 @@ export default {
|
|||
id={id}
|
||||
{...getDataAndAriaProps(props)}
|
||||
>
|
||||
<VcDatePicker {...vcDatePickerProps} vSlots={{ default: input, ...$slots }}></VcDatePicker>
|
||||
<VcDatePicker {...vcDatePickerProps} v-slots={{ default: input, ...$slots }}></VcDatePicker>
|
||||
</span>
|
||||
);
|
||||
},
|
||||
};
|
||||
});
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { inject } from 'vue';
|
||||
import { CSSProperties, DefineComponent, defineComponent, inject } from 'vue';
|
||||
import moment from 'moment';
|
||||
import omit from 'lodash-es/omit';
|
||||
import MonthCalendar from '../vc-calendar/src/MonthCalendar';
|
||||
|
|
@ -9,66 +9,68 @@ import CalendarOutlined from '@ant-design/icons-vue/CalendarOutlined';
|
|||
import { defaultConfigProvider } from '../config-provider';
|
||||
import interopDefault from '../_util/interopDefault';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import {
|
||||
hasProp,
|
||||
getOptionProps,
|
||||
initDefaultProps,
|
||||
getComponent,
|
||||
isValidElement,
|
||||
} from '../_util/props-util';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import { hasProp, getOptionProps, getComponent, isValidElement } from '../_util/props-util';
|
||||
import { cloneElement } from '../_util/vnode';
|
||||
import { formatDate } from './utils';
|
||||
import { getDataAndAriaProps } from '../_util/util';
|
||||
|
||||
// export const PickerProps = {
|
||||
// value?: moment.Moment;
|
||||
// prefixCls: string;
|
||||
// }
|
||||
export default function createPicker(TheCalendar, props) {
|
||||
return {
|
||||
export interface PickerProps {
|
||||
value?: moment.Moment;
|
||||
open?: boolean;
|
||||
prefixCls?: string;
|
||||
}
|
||||
export interface PickerState {
|
||||
sOpen?: boolean;
|
||||
sValue?: moment.Moment | null;
|
||||
showDate?: moment.Moment | null;
|
||||
}
|
||||
export default function createPicker(
|
||||
TheCalendar: DefineComponent<any>,
|
||||
props: any,
|
||||
): DefineComponent<any> {
|
||||
return defineComponent({
|
||||
inheritAttrs: false,
|
||||
props: initDefaultProps(props, {
|
||||
allowClear: true,
|
||||
showToday: true,
|
||||
}),
|
||||
props: {
|
||||
...props,
|
||||
allowClear: PropTypes.looseBool.def(true),
|
||||
showToday: PropTypes.looseBool.def(true),
|
||||
},
|
||||
mixins: [BaseMixin],
|
||||
setup() {
|
||||
return {
|
||||
configProvider: inject('configProvider', defaultConfigProvider),
|
||||
input: undefined,
|
||||
sPrefixCls: undefined,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
data(): PickerState {
|
||||
const value = this.value || this.defaultValue;
|
||||
if (value && !interopDefault(moment).isMoment(value)) {
|
||||
throw new Error(
|
||||
'The value/defaultValue of DatePicker or MonthPicker must be ' + 'a moment object',
|
||||
);
|
||||
}
|
||||
return {
|
||||
sValue: value,
|
||||
showDate: value,
|
||||
_open: !!this.open,
|
||||
sOpen: !!this.open,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
open(val) {
|
||||
const props = getOptionProps(this);
|
||||
const state = {};
|
||||
state._open = val;
|
||||
const props: PickerProps = getOptionProps(this);
|
||||
const state: PickerState = {};
|
||||
state.sOpen = val;
|
||||
if ('value' in props && !val && props.value !== this.showDate) {
|
||||
state.showDate = props.value;
|
||||
}
|
||||
this.setState(state);
|
||||
},
|
||||
value(val) {
|
||||
const state = {};
|
||||
const state: PickerState = {};
|
||||
state.sValue = val;
|
||||
if (val !== this.sValue) {
|
||||
state.showDate = val;
|
||||
}
|
||||
this.setState(state);
|
||||
},
|
||||
_open(val, oldVal) {
|
||||
sOpen(val, oldVal) {
|
||||
this.$nextTick(() => {
|
||||
if (!hasProp(this, 'open') && oldVal && !val) {
|
||||
this.focus();
|
||||
|
|
@ -77,16 +79,16 @@ export default function createPicker(TheCalendar, props) {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
saveInput(node) {
|
||||
saveInput(node: any) {
|
||||
this.input = node;
|
||||
},
|
||||
clearSelection(e) {
|
||||
clearSelection(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.handleChange(null);
|
||||
},
|
||||
|
||||
handleChange(value) {
|
||||
handleChange(value: moment.Moment | null) {
|
||||
if (!hasProp(this, 'value')) {
|
||||
this.setState({
|
||||
sValue: value,
|
||||
|
|
@ -96,13 +98,13 @@ export default function createPicker(TheCalendar, props) {
|
|||
this.$emit('change', value, formatDate(value, this.format));
|
||||
},
|
||||
|
||||
handleCalendarChange(value) {
|
||||
handleCalendarChange(value: moment.Moment) {
|
||||
this.setState({ showDate: value });
|
||||
},
|
||||
handleOpenChange(open) {
|
||||
handleOpenChange(open: boolean) {
|
||||
const props = getOptionProps(this);
|
||||
if (!('open' in props)) {
|
||||
this.setState({ _open: open });
|
||||
this.setState({ sOpen: open });
|
||||
}
|
||||
this.$emit('openChange', open);
|
||||
},
|
||||
|
|
@ -113,9 +115,9 @@ export default function createPicker(TheCalendar, props) {
|
|||
blur() {
|
||||
this.input?.blur();
|
||||
},
|
||||
renderFooter(...args) {
|
||||
const { $slots, _prefixCls: prefixCls } = this;
|
||||
const renderExtraFooter = this.renderExtraFooter || $slots.renderExtraFooter;
|
||||
renderFooter(...args: any[]) {
|
||||
const { $slots, sPrefixCls: prefixCls } = this;
|
||||
const renderExtraFooter: Function = this.renderExtraFooter || $slots.renderExtraFooter;
|
||||
return renderExtraFooter ? (
|
||||
<div class={`${prefixCls}-footer-extra`}>
|
||||
{typeof renderExtraFooter === 'function'
|
||||
|
|
@ -124,25 +126,25 @@ export default function createPicker(TheCalendar, props) {
|
|||
</div>
|
||||
) : null;
|
||||
},
|
||||
onMouseEnter(e) {
|
||||
onMouseEnter(e: MouseEvent) {
|
||||
this.$emit('mouseenter', e);
|
||||
},
|
||||
onMouseLeave(e) {
|
||||
onMouseLeave(e: MouseEvent) {
|
||||
this.$emit('mouseleave', e);
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const { $slots } = this;
|
||||
const { sValue: value, showDate, _open: open } = this.$data;
|
||||
const { sValue: value, showDate, sOpen: open } = this.$data;
|
||||
let suffixIcon = getComponent(this, 'suffixIcon');
|
||||
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
|
||||
const props = omit({ ...getOptionProps(this), ...this.$attrs }, ['onChange']);
|
||||
const props: any = omit({ ...getOptionProps(this), ...this.$attrs }, ['onChange']);
|
||||
|
||||
const { prefixCls: customizePrefixCls, locale, localeCode, inputReadOnly } = props;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('calendar', customizePrefixCls);
|
||||
this._prefixCls = prefixCls;
|
||||
this.sPrefixCls = prefixCls;
|
||||
|
||||
const dateRender = props.dateRender || $slots.dateRender;
|
||||
const monthCellContentRender = props.monthCellContentRender || $slots.monthCellContentRender;
|
||||
|
|
@ -152,16 +154,16 @@ export default function createPicker(TheCalendar, props) {
|
|||
|
||||
const calendarClassName = classNames({
|
||||
[`${prefixCls}-time`]: props.showTime,
|
||||
[`${prefixCls}-month`]: MonthCalendar === TheCalendar,
|
||||
[`${prefixCls}-month`]: (MonthCalendar as any) === TheCalendar,
|
||||
});
|
||||
|
||||
if (value && localeCode) {
|
||||
value.locale(localeCode);
|
||||
}
|
||||
|
||||
const pickerProps = {};
|
||||
const calendarProps = {};
|
||||
const pickerStyle = {};
|
||||
const pickerProps: any = {};
|
||||
const calendarProps: any = {};
|
||||
const pickerStyle: CSSProperties = {};
|
||||
if (props.showTime) {
|
||||
// fix https://github.com/ant-design/ant-design/issues/1902
|
||||
calendarProps.onSelect = this.handleChange;
|
||||
|
|
@ -251,10 +253,10 @@ export default function createPicker(TheCalendar, props) {
|
|||
>
|
||||
<VcDatePicker
|
||||
{...vcDatePickerProps}
|
||||
vSlots={{ default: input, ...$slots }}
|
||||
v-slots={{ default: input, ...$slots }}
|
||||
></VcDatePicker>
|
||||
</span>
|
||||
);
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
@ -5,27 +5,34 @@ import wrapPicker from './wrapPicker';
|
|||
import RangePicker from './RangePicker';
|
||||
import WeekPicker from './WeekPicker';
|
||||
import { DatePickerProps, MonthPickerProps, WeekPickerProps, RangePickerProps } from './interface';
|
||||
import { App, DefineComponent, defineComponent } from 'vue';
|
||||
type DatePickerPropstypes = typeof DatePickerProps;
|
||||
|
||||
const DatePicker = wrapPicker(
|
||||
{ ...createPicker(VcCalendar, DatePickerProps()), name: 'ADatePicker' },
|
||||
DatePickerProps(),
|
||||
'date',
|
||||
const DatePicker: DefineComponent<DatePickerPropstypes> = defineComponent<DatePickerPropstypes>(
|
||||
wrapPicker(
|
||||
{
|
||||
...createPicker(VcCalendar as any, DatePickerProps),
|
||||
name: 'ADatePicker',
|
||||
} as any,
|
||||
DatePickerProps,
|
||||
'date',
|
||||
) as any,
|
||||
);
|
||||
|
||||
const MonthPicker = wrapPicker(
|
||||
{ ...createPicker(MonthCalendar, MonthPickerProps()), name: 'AMonthPicker' },
|
||||
MonthPickerProps(),
|
||||
{ ...createPicker(MonthCalendar as any, MonthPickerProps), name: 'AMonthPicker' } as any,
|
||||
MonthPickerProps,
|
||||
'month',
|
||||
);
|
||||
|
||||
Object.assign(DatePicker, {
|
||||
RangePicker: wrapPicker(RangePicker, RangePickerProps(), 'date'),
|
||||
RangePicker: wrapPicker(RangePicker as any, RangePickerProps, 'date'),
|
||||
MonthPicker,
|
||||
WeekPicker: wrapPicker(WeekPicker, WeekPickerProps(), 'week'),
|
||||
WeekPicker: wrapPicker(WeekPicker as any, WeekPickerProps, 'week'),
|
||||
});
|
||||
|
||||
/* istanbul ignore next */
|
||||
DatePicker.install = function(app) {
|
||||
DatePicker.install = function(app: App) {
|
||||
app.component(DatePicker.name, DatePicker);
|
||||
app.component(DatePicker.RangePicker.name, DatePicker.RangePicker);
|
||||
app.component(DatePicker.MonthPicker.name, DatePicker.MonthPicker);
|
||||
|
|
@ -1,8 +1,19 @@
|
|||
// import { TimePickerProps } from '../time-picker'
|
||||
import PropTypes, { withUndefined } from '../_util/vue-types';
|
||||
import { TimesType, TimeType } from '../_util/moment-util';
|
||||
|
||||
export const PickerProps = () => ({
|
||||
import { tuple } from 'components/_util/type';
|
||||
import { PropType } from 'vue';
|
||||
export type PickerValue = moment.Moment | undefined | null | string;
|
||||
export type RangePickerValue =
|
||||
| undefined[]
|
||||
| null[]
|
||||
| [moment.Moment | string]
|
||||
| [undefined, moment.Moment | string]
|
||||
| [moment.Moment | string, undefined]
|
||||
| [null, moment.Moment | string]
|
||||
| [moment.Moment | string, null]
|
||||
| [moment.Moment, moment.Moment]
|
||||
| [string, string];
|
||||
export const PickerProps = {
|
||||
name: PropTypes.string,
|
||||
transitionName: PropTypes.string,
|
||||
prefixCls: PropTypes.string,
|
||||
|
|
@ -15,7 +26,7 @@ export const PickerProps = () => ({
|
|||
dropdownClassName: PropTypes.string,
|
||||
locale: PropTypes.any,
|
||||
localeCode: PropTypes.string,
|
||||
size: PropTypes.oneOf(['large', 'small', 'default']),
|
||||
size: PropTypes.oneOf(tuple('large', 'small', 'default')),
|
||||
getCalendarContainer: PropTypes.func,
|
||||
open: PropTypes.looseBool,
|
||||
disabledDate: PropTypes.func,
|
||||
|
|
@ -36,43 +47,43 @@ export const PickerProps = () => ({
|
|||
'onUpdate:value': PropTypes.func,
|
||||
onMouseenter: PropTypes.func,
|
||||
onMouseleave: PropTypes.func,
|
||||
});
|
||||
};
|
||||
|
||||
export const SinglePickerProps = () => ({
|
||||
value: TimeType,
|
||||
defaultValue: TimeType,
|
||||
defaultPickerValue: TimeType,
|
||||
export const SinglePickerProps = {
|
||||
value: { type: [String, Object] as PropType<PickerValue> },
|
||||
defaultValue: { type: [String, Object] as PropType<PickerValue> },
|
||||
defaultPickerValue: { type: [String, Object] as PropType<PickerValue> },
|
||||
renderExtraFooter: PropTypes.any,
|
||||
placeholder: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
});
|
||||
};
|
||||
|
||||
export const DatePickerProps = () => ({
|
||||
...PickerProps(),
|
||||
...SinglePickerProps(),
|
||||
export const DatePickerProps = {
|
||||
...PickerProps,
|
||||
...SinglePickerProps,
|
||||
showTime: withUndefined(PropTypes.oneOfType([PropTypes.object, PropTypes.looseBool])),
|
||||
open: PropTypes.looseBool,
|
||||
disabledTime: PropTypes.func,
|
||||
mode: PropTypes.oneOf(['time', 'date', 'month', 'year']),
|
||||
mode: PropTypes.oneOf(tuple('time', 'date', 'month', 'year')),
|
||||
onOpenChange: PropTypes.func,
|
||||
onPanelChange: PropTypes.func,
|
||||
onOk: PropTypes.func,
|
||||
});
|
||||
};
|
||||
|
||||
export const MonthPickerProps = () => ({
|
||||
...PickerProps(),
|
||||
...SinglePickerProps(),
|
||||
export const MonthPickerProps = {
|
||||
...PickerProps,
|
||||
...SinglePickerProps,
|
||||
placeholder: PropTypes.string,
|
||||
monthCellContentRender: PropTypes.func,
|
||||
});
|
||||
};
|
||||
// export const RangePickerPresetRange = PropTypes.oneOfType([TimesType, PropTypes.func])
|
||||
|
||||
export const RangePickerProps = () => ({
|
||||
...PickerProps(),
|
||||
export const RangePickerProps = {
|
||||
...PickerProps,
|
||||
tagPrefixCls: PropTypes.string,
|
||||
value: TimesType,
|
||||
defaultValue: TimesType,
|
||||
defaultPickerValue: TimesType,
|
||||
value: { type: Array as PropType<RangePickerValue> },
|
||||
defaultValue: { type: Array as PropType<RangePickerValue> },
|
||||
defaultPickerValue: { type: Array as PropType<RangePickerValue> },
|
||||
timePicker: PropTypes.any,
|
||||
showTime: withUndefined(PropTypes.oneOfType([PropTypes.object, PropTypes.looseBool])),
|
||||
ranges: PropTypes.object,
|
||||
|
|
@ -88,13 +99,13 @@ export const RangePickerProps = () => ({
|
|||
onPanelChange: PropTypes.func,
|
||||
onMouseenter: PropTypes.func,
|
||||
onMouseleave: PropTypes.func,
|
||||
});
|
||||
};
|
||||
|
||||
export const WeekPickerProps = () => ({
|
||||
...PickerProps(),
|
||||
...SinglePickerProps(),
|
||||
export const WeekPickerProps = {
|
||||
...PickerProps,
|
||||
...SinglePickerProps,
|
||||
placeholder: PropTypes.string,
|
||||
});
|
||||
};
|
||||
|
||||
// export interface DatePickerDecorator extends React.ClassicComponentClass<DatePickerProps> {
|
||||
// RangePicker: React.ClassicComponentClass<RangePickerProps>;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
export function formatDate(value, format) {
|
||||
if (!value) {
|
||||
return '';
|
||||
}
|
||||
if (Array.isArray(format)) {
|
||||
format = format[0];
|
||||
}
|
||||
if (typeof format === 'function') {
|
||||
const result = format(value);
|
||||
if (typeof result === 'string') {
|
||||
return result;
|
||||
} else {
|
||||
throw new Error('The function of format does not return a string');
|
||||
}
|
||||
}
|
||||
return value.format(format);
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
type Value = moment.Moment | undefined | null;
|
||||
type Format = string | string[] | undefined | ((val?: Value) => string | string[] | undefined);
|
||||
export function formatDate(value: Value, format: Format) {
|
||||
if (!value) {
|
||||
return '';
|
||||
}
|
||||
if (Array.isArray(format)) {
|
||||
format = format[0];
|
||||
}
|
||||
if (typeof format === 'function') {
|
||||
return format(value);
|
||||
}
|
||||
return value.format(format);
|
||||
}
|
||||
|
|
@ -1,28 +1,34 @@
|
|||
import { provide, inject } from 'vue';
|
||||
import { provide, inject, defineComponent, DefineComponent } from 'vue';
|
||||
import TimePickerPanel from '../vc-time-picker/Panel';
|
||||
import classNames from '../_util/classNames';
|
||||
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
import { generateShowHourMinuteSecond } from '../time-picker';
|
||||
import enUS from './locale/en_US';
|
||||
import { getOptionProps, initDefaultProps } from '../_util/props-util';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import { getOptionProps } from '../_util/props-util';
|
||||
import { defaultConfigProvider } from '../config-provider';
|
||||
import { checkValidate, stringToMoment, momentToString } from '../_util/moment-util';
|
||||
|
||||
const DEFAULT_FORMAT = {
|
||||
type PickerType = 'date' | 'week' | 'month';
|
||||
|
||||
interface PickerMap {
|
||||
[name: string]: string;
|
||||
}
|
||||
const DEFAULT_FORMAT: PickerMap = {
|
||||
date: 'YYYY-MM-DD',
|
||||
dateTime: 'YYYY-MM-DD HH:mm:ss',
|
||||
week: 'gggg-wo',
|
||||
month: 'YYYY-MM',
|
||||
};
|
||||
|
||||
const LOCALE_FORMAT_MAPPING = {
|
||||
const LOCALE_FORMAT_MAPPING: PickerMap = {
|
||||
date: 'dateFormat',
|
||||
dateTime: 'dateTimeFormat',
|
||||
week: 'weekFormat',
|
||||
month: 'monthFormat',
|
||||
};
|
||||
|
||||
function getColumns({ showHour, showMinute, showSecond, use12Hours }) {
|
||||
function getColumns({ showHour, showMinute, showSecond, use12Hours }: any) {
|
||||
let column = 0;
|
||||
if (showHour) {
|
||||
column += 1;
|
||||
|
|
@ -38,23 +44,25 @@ function getColumns({ showHour, showMinute, showSecond, use12Hours }) {
|
|||
}
|
||||
return column;
|
||||
}
|
||||
|
||||
export default function wrapPicker(Picker, props, pickerType) {
|
||||
return {
|
||||
export default function wrapPicker(
|
||||
Picker: DefineComponent<any>,
|
||||
props: any,
|
||||
pickerType: PickerType,
|
||||
) {
|
||||
return defineComponent({
|
||||
name: Picker.name,
|
||||
inheritAttrs: false,
|
||||
props: initDefaultProps(props, {
|
||||
transitionName: 'slide-up',
|
||||
popupStyle: {},
|
||||
locale: {},
|
||||
}),
|
||||
// model: {
|
||||
// prop: 'value',
|
||||
// event: 'change',
|
||||
// },
|
||||
props: {
|
||||
...props,
|
||||
transitionName: PropTypes.string.def('slide-up'),
|
||||
popupStyle: PropTypes.style,
|
||||
locale: PropTypes.any.def({}),
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
configProvider: inject('configProvider', defaultConfigProvider),
|
||||
picker: undefined,
|
||||
popupRef: undefined,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -76,7 +84,7 @@ export default function wrapPicker(Picker, props, pickerType) {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
savePicker(node) {
|
||||
savePicker(node: any) {
|
||||
this.picker = node;
|
||||
},
|
||||
getDefaultLocale() {
|
||||
|
|
@ -91,37 +99,37 @@ export default function wrapPicker(Picker, props, pickerType) {
|
|||
return result;
|
||||
},
|
||||
|
||||
savePopupRef(ref) {
|
||||
savePopupRef(ref: any) {
|
||||
this.popupRef = ref;
|
||||
},
|
||||
handleOpenChange(open) {
|
||||
handleOpenChange(open: boolean) {
|
||||
this.$emit('openChange', open);
|
||||
},
|
||||
|
||||
handleFocus(e) {
|
||||
handleFocus(e: FocusEvent) {
|
||||
this.$emit('focus', e);
|
||||
},
|
||||
|
||||
handleBlur(e) {
|
||||
handleBlur(e: FocusEvent) {
|
||||
this.$emit('blur', e);
|
||||
},
|
||||
|
||||
handleMouseEnter(e) {
|
||||
handleMouseEnter(e: MouseEvent) {
|
||||
this.$emit('mouseenter', e);
|
||||
},
|
||||
|
||||
handleMouseLeave(e) {
|
||||
handleMouseLeave(e: MouseEvent) {
|
||||
this.$emit('mouseleave', e);
|
||||
},
|
||||
handleChange(date, dateString) {
|
||||
handleChange(date: any, dateString: string) {
|
||||
const value = this.valueFormat ? momentToString(date, this.valueFormat) : date;
|
||||
this.$emit('update:value', value);
|
||||
this.$emit('change', value, dateString);
|
||||
},
|
||||
handleOk(val) {
|
||||
handleOk(val: any) {
|
||||
this.$emit('ok', this.valueFormat ? momentToString(val, this.valueFormat) : val);
|
||||
},
|
||||
handleCalendarChange(date, dateString) {
|
||||
handleCalendarChange(date: any, dateString: string) {
|
||||
this.$emit(
|
||||
'calendarChange',
|
||||
this.valueFormat ? momentToString(date, this.valueFormat) : date,
|
||||
|
|
@ -148,8 +156,8 @@ export default function wrapPicker(Picker, props, pickerType) {
|
|||
}
|
||||
},
|
||||
|
||||
renderPicker(locale, localeCode) {
|
||||
const props = { ...getOptionProps(this), ...this.$attrs };
|
||||
renderPicker(locale: any, localeCode: string) {
|
||||
const props: any = { ...getOptionProps(this), ...this.$attrs };
|
||||
this.transformValue(props);
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
|
|
@ -230,5 +238,5 @@ export default function wrapPicker(Picker, props, pickerType) {
|
|||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ import BaseMixin from '../_util/BaseMixin';
|
|||
import Header from './Header';
|
||||
import Combobox from './Combobox';
|
||||
import { getComponent } from '../_util/props-util';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
function noop() {}
|
||||
|
||||
|
|
@ -31,7 +32,7 @@ function toNearestValidTime(time, hourOptions, minuteOptions, secondOptions) {
|
|||
return moment(`${hour}:${minute}:${second}`, 'HH:mm:ss');
|
||||
}
|
||||
|
||||
const Panel = {
|
||||
const Panel = defineComponent({
|
||||
name: 'Panel',
|
||||
inheritAttrs: false,
|
||||
mixins: [BaseMixin],
|
||||
|
|
@ -223,6 +224,6 @@ const Panel = {
|
|||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export default Panel;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Empty from '../components/empty';
|
||||
import Empty from '../components/date-picker';
|
||||
import '../components/empty/style';
|
||||
|
||||
export default {
|
||||
|
|
|
|||
Loading…
Reference in New Issue