github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: date-picker by ts

pull/2992/head
tangjinzhou 2020-10-14 23:12:51 +08:00
parent db31c526d9
commit 54ca9021c3
12 changed files with 249 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/_util/props-util/initDefaultProps.ts
View File

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

2
components/date-picker/InputIcon.js → components/date-picker/InputIcon.tsx
View File

@ -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) ? (

86
components/date-picker/RangePicker.jsx → components/date-picker/RangePicker.tsx
View File

@ -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>
);
},
};
});

47
components/date-picker/WeekPicker.jsx → components/date-picker/WeekPicker.tsx
View File

@ -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>
);
},
};
});

102
components/date-picker/createPicker.js → components/date-picker/createPicker.tsx
View File

@ -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>
);
},
};
});
}

25
components/date-picker/index.js → components/date-picker/index.ts
View File

@ -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);

69
components/date-picker/interface.js → components/date-picker/interface.ts
View File

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

17
components/date-picker/utils.js
View File

@ -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);
}

14
components/date-picker/utils.ts Normal file
View File

@ -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);
}

68
components/date-picker/wrapPicker.js → components/date-picker/wrapPicker.tsx
View File

@ -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
components/vc-time-picker/Panel.jsx
View File

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

2
examples/App.tsx
View File

@ -1,4 +1,4 @@
import Empty from '../components/empty';
import Empty from '../components/date-picker';
import '../components/empty/style';
export default {