diff options
-rw-r--r-- | README.md | 1 | ||||
-rw-r--r-- | examples/open.js | 7 | ||||
-rw-r--r-- | src/Header.jsx | 9 | ||||
-rw-r--r-- | src/Panel.jsx | 4 | ||||
-rw-r--r-- | src/TimePicker.jsx | 5 |
5 files changed, 23 insertions, 3 deletions
@@ -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 | } |