aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--README.md1
-rw-r--r--examples/open.js7
-rw-r--r--src/Header.jsx9
-rw-r--r--src/Panel.jsx4
-rw-r--r--src/TimePicker.jsx5
5 files changed, 23 insertions, 3 deletions
diff --git a/README.md b/README.md
index a2758b9..0698d7d 100644
--- a/README.md
+++ b/README.md
@@ -77,6 +77,7 @@ API
77| name | String | - | sets the name of the generated input | 77| name | String | - | sets the name of the generated input |
78| onOpen | Function({ open }) | | when TimePicker panel is opened | 78| onOpen | Function({ open }) | | when TimePicker panel is opened |
79| onClose | Function({ open }) | | when TimePicker panel is opened | 79| onClose | Function({ open }) | | when TimePicker panel is opened |
80| focusOnOpen | Boolean | false | automatically focus the input when the picker opens |
80 81
81## Test Case 82## Test Case
82 83
diff --git a/examples/open.js b/examples/open.js
index 8e4f5de..12d8a8d 100644
--- a/examples/open.js
+++ b/examples/open.js
@@ -22,7 +22,12 @@ class App extends React.Component {
22 return ( 22 return (
23 <div> 23 <div>
24 <button onClick={this.toggleOpen}>Toggle open</button> 24 <button onClick={this.toggleOpen}>Toggle open</button>
25 <TimePicker open={this.state.open} onOpen={this.setOpen} onClose={this.setOpen} /> 25 <TimePicker
26 open={this.state.open}
27 onOpen={this.setOpen}
28 onClose={this.setOpen}
29 focusOnOpen
30 />
26 </div> 31 </div>
27 ); 32 );
28 } 33 }
diff --git a/src/Header.jsx b/src/Header.jsx
index 91e8549..9e80a9c 100644
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -22,6 +22,7 @@ class Header extends Component {
22 allowEmpty: PropTypes.bool, 22 allowEmpty: PropTypes.bool,
23 defaultOpenValue: PropTypes.object, 23 defaultOpenValue: PropTypes.object,
24 currentSelectPanel: PropTypes.string, 24 currentSelectPanel: PropTypes.string,
25 focusOnOpen: PropTypes.bool,
25 }; 26 };
26 27
27 constructor(props) { 28 constructor(props) {
@@ -33,6 +34,14 @@ class Header extends Component {
33 }; 34 };
34 } 35 }
35 36
37 componentDidMount() {
38 if (this.props.focusOnOpen) {
39 // Wait one frame for the panel to be positioned before focusing
40 const requestAnimationFrame = (window.requestAnimationFrame || window.setTimeout);
41 requestAnimationFrame(() => this.refs.input.focus());
42 }
43 }
44
36 componentWillReceiveProps(nextProps) { 45 componentWillReceiveProps(nextProps) {
37 const { value, format } = nextProps; 46 const { value, format } = nextProps;
38 this.setState({ 47 this.setState({
diff --git a/src/Panel.jsx b/src/Panel.jsx
index 1953ad4..deeba52 100644
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -40,6 +40,7 @@ class Panel extends Component {
40 onClear: PropTypes.func, 40 onClear: PropTypes.func,
41 use12Hours: PropTypes.bool, 41 use12Hours: PropTypes.bool,
42 addon: PropTypes.func, 42 addon: PropTypes.func,
43 focusOnOpen: PropTypes.bool,
43 }; 44 };
44 45
45 static defaultProps = { 46 static defaultProps = {
@@ -89,7 +90,7 @@ class Panel extends Component {
89 const { 90 const {
90 prefixCls, className, placeholder, disabledHours, disabledMinutes, 91 prefixCls, className, placeholder, disabledHours, disabledMinutes,
91 disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, 92 disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
92 format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, 93 format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, focusOnOpen,
93 } = this.props; 94 } = this.props;
94 const { 95 const {
95 value, currentSelectPanel, 96 value, currentSelectPanel,
@@ -122,6 +123,7 @@ class Panel extends Component {
122 onChange={this.onChange} 123 onChange={this.onChange}
123 onClear={onClear} 124 onClear={onClear}
124 allowEmpty={allowEmpty} 125 allowEmpty={allowEmpty}
126 focusOnOpen={focusOnOpen}
125 /> 127 />
126 <Combobox 128 <Combobox
127 prefixCls={prefixCls} 129 prefixCls={prefixCls}
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index 2c6a1f1..e017527 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -46,6 +46,7 @@ export default class Picker extends Component {
46 name: PropTypes.string, 46 name: PropTypes.string,
47 autoComplete: PropTypes.string, 47 autoComplete: PropTypes.string,
48 use12Hours: PropTypes.bool, 48 use12Hours: PropTypes.bool,
49 focusOnOpen: PropTypes.bool,
49 }; 50 };
50 51
51 static defaultProps = { 52 static defaultProps = {
@@ -71,6 +72,7 @@ export default class Picker extends Component {
71 onClose: noop, 72 onClose: noop,
72 addon: noop, 73 addon: noop,
73 use12Hours: false, 74 use12Hours: false,
75 focusOnOpen: false,
74 }; 76 };
75 77
76 constructor(props) { 78 constructor(props) {
@@ -157,7 +159,7 @@ export default class Picker extends Component {
157 prefixCls, placeholder, disabledHours, 159 prefixCls, placeholder, disabledHours,
158 disabledMinutes, disabledSeconds, hideDisabledOptions, 160 disabledMinutes, disabledSeconds, hideDisabledOptions,
159 allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText, 161 allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
160 addon, use12Hours, 162 addon, use12Hours, focusOnOpen,
161 } = this.props; 163 } = this.props;
162 return ( 164 return (
163 <Panel 165 <Panel
@@ -181,6 +183,7 @@ export default class Picker extends Component {
181 hideDisabledOptions={hideDisabledOptions} 183 hideDisabledOptions={hideDisabledOptions}
182 use12Hours={use12Hours} 184 use12Hours={use12Hours}
183 addon={addon} 185 addon={addon}
186 focusOnOpen={focusOnOpen}
184 /> 187 />
185 ); 188 );
186 } 189 }