diff options
author | MG12 <wuzhao.mail@gmail.com> | 2015-11-17 22:16:15 +0800 |
---|---|---|
committer | MG12 <wuzhao.mail@gmail.com> | 2015-11-17 22:16:15 +0800 |
commit | 4acbf95c7d2693d73b0c8c021ad892b6529d4c06 (patch) | |
tree | 1e1780ba90895d8f5901472a7c67a77186741a4f /src/TimePicker.jsx | |
parent | 78637ac02ce6a469d2021736d3cb12e98c5edbe7 (diff) | |
download | time-picker-4acbf95c7d2693d73b0c8c021ad892b6529d4c06.tar.gz time-picker-4acbf95c7d2693d73b0c8c021ad892b6529d4c06.tar.zst time-picker-4acbf95c7d2693d73b0c8c021ad892b6529d4c06.zip |
Diffstat (limited to 'src/TimePicker.jsx')
-rw-r--r-- | src/TimePicker.jsx | 44 |
1 files changed, 30 insertions, 14 deletions
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index 6bb97a1..27a793e 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx | |||
@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react'; | |||
2 | import ReactDOM from 'react-dom'; | 2 | import ReactDOM from 'react-dom'; |
3 | import Trigger from 'rc-trigger'; | 3 | import Trigger from 'rc-trigger'; |
4 | import {createChainedFunction} from 'rc-util'; | 4 | import {createChainedFunction} from 'rc-util'; |
5 | import Panel from 'rc-time-picker/src/module/Panel'; | ||
5 | import placements from './util/placements'; | 6 | import placements from './util/placements'; |
6 | import CommonMixin from './mixin/CommonMixin'; | 7 | import CommonMixin from './mixin/CommonMixin'; |
7 | 8 | ||
@@ -15,7 +16,7 @@ function refFn(field, component) { | |||
15 | const Picker = React.createClass({ | 16 | const Picker = React.createClass({ |
16 | propTypes: { | 17 | propTypes: { |
17 | prefixCls: PropTypes.string, | 18 | prefixCls: PropTypes.string, |
18 | panel: PropTypes.element, | 19 | locale: PropTypes.object, |
19 | children: PropTypes.func, | 20 | children: PropTypes.func, |
20 | disabled: PropTypes.bool, | 21 | disabled: PropTypes.bool, |
21 | value: PropTypes.object, | 22 | value: PropTypes.object, |
@@ -23,6 +24,11 @@ const Picker = React.createClass({ | |||
23 | align: PropTypes.object, | 24 | align: PropTypes.object, |
24 | placement: PropTypes.any, | 25 | placement: PropTypes.any, |
25 | transitionName: PropTypes.string, | 26 | transitionName: PropTypes.string, |
27 | placeholder: PropTypes.string, | ||
28 | formatter: PropTypes.object, | ||
29 | hourOptions: PropTypes.array, | ||
30 | minuteOptions: PropTypes.array, | ||
31 | secondOptions: PropTypes.array, | ||
26 | onChange: PropTypes.func, | 32 | onChange: PropTypes.func, |
27 | onOpen: PropTypes.func, | 33 | onOpen: PropTypes.func, |
28 | onClose: PropTypes.func, | 34 | onClose: PropTypes.func, |
@@ -66,19 +72,35 @@ const Picker = React.createClass({ | |||
66 | }, | 72 | }, |
67 | 73 | ||
68 | onPanelClear() { | 74 | onPanelClear() { |
69 | this.setOpen(false, this.focus); | 75 | this.setOpen(false); |
70 | }, | 76 | }, |
71 | 77 | ||
72 | onVisibleChange(open) { | 78 | onVisibleChange(open) { |
73 | this.setOpen(open, () => { | 79 | this.setOpen(open, () => { |
74 | if (open) { | 80 | if (open) { |
81 | ReactDOM.findDOMNode(this.refs.picker).blur(); | ||
75 | ReactDOM.findDOMNode(this.panelInstance).focus(); | 82 | ReactDOM.findDOMNode(this.panelInstance).focus(); |
76 | } | 83 | } |
77 | }); | 84 | }); |
78 | }, | 85 | }, |
79 | 86 | ||
87 | getPanel() { | ||
88 | const { value, locale, formatter, placeholder, hourOptions, minuteOptions, secondOptions } = this.props; | ||
89 | return ( | ||
90 | <Panel | ||
91 | defaultValue={value} | ||
92 | locale={locale} | ||
93 | formatter={formatter} | ||
94 | placeholder={placeholder} | ||
95 | hourOptions={hourOptions} | ||
96 | minuteOptions={minuteOptions} | ||
97 | secondOptions={secondOptions} | ||
98 | /> | ||
99 | ); | ||
100 | }, | ||
101 | |||
80 | getPanelElement() { | 102 | getPanelElement() { |
81 | const panel = this.props.panel; | 103 | const panel = this.getPanel(); |
82 | const extraProps = { | 104 | const extraProps = { |
83 | ref: this.savePanelRef, | 105 | ref: this.savePanelRef, |
84 | defaultValue: this.state.value || panel.props.defaultValue, | 106 | defaultValue: this.state.value || panel.props.defaultValue, |
@@ -106,16 +128,10 @@ const Picker = React.createClass({ | |||
106 | } | 128 | } |
107 | }, | 129 | }, |
108 | 130 | ||
109 | focus() { | ||
110 | if (!this.state.open) { | ||
111 | ReactDOM.findDOMNode(this).focus(); | ||
112 | } | ||
113 | }, | ||
114 | |||
115 | render() { | 131 | render() { |
116 | const state = this.state; | 132 | const { prefixCls, placement, align, disabled, transitionName, children, formatter } = this.props; |
117 | const props = this.props; | 133 | const { open, value } = this.state; |
118 | const { prefixCls, placement, align, disabled, transitionName, children } = props; | 134 | |
119 | return ( | 135 | return ( |
120 | <Trigger | 136 | <Trigger |
121 | prefixCls={prefixCls} | 137 | prefixCls={prefixCls} |
@@ -126,11 +142,11 @@ const Picker = React.createClass({ | |||
126 | action={disabled ? [] : ['click']} | 142 | action={disabled ? [] : ['click']} |
127 | destroyPopupOnHide | 143 | destroyPopupOnHide |
128 | popupTransitionName={transitionName} | 144 | popupTransitionName={transitionName} |
129 | popupVisible={state.open} | 145 | popupVisible={open} |
130 | onPopupVisibleChange={this.onVisibleChange} | 146 | onPopupVisibleChange={this.onVisibleChange} |
131 | > | 147 | > |
132 | <span className={`${prefixCls}-picker`}> | 148 | <span className={`${prefixCls}-picker`}> |
133 | {children(state, props)} | 149 | <input ref="picker" type="text" placeholder="请选择时间" readOnly disabled={disabled} value={value && formatter.format(value)} /> |
134 | </span> | 150 | </span> |
135 | </Trigger> | 151 | </Trigger> |
136 | ); | 152 | ); |