ant-design-vue/components/vc-time-picker/Panel.jsx

213 lines
5.7 KiB
Vue
Raw Normal View History

2019-01-12 11:33:27 +08:00
import PropTypes from '../_util/vue-types';
import BaseMixin from '../_util/BaseMixin';
import Header from './Header';
import Combobox from './Combobox';
import moment from 'moment';
import { getComponentFromProp } from '../_util/props-util';
2018-03-19 10:16:27 +08:00
2019-01-12 11:33:27 +08:00
function noop() {}
2018-03-07 22:21:55 +08:00
2019-01-12 11:33:27 +08:00
function generateOptions(length, disabledOptions, hideDisabledOptions, step = 1) {
const arr = [];
2018-03-07 22:21:55 +08:00
for (let value = 0; value < length; value += step) {
if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) {
2019-01-12 11:33:27 +08:00
arr.push(value);
2018-03-07 22:21:55 +08:00
}
}
2019-01-12 11:33:27 +08:00
return arr;
2018-03-07 22:21:55 +08:00
}
2018-03-08 23:02:04 +08:00
const Panel = {
mixins: [BaseMixin],
props: {
2018-03-07 22:21:55 +08:00
clearText: PropTypes.string,
2018-03-08 23:02:04 +08:00
prefixCls: PropTypes.string.def('rc-time-picker-panel'),
defaultOpenValue: {
type: Object,
default: () => {
2019-01-12 11:33:27 +08:00
return moment();
2018-03-08 23:02:04 +08:00
},
},
2018-03-17 21:38:29 +08:00
value: PropTypes.any,
defaultValue: PropTypes.any,
2018-03-07 22:21:55 +08:00
placeholder: PropTypes.string,
format: PropTypes.string,
2018-03-08 23:02:04 +08:00
inputReadOnly: PropTypes.bool.def(false),
disabledHours: PropTypes.func.def(noop),
disabledMinutes: PropTypes.func.def(noop),
disabledSeconds: PropTypes.func.def(noop),
2018-03-07 22:21:55 +08:00
hideDisabledOptions: PropTypes.bool,
2018-03-08 23:02:04 +08:00
// onChange: PropTypes.func,
// onEsc: PropTypes.func,
2018-03-07 22:21:55 +08:00
allowEmpty: PropTypes.bool,
showHour: PropTypes.bool,
showMinute: PropTypes.bool,
showSecond: PropTypes.bool,
2018-03-08 23:02:04 +08:00
// onClear: PropTypes.func,
use12Hours: PropTypes.bool.def(false),
2018-03-07 22:21:55 +08:00
hourStep: PropTypes.number,
minuteStep: PropTypes.number,
secondStep: PropTypes.number,
addon: PropTypes.func.def(noop),
2018-03-07 22:21:55 +08:00
focusOnOpen: PropTypes.bool,
2018-03-08 23:02:04 +08:00
// onKeydown: PropTypes.func,
clearIcon: PropTypes.any,
2018-03-08 23:02:04 +08:00
},
2019-01-12 11:33:27 +08:00
data() {
2018-03-08 23:02:04 +08:00
return {
sValue: this.value,
2018-03-07 22:21:55 +08:00
selectionRange: [],
2018-03-08 23:02:04 +08:00
currentSelectPanel: '',
showStr: true,
2019-01-12 11:33:27 +08:00
};
2018-03-08 23:02:04 +08:00
},
watch: {
2019-01-12 11:33:27 +08:00
value(val) {
2018-03-08 23:02:04 +08:00
if (val) {
this.setState({
sValue: val,
showStr: true,
2019-01-12 11:33:27 +08:00
});
2018-03-08 23:02:04 +08:00
} else {
this.setState({
showStr: false,
2019-01-12 11:33:27 +08:00
});
2018-03-08 23:02:04 +08:00
}
},
},
2018-03-07 22:21:55 +08:00
2018-03-08 23:02:04 +08:00
methods: {
2019-01-12 11:33:27 +08:00
onChange(newValue) {
this.setState({ sValue: newValue });
this.__emit('change', newValue);
2018-03-08 23:02:04 +08:00
},
2018-03-07 22:21:55 +08:00
2019-01-12 11:33:27 +08:00
onCurrentSelectPanelChange(currentSelectPanel) {
this.setState({ currentSelectPanel });
2018-03-08 23:02:04 +08:00
},
2018-03-07 22:21:55 +08:00
2018-03-08 23:02:04 +08:00
// https://github.com/ant-design/ant-design/issues/5829
2019-01-12 11:33:27 +08:00
close() {
this.__emit('esc');
2018-03-08 23:02:04 +08:00
},
2018-03-07 22:21:55 +08:00
2019-01-12 11:33:27 +08:00
disabledHours2() {
const { use12Hours, disabledHours } = this;
let disabledOptions = disabledHours();
2018-03-08 23:02:04 +08:00
if (use12Hours && Array.isArray(disabledOptions)) {
if (this.isAM()) {
2019-01-12 11:33:27 +08:00
disabledOptions = disabledOptions.filter(h => h < 12).map(h => (h === 0 ? 12 : h));
2018-03-08 23:02:04 +08:00
} else {
2019-01-12 11:33:27 +08:00
disabledOptions = disabledOptions.map(h => (h === 12 ? 12 : h - 12));
2018-03-08 23:02:04 +08:00
}
2018-03-07 22:21:55 +08:00
}
2019-01-12 11:33:27 +08:00
return disabledOptions;
2018-03-08 23:02:04 +08:00
},
2018-03-07 22:21:55 +08:00
2019-01-12 11:33:27 +08:00
isAM() {
const value = this.sValue || this.defaultOpenValue;
return value.hour() >= 0 && value.hour() < 12;
2018-03-08 23:02:04 +08:00
},
},
2018-03-07 22:21:55 +08:00
2019-01-12 11:33:27 +08:00
render() {
2018-03-07 22:21:55 +08:00
const {
2019-01-12 11:33:27 +08:00
prefixCls,
placeholder,
disabledMinutes,
addon,
disabledSeconds,
hideDisabledOptions,
allowEmpty,
showHour,
showMinute,
showSecond,
format,
defaultOpenValue,
clearText,
use12Hours,
focusOnOpen,
hourStep,
minuteStep,
secondStep,
inputReadOnly,
sValue,
currentSelectPanel,
showStr,
$listeners = {},
} = this;
const clearIcon = getComponentFromProp(this, 'clearIcon');
const { esc = noop, clear = noop, keydown = noop } = $listeners;
2018-03-08 23:02:04 +08:00
2019-01-12 11:33:27 +08:00
const disabledHourOptions = this.disabledHours2();
const disabledMinuteOptions = disabledMinutes(sValue ? sValue.hour() : null);
const disabledSecondOptions = disabledSeconds(
sValue ? sValue.hour() : null,
sValue ? sValue.minute() : null,
);
const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions, hourStep);
2018-03-07 22:21:55 +08:00
const minuteOptions = generateOptions(
2019-01-12 11:33:27 +08:00
60,
disabledMinuteOptions,
hideDisabledOptions,
minuteStep,
);
2018-03-07 22:21:55 +08:00
const secondOptions = generateOptions(
2019-01-12 11:33:27 +08:00
60,
disabledSecondOptions,
hideDisabledOptions,
secondStep,
);
2018-03-07 22:21:55 +08:00
return (
2018-03-08 23:02:04 +08:00
<div class={`${prefixCls}-inner`}>
2018-03-07 22:21:55 +08:00
<Header
clearText={clearText}
prefixCls={prefixCls}
defaultOpenValue={defaultOpenValue}
2018-03-08 23:02:04 +08:00
value={sValue}
2018-03-07 22:21:55 +08:00
currentSelectPanel={currentSelectPanel}
2018-03-08 23:02:04 +08:00
onEsc={esc}
2018-03-07 22:21:55 +08:00
format={format}
placeholder={placeholder}
hourOptions={hourOptions}
minuteOptions={minuteOptions}
secondOptions={secondOptions}
2018-03-08 23:02:04 +08:00
disabledHours={this.disabledHours2}
2018-03-07 22:21:55 +08:00
disabledMinutes={disabledMinutes}
disabledSeconds={disabledSeconds}
onChange={this.onChange}
2018-03-08 23:02:04 +08:00
onClear={clear}
2018-03-07 22:21:55 +08:00
allowEmpty={allowEmpty}
focusOnOpen={focusOnOpen}
2018-03-08 23:02:04 +08:00
onKeydown={keydown}
2018-03-07 22:21:55 +08:00
inputReadOnly={inputReadOnly}
2018-03-08 23:02:04 +08:00
showStr={showStr}
clearIcon={clearIcon}
2018-03-07 22:21:55 +08:00
/>
<Combobox
prefixCls={prefixCls}
2018-03-08 23:02:04 +08:00
value={sValue}
2018-03-07 22:21:55 +08:00
defaultOpenValue={defaultOpenValue}
format={format}
onChange={this.onChange}
showHour={showHour}
showMinute={showMinute}
showSecond={showSecond}
hourOptions={hourOptions}
minuteOptions={minuteOptions}
secondOptions={secondOptions}
2018-03-08 23:02:04 +08:00
disabledHours={this.disabledHours2}
2018-03-07 22:21:55 +08:00
disabledMinutes={disabledMinutes}
disabledSeconds={disabledSeconds}
onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
use12Hours={use12Hours}
isAM={this.isAM()}
/>
{addon(this)}
2018-03-07 22:21:55 +08:00
</div>
2019-01-12 11:33:27 +08:00
);
2018-03-08 23:02:04 +08:00
},
2019-01-12 11:33:27 +08:00
};
2018-03-19 10:16:27 +08:00
2019-01-12 11:33:27 +08:00
export default Panel;