github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add time-picker demo

pull/165/head
tjz 2018-03-08 23:02:04 +08:00
parent 116d2457bb
commit 18f4a62129
57 changed files with 1347 additions and 960 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/index.js
View File

@ -89,6 +89,7 @@ export { default as Cascader } from './cascader'
export { default as BackTop } from './back-top'
export { default as Modal } from './modal'
export { default as Alert } from './alert'
export { default as TimePicker } from './time-picker'
const api = {
notification,

1
components/style.js
View File

@ -29,3 +29,4 @@ import './cascader/style'
import './back-top/style'
import './modal/style'
import './alert/style'
import './time-picker/style'

28
components/time-picker/demo/12hours.md Normal file
View File

@ -0,0 +1,28 @@
<cn>
#### 12 小时制
12 小时制的时间选择器，默认的 format 为 `h:mm:ss a`。
</cn>
<us>
#### 12 hours
TimePicker of 12 hours format, with default format `h:mm:ss a`.
</us>
```html
<template>
<div>
<a-time-picker use12Hours @change="onChange" />
<a-time-picker use12Hours format="h:mm:ss A" @change="onChange" />
<a-time-picker use12Hours format="h:mm a" @change="onChange" />
</div>
</template>
<script>
export default {
methods: {
onChange(time, timeString){
console.log(time, timeString);
}
},
}
</script>
```

43
components/time-picker/demo/addon.md Normal file
View File

@ -0,0 +1,43 @@
<cn>
#### 附加内容
在 TimePicker 选择框底部显示自定义的内容。
</cn>
<us>
#### Addon
Render addon contents to timepicker panel's bottom.
</us>
```html
<template>
<div>
<a-time-picker @openChange="handleOpenChange" :open="open">
<a-button slot="addon" size="small" type="primary" @click="handleClose">Ok</a-button>
</a-time-picker>
<a-time-picker :open.sync="open2">
<a-button slot="addon" size="small" type="primary" @click="handleClose">Ok</a-button>
</a-time-picker>
</div>
</template>
<script>
import moment from 'moment';
export default {
data() {
return {
open: false,
open2: false,
}
},
methods: {
handleOpenChange(open){
console.log('open', open);
this.open = open
},
handleClose(){
this.open = false
this.open2 = false
}
},
}
</script>
```

26
components/time-picker/demo/basic.md Normal file
View File

@ -0,0 +1,26 @@
<cn>
#### 基本
点击 TimePicker，然后可以在浮层中选择或者输入某一时间。
</cn>
<us>
#### Basic
Click `TimePicker`, and then we could select or input a time in panel.
</us>
```html
<template>
<a-time-picker @change="onChange" :defaultOpenValue="moment('00:00:00', 'HH:mm:ss')" />
</template>
<script>
import moment from 'moment';
export default {
methods: {
moment,
onChange(time, timeString){
console.log(time, timeString);
}
},
}
</script>
```

23
components/time-picker/demo/disabled.md Normal file
View File

@ -0,0 +1,23 @@
<cn>
#### 禁用
禁用时间选择。
</cn>
<us>
#### disabled
A disabled state of the `TimePicker`.
</us>
```html
<template>
<a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" disabled />
</template>
<script>
import moment from 'moment';
export default {
methods: {
moment,
}
}
</script>
```

23
components/time-picker/demo/hide-column.md Normal file
View File

@ -0,0 +1,23 @@
<cn>
#### 选择时分
TimePicker 浮层中的列会随着 `format` 变化，当略去 `format` 中的某部分时，浮层中对应的列也会消失。
</cn>
<us>
#### Hour and minute
While part of `format` is omitted, the corresponding column in panel will disappear, too.
</us>
```html
<template>
<a-time-picker :defaultValue="moment('12:08', 'HH:mm')" format="HH:mm" />
</template>
<script>
import moment from 'moment';
export default {
methods: {
moment,
},
}
</script>
```

15
components/time-picker/demo/interval-options.md Normal file
View File

@ -0,0 +1,15 @@
<cn>
#### 步长选项
可以使用 `hourStep` `minuteStep` `secondStep` 按步长展示可选的时分秒。
</cn>
<us>
#### interval option
Show stepped options by `hourStep` `minuteStep` `secondStep`.
</us>
```html
<template>
<a-time-picker :minuteStep="15" :secondStep="10" />
</template>
```

27
components/time-picker/demo/size.md Normal file
View File

@ -0,0 +1,27 @@
<cn>
#### 三种大小
三种大小的输入框，大的用在表单中，中的为默认。
</cn>
<us>
#### Three Sizes
The input box comes in three sizes. large is used in the form, while the medium size is the default.
</us>
```html
<template>
<div>
<a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" size="large" />
<a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" />
<a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" size="small" />
</div>
</template>
<script>
import moment from 'moment';
export default {
methods: {
moment,
},
}
</script>
```

43
components/time-picker/demo/value.md Normal file
View File

@ -0,0 +1,43 @@
<cn>
#### 受控组件
value 和 onChange 需要配合使用。也可以直接使用v-model。
</cn>
<us>
#### Under Control
`value` and `@change` should be used together or use v-model.
</us>
```html
<template>
<div>
<p>use value and @change</p>
<a-time-picker @change="onChange" :value="value" />
<br/>
<br/>
<p>v-model</p>
<a-time-picker v-model="value" />
<br/>
<br/>
<p>Do not change</p>
<a-time-picker :value="value2" />
</div>
</template>
<script>
import moment from 'moment';
export default {
data(){
return {
value: null,
value2: moment(),
}
},
methods: {
onChange(time,){
console.log(time);
this.value = time;
}
},
}
</script>
```

249
components/time-picker/index.vue
View File

@ -1,11 +1,13 @@
<script>
import * as moment from 'moment';
import RcTimePicker from 'rc-time-picker/lib/TimePicker';
import classNames from 'classnames';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import defaultLocale from './locale/en_US';
import * as moment from 'moment'
import VcTimePicker from '../vc-time-picker'
import LocaleReceiver from '../locale-provider/LocaleReceiver'
import defaultLocale from './locale/en_US'
import BaseMixin from '../_util/BaseMixin'
import PropTypes from '../_util/vue-types'
import { initDefaultProps, hasProp, getOptionProps, getComponentFromProp } from '../_util/props-util'
export function generateShowHourMinuteSecond(format: string) {
export function generateShowHourMinuteSecond (format) {
// Ref: http://momentjs.com/docs/#/parsing/string-format/
return {
showHour: (
@ -15,45 +17,40 @@ export function generateShowHourMinuteSecond(format: string) {
),
showMinute: format.indexOf('m') > -1,
showSecond: format.indexOf('s') > -1,
};
}
}
export interface TimePickerProps {
className?: string;
size?: 'large' | 'default' | 'small';
value?: moment.Moment;
defaultValue?: moment.Moment | moment.Moment[];
open?: boolean;
format?: string;
onChange?: (time: moment.Moment, timeString: string) => void;
onOpenChange?: (open: boolean) => void;
disabled?: boolean;
placeholder?: string;
prefixCls?: string;
hideDisabledOptions?: boolean;
disabledHours?: () => number[];
disabledMinutes?: (selectedHour: number) => number[];
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
style?: React.CSSProperties;
getPopupContainer?: (triggerNode: Element) => HTMLElement;
addon?: Function;
use12Hours?: boolean;
focusOnOpen?: boolean;
hourStep?: number;
minuteStep?: number;
secondStep?: number;
allowEmpty?: boolean;
clearText?: string;
defaultOpenValue?: moment.Moment;
popupClassName?: string;
export const TimePickerProps = {
size: PropTypes.oneOf(['large', 'default', 'small']),
value: PropTypes.object,
defaultValue: PropTypes.object,
open: PropTypes.bool,
format: PropTypes.string,
disabled: PropTypes.bool,
placeholder: PropTypes.string,
prefixCls: PropTypes.string,
hideDisabledOptions: PropTypes.bool,
disabledHours: PropTypes.func,
disabledMinutes: PropTypes.func,
disabledSeconds: PropTypes.func,
getPopupContainer: PropTypes.func,
use12Hours: PropTypes.bool,
focusOnOpen: PropTypes.bool,
hourStep: PropTypes.number,
minuteStep: PropTypes.number,
secondStep: PropTypes.number,
allowEmpty: PropTypes.bool,
clearText: PropTypes.string,
defaultOpenValue: PropTypes.object,
popupClassName: PropTypes.string,
align: PropTypes.object,
placement: PropTypes.any,
transitionName: PropTypes.string,
}
export interface TimePickerLocale {
placeholder: string;
}
export default class TimePicker extends React.Component<TimePickerProps, any> {
static defaultProps = {
export default {
mixins: [BaseMixin],
props: initDefaultProps(TimePickerProps, {
prefixCls: 'ant-time-picker',
align: {
offset: [0, -2],
@ -66,114 +63,104 @@ export default class TimePicker extends React.Component<TimePickerProps, any> {
placement: 'bottomLeft',
transitionName: 'slide-up',
focusOnOpen: true,
};
private timePickerRef: typeof RcTimePicker;
constructor(props: TimePickerProps) {
super(props);
const value = props.value || props.defaultValue;
}),
model: {
prop: 'value',
event: 'change',
},
data () {
const value = this.value || this.defaultValue
if (value && !moment.isMoment(value)) {
throw new Error(
'The value/defaultValue of TimePicker must be a moment object after `antd@2.0`, ' +
'see: https://u.ant.design/time-picker-value',
);
'The value/defaultValue of TimePicker must be a moment object, ',
)
}
this.state = {
value,
};
return {
sValue: value,
}
},
watch: {
value (val) {
this.setState({ sValue: val })
},
},
methods: {
handleChange (value) {
if (!hasProp(this, 'value')) {
this.setState({ sValue: value })
}
const { format = 'HH:mm:ss' } = this
this.$emit('change', value, (value && value.format(format)) || '')
},
componentWillReceiveProps(nextProps: TimePickerProps) {
if ('value' in nextProps) {
this.setState({ value: nextProps.value });
}
}
handleOpenClose ({ open }) {
this.$emit('openChange', open)
this.$emit('update:open', open)
},
handleChange = (value: moment.Moment) => {
if (!('value' in this.props)) {
this.setState({ value });
}
const { onChange, format = 'HH:mm:ss' } = this.props;
if (onChange) {
onChange(value, (value && value.format(format)) || '');
}
}
focus () {
this.$refs.timePicker.focus()
},
handleOpenClose = ({ open }: { open: boolean }) => {
const { onOpenChange } = this.props;
if (onOpenChange) {
onOpenChange(open);
}
}
blur () {
this.$refs.timePicker.blur()
},
saveTimePicker = (timePickerRef: typeof RcTimePicker) => {
this.timePickerRef = timePickerRef;
}
focus() {
this.timePickerRef.focus();
}
blur() {
this.timePickerRef.blur();
}
getDefaultFormat() {
const { format, use12Hours } = this.props;
getDefaultFormat () {
const { format, use12Hours } = this
if (format) {
return format;
return format
} else if (use12Hours) {
return 'h:mm:ss a';
}
return 'HH:mm:ss';
return 'h:mm:ss a'
}
return 'HH:mm:ss'
},
renderTimePicker = (locale: TimePickerLocale) => {
const props = {
...this.props,
};
delete props.defaultValue;
renderTimePicker (locale) {
const props = getOptionProps(this)
delete props.defaultValue
const format = this.getDefaultFormat();
const className = classNames(props.className, {
const format = this.getDefaultFormat()
const className = {
[`${props.prefixCls}-${props.size}`]: !!props.size,
});
const addon = (panel: React.ReactElement<any>) => (
props.addon ? (
<div className={`${props.prefixCls}-panel-addon`}>
{props.addon(panel)}
</div>
) : null
);
return (
<RcTimePicker
{...generateShowHourMinuteSecond(format)}
{...props}
ref={this.saveTimePicker}
format={format}
className={className}
value={this.state.value}
placeholder={props.placeholder === undefined ? locale.placeholder : props.placeholder}
onChange={this.handleChange}
onOpen={this.handleOpenClose}
onClose={this.handleOpenClose}
addon={addon}
/>
);
}
const tempAddon = getComponentFromProp(this, 'addon')
const timeProps = {
props: {
...generateShowHourMinuteSecond(format),
...props,
format,
value: this.sValue,
placeholder: props.placeholder === undefined ? locale.placeholder : props.placeholder,
},
class: className,
ref: 'timePicker',
on: {
change: this.handleChange,
open: this.handleOpenClose,
close: this.handleOpenClose,
},
}
return (
<VcTimePicker {...timeProps}>
{tempAddon ? <template slot='addon'>
<div class={`${props.prefixCls}-panel-addon`}>
{tempAddon}
</div>
</template> : null}
</VcTimePicker>
)
},
},
render() {
render () {
return (
<LocaleReceiver
componentName="TimePicker"
componentName='TimePicker'
defaultLocale={defaultLocale}
>
{this.renderTimePicker}
</LocaleReceiver>
);
}
children={this.renderTimePicker}
/>
)
},
}
</script>

0
components/time-picker/locale/ar_EG.tsx.js → components/time-picker/locale/ar_EG.js
View File

4
components/time-picker/locale/bg_BG.tsx.js → components/time-picker/locale/bg_BG.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Избор на час',
};
}
export default locale;
export default locale

4
components/time-picker/locale/es_ES.tsx.js → components/time-picker/locale/ca_ES.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Seleccionar hora',
};
}
export default locale;
export default locale

4
components/time-picker/locale/cs_CZ.tsx.js → components/time-picker/locale/cs_CZ.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Vybrat čas',
};
}
export default locale;
export default locale

4
components/time-picker/locale/de_DE.tsx.js → components/time-picker/locale/de_DE.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Zeit auswählen',
};
}
export default locale;
export default locale

4
components/time-picker/locale/el_GR.tsx.js → components/time-picker/locale/el_GR.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Επιλέξτε ώρα',
};
}
export default locale;
export default locale

4
components/time-picker/locale/en_GB.tsx.js → components/time-picker/locale/en_GB.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Select time',
};
}
export default locale;
export default locale

4
components/time-picker/locale/en_US.tsx.js → components/time-picker/locale/en_US.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Select time',
};
}
export default locale;
export default locale

4
components/time-picker/locale/ca_ES.tsx.js → components/time-picker/locale/es_ES.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Seleccionar hora',
};
}
export default locale;
export default locale

4
components/time-picker/locale/et_EE.tsx.js → components/time-picker/locale/et_EE.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Vali aeg',
};
}
export default locale;
export default locale

4
components/time-picker/locale/fa_IR.tsx.js → components/time-picker/locale/fa_IR.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'انتخاب زمان',
};
}
export default locale;
export default locale

4
components/time-picker/locale/fi_FI.tsx.js → components/time-picker/locale/fi_FI.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Valitse aika',
};
}
export default locale;
export default locale

4
components/time-picker/locale/fr_BE.tsx.js → components/time-picker/locale/fr_BE.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Sélectionner l\'heure',
};
}
export default locale;
export default locale

4
components/time-picker/locale/fr_FR.tsx.js → components/time-picker/locale/fr_FR.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Sélectionner l\'heure',
};
}
export default locale;
export default locale

4
components/time-picker/locale/is_IS.tsx.js → components/time-picker/locale/is_IS.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Velja tíma',
};
}
export default locale;
export default locale

4
components/time-picker/locale/it_IT.tsx.js → components/time-picker/locale/it_IT.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Selezionare il tempo',
};
}
export default locale;
export default locale

4
components/time-picker/locale/ja_JP.tsx.js → components/time-picker/locale/ja_JP.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: '時刻を選択',
};
}
export default locale;
export default locale

4
components/time-picker/locale/ko_KR.tsx.js → components/time-picker/locale/ko_KR.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: '날짜 선택',
};
}
export default locale;
export default locale

4
components/time-picker/locale/ku_IQ.tsx.js → components/time-picker/locale/ku_IQ.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Demê hilbijêre',
};
}
export default locale;
export default locale

4
components/time-picker/locale/nb_NO.tsx.js → components/time-picker/locale/nb_NO.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Velg tid',
};
}
export default locale;
export default locale

4
components/time-picker/locale/nl_BE.tsx.js → components/time-picker/locale/nl_BE.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Selecteer tijd',
};
}
export default locale;
export default locale

4
components/time-picker/locale/nl_NL.tsx.js → components/time-picker/locale/nl_NL.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Selecteer tijd',
};
}
export default locale;
export default locale

4
components/time-picker/locale/pl_PL.tsx.js → components/time-picker/locale/pl_PL.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Wybierz godzinę',
};
}
export default locale;
export default locale

4
components/time-picker/locale/pt_BR.tsx.js → components/time-picker/locale/pt_BR.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Hora',
};
}
export default locale;
export default locale

4
components/time-picker/locale/pt_PT.tsx.js → components/time-picker/locale/pt_PT.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Hora',
};
}
export default locale;
export default locale

4
components/time-picker/locale/ru_RU.tsx.js → components/time-picker/locale/ru_RU.js
View File

@ -3,6 +3,6 @@
*/
const locale = {
placeholder: 'Выберите время',
};
}
export default locale;
export default locale

4
components/time-picker/locale/sk_SK.tsx.js → components/time-picker/locale/sk_SK.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Vybrať čas',
};
}
export default locale;
export default locale

4
components/time-picker/locale/sr_RS.tsx.js → components/time-picker/locale/sr_RS.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Izaberite vreme',
};
}
export default locale;
export default locale

4
components/time-picker/locale/sv_SE.tsx.js → components/time-picker/locale/sv_SE.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Välj tid',
};
}
export default locale;
export default locale

4
components/time-picker/locale/th_TH.tsx.js → components/time-picker/locale/th_TH.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'เลือกเวลา',
};
}
export default locale;
export default locale

4
components/time-picker/locale/tr_TR.tsx.js → components/time-picker/locale/tr_TR.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Zaman Seç',
};
}
export default locale;
export default locale

4
components/time-picker/locale/uk_UA.tsx.js → components/time-picker/locale/uk_UA.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Оберіть час',
};
}
export default locale;
export default locale

4
components/time-picker/locale/vi_VN.tsx.js → components/time-picker/locale/vi_VN.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: 'Chọn thời gian',
};
}
export default locale;
export default locale

4
components/time-picker/locale/zh_CN.tsx.js → components/time-picker/locale/zh_CN.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: '请选择时间',
};
}
export default locale;
export default locale

4
components/time-picker/locale/zh_TW.tsx.js → components/time-picker/locale/zh_TW.js
View File

@ -1,5 +1,5 @@
const locale = {
placeholder: '請選擇時間',
};
}
export default locale;
export default locale

5
components/time-picker/style/index.js Normal file
View File

@ -0,0 +1,5 @@
import '../../style/index.less'
import './index.less'
// style dependencies
import '../../input/style'

5
components/time-picker/style/index.tsx
View File

@ -1,5 +0,0 @@
import '../../style/index.less';
import './index.less';
// style dependencies
import '../../input/style';

74
components/vc-time-picker/Combobox.vue
View File

@ -1,6 +1,7 @@
<script>
import PropTypes from 'prop-types'
import PropTypes from '../_util/vue-types'
import Select from './Select'
import BaseMixin from '../_util/BaseMixin'
const formatOption = (option, disabledOptions) => {
let value = `${option}`
@ -19,13 +20,15 @@ const formatOption = (option, disabledOptions) => {
}
}
class Combobox extends Component {
static propTypes = {
const Combobox = {
mixins: [BaseMixin],
name: 'Combobox',
props: {
format: PropTypes.string,
defaultOpenValue: PropTypes.object,
prefixCls: PropTypes.string,
value: PropTypes.object,
onChange: PropTypes.func,
// onChange: PropTypes.func,
showHour: PropTypes.bool,
showMinute: PropTypes.bool,
showSecond: PropTypes.bool,
@ -35,18 +38,18 @@ class Combobox extends Component {
disabledHours: PropTypes.func,
disabledMinutes: PropTypes.func,
disabledSeconds: PropTypes.func,
onCurrentSelectPanelChange: PropTypes.func,
// onCurrentSelectPanelChange: PropTypes.func,
use12Hours: PropTypes.bool,
isAM: PropTypes.bool,
};
onItemChange = (type, itemValue) => {
const { onChange, defaultOpenValue, use12Hours } = this.props
const value = (this.props.value || defaultOpenValue).clone()
},
methods: {
onItemChange (type, itemValue) {
const { defaultOpenValue, use12Hours, isAM } = this
const value = (this.value || defaultOpenValue).clone()
if (type === 'hour') {
if (use12Hours) {
if (this.props.isAM) {
if (isAM) {
value.hour(+itemValue % 12)
} else {
value.hour((+itemValue % 12) + 12)
@ -72,15 +75,15 @@ class Combobox extends Component {
} else {
value.second(+itemValue)
}
onChange(value)
}
this.__emit('change', value)
},
onEnterSelectPanel = (range) => {
this.props.onCurrentSelectPanelChange(range)
}
onEnterSelectPanel (range) {
this.__emit('currentSelectPanelChange', range)
},
getHourSelect (hour) {
const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props
const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this
if (!showHour) {
return null
}
@ -102,17 +105,17 @@ class Combobox extends Component {
selectedIndex={hourOptionsAdj.indexOf(hourAdj)}
type='hour'
onSelect={this.onItemChange}
onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
onMouseenter={this.onEnterSelectPanel.bind(this, 'hour')}
/>
)
}
},
getMinuteSelect (minute) {
const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props
const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this
if (!showMinute) {
return null
}
const value = this.props.value || defaultOpenValue
const value = this.value || defaultOpenValue
const disabledOptions = disabledMinutes(value.hour())
return (
@ -122,17 +125,17 @@ class Combobox extends Component {
selectedIndex={minuteOptions.indexOf(minute)}
type='minute'
onSelect={this.onItemChange}
onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
onMouseenter={this.onEnterSelectPanel.bind(this, 'minute')}
/>
)
}
},
getSecondSelect (second) {
const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props
const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this
if (!showSecond) {
return null
}
const value = this.props.value || defaultOpenValue
const value = this.value || defaultOpenValue
const disabledOptions = disabledSeconds(value.hour(), value.minute())
return (
@ -142,13 +145,13 @@ class Combobox extends Component {
selectedIndex={secondOptions.indexOf(second)}
type='second'
onSelect={this.onItemChange}
onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
onMouseenter={this.onEnterSelectPanel.bind(this, 'second')}
/>
)
}
},
getAMPMSelect () {
const { prefixCls, use12Hours, format } = this.props
const { prefixCls, use12Hours, format, isAM } = this
if (!use12Hours) {
return null
}
@ -157,7 +160,7 @@ class Combobox extends Component {
.map(c => format.match(/\sA/) ? c.toUpperCase() : c)
.map(c => ({ value: c }))
const selected = this.props.isAM ? 0 : 1
const selected = isAM ? 0 : 1
return (
<Select
@ -166,23 +169,24 @@ class Combobox extends Component {
selectedIndex={selected}
type='ampm'
onSelect={this.onItemChange}
onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')}
onMouseenter={this.onEnterSelectPanel.bind(this, 'ampm')}
/>
)
}
},
},
render () {
const { prefixCls, defaultOpenValue } = this.props
const value = this.props.value || defaultOpenValue
const { prefixCls, defaultOpenValue } = this
const value = this.value || defaultOpenValue
return (
<div className={`${prefixCls}-combobox`}>
<div class={`${prefixCls}-combobox`}>
{this.getHourSelect(value.hour())}
{this.getMinuteSelect(value.minute())}
{this.getSecondSelect(value.second())}
{this.getAMPMSelect(value.hour())}
</div>
)
}
},
}
export default Combobox

123
components/vc-time-picker/Header.vue
View File

@ -1,77 +1,80 @@
<script>
import PropTypes from 'prop-types'
import PropTypes from '../_util/vue-types'
import BaseMixin from '../_util/BaseMixin'
import moment from 'moment'
class Header extends Component {
static propTypes = {
const Header = {
mixins: [BaseMixin],
props: {
format: PropTypes.string,
prefixCls: PropTypes.string,
disabledDate: PropTypes.func,
placeholder: PropTypes.string,
clearText: PropTypes.string,
value: PropTypes.object,
inputReadOnly: PropTypes.bool,
inputReadOnly: PropTypes.bool.def(false),
hourOptions: PropTypes.array,
minuteOptions: PropTypes.array,
secondOptions: PropTypes.array,
disabledHours: PropTypes.func,
disabledMinutes: PropTypes.func,
disabledSeconds: PropTypes.func,
onChange: PropTypes.func,
onClear: PropTypes.func,
onEsc: PropTypes.func,
// onChange: PropTypes.func,
// onClear: PropTypes.func,
// onEsc: PropTypes.func,
allowEmpty: PropTypes.bool,
defaultOpenValue: PropTypes.object,
currentSelectPanel: PropTypes.string,
focusOnOpen: PropTypes.bool,
onKeyDown: PropTypes.func,
};
static defaultProps = {
inputReadOnly: false,
}
constructor (props) {
super(props)
const { value, format } = props
this.state = {
// onKeyDown: PropTypes.func,
showStr: PropTypes.bool.def(true),
},
data () {
const { value, format } = this
return {
str: value && value.format(format) || '',
invalid: false,
}
}
},
componentDidMount () {
if (this.props.focusOnOpen) {
mounted () {
if (this.focusOnOpen) {
// Wait one frame for the panel to be positioned before focusing
const requestAnimationFrame = (window.requestAnimationFrame || window.setTimeout)
requestAnimationFrame(() => {
this.refs.input.focus()
this.refs.input.select()
this.$refs.input.focus()
this.$refs.input.select()
})
}
}
componentWillReceiveProps (nextProps) {
},
watch: {
'$props': {
handler: function (nextProps) {
const { value, format } = nextProps
this.setState({
str: value && value.format(format) || '',
invalid: false,
})
}
},
deep: true,
},
},
onInputChange = (event) => {
methods: {
onInputChange (event) {
const str = event.target.value
this.showStr = true
this.setState({
str,
})
const {
format, hourOptions, minuteOptions, secondOptions,
disabledHours, disabledMinutes,
disabledSeconds, onChange, allowEmpty,
} = this.props
disabledSeconds, allowEmpty,
value: originalValue,
} = this
if (str) {
const originalValue = this.props.value
const value = this.getProtoValue().clone()
const parsed = moment(str, format, true)
if (!parsed.isValid()) {
@ -120,13 +123,13 @@ class Header extends Component {
changedValue.hour(value.hour())
changedValue.minute(value.minute())
changedValue.second(value.second())
onChange(changedValue)
this.__emit('change', changedValue)
}
} else if (originalValue !== value) {
onChange(value)
this.__emit('change', value)
}
} else if (allowEmpty) {
onChange(null)
this.__emit('change', null)
} else {
this.setState({
invalid: true,
@ -137,65 +140,63 @@ class Header extends Component {
this.setState({
invalid: false,
})
}
},
onKeyDown = (e) => {
const { onEsc, onKeyDown } = this.props
onKeyDown (e) {
if (e.keyCode === 27) {
onEsc()
this.__emit('esc')
}
this.__emit('keydown', e)
},
onKeyDown(e)
}
onClear = () => {
onClear () {
this.__emit('clear')
this.setState({ str: '' })
this.props.onClear()
}
},
getClearButton () {
const { prefixCls, allowEmpty } = this.props
const { prefixCls, allowEmpty, clearText } = this
if (!allowEmpty) {
return null
}
return (<a
className={`${prefixCls}-clear-btn`}
class={`${prefixCls}-clear-btn`}
role='button'
title={this.props.clearText}
onMouseDown={this.onClear}
title={clearText}
onMousedown={this.onClear}
/>)
}
},
getProtoValue () {
return this.props.value || this.props.defaultOpenValue
}
return this.value || this.defaultOpenValue
},
getInput () {
const { prefixCls, placeholder, inputReadOnly } = this.props
const { invalid, str } = this.state
const { prefixCls, placeholder, inputReadOnly, invalid, str, showStr } = this
const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''
return (
<input
className={`${prefixCls}-input ${invalidClass}`}
class={`${prefixCls}-input ${invalidClass}`}
ref='input'
onKeyDown={this.onKeyDown}
value={str}
onKeydown={this.onKeyDown}
value={showStr ? str : ''}
placeholder={placeholder}
onChange={this.onInputChange}
onInput={this.onInputChange}
readOnly={!!inputReadOnly}
/>
)
}
},
},
render () {
const { prefixCls } = this.props
const { prefixCls } = this
return (
<div className={`${prefixCls}-input-wrap`}>
<div class={`${prefixCls}-input-wrap`}>
{this.getInput()}
{this.getClearButton()}
</div>
)
}
},
}
export default Header

155
components/vc-time-picker/Panel.vue
View File

@ -1,9 +1,9 @@
<script>
import PropTypes from 'prop-types'
import PropTypes from '../_util/vue-types'
import BaseMixin from '../_util/BaseMixin'
import Header from './Header'
import Combobox from './Combobox'
import moment from 'moment'
import classNames from 'classnames'
function noop () {
}
@ -17,84 +17,79 @@ function generateOptions (length, disabledOptions, hideDisabledOptions, step = 1
}
return arr
}
class Panel extends Component {
static propTypes = {
const Panel = {
mixins: [BaseMixin],
props: {
clearText: PropTypes.string,
prefixCls: PropTypes.string,
className: PropTypes.string,
defaultOpenValue: PropTypes.object,
prefixCls: PropTypes.string.def('rc-time-picker-panel'),
defaultOpenValue: {
type: Object,
default: () => {
return moment()
},
},
value: PropTypes.object,
placeholder: PropTypes.string,
format: PropTypes.string,
inputReadOnly: PropTypes.bool,
disabledHours: PropTypes.func,
disabledMinutes: PropTypes.func,
disabledSeconds: PropTypes.func,
inputReadOnly: PropTypes.bool.def(false),
disabledHours: PropTypes.func.def(noop),
disabledMinutes: PropTypes.func.def(noop),
disabledSeconds: PropTypes.func.def(noop),
hideDisabledOptions: PropTypes.bool,
onChange: PropTypes.func,
onEsc: PropTypes.func,
// onChange: PropTypes.func,
// onEsc: PropTypes.func,
allowEmpty: PropTypes.bool,
showHour: PropTypes.bool,
showMinute: PropTypes.bool,
showSecond: PropTypes.bool,
onClear: PropTypes.func,
use12Hours: PropTypes.bool,
// onClear: PropTypes.func,
use12Hours: PropTypes.bool.def(false),
hourStep: PropTypes.number,
minuteStep: PropTypes.number,
secondStep: PropTypes.number,
addon: PropTypes.func,
focusOnOpen: PropTypes.bool,
onKeyDown: PropTypes.func,
};
static defaultProps = {
prefixCls: 'rc-time-picker-panel',
onChange: noop,
onClear: noop,
disabledHours: noop,
disabledMinutes: noop,
disabledSeconds: noop,
defaultOpenValue: moment(),
use12Hours: false,
addon: noop,
onKeyDown: noop,
inputReadOnly: false,
};
constructor (props) {
super(props)
this.state = {
value: props.value,
// onKeydown: PropTypes.func,
},
data () {
return {
sValue: this.value,
selectionRange: [],
currentSelectPanel: '',
showStr: true,
}
}
componentWillReceiveProps (nextProps) {
const value = nextProps.value
if (value) {
},
watch: {
value (val) {
if (val) {
this.setState({
value,
sValue: val,
showStr: true,
})
} else {
this.setState({
showStr: false,
})
}
}
},
},
onChange = (newValue) => {
this.setState({ value: newValue })
this.props.onChange(newValue)
}
methods: {
onChange (newValue) {
this.setState({ sValue: newValue })
this.__emit('change', newValue)
},
onCurrentSelectPanelChange = (currentSelectPanel) => {
onCurrentSelectPanelChange (currentSelectPanel) {
this.setState({ currentSelectPanel })
}
},
// https://github.com/ant-design/ant-design/issues/5829
close () {
this.props.onEsc()
}
this.__emit('esc')
},
disabledHours = () => {
const { use12Hours, disabledHours } = this.props
disabledHours2 () {
const { use12Hours, disabledHours } = this
let disabledOptions = disabledHours()
if (use12Hours && Array.isArray(disabledOptions)) {
if (this.isAM()) {
@ -104,27 +99,28 @@ class Panel extends Component {
}
}
return disabledOptions
}
},
isAM () {
const value = (this.state.value || this.props.defaultOpenValue)
const value = this.sValue || this.defaultOpenValue
return value.hour() >= 0 && value.hour() < 12
}
},
},
render () {
const {
prefixCls, className, placeholder, disabledMinutes,
prefixCls, placeholder, disabledMinutes,
disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear,
focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep, inputReadOnly,
} = this.props
const {
value, currentSelectPanel,
} = this.state
const disabledHourOptions = this.disabledHours()
const disabledMinuteOptions = disabledMinutes(value ? value.hour() : null)
const disabledSecondOptions = disabledSeconds(value ? value.hour() : null,
value ? value.minute() : null)
format, defaultOpenValue, clearText, use12Hours,
focusOnOpen, hourStep, minuteStep, secondStep, inputReadOnly,
sValue, currentSelectPanel, showStr, $listeners = {},
} = this
const { esc = noop, clear = noop, keydown = noop } = $listeners
const disabledHourOptions = this.disabledHours2()
const disabledMinuteOptions = disabledMinutes(sValue ? sValue.hour() : null)
const disabledSecondOptions = disabledSeconds(sValue ? sValue.hour() : null,
sValue ? sValue.minute() : null)
const hourOptions = generateOptions(
24, disabledHourOptions, hideDisabledOptions, hourStep
)
@ -136,32 +132,33 @@ class Panel extends Component {
)
return (
<div className={classNames({ [`${prefixCls}-inner`]: true, [className]: !!className })}>
<div class={`${prefixCls}-inner`}>
<Header
clearText={clearText}
prefixCls={prefixCls}
defaultOpenValue={defaultOpenValue}
value={value}
value={sValue}
currentSelectPanel={currentSelectPanel}
onEsc={onEsc}
onEsc={esc}
format={format}
placeholder={placeholder}
hourOptions={hourOptions}
minuteOptions={minuteOptions}
secondOptions={secondOptions}
disabledHours={this.disabledHours}
disabledHours={this.disabledHours2}
disabledMinutes={disabledMinutes}
disabledSeconds={disabledSeconds}
onChange={this.onChange}
onClear={onClear}
onClear={clear}
allowEmpty={allowEmpty}
focusOnOpen={focusOnOpen}
onKeyDown={onKeyDown}
onKeydown={keydown}
inputReadOnly={inputReadOnly}
showStr={showStr}
/>
<Combobox
prefixCls={prefixCls}
value={value}
value={sValue}
defaultOpenValue={defaultOpenValue}
format={format}
onChange={this.onChange}
@ -171,17 +168,17 @@ class Panel extends Component {
hourOptions={hourOptions}
minuteOptions={minuteOptions}
secondOptions={secondOptions}
disabledHours={this.disabledHours}
disabledHours={this.disabledHours2}
disabledMinutes={disabledMinutes}
disabledSeconds={disabledSeconds}
onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
use12Hours={use12Hours}
isAM={this.isAM()}
/>
{addon(this)}
{this.$slots.default}
</div>
)
}
},
}
export default Panel

105
components/vc-time-picker/Select.vue
View File

@ -1,7 +1,8 @@
<script>
import PropTypes from 'prop-types'
import PropTypes from '../_util/vue-types'
import BaseMixin from '../_util/BaseMixin'
import classnames from 'classnames'
function noop () {}
const scrollTo = (element, to, duration) => {
const requestAnimationFrame = window.requestAnimationFrame ||
function requestAnimationFrameTimeout () {
@ -22,109 +23,111 @@ const scrollTo = (element, to, duration) => {
})
}
class Select extends Component {
static propTypes = {
const Select = {
mixins: [BaseMixin],
props: {
prefixCls: PropTypes.string,
options: PropTypes.array,
selectedIndex: PropTypes.number,
type: PropTypes.string,
onSelect: PropTypes.func,
onMouseEnter: PropTypes.func,
};
state = {
// onSelect: PropTypes.func,
// onMouseEnter: PropTypes.func,
},
data () {
return {
active: false,
};
}
},
componentDidMount () {
mounted () {
this.$nextTick(() => {
// jump to selected option
this.scrollToSelected(0)
}
componentDidUpdate (prevProps) {
})
},
watch: {
selectedIndex (val) {
this.$nextTick(() => {
// smooth scroll to selected option
if (prevProps.selectedIndex !== this.props.selectedIndex) {
this.scrollToSelected(120)
}
}
onSelect = (value) => {
const { onSelect, type } = this.props
onSelect(type, value)
}
})
},
},
methods: {
onSelect (value) {
const { type } = this
this.__emit('select', type, value)
},
getOptions () {
const { options, selectedIndex, prefixCls } = this.props
const { options, selectedIndex, prefixCls } = this
return options.map((item, index) => {
const cls = classnames({
[`${prefixCls}-select-option-selected`]: selectedIndex === index,
[`${prefixCls}-select-option-disabled`]: item.disabled,
})
let onclick = null
let onClick = noop
if (!item.disabled) {
onclick = this.onSelect.bind(this, item.value)
onClick = this.onSelect.bind(this, item.value)
}
return (<li
className={cls}
class={cls}
key={index}
onClick={onclick}
onClick={onClick}
disabled={item.disabled}
>
{item.value}
</li>)
})
}
},
scrollToSelected (duration) {
// move to selected item
const select = ReactDom.findDOMNode(this)
const list = ReactDom.findDOMNode(this.list)
const select = this.$el
const list = this.$refs.list
if (!list) {
return
}
let index = this.props.selectedIndex
let index = this.selectedIndex
if (index < 0) {
index = 0
}
const topOption = list.children[index]
const to = topOption.offsetTop
scrollTo(select, to, duration)
}
},
handleMouseEnter = (e) => {
handleMouseEnter (e) {
this.setState({ active: true })
this.props.onMouseEnter(e)
}
this.__emit('mouseenter', e)
},
handleMouseLeave = () => {
handleMouseLeave () {
this.setState({ active: false })
}
saveList = (node) => {
this.list = node
}
},
},
render () {
if (this.props.options.length === 0) {
if (this.options.length === 0) {
return null
}
const { prefixCls } = this.props
const cls = classnames({
const { prefixCls } = this
const cls = {
[`${prefixCls}-select`]: 1,
[`${prefixCls}-select-active`]: this.state.active,
})
[`${prefixCls}-select-active`]: this.active,
}
return (
<div
className={cls}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
class={cls}
onMouseenter={this.handleMouseEnter}
onMouseleave={this.handleMouseLeave}
>
<ul ref={this.saveList}>{this.getOptions()}</ul>
<ul ref='list'>{this.getOptions()}</ul>
</div>
)
}
},
}
export default Select

208
components/vc-time-picker/TimePicker.vue
View File

@ -1,27 +1,31 @@
<script>
import PropTypes from 'prop-types'
import Trigger from 'rc-trigger'
import PropTypes from '../_util/vue-types'
import BaseMixin from '../_util/BaseMixin'
import Trigger from '../trigger'
import Panel from './Panel'
import placements from './placements'
import moment from 'moment'
import { initDefaultProps, hasProp } from '../_util/props-util'
function noop () {
}
function refFn (field, component) {
this[field] = component
}
export default class Picker extends Component {
static propTypes = {
export default {
mixins: [BaseMixin],
props: initDefaultProps({
prefixCls: PropTypes.string,
clearText: PropTypes.string,
value: PropTypes.object,
defaultOpenValue: PropTypes.object,
value: PropTypes.any,
defaultOpenValue: {
type: Object,
default: () => {
return moment()
},
},
inputReadOnly: PropTypes.bool,
disabled: PropTypes.bool,
allowEmpty: PropTypes.bool,
defaultValue: PropTypes.object,
defaultValue: PropTypes.any,
open: PropTypes.bool,
defaultOpen: PropTypes.bool,
align: PropTypes.object,
@ -33,19 +37,16 @@ export default class Picker extends Component {
showHour: PropTypes.bool,
showMinute: PropTypes.bool,
showSecond: PropTypes.bool,
style: PropTypes.object,
className: PropTypes.string,
popupClassName: PropTypes.string,
disabledHours: PropTypes.func,
disabledMinutes: PropTypes.func,
disabledSeconds: PropTypes.func,
hideDisabledOptions: PropTypes.bool,
onChange: PropTypes.func,
onOpen: PropTypes.func,
onClose: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
addon: PropTypes.func,
// onChange: PropTypes.func,
// onOpen: PropTypes.func,
// onClose: PropTypes.func,
// onFocus: PropTypes.func,
// onBlur: PropTypes.func,
name: PropTypes.string,
autoComplete: PropTypes.string,
use12Hours: PropTypes.bool,
@ -53,20 +54,15 @@ export default class Picker extends Component {
minuteStep: PropTypes.number,
secondStep: PropTypes.number,
focusOnOpen: PropTypes.bool,
onKeyDown: PropTypes.func,
// onKeyDown: PropTypes.func,
autoFocus: PropTypes.bool,
};
static defaultProps = {
}, {
clearText: 'clear',
prefixCls: 'rc-time-picker',
defaultOpen: false,
inputReadOnly: false,
style: {},
className: '',
popupClassName: '',
align: {},
defaultOpenValue: moment(),
allowEmpty: true,
showHour: true,
showMinute: true,
@ -76,75 +72,70 @@ export default class Picker extends Component {
disabledSeconds: noop,
hideDisabledOptions: false,
placement: 'bottomLeft',
onChange: noop,
onOpen: noop,
onClose: noop,
onFocus: noop,
onBlur: noop,
addon: noop,
use12Hours: false,
focusOnOpen: false,
onKeyDown: noop,
};
constructor (props) {
super(props)
this.saveInputRef = refFn.bind(this, 'picker')
this.savePanelRef = refFn.bind(this, 'panelInstance')
const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = props
this.state = {
open,
value,
}
}),
data () {
const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this
return {
sOpen: open,
sValue: value,
}
},
componentWillReceiveProps (nextProps) {
const { value, open } = nextProps
if ('value' in nextProps) {
watch: {
value (val) {
this.setState({
value,
sValue: val,
})
},
open (val) {
if (val !== undefined) {
this.setState({
sOpen: val,
})
}
if (open !== undefined) {
this.setState({ open })
}
}
onPanelChange = (value) => {
},
},
methods: {
onPanelChange (value) {
this.setValue(value)
}
},
onPanelClear = () => {
onPanelClear () {
this.setValue(null)
this.setOpen(false)
}
},
onVisibleChange = (open) => {
onVisibleChange (open) {
this.setOpen(open)
}
},
onEsc = () => {
onEsc () {
this.setOpen(false)
this.focus()
}
},
onKeyDown = (e) => {
onKeyDown (e) {
if (e.keyCode === 40) {
this.setOpen(true)
}
}
},
onKeyDown2 (e) {
this.__emit('keydown', e)
},
setValue (value) {
if (!('value' in this.props)) {
if (!hasProp(this, 'value')) {
this.setState({
value,
sValue: value,
})
}
this.props.onChange(value)
}
this.__emit('change', value)
},
getFormat () {
const { format, showHour, showMinute, showSecond, use12Hours } = this.props
const { format, showHour, showMinute, showSecond, use12Hours } = this
if (format) {
return format
}
@ -164,21 +155,22 @@ export default class Picker extends Component {
showMinute ? 'mm' : '',
showSecond ? 'ss' : '',
].filter(item => !!item).join(':')
}
},
getPanelElement () {
const {
prefixCls, placeholder, disabledHours,
disabledMinutes, disabledSeconds, hideDisabledOptions, inputReadOnly,
allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
addon, use12Hours, focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep,
} = this.props
use12Hours, focusOnOpen, onKeyDown2, hourStep, minuteStep, secondStep,
sValue,
} = this
return (
<Panel
clearText={clearText}
prefixCls={`${prefixCls}-panel`}
ref={this.savePanelRef}
value={this.state.value}
ref='panel'
value={sValue}
inputReadOnly={inputReadOnly}
onChange={this.onPanelChange}
onClear={this.onPanelClear}
@ -198,16 +190,17 @@ export default class Picker extends Component {
hourStep={hourStep}
minuteStep={minuteStep}
secondStep={secondStep}
addon={addon}
focusOnOpen={focusOnOpen}
onKeyDown={onKeyDown}
/>
onKeyDown={onKeyDown2}
>
{this.$slots.addon}
</Panel>
)
}
},
getPopupClassName () {
const { showHour, showMinute, showSecond, use12Hours, prefixCls } = this.props
let popupClassName = this.props.popupClassName
const { showHour, showMinute, showSecond, use12Hours, prefixCls } = this
let popupClassName = this.popupClassName
// Keep it for old compatibility
if ((!showHour || !showMinute || !showSecond) && !use12Hours) {
popupClassName += ` ${prefixCls}-panel-narrow`
@ -227,43 +220,47 @@ export default class Picker extends Component {
}
popupClassName += ` ${prefixCls}-panel-column-${selectColumnCount}`
return popupClassName
}
},
setOpen (open) {
const { onOpen, onClose } = this.props
if (this.state.open !== open) {
if (!('open' in this.props)) {
this.setState({ open })
if (this.sOpen !== open) {
if (!hasProp(this, 'open')) {
this.setState({ sOpen: open })
}
if (open) {
onOpen({ open })
this.__emit('open', { open })
} else {
onClose({ open })
}
this.__emit('close', { open })
}
}
},
focus () {
this.picker.focus()
}
this.$refs.picker.focus()
},
blur () {
this.picker.blur()
}
this.$refs.picker.blur()
},
onFocus (e) {
this.__emit('focus', e)
},
onBlur (e) {
this.__emit('blur', e)
},
},
render () {
const {
prefixCls, placeholder, placement, align,
disabled, transitionName, style, className, getPopupContainer, name, autoComplete,
onFocus, onBlur, autoFocus, inputReadOnly,
} = this.props
const { open, value } = this.state
disabled, transitionName, getPopupContainer, name, autoComplete,
autoFocus, inputReadOnly, sOpen, sValue, onFocus, onBlur,
} = this
const popupClassName = this.getPopupClassName()
return (
<Trigger
prefixCls={`${prefixCls}-panel`}
popupClassName={popupClassName}
popup={this.getPanelElement()}
popupAlign={align}
builtinPlacements={placements}
popupPlacement={placement}
@ -271,19 +268,22 @@ export default class Picker extends Component {
destroyPopupOnHide
getPopupContainer={getPopupContainer}
popupTransitionName={transitionName}
popupVisible={open}
popupVisible={sOpen}
onPopupVisibleChange={this.onVisibleChange}
>
<span className={`${prefixCls} ${className}`} style={style}>
<template slot='popup'>
{this.getPanelElement()}
</template>
<span class={`${prefixCls}`}>
<input
className={`${prefixCls}-input`}
ref={this.saveInputRef}
class={`${prefixCls}-input`}
ref='picker'
type='text'
placeholder={placeholder}
name={name}
onKeyDown={this.onKeyDown}
onKeydown={this.onKeyDown}
disabled={disabled}
value={value && value.format(this.getFormat()) || ''}
value={sValue && sValue.format(this.getFormat()) || ''}
autoComplete={autoComplete}
onFocus={onFocus}
onBlur={onBlur}
@ -291,10 +291,10 @@ export default class Picker extends Component {
onChange={noop}
readOnly={!!inputReadOnly}
/>
<span className={`${prefixCls}-icon`}/>
<span class={`${prefixCls}-icon`}/>
</span>
</Trigger>
)
}
},
}
</script>

160
components/vc-time-picker/demo/all.vue Normal file
View File

@ -0,0 +1,160 @@
<script>
import '../assets/index.less'
import moment from 'moment'
import TimePicker from '../index'
const format = 'h:mm a'
const now = moment().hour(0).minute(0)
function onChange (value) {
console.log(value && value.format(format))
}
const showSecond = true
const str = showSecond ? 'HH:mm:ss' : 'HH:mm'
const now1 = moment().hour(14).minute(30)
function generateOptions (length, excludedOptions) {
const arr = []
for (let value = 0; value < length; value++) {
if (excludedOptions.indexOf(value) < 0) {
arr.push(value)
}
}
return arr
}
function onChange1 (value) {
console.log(value && value.format(str))
}
function disabledHours () {
return [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]
}
function disabledMinutes (h) {
switch (h) {
case 9:
return generateOptions(60, [30])
case 21:
return generateOptions(60, [0])
default:
return generateOptions(60, [0, 30])
}
}
function disabledSeconds (h, m) {
return [h + m % 60]
}
export default{
data () {
return {
open: false,
value: moment(),
}
},
methods: {
setOpen ({ open }) {
this.open = open
},
toggleOpen () {
this.open = !this.open
},
handleValueChange (value) {
console.log(value && value.format('HH:mm:ss'))
this.value = value
},
clear () {
this.value = undefined
},
},
render () {
return (
<div>
<TimePicker
showSecond={false}
defaultValue={now}
class='xxx'
onChange={onChange}
format={format}
use12Hours
inputReadOnly
/>
<br/>
<br/>
<div>
<h3>Disabled picker</h3>
<TimePicker
defaultValue={now1}
disabled
onChange={onChange1}
/>
<h3>Disabled options</h3>
<TimePicker
showSecond={showSecond}
defaultValue={now1}
class='xxx'
onChange={onChange1}
disabledHours={disabledHours}
disabledMinutes={disabledMinutes}
disabledSeconds={disabledSeconds}
/>
</div>
<div>
<TimePicker defaultValue={moment()} showHour={false} />
<TimePicker defaultValue={moment()} showMinute={false} />
<TimePicker defaultValue={moment()} showSecond={false} />
<TimePicker defaultValue={moment()} showMinute={false} showSecond={false} />
<TimePicker defaultValue={moment()} showHour={false} showSecond={false}/>
<TimePicker defaultValue={moment()} showHour={false} showMinute={false} />
</div>
<TimePicker
format={str}
showSecond={showSecond}
// use to control utfOffset, locale, default open value
defaultOpenValue={moment()}
class='xxx'
onChange={onChange1}
disabledHours={() => [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]}
disabledMinutes={() => [0, 2, 4, 6, 8]}
hideDisabledOptions
/>
<div>
<button onClick={this.toggleOpen}>Toggle open</button>
<TimePicker
open={this.open}
onOpen={this.setOpen}
onClose={this.setOpen}
focusOnOpen
/>
</div>
<TimePicker
style={{ width: '100px' }}
showSecond={showSecond}
defaultValue={moment()}
class='xxx'
onChange={onChange}
/>
<TimePicker defaultValue={moment()} showSecond={false} minuteStep={15} />
<div>
<TimePicker
defaultValue={this.value}
onChange={this.handleValueChange}
/>
<TimePicker
value={this.value}
onChange={this.handleValueChange}
/>
<button onClick={this.clear}>clear</button>
</div>
</div>
)
},
}
</script>

2
examples/routes.js
View File

@ -3,7 +3,7 @@ const AsyncComp = () => {
const hashs = window.location.hash.split('/')
const d = hashs[hashs.length - 1]
return {
component: import(`../components/grid/demo/${d}`),
component: import(`../components/time-picker/demo/${d}`),
}
}
export default [

5
package-lock.json generated
View File

@ -3265,6 +3265,11 @@
"tapable": "0.2.8"
}
},
"enquire.js": {
"version": "2.1.6",
"resolved": "http://registry.npm.taobao.org/enquire.js/download/enquire.js-2.1.6.tgz",
"integrity": "sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ="
},
"ent": {
"version": "2.2.0",
"resolved": "http://r.cnpmjs.org/ent/download/ent-2.2.0.tgz",

2
package.json
View File

@ -7,7 +7,7 @@
"start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot",
"test": "karma start test/karma.conf.js --single-run",
"build": "sh build.sh",
"lint": "eslint -c ./.eslintrc --fix --ext .js ./src/",
"lint": "eslint -c ./.eslintrc --fix --ext .js ./components/time-picker/locale",
"lint:style": "stylelint \"./examples/**/*.less\" --fix --syntax less"
},
"repository": {