merge master
wangxueliang
commit
cee7acf327
|
|
@ -16,9 +16,7 @@ export default {
|
|||
} else {
|
||||
this.$listeners[eventName](...args.slice(1))
|
||||
}
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ const getOptionProps = (instance) => {
|
|||
const res = {}
|
||||
for (const [k, v] of Object.entries(props)) {
|
||||
if (v.default !== undefined) {
|
||||
res[k] = v
|
||||
res[k] = typeof v.default === 'function' ? v.default() : v.default
|
||||
}
|
||||
}
|
||||
return { ...res, ...propsData }
|
||||
|
|
@ -179,6 +179,18 @@ const initDefaultProps = (propTypes, defaultProps) => {
|
|||
Object.keys(defaultProps).forEach(k => { propTypes[k] = propTypes[k].def(defaultProps[k]) })
|
||||
return propTypes
|
||||
}
|
||||
|
||||
export function mergeProps () {
|
||||
const args = [].slice.call(arguments, 0)
|
||||
const props = {}
|
||||
args.forEach((p, i) => {
|
||||
for (const [k, v] of Object.entries(p)) {
|
||||
props[k] = props[k] || {}
|
||||
Object.assign(props[k], v)
|
||||
}
|
||||
})
|
||||
return props
|
||||
}
|
||||
export {
|
||||
hasProp,
|
||||
filterProps,
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ export function cloneElement (n, nodeProps, deep) {
|
|||
domProps = {},
|
||||
style: tempStyle = {},
|
||||
class: tempCls = {},
|
||||
scopedSlots = {},
|
||||
} = nodeProps
|
||||
|
||||
if (typeof data.style === 'string') {
|
||||
|
|
@ -99,6 +100,7 @@ export function cloneElement (n, nodeProps, deep) {
|
|||
attrs: { ...data.attrs, ...attrs },
|
||||
class: cls,
|
||||
domProps: { ...data.domProps, ...domProps },
|
||||
scopedSlots: { ...data.scopedSlots, ...scopedSlots },
|
||||
})
|
||||
|
||||
if (node.componentOptions) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
## API
|
||||
|
||||
```html
|
||||
<Pagination @change="onChange" :total="50" />
|
||||
<a-pagination @change="onChange" :total="50" />
|
||||
```
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
| defaultPageSize | default number of data items per page | number | 10 |
|
||||
| hideOnSinglePage | Whether to hide pager on single page | boolean | false |
|
||||
| itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode | - |
|
||||
| pageSize | number of data items per page | number | - |
|
||||
| pageSize(.sync) | number of data items per page | number | - |
|
||||
| pageSizeOptions | specify the sizeChanger options | string\[] | ['10', '20', '30', '40'] |
|
||||
| showQuickJumper | determine whether you can jump to pages directly | boolean | false |
|
||||
| showSizeChanger | determine whether `pageSize` can be changed | boolean | false |
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
## API
|
||||
|
||||
```html
|
||||
<Pagination @change="onChange" :total="50" />
|
||||
<a-pagination @change="onChange" :total="50" />
|
||||
```
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
| defaultPageSize | 默认的每页条数 | number | 10 |
|
||||
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false |
|
||||
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode | - |
|
||||
| pageSize | 每页条数 | number | - |
|
||||
| pageSize(.sync) | 每页条数 | number | - |
|
||||
| pageSizeOptions | 指定每页可以显示多少条 | string\[] | ['10', '20', '30', '40'] |
|
||||
| showQuickJumper | 是否可以快速跳转至某页 | boolean | false |
|
||||
| showSizeChanger | 是否可以改变 pageSize | boolean | false |
|
||||
|
|
|
|||
|
|
@ -10,30 +10,19 @@ You can customize the display for Steps with progress dot style.
|
|||
|
||||
```html
|
||||
<template>
|
||||
<a-steps :current="1" :progressDot="customDot">
|
||||
<div>
|
||||
<a-steps :current="1">
|
||||
<a-popover slot="progressDot" slot-scope="{index, status, prefixCls}">
|
||||
<template slot="content">
|
||||
<span>step {{index}} status: {{status}}</span>
|
||||
</template>
|
||||
<span :class="`${prefixCls}-icon-dot`"></span>
|
||||
</a-popover>
|
||||
<a-step title="Finished" description="You can hover on the dot." />
|
||||
<a-step title="In Progress" description="You can hover on the dot." />
|
||||
<a-step title="Waiting" description="You can hover on the dot." />
|
||||
<a-step title="Waiting" description="You can hover on the dot." />
|
||||
</a-steps>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
customDot(dot, {index, status}) {
|
||||
return (
|
||||
<a-popover>
|
||||
<template slot="content">
|
||||
<span>step {index} status: {status}</span>
|
||||
</template>
|
||||
{dot}
|
||||
</a-popover>
|
||||
)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ The whole of the step bar.
|
|||
| -------- | ----------- | ---- | ------- |
|
||||
| current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 |
|
||||
| direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` |
|
||||
| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function | Boolean or (iconDot, {index, status, title, description}) => vNode | false |
|
||||
| progressDot | Steps with progress dot style, customize the progress dot by setting a scoped slot | Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" | false |
|
||||
| size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` |
|
||||
| status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |
|
||||
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ export default {
|
|||
const stepsProps = {
|
||||
props,
|
||||
on: this.$listeners,
|
||||
scopedSlots: this.$scopedSlots,
|
||||
}
|
||||
return (
|
||||
<VcSteps
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
| --- | --- | --- | --- |
|
||||
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 |
|
||||
| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal |
|
||||
| progressDot | 点状步骤条，可以设置为一个 function | Boolean or (iconDot, {index, status, title, description}) => vNode | false |
|
||||
| progressDot | 点状步骤条，可以设置为一个 作用域插槽 | Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" | false |
|
||||
| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default |
|
||||
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process |
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
// based on rc-tabs 9.2.4
|
||||
import Icon from '../../icon'
|
||||
import KeyCode from './KeyCode'
|
||||
import TabContent from './TabContent'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,236 @@
|
|||
<script>
|
||||
/* eslint react/no-multi-comp:0, no-console:0 */
|
||||
|
||||
import '../assets/index.less'
|
||||
import PropTypes from '@/components/_util/vue-types'
|
||||
import Calendar from '../'
|
||||
import DatePicker from '../src/Picker'
|
||||
import zhCN from '../src/locale/zh_CN'
|
||||
import enUS from '../src/locale/en_US'
|
||||
import '../../vc-time-picker/assets/index.less'
|
||||
import TimePickerPanel from '../../vc-time-picker/Panel'
|
||||
import BaseMixin from '@/components/_util/BaseMixin'
|
||||
|
||||
import moment from 'moment'
|
||||
import 'moment/locale/zh-cn'
|
||||
import 'moment/locale/en-gb'
|
||||
|
||||
const format = 'YYYY-MM-DD HH:mm:ss'
|
||||
const cn = window.location.search.indexOf('cn') !== -1
|
||||
|
||||
const now = moment()
|
||||
if (cn) {
|
||||
now.locale('zh-cn').utcOffset(8)
|
||||
} else {
|
||||
now.locale('en-gb').utcOffset(0)
|
||||
}
|
||||
|
||||
function getFormat (time) {
|
||||
return time ? format : 'YYYY-MM-DD'
|
||||
}
|
||||
|
||||
const defaultCalendarValue = now.clone()
|
||||
defaultCalendarValue.add(-1, 'month')
|
||||
|
||||
const timePickerElement = (h) => <TimePickerPanel defaultValue={moment('00:00:00', 'HH:mm:ss')} />
|
||||
|
||||
function disabledTime (date) {
|
||||
console.log('disabledTime', date)
|
||||
if (date && (date.date() === 15)) {
|
||||
return {
|
||||
disabledHours () {
|
||||
return [3, 4]
|
||||
},
|
||||
}
|
||||
}
|
||||
return {
|
||||
disabledHours () {
|
||||
return [1, 2]
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function disabledDate (current) {
|
||||
if (!current) {
|
||||
// allow empty select
|
||||
return false
|
||||
}
|
||||
const date = moment()
|
||||
date.hour(0)
|
||||
date.minute(0)
|
||||
date.second(0)
|
||||
return current.valueOf() < date.valueOf() // can not select days before today
|
||||
}
|
||||
|
||||
const Demo = {
|
||||
props: {
|
||||
defaultValue: PropTypes.object,
|
||||
defaultCalendarValue: PropTypes.object,
|
||||
},
|
||||
mixins: [BaseMixin],
|
||||
data () {
|
||||
return {
|
||||
showTime: true,
|
||||
showDateInput: true,
|
||||
disabled: false,
|
||||
value: this.defaultValue,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange (value) {
|
||||
console.log('DatePicker change: ', (value && value.format(format)))
|
||||
this.setState({
|
||||
value,
|
||||
})
|
||||
},
|
||||
|
||||
onShowTimeChange (e) {
|
||||
this.setState({
|
||||
showTime: e.target.checked,
|
||||
})
|
||||
},
|
||||
|
||||
onShowDateInputChange (e) {
|
||||
this.setState({
|
||||
showDateInput: e.target.checked,
|
||||
})
|
||||
},
|
||||
|
||||
toggleDisabled () {
|
||||
this.setState({
|
||||
disabled: !this.disabled,
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
render (h) {
|
||||
const state = this.$data
|
||||
const calendar = (<Calendar
|
||||
locale={cn ? zhCN : enUS}
|
||||
style={{ zIndex: 1000 }}
|
||||
dateInputPlaceholder='please input'
|
||||
formatter={getFormat(state.showTime)}
|
||||
disabledTime={state.showTime ? disabledTime : null}
|
||||
timePicker={state.showTime ? timePickerElement(h) : null}
|
||||
defaultValue={this.defaultCalendarValue}
|
||||
showDateInput={state.showDateInput}
|
||||
disabledDate={disabledDate}
|
||||
/>)
|
||||
return (<div style={{ width: '400px', margin: '20px' }}>
|
||||
<div style={{ marginBottom: '10px' }}>
|
||||
<label>
|
||||
<input
|
||||
type='checkbox'
|
||||
checked={state.showTime}
|
||||
onChange={this.onShowTimeChange}
|
||||
/>
|
||||
showTime
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input
|
||||
type='checkbox'
|
||||
checked={state.showDateInput}
|
||||
onChange={this.onShowDateInputChange}
|
||||
/>
|
||||
showDateInput
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input
|
||||
checked={state.disabled}
|
||||
onChange={this.toggleDisabled}
|
||||
type='checkbox'
|
||||
/>
|
||||
disabled
|
||||
</label>
|
||||
</div>
|
||||
<div style={{
|
||||
boxSizing: 'border-box',
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
lineHeight: 1.5,
|
||||
marginBottom: '22px',
|
||||
}}
|
||||
>
|
||||
<DatePicker
|
||||
animation='slide-up'
|
||||
disabled={state.disabled}
|
||||
calendar={calendar}
|
||||
value={state.value}
|
||||
onChange={this.onChange}
|
||||
scopedSlots={{
|
||||
default: ({ value }) => {
|
||||
return (
|
||||
<span tabIndex='0'>
|
||||
<input
|
||||
placeholder='please select'
|
||||
style={{ width: '250px' }}
|
||||
disabled={state.disabled}
|
||||
readOnly
|
||||
tabIndex='-1'
|
||||
class='ant-calendar-picker-input ant-input'
|
||||
value={value && value.format(getFormat(state.showTime)) || ''}
|
||||
/>
|
||||
</span>
|
||||
)
|
||||
},
|
||||
}}
|
||||
>
|
||||
</DatePicker>
|
||||
</div>
|
||||
</div>)
|
||||
},
|
||||
}
|
||||
|
||||
function onStandaloneSelect (value) {
|
||||
console.log('onStandaloneSelect')
|
||||
console.log(value && value.format(format))
|
||||
}
|
||||
|
||||
function onStandaloneChange (value) {
|
||||
console.log('onStandaloneChange')
|
||||
console.log(value && value.format(format))
|
||||
}
|
||||
|
||||
export default {
|
||||
render (h) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
zIndex: 1000,
|
||||
position: 'relative',
|
||||
width: '900px',
|
||||
margin: '20px auto',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div style={{ margin: '10px' }}>
|
||||
<Calendar
|
||||
showWeekNumber={false}
|
||||
locale={cn ? zhCN : enUS}
|
||||
defaultValue={now}
|
||||
disabledTime={disabledTime}
|
||||
showToday
|
||||
formatter={getFormat(true)}
|
||||
showOk={false}
|
||||
timePicker={timePickerElement(h)}
|
||||
onChange={onStandaloneChange}
|
||||
disabledDate={disabledDate}
|
||||
onSelect={onStandaloneSelect}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ float: 'left', width: '300px' }}>
|
||||
<Demo defaultValue={now} />
|
||||
</div>
|
||||
<div style={{ float: 'right', width: '300px' }}>
|
||||
<Demo defaultCalendarValue={defaultCalendarValue} />
|
||||
</div>
|
||||
<div style={{ clear: 'both' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<script>
|
||||
/* eslint react/no-multi-comp:0, no-console:0 */
|
||||
import '../assets/index.less'
|
||||
import PropTypes from '@/components/_util/vue-types'
|
||||
import DatePicker from '../src/Picker'
|
||||
import zhCN from '../src/locale/zh_CN'
|
||||
import enUS from '../src/locale/en_US'
|
||||
import '../../vc-time-picker/assets/index.less'
|
||||
import BaseMixin from '@/components/_util/BaseMixin'
|
||||
|
||||
import MonthCalendar from '../src/MonthCalendar'
|
||||
|
||||
import moment from 'moment'
|
||||
import 'moment/locale/zh-cn'
|
||||
import 'moment/locale/en-gb'
|
||||
|
||||
const format = 'YYYY-MM'
|
||||
const cn = window.location.search.indexOf('cn') !== -1
|
||||
|
||||
const now = moment()
|
||||
if (cn) {
|
||||
now.locale('zh-cn').utcOffset(8)
|
||||
} else {
|
||||
now.locale('en-gb').utcOffset(0)
|
||||
}
|
||||
|
||||
const defaultCalendarValue = now.clone()
|
||||
defaultCalendarValue.add(-1, 'month')
|
||||
|
||||
const Demo = {
|
||||
mixins: [BaseMixin],
|
||||
props: {
|
||||
defaultValue: PropTypes.object,
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
showTime: true,
|
||||
disabled: false,
|
||||
value: this.defaultValue,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange (value) {
|
||||
console.log(`DatePicker change: ${value && value.format(format)}`)
|
||||
this.setState({
|
||||
value,
|
||||
})
|
||||
},
|
||||
|
||||
onShowTimeChange (e) {
|
||||
this.setState({
|
||||
showTime: e.target.checked,
|
||||
})
|
||||
},
|
||||
|
||||
toggleDisabled () {
|
||||
this.setState({
|
||||
disabled: !this.disabled,
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const state = this.$data
|
||||
const calendar = (<MonthCalendar
|
||||
locale={cn ? zhCN : enUS}
|
||||
style={{ zIndex: 1000 }}
|
||||
/>)
|
||||
return (<div style={{ width: '240px', margin: '20px' }}>
|
||||
<div style={{ marginBottom: '10px' }}>
|
||||
|
||||
<label>
|
||||
<input
|
||||
checked={state.disabled}
|
||||
onChange={this.toggleDisabled}
|
||||
type='checkbox'
|
||||
/> disabled
|
||||
</label>
|
||||
</div>
|
||||
<div style={{
|
||||
boxSizing: 'border-box',
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
lineHeight: 1.5,
|
||||
marginBottom: '22px',
|
||||
}}
|
||||
>
|
||||
<DatePicker
|
||||
animation='slide-up'
|
||||
disabled={state.disabled}
|
||||
calendar={calendar}
|
||||
value={state.value}
|
||||
onChange={this.onChange}
|
||||
scopedSlots={{
|
||||
default: ({ value }) => {
|
||||
return (
|
||||
<input
|
||||
style={{ width: '200px' }}
|
||||
readOnly
|
||||
disabled={state.disabled}
|
||||
value={value && value.format(format)}
|
||||
placeholder='请选择日期'
|
||||
/>
|
||||
)
|
||||
},
|
||||
}}
|
||||
>
|
||||
</DatePicker>
|
||||
</div>
|
||||
</div>)
|
||||
},
|
||||
}
|
||||
|
||||
function onStandaloneSelect (value) {
|
||||
console.log('month-calendar select', (value && value.format(format)))
|
||||
}
|
||||
|
||||
function onStandaloneChange (value) {
|
||||
console.log('month-calendar change', (value && value.format(format)))
|
||||
}
|
||||
|
||||
function disabledDate (value) {
|
||||
return value.year() > now.year() ||
|
||||
value.year() === now.year() && value.month() > now.month()
|
||||
}
|
||||
|
||||
function onMonthCellContentRender (value) {
|
||||
// console.log('month-calendar onMonthCellContentRender', (value && value.format(format)));
|
||||
return `${value.month() + 1}月`
|
||||
}
|
||||
export default {
|
||||
render () {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
zIndex: 1000,
|
||||
position: 'relative',
|
||||
width: '600px',
|
||||
margin: '0 auto',
|
||||
}}
|
||||
>
|
||||
<MonthCalendar
|
||||
locale={cn ? zhCN : enUS}
|
||||
style={{ zIndex: 1000 }}
|
||||
disabledDate={disabledDate}
|
||||
onSelect={onStandaloneSelect}
|
||||
onChange={onStandaloneChange}
|
||||
monthCellContentRender={onMonthCellContentRender}
|
||||
defaultValue={defaultCalendarValue}
|
||||
/>
|
||||
|
||||
<div style={{ marginTop: '200px' }}>
|
||||
<Demo defaultValue={now} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
<script>
|
||||
/* eslint react/no-multi-comp:0, no-console:0 */
|
||||
|
||||
import '../assets/index.less'
|
||||
import '@/components/vc-time-picker/assets/index.less'
|
||||
import Picker from '../src/Picker'
|
||||
import zhCN from '../src/locale/zh_CN'
|
||||
import enUS from '../src/locale/en_US'
|
||||
import '../../vc-time-picker/assets/index.less'
|
||||
import TimePickerPanel from '../../vc-time-picker/Panel'
|
||||
import BaseMixin from '@/components/_util/BaseMixin'
|
||||
|
||||
import RangeCalendar from '../src/RangeCalendar'
|
||||
|
||||
import moment from 'moment'
|
||||
import 'moment/locale/zh-cn'
|
||||
import 'moment/locale/en-gb'
|
||||
|
||||
const cn = window.location.search.indexOf('cn') !== -1
|
||||
|
||||
if (cn) {
|
||||
moment.locale('zh-cn')
|
||||
} else {
|
||||
moment.locale('en-gb')
|
||||
}
|
||||
|
||||
const now = moment()
|
||||
if (cn) {
|
||||
now.utcOffset(8)
|
||||
} else {
|
||||
now.utcOffset(0)
|
||||
}
|
||||
|
||||
const defaultCalendarValue = now.clone()
|
||||
defaultCalendarValue.add(-1, 'month')
|
||||
|
||||
const timePickerElement = (h) => <TimePickerPanel defaultValue={[moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]}/>
|
||||
|
||||
function newArray (start, end) {
|
||||
const result = []
|
||||
for (let i = start; i < end; i++) {
|
||||
result.push(i)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function disabledDate (current) {
|
||||
const date = moment()
|
||||
date.hour(0)
|
||||
date.minute(0)
|
||||
date.second(0)
|
||||
return current.isBefore(date) // can not select days before today
|
||||
}
|
||||
|
||||
function disabledTime (time, type) {
|
||||
console.log('disabledTime', time, type)
|
||||
if (type === 'start') {
|
||||
return {
|
||||
disabledHours () {
|
||||
const hours = newArray(0, 60)
|
||||
hours.splice(20, 4)
|
||||
return hours
|
||||
},
|
||||
disabledMinutes (h) {
|
||||
if (h === 20) {
|
||||
return newArray(0, 31)
|
||||
} else if (h === 23) {
|
||||
return newArray(30, 60)
|
||||
}
|
||||
return []
|
||||
},
|
||||
disabledSeconds () {
|
||||
return [55, 56]
|
||||
},
|
||||
}
|
||||
}
|
||||
return {
|
||||
disabledHours () {
|
||||
const hours = newArray(0, 60)
|
||||
hours.splice(2, 6)
|
||||
return hours
|
||||
},
|
||||
disabledMinutes (h) {
|
||||
if (h === 20) {
|
||||
return newArray(0, 31)
|
||||
} else if (h === 23) {
|
||||
return newArray(30, 60)
|
||||
}
|
||||
return []
|
||||
},
|
||||
disabledSeconds () {
|
||||
return [55, 56]
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const formatStr = 'YYYY-MM-DD HH:mm:ss'
|
||||
function format (v) {
|
||||
return v ? v.format(formatStr) : ''
|
||||
}
|
||||
|
||||
function isValidRange (v) {
|
||||
return v && v[0] && v[1]
|
||||
}
|
||||
|
||||
function onStandaloneChange (value) {
|
||||
console.log('onChange')
|
||||
console.log(value[0] && format(value[0]), value[1] && format(value[1]))
|
||||
}
|
||||
|
||||
function onStandaloneSelect (value) {
|
||||
console.log('onSelect')
|
||||
console.log(format(value[0]), format(value[1]))
|
||||
}
|
||||
|
||||
const Demo = {
|
||||
mixins: [BaseMixin],
|
||||
data () {
|
||||
return {
|
||||
value: [],
|
||||
hoverValue: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange (value) {
|
||||
console.log('onChange', value)
|
||||
this.setState({ value })
|
||||
},
|
||||
|
||||
onHoverChange (hoverValue) {
|
||||
this.setState({ hoverValue })
|
||||
},
|
||||
},
|
||||
render (h) {
|
||||
const state = this.$data
|
||||
const calendar = (
|
||||
<RangeCalendar
|
||||
hoverValue={state.hoverValue}
|
||||
onHoverChange={this.onHoverChange}
|
||||
showWeekNumber={false}
|
||||
dateInputPlaceholder={['start', 'end']}
|
||||
defaultValue={[now, now.clone().add(1, 'months')]}
|
||||
locale={cn ? zhCN : enUS}
|
||||
disabledTime={disabledTime}
|
||||
timePicker={timePickerElement(h)}
|
||||
/>
|
||||
)
|
||||
return (
|
||||
<Picker
|
||||
value={state.value}
|
||||
onChange={this.onChange}
|
||||
animation='slide-up'
|
||||
calendar={calendar}
|
||||
>
|
||||
{
|
||||
({ value }) => {
|
||||
return (<span>
|
||||
<input
|
||||
placeholder='please select'
|
||||
style={{ width: '350px' }}
|
||||
disabled={state.disabled}
|
||||
readOnly
|
||||
className='ant-calendar-picker-input ant-input'
|
||||
value={isValidRange(value) && `${format(value[0])} - ${format(value[1])}` || ''}
|
||||
/>
|
||||
</span>)
|
||||
}
|
||||
}
|
||||
</Picker>)
|
||||
},
|
||||
}
|
||||
|
||||
export default {
|
||||
render (h) {
|
||||
return (
|
||||
<div>
|
||||
<h2>calendar</h2>
|
||||
<div style={{ margin: '10px' }}>
|
||||
<RangeCalendar
|
||||
showToday={false}
|
||||
showWeekNumber
|
||||
dateInputPlaceholder={['start', 'end']}
|
||||
locale={cn ? zhCN : enUS}
|
||||
showOk={false}
|
||||
showClear
|
||||
format={formatStr}
|
||||
onChange={onStandaloneChange}
|
||||
onSelect={onStandaloneSelect}
|
||||
disabledDate={disabledDate}
|
||||
timePicker={timePickerElement(h)}
|
||||
disabledTime={disabledTime}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div style={{ margin: '20px' }}>
|
||||
<Demo />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<script>
|
||||
/* eslint react/no-multi-comp:0, no-console:0 */
|
||||
import '../assets/index.less'
|
||||
import zhCN from '../src/locale/zh_CN'
|
||||
import enUS from '../src/locale/en_US'
|
||||
import '../../vc-time-picker/assets/index.less'
|
||||
import BaseMixin from '@/components/_util/BaseMixin'
|
||||
|
||||
import FullCalendar from '@/components/vc-calendar/src/FullCalendar'
|
||||
|
||||
import '@/components/vc-select/assets/index.less'
|
||||
import Select from '@/components/vc-select'
|
||||
|
||||
import moment from 'moment'
|
||||
import 'moment/locale/zh-cn'
|
||||
import 'moment/locale/en-gb'
|
||||
|
||||
const format = 'YYYY-MM-DD'
|
||||
const cn = window.location.search.indexOf('cn') !== -1
|
||||
|
||||
const now = moment()
|
||||
if (cn) {
|
||||
now.locale('zh-cn').utcOffset(8)
|
||||
} else {
|
||||
now.locale('en-gb').utcOffset(0)
|
||||
}
|
||||
|
||||
const defaultCalendarValue = now.clone()
|
||||
defaultCalendarValue.add(-1, 'month')
|
||||
|
||||
function onSelect (value) {
|
||||
console.log('select', value.format(format))
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [BaseMixin],
|
||||
data () {
|
||||
return {
|
||||
type: 'month',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onTypeChange (type) {
|
||||
this.setState({
|
||||
type,
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div style={{ zIndex: 1000, position: 'relative' }}>
|
||||
<FullCalendar
|
||||
style={{ margin: '10px' }}
|
||||
Select={Select}
|
||||
fullscreen={false}
|
||||
onSelect={onSelect}
|
||||
defaultValue={now}
|
||||
locale={cn ? zhCN : enUS}
|
||||
/>
|
||||
<FullCalendar
|
||||
style={{ margin: '10px' }}
|
||||
Select={Select}
|
||||
fullscreen
|
||||
defaultValue={now}
|
||||
onSelect={onSelect}
|
||||
type={this.type}
|
||||
onTypeChange={this.onTypeChange}
|
||||
locale={cn ? zhCN : enUS}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -10,8 +10,8 @@ import CalendarFooter from './calendar/CalendarFooter'
|
|||
import CalendarMixin from './mixin/CalendarMixin'
|
||||
import CommonMixin from './mixin/CommonMixin'
|
||||
import DateInput from './date/DateInput'
|
||||
import enUs from './locale/en_US'
|
||||
import { getTimeConfig, getTodayTime, syncTime } from './util'
|
||||
|
||||
function goStartMonth () {
|
||||
const next = this.sValue.clone()
|
||||
next.startOf('month')
|
||||
|
|
@ -48,12 +48,15 @@ function goDay (direction) {
|
|||
|
||||
const Calendar = {
|
||||
props: {
|
||||
prefixCls: PropTypes.string,
|
||||
locale: PropTypes.object.def(enUs),
|
||||
visible: PropTypes.bool.def(true),
|
||||
prefixCls: PropTypes.string.def('rc-calendar'),
|
||||
// prefixCls: PropTypes.string,
|
||||
defaultValue: PropTypes.object,
|
||||
value: PropTypes.object,
|
||||
selectedValue: PropTypes.object,
|
||||
mode: PropTypes.oneOf(['time', 'date', 'month', 'year', 'decade']),
|
||||
locale: PropTypes.object,
|
||||
// locale: PropTypes.object,
|
||||
showDateInput: PropTypes.bool.def(true),
|
||||
showWeekNumber: PropTypes.bool,
|
||||
showToday: PropTypes.bool.def(true),
|
||||
|
|
@ -68,8 +71,8 @@ const Calendar = {
|
|||
// onPanelChange: PropTypes.func,
|
||||
disabledDate: PropTypes.func,
|
||||
disabledTime: PropTypes.any,
|
||||
renderFooter: PropTypes.func,
|
||||
renderSidebar: PropTypes.func,
|
||||
renderFooter: PropTypes.func.def(() => null),
|
||||
renderSidebar: PropTypes.func.def(() => null),
|
||||
},
|
||||
|
||||
mixins: [BaseMixin, CommonMixin, CalendarMixin],
|
||||
|
|
@ -168,7 +171,8 @@ const Calendar = {
|
|||
onDateTableSelect (value) {
|
||||
const { timePicker, sSelectedValue } = this
|
||||
if (!sSelectedValue && timePicker) {
|
||||
const timePickerDefaultValue = timePicker.props.defaultValue
|
||||
const timePickerProps = getOptionProps(timePicker)
|
||||
const timePickerDefaultValue = timePickerProps.defaultValue
|
||||
if (timePickerDefaultValue) {
|
||||
syncTime(timePickerDefaultValue, value)
|
||||
}
|
||||
|
|
@ -215,6 +219,7 @@ const Calendar = {
|
|||
let timePickerEle = null
|
||||
|
||||
if (timePicker && showTimePicker) {
|
||||
console.log(timePicker)
|
||||
const timePickerOriginProps = getOptionProps(timePicker)
|
||||
const timePickerProps = {
|
||||
props: {
|
||||
|
|
@ -234,7 +239,7 @@ const Calendar = {
|
|||
if (timePickerOriginProps.defaultValue !== undefined) {
|
||||
timePickerProps.props.defaultOpenValue = timePickerOriginProps.defaultValue
|
||||
}
|
||||
|
||||
console.log(timePickerProps)
|
||||
timePickerEle = cloneElement(timePicker, timePickerProps)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,24 +7,28 @@ import MonthTable from './month/MonthTable'
|
|||
import CalendarMixin from './mixin/CalendarMixin'
|
||||
import CommonMixin from './mixin/CommonMixin'
|
||||
import CalendarHeader from './full-calendar/CalendarHeader'
|
||||
|
||||
import enUs from './locale/en_US'
|
||||
const FullCalendar = {
|
||||
props: {
|
||||
locale: PropTypes.object.def(enUs),
|
||||
visible: PropTypes.bool.def(true),
|
||||
prefixCls: PropTypes.string.def('rc-calendar'),
|
||||
defaultType: PropTypes.string.def('date'),
|
||||
type: PropTypes.string,
|
||||
prefixCls: PropTypes.string,
|
||||
locale: PropTypes.object,
|
||||
// locale: PropTypes.object,
|
||||
// onTypeChange: PropTypes.func,
|
||||
fullscreen: PropTypes.bool.def(false),
|
||||
monthCellRender: PropTypes.func,
|
||||
dateCellRender: PropTypes.func,
|
||||
showTypeSwitch: PropTypes.bool.def(true),
|
||||
Select: PropTypes.func.isRequired,
|
||||
Select: PropTypes.object.isRequired,
|
||||
headerComponents: PropTypes.array,
|
||||
headerComponent: PropTypes.object, // The whole header component
|
||||
headerRender: PropTypes.func,
|
||||
showHeader: PropTypes.bool.def(true),
|
||||
disabledDate: PropTypes.func,
|
||||
renderFooter: PropTypes.func.def(() => null),
|
||||
renderSidebar: PropTypes.func.def(() => null),
|
||||
},
|
||||
mixins: [BaseMixin, CommonMixin, CalendarMixin],
|
||||
data () {
|
||||
|
|
@ -72,7 +76,7 @@ const FullCalendar = {
|
|||
headerRender,
|
||||
disabledDate,
|
||||
} = props
|
||||
const { sValue: value, sType: type } = this
|
||||
const { sValue: value, sType: type, $listeners } = this
|
||||
|
||||
let header = null
|
||||
if (showHeader) {
|
||||
|
|
@ -88,6 +92,7 @@ const FullCalendar = {
|
|||
value,
|
||||
},
|
||||
on: {
|
||||
...$listeners,
|
||||
typeChange: this.setType,
|
||||
valueChange: this.setValue,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,11 +6,18 @@ import CalendarHeader from './calendar/CalendarHeader'
|
|||
import CalendarFooter from './calendar/CalendarFooter'
|
||||
import CalendarMixin from './mixin/CalendarMixin'
|
||||
import CommonMixin from './mixin/CommonMixin'
|
||||
|
||||
import enUs from './locale/en_US'
|
||||
const MonthCalendar = {
|
||||
props: {
|
||||
locale: PropTypes.object.def(enUs),
|
||||
visible: PropTypes.bool.def(true),
|
||||
prefixCls: PropTypes.string.def('rc-calendar'),
|
||||
monthCellRender: PropTypes.func,
|
||||
dateCellRender: PropTypes.func,
|
||||
disabledDate: PropTypes.func,
|
||||
monthCellContentRender: PropTypes.func,
|
||||
renderFooter: PropTypes.func.def(() => null),
|
||||
renderSidebar: PropTypes.func.def(() => null),
|
||||
},
|
||||
mixins: [BaseMixin, CommonMixin, CalendarMixin],
|
||||
|
||||
|
|
@ -74,25 +81,26 @@ const MonthCalendar = {
|
|||
|
||||
render () {
|
||||
const { mode, sValue: value, $props: props } = this
|
||||
const { prefixCls, locale, disabledDate, monthCellRender, monthCellContentRender, renderFooter } = props
|
||||
const children = (
|
||||
<div class={`${props.prefixCls}-month-calendar-content`}>
|
||||
<div class={`${props.prefixCls}-month-header-wrap`}>
|
||||
<div class={`${prefixCls}-month-calendar-content`}>
|
||||
<div class={`${prefixCls}-month-header-wrap`}>
|
||||
<CalendarHeader
|
||||
prefixCls={props.prefixCls}
|
||||
prefixCls={prefixCls}
|
||||
mode={mode}
|
||||
value={value}
|
||||
locale={props.locale}
|
||||
disabledMonth={props.disabledDate}
|
||||
monthCellRender={props.monthCellRender}
|
||||
monthCellContentRender={props.monthCellContentRender}
|
||||
locale={locale}
|
||||
disabledMonth={disabledDate}
|
||||
monthCellRender={monthCellRender}
|
||||
monthCellContentRender={monthCellContentRender}
|
||||
onMonthSelect={this.onSelect}
|
||||
onValueChange={this.setValue}
|
||||
onPanelChange={this.handlePanelChange}
|
||||
/>
|
||||
</div>
|
||||
<CalendarFooter
|
||||
prefixCls={props.prefixCls}
|
||||
renderFooter={props.renderFooter}
|
||||
prefixCls={prefixCls}
|
||||
renderFooter={renderFooter}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ const Picker = {
|
|||
onCalendarKeyDown (event) {
|
||||
if (event.keyCode === KeyCode.ESC) {
|
||||
event.stopPropagation()
|
||||
this.close(this.focus)
|
||||
this.closeCalendar(this.focus)
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -94,7 +94,7 @@ const Picker = {
|
|||
cause.source === 'keyboard' ||
|
||||
(!calendarProps.timePicker && cause.source !== 'dateInput') ||
|
||||
cause.source === 'todayButton') {
|
||||
this.close(this.focus)
|
||||
this.closeCalendar(this.focus)
|
||||
}
|
||||
this.__emit('change', value)
|
||||
},
|
||||
|
|
@ -107,11 +107,11 @@ const Picker = {
|
|||
},
|
||||
|
||||
onCalendarOk () {
|
||||
this.close(this.focus)
|
||||
this.closeCalendar(this.focus)
|
||||
},
|
||||
|
||||
onCalendarClear () {
|
||||
this.close(this.focus)
|
||||
this.closeCalendar(this.focus)
|
||||
},
|
||||
|
||||
onVisibleChange (open) {
|
||||
|
|
@ -153,11 +153,11 @@ const Picker = {
|
|||
}
|
||||
},
|
||||
|
||||
open (callback) {
|
||||
openCalendar (callback) {
|
||||
this.setOpen(true, callback)
|
||||
},
|
||||
|
||||
close (callback) {
|
||||
closeCalendar (callback) {
|
||||
this.setOpen(false, callback)
|
||||
},
|
||||
|
||||
|
|
@ -183,20 +183,25 @@ const Picker = {
|
|||
align, animation,
|
||||
disabled,
|
||||
dropdownClassName,
|
||||
transitionName, children,
|
||||
transitionName,
|
||||
} = props
|
||||
const state = this.$data
|
||||
const { sValue, sOpen } = this
|
||||
const children = this.$scopedSlots.default
|
||||
const childrenState = {
|
||||
value: sValue,
|
||||
open: sOpen,
|
||||
}
|
||||
return (<Trigger
|
||||
popupAlign={align}
|
||||
builtinPlacements={placements}
|
||||
popupPlacement={placement}
|
||||
action={(disabled && !state.sOpen) ? [] : ['click']}
|
||||
action={(disabled && !sOpen) ? [] : ['click']}
|
||||
destroyPopupOnHide
|
||||
getPopupContainer={getCalendarContainer}
|
||||
popupStyle={style}
|
||||
popupAnimation={animation}
|
||||
popupTransitionName={transitionName}
|
||||
popupVisible={state.sOpen}
|
||||
popupVisible={sOpen}
|
||||
onPopupVisibleChange={this.onVisibleChange}
|
||||
prefixCls={prefixCls}
|
||||
popupClassName={dropdownClassName}
|
||||
|
|
@ -204,7 +209,7 @@ const Picker = {
|
|||
<template slot='popup'>
|
||||
{this.getCalendarElement()}
|
||||
</template>
|
||||
{cloneElement(children(state, props), { on: { keydown: this.onKeyDown }})}
|
||||
{cloneElement(children(childrenState, props), { on: { keydown: this.onKeyDown }})}
|
||||
</Trigger>)
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
<script>
|
||||
import PropTypes from '@/components/_util/vue-types'
|
||||
import BaseMixin from '@/components/_util/BaseMixin'
|
||||
import { getOptionProps, hasProp } from '@/components/_util/props-util'
|
||||
import { cloneElement } from '@/components/_util/vnode'
|
||||
import { getOptionProps, hasProp, mergeProps } from '@/components/_util/props-util'
|
||||
import moment from 'moment'
|
||||
import classnames from 'classnames'
|
||||
import CalendarPart from './range-calendar/CalendarPart'
|
||||
import TodayButton from './calendar/TodayButton'
|
||||
import OkButton from './calendar/OkButton'
|
||||
import TimePickerButton from './calendar/TimePickerButton'
|
||||
import CommonMixin from './mixin/CommonMixin'
|
||||
import enUs from './locale/en_US'
|
||||
import { syncTime, getTodayTime, isAllowedDate } from './util/'
|
||||
|
||||
function noop () {}
|
||||
|
|
@ -61,100 +60,94 @@ function onInputSelect (direction, value) {
|
|||
if (!value) {
|
||||
return
|
||||
}
|
||||
const originalValue = this.state.selectedValue
|
||||
const originalValue = this.sSelectedValue
|
||||
const selectedValue = originalValue.concat()
|
||||
const index = direction === 'left' ? 0 : 1
|
||||
selectedValue[index] = value
|
||||
if (selectedValue[0] && this.compare(selectedValue[0], selectedValue[1]) > 0) {
|
||||
selectedValue[1 - index] = this.state.showTimePicker ? selectedValue[index] : undefined
|
||||
selectedValue[1 - index] = this.showTimePicker ? selectedValue[index] : undefined
|
||||
}
|
||||
this.props.onInputSelect(selectedValue)
|
||||
this.__emit('inputSelect', selectedValue)
|
||||
this.fireSelectValueChange(selectedValue)
|
||||
}
|
||||
|
||||
const RangeCalendar = createReactClass({
|
||||
propTypes: {
|
||||
prefixCls: PropTypes.string,
|
||||
const RangeCalendar = {
|
||||
props: {
|
||||
locale: PropTypes.object.def(enUs),
|
||||
visible: PropTypes.bool.def(true),
|
||||
prefixCls: PropTypes.string.def('rc-calendar'),
|
||||
dateInputPlaceholder: PropTypes.any,
|
||||
defaultValue: PropTypes.any,
|
||||
value: PropTypes.any,
|
||||
hoverValue: PropTypes.any,
|
||||
mode: PropTypes.arrayOf(PropTypes.oneOf(['date', 'month', 'year', 'decade'])),
|
||||
showDateInput: PropTypes.bool,
|
||||
showDateInput: PropTypes.bool.def(true),
|
||||
timePicker: PropTypes.any,
|
||||
showOk: PropTypes.bool,
|
||||
showToday: PropTypes.bool,
|
||||
defaultSelectedValue: PropTypes.array,
|
||||
showToday: PropTypes.bool.def(true),
|
||||
defaultSelectedValue: PropTypes.array.def([]),
|
||||
selectedValue: PropTypes.array,
|
||||
onOk: PropTypes.func,
|
||||
showClear: PropTypes.bool,
|
||||
locale: PropTypes.object,
|
||||
onChange: PropTypes.func,
|
||||
onSelect: PropTypes.func,
|
||||
onValueChange: PropTypes.func,
|
||||
onHoverChange: PropTypes.func,
|
||||
onPanelChange: PropTypes.func,
|
||||
showWeekNumber: PropTypes.bool,
|
||||
// locale: PropTypes.object,
|
||||
// onChange: PropTypes.func,
|
||||
// onSelect: PropTypes.func,
|
||||
// onValueChange: PropTypes.func,
|
||||
// onHoverChange: PropTypes.func,
|
||||
// onPanelChange: PropTypes.func,
|
||||
format: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
|
||||
onClear: PropTypes.func,
|
||||
type: PropTypes.any,
|
||||
// onClear: PropTypes.func,
|
||||
type: PropTypes.any.def('both'),
|
||||
disabledDate: PropTypes.func,
|
||||
disabledTime: PropTypes.func,
|
||||
disabledTime: PropTypes.func.def(noop),
|
||||
renderFooter: PropTypes.func.def(() => null),
|
||||
renderSidebar: PropTypes.func.def(() => null),
|
||||
},
|
||||
|
||||
mixins: [CommonMixin],
|
||||
mixins: [BaseMixin, CommonMixin],
|
||||
|
||||
getDefaultProps () {
|
||||
return {
|
||||
type: 'both',
|
||||
defaultSelectedValue: [],
|
||||
onValueChange: noop,
|
||||
onHoverChange: noop,
|
||||
onPanelChange: noop,
|
||||
disabledTime: noop,
|
||||
onInputSelect: noop,
|
||||
showToday: true,
|
||||
showDateInput: true,
|
||||
}
|
||||
},
|
||||
|
||||
getInitialState () {
|
||||
const props = this.props
|
||||
data () {
|
||||
const props = this.$props
|
||||
const selectedValue = props.selectedValue || props.defaultSelectedValue
|
||||
const value = normalizeAnchor(props, 1)
|
||||
return {
|
||||
selectedValue,
|
||||
sSelectedValue: selectedValue,
|
||||
prevSelectedValue: selectedValue,
|
||||
firstSelectedValue: null,
|
||||
hoverValue: props.hoverValue || [],
|
||||
value,
|
||||
sHoverValue: props.hoverValue || [],
|
||||
sValue: value,
|
||||
showTimePicker: false,
|
||||
mode: props.mode || ['date', 'date'],
|
||||
sMode: props.mode || ['date', 'date'],
|
||||
}
|
||||
},
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
const { state } = this
|
||||
watch: {
|
||||
value (val) {
|
||||
const newState = {}
|
||||
if ('value' in nextProps) {
|
||||
newState.value = normalizeAnchor(nextProps, 0)
|
||||
newState.sValue = normalizeAnchor(val, 0)
|
||||
this.setState(newState)
|
||||
}
|
||||
if ('hoverValue' in nextProps && !isArraysEqual(state.hoverValue, nextProps.hoverValue)) {
|
||||
this.setState({ hoverValue: nextProps.hoverValue })
|
||||
}
|
||||
if ('selectedValue' in nextProps) {
|
||||
newState.selectedValue = nextProps.selectedValue
|
||||
newState.prevSelectedValue = nextProps.selectedValue
|
||||
this.setState(newState)
|
||||
}
|
||||
if ('mode' in nextProps && !isArraysEqual(state.mode, nextProps.mode)) {
|
||||
this.setState({ mode: nextProps.mode })
|
||||
},
|
||||
hoverValue (val) {
|
||||
if (!isArraysEqual(this.sHoverValue, val)) {
|
||||
this.setState({ sHoverValue: val })
|
||||
}
|
||||
},
|
||||
selectedValue (val) {
|
||||
const newState = {}
|
||||
newState.sSelectedValue = val
|
||||
newState.prevSelectedValue = val
|
||||
this.setState(newState)
|
||||
},
|
||||
mode (val) {
|
||||
if (!isArraysEqual(this.sMode, val)) {
|
||||
this.setState({ sMode: val })
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onDatePanelEnter () {
|
||||
if (this.hasSelectedValue()) {
|
||||
this.fireHoverValueChange(this.state.selectedValue.concat())
|
||||
this.fireHoverValueChange(this.sSelectedValue.concat())
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -165,8 +158,7 @@ const RangeCalendar = createReactClass({
|
|||
},
|
||||
|
||||
onSelect (value) {
|
||||
const { type } = this.props
|
||||
const { selectedValue, prevSelectedValue, firstSelectedValue } = this.state
|
||||
const { type, sSelectedValue, prevSelectedValue, firstSelectedValue } = this
|
||||
let nextSelectedValue
|
||||
if (type === 'both') {
|
||||
if (!firstSelectedValue) {
|
||||
|
|
@ -182,11 +174,10 @@ const RangeCalendar = createReactClass({
|
|||
}
|
||||
} else if (type === 'start') {
|
||||
syncTime(prevSelectedValue[0], value)
|
||||
const endValue = selectedValue[1]
|
||||
nextSelectedValue = endValue && this.compare(endValue, value) > 0
|
||||
? [value, endValue] : [value]
|
||||
const endValue = sSelectedValue[1]
|
||||
nextSelectedValue = endValue && this.compare(endValue, value) > 0 ? [value, endValue] : [value]
|
||||
} else { // type === 'end'
|
||||
const startValue = selectedValue[0]
|
||||
const startValue = sSelectedValue[0]
|
||||
if (startValue && this.compare(startValue, value) <= 0) {
|
||||
syncTime(prevSelectedValue[1], value)
|
||||
nextSelectedValue = [startValue, value]
|
||||
|
|
@ -201,14 +192,13 @@ const RangeCalendar = createReactClass({
|
|||
|
||||
onDayHover (value) {
|
||||
let hoverValue = []
|
||||
const { selectedValue, firstSelectedValue } = this.state
|
||||
const { type } = this.props
|
||||
if (type === 'start' && selectedValue[1]) {
|
||||
hoverValue = this.compare(value, selectedValue[1]) < 0
|
||||
? [value, selectedValue[1]] : [value]
|
||||
} else if (type === 'end' && selectedValue[0]) {
|
||||
hoverValue = this.compare(value, selectedValue[0]) > 0
|
||||
? [selectedValue[0], value] : []
|
||||
const { sSelectedValue, firstSelectedValue, type } = this
|
||||
if (type === 'start' && sSelectedValue[1]) {
|
||||
hoverValue = this.compare(value, sSelectedValue[1]) < 0
|
||||
? [value, sSelectedValue[1]] : [value]
|
||||
} else if (type === 'end' && sSelectedValue[0]) {
|
||||
hoverValue = this.compare(value, sSelectedValue[0]) > 0
|
||||
? [sSelectedValue[0], value] : []
|
||||
} else {
|
||||
if (!firstSelectedValue) {
|
||||
return
|
||||
|
|
@ -220,9 +210,9 @@ const RangeCalendar = createReactClass({
|
|||
},
|
||||
|
||||
onToday () {
|
||||
const startValue = getTodayTime(this.state.value[0])
|
||||
const startValue = getTodayTime(this.sValue[0])
|
||||
const endValue = startValue.clone().add(1, 'months')
|
||||
this.setState({ value: [startValue, endValue] })
|
||||
this.setState({ sValue: [startValue, endValue] })
|
||||
},
|
||||
|
||||
onOpenTimePicker () {
|
||||
|
|
@ -237,9 +227,9 @@ const RangeCalendar = createReactClass({
|
|||
},
|
||||
|
||||
onOk () {
|
||||
const { selectedValue } = this.state
|
||||
if (this.isAllowedDateAndTime(selectedValue)) {
|
||||
this.props.onOk(this.state.selectedValue)
|
||||
const { sSelectedValue } = this
|
||||
if (this.isAllowedDateAndTime(sSelectedValue)) {
|
||||
this.__emit('ok', sSelectedValue)
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -254,76 +244,75 @@ const RangeCalendar = createReactClass({
|
|||
},
|
||||
|
||||
onStartValueChange (leftValue) {
|
||||
const value = [...this.state.value]
|
||||
const value = [...this.sValue]
|
||||
value[0] = leftValue
|
||||
return this.fireValueChange(value)
|
||||
},
|
||||
|
||||
onEndValueChange (rightValue) {
|
||||
const value = [...this.state.value]
|
||||
const value = [...this.sValue]
|
||||
value[1] = rightValue
|
||||
return this.fireValueChange(value)
|
||||
},
|
||||
|
||||
onStartPanelChange (value, mode) {
|
||||
const { props, state } = this
|
||||
const newMode = [mode, state.mode[1]]
|
||||
if (!('mode' in props)) {
|
||||
const { sMode, sValue } = this
|
||||
const newMode = [mode, sMode[1]]
|
||||
if (!hasProp(this, 'mode')) {
|
||||
this.setState({
|
||||
mode: newMode,
|
||||
sMode: newMode,
|
||||
})
|
||||
}
|
||||
const newValue = [value || state.value[0], state.value[1]]
|
||||
props.onPanelChange(newValue, newMode)
|
||||
const newValue = [value || sValue[0], sValue[1]]
|
||||
this.__emit('panelChange', newValue, newMode)
|
||||
},
|
||||
|
||||
onEndPanelChange (value, mode) {
|
||||
const { props, state } = this
|
||||
const newMode = [state.mode[0], mode]
|
||||
if (!('mode' in props)) {
|
||||
const { sMode, sValue } = this
|
||||
const newMode = [sMode[0], mode]
|
||||
if (!hasProp(this, 'mode')) {
|
||||
this.setState({
|
||||
mode: newMode,
|
||||
sMode: newMode,
|
||||
})
|
||||
}
|
||||
const newValue = [state.value[0], value || state.value[1]]
|
||||
props.onPanelChange(newValue, newMode)
|
||||
const newValue = [sValue[0], value || sValue[1]]
|
||||
this.__emit('panelChange', newValue, newMode)
|
||||
},
|
||||
|
||||
getStartValue () {
|
||||
let value = this.state.value[0]
|
||||
const selectedValue = this.state.selectedValue
|
||||
let value = this.sValue[0]
|
||||
const selectedValue = this.sSelectedValue
|
||||
// keep selectedTime when select date
|
||||
if (selectedValue[0] && this.props.timePicker) {
|
||||
if (selectedValue[0] && this.timePicker) {
|
||||
value = value.clone()
|
||||
syncTime(selectedValue[0], value)
|
||||
}
|
||||
if (this.state.showTimePicker && selectedValue[0]) {
|
||||
if (this.showTimePicker && selectedValue[0]) {
|
||||
return selectedValue[0]
|
||||
}
|
||||
return value
|
||||
},
|
||||
|
||||
getEndValue () {
|
||||
const { value, selectedValue, showTimePicker } = this.state
|
||||
const endValue = value[1] ? value[1].clone() : value[0].clone().add(1, 'month')
|
||||
const { sValue, sSelectedValue, showTimePicker } = this
|
||||
const endValue = sValue[1] ? sValue[1].clone() : sValue[0].clone().add(1, 'month')
|
||||
// keep selectedTime when select date
|
||||
if (selectedValue[1] && this.props.timePicker) {
|
||||
syncTime(selectedValue[1], endValue)
|
||||
if (sSelectedValue[1] && this.timePicker) {
|
||||
syncTime(sSelectedValue[1], endValue)
|
||||
}
|
||||
if (showTimePicker) {
|
||||
return selectedValue[1] ? selectedValue[1] : this.getStartValue()
|
||||
return sSelectedValue[1] ? sSelectedValue[1] : this.getStartValue()
|
||||
}
|
||||
return endValue
|
||||
},
|
||||
// get disabled hours for second picker
|
||||
getEndDisableTime () {
|
||||
const { selectedValue, value } = this.state
|
||||
const { disabledTime } = this.props
|
||||
const userSettingDisabledTime = disabledTime(selectedValue, 'end') || {}
|
||||
const startValue = selectedValue && selectedValue[0] || value[0].clone()
|
||||
const { sSelectedValue, sValue, disabledTime } = this
|
||||
const userSettingDisabledTime = disabledTime(sSelectedValue, 'end') || {}
|
||||
const startValue = sSelectedValue && sSelectedValue[0] || sValue[0].clone()
|
||||
// if startTime and endTime is same day..
|
||||
// the second time picker will not able to pick time before first time picker
|
||||
if (!selectedValue[1] || startValue.isSame(selectedValue[1], 'day')) {
|
||||
if (!sSelectedValue[1] || startValue.isSame(sSelectedValue[1], 'day')) {
|
||||
const hours = startValue.hour()
|
||||
const minutes = startValue.minute()
|
||||
const second = startValue.second()
|
||||
|
|
@ -355,8 +344,8 @@ const RangeCalendar = createReactClass({
|
|||
},
|
||||
|
||||
isAllowedDateAndTime (selectedValue) {
|
||||
return isAllowedDate(selectedValue[0], this.props.disabledDate, this.disabledStartTime) &&
|
||||
isAllowedDate(selectedValue[1], this.props.disabledDate, this.disabledEndTime)
|
||||
return isAllowedDate(selectedValue[0], this.disabledDate, this.disabledStartTime) &&
|
||||
isAllowedDate(selectedValue[1], this.disabledDate, this.disabledEndTime)
|
||||
},
|
||||
|
||||
isMonthYearPanelShow (mode) {
|
||||
|
|
@ -364,22 +353,23 @@ const RangeCalendar = createReactClass({
|
|||
},
|
||||
|
||||
hasSelectedValue () {
|
||||
const { selectedValue } = this.state
|
||||
return !!selectedValue[1] && !!selectedValue[0]
|
||||
const { sSelectedValue } = this
|
||||
return !!sSelectedValue[1] && !!sSelectedValue[0]
|
||||
},
|
||||
|
||||
compare (v1, v2) {
|
||||
if (this.props.timePicker) {
|
||||
if (this.timePicker) {
|
||||
return v1.diff(v2)
|
||||
}
|
||||
return v1.diff(v2, 'days')
|
||||
},
|
||||
|
||||
fireSelectValueChange (selectedValue, direct) {
|
||||
const { timePicker } = this.props
|
||||
const { prevSelectedValue } = this.state
|
||||
if (timePicker && timePicker.props.defaultValue) {
|
||||
const timePickerDefaultValue = timePicker.props.defaultValue
|
||||
const { timePicker, prevSelectedValue } = this
|
||||
if (timePicker) {
|
||||
const timePickerProps = getOptionProps(timePicker)
|
||||
if (timePickerProps.defaultValue) {
|
||||
const timePickerDefaultValue = timePickerProps.defaultValue
|
||||
if (!prevSelectedValue[0] && selectedValue[0]) {
|
||||
syncTime(timePickerDefaultValue[0], selectedValue[0])
|
||||
}
|
||||
|
|
@ -387,20 +377,21 @@ const RangeCalendar = createReactClass({
|
|||
syncTime(timePickerDefaultValue[1], selectedValue[1])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!('selectedValue' in this.props)) {
|
||||
if (!hasProp(this, 'selectedValue')) {
|
||||
this.setState({
|
||||
selectedValue,
|
||||
sSelectedValue: selectedValue,
|
||||
})
|
||||
}
|
||||
|
||||
// 尚未选择过时间，直接输入的话
|
||||
if (!this.state.selectedValue[0] || !this.state.selectedValue[1]) {
|
||||
if (!this.sSelectedValue[0] || !this.sSelectedValue[1]) {
|
||||
const startValue = selectedValue[0] || moment()
|
||||
const endValue = selectedValue[1] || startValue.clone().add(1, 'months')
|
||||
this.setState({
|
||||
selectedValue,
|
||||
value: getValueFromSelectedValue([startValue, endValue]),
|
||||
sSelectedValue: selectedValue,
|
||||
sValue: getValueFromSelectedValue([startValue, endValue]),
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -408,86 +399,93 @@ const RangeCalendar = createReactClass({
|
|||
this.setState({ firstSelectedValue: selectedValue[0] })
|
||||
this.fireHoverValueChange(selectedValue.concat())
|
||||
}
|
||||
this.props.onChange(selectedValue)
|
||||
this.__emit('change', selectedValue)
|
||||
if (direct || selectedValue[0] && selectedValue[1]) {
|
||||
this.setState({
|
||||
prevSelectedValue: selectedValue,
|
||||
firstSelectedValue: null,
|
||||
})
|
||||
this.fireHoverValueChange([])
|
||||
this.props.onSelect(selectedValue)
|
||||
this.__emit('select', selectedValue)
|
||||
}
|
||||
},
|
||||
|
||||
fireValueChange (value) {
|
||||
const props = this.props
|
||||
if (!('value' in props)) {
|
||||
if (!hasProp(this, 'value')) {
|
||||
this.setState({
|
||||
value,
|
||||
sValue: value,
|
||||
})
|
||||
}
|
||||
props.onValueChange(value)
|
||||
this.__emit('valueChange', value)
|
||||
},
|
||||
|
||||
fireHoverValueChange (hoverValue) {
|
||||
const props = this.props
|
||||
if (!('hoverValue' in props)) {
|
||||
this.setState({ hoverValue })
|
||||
if (!hasProp(this, 'hoverValue')) {
|
||||
this.setState({ sHoverValue: hoverValue })
|
||||
}
|
||||
props.onHoverChange(hoverValue)
|
||||
this.__emit('hoverChange', hoverValue)
|
||||
},
|
||||
|
||||
clear () {
|
||||
this.fireSelectValueChange([], true)
|
||||
this.props.onClear()
|
||||
this.__emit('clear')
|
||||
},
|
||||
|
||||
disabledStartTime (time) {
|
||||
return this.props.disabledTime(time, 'start')
|
||||
return this.disabledTime(time, 'start')
|
||||
},
|
||||
|
||||
disabledEndTime (time) {
|
||||
return this.props.disabledTime(time, 'end')
|
||||
return this.disabledTime(time, 'end')
|
||||
},
|
||||
|
||||
disabledStartMonth (month) {
|
||||
const { value } = this.state
|
||||
return month.isSameOrAfter(value[1], 'month')
|
||||
const { sValue } = this
|
||||
return month.isSameOrAfter(sValue[1], 'month')
|
||||
},
|
||||
|
||||
disabledEndMonth (month) {
|
||||
const { value } = this.state
|
||||
return month.isSameOrBefore(value[0], 'month')
|
||||
const { sValue } = this
|
||||
return month.isSameOrBefore(sValue[0], 'month')
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const { props, state } = this
|
||||
const props = getOptionProps(this)
|
||||
const {
|
||||
prefixCls, dateInputPlaceholder,
|
||||
timePicker, showOk, locale, showClear,
|
||||
showToday, type,
|
||||
} = props
|
||||
const {
|
||||
hoverValue,
|
||||
selectedValue,
|
||||
mode,
|
||||
sHoverValue,
|
||||
sSelectedValue,
|
||||
sMode,
|
||||
showTimePicker,
|
||||
} = state
|
||||
sValue,
|
||||
$listeners,
|
||||
} = this
|
||||
const className = {
|
||||
[props.className]: !!props.className,
|
||||
[prefixCls]: 1,
|
||||
[`${prefixCls}-hidden`]: !props.visible,
|
||||
[`${prefixCls}-range`]: 1,
|
||||
[`${prefixCls}-show-time-picker`]: showTimePicker,
|
||||
[`${prefixCls}-week-number`]: props.showWeekNumber,
|
||||
}
|
||||
const classes = classnames(className)
|
||||
const baseProps = {
|
||||
props,
|
||||
on: $listeners,
|
||||
}
|
||||
const newProps = {
|
||||
selectedValue: state.selectedValue,
|
||||
onSelect: this.onSelect,
|
||||
onDayHover: type === 'start' && selectedValue[1] ||
|
||||
type === 'end' && selectedValue[0] || !!hoverValue.length
|
||||
? this.onDayHover : undefined,
|
||||
props: {
|
||||
selectedValue: sSelectedValue,
|
||||
},
|
||||
on: {
|
||||
select: this.onSelect,
|
||||
dayHover: type === 'start' && sSelectedValue[1] ||
|
||||
type === 'end' && sSelectedValue[0] || !!sHoverValue.length
|
||||
? this.onDayHover : noop,
|
||||
},
|
||||
}
|
||||
|
||||
let placeholder1
|
||||
|
|
@ -501,11 +499,11 @@ const RangeCalendar = createReactClass({
|
|||
}
|
||||
}
|
||||
const showOkButton = showOk === true || showOk !== false && !!timePicker
|
||||
const cls = classnames({
|
||||
const cls = {
|
||||
[`${prefixCls}-footer`]: true,
|
||||
[`${prefixCls}-range-bottom`]: true,
|
||||
[`${prefixCls}-footer-show-ok`]: showOkButton,
|
||||
})
|
||||
}
|
||||
|
||||
const startValue = this.getStartValue()
|
||||
const endValue = this.getEndValue()
|
||||
|
|
@ -518,99 +516,125 @@ const RangeCalendar = createReactClass({
|
|||
const nextMonthOfStart = startValue.clone().add(1, 'months')
|
||||
const isClosestMonths = nextMonthOfStart.year() === endValue.year() &&
|
||||
nextMonthOfStart.month() === endValue.month()
|
||||
const leftPartProps = mergeProps(baseProps, newProps, {
|
||||
props: {
|
||||
hoverValue: sHoverValue,
|
||||
direction: 'left',
|
||||
disabledTime: this.disabledStartTime,
|
||||
disabledMonth: this.disabledStartMonth,
|
||||
format: this.getFormat(),
|
||||
value: startValue,
|
||||
mode: sMode[0],
|
||||
placeholder: placeholder1,
|
||||
showDateInput: this.showDateInput,
|
||||
timePicker: timePicker,
|
||||
showTimePicker: showTimePicker,
|
||||
enablePrev: true,
|
||||
enableNext: !isClosestMonths || this.isMonthYearPanelShow(sMode[1]),
|
||||
},
|
||||
on: {
|
||||
inputSelect: this.onStartInputSelect,
|
||||
valueChange: this.onStartValueChange,
|
||||
panelChange: this.onStartPanelChange,
|
||||
},
|
||||
})
|
||||
const rightPartProps = mergeProps(baseProps, newProps, {
|
||||
props: {
|
||||
hoverValue: sHoverValue,
|
||||
direction: 'right',
|
||||
format: this.getFormat(),
|
||||
timePickerDisabledTime: this.getEndDisableTime(),
|
||||
placeholder: placeholder2,
|
||||
value: endValue,
|
||||
mode: sMode[1],
|
||||
showDateInput: this.showDateInput,
|
||||
timePicker: timePicker,
|
||||
showTimePicker: showTimePicker,
|
||||
disabledTime: this.disabledEndTime,
|
||||
disabledMonth: this.disabledEndMonth,
|
||||
enablePrev: !isClosestMonths || this.isMonthYearPanelShow(sMode[0]),
|
||||
enableNext: true,
|
||||
},
|
||||
on: {
|
||||
inputSelect: this.onEndInputSelect,
|
||||
valueChange: this.onEndValueChange,
|
||||
panelChange: this.onEndPanelChange,
|
||||
},
|
||||
})
|
||||
let TodayButtonNode = null
|
||||
if (showToday) {
|
||||
const todayButtonProps = mergeProps(baseProps, {
|
||||
props: {
|
||||
disabled: isTodayInView,
|
||||
value: sValue[0],
|
||||
text: locale.backToToday,
|
||||
},
|
||||
on: {
|
||||
today: this.onToday,
|
||||
},
|
||||
})
|
||||
TodayButtonNode = <TodayButton {...todayButtonProps}/>
|
||||
}
|
||||
|
||||
let TimePickerButtonNode = null
|
||||
if (props.timePicker) {
|
||||
const timePickerButtonProps = mergeProps(baseProps, {
|
||||
props: {
|
||||
showTimePicker: showTimePicker,
|
||||
timePickerDisabled: !this.hasSelectedValue() || sHoverValue.length,
|
||||
},
|
||||
on: {
|
||||
openTimePicker: this.onOpenTimePicker,
|
||||
closeTimePicker: this.onCloseTimePicker,
|
||||
},
|
||||
})
|
||||
TimePickerButtonNode = <TimePickerButton {...timePickerButtonProps} />
|
||||
}
|
||||
|
||||
let OkButtonNode = null
|
||||
if (showOkButton) {
|
||||
const okButtonProps = mergeProps(baseProps, {
|
||||
props: {
|
||||
okDisabled: !this.isAllowedDateAndTime(sSelectedValue) || !this.hasSelectedValue() || sHoverValue.length,
|
||||
},
|
||||
on: {
|
||||
ok: this.onOk,
|
||||
},
|
||||
})
|
||||
OkButtonNode = <OkButton {...okButtonProps}/>
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={this.saveRoot}
|
||||
className={classes}
|
||||
style={props.style}
|
||||
class={className}
|
||||
tabIndex='0'
|
||||
>
|
||||
{props.renderSidebar()}
|
||||
<div className={`${prefixCls}-panel`}>
|
||||
{showClear && selectedValue[0] && selectedValue[1]
|
||||
<div class={`${prefixCls}-panel`}>
|
||||
{showClear && sSelectedValue[0] && sSelectedValue[1]
|
||||
? <a
|
||||
className={`${prefixCls}-clear-btn`}
|
||||
class={`${prefixCls}-clear-btn`}
|
||||
role='button'
|
||||
title={locale.clear}
|
||||
onClick={this.clear}
|
||||
/> : null}
|
||||
<div
|
||||
className={`${prefixCls}-date-panel`}
|
||||
onMouseLeave={type !== 'both' ? this.onDatePanelLeave : undefined}
|
||||
onMouseEnter={type !== 'both' ? this.onDatePanelEnter : undefined}
|
||||
class={`${prefixCls}-date-panel`}
|
||||
onMouseleave={type !== 'both' ? this.onDatePanelLeave : noop}
|
||||
onMouseenter={type !== 'both' ? this.onDatePanelEnter : noop}
|
||||
>
|
||||
<CalendarPart
|
||||
{...props}
|
||||
{...newProps}
|
||||
hoverValue={hoverValue}
|
||||
direction='left'
|
||||
disabledTime={this.disabledStartTime}
|
||||
disabledMonth={this.disabledStartMonth}
|
||||
format={this.getFormat()}
|
||||
value={startValue}
|
||||
mode={mode[0]}
|
||||
placeholder={placeholder1}
|
||||
onInputSelect={this.onStartInputSelect}
|
||||
onValueChange={this.onStartValueChange}
|
||||
onPanelChange={this.onStartPanelChange}
|
||||
showDateInput={this.props.showDateInput}
|
||||
timePicker={timePicker}
|
||||
showTimePicker={showTimePicker}
|
||||
enablePrev
|
||||
enableNext={!isClosestMonths || this.isMonthYearPanelShow(mode[1])}
|
||||
/>
|
||||
<span className={`${prefixCls}-range-middle`}>~</span>
|
||||
<CalendarPart
|
||||
{...props}
|
||||
{...newProps}
|
||||
hoverValue={hoverValue}
|
||||
direction='right'
|
||||
format={this.getFormat()}
|
||||
timePickerDisabledTime={this.getEndDisableTime()}
|
||||
placeholder={placeholder2}
|
||||
value={endValue}
|
||||
mode={mode[1]}
|
||||
onInputSelect={this.onEndInputSelect}
|
||||
onValueChange={this.onEndValueChange}
|
||||
onPanelChange={this.onEndPanelChange}
|
||||
showDateInput={this.props.showDateInput}
|
||||
timePicker={timePicker}
|
||||
showTimePicker={showTimePicker}
|
||||
disabledTime={this.disabledEndTime}
|
||||
disabledMonth={this.disabledEndMonth}
|
||||
enablePrev={!isClosestMonths || this.isMonthYearPanelShow(mode[0])}
|
||||
enableNext
|
||||
/>
|
||||
<CalendarPart {...leftPartProps}/>
|
||||
<span class={`${prefixCls}-range-middle`}>~</span>
|
||||
<CalendarPart {...rightPartProps}/>
|
||||
</div>
|
||||
<div className={cls}>
|
||||
<div class={cls}>
|
||||
{props.renderFooter()}
|
||||
{showToday || props.timePicker || showOkButton ? (
|
||||
<div className={`${prefixCls}-footer-btn`}>
|
||||
{showToday ? (
|
||||
<TodayButton
|
||||
{...props}
|
||||
disabled={isTodayInView}
|
||||
value={state.value[0]}
|
||||
onToday={this.onToday}
|
||||
text={locale.backToToday}
|
||||
/>
|
||||
) : null}
|
||||
{props.timePicker
|
||||
? <TimePickerButton
|
||||
{...props}
|
||||
showTimePicker={showTimePicker}
|
||||
onOpenTimePicker={this.onOpenTimePicker}
|
||||
onCloseTimePicker={this.onCloseTimePicker}
|
||||
timePickerDisabled={!this.hasSelectedValue() || hoverValue.length}
|
||||
/> : null}
|
||||
{showOkButton
|
||||
? <OkButton
|
||||
{...props}
|
||||
onOk={this.onOk}
|
||||
okDisabled={!this.isAllowedDateAndTime(selectedValue) ||
|
||||
!this.hasSelectedValue() || hoverValue.length
|
||||
}
|
||||
/> : null}
|
||||
<div class={`${prefixCls}-footer-btn`}>
|
||||
{TodayButtonNode}
|
||||
{TimePickerButtonNode}
|
||||
{OkButtonNode}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
@ -618,7 +642,7 @@ const RangeCalendar = createReactClass({
|
|||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export default RangeCalendar
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
import PropTypes from '@/components/_util/vue-types'
|
||||
import BaseMixin from '@/components/_util/BaseMixin'
|
||||
import { getOptionProps } from '@/components/_util/props-util'
|
||||
import TodayButton from '../calendar/TodayButton'
|
||||
import OkButton from '../calendar/OkButton'
|
||||
import TimePickerButton from '../calendar/TimePickerButton'
|
||||
import TodayButton from './TodayButton'
|
||||
import OkButton from './OkButton'
|
||||
import TimePickerButton from './TimePickerButton'
|
||||
|
||||
const CalendarFooter = {
|
||||
mixins: [BaseMixin],
|
||||
|
|
@ -19,6 +19,11 @@ const CalendarFooter = {
|
|||
value: PropTypes.object,
|
||||
renderFooter: PropTypes.func,
|
||||
defaultValue: PropTypes.object,
|
||||
locale: PropTypes.object,
|
||||
showToday: PropTypes.bool,
|
||||
disabledDate: PropTypes.func,
|
||||
showTimePicker: PropTypes.bool,
|
||||
okDisabled: PropTypes.bool,
|
||||
},
|
||||
methods: {
|
||||
onSelect (value) {
|
||||
|
|
@ -44,16 +49,16 @@ const CalendarFooter = {
|
|||
},
|
||||
on: $listeners,
|
||||
}
|
||||
let nowEl
|
||||
let nowEl = null
|
||||
if (showToday) {
|
||||
nowEl = <TodayButton {...btnProps} />
|
||||
}
|
||||
delete btnProps.props.value
|
||||
let okBtn
|
||||
let okBtn = null
|
||||
if (showOk === true || showOk !== false && !!timePicker) {
|
||||
okBtn = <OkButton {...btnProps} />
|
||||
}
|
||||
let timePickerBtn
|
||||
let timePickerBtn = null
|
||||
if (timePicker) {
|
||||
timePickerBtn = <TimePickerButton {...btnProps} />
|
||||
}
|
||||
|
|
@ -61,12 +66,12 @@ const CalendarFooter = {
|
|||
let footerBtn
|
||||
if (nowEl || timePickerBtn || okBtn) {
|
||||
footerBtn = (<span class={`${prefixCls}-footer-btn`}>
|
||||
{[nowEl, timePickerBtn, okBtn]}
|
||||
{nowEl}{timePickerBtn}{okBtn}
|
||||
</span>)
|
||||
}
|
||||
const cls = {
|
||||
[`${prefixCls}-footer`]: true,
|
||||
[`${prefixCls}-footer-show-ok`]: okBtn,
|
||||
[`${prefixCls}-footer-show-ok`]: !!okBtn,
|
||||
}
|
||||
footerEl = (
|
||||
<div class={cls}>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { getOptionProps } from '@/components/_util/props-util'
|
|||
import MonthPanel from '../month/MonthPanel'
|
||||
import YearPanel from '../year/YearPanel'
|
||||
import DecadePanel from '../decade/DecadePanel'
|
||||
|
||||
function noop () {}
|
||||
function goMonth (direction) {
|
||||
const next = this.value.clone()
|
||||
next.add(direction, 'months')
|
||||
|
|
@ -34,6 +34,7 @@ const CalendarHeader = {
|
|||
enablePrev: PropTypes.any.def(1),
|
||||
enableNext: PropTypes.any.def(1),
|
||||
disabledMonth: PropTypes.func,
|
||||
mode: PropTypes.any,
|
||||
},
|
||||
data () {
|
||||
this.nextMonth = goMonth.bind(this, 1)
|
||||
|
|
@ -47,7 +48,9 @@ const CalendarHeader = {
|
|||
methods: {
|
||||
onMonthSelect (value) {
|
||||
this.__emit('panelChange', value, 'date')
|
||||
if (this.__emit('monthSelect', value)) {
|
||||
if (this.$listeners.monthSelect) {
|
||||
this.__emit('monthSelect', value)
|
||||
} else {
|
||||
this.__emit('valueChange', value)
|
||||
}
|
||||
},
|
||||
|
|
@ -75,7 +78,7 @@ const CalendarHeader = {
|
|||
const year = (<a
|
||||
class={`${prefixCls}-year-select`}
|
||||
role='button'
|
||||
onClick={showTimePicker ? null : () => this.showYearPanel('date')}
|
||||
onClick={showTimePicker ? noop : () => this.showYearPanel('date')}
|
||||
title={locale.yearSelect}
|
||||
>
|
||||
{value.format(locale.yearFormat)}
|
||||
|
|
@ -83,7 +86,7 @@ const CalendarHeader = {
|
|||
const month = (<a
|
||||
class={`${prefixCls}-month-select`}
|
||||
role='button'
|
||||
onClick={showTimePicker ? null : this.showMonthPanel}
|
||||
onClick={showTimePicker ? noop : this.showMonthPanel}
|
||||
title={locale.monthSelect}
|
||||
>
|
||||
{locale.monthFormat ? value.format(locale.monthFormat) : localeData.monthsShort(value)}
|
||||
|
|
|
|||
|
|
@ -2,21 +2,19 @@
|
|||
function noop () {}
|
||||
export default {
|
||||
functional: true,
|
||||
render: function (createElement, context) {
|
||||
const { data, listeners = {}} = context
|
||||
const { prefixCls, locale, okDisabled } = data
|
||||
render (createElement, context) {
|
||||
const { props, listeners = {}} = context
|
||||
const { prefixCls, locale, okDisabled } = props
|
||||
const { ok = noop } = listeners
|
||||
let className = `${prefixCls}-ok-btn`
|
||||
if (okDisabled) {
|
||||
className += ` ${prefixCls}-ok-btn-disabled`
|
||||
}
|
||||
return (<a
|
||||
class={className}
|
||||
role='button'
|
||||
onClick={okDisabled ? noop : ok}
|
||||
>
|
||||
return (
|
||||
<a class={className} role='button' onClick={okDisabled ? noop : ok}>
|
||||
{locale.ok}
|
||||
</a>)
|
||||
</a>
|
||||
)
|
||||
},
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
function noop () {}
|
||||
export default {
|
||||
functional: true,
|
||||
render: function (createElement, context) {
|
||||
const { data, listeners = {}} = context
|
||||
render (h, context) {
|
||||
const { props, listeners = {}} = context
|
||||
const {
|
||||
prefixCls, locale, showTimePicker,
|
||||
timePickerDisabled } = data
|
||||
timePickerDisabled } = props
|
||||
const { closeTimePicker = noop, openTimePicker = noop } = listeners
|
||||
const className = {
|
||||
[`${prefixCls}-time-picker-btn`]: true,
|
||||
|
|
@ -16,13 +16,11 @@ export default {
|
|||
if (!timePickerDisabled) {
|
||||
onClick = showTimePicker ? closeTimePicker : openTimePicker
|
||||
}
|
||||
return (<a
|
||||
class={className}
|
||||
role='button'
|
||||
onClick={onClick}
|
||||
>
|
||||
return (
|
||||
<a class={className} role='button' onClick={onClick}>
|
||||
{showTimePicker ? locale.dateSelect : locale.timeSelect}
|
||||
</a>)
|
||||
</a>
|
||||
)
|
||||
},
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ function noop () {}
|
|||
export default {
|
||||
functional: true,
|
||||
render (createElement, context) {
|
||||
const { data, listeners = {}} = context
|
||||
const { props, listeners = {}} = context
|
||||
const {
|
||||
prefixCls,
|
||||
locale,
|
||||
|
|
@ -14,7 +14,7 @@ export default {
|
|||
disabledDate,
|
||||
// onToday,
|
||||
text,
|
||||
} = data
|
||||
} = props
|
||||
const { today = noop } = listeners
|
||||
const localeNow = (!text && timePicker ? locale.now : text) || locale.today
|
||||
const disabledToday =
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const DateInput = {
|
|||
data () {
|
||||
const selectedValue = this.selectedValue
|
||||
return {
|
||||
str: selectedValue && selectedValue.format(this.props.format) || '',
|
||||
str: selectedValue && selectedValue.format(this.format) || '',
|
||||
invalid: false,
|
||||
}
|
||||
},
|
||||
|
|
@ -45,7 +45,6 @@ const DateInput = {
|
|||
},
|
||||
methods: {
|
||||
updateState () {
|
||||
console.log('关注下')
|
||||
this.cachedSelectionStart = this.$refs.dateInputInstance.selectionStart
|
||||
this.cachedSelectionEnd = this.$refs.dateInputInstance.selectionEnd
|
||||
// when popup show, click body will call this, bug!
|
||||
|
|
@ -131,7 +130,7 @@ const DateInput = {
|
|||
value={str}
|
||||
disabled={disabled}
|
||||
placeholder={placeholder}
|
||||
onChange={this.onInputChange}
|
||||
onInput={this.onInputChange}
|
||||
/>
|
||||
</div>
|
||||
{showClear ? <a
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { getOptionProps } from '@/components/_util/props-util'
|
|||
import cx from 'classnames'
|
||||
import DateConstants from './DateConstants'
|
||||
import { getTitleString, getTodayTime } from '../util/'
|
||||
|
||||
function noop () {}
|
||||
function isSameDay (one, two) {
|
||||
return one && two && one.isSame(two, 'day')
|
||||
}
|
||||
|
|
@ -35,7 +35,7 @@ const DateTBody = {
|
|||
dateRender: PropTypes.func,
|
||||
disabledDate: PropTypes.func,
|
||||
prefixCls: PropTypes.string,
|
||||
selectedValue: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
|
||||
selectedValue: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)]),
|
||||
value: PropTypes.object,
|
||||
hoverValue: PropTypes.any.def([]),
|
||||
showWeekNumber: PropTypes.bool,
|
||||
|
|
@ -48,6 +48,8 @@ const DateTBody = {
|
|||
showWeekNumber, dateRender, disabledDate,
|
||||
hoverValue,
|
||||
} = props
|
||||
const { $listeners = {}} = this
|
||||
const { select = noop, dayHover = noop } = $listeners
|
||||
let iIndex
|
||||
let jIndex
|
||||
let current
|
||||
|
|
@ -97,7 +99,7 @@ const DateTBody = {
|
|||
if (showWeekNumber) {
|
||||
weekNumberCell = (
|
||||
<td
|
||||
key={dateTable[passed].week()}
|
||||
key={`week-${dateTable[passed].week()}`}
|
||||
role='gridcell'
|
||||
class={weekNumberCellClass}
|
||||
>
|
||||
|
|
@ -208,9 +210,8 @@ const DateTBody = {
|
|||
dateCells.push(
|
||||
<td
|
||||
key={passed}
|
||||
onClick={disabled ? undefined : props.onSelect.bind(null, current)}
|
||||
onMouseenter={disabled
|
||||
? undefined : props.onDayHover && props.onDayHover.bind(null, current) || undefined}
|
||||
onClick={disabled ? noop : select.bind(null, current)}
|
||||
onMouseenter={disabled ? noop : dayHover.bind(null, current)}
|
||||
role='gridcell'
|
||||
title={getTitleString(current)} class={cls}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import moment from 'moment'
|
|||
export default {
|
||||
functional: true,
|
||||
render (createElement, context) {
|
||||
const { data: props } = context
|
||||
const { props } = context
|
||||
const value = props.value
|
||||
const localeData = value.localeData()
|
||||
const prefixCls = props.prefixCls
|
||||
|
|
|
|||
|
|
@ -5,15 +5,15 @@ import DateTBody from './DateTBody'
|
|||
export default {
|
||||
functional: true,
|
||||
render (createElement, context) {
|
||||
const { data, listeners = {}} = context
|
||||
const prefixCls = data.prefixCls
|
||||
const props = {
|
||||
props: data,
|
||||
const { props, listeners = {}} = context
|
||||
const prefixCls = props.prefixCls
|
||||
const bodyProps = {
|
||||
props,
|
||||
on: listeners,
|
||||
}
|
||||
return (<table class={`${prefixCls}-table`} cellSpacing='0' role='grid'>
|
||||
<DateTHead {...props}/>
|
||||
<DateTBody {...props}/>
|
||||
<DateTHead {...bodyProps}/>
|
||||
<DateTBody {...bodyProps}/>
|
||||
</table>)
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,10 +29,9 @@ export default {
|
|||
rootPrefixCls: PropTypes.string,
|
||||
},
|
||||
data () {
|
||||
this.prefixCls = `${this.rootPrefixCls}-decade-panel`
|
||||
this.nextCentury = goYear.bind(this, 100)
|
||||
this.previousCentury = goYear.bind(this, -100)
|
||||
this.state = {
|
||||
return {
|
||||
sValue: this.value || this.defaultValue,
|
||||
}
|
||||
},
|
||||
|
|
@ -46,7 +45,7 @@ export default {
|
|||
const endYear = startYear + 99
|
||||
const decades = []
|
||||
let index = 0
|
||||
const prefixCls = this.prefixCls
|
||||
const prefixCls = `${this.rootPrefixCls}-decade-panel`
|
||||
|
||||
for (let rowIndex = 0; rowIndex < ROW; rowIndex++) {
|
||||
decades[rowIndex] = []
|
||||
|
|
@ -99,7 +98,7 @@ export default {
|
|||
})
|
||||
|
||||
return (
|
||||
<div class={this.prefixCls}>
|
||||
<div class={prefixCls}>
|
||||
<div class={`${prefixCls}-header`}>
|
||||
<a
|
||||
class={`${prefixCls}-prev-century-btn`}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const CalendarHeader = {
|
|||
yearSelectTotal: PropTypes.number.def(20),
|
||||
// onValueChange: PropTypes.func,
|
||||
// onTypeChange: PropTypes.func,
|
||||
Select: PropTypes.func,
|
||||
Select: PropTypes.object,
|
||||
prefixCls: PropTypes.string,
|
||||
type: PropTypes.string,
|
||||
showTypeSwitch: PropTypes.bool,
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import BaseMixin from '@/components/_util/BaseMixin'
|
|||
import { hasProp } from '@/components/_util/props-util'
|
||||
import moment from 'moment'
|
||||
import { isAllowedDate, getTodayTime } from '../util/index'
|
||||
|
||||
function noop () {}
|
||||
function getNow () {
|
||||
return moment()
|
||||
}
|
||||
|
|
@ -56,7 +56,7 @@ const CalendarMixin = {
|
|||
},
|
||||
|
||||
renderRoot (newProps) {
|
||||
const props = this.props
|
||||
const props = this.$props
|
||||
const prefixCls = props.prefixCls
|
||||
|
||||
const className = {
|
||||
|
|
@ -71,7 +71,7 @@ const CalendarMixin = {
|
|||
ref='rootInstance'
|
||||
class={className}
|
||||
tabIndex='0'
|
||||
onKeydown={this.onKeyDown}
|
||||
onKeydown={this.onKeyDown || noop}
|
||||
>
|
||||
{newProps.children}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,4 @@
|
|||
import PropTypes from '@/components/_util/vue-types'
|
||||
import enUs from '../locale/en_US'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
locale: PropTypes.object.def(enUs),
|
||||
visible: PropTypes.bool.def(true),
|
||||
// onSelect: PropTypes.func,
|
||||
prefixCls: PropTypes.string.def('rc-calendat'),
|
||||
// onChange: PropTypes.func,
|
||||
// onOk: PropTypes.func,
|
||||
},
|
||||
|
||||
// getDefaultProps () {
|
||||
// return {
|
||||
// locale: enUs,
|
||||
|
|
|
|||
|
|
@ -17,6 +17,12 @@ function noop () {
|
|||
const MonthPanel = {
|
||||
mixins: [BaseMixin],
|
||||
props: {
|
||||
value: PropTypes.any,
|
||||
defaultValue: PropTypes.any,
|
||||
cellRender: PropTypes.any,
|
||||
contentRender: PropTypes.any,
|
||||
locale: PropTypes.any,
|
||||
rootPrefixCls: PropTypes.string,
|
||||
// onChange: PropTypes.func,
|
||||
disabledDate: PropTypes.func,
|
||||
// onSelect: PropTypes.func,
|
||||
|
|
|
|||
|
|
@ -22,6 +22,9 @@ const MonthTable = {
|
|||
cellRender: PropTypes.func,
|
||||
prefixCls: PropTypes.string,
|
||||
value: PropTypes.object,
|
||||
locale: PropTypes.any,
|
||||
contentRender: PropTypes.any,
|
||||
disabledDate: PropTypes.func,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -71,14 +74,14 @@ const MonthTable = {
|
|||
const today = getTodayTime(value)
|
||||
const months = this.months()
|
||||
const currentMonth = value.month()
|
||||
const { prefixCls, locale, contentRender, cellRender } = props
|
||||
const { prefixCls, locale, contentRender, cellRender, disabledDate } = props
|
||||
const monthsEls = months.map((month, index) => {
|
||||
const tds = month.map(monthData => {
|
||||
let disabled = false
|
||||
if (props.disabledDate) {
|
||||
if (disabledDate) {
|
||||
const testValue = value.clone()
|
||||
testValue.month(monthData.value)
|
||||
disabled = props.disabledDate(testValue)
|
||||
disabled = disabledDate(testValue)
|
||||
}
|
||||
const classNameMap = {
|
||||
[`${prefixCls}-cell`]: 1,
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ const CalendarPart = {
|
|||
locale: PropTypes.any,
|
||||
showDateInput: PropTypes.bool,
|
||||
showTimePicker: PropTypes.bool,
|
||||
showWeekNumber: PropTypes.bool,
|
||||
format: PropTypes.any,
|
||||
placeholder: PropTypes.any,
|
||||
disabledDate: PropTypes.any,
|
||||
|
|
@ -62,7 +63,6 @@ const CalendarPart = {
|
|||
}
|
||||
const index = direction === 'left' ? 0 : 1
|
||||
const timePickerProps = getOptionProps(timePicker)
|
||||
console.log('timePickerProps', timePickerProps)
|
||||
const timePickerEle = shouldShowTimePicker &&
|
||||
cloneElement(timePicker, {
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ export default {
|
|||
rootPrefixCls: PropTypes.string,
|
||||
value: PropTypes.object,
|
||||
defaultValue: PropTypes.object,
|
||||
locale: PropTypes.object,
|
||||
},
|
||||
data () {
|
||||
this.nextDecade = goYear.bind(this, 10)
|
||||
|
|
@ -59,9 +60,8 @@ export default {
|
|||
},
|
||||
|
||||
render () {
|
||||
const props = this.$props
|
||||
const value = this.sValue
|
||||
const locale = props.locale
|
||||
const { sValue: value, locale, $listeners = {}} = this
|
||||
const decadePanelShow = $listeners.decadePanelShow || noop
|
||||
const years = this.years()
|
||||
const currentYear = value.year()
|
||||
const startYear = parseInt(currentYear / 10, 10) * 10
|
||||
|
|
@ -103,7 +103,7 @@ export default {
|
|||
})
|
||||
|
||||
return (
|
||||
<div class={this.prefixCls}>
|
||||
<div class={prefixCls}>
|
||||
<div>
|
||||
<div class={`${prefixCls}-header`}>
|
||||
<a
|
||||
|
|
@ -115,7 +115,7 @@ export default {
|
|||
<a
|
||||
class={`${prefixCls}-decade-select`}
|
||||
role='button'
|
||||
onClick={props.onDecadePanelShow}
|
||||
onClick={decadePanelShow}
|
||||
title={locale.decadeSelect}
|
||||
>
|
||||
<span class={`${prefixCls}-decade-select-content`}>
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ export default {
|
|||
<input
|
||||
type='text'
|
||||
value={this.goInputText}
|
||||
onChange={this.handleChange}
|
||||
onInput={this.handleChange}
|
||||
onKeyup={this.go}
|
||||
/>
|
||||
{locale.page}
|
||||
|
|
|
|||
|
|
@ -301,7 +301,7 @@ export default {
|
|||
value={this.stateCurrentInputValue}
|
||||
onKeydown={this.handleKeyDown}
|
||||
onKeyup={this.handleKeyUp}
|
||||
onChange={this.handleKeyUp}
|
||||
onInput={this.handleKeyUp}
|
||||
size='3'
|
||||
/>
|
||||
<span class={`${prefixCls}-slash`}>／</span>
|
||||
|
|
|
|||
|
|
@ -28,9 +28,13 @@ export default {
|
|||
methods: {
|
||||
renderIconNode () {
|
||||
const {
|
||||
prefixCls, progressDot, stepNumber, status,
|
||||
prefixCls, stepNumber, status,
|
||||
iconPrefix,
|
||||
} = getOptionProps(this)
|
||||
let progressDot = this.progressDot
|
||||
if (progressDot === undefined) {
|
||||
progressDot = this.$scopedSlots.progressDot
|
||||
}
|
||||
const icon = getComponentFromProp(this, 'icon')
|
||||
const title = getComponentFromProp(this, 'title')
|
||||
const description = getComponentFromProp(this, 'description')
|
||||
|
|
@ -48,7 +52,7 @@ export default {
|
|||
if (typeof progressDot === 'function') {
|
||||
iconNode = (
|
||||
<span class={`${prefixCls}-icon`}>
|
||||
{progressDot(iconDot, { index: stepNumber - 1, status, title, description })}
|
||||
{progressDot({ index: stepNumber - 1, status, title, description, prefixCls })}
|
||||
</span>
|
||||
)
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export default {
|
|||
progressDot: PropTypes.oneOfType([
|
||||
PropTypes.bool,
|
||||
PropTypes.func,
|
||||
]).def(false),
|
||||
]),
|
||||
current: PropTypes.number.def(0),
|
||||
},
|
||||
data () {
|
||||
|
|
@ -84,8 +84,12 @@ export default {
|
|||
render () {
|
||||
const {
|
||||
prefixCls, direction,
|
||||
labelPlacement, iconPrefix, status, size, current, progressDot,
|
||||
} = getOptionProps(this)
|
||||
labelPlacement, iconPrefix, status, size, current, $scopedSlots,
|
||||
} = this
|
||||
let progressDot = this.progressDot
|
||||
if (progressDot === undefined) {
|
||||
progressDot = $scopedSlots.progressDot
|
||||
}
|
||||
const { lastStepOffsetWidth, flexSupported } = this
|
||||
const filteredChildren = filterEmpty(this.$slots.default)
|
||||
const lastIndex = filteredChildren.length - 1
|
||||
|
|
@ -112,10 +116,11 @@ export default {
|
|||
stepNumber: `${index + 1}`,
|
||||
prefixCls,
|
||||
iconPrefix,
|
||||
progressDot,
|
||||
progressDot: this.progressDot,
|
||||
...childProps,
|
||||
},
|
||||
on: getEvents(child),
|
||||
scopedSlots: $scopedSlots,
|
||||
}
|
||||
if (!flexSupported && direction !== 'vertical' && index !== lastIndex) {
|
||||
stepProps.props.itemWidth = `${100 / lastIndex}%`
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ const Panel = {
|
|||
},
|
||||
},
|
||||
value: PropTypes.object,
|
||||
defaultValue: PropTypes.object,
|
||||
placeholder: PropTypes.string,
|
||||
format: PropTypes.string,
|
||||
inputReadOnly: PropTypes.bool.def(false),
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ export default {
|
|||
focusOnOpen: PropTypes.bool,
|
||||
// onKeyDown: PropTypes.func,
|
||||
autoFocus: PropTypes.bool,
|
||||
id: PropTypes.string,
|
||||
}, {
|
||||
clearText: 'clear',
|
||||
prefixCls: 'rc-time-picker',
|
||||
|
|
@ -63,6 +64,7 @@ export default {
|
|||
inputReadOnly: false,
|
||||
popupClassName: '',
|
||||
align: {},
|
||||
id: '',
|
||||
allowEmpty: true,
|
||||
showHour: true,
|
||||
showMinute: true,
|
||||
|
|
@ -252,7 +254,7 @@ export default {
|
|||
|
||||
render () {
|
||||
const {
|
||||
prefixCls, placeholder, placement, align,
|
||||
prefixCls, placeholder, placement, align, id,
|
||||
disabled, transitionName, getPopupContainer, name, autoComplete,
|
||||
autoFocus, inputReadOnly, sOpen, sValue, onFocus, onBlur,
|
||||
} = this
|
||||
|
|
@ -288,8 +290,8 @@ export default {
|
|||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
autoFocus={autoFocus}
|
||||
onChange={noop}
|
||||
readOnly={!!inputReadOnly}
|
||||
id={id}
|
||||
/>
|
||||
<span class={`${prefixCls}-icon`}/>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
// based on rc-time-picker 3.3.1
|
||||
export { default } from './TimePicker'
|
||||
|
|
|
|||
Loading…
Reference in New Issue