From 0e4fd1626e460bd52a82de3f12f84d88f652dd7e Mon Sep 17 00:00:00 2001 From: shoaibbhimani Date: Thu, 24 Aug 2017 16:41:19 +0530 Subject: Add keydown function on header input --- src/Header.jsx | 6 +++++- src/Panel.jsx | 5 ++++- src/TimePicker.jsx | 5 ++++- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/Header.jsx b/src/Header.jsx index 91e8549..f6dd241 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -22,6 +22,7 @@ class Header extends Component { allowEmpty: PropTypes.bool, defaultOpenValue: PropTypes.object, currentSelectPanel: PropTypes.string, + onKeyDown: PropTypes.func, }; constructor(props) { @@ -122,9 +123,12 @@ class Header extends Component { } onKeyDown = (e) => { + const { onEsc, onKeyDown } = this.props; if (e.keyCode === 27) { - this.props.onEsc(); + onEsc(); } + + onKeyDown(e); } onClear = () => { diff --git a/src/Panel.jsx b/src/Panel.jsx index 1953ad4..8a6c872 100644 --- a/src/Panel.jsx +++ b/src/Panel.jsx @@ -40,6 +40,7 @@ class Panel extends Component { onClear: PropTypes.func, use12Hours: PropTypes.bool, addon: PropTypes.func, + onKeyDown: PropTypes.func, }; static defaultProps = { @@ -52,6 +53,7 @@ class Panel extends Component { defaultOpenValue: moment(), use12Hours: false, addon: noop, + onKeyDown: noop, }; constructor(props) { @@ -89,7 +91,7 @@ class Panel extends Component { const { prefixCls, className, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, - format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, + format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, onKeyDown, } = this.props; const { value, currentSelectPanel, @@ -122,6 +124,7 @@ class Panel extends Component { onChange={this.onChange} onClear={onClear} allowEmpty={allowEmpty} + onKeyDown={onKeyDown} /> ); } -- cgit v1.2.3 From ed31dbba2c8ef455a973f5548f4d43f244fe8fa2 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Thu, 7 Sep 2017 11:36:47 +0800 Subject: Refactor string refs to callback --- src/Select.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Select.jsx b/src/Select.jsx index 49fed5b..a51ffd2 100644 --- a/src/Select.jsx +++ b/src/Select.jsx @@ -79,7 +79,7 @@ class Select extends Component { scrollToSelected(duration) { // move to selected item const select = ReactDom.findDOMNode(this); - const list = ReactDom.findDOMNode(this.refs.list); + const list = ReactDom.findDOMNode(this.list); if (!list) { return; } @@ -101,6 +101,10 @@ class Select extends Component { this.setState({ active: false }); } + saveList = (node) => { + this.list = node; + } + render() { if (this.props.options.length === 0) { return null; @@ -118,7 +122,7 @@ class Select extends Component { onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} > -
    {this.getOptions()}
+
    {this.getOptions()}
); } -- cgit v1.2.3 From e30387aba831b80ed9bcceafe1e2b66d69ee59cc Mon Sep 17 00:00:00 2001 From: Christian Senk Date: Tue, 12 Sep 2017 19:12:40 +0200 Subject: add focus/blur support. --- src/TimePicker.jsx | 7 +++++++ tests/TimePicker.spec.jsx | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+) diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index 2c6a1f1..6e16457 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx @@ -42,6 +42,8 @@ export default class Picker extends Component { onChange: PropTypes.func, onOpen: PropTypes.func, onClose: PropTypes.func, + onFocus: PropTypes.func, + onBlur: PropTypes.func, addon: PropTypes.func, name: PropTypes.string, autoComplete: PropTypes.string, @@ -69,6 +71,8 @@ export default class Picker extends Component { onChange: noop, onOpen: noop, onClose: noop, + onFocus: noop, + onBlur: noop, addon: noop, use12Hours: false, }; @@ -231,6 +235,7 @@ export default class Picker extends Component { const { prefixCls, placeholder, placement, align, disabled, transitionName, style, className, getPopupContainer, name, autoComplete, + onFocus, onBlur, } = this.props; const { open, value } = this.state; const popupClassName = this.getPopupClassName(); @@ -260,6 +265,8 @@ export default class Picker extends Component { onKeyDown={this.onKeyDown} disabled={disabled} value={value && value.format(this.getFormat()) || ''} autoComplete={autoComplete} + onFocus={onFocus} + onBlur={onBlur} /> diff --git a/tests/TimePicker.spec.jsx b/tests/TimePicker.spec.jsx index 0dd6c10..d698e48 100644 --- a/tests/TimePicker.spec.jsx +++ b/tests/TimePicker.spec.jsx @@ -208,4 +208,40 @@ describe('TimePicker', () => { }); }); }); + + describe('other operations', () => { + it('focus/blur correctly', (done) => { + let focus = false; + let blur = false; + + const picker = renderPicker({ + onFocus: () => { + focus = true; + }, + onBlur: () => { + blur = true; + }, + }); + expect(picker.state.open).not.to.be.ok(); + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, + 'rc-time-picker-input')[0]; + + async.series([(next) => { + Simulate.focus(input); + setTimeout(next, 100); + }, (next) => { + expect(picker.state.open).to.be(false); + + Simulate.blur(input); + setTimeout(next, 100); + }, (next) => { + expect(focus).to.be(true); + expect(blur).to.be(true); + + next(); + }], () => { + done(); + }); + }); + }); }); -- cgit v1.2.3