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

204 lines
5.3 KiB
Vue
Raw Normal View History

2018-03-19 02:16:27 +00:00
2018-03-08 15:02:04 +00:00
import PropTypes from '../_util/vue-types'
import BaseMixin from '../_util/BaseMixin'
2018-03-07 14:21:55 +00:00
import moment from 'moment'
2018-03-08 15:02:04 +00:00
const Header = {
mixins: [BaseMixin],
props: {
2018-03-07 14:21:55 +00:00
format: PropTypes.string,
prefixCls: PropTypes.string,
disabledDate: PropTypes.func,
placeholder: PropTypes.string,
clearText: PropTypes.string,
value: PropTypes.object,
2018-03-08 15:02:04 +00:00
inputReadOnly: PropTypes.bool.def(false),
2018-03-07 14:21:55 +00:00
hourOptions: PropTypes.array,
minuteOptions: PropTypes.array,
secondOptions: PropTypes.array,
disabledHours: PropTypes.func,
disabledMinutes: PropTypes.func,
disabledSeconds: PropTypes.func,
2018-03-08 15:02:04 +00:00
// onChange: PropTypes.func,
// onClear: PropTypes.func,
// onEsc: PropTypes.func,
2018-03-07 14:21:55 +00:00
allowEmpty: PropTypes.bool,
defaultOpenValue: PropTypes.object,
currentSelectPanel: PropTypes.string,
focusOnOpen: PropTypes.bool,
2018-03-08 15:02:04 +00:00
// onKeyDown: PropTypes.func,
showStr: PropTypes.bool.def(true),
},
data () {
const { value, format } = this
return {
2018-03-07 14:21:55 +00:00
str: value && value.format(format) || '',
invalid: false,
}
2018-03-08 15:02:04 +00:00
},
2018-03-07 14:21:55 +00:00
2018-03-08 15:02:04 +00:00
mounted () {
if (this.focusOnOpen) {
2018-03-07 14:21:55 +00:00
// Wait one frame for the panel to be positioned before focusing
const requestAnimationFrame = (window.requestAnimationFrame || window.setTimeout)
requestAnimationFrame(() => {
2018-03-08 15:02:04 +00:00
this.$refs.input.focus()
this.$refs.input.select()
2018-03-07 14:21:55 +00:00
})
}
2018-03-08 15:02:04 +00:00
},
watch: {
'$props': {
handler: function (nextProps) {
const { value, format } = nextProps
2018-03-07 14:21:55 +00:00
this.setState({
2018-03-08 15:02:04 +00:00
str: value && value.format(format) || '',
invalid: false,
2018-03-07 14:21:55 +00:00
})
2018-03-08 15:02:04 +00:00
},
deep: true,
},
},
methods: {
onInputChange (event) {
const str = event.target.value
this.showStr = true
this.setState({
str,
})
const {
format, hourOptions, minuteOptions, secondOptions,
disabledHours, disabledMinutes,
disabledSeconds, allowEmpty,
value: originalValue,
} = this
if (str) {
const value = this.getProtoValue().clone()
const parsed = moment(str, format, true)
if (!parsed.isValid()) {
this.setState({
invalid: true,
})
return
}
value.hour(parsed.hour()).minute(parsed.minute()).second(parsed.second())
2018-03-07 14:21:55 +00:00
2018-03-08 15:02:04 +00:00
// if time value not allowed, response warning.
if (
hourOptions.indexOf(value.hour()) < 0 ||
2018-03-07 14:21:55 +00:00
minuteOptions.indexOf(value.minute()) < 0 ||
secondOptions.indexOf(value.second()) < 0
2018-03-08 15:02:04 +00:00
) {
this.setState({
invalid: true,
})
return
}
2018-03-07 14:21:55 +00:00
2018-03-08 15:02:04 +00:00
// if time value is disabled, response warning.
const disabledHourOptions = disabledHours()
const disabledMinuteOptions = disabledMinutes(value.hour())
const disabledSecondOptions = disabledSeconds(value.hour(), value.minute())
if (
(disabledHourOptions && disabledHourOptions.indexOf(value.hour()) >= 0) ||
2018-03-07 14:21:55 +00:00
(disabledMinuteOptions && disabledMinuteOptions.indexOf(value.minute()) >= 0) ||
(disabledSecondOptions && disabledSecondOptions.indexOf(value.second()) >= 0)
2018-03-08 15:02:04 +00:00
) {
this.setState({
invalid: true,
})
return
}
2018-03-07 14:21:55 +00:00
2018-03-08 15:02:04 +00:00
if (originalValue) {
if (
originalValue.hour() !== value.hour() ||
2018-03-07 14:21:55 +00:00
originalValue.minute() !== value.minute() ||
originalValue.second() !== value.second()
2018-03-08 15:02:04 +00:00
) {
2018-03-07 14:21:55 +00:00
// keep other fields for rc-calendar
2018-03-08 15:02:04 +00:00
const changedValue = originalValue.clone()
changedValue.hour(value.hour())
changedValue.minute(value.minute())
changedValue.second(value.second())
this.__emit('change', changedValue)
}
} else if (originalValue !== value) {
this.__emit('change', value)
2018-03-07 14:21:55 +00:00
}
2018-03-08 15:02:04 +00:00
} else if (allowEmpty) {
this.__emit('change', null)
} else {
this.setState({
invalid: true,
})
return
2018-03-07 14:21:55 +00:00
}
2018-03-08 15:02:04 +00:00
2018-03-07 14:21:55 +00:00
this.setState({
2018-03-08 15:02:04 +00:00
invalid: false,
2018-03-07 14:21:55 +00:00
})
2018-03-08 15:02:04 +00:00
},
2018-03-07 14:21:55 +00:00
2018-03-08 15:02:04 +00:00
onKeyDown (e) {
if (e.keyCode === 27) {
this.__emit('esc')
}
this.__emit('keydown', e)
},
onClear () {
this.__emit('clear')
this.setState({ str: '' })
},
getClearButton () {
const { prefixCls, allowEmpty, clearText } = this
if (!allowEmpty) {
return null
}
return (<a
class={`${prefixCls}-clear-btn`}
role='button'
title={clearText}
onMousedown={this.onClear}
/>)
},
getProtoValue () {
return this.value || this.defaultOpenValue
},
getInput () {
const { prefixCls, placeholder, inputReadOnly, invalid, str, showStr } = this
const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''
return (
<input
class={`${prefixCls}-input ${invalidClass}`}
ref='input'
onKeydown={this.onKeyDown}
value={showStr ? str : ''}
placeholder={placeholder}
onInput={this.onInputChange}
readOnly={!!inputReadOnly}
/>
)
},
},
2018-03-07 14:21:55 +00:00
render () {
2018-03-08 15:02:04 +00:00
const { prefixCls } = this
2018-03-07 14:21:55 +00:00
return (
2018-03-08 15:02:04 +00:00
<div class={`${prefixCls}-input-wrap`}>
2018-03-07 14:21:55 +00:00
{this.getInput()}
{this.getClearButton()}
</div>
)
2018-03-08 15:02:04 +00:00
},
2018-03-07 14:21:55 +00:00
}
export default Header
2018-03-19 02:16:27 +00:00