mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-15 17:31:43 +08:00
73bef787cd
* feat: add Result component * fix: update md template tag html>tpl - fix `result` typo - update jest `result` snapshots * refactor: svg file to functional component icon - update jest snapshot * feat: add result * Feat descriptions (#1251) * feat: add descriptions * fix: add descriptions types and fix docs * fix: lint change code * fix: demo warning * fix: update demo, snapshot and remove classnames * test: add descriptions test * fix: descriptions demo (#1498) * feat: add page header (#1250) * feat: add page-header component * update site: page-header * ts definition update: page-header * get page-header props with getComponentFromProp func * optimize page-header * doc: add page-header actions.md responsive.md * breadcrumb itemRender add pure function support * style: format code * feat: update style to 3.23.6 from 2.13.6 * feat: update style to 3.26.8 from 3.23.6 * chore: update util * chore: update util * feat: update affix * feat: update alert * feat: update anchor * feat: update auto-complete * feat: update avatar * feat: update back-top * feat: update badge * feat: update button * feat: update breadcrumb * feat: update ts * docs: update doc * feat: update calendat * feat: update card * feat: update carousel * feat: update carousel * feat: update checkbox * feat: update comment * feat: update config-provider * docs: update doc * feat: update collapse * feat: update locale * feat: update date-picker * feat: update divider * feat: update drawer * feat: update dropdown * feat: update rc-trigger * feat: update dropdown * feat: update empty * test: add empty test * feat: update form * feat: update form * feat: update spin * feat: update grid * docs: update grid doc * feat: update icon * feat: update slider * feat: update textarea * feat: update input-number * feat: update layout * feat: update list * feat: update menu * feat: meaage add key for update content * feat: modal add closeIcon support * feat: update notification * feat: add pagination disabled support * feat: popconfirm add disabled support * test: update popover * feat: progress support custom line-gradiend * feat: update radio * test: update radio test * docs: update rate demo * feat: skeleton add avatar support number type * test: add switch test * test: update statistic test * fix: input clear icon event * feat: steps add type、 v-model、subTitle * feat: delete typography component * feat: delete Typography style * perf: update select * feat: add download transformFile previewFile actio * docs: update upload * feat: update tree-select * docs: update tree-select * feat: tree add blockNode selectable * docs: add tree demo * test: update snap * docs: updatedoc * feat: update tag * docs: update ad doc * feat: update tooltip * feat: update timeline * feat: time-picker add clearIcon * docs: update tabs * feat: transfer support custom children * test: update transfer test * feat: update table * test: update table test * test: update test * feat: calendar update locale * test: update test snap * feat: add mentions (#1790) * feat: mentions style * feat: theme default * feat: add mentions component * feat: mentions API * feat: add unit test for mentions * feat: update mentions demo * perf: model and inheritAttrs for mentions * perf: use getComponentFromProp instead of this.$props * perf: mentions rm defaultProps * feat: rm rows in mentionsProps * fix: mentions keyDown didn't work * docs: update mentions api * perf: mentions code * feat: update mentions * bump 1.5.0-alpha.1 * feat: pageheader add ghost prop * docs: update descriptions demo * chore: page-header add ghost type * fix: color error * feat: update to 3.26.12 * fix: some prop default value * fix(typo): form, carousel, upload. duplicate identifier (#1848) * Add Mentions Type (#1845) * feat: add mentions type * feat: add mentions in ant-design-vue.d.ts * docs: update doc * docs: add changelog * fix: mentions getPopupCotainer value (#1850) * docs: update doc * docs: uptate demo * docs: update demo * docs: delete demo * docs: delete doc * test: update snapshots * style: format code * chore: update travis * docs: update demo Co-authored-by: Sendya <18x@loacg.com> Co-authored-by: zkwolf <chenhao5866@gmail.com> Co-authored-by: drafish <xwlyy1991@163.com> Co-authored-by: Amour1688 <31695475+Amour1688@users.noreply.github.com>
234 lines
6.2 KiB
JavaScript
234 lines
6.2 KiB
JavaScript
import TimePickerPanel from '../vc-time-picker/Panel';
|
|
import classNames from 'classnames';
|
|
import * as moment from 'moment';
|
|
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
|
import { generateShowHourMinuteSecond } from '../time-picker';
|
|
import enUS from './locale/en_US';
|
|
import interopDefault from '../_util/interopDefault';
|
|
import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-util';
|
|
import { ConfigConsumerProps } from '../config-provider';
|
|
import warning from '../_util/warning';
|
|
|
|
function checkValidate(value, propName) {
|
|
const values = Array.isArray(value) ? value : [value];
|
|
values.forEach(val => {
|
|
if (!val) return;
|
|
|
|
warning(
|
|
!interopDefault(moment).isMoment(val) || val.isValid(),
|
|
'DatePicker',
|
|
`\`${propName}\` provides invalidate moment time. If you want to set empty value, use \`null\` instead.`,
|
|
);
|
|
});
|
|
}
|
|
|
|
const DEFAULT_FORMAT = {
|
|
date: 'YYYY-MM-DD',
|
|
dateTime: 'YYYY-MM-DD HH:mm:ss',
|
|
week: 'gggg-wo',
|
|
month: 'YYYY-MM',
|
|
};
|
|
|
|
const LOCALE_FORMAT_MAPPING = {
|
|
date: 'dateFormat',
|
|
dateTime: 'dateTimeFormat',
|
|
week: 'weekFormat',
|
|
month: 'monthFormat',
|
|
};
|
|
|
|
function getColumns({ showHour, showMinute, showSecond, use12Hours }) {
|
|
let column = 0;
|
|
if (showHour) {
|
|
column += 1;
|
|
}
|
|
if (showMinute) {
|
|
column += 1;
|
|
}
|
|
if (showSecond) {
|
|
column += 1;
|
|
}
|
|
if (use12Hours) {
|
|
column += 1;
|
|
}
|
|
return column;
|
|
}
|
|
|
|
export default function wrapPicker(Picker, props, pickerType) {
|
|
return {
|
|
name: Picker.name,
|
|
props: initDefaultProps(props, {
|
|
transitionName: 'slide-up',
|
|
popupStyle: {},
|
|
locale: {},
|
|
}),
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change',
|
|
},
|
|
inject: {
|
|
configProvider: { default: () => ConfigConsumerProps },
|
|
},
|
|
provide() {
|
|
return {
|
|
savePopupRef: this.savePopupRef,
|
|
};
|
|
},
|
|
mounted() {
|
|
const { autoFocus, disabled, value, defaultValue } = this;
|
|
checkValidate(defaultValue, 'defaultValue');
|
|
checkValidate(value, 'value');
|
|
if (autoFocus && !disabled) {
|
|
this.$nextTick(() => {
|
|
this.focus();
|
|
});
|
|
}
|
|
},
|
|
watch: {
|
|
value(val) {
|
|
checkValidate(val, 'value');
|
|
},
|
|
},
|
|
methods: {
|
|
getDefaultLocale() {
|
|
const result = {
|
|
...enUS,
|
|
...this.locale,
|
|
};
|
|
result.lang = {
|
|
...result.lang,
|
|
...(this.locale || {}).lang,
|
|
};
|
|
return result;
|
|
},
|
|
|
|
savePopupRef(ref) {
|
|
this.popupRef = ref;
|
|
},
|
|
handleOpenChange(open) {
|
|
this.$emit('openChange', open);
|
|
},
|
|
|
|
handleFocus(e) {
|
|
this.$emit('focus', e);
|
|
},
|
|
|
|
handleBlur(e) {
|
|
this.$emit('blur', e);
|
|
},
|
|
|
|
handleMouseEnter(e) {
|
|
this.$emit('mouseenter', e);
|
|
},
|
|
|
|
handleMouseLeave(e) {
|
|
this.$emit('mouseleave', e);
|
|
},
|
|
|
|
focus() {
|
|
this.$refs.picker.focus();
|
|
},
|
|
|
|
blur() {
|
|
this.$refs.picker.blur();
|
|
},
|
|
|
|
renderPicker(locale, localeCode) {
|
|
const props = getOptionProps(this);
|
|
const {
|
|
prefixCls: customizePrefixCls,
|
|
inputPrefixCls: customizeInputPrefixCls,
|
|
getCalendarContainer,
|
|
size,
|
|
showTime,
|
|
disabled,
|
|
format,
|
|
} = props;
|
|
const mergedPickerType = showTime ? `${pickerType}Time` : pickerType;
|
|
const mergedFormat =
|
|
format ||
|
|
locale[LOCALE_FORMAT_MAPPING[mergedPickerType]] ||
|
|
DEFAULT_FORMAT[mergedPickerType];
|
|
|
|
const { getPrefixCls, getPopupContainer: getContextPopupContainer } = this.configProvider;
|
|
const getPopupContainer = getCalendarContainer || getContextPopupContainer;
|
|
const prefixCls = getPrefixCls('calendar', customizePrefixCls);
|
|
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
|
|
|
|
const pickerClass = classNames(`${prefixCls}-picker`, {
|
|
[`${prefixCls}-picker-${size}`]: !!size,
|
|
});
|
|
const pickerInputClass = classNames(`${prefixCls}-picker-input`, inputPrefixCls, {
|
|
[`${inputPrefixCls}-lg`]: size === 'large',
|
|
[`${inputPrefixCls}-sm`]: size === 'small',
|
|
[`${inputPrefixCls}-disabled`]: disabled,
|
|
});
|
|
|
|
const timeFormat = (showTime && showTime.format) || 'HH:mm:ss';
|
|
const vcTimePickerProps = {
|
|
...generateShowHourMinuteSecond(timeFormat),
|
|
format: timeFormat,
|
|
use12Hours: showTime && showTime.use12Hours,
|
|
};
|
|
const columns = getColumns(vcTimePickerProps);
|
|
const timePickerCls = `${prefixCls}-time-picker-column-${columns}`;
|
|
const timePickerPanelProps = {
|
|
props: {
|
|
...vcTimePickerProps,
|
|
...showTime,
|
|
prefixCls: `${prefixCls}-time-picker`,
|
|
placeholder: locale.timePickerLocale.placeholder,
|
|
transitionName: 'slide-up',
|
|
},
|
|
class: timePickerCls,
|
|
on: {
|
|
esc: () => {},
|
|
},
|
|
};
|
|
const timePicker = showTime ? <TimePickerPanel {...timePickerPanelProps} /> : null;
|
|
const pickerProps = {
|
|
props: {
|
|
...props,
|
|
getCalendarContainer: getPopupContainer,
|
|
format: mergedFormat,
|
|
pickerClass,
|
|
pickerInputClass,
|
|
locale,
|
|
localeCode,
|
|
timePicker,
|
|
},
|
|
on: {
|
|
...getListeners(this),
|
|
openChange: this.handleOpenChange,
|
|
focus: this.handleFocus,
|
|
blur: this.handleBlur,
|
|
mouseenter: this.handleMouseEnter,
|
|
mouseleave: this.handleMouseLeave,
|
|
},
|
|
ref: 'picker',
|
|
scopedSlots: this.$scopedSlots || {},
|
|
};
|
|
return (
|
|
<Picker {...pickerProps}>
|
|
{this.$slots &&
|
|
Object.keys(this.$slots).map(key => (
|
|
<template slot={key} key={key}>
|
|
{this.$slots[key]}
|
|
</template>
|
|
))}
|
|
</Picker>
|
|
);
|
|
},
|
|
},
|
|
|
|
render() {
|
|
return (
|
|
<LocaleReceiver
|
|
componentName="DatePicker"
|
|
defaultLocale={this.getDefaultLocale}
|
|
scopedSlots={{ default: this.renderPicker }}
|
|
/>
|
|
);
|
|
},
|
|
};
|
|
}
|