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 | |
parent | 78637ac02ce6a469d2021736d3cb12e98c5edbe7 (diff) | |
download | time-picker-4acbf95c7d2693d73b0c8c021ad892b6529d4c06.tar.gz time-picker-4acbf95c7d2693d73b0c8c021ad892b6529d4c06.tar.zst time-picker-4acbf95c7d2693d73b0c8c021ad892b6529d4c06.zip |
Diffstat (limited to 'src')
-rw-r--r-- | src/TimePicker.jsx | 44 | ||||
-rw-r--r-- | src/module/Panel.jsx (renamed from src/TimePanel.jsx) | 22 |
2 files changed, 45 insertions, 21 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 | ); |
diff --git a/src/TimePanel.jsx b/src/module/Panel.jsx index 110ca1e..4220da8 100644 --- a/src/TimePanel.jsx +++ b/src/module/Panel.jsx | |||
@@ -1,8 +1,11 @@ | |||
1 | import React, {PropTypes} from 'react'; | 1 | import React, {PropTypes} from 'react'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import CommonMixin from './mixin/CommonMixin'; | 3 | import GregorianCalendar from 'gregorian-calendar'; |
4 | import Header from './module/Header'; | 4 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; |
5 | import Combobox from './module/Combobox'; | 5 | |
6 | import CommonMixin from '../mixin/CommonMixin'; | ||
7 | import Header from './Header'; | ||
8 | import Combobox from './Combobox'; | ||
6 | 9 | ||
7 | function noop() { | 10 | function noop() { |
8 | } | 11 | } |
@@ -13,7 +16,7 @@ function generateOptions(length) { | |||
13 | }); | 16 | }); |
14 | } | 17 | } |
15 | 18 | ||
16 | const TimePanel = React.createClass({ | 19 | const Panel = React.createClass({ |
17 | propTypes: { | 20 | propTypes: { |
18 | prefixCls: PropTypes.string, | 21 | prefixCls: PropTypes.string, |
19 | defaultValue: PropTypes.object, | 22 | defaultValue: PropTypes.object, |
@@ -40,8 +43,13 @@ const TimePanel = React.createClass({ | |||
40 | }, | 43 | }, |
41 | 44 | ||
42 | getInitialState() { | 45 | getInitialState() { |
46 | let defaultValue = this.props.defaultValue; | ||
47 | if (!defaultValue) { | ||
48 | defaultValue = new GregorianCalendar(zhCn); | ||
49 | defaultValue.setTime(Date.now()); | ||
50 | } | ||
43 | return { | 51 | return { |
44 | value: this.props.defaultValue, | 52 | value: defaultValue, |
45 | }; | 53 | }; |
46 | }, | 54 | }, |
47 | 55 | ||
@@ -90,7 +98,7 @@ const TimePanel = React.createClass({ | |||
90 | <div className={`${prefixCls}-panel ${cls}`}> | 98 | <div className={`${prefixCls}-panel ${cls}`}> |
91 | <Header | 99 | <Header |
92 | prefixCls={prefixCls} | 100 | prefixCls={prefixCls} |
93 | gregorianTimePickerLocale={defaultValue.locale} | 101 | gregorianTimePickerLocale={value.locale} |
94 | locale={locale} | 102 | locale={locale} |
95 | value={value} | 103 | value={value} |
96 | formatter={this.getFormatter()} | 104 | formatter={this.getFormatter()} |
@@ -118,4 +126,4 @@ const TimePanel = React.createClass({ | |||
118 | }, | 126 | }, |
119 | }); | 127 | }); |
120 | 128 | ||
121 | export default TimePanel; | 129 | export default Panel; |