ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
360 lines (339 loc) • 9.95 kB
JavaScript
import PropTypes from '../_util/vue-types';
import BaseMixin from '../_util/BaseMixin';
import Trigger from '../trigger';
import Panel from './Panel';
import placements from './placements';
import moment from 'moment';
import { initDefaultProps, hasProp } from '../_util/props-util';
function noop() {}
export default {
mixins: [BaseMixin],
name: 'VcTimePicker',
props: initDefaultProps({
prefixCls: PropTypes.string,
clearText: PropTypes.string,
value: PropTypes.any,
defaultOpenValue: {
type: Object,
'default': function _default() {
return moment();
}
},
inputReadOnly: PropTypes.bool,
disabled: PropTypes.bool,
allowEmpty: PropTypes.bool,
defaultValue: PropTypes.any,
open: PropTypes.bool,
defaultOpen: PropTypes.bool,
align: PropTypes.object,
placement: PropTypes.any,
transitionName: PropTypes.string,
getPopupContainer: PropTypes.func,
placeholder: PropTypes.string,
format: PropTypes.string,
showHour: PropTypes.bool,
showMinute: PropTypes.bool,
showSecond: PropTypes.bool,
popupClassName: PropTypes.string,
disabledHours: PropTypes.func,
disabledMinutes: PropTypes.func,
disabledSeconds: PropTypes.func,
hideDisabledOptions: PropTypes.bool,
// onChange: PropTypes.func,
// onOpen: PropTypes.func,
// onClose: PropTypes.func,
// onFocus: PropTypes.func,
// onBlur: PropTypes.func,
name: PropTypes.string,
autoComplete: PropTypes.string,
use12Hours: PropTypes.bool,
hourStep: PropTypes.number,
minuteStep: PropTypes.number,
secondStep: PropTypes.number,
focusOnOpen: PropTypes.bool,
// onKeyDown: PropTypes.func,
autoFocus: PropTypes.bool,
id: PropTypes.string
}, {
clearText: 'clear',
prefixCls: 'rc-time-picker',
defaultOpen: false,
inputReadOnly: false,
popupClassName: '',
align: {},
id: '',
allowEmpty: true,
showHour: true,
showMinute: true,
showSecond: true,
disabledHours: noop,
disabledMinutes: noop,
disabledSeconds: noop,
hideDisabledOptions: false,
placement: 'bottomLeft',
use12Hours: false,
focusOnOpen: false
}),
data: function data() {
var defaultOpen = this.defaultOpen,
defaultValue = this.defaultValue,
_open = this.open,
open = _open === undefined ? defaultOpen : _open,
_value = this.value,
value = _value === undefined ? defaultValue : _value;
return {
sOpen: open,
sValue: value
};
},
mounted: function mounted() {
var _this = this;
this.$nextTick(function () {
if (_this.autoFocus) {
_this.focus();
}
});
},
watch: {
value: function value(val) {
this.setState({
sValue: val
});
},
open: function open(val) {
if (val !== undefined) {
this.setState({
sOpen: val
});
}
}
},
methods: {
onPanelChange: function onPanelChange(value) {
this.setValue(value);
},
onPanelClear: function onPanelClear() {
this.setValue(null);
this.setOpen(false);
},
onVisibleChange: function onVisibleChange(open) {
this.setOpen(open);
},
onEsc: function onEsc() {
this.setOpen(false);
this.focus();
},
onKeyDown: function onKeyDown(e) {
if (e.keyCode === 40) {
this.setOpen(true);
}
},
onKeyDown2: function onKeyDown2(e) {
this.__emit('keydown', e);
},
setValue: function setValue(value) {
if (!hasProp(this, 'value')) {
this.setState({
sValue: value
});
}
this.__emit('change', value);
},
getFormat: function getFormat() {
var format = this.format,
showHour = this.showHour,
showMinute = this.showMinute,
showSecond = this.showSecond,
use12Hours = this.use12Hours;
if (format) {
return format;
}
if (use12Hours) {
var fmtString = [showHour ? 'h' : '', showMinute ? 'mm' : '', showSecond ? 'ss' : ''].filter(function (item) {
return !!item;
}).join(':');
return fmtString.concat(' a');
}
return [showHour ? 'HH' : '', showMinute ? 'mm' : '', showSecond ? 'ss' : ''].filter(function (item) {
return !!item;
}).join(':');
},
getPanelElement: function getPanelElement() {
var h = this.$createElement;
var prefixCls = this.prefixCls,
placeholder = this.placeholder,
disabledHours = this.disabledHours,
disabledMinutes = this.disabledMinutes,
disabledSeconds = this.disabledSeconds,
hideDisabledOptions = this.hideDisabledOptions,
inputReadOnly = this.inputReadOnly,
allowEmpty = this.allowEmpty,
showHour = this.showHour,
showMinute = this.showMinute,
showSecond = this.showSecond,
defaultOpenValue = this.defaultOpenValue,
clearText = this.clearText,
use12Hours = this.use12Hours,
focusOnOpen = this.focusOnOpen,
onKeyDown2 = this.onKeyDown2,
hourStep = this.hourStep,
minuteStep = this.minuteStep,
secondStep = this.secondStep,
sValue = this.sValue;
return h(
Panel,
{
attrs: {
clearText: clearText,
prefixCls: prefixCls + '-panel',
value: sValue,
inputReadOnly: inputReadOnly,
defaultOpenValue: defaultOpenValue,
showHour: showHour,
showMinute: showMinute,
showSecond: showSecond,
allowEmpty: allowEmpty,
format: this.getFormat(),
placeholder: placeholder,
disabledHours: disabledHours,
disabledMinutes: disabledMinutes,
disabledSeconds: disabledSeconds,
hideDisabledOptions: hideDisabledOptions,
use12Hours: use12Hours,
hourStep: hourStep,
minuteStep: minuteStep,
secondStep: secondStep,
focusOnOpen: focusOnOpen
},
ref: 'panel', on: {
'change': this.onPanelChange,
'clear': this.onPanelClear,
'esc': this.onEsc,
'keyDown': onKeyDown2
}
},
[this.$slots.addon]
);
},
getPopupClassName: function getPopupClassName() {
var showHour = this.showHour,
showMinute = this.showMinute,
showSecond = this.showSecond,
use12Hours = this.use12Hours,
prefixCls = this.prefixCls;
var popupClassName = this.popupClassName;
// Keep it for old compatibility
if ((!showHour || !showMinute || !showSecond) && !use12Hours) {
popupClassName += ' ' + prefixCls + '-panel-narrow';
}
var selectColumnCount = 0;
if (showHour) {
selectColumnCount += 1;
}
if (showMinute) {
selectColumnCount += 1;
}
if (showSecond) {
selectColumnCount += 1;
}
if (use12Hours) {
selectColumnCount += 1;
}
popupClassName += ' ' + prefixCls + '-panel-column-' + selectColumnCount;
return popupClassName;
},
setOpen: function setOpen(open) {
if (this.sOpen !== open) {
if (!hasProp(this, 'open')) {
this.setState({ sOpen: open });
}
if (open) {
this.__emit('open', { open: open });
} else {
this.__emit('close', { open: open });
}
}
},
focus: function focus() {
this.$refs.picker.focus();
},
blur: function blur() {
this.$refs.picker.blur();
},
onFocus: function onFocus(e) {
this.__emit('focus', e);
},
onBlur: function onBlur(e) {
this.__emit('blur', e);
}
},
render: function render() {
var h = arguments[0];
var prefixCls = this.prefixCls,
placeholder = this.placeholder,
placement = this.placement,
align = this.align,
id = this.id,
disabled = this.disabled,
transitionName = this.transitionName,
getPopupContainer = this.getPopupContainer,
name = this.name,
autoComplete = this.autoComplete,
autoFocus = this.autoFocus,
inputReadOnly = this.inputReadOnly,
sOpen = this.sOpen,
sValue = this.sValue,
onFocus = this.onFocus,
onBlur = this.onBlur;
var popupClassName = this.getPopupClassName();
return h(
Trigger,
{
attrs: {
prefixCls: prefixCls + '-panel',
popupClassName: popupClassName,
popupAlign: align,
builtinPlacements: placements,
popupPlacement: placement,
action: disabled ? [] : ['click'],
destroyPopupOnHide: true,
getPopupContainer: getPopupContainer,
popupTransitionName: transitionName,
popupVisible: sOpen
},
on: {
'popupVisibleChange': this.onVisibleChange
}
},
[h(
'template',
{ slot: 'popup' },
[this.getPanelElement()]
), h(
'span',
{ 'class': '' + prefixCls },
[h('input', {
'class': prefixCls + '-input',
ref: 'picker',
attrs: { type: 'text',
placeholder: placeholder,
name: name,
disabled: disabled,
autoComplete: autoComplete,
autoFocus: autoFocus,
readOnly: !!inputReadOnly,
id: id
},
on: {
'keydown': this.onKeyDown,
'focus': onFocus,
'blur': onBlur
},
domProps: {
'value': sValue && sValue.format(this.getFormat()) || ''
}
}), h('span', { 'class': prefixCls + '-icon' })]
)]
);
}
};