merge master

pull/9/head
wangxueliang 2018-03-13 10:17:25 +08:00
commit cee7acf327
43 changed files with 1325 additions and 586 deletions

View File

@ -16,9 +16,7 @@ export default {
} else { } else {
this.$listeners[eventName](...args.slice(1)) this.$listeners[eventName](...args.slice(1))
} }
return true
} }
return false
}, },
}, },
} }

View File

@ -52,7 +52,7 @@ const getOptionProps = (instance) => {
const res = {} const res = {}
for (const [k, v] of Object.entries(props)) { for (const [k, v] of Object.entries(props)) {
if (v.default !== undefined) { if (v.default !== undefined) {
res[k] = v res[k] = typeof v.default === 'function' ? v.default() : v.default
} }
} }
return { ...res, ...propsData } return { ...res, ...propsData }
@ -179,6 +179,18 @@ const initDefaultProps = (propTypes, defaultProps) => {
Object.keys(defaultProps).forEach(k => { propTypes[k] = propTypes[k].def(defaultProps[k]) }) Object.keys(defaultProps).forEach(k => { propTypes[k] = propTypes[k].def(defaultProps[k]) })
return propTypes 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 { export {
hasProp, hasProp,
filterProps, filterProps,

View File

@ -70,6 +70,7 @@ export function cloneElement (n, nodeProps, deep) {
domProps = {}, domProps = {},
style: tempStyle = {}, style: tempStyle = {},
class: tempCls = {}, class: tempCls = {},
scopedSlots = {},
} = nodeProps } = nodeProps
if (typeof data.style === 'string') { if (typeof data.style === 'string') {
@ -99,6 +100,7 @@ export function cloneElement (n, nodeProps, deep) {
attrs: { ...data.attrs, ...attrs }, attrs: { ...data.attrs, ...attrs },
class: cls, class: cls,
domProps: { ...data.domProps, ...domProps }, domProps: { ...data.domProps, ...domProps },
scopedSlots: { ...data.scopedSlots, ...scopedSlots },
}) })
if (node.componentOptions) { if (node.componentOptions) {

View File

@ -1,7 +1,7 @@
## API ## API
```html ```html
<Pagination @change="onChange" :total="50" /> <a-pagination @change="onChange" :total="50" />
``` ```
| Property | Description | Type | Default | | Property | Description | Type | Default |
@ -11,7 +11,7 @@
| defaultPageSize | default number of data items per page | number | 10 | | defaultPageSize | default number of data items per page | number | 10 |
| hideOnSinglePage | Whether to hide pager on single page | boolean | false | | hideOnSinglePage | Whether to hide pager on single page | boolean | false |
| itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode | - | | 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'] | | pageSizeOptions | specify the sizeChanger options | string\[] | ['10', '20', '30', '40'] |
| showQuickJumper | determine whether you can jump to pages directly | boolean | false | | showQuickJumper | determine whether you can jump to pages directly | boolean | false |
| showSizeChanger | determine whether `pageSize` can be changed | boolean | false | | showSizeChanger | determine whether `pageSize` can be changed | boolean | false |

View File

@ -1,7 +1,7 @@
## API ## API
```html ```html
<Pagination @change="onChange" :total="50" /> <a-pagination @change="onChange" :total="50" />
``` ```
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
@ -11,7 +11,7 @@
| defaultPageSize | 默认的每页条数 | number | 10 | | defaultPageSize | 默认的每页条数 | number | 10 |
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | | hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false |
| itemRender | 用于自定义页码的结构,可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode | - | | itemRender | 用于自定义页码的结构,可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode | - |
| pageSize | 每页条数 | number | - | | pageSize(.sync) | 每页条数 | number | - |
| pageSizeOptions | 指定每页可以显示多少条 | string\[] | ['10', '20', '30', '40'] | | pageSizeOptions | 指定每页可以显示多少条 | string\[] | ['10', '20', '30', '40'] |
| showQuickJumper | 是否可以快速跳转至某页 | boolean | false | | showQuickJumper | 是否可以快速跳转至某页 | boolean | false |
| showSizeChanger | 是否可以改变 pageSize | boolean | false | | showSizeChanger | 是否可以改变 pageSize | boolean | false |

View File

@ -10,30 +10,19 @@ You can customize the display for Steps with progress dot style.
```html ```html
<template> <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="Finished" description="You can hover on the dot." />
<a-step title="In Progress" 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-step title="Waiting" description="You can hover on the dot." /> <a-step title="Waiting" description="You can hover on the dot." />
</a-steps> </a-steps>
</div>
</template> </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>
``` ```

View File

@ -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 | | 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` | | 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` | | 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` | | status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |

View File

@ -32,6 +32,7 @@ export default {
const stepsProps = { const stepsProps = {
props, props,
on: this.$listeners, on: this.$listeners,
scopedSlots: this.$scopedSlots,
} }
return ( return (
<VcSteps <VcSteps

View File

@ -7,7 +7,7 @@
| --- | --- | --- | --- | | --- | --- | --- | --- |
| current | 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 `status` 属性覆盖状态 | number | 0 | | current | 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 `status` 属性覆盖状态 | number | 0 |
| direction | 指定步骤条方向。目前支持水平(`horizontal`)和竖直(`vertical`)两种方向 | string | horizontal | | 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 | | size | 指定大小,目前支持普通(`default`)和迷你(`small` | string | default |
| status | 指定当前步骤的状态,可选 `wait` `process` `finish` `error` | string | process | | status | 指定当前步骤的状态,可选 `wait` `process` `finish` `error` | string | process |

View File

@ -1,4 +1,5 @@
<script> <script>
// based on rc-tabs 9.2.4
import Icon from '../../icon' import Icon from '../../icon'
import KeyCode from './KeyCode' import KeyCode from './KeyCode'
import TabContent from './TabContent' import TabContent from './TabContent'

View File

@ -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>
&nbsp;&nbsp;&nbsp;&nbsp;
<label>
<input
type='checkbox'
checked={state.showDateInput}
onChange={this.onShowDateInputChange}
/>
showDateInput
</label>
&nbsp;&nbsp;&nbsp;&nbsp;
<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>

View File

@ -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' }}>
&nbsp;&nbsp;&nbsp;&nbsp;
<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>

View File

@ -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>

View File

@ -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>

View File

@ -10,8 +10,8 @@ import CalendarFooter from './calendar/CalendarFooter'
import CalendarMixin from './mixin/CalendarMixin' import CalendarMixin from './mixin/CalendarMixin'
import CommonMixin from './mixin/CommonMixin' import CommonMixin from './mixin/CommonMixin'
import DateInput from './date/DateInput' import DateInput from './date/DateInput'
import enUs from './locale/en_US'
import { getTimeConfig, getTodayTime, syncTime } from './util' import { getTimeConfig, getTodayTime, syncTime } from './util'
function goStartMonth () { function goStartMonth () {
const next = this.sValue.clone() const next = this.sValue.clone()
next.startOf('month') next.startOf('month')
@ -48,12 +48,15 @@ function goDay (direction) {
const Calendar = { const Calendar = {
props: { 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, defaultValue: PropTypes.object,
value: PropTypes.object, value: PropTypes.object,
selectedValue: PropTypes.object, selectedValue: PropTypes.object,
mode: PropTypes.oneOf(['time', 'date', 'month', 'year', 'decade']), mode: PropTypes.oneOf(['time', 'date', 'month', 'year', 'decade']),
locale: PropTypes.object, // locale: PropTypes.object,
showDateInput: PropTypes.bool.def(true), showDateInput: PropTypes.bool.def(true),
showWeekNumber: PropTypes.bool, showWeekNumber: PropTypes.bool,
showToday: PropTypes.bool.def(true), showToday: PropTypes.bool.def(true),
@ -68,8 +71,8 @@ const Calendar = {
// onPanelChange: PropTypes.func, // onPanelChange: PropTypes.func,
disabledDate: PropTypes.func, disabledDate: PropTypes.func,
disabledTime: PropTypes.any, disabledTime: PropTypes.any,
renderFooter: PropTypes.func, renderFooter: PropTypes.func.def(() => null),
renderSidebar: PropTypes.func, renderSidebar: PropTypes.func.def(() => null),
}, },
mixins: [BaseMixin, CommonMixin, CalendarMixin], mixins: [BaseMixin, CommonMixin, CalendarMixin],
@ -168,7 +171,8 @@ const Calendar = {
onDateTableSelect (value) { onDateTableSelect (value) {
const { timePicker, sSelectedValue } = this const { timePicker, sSelectedValue } = this
if (!sSelectedValue && timePicker) { if (!sSelectedValue && timePicker) {
const timePickerDefaultValue = timePicker.props.defaultValue const timePickerProps = getOptionProps(timePicker)
const timePickerDefaultValue = timePickerProps.defaultValue
if (timePickerDefaultValue) { if (timePickerDefaultValue) {
syncTime(timePickerDefaultValue, value) syncTime(timePickerDefaultValue, value)
} }
@ -215,6 +219,7 @@ const Calendar = {
let timePickerEle = null let timePickerEle = null
if (timePicker && showTimePicker) { if (timePicker && showTimePicker) {
console.log(timePicker)
const timePickerOriginProps = getOptionProps(timePicker) const timePickerOriginProps = getOptionProps(timePicker)
const timePickerProps = { const timePickerProps = {
props: { props: {
@ -234,7 +239,7 @@ const Calendar = {
if (timePickerOriginProps.defaultValue !== undefined) { if (timePickerOriginProps.defaultValue !== undefined) {
timePickerProps.props.defaultOpenValue = timePickerOriginProps.defaultValue timePickerProps.props.defaultOpenValue = timePickerOriginProps.defaultValue
} }
console.log(timePickerProps)
timePickerEle = cloneElement(timePicker, timePickerProps) timePickerEle = cloneElement(timePicker, timePickerProps)
} }

View File

@ -7,24 +7,28 @@ import MonthTable from './month/MonthTable'
import CalendarMixin from './mixin/CalendarMixin' import CalendarMixin from './mixin/CalendarMixin'
import CommonMixin from './mixin/CommonMixin' import CommonMixin from './mixin/CommonMixin'
import CalendarHeader from './full-calendar/CalendarHeader' import CalendarHeader from './full-calendar/CalendarHeader'
import enUs from './locale/en_US'
const FullCalendar = { const FullCalendar = {
props: { props: {
locale: PropTypes.object.def(enUs),
visible: PropTypes.bool.def(true),
prefixCls: PropTypes.string.def('rc-calendar'),
defaultType: PropTypes.string.def('date'), defaultType: PropTypes.string.def('date'),
type: PropTypes.string, type: PropTypes.string,
prefixCls: PropTypes.string, // locale: PropTypes.object,
locale: PropTypes.object,
// onTypeChange: PropTypes.func, // onTypeChange: PropTypes.func,
fullscreen: PropTypes.bool.def(false), fullscreen: PropTypes.bool.def(false),
monthCellRender: PropTypes.func, monthCellRender: PropTypes.func,
dateCellRender: PropTypes.func, dateCellRender: PropTypes.func,
showTypeSwitch: PropTypes.bool.def(true), showTypeSwitch: PropTypes.bool.def(true),
Select: PropTypes.func.isRequired, Select: PropTypes.object.isRequired,
headerComponents: PropTypes.array, headerComponents: PropTypes.array,
headerComponent: PropTypes.object, // The whole header component headerComponent: PropTypes.object, // The whole header component
headerRender: PropTypes.func, headerRender: PropTypes.func,
showHeader: PropTypes.bool.def(true), showHeader: PropTypes.bool.def(true),
disabledDate: PropTypes.func, disabledDate: PropTypes.func,
renderFooter: PropTypes.func.def(() => null),
renderSidebar: PropTypes.func.def(() => null),
}, },
mixins: [BaseMixin, CommonMixin, CalendarMixin], mixins: [BaseMixin, CommonMixin, CalendarMixin],
data () { data () {
@ -72,7 +76,7 @@ const FullCalendar = {
headerRender, headerRender,
disabledDate, disabledDate,
} = props } = props
const { sValue: value, sType: type } = this const { sValue: value, sType: type, $listeners } = this
let header = null let header = null
if (showHeader) { if (showHeader) {
@ -88,6 +92,7 @@ const FullCalendar = {
value, value,
}, },
on: { on: {
...$listeners,
typeChange: this.setType, typeChange: this.setType,
valueChange: this.setValue, valueChange: this.setValue,
}, },

View File

@ -6,11 +6,18 @@ import CalendarHeader from './calendar/CalendarHeader'
import CalendarFooter from './calendar/CalendarFooter' import CalendarFooter from './calendar/CalendarFooter'
import CalendarMixin from './mixin/CalendarMixin' import CalendarMixin from './mixin/CalendarMixin'
import CommonMixin from './mixin/CommonMixin' import CommonMixin from './mixin/CommonMixin'
import enUs from './locale/en_US'
const MonthCalendar = { const MonthCalendar = {
props: { props: {
locale: PropTypes.object.def(enUs),
visible: PropTypes.bool.def(true),
prefixCls: PropTypes.string.def('rc-calendar'),
monthCellRender: PropTypes.func, monthCellRender: PropTypes.func,
dateCellRender: 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], mixins: [BaseMixin, CommonMixin, CalendarMixin],
@ -74,25 +81,26 @@ const MonthCalendar = {
render () { render () {
const { mode, sValue: value, $props: props } = this const { mode, sValue: value, $props: props } = this
const { prefixCls, locale, disabledDate, monthCellRender, monthCellContentRender, renderFooter } = props
const children = ( const children = (
<div class={`${props.prefixCls}-month-calendar-content`}> <div class={`${prefixCls}-month-calendar-content`}>
<div class={`${props.prefixCls}-month-header-wrap`}> <div class={`${prefixCls}-month-header-wrap`}>
<CalendarHeader <CalendarHeader
prefixCls={props.prefixCls} prefixCls={prefixCls}
mode={mode} mode={mode}
value={value} value={value}
locale={props.locale} locale={locale}
disabledMonth={props.disabledDate} disabledMonth={disabledDate}
monthCellRender={props.monthCellRender} monthCellRender={monthCellRender}
monthCellContentRender={props.monthCellContentRender} monthCellContentRender={monthCellContentRender}
onMonthSelect={this.onSelect} onMonthSelect={this.onSelect}
onValueChange={this.setValue} onValueChange={this.setValue}
onPanelChange={this.handlePanelChange} onPanelChange={this.handlePanelChange}
/> />
</div> </div>
<CalendarFooter <CalendarFooter
prefixCls={props.prefixCls} prefixCls={prefixCls}
renderFooter={props.renderFooter} renderFooter={renderFooter}
/> />
</div> </div>
) )

View File

@ -78,7 +78,7 @@ const Picker = {
onCalendarKeyDown (event) { onCalendarKeyDown (event) {
if (event.keyCode === KeyCode.ESC) { if (event.keyCode === KeyCode.ESC) {
event.stopPropagation() event.stopPropagation()
this.close(this.focus) this.closeCalendar(this.focus)
} }
}, },
@ -94,7 +94,7 @@ const Picker = {
cause.source === 'keyboard' || cause.source === 'keyboard' ||
(!calendarProps.timePicker && cause.source !== 'dateInput') || (!calendarProps.timePicker && cause.source !== 'dateInput') ||
cause.source === 'todayButton') { cause.source === 'todayButton') {
this.close(this.focus) this.closeCalendar(this.focus)
} }
this.__emit('change', value) this.__emit('change', value)
}, },
@ -107,11 +107,11 @@ const Picker = {
}, },
onCalendarOk () { onCalendarOk () {
this.close(this.focus) this.closeCalendar(this.focus)
}, },
onCalendarClear () { onCalendarClear () {
this.close(this.focus) this.closeCalendar(this.focus)
}, },
onVisibleChange (open) { onVisibleChange (open) {
@ -153,11 +153,11 @@ const Picker = {
} }
}, },
open (callback) { openCalendar (callback) {
this.setOpen(true, callback) this.setOpen(true, callback)
}, },
close (callback) { closeCalendar (callback) {
this.setOpen(false, callback) this.setOpen(false, callback)
}, },
@ -183,20 +183,25 @@ const Picker = {
align, animation, align, animation,
disabled, disabled,
dropdownClassName, dropdownClassName,
transitionName, children, transitionName,
} = props } = props
const state = this.$data const { sValue, sOpen } = this
const children = this.$scopedSlots.default
const childrenState = {
value: sValue,
open: sOpen,
}
return (<Trigger return (<Trigger
popupAlign={align} popupAlign={align}
builtinPlacements={placements} builtinPlacements={placements}
popupPlacement={placement} popupPlacement={placement}
action={(disabled && !state.sOpen) ? [] : ['click']} action={(disabled && !sOpen) ? [] : ['click']}
destroyPopupOnHide destroyPopupOnHide
getPopupContainer={getCalendarContainer} getPopupContainer={getCalendarContainer}
popupStyle={style} popupStyle={style}
popupAnimation={animation} popupAnimation={animation}
popupTransitionName={transitionName} popupTransitionName={transitionName}
popupVisible={state.sOpen} popupVisible={sOpen}
onPopupVisibleChange={this.onVisibleChange} onPopupVisibleChange={this.onVisibleChange}
prefixCls={prefixCls} prefixCls={prefixCls}
popupClassName={dropdownClassName} popupClassName={dropdownClassName}
@ -204,7 +209,7 @@ const Picker = {
<template slot='popup'> <template slot='popup'>
{this.getCalendarElement()} {this.getCalendarElement()}
</template> </template>
{cloneElement(children(state, props), { on: { keydown: this.onKeyDown }})} {cloneElement(children(childrenState, props), { on: { keydown: this.onKeyDown }})}
</Trigger>) </Trigger>)
}, },
} }

View File

@ -1,15 +1,14 @@
<script> <script>
import PropTypes from '@/components/_util/vue-types' import PropTypes from '@/components/_util/vue-types'
import BaseMixin from '@/components/_util/BaseMixin' import BaseMixin from '@/components/_util/BaseMixin'
import { getOptionProps, hasProp } from '@/components/_util/props-util' import { getOptionProps, hasProp, mergeProps } from '@/components/_util/props-util'
import { cloneElement } from '@/components/_util/vnode'
import moment from 'moment' import moment from 'moment'
import classnames from 'classnames'
import CalendarPart from './range-calendar/CalendarPart' import CalendarPart from './range-calendar/CalendarPart'
import TodayButton from './calendar/TodayButton' import TodayButton from './calendar/TodayButton'
import OkButton from './calendar/OkButton' import OkButton from './calendar/OkButton'
import TimePickerButton from './calendar/TimePickerButton' import TimePickerButton from './calendar/TimePickerButton'
import CommonMixin from './mixin/CommonMixin' import CommonMixin from './mixin/CommonMixin'
import enUs from './locale/en_US'
import { syncTime, getTodayTime, isAllowedDate } from './util/' import { syncTime, getTodayTime, isAllowedDate } from './util/'
function noop () {} function noop () {}
@ -61,100 +60,94 @@ function onInputSelect (direction, value) {
if (!value) { if (!value) {
return return
} }
const originalValue = this.state.selectedValue const originalValue = this.sSelectedValue
const selectedValue = originalValue.concat() const selectedValue = originalValue.concat()
const index = direction === 'left' ? 0 : 1 const index = direction === 'left' ? 0 : 1
selectedValue[index] = value selectedValue[index] = value
if (selectedValue[0] && this.compare(selectedValue[0], selectedValue[1]) > 0) { 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) this.fireSelectValueChange(selectedValue)
} }
const RangeCalendar = createReactClass({ const RangeCalendar = {
propTypes: { props: {
prefixCls: PropTypes.string, locale: PropTypes.object.def(enUs),
visible: PropTypes.bool.def(true),
prefixCls: PropTypes.string.def('rc-calendar'),
dateInputPlaceholder: PropTypes.any, dateInputPlaceholder: PropTypes.any,
defaultValue: PropTypes.any, defaultValue: PropTypes.any,
value: PropTypes.any, value: PropTypes.any,
hoverValue: PropTypes.any, hoverValue: PropTypes.any,
mode: PropTypes.arrayOf(PropTypes.oneOf(['date', 'month', 'year', 'decade'])), mode: PropTypes.arrayOf(PropTypes.oneOf(['date', 'month', 'year', 'decade'])),
showDateInput: PropTypes.bool, showDateInput: PropTypes.bool.def(true),
timePicker: PropTypes.any, timePicker: PropTypes.any,
showOk: PropTypes.bool, showOk: PropTypes.bool,
showToday: PropTypes.bool, showToday: PropTypes.bool.def(true),
defaultSelectedValue: PropTypes.array, defaultSelectedValue: PropTypes.array.def([]),
selectedValue: PropTypes.array, selectedValue: PropTypes.array,
onOk: PropTypes.func,
showClear: PropTypes.bool, showClear: PropTypes.bool,
locale: PropTypes.object, showWeekNumber: PropTypes.bool,
onChange: PropTypes.func, // locale: PropTypes.object,
onSelect: PropTypes.func, // onChange: PropTypes.func,
onValueChange: PropTypes.func, // onSelect: PropTypes.func,
onHoverChange: PropTypes.func, // onValueChange: PropTypes.func,
onPanelChange: PropTypes.func, // onHoverChange: PropTypes.func,
// onPanelChange: PropTypes.func,
format: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), format: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
onClear: PropTypes.func, // onClear: PropTypes.func,
type: PropTypes.any, type: PropTypes.any.def('both'),
disabledDate: PropTypes.func, 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 () { data () {
return { const props = this.$props
type: 'both',
defaultSelectedValue: [],
onValueChange: noop,
onHoverChange: noop,
onPanelChange: noop,
disabledTime: noop,
onInputSelect: noop,
showToday: true,
showDateInput: true,
}
},
getInitialState () {
const props = this.props
const selectedValue = props.selectedValue || props.defaultSelectedValue const selectedValue = props.selectedValue || props.defaultSelectedValue
const value = normalizeAnchor(props, 1) const value = normalizeAnchor(props, 1)
return { return {
selectedValue, sSelectedValue: selectedValue,
prevSelectedValue: selectedValue, prevSelectedValue: selectedValue,
firstSelectedValue: null, firstSelectedValue: null,
hoverValue: props.hoverValue || [], sHoverValue: props.hoverValue || [],
value, sValue: value,
showTimePicker: false, showTimePicker: false,
mode: props.mode || ['date', 'date'], sMode: props.mode || ['date', 'date'],
} }
}, },
watch: {
componentWillReceiveProps (nextProps) { value (val) {
const { state } = this
const newState = {} const newState = {}
if ('value' in nextProps) { newState.sValue = normalizeAnchor(val, 0)
newState.value = normalizeAnchor(nextProps, 0)
this.setState(newState) this.setState(newState)
} },
if ('hoverValue' in nextProps && !isArraysEqual(state.hoverValue, nextProps.hoverValue)) { hoverValue (val) {
this.setState({ hoverValue: nextProps.hoverValue }) if (!isArraysEqual(this.sHoverValue, val)) {
} this.setState({ sHoverValue: val })
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 })
} }
}, },
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 () { onDatePanelEnter () {
if (this.hasSelectedValue()) { if (this.hasSelectedValue()) {
this.fireHoverValueChange(this.state.selectedValue.concat()) this.fireHoverValueChange(this.sSelectedValue.concat())
} }
}, },
@ -165,8 +158,7 @@ const RangeCalendar = createReactClass({
}, },
onSelect (value) { onSelect (value) {
const { type } = this.props const { type, sSelectedValue, prevSelectedValue, firstSelectedValue } = this
const { selectedValue, prevSelectedValue, firstSelectedValue } = this.state
let nextSelectedValue let nextSelectedValue
if (type === 'both') { if (type === 'both') {
if (!firstSelectedValue) { if (!firstSelectedValue) {
@ -182,11 +174,10 @@ const RangeCalendar = createReactClass({
} }
} else if (type === 'start') { } else if (type === 'start') {
syncTime(prevSelectedValue[0], value) syncTime(prevSelectedValue[0], value)
const endValue = selectedValue[1] const endValue = sSelectedValue[1]
nextSelectedValue = endValue && this.compare(endValue, value) > 0 nextSelectedValue = endValue && this.compare(endValue, value) > 0 ? [value, endValue] : [value]
? [value, endValue] : [value]
} else { // type === 'end' } else { // type === 'end'
const startValue = selectedValue[0] const startValue = sSelectedValue[0]
if (startValue && this.compare(startValue, value) <= 0) { if (startValue && this.compare(startValue, value) <= 0) {
syncTime(prevSelectedValue[1], value) syncTime(prevSelectedValue[1], value)
nextSelectedValue = [startValue, value] nextSelectedValue = [startValue, value]
@ -201,14 +192,13 @@ const RangeCalendar = createReactClass({
onDayHover (value) { onDayHover (value) {
let hoverValue = [] let hoverValue = []
const { selectedValue, firstSelectedValue } = this.state const { sSelectedValue, firstSelectedValue, type } = this
const { type } = this.props if (type === 'start' && sSelectedValue[1]) {
if (type === 'start' && selectedValue[1]) { hoverValue = this.compare(value, sSelectedValue[1]) < 0
hoverValue = this.compare(value, selectedValue[1]) < 0 ? [value, sSelectedValue[1]] : [value]
? [value, selectedValue[1]] : [value] } else if (type === 'end' && sSelectedValue[0]) {
} else if (type === 'end' && selectedValue[0]) { hoverValue = this.compare(value, sSelectedValue[0]) > 0
hoverValue = this.compare(value, selectedValue[0]) > 0 ? [sSelectedValue[0], value] : []
? [selectedValue[0], value] : []
} else { } else {
if (!firstSelectedValue) { if (!firstSelectedValue) {
return return
@ -220,9 +210,9 @@ const RangeCalendar = createReactClass({
}, },
onToday () { onToday () {
const startValue = getTodayTime(this.state.value[0]) const startValue = getTodayTime(this.sValue[0])
const endValue = startValue.clone().add(1, 'months') const endValue = startValue.clone().add(1, 'months')
this.setState({ value: [startValue, endValue] }) this.setState({ sValue: [startValue, endValue] })
}, },
onOpenTimePicker () { onOpenTimePicker () {
@ -237,9 +227,9 @@ const RangeCalendar = createReactClass({
}, },
onOk () { onOk () {
const { selectedValue } = this.state const { sSelectedValue } = this
if (this.isAllowedDateAndTime(selectedValue)) { if (this.isAllowedDateAndTime(sSelectedValue)) {
this.props.onOk(this.state.selectedValue) this.__emit('ok', sSelectedValue)
} }
}, },
@ -254,76 +244,75 @@ const RangeCalendar = createReactClass({
}, },
onStartValueChange (leftValue) { onStartValueChange (leftValue) {
const value = [...this.state.value] const value = [...this.sValue]
value[0] = leftValue value[0] = leftValue
return this.fireValueChange(value) return this.fireValueChange(value)
}, },
onEndValueChange (rightValue) { onEndValueChange (rightValue) {
const value = [...this.state.value] const value = [...this.sValue]
value[1] = rightValue value[1] = rightValue
return this.fireValueChange(value) return this.fireValueChange(value)
}, },
onStartPanelChange (value, mode) { onStartPanelChange (value, mode) {
const { props, state } = this const { sMode, sValue } = this
const newMode = [mode, state.mode[1]] const newMode = [mode, sMode[1]]
if (!('mode' in props)) { if (!hasProp(this, 'mode')) {
this.setState({ this.setState({
mode: newMode, sMode: newMode,
}) })
} }
const newValue = [value || state.value[0], state.value[1]] const newValue = [value || sValue[0], sValue[1]]
props.onPanelChange(newValue, newMode) this.__emit('panelChange', newValue, newMode)
}, },
onEndPanelChange (value, mode) { onEndPanelChange (value, mode) {
const { props, state } = this const { sMode, sValue } = this
const newMode = [state.mode[0], mode] const newMode = [sMode[0], mode]
if (!('mode' in props)) { if (!hasProp(this, 'mode')) {
this.setState({ this.setState({
mode: newMode, sMode: newMode,
}) })
} }
const newValue = [state.value[0], value || state.value[1]] const newValue = [sValue[0], value || sValue[1]]
props.onPanelChange(newValue, newMode) this.__emit('panelChange', newValue, newMode)
}, },
getStartValue () { getStartValue () {
let value = this.state.value[0] let value = this.sValue[0]
const selectedValue = this.state.selectedValue const selectedValue = this.sSelectedValue
// keep selectedTime when select date // keep selectedTime when select date
if (selectedValue[0] && this.props.timePicker) { if (selectedValue[0] && this.timePicker) {
value = value.clone() value = value.clone()
syncTime(selectedValue[0], value) syncTime(selectedValue[0], value)
} }
if (this.state.showTimePicker && selectedValue[0]) { if (this.showTimePicker && selectedValue[0]) {
return selectedValue[0] return selectedValue[0]
} }
return value return value
}, },
getEndValue () { getEndValue () {
const { value, selectedValue, showTimePicker } = this.state const { sValue, sSelectedValue, showTimePicker } = this
const endValue = value[1] ? value[1].clone() : value[0].clone().add(1, 'month') const endValue = sValue[1] ? sValue[1].clone() : sValue[0].clone().add(1, 'month')
// keep selectedTime when select date // keep selectedTime when select date
if (selectedValue[1] && this.props.timePicker) { if (sSelectedValue[1] && this.timePicker) {
syncTime(selectedValue[1], endValue) syncTime(sSelectedValue[1], endValue)
} }
if (showTimePicker) { if (showTimePicker) {
return selectedValue[1] ? selectedValue[1] : this.getStartValue() return sSelectedValue[1] ? sSelectedValue[1] : this.getStartValue()
} }
return endValue return endValue
}, },
// get disabled hours for second picker // get disabled hours for second picker
getEndDisableTime () { getEndDisableTime () {
const { selectedValue, value } = this.state const { sSelectedValue, sValue, disabledTime } = this
const { disabledTime } = this.props const userSettingDisabledTime = disabledTime(sSelectedValue, 'end') || {}
const userSettingDisabledTime = disabledTime(selectedValue, 'end') || {} const startValue = sSelectedValue && sSelectedValue[0] || sValue[0].clone()
const startValue = selectedValue && selectedValue[0] || value[0].clone()
// if startTime and endTime is same day.. // if startTime and endTime is same day..
// the second time picker will not able to pick time before first time picker // 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 hours = startValue.hour()
const minutes = startValue.minute() const minutes = startValue.minute()
const second = startValue.second() const second = startValue.second()
@ -355,8 +344,8 @@ const RangeCalendar = createReactClass({
}, },
isAllowedDateAndTime (selectedValue) { isAllowedDateAndTime (selectedValue) {
return isAllowedDate(selectedValue[0], this.props.disabledDate, this.disabledStartTime) && return isAllowedDate(selectedValue[0], this.disabledDate, this.disabledStartTime) &&
isAllowedDate(selectedValue[1], this.props.disabledDate, this.disabledEndTime) isAllowedDate(selectedValue[1], this.disabledDate, this.disabledEndTime)
}, },
isMonthYearPanelShow (mode) { isMonthYearPanelShow (mode) {
@ -364,22 +353,23 @@ const RangeCalendar = createReactClass({
}, },
hasSelectedValue () { hasSelectedValue () {
const { selectedValue } = this.state const { sSelectedValue } = this
return !!selectedValue[1] && !!selectedValue[0] return !!sSelectedValue[1] && !!sSelectedValue[0]
}, },
compare (v1, v2) { compare (v1, v2) {
if (this.props.timePicker) { if (this.timePicker) {
return v1.diff(v2) return v1.diff(v2)
} }
return v1.diff(v2, 'days') return v1.diff(v2, 'days')
}, },
fireSelectValueChange (selectedValue, direct) { fireSelectValueChange (selectedValue, direct) {
const { timePicker } = this.props const { timePicker, prevSelectedValue } = this
const { prevSelectedValue } = this.state if (timePicker) {
if (timePicker && timePicker.props.defaultValue) { const timePickerProps = getOptionProps(timePicker)
const timePickerDefaultValue = timePicker.props.defaultValue if (timePickerProps.defaultValue) {
const timePickerDefaultValue = timePickerProps.defaultValue
if (!prevSelectedValue[0] && selectedValue[0]) { if (!prevSelectedValue[0] && selectedValue[0]) {
syncTime(timePickerDefaultValue[0], selectedValue[0]) syncTime(timePickerDefaultValue[0], selectedValue[0])
} }
@ -387,20 +377,21 @@ const RangeCalendar = createReactClass({
syncTime(timePickerDefaultValue[1], selectedValue[1]) syncTime(timePickerDefaultValue[1], selectedValue[1])
} }
} }
}
if (!('selectedValue' in this.props)) { if (!hasProp(this, 'selectedValue')) {
this.setState({ 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 startValue = selectedValue[0] || moment()
const endValue = selectedValue[1] || startValue.clone().add(1, 'months') const endValue = selectedValue[1] || startValue.clone().add(1, 'months')
this.setState({ this.setState({
selectedValue, sSelectedValue: selectedValue,
value: getValueFromSelectedValue([startValue, endValue]), sValue: getValueFromSelectedValue([startValue, endValue]),
}) })
} }
@ -408,86 +399,93 @@ const RangeCalendar = createReactClass({
this.setState({ firstSelectedValue: selectedValue[0] }) this.setState({ firstSelectedValue: selectedValue[0] })
this.fireHoverValueChange(selectedValue.concat()) this.fireHoverValueChange(selectedValue.concat())
} }
this.props.onChange(selectedValue) this.__emit('change', selectedValue)
if (direct || selectedValue[0] && selectedValue[1]) { if (direct || selectedValue[0] && selectedValue[1]) {
this.setState({ this.setState({
prevSelectedValue: selectedValue, prevSelectedValue: selectedValue,
firstSelectedValue: null, firstSelectedValue: null,
}) })
this.fireHoverValueChange([]) this.fireHoverValueChange([])
this.props.onSelect(selectedValue) this.__emit('select', selectedValue)
} }
}, },
fireValueChange (value) { fireValueChange (value) {
const props = this.props if (!hasProp(this, 'value')) {
if (!('value' in props)) {
this.setState({ this.setState({
value, sValue: value,
}) })
} }
props.onValueChange(value) this.__emit('valueChange', value)
}, },
fireHoverValueChange (hoverValue) { fireHoverValueChange (hoverValue) {
const props = this.props if (!hasProp(this, 'hoverValue')) {
if (!('hoverValue' in props)) { this.setState({ sHoverValue: hoverValue })
this.setState({ hoverValue })
} }
props.onHoverChange(hoverValue) this.__emit('hoverChange', hoverValue)
}, },
clear () { clear () {
this.fireSelectValueChange([], true) this.fireSelectValueChange([], true)
this.props.onClear() this.__emit('clear')
}, },
disabledStartTime (time) { disabledStartTime (time) {
return this.props.disabledTime(time, 'start') return this.disabledTime(time, 'start')
}, },
disabledEndTime (time) { disabledEndTime (time) {
return this.props.disabledTime(time, 'end') return this.disabledTime(time, 'end')
}, },
disabledStartMonth (month) { disabledStartMonth (month) {
const { value } = this.state const { sValue } = this
return month.isSameOrAfter(value[1], 'month') return month.isSameOrAfter(sValue[1], 'month')
}, },
disabledEndMonth (month) { disabledEndMonth (month) {
const { value } = this.state const { sValue } = this
return month.isSameOrBefore(value[0], 'month') return month.isSameOrBefore(sValue[0], 'month')
},
}, },
render () { render () {
const { props, state } = this const props = getOptionProps(this)
const { const {
prefixCls, dateInputPlaceholder, prefixCls, dateInputPlaceholder,
timePicker, showOk, locale, showClear, timePicker, showOk, locale, showClear,
showToday, type, showToday, type,
} = props } = props
const { const {
hoverValue, sHoverValue,
selectedValue, sSelectedValue,
mode, sMode,
showTimePicker, showTimePicker,
} = state sValue,
$listeners,
} = this
const className = { const className = {
[props.className]: !!props.className,
[prefixCls]: 1, [prefixCls]: 1,
[`${prefixCls}-hidden`]: !props.visible, [`${prefixCls}-hidden`]: !props.visible,
[`${prefixCls}-range`]: 1, [`${prefixCls}-range`]: 1,
[`${prefixCls}-show-time-picker`]: showTimePicker, [`${prefixCls}-show-time-picker`]: showTimePicker,
[`${prefixCls}-week-number`]: props.showWeekNumber, [`${prefixCls}-week-number`]: props.showWeekNumber,
} }
const classes = classnames(className) const baseProps = {
props,
on: $listeners,
}
const newProps = { const newProps = {
selectedValue: state.selectedValue, props: {
onSelect: this.onSelect, selectedValue: sSelectedValue,
onDayHover: type === 'start' && selectedValue[1] || },
type === 'end' && selectedValue[0] || !!hoverValue.length on: {
? this.onDayHover : undefined, select: this.onSelect,
dayHover: type === 'start' && sSelectedValue[1] ||
type === 'end' && sSelectedValue[0] || !!sHoverValue.length
? this.onDayHover : noop,
},
} }
let placeholder1 let placeholder1
@ -501,11 +499,11 @@ const RangeCalendar = createReactClass({
} }
} }
const showOkButton = showOk === true || showOk !== false && !!timePicker const showOkButton = showOk === true || showOk !== false && !!timePicker
const cls = classnames({ const cls = {
[`${prefixCls}-footer`]: true, [`${prefixCls}-footer`]: true,
[`${prefixCls}-range-bottom`]: true, [`${prefixCls}-range-bottom`]: true,
[`${prefixCls}-footer-show-ok`]: showOkButton, [`${prefixCls}-footer-show-ok`]: showOkButton,
}) }
const startValue = this.getStartValue() const startValue = this.getStartValue()
const endValue = this.getEndValue() const endValue = this.getEndValue()
@ -518,99 +516,125 @@ const RangeCalendar = createReactClass({
const nextMonthOfStart = startValue.clone().add(1, 'months') const nextMonthOfStart = startValue.clone().add(1, 'months')
const isClosestMonths = nextMonthOfStart.year() === endValue.year() && const isClosestMonths = nextMonthOfStart.year() === endValue.year() &&
nextMonthOfStart.month() === endValue.month() 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 ( return (
<div <div
ref={this.saveRoot} ref={this.saveRoot}
className={classes} class={className}
style={props.style}
tabIndex='0' tabIndex='0'
> >
{props.renderSidebar()} {props.renderSidebar()}
<div className={`${prefixCls}-panel`}> <div class={`${prefixCls}-panel`}>
{showClear && selectedValue[0] && selectedValue[1] {showClear && sSelectedValue[0] && sSelectedValue[1]
? <a ? <a
className={`${prefixCls}-clear-btn`} class={`${prefixCls}-clear-btn`}
role='button' role='button'
title={locale.clear} title={locale.clear}
onClick={this.clear} onClick={this.clear}
/> : null} /> : null}
<div <div
className={`${prefixCls}-date-panel`} class={`${prefixCls}-date-panel`}
onMouseLeave={type !== 'both' ? this.onDatePanelLeave : undefined} onMouseleave={type !== 'both' ? this.onDatePanelLeave : noop}
onMouseEnter={type !== 'both' ? this.onDatePanelEnter : undefined} onMouseenter={type !== 'both' ? this.onDatePanelEnter : noop}
> >
<CalendarPart <CalendarPart {...leftPartProps}/>
{...props} <span class={`${prefixCls}-range-middle`}>~</span>
{...newProps} <CalendarPart {...rightPartProps}/>
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
/>
</div> </div>
<div className={cls}> <div class={cls}>
{props.renderFooter()} {props.renderFooter()}
{showToday || props.timePicker || showOkButton ? ( {showToday || props.timePicker || showOkButton ? (
<div className={`${prefixCls}-footer-btn`}> <div class={`${prefixCls}-footer-btn`}>
{showToday ? ( {TodayButtonNode}
<TodayButton {TimePickerButtonNode}
{...props} {OkButtonNode}
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> </div>
) : null} ) : null}
</div> </div>
@ -618,7 +642,7 @@ const RangeCalendar = createReactClass({
</div> </div>
) )
}, },
}) }
export default RangeCalendar export default RangeCalendar
</script> </script>

View File

@ -2,9 +2,9 @@
import PropTypes from '@/components/_util/vue-types' import PropTypes from '@/components/_util/vue-types'
import BaseMixin from '@/components/_util/BaseMixin' import BaseMixin from '@/components/_util/BaseMixin'
import { getOptionProps } from '@/components/_util/props-util' import { getOptionProps } from '@/components/_util/props-util'
import TodayButton from '../calendar/TodayButton' import TodayButton from './TodayButton'
import OkButton from '../calendar/OkButton' import OkButton from './OkButton'
import TimePickerButton from '../calendar/TimePickerButton' import TimePickerButton from './TimePickerButton'
const CalendarFooter = { const CalendarFooter = {
mixins: [BaseMixin], mixins: [BaseMixin],
@ -19,6 +19,11 @@ const CalendarFooter = {
value: PropTypes.object, value: PropTypes.object,
renderFooter: PropTypes.func, renderFooter: PropTypes.func,
defaultValue: PropTypes.object, defaultValue: PropTypes.object,
locale: PropTypes.object,
showToday: PropTypes.bool,
disabledDate: PropTypes.func,
showTimePicker: PropTypes.bool,
okDisabled: PropTypes.bool,
}, },
methods: { methods: {
onSelect (value) { onSelect (value) {
@ -44,16 +49,16 @@ const CalendarFooter = {
}, },
on: $listeners, on: $listeners,
} }
let nowEl let nowEl = null
if (showToday) { if (showToday) {
nowEl = <TodayButton {...btnProps} /> nowEl = <TodayButton {...btnProps} />
} }
delete btnProps.props.value delete btnProps.props.value
let okBtn let okBtn = null
if (showOk === true || showOk !== false && !!timePicker) { if (showOk === true || showOk !== false && !!timePicker) {
okBtn = <OkButton {...btnProps} /> okBtn = <OkButton {...btnProps} />
} }
let timePickerBtn let timePickerBtn = null
if (timePicker) { if (timePicker) {
timePickerBtn = <TimePickerButton {...btnProps} /> timePickerBtn = <TimePickerButton {...btnProps} />
} }
@ -61,12 +66,12 @@ const CalendarFooter = {
let footerBtn let footerBtn
if (nowEl || timePickerBtn || okBtn) { if (nowEl || timePickerBtn || okBtn) {
footerBtn = (<span class={`${prefixCls}-footer-btn`}> footerBtn = (<span class={`${prefixCls}-footer-btn`}>
{[nowEl, timePickerBtn, okBtn]} {nowEl}{timePickerBtn}{okBtn}
</span>) </span>)
} }
const cls = { const cls = {
[`${prefixCls}-footer`]: true, [`${prefixCls}-footer`]: true,
[`${prefixCls}-footer-show-ok`]: okBtn, [`${prefixCls}-footer-show-ok`]: !!okBtn,
} }
footerEl = ( footerEl = (
<div class={cls}> <div class={cls}>

View File

@ -5,7 +5,7 @@ import { getOptionProps } from '@/components/_util/props-util'
import MonthPanel from '../month/MonthPanel' import MonthPanel from '../month/MonthPanel'
import YearPanel from '../year/YearPanel' import YearPanel from '../year/YearPanel'
import DecadePanel from '../decade/DecadePanel' import DecadePanel from '../decade/DecadePanel'
function noop () {}
function goMonth (direction) { function goMonth (direction) {
const next = this.value.clone() const next = this.value.clone()
next.add(direction, 'months') next.add(direction, 'months')
@ -34,6 +34,7 @@ const CalendarHeader = {
enablePrev: PropTypes.any.def(1), enablePrev: PropTypes.any.def(1),
enableNext: PropTypes.any.def(1), enableNext: PropTypes.any.def(1),
disabledMonth: PropTypes.func, disabledMonth: PropTypes.func,
mode: PropTypes.any,
}, },
data () { data () {
this.nextMonth = goMonth.bind(this, 1) this.nextMonth = goMonth.bind(this, 1)
@ -47,7 +48,9 @@ const CalendarHeader = {
methods: { methods: {
onMonthSelect (value) { onMonthSelect (value) {
this.__emit('panelChange', value, 'date') this.__emit('panelChange', value, 'date')
if (this.__emit('monthSelect', value)) { if (this.$listeners.monthSelect) {
this.__emit('monthSelect', value)
} else {
this.__emit('valueChange', value) this.__emit('valueChange', value)
} }
}, },
@ -75,7 +78,7 @@ const CalendarHeader = {
const year = (<a const year = (<a
class={`${prefixCls}-year-select`} class={`${prefixCls}-year-select`}
role='button' role='button'
onClick={showTimePicker ? null : () => this.showYearPanel('date')} onClick={showTimePicker ? noop : () => this.showYearPanel('date')}
title={locale.yearSelect} title={locale.yearSelect}
> >
{value.format(locale.yearFormat)} {value.format(locale.yearFormat)}
@ -83,7 +86,7 @@ const CalendarHeader = {
const month = (<a const month = (<a
class={`${prefixCls}-month-select`} class={`${prefixCls}-month-select`}
role='button' role='button'
onClick={showTimePicker ? null : this.showMonthPanel} onClick={showTimePicker ? noop : this.showMonthPanel}
title={locale.monthSelect} title={locale.monthSelect}
> >
{locale.monthFormat ? value.format(locale.monthFormat) : localeData.monthsShort(value)} {locale.monthFormat ? value.format(locale.monthFormat) : localeData.monthsShort(value)}

View File

@ -2,21 +2,19 @@
function noop () {} function noop () {}
export default { export default {
functional: true, functional: true,
render: function (createElement, context) { render (createElement, context) {
const { data, listeners = {}} = context const { props, listeners = {}} = context
const { prefixCls, locale, okDisabled } = data const { prefixCls, locale, okDisabled } = props
const { ok = noop } = listeners const { ok = noop } = listeners
let className = `${prefixCls}-ok-btn` let className = `${prefixCls}-ok-btn`
if (okDisabled) { if (okDisabled) {
className += ` ${prefixCls}-ok-btn-disabled` className += ` ${prefixCls}-ok-btn-disabled`
} }
return (<a return (
class={className} <a class={className} role='button' onClick={okDisabled ? noop : ok}>
role='button'
onClick={okDisabled ? noop : ok}
>
{locale.ok} {locale.ok}
</a>) </a>
)
}, },
} }

View File

@ -2,11 +2,11 @@
function noop () {} function noop () {}
export default { export default {
functional: true, functional: true,
render: function (createElement, context) { render (h, context) {
const { data, listeners = {}} = context const { props, listeners = {}} = context
const { const {
prefixCls, locale, showTimePicker, prefixCls, locale, showTimePicker,
timePickerDisabled } = data timePickerDisabled } = props
const { closeTimePicker = noop, openTimePicker = noop } = listeners const { closeTimePicker = noop, openTimePicker = noop } = listeners
const className = { const className = {
[`${prefixCls}-time-picker-btn`]: true, [`${prefixCls}-time-picker-btn`]: true,
@ -16,13 +16,11 @@ export default {
if (!timePickerDisabled) { if (!timePickerDisabled) {
onClick = showTimePicker ? closeTimePicker : openTimePicker onClick = showTimePicker ? closeTimePicker : openTimePicker
} }
return (<a return (
class={className} <a class={className} role='button' onClick={onClick}>
role='button'
onClick={onClick}
>
{showTimePicker ? locale.dateSelect : locale.timeSelect} {showTimePicker ? locale.dateSelect : locale.timeSelect}
</a>) </a>
)
}, },
} }

View File

@ -4,7 +4,7 @@ function noop () {}
export default { export default {
functional: true, functional: true,
render (createElement, context) { render (createElement, context) {
const { data, listeners = {}} = context const { props, listeners = {}} = context
const { const {
prefixCls, prefixCls,
locale, locale,
@ -14,7 +14,7 @@ export default {
disabledDate, disabledDate,
// onToday, // onToday,
text, text,
} = data } = props
const { today = noop } = listeners const { today = noop } = listeners
const localeNow = (!text && timePicker ? locale.now : text) || locale.today const localeNow = (!text && timePicker ? locale.now : text) || locale.today
const disabledToday = const disabledToday =

View File

@ -23,7 +23,7 @@ const DateInput = {
data () { data () {
const selectedValue = this.selectedValue const selectedValue = this.selectedValue
return { return {
str: selectedValue && selectedValue.format(this.props.format) || '', str: selectedValue && selectedValue.format(this.format) || '',
invalid: false, invalid: false,
} }
}, },
@ -45,7 +45,6 @@ const DateInput = {
}, },
methods: { methods: {
updateState () { updateState () {
console.log('关注下')
this.cachedSelectionStart = this.$refs.dateInputInstance.selectionStart this.cachedSelectionStart = this.$refs.dateInputInstance.selectionStart
this.cachedSelectionEnd = this.$refs.dateInputInstance.selectionEnd this.cachedSelectionEnd = this.$refs.dateInputInstance.selectionEnd
// when popup show, click body will call this, bug! // when popup show, click body will call this, bug!
@ -131,7 +130,7 @@ const DateInput = {
value={str} value={str}
disabled={disabled} disabled={disabled}
placeholder={placeholder} placeholder={placeholder}
onChange={this.onInputChange} onInput={this.onInputChange}
/> />
</div> </div>
{showClear ? <a {showClear ? <a

View File

@ -4,7 +4,7 @@ import { getOptionProps } from '@/components/_util/props-util'
import cx from 'classnames' import cx from 'classnames'
import DateConstants from './DateConstants' import DateConstants from './DateConstants'
import { getTitleString, getTodayTime } from '../util/' import { getTitleString, getTodayTime } from '../util/'
function noop () {}
function isSameDay (one, two) { function isSameDay (one, two) {
return one && two && one.isSame(two, 'day') return one && two && one.isSame(two, 'day')
} }
@ -35,7 +35,7 @@ const DateTBody = {
dateRender: PropTypes.func, dateRender: PropTypes.func,
disabledDate: PropTypes.func, disabledDate: PropTypes.func,
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
selectedValue: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]), selectedValue: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)]),
value: PropTypes.object, value: PropTypes.object,
hoverValue: PropTypes.any.def([]), hoverValue: PropTypes.any.def([]),
showWeekNumber: PropTypes.bool, showWeekNumber: PropTypes.bool,
@ -48,6 +48,8 @@ const DateTBody = {
showWeekNumber, dateRender, disabledDate, showWeekNumber, dateRender, disabledDate,
hoverValue, hoverValue,
} = props } = props
const { $listeners = {}} = this
const { select = noop, dayHover = noop } = $listeners
let iIndex let iIndex
let jIndex let jIndex
let current let current
@ -97,7 +99,7 @@ const DateTBody = {
if (showWeekNumber) { if (showWeekNumber) {
weekNumberCell = ( weekNumberCell = (
<td <td
key={dateTable[passed].week()} key={`week-${dateTable[passed].week()}`}
role='gridcell' role='gridcell'
class={weekNumberCellClass} class={weekNumberCellClass}
> >
@ -208,9 +210,8 @@ const DateTBody = {
dateCells.push( dateCells.push(
<td <td
key={passed} key={passed}
onClick={disabled ? undefined : props.onSelect.bind(null, current)} onClick={disabled ? noop : select.bind(null, current)}
onMouseenter={disabled onMouseenter={disabled ? noop : dayHover.bind(null, current)}
? undefined : props.onDayHover && props.onDayHover.bind(null, current) || undefined}
role='gridcell' role='gridcell'
title={getTitleString(current)} class={cls} title={getTitleString(current)} class={cls}
> >

View File

@ -5,7 +5,7 @@ import moment from 'moment'
export default { export default {
functional: true, functional: true,
render (createElement, context) { render (createElement, context) {
const { data: props } = context const { props } = context
const value = props.value const value = props.value
const localeData = value.localeData() const localeData = value.localeData()
const prefixCls = props.prefixCls const prefixCls = props.prefixCls

View File

@ -5,15 +5,15 @@ import DateTBody from './DateTBody'
export default { export default {
functional: true, functional: true,
render (createElement, context) { render (createElement, context) {
const { data, listeners = {}} = context const { props, listeners = {}} = context
const prefixCls = data.prefixCls const prefixCls = props.prefixCls
const props = { const bodyProps = {
props: data, props,
on: listeners, on: listeners,
} }
return (<table class={`${prefixCls}-table`} cellSpacing='0' role='grid'> return (<table class={`${prefixCls}-table`} cellSpacing='0' role='grid'>
<DateTHead {...props}/> <DateTHead {...bodyProps}/>
<DateTBody {...props}/> <DateTBody {...bodyProps}/>
</table>) </table>)
}, },
} }

View File

@ -29,10 +29,9 @@ export default {
rootPrefixCls: PropTypes.string, rootPrefixCls: PropTypes.string,
}, },
data () { data () {
this.prefixCls = `${this.rootPrefixCls}-decade-panel`
this.nextCentury = goYear.bind(this, 100) this.nextCentury = goYear.bind(this, 100)
this.previousCentury = goYear.bind(this, -100) this.previousCentury = goYear.bind(this, -100)
this.state = { return {
sValue: this.value || this.defaultValue, sValue: this.value || this.defaultValue,
} }
}, },
@ -46,7 +45,7 @@ export default {
const endYear = startYear + 99 const endYear = startYear + 99
const decades = [] const decades = []
let index = 0 let index = 0
const prefixCls = this.prefixCls const prefixCls = `${this.rootPrefixCls}-decade-panel`
for (let rowIndex = 0; rowIndex < ROW; rowIndex++) { for (let rowIndex = 0; rowIndex < ROW; rowIndex++) {
decades[rowIndex] = [] decades[rowIndex] = []
@ -99,7 +98,7 @@ export default {
}) })
return ( return (
<div class={this.prefixCls}> <div class={prefixCls}>
<div class={`${prefixCls}-header`}> <div class={`${prefixCls}-header`}>
<a <a
class={`${prefixCls}-prev-century-btn`} class={`${prefixCls}-prev-century-btn`}

View File

@ -12,7 +12,7 @@ const CalendarHeader = {
yearSelectTotal: PropTypes.number.def(20), yearSelectTotal: PropTypes.number.def(20),
// onValueChange: PropTypes.func, // onValueChange: PropTypes.func,
// onTypeChange: PropTypes.func, // onTypeChange: PropTypes.func,
Select: PropTypes.func, Select: PropTypes.object,
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
type: PropTypes.string, type: PropTypes.string,
showTypeSwitch: PropTypes.bool, showTypeSwitch: PropTypes.bool,

View File

@ -3,7 +3,7 @@ import BaseMixin from '@/components/_util/BaseMixin'
import { hasProp } from '@/components/_util/props-util' import { hasProp } from '@/components/_util/props-util'
import moment from 'moment' import moment from 'moment'
import { isAllowedDate, getTodayTime } from '../util/index' import { isAllowedDate, getTodayTime } from '../util/index'
function noop () {}
function getNow () { function getNow () {
return moment() return moment()
} }
@ -56,7 +56,7 @@ const CalendarMixin = {
}, },
renderRoot (newProps) { renderRoot (newProps) {
const props = this.props const props = this.$props
const prefixCls = props.prefixCls const prefixCls = props.prefixCls
const className = { const className = {
@ -71,7 +71,7 @@ const CalendarMixin = {
ref='rootInstance' ref='rootInstance'
class={className} class={className}
tabIndex='0' tabIndex='0'
onKeydown={this.onKeyDown} onKeydown={this.onKeyDown || noop}
> >
{newProps.children} {newProps.children}
</div> </div>

View File

@ -1,16 +1,4 @@
import PropTypes from '@/components/_util/vue-types'
import enUs from '../locale/en_US'
export default { 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 () { // getDefaultProps () {
// return { // return {
// locale: enUs, // locale: enUs,

View File

@ -17,6 +17,12 @@ function noop () {
const MonthPanel = { const MonthPanel = {
mixins: [BaseMixin], mixins: [BaseMixin],
props: { props: {
value: PropTypes.any,
defaultValue: PropTypes.any,
cellRender: PropTypes.any,
contentRender: PropTypes.any,
locale: PropTypes.any,
rootPrefixCls: PropTypes.string,
// onChange: PropTypes.func, // onChange: PropTypes.func,
disabledDate: PropTypes.func, disabledDate: PropTypes.func,
// onSelect: PropTypes.func, // onSelect: PropTypes.func,

View File

@ -22,6 +22,9 @@ const MonthTable = {
cellRender: PropTypes.func, cellRender: PropTypes.func,
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
value: PropTypes.object, value: PropTypes.object,
locale: PropTypes.any,
contentRender: PropTypes.any,
disabledDate: PropTypes.func,
}, },
data () { data () {
return { return {
@ -71,14 +74,14 @@ const MonthTable = {
const today = getTodayTime(value) const today = getTodayTime(value)
const months = this.months() const months = this.months()
const currentMonth = value.month() const currentMonth = value.month()
const { prefixCls, locale, contentRender, cellRender } = props const { prefixCls, locale, contentRender, cellRender, disabledDate } = props
const monthsEls = months.map((month, index) => { const monthsEls = months.map((month, index) => {
const tds = month.map(monthData => { const tds = month.map(monthData => {
let disabled = false let disabled = false
if (props.disabledDate) { if (disabledDate) {
const testValue = value.clone() const testValue = value.clone()
testValue.month(monthData.value) testValue.month(monthData.value)
disabled = props.disabledDate(testValue) disabled = disabledDate(testValue)
} }
const classNameMap = { const classNameMap = {
[`${prefixCls}-cell`]: 1, [`${prefixCls}-cell`]: 1,

View File

@ -19,6 +19,7 @@ const CalendarPart = {
locale: PropTypes.any, locale: PropTypes.any,
showDateInput: PropTypes.bool, showDateInput: PropTypes.bool,
showTimePicker: PropTypes.bool, showTimePicker: PropTypes.bool,
showWeekNumber: PropTypes.bool,
format: PropTypes.any, format: PropTypes.any,
placeholder: PropTypes.any, placeholder: PropTypes.any,
disabledDate: PropTypes.any, disabledDate: PropTypes.any,
@ -62,7 +63,6 @@ const CalendarPart = {
} }
const index = direction === 'left' ? 0 : 1 const index = direction === 'left' ? 0 : 1
const timePickerProps = getOptionProps(timePicker) const timePickerProps = getOptionProps(timePicker)
console.log('timePickerProps', timePickerProps)
const timePickerEle = shouldShowTimePicker && const timePickerEle = shouldShowTimePicker &&
cloneElement(timePicker, { cloneElement(timePicker, {
props: { props: {

View File

@ -25,6 +25,7 @@ export default {
rootPrefixCls: PropTypes.string, rootPrefixCls: PropTypes.string,
value: PropTypes.object, value: PropTypes.object,
defaultValue: PropTypes.object, defaultValue: PropTypes.object,
locale: PropTypes.object,
}, },
data () { data () {
this.nextDecade = goYear.bind(this, 10) this.nextDecade = goYear.bind(this, 10)
@ -59,9 +60,8 @@ export default {
}, },
render () { render () {
const props = this.$props const { sValue: value, locale, $listeners = {}} = this
const value = this.sValue const decadePanelShow = $listeners.decadePanelShow || noop
const locale = props.locale
const years = this.years() const years = this.years()
const currentYear = value.year() const currentYear = value.year()
const startYear = parseInt(currentYear / 10, 10) * 10 const startYear = parseInt(currentYear / 10, 10) * 10
@ -103,7 +103,7 @@ export default {
}) })
return ( return (
<div class={this.prefixCls}> <div class={prefixCls}>
<div> <div>
<div class={`${prefixCls}-header`}> <div class={`${prefixCls}-header`}>
<a <a
@ -115,7 +115,7 @@ export default {
<a <a
class={`${prefixCls}-decade-select`} class={`${prefixCls}-decade-select`}
role='button' role='button'
onClick={props.onDecadePanelShow} onClick={decadePanelShow}
title={locale.decadeSelect} title={locale.decadeSelect}
> >
<span class={`${prefixCls}-decade-select-content`}> <span class={`${prefixCls}-decade-select-content`}>

View File

@ -112,7 +112,7 @@ export default {
<input <input
type='text' type='text'
value={this.goInputText} value={this.goInputText}
onChange={this.handleChange} onInput={this.handleChange}
onKeyup={this.go} onKeyup={this.go}
/> />
{locale.page} {locale.page}

View File

@ -301,7 +301,7 @@ export default {
value={this.stateCurrentInputValue} value={this.stateCurrentInputValue}
onKeydown={this.handleKeyDown} onKeydown={this.handleKeyDown}
onKeyup={this.handleKeyUp} onKeyup={this.handleKeyUp}
onChange={this.handleKeyUp} onInput={this.handleKeyUp}
size='3' size='3'
/> />
<span class={`${prefixCls}-slash`}></span> <span class={`${prefixCls}-slash`}></span>

View File

@ -28,9 +28,13 @@ export default {
methods: { methods: {
renderIconNode () { renderIconNode () {
const { const {
prefixCls, progressDot, stepNumber, status, prefixCls, stepNumber, status,
iconPrefix, iconPrefix,
} = getOptionProps(this) } = getOptionProps(this)
let progressDot = this.progressDot
if (progressDot === undefined) {
progressDot = this.$scopedSlots.progressDot
}
const icon = getComponentFromProp(this, 'icon') const icon = getComponentFromProp(this, 'icon')
const title = getComponentFromProp(this, 'title') const title = getComponentFromProp(this, 'title')
const description = getComponentFromProp(this, 'description') const description = getComponentFromProp(this, 'description')
@ -48,7 +52,7 @@ export default {
if (typeof progressDot === 'function') { if (typeof progressDot === 'function') {
iconNode = ( iconNode = (
<span class={`${prefixCls}-icon`}> <span class={`${prefixCls}-icon`}>
{progressDot(iconDot, { index: stepNumber - 1, status, title, description })} {progressDot({ index: stepNumber - 1, status, title, description, prefixCls })}
</span> </span>
) )
} else { } else {

View File

@ -24,7 +24,7 @@ export default {
progressDot: PropTypes.oneOfType([ progressDot: PropTypes.oneOfType([
PropTypes.bool, PropTypes.bool,
PropTypes.func, PropTypes.func,
]).def(false), ]),
current: PropTypes.number.def(0), current: PropTypes.number.def(0),
}, },
data () { data () {
@ -84,8 +84,12 @@ export default {
render () { render () {
const { const {
prefixCls, direction, prefixCls, direction,
labelPlacement, iconPrefix, status, size, current, progressDot, labelPlacement, iconPrefix, status, size, current, $scopedSlots,
} = getOptionProps(this) } = this
let progressDot = this.progressDot
if (progressDot === undefined) {
progressDot = $scopedSlots.progressDot
}
const { lastStepOffsetWidth, flexSupported } = this const { lastStepOffsetWidth, flexSupported } = this
const filteredChildren = filterEmpty(this.$slots.default) const filteredChildren = filterEmpty(this.$slots.default)
const lastIndex = filteredChildren.length - 1 const lastIndex = filteredChildren.length - 1
@ -112,10 +116,11 @@ export default {
stepNumber: `${index + 1}`, stepNumber: `${index + 1}`,
prefixCls, prefixCls,
iconPrefix, iconPrefix,
progressDot, progressDot: this.progressDot,
...childProps, ...childProps,
}, },
on: getEvents(child), on: getEvents(child),
scopedSlots: $scopedSlots,
} }
if (!flexSupported && direction !== 'vertical' && index !== lastIndex) { if (!flexSupported && direction !== 'vertical' && index !== lastIndex) {
stepProps.props.itemWidth = `${100 / lastIndex}%` stepProps.props.itemWidth = `${100 / lastIndex}%`

View File

@ -29,6 +29,7 @@ const Panel = {
}, },
}, },
value: PropTypes.object, value: PropTypes.object,
defaultValue: PropTypes.object,
placeholder: PropTypes.string, placeholder: PropTypes.string,
format: PropTypes.string, format: PropTypes.string,
inputReadOnly: PropTypes.bool.def(false), inputReadOnly: PropTypes.bool.def(false),

View File

@ -56,6 +56,7 @@ export default {
focusOnOpen: PropTypes.bool, focusOnOpen: PropTypes.bool,
// onKeyDown: PropTypes.func, // onKeyDown: PropTypes.func,
autoFocus: PropTypes.bool, autoFocus: PropTypes.bool,
id: PropTypes.string,
}, { }, {
clearText: 'clear', clearText: 'clear',
prefixCls: 'rc-time-picker', prefixCls: 'rc-time-picker',
@ -63,6 +64,7 @@ export default {
inputReadOnly: false, inputReadOnly: false,
popupClassName: '', popupClassName: '',
align: {}, align: {},
id: '',
allowEmpty: true, allowEmpty: true,
showHour: true, showHour: true,
showMinute: true, showMinute: true,
@ -252,7 +254,7 @@ export default {
render () { render () {
const { const {
prefixCls, placeholder, placement, align, prefixCls, placeholder, placement, align, id,
disabled, transitionName, getPopupContainer, name, autoComplete, disabled, transitionName, getPopupContainer, name, autoComplete,
autoFocus, inputReadOnly, sOpen, sValue, onFocus, onBlur, autoFocus, inputReadOnly, sOpen, sValue, onFocus, onBlur,
} = this } = this
@ -288,8 +290,8 @@ export default {
onFocus={onFocus} onFocus={onFocus}
onBlur={onBlur} onBlur={onBlur}
autoFocus={autoFocus} autoFocus={autoFocus}
onChange={noop}
readOnly={!!inputReadOnly} readOnly={!!inputReadOnly}
id={id}
/> />
<span class={`${prefixCls}-icon`}/> <span class={`${prefixCls}-icon`}/>
</span> </span>

View File

@ -1 +1,2 @@
// based on rc-time-picker 3.3.1
export { default } from './TimePicker' export { default } from './TimePicker'