123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233 |
- import moment from 'moment';
- import PropTypes from '../_util/vue-types';
- import BaseMixin from '../_util/BaseMixin';
- import Header from './Header';
- import Combobox from './Combobox';
- import { getComponentFromProp, getListeners } from '../_util/props-util';
- function noop() {}
- function generateOptions(length, disabledOptions, hideDisabledOptions) {
- var step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
- var arr = [];
- for (var value = 0; value < length; value += step) {
- if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) {
- arr.push(value);
- }
- }
- return arr;
- }
- function toNearestValidTime(time, hourOptions, minuteOptions, secondOptions) {
- var hour = hourOptions.slice().sort(function (a, b) {
- return Math.abs(time.hour() - a) - Math.abs(time.hour() - b);
- })[0];
- var minute = minuteOptions.slice().sort(function (a, b) {
- return Math.abs(time.minute() - a) - Math.abs(time.minute() - b);
- })[0];
- var second = secondOptions.slice().sort(function (a, b) {
- return Math.abs(time.second() - a) - Math.abs(time.second() - b);
- })[0];
- return moment(hour + ':' + minute + ':' + second, 'HH:mm:ss');
- }
- var Panel = {
- mixins: [BaseMixin],
- props: {
- clearText: PropTypes.string,
- prefixCls: PropTypes.string.def('rc-time-picker-panel'),
- defaultOpenValue: {
- type: Object,
- 'default': function _default() {
- return moment();
- }
- },
- value: PropTypes.any,
- defaultValue: PropTypes.any,
- placeholder: PropTypes.string,
- format: PropTypes.string,
- inputReadOnly: PropTypes.bool.def(false),
- disabledHours: PropTypes.func.def(noop),
- disabledMinutes: PropTypes.func.def(noop),
- disabledSeconds: PropTypes.func.def(noop),
- hideDisabledOptions: PropTypes.bool,
- // onChange: PropTypes.func,
- // onEsc: PropTypes.func,
- allowEmpty: PropTypes.bool,
- showHour: PropTypes.bool,
- showMinute: PropTypes.bool,
- showSecond: PropTypes.bool,
- // onClear: PropTypes.func,
- use12Hours: PropTypes.bool.def(false),
- hourStep: PropTypes.number,
- minuteStep: PropTypes.number,
- secondStep: PropTypes.number,
- addon: PropTypes.func.def(noop),
- focusOnOpen: PropTypes.bool,
- // onKeydown: PropTypes.func,
- clearIcon: PropTypes.any
- },
- data: function data() {
- return {
- sValue: this.value,
- selectionRange: [],
- currentSelectPanel: ''
- };
- },
- watch: {
- value: function value(val) {
- this.setState({
- sValue: val
- });
- }
- },
- methods: {
- onChange: function onChange(newValue) {
- this.setState({ sValue: newValue });
- this.__emit('change', newValue);
- },
- onAmPmChange: function onAmPmChange(ampm) {
- this.__emit('amPmChange', ampm);
- },
- onCurrentSelectPanelChange: function onCurrentSelectPanelChange(currentSelectPanel) {
- this.setState({ currentSelectPanel: currentSelectPanel });
- },
- // https://github.com/ant-design/ant-design/issues/5829
- close: function close() {
- this.__emit('esc');
- },
- onEsc: function onEsc(e) {
- this.__emit('esc', e);
- },
- disabledHours2: function disabledHours2() {
- var use12Hours = this.use12Hours,
- disabledHours = this.disabledHours;
- var disabledOptions = disabledHours();
- if (use12Hours && Array.isArray(disabledOptions)) {
- if (this.isAM()) {
- disabledOptions = disabledOptions.filter(function (h) {
- return h < 12;
- }).map(function (h) {
- return h === 0 ? 12 : h;
- });
- } else {
- disabledOptions = disabledOptions.map(function (h) {
- return h === 12 ? 12 : h - 12;
- });
- }
- }
- return disabledOptions;
- },
- isAM: function isAM() {
- var value = this.sValue || this.defaultOpenValue;
- return value.hour() >= 0 && value.hour() < 12;
- }
- },
- render: function render() {
- var h = arguments[0];
- var prefixCls = this.prefixCls,
- placeholder = this.placeholder,
- disabledMinutes = this.disabledMinutes,
- addon = this.addon,
- disabledSeconds = this.disabledSeconds,
- hideDisabledOptions = this.hideDisabledOptions,
- showHour = this.showHour,
- showMinute = this.showMinute,
- showSecond = this.showSecond,
- format = this.format,
- defaultOpenValue = this.defaultOpenValue,
- clearText = this.clearText,
- use12Hours = this.use12Hours,
- focusOnOpen = this.focusOnOpen,
- hourStep = this.hourStep,
- minuteStep = this.minuteStep,
- secondStep = this.secondStep,
- inputReadOnly = this.inputReadOnly,
- sValue = this.sValue,
- currentSelectPanel = this.currentSelectPanel;
- var clearIcon = getComponentFromProp(this, 'clearIcon');
- var _getListeners = getListeners(this),
- _getListeners$esc = _getListeners.esc,
- esc = _getListeners$esc === undefined ? noop : _getListeners$esc,
- _getListeners$keydown = _getListeners.keydown,
- keydown = _getListeners$keydown === undefined ? noop : _getListeners$keydown;
- var disabledHourOptions = this.disabledHours2();
- var disabledMinuteOptions = disabledMinutes(sValue ? sValue.hour() : null);
- var disabledSecondOptions = disabledSeconds(sValue ? sValue.hour() : null, sValue ? sValue.minute() : null);
- var hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions, hourStep);
- var minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions, minuteStep);
- var secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions, secondStep);
- var validDefaultOpenValue = toNearestValidTime(defaultOpenValue, hourOptions, minuteOptions, secondOptions);
- return h(
- 'div',
- { 'class': prefixCls + '-inner' },
- [h(Header, {
- attrs: {
- clearText: clearText,
- prefixCls: prefixCls,
- defaultOpenValue: validDefaultOpenValue,
- value: sValue,
- currentSelectPanel: currentSelectPanel,
- format: format,
- placeholder: placeholder,
- hourOptions: hourOptions,
- minuteOptions: minuteOptions,
- secondOptions: secondOptions,
- disabledHours: this.disabledHours2,
- disabledMinutes: disabledMinutes,
- disabledSeconds: disabledSeconds,
- focusOnOpen: focusOnOpen,
- inputReadOnly: inputReadOnly,
- clearIcon: clearIcon
- },
- on: {
- 'esc': esc,
- 'change': this.onChange,
- 'keydown': keydown
- }
- }), h(Combobox, {
- attrs: {
- prefixCls: prefixCls,
- value: sValue,
- defaultOpenValue: validDefaultOpenValue,
- format: format,
- showHour: showHour,
- showMinute: showMinute,
- showSecond: showSecond,
- hourOptions: hourOptions,
- minuteOptions: minuteOptions,
- secondOptions: secondOptions,
- disabledHours: this.disabledHours2,
- disabledMinutes: disabledMinutes,
- disabledSeconds: disabledSeconds,
- use12Hours: use12Hours,
- isAM: this.isAM()
- },
- on: {
- 'change': this.onChange,
- 'amPmChange': this.onAmPmChange,
- 'currentSelectPanelChange': this.onCurrentSelectPanelChange,
- 'esc': this.onEsc
- }
- }), addon(this)]
- );
- }
- };
- export default Panel;
|