aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/module
diff options
context:
space:
mode:
authorafc163 <afc163@gmail.com>2015-12-12 00:55:14 +0800
committerafc163 <afc163@gmail.com>2015-12-12 00:55:14 +0800
commit182e9fccc90ae709322b7cc314c8775a9d8d46b8 (patch)
tree8abc77d6d96667ad26614e47dae3305b3f461f5c /src/module
parent85a5d3e6e9f0907780b2ed512faaf1c65d246f0d (diff)
downloadtime-picker-182e9fccc90ae709322b7cc314c8775a9d8d46b8.tar.gz
time-picker-182e9fccc90ae709322b7cc314c8775a9d8d46b8.tar.zst
time-picker-182e9fccc90ae709322b7cc314c8775a9d8d46b8.zip
select input value range when enter different select panel
Diffstat (limited to 'src/module')
-rw-r--r--src/module/Combobox.jsx12
-rw-r--r--src/module/Header.jsx31
-rw-r--r--src/module/Panel.jsx7
-rw-r--r--src/module/Select.jsx4
4 files changed, 48 insertions, 6 deletions
diff --git a/src/module/Combobox.jsx b/src/module/Combobox.jsx
index 3dfd321..a017ec9 100644
--- a/src/module/Combobox.jsx
+++ b/src/module/Combobox.jsx
@@ -21,6 +21,7 @@ const Combobox = React.createClass({
21 hourOptions: PropTypes.array, 21 hourOptions: PropTypes.array,
22 minuteOptions: PropTypes.array, 22 minuteOptions: PropTypes.array,
23 secondOptions: PropTypes.array, 23 secondOptions: PropTypes.array,
24 onCurrentSelectPanelChange: PropTypes.func,
24 }, 25 },
25 26
26 onItemChange(type, itemValue) { 27 onItemChange(type, itemValue) {
@@ -41,6 +42,10 @@ const Combobox = React.createClass({
41 onChange(value); 42 onChange(value);
42 }, 43 },
43 44
45 onEnterSelectPanel(range) {
46 this.props.onCurrentSelectPanelChange(range);
47 },
48
44 getHourSelect(hour) { 49 getHourSelect(hour) {
45 const { prefixCls, hourOptions, showHour } = this.props; 50 const { prefixCls, hourOptions, showHour } = this.props;
46 if (!showHour) { 51 if (!showHour) {
@@ -53,6 +58,7 @@ const Combobox = React.createClass({
53 selectedIndex={hourOptions.indexOf(hour)} 58 selectedIndex={hourOptions.indexOf(hour)}
54 type="hour" 59 type="hour"
55 onSelect={this.onItemChange} 60 onSelect={this.onItemChange}
61 onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
56 /> 62 />
57 ); 63 );
58 }, 64 },
@@ -66,11 +72,12 @@ const Combobox = React.createClass({
66 selectedIndex={minuteOptions.indexOf(minute)} 72 selectedIndex={minuteOptions.indexOf(minute)}
67 type="minute" 73 type="minute"
68 onSelect={this.onItemChange} 74 onSelect={this.onItemChange}
75 onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
69 /> 76 />
70 ); 77 );
71 }, 78 },
72 79
73 getSectionSelect(second) { 80 getSecondSelect(second) {
74 const { prefixCls, secondOptions, showSecond } = this.props; 81 const { prefixCls, secondOptions, showSecond } = this.props;
75 if (!showSecond) { 82 if (!showSecond) {
76 return null; 83 return null;
@@ -82,6 +89,7 @@ const Combobox = React.createClass({
82 selectedIndex={secondOptions.indexOf(second)} 89 selectedIndex={secondOptions.indexOf(second)}
83 type="second" 90 type="second"
84 onSelect={this.onItemChange} 91 onSelect={this.onItemChange}
92 onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
85 /> 93 />
86 ); 94 );
87 }, 95 },
@@ -103,7 +111,7 @@ const Combobox = React.createClass({
103 <div className={`${prefixCls}-combobox`}> 111 <div className={`${prefixCls}-combobox`}>
104 {this.getHourSelect(value.getHourOfDay())} 112 {this.getHourSelect(value.getHourOfDay())}
105 {this.getMinuteSelect(value.getMinutes())} 113 {this.getMinuteSelect(value.getMinutes())}
106 {this.getSectionSelect(value.getSeconds())} 114 {this.getSecondSelect(value.getSeconds())}
107 </div> 115 </div>
108 ); 116 );
109 }, 117 },
diff --git a/src/module/Header.jsx b/src/module/Header.jsx
index 962328c..ef88948 100644
--- a/src/module/Header.jsx
+++ b/src/module/Header.jsx
@@ -1,4 +1,5 @@
1import React, {PropTypes} from 'react'; 1import React, {PropTypes} from 'react';
2import createSelection from '../util/selection';
2 3
3const Header = React.createClass({ 4const Header = React.createClass({
4 propTypes: { 5 propTypes: {
@@ -16,6 +17,7 @@ const Header = React.createClass({
16 onClear: PropTypes.func, 17 onClear: PropTypes.func,
17 onEsc: PropTypes.func, 18 onEsc: PropTypes.func,
18 allowEmpty: PropTypes.bool, 19 allowEmpty: PropTypes.bool,
20 currentSelectPanel: PropTypes.string,
19 }, 21 },
20 22
21 getInitialState() { 23 getInitialState() {
@@ -27,9 +29,7 @@ const Header = React.createClass({
27 }, 29 },
28 30
29 componentDidMount() { 31 componentDidMount() {
30 this.timer = setTimeout(() => { 32 this.timer = setTimeout(this.selectRange, 0);
31 this.refs.input.focus();
32 }, 0);
33 }, 33 },
34 34
35 componentWillReceiveProps(nextProps) { 35 componentWillReceiveProps(nextProps) {
@@ -40,6 +40,10 @@ const Header = React.createClass({
40 }); 40 });
41 }, 41 },
42 42
43 componentDidUpdate() {
44 this.timer = setTimeout(this.selectRange, 0);
45 },
46
43 componentWillUnmount() { 47 componentWillUnmount() {
44 clearTimeout(this.timer); 48 clearTimeout(this.timer);
45 }, 49 },
@@ -139,6 +143,27 @@ const Header = React.createClass({
139 placeholder={placeholder} onChange={this.onInputChange}/>); 143 placeholder={placeholder} onChange={this.onInputChange}/>);
140 }, 144 },
141 145
146 selectRange() {
147 this.refs.input.focus();
148 if (this.props.currentSelectPanel && this.refs.input.value) {
149 let selectionRangeStart = 0;
150 let selectionRangeEnd = 0;
151 if (this.props.currentSelectPanel === 'hour') {
152 selectionRangeStart = 0;
153 selectionRangeEnd = this.refs.input.value.indexOf(':');
154 } else if (this.props.currentSelectPanel === 'minute') {
155 selectionRangeStart = this.refs.input.value.indexOf(':') + 1;
156 selectionRangeEnd = this.refs.input.value.lastIndexOf(':');
157 } else if (this.props.currentSelectPanel === 'second') {
158 selectionRangeStart = this.refs.input.value.lastIndexOf(':') + 1;
159 selectionRangeEnd = this.refs.input.value.length;
160 }
161 if (selectionRangeEnd - selectionRangeStart === 2) {
162 createSelection(this.refs.input, selectionRangeStart, selectionRangeEnd);
163 }
164 }
165 },
166
142 render() { 167 render() {
143 const { prefixCls } = this.props; 168 const { prefixCls } = this.props;
144 return ( 169 return (
diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx
index 2c2f554..63823ee 100644
--- a/src/module/Panel.jsx
+++ b/src/module/Panel.jsx
@@ -48,6 +48,7 @@ const Panel = React.createClass({
48 getInitialState() { 48 getInitialState() {
49 return { 49 return {
50 value: this.props.value, 50 value: this.props.value,
51 selectionRange: [],
51 }; 52 };
52 }, 53 },
53 54
@@ -69,6 +70,10 @@ const Panel = React.createClass({
69 this.props.onClear(); 70 this.props.onClear();
70 }, 71 },
71 72
73 onCurrentSelectPanelChange(currentSelectPanel) {
74 this.setState({ currentSelectPanel });
75 },
76
72 render() { 77 render() {
73 const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props; 78 const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
74 const value = this.state.value; 79 const value = this.state.value;
@@ -79,6 +84,7 @@ const Panel = React.createClass({
79 gregorianCalendarLocale={gregorianCalendarLocale} 84 gregorianCalendarLocale={gregorianCalendarLocale}
80 locale={locale} 85 locale={locale}
81 value={value} 86 value={value}
87 currentSelectPanel={this.state.currentSelectPanel}
82 onEsc={this.props.onEsc} 88 onEsc={this.props.onEsc}
83 formatter={formatter} 89 formatter={formatter}
84 placeholder={placeholder} 90 placeholder={placeholder}
@@ -100,6 +106,7 @@ const Panel = React.createClass({
100 hourOptions={hourOptions} 106 hourOptions={hourOptions}
101 minuteOptions={minuteOptions} 107 minuteOptions={minuteOptions}
102 secondOptions={secondOptions} 108 secondOptions={secondOptions}
109 onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
103 /> 110 />
104 </div> 111 </div>
105 ); 112 );
diff --git a/src/module/Select.jsx b/src/module/Select.jsx
index b24f20c..3659692 100644
--- a/src/module/Select.jsx
+++ b/src/module/Select.jsx
@@ -30,6 +30,7 @@ const Select = React.createClass({
30 selectedIndex: PropTypes.number, 30 selectedIndex: PropTypes.number,
31 type: PropTypes.string, 31 type: PropTypes.string,
32 onSelect: PropTypes.func, 32 onSelect: PropTypes.func,
33 onMouseEnter: PropTypes.func,
33 }, 34 },
34 35
35 componentDidMount() { 36 componentDidMount() {
@@ -79,7 +80,8 @@ const Select = React.createClass({
79 const { prefixCls } = this.props; 80 const { prefixCls } = this.props;
80 81
81 return ( 82 return (
82 <div className={`${prefixCls}-select`}> 83 <div className={`${prefixCls}-select`}
84 onMouseEnter={this.props.onMouseEnter}>
83 <ul ref="list">{this.getOptions()}</ul> 85 <ul ref="list">{this.getOptions()}</ul>
84 </div> 86 </div>
85 ); 87 );