import omit from 'omit.js';
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 {
initDefaultProps,
hasProp,
getOptionProps,
getComponent,
isValidElement,
getListeners,
} from '../_util/props-util';
import { cloneElement } from '../_util/vnode';
import { ConfigConsumerProps } from '../config-provider';
import Base from '../base';
import {
checkValidate,
stringToMoment,
momentToString,
TimeOrTimesType,
} from '../_util/moment-util';
export function generateShowHourMinuteSecond(format) {
// 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,
};
}
export const TimePickerProps = () => ({
size: PropTypes.oneOf(['large', 'default', 'small']),
value: TimeOrTimesType,
defaultValue: TimeOrTimesType,
open: PropTypes.bool,
format: PropTypes.string,
disabled: PropTypes.bool,
placeholder: PropTypes.string,
prefixCls: PropTypes.string,
hideDisabledOptions: PropTypes.bool,
disabledHours: PropTypes.func,
disabledMinutes: PropTypes.func,
disabledSeconds: PropTypes.func,
getPopupContainer: PropTypes.func,
use12Hours: PropTypes.bool,
focusOnOpen: PropTypes.bool,
hourStep: PropTypes.number,
minuteStep: PropTypes.number,
secondStep: PropTypes.number,
allowEmpty: PropTypes.bool,
allowClear: PropTypes.bool,
inputReadOnly: PropTypes.bool,
clearText: PropTypes.string,
defaultOpenValue: PropTypes.object,
popupClassName: PropTypes.string,
popupStyle: PropTypes.object,
suffixIcon: PropTypes.any,
align: PropTypes.object,
placement: PropTypes.any,
transitionName: PropTypes.string,
autofocus: PropTypes.bool,
addon: PropTypes.any,
clearIcon: PropTypes.any,
locale: PropTypes.object,
valueFormat: PropTypes.string,
});
const TimePicker = {
name: 'ATimePicker',
mixins: [BaseMixin],
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,
}),
model: {
prop: 'value',
event: 'change',
},
provide() {
return {
savePopupRef: this.savePopupRef,
};
},
inject: {
configProvider: { default: () => ConfigConsumerProps },
},
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) });
},
},
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;
},
handleChange(value) {
if (!hasProp(this, 'value')) {
this.setState({ sValue: value });
}
const { format = 'HH:mm:ss' } = this;
this.$emit(
'change',
this.valueFormat ? momentToString(value, this.valueFormat) : value,
(value && value.format(format)) || '',
);
},
handleOpenClose({ open }) {
this.$emit('openChange', open);
this.$emit('update:open', open);
},
focus() {
this.$refs.timePicker.focus();
},
blur() {
this.$refs.timePicker.blur();
},
renderInputIcon(prefixCls) {
let suffixIcon = getComponent(this, 'suffixIcon');
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
const clockIcon = (suffixIcon &&
isValidElement(suffixIcon) &&
cloneElement(suffixIcon, {
class: `${prefixCls}-clock-icon`,
})) ||