Skip to content

Commit

Permalink
[changed] Move focus handling to Mixin for consistency
Browse files Browse the repository at this point in the history
  • Loading branch information
@jquense
jquense committed Feb 7, 2016
1 parent fd6bada commit 31151a8
Show file tree
Hide file tree
Showing 8 changed files with 145 additions and 151 deletions.
29 changes: 10 additions & 19 deletions src/Calendar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,13 @@ let Calendar = React.createClass({
require('./mixins/TimeoutMixin'),
require('./mixins/PureRenderMixin'),
require('./mixins/RtlParentContextMixin'),
require('./mixins/AriaDescendantMixin')()
require('./mixins/AriaDescendantMixin')(),
require('./mixins/FocusMixin')({
willHandle() {
if (+this.props.tabIndex === -1)
return false
}
})
],

propTypes,
Expand Down Expand Up @@ -188,8 +194,8 @@ let Calendar = React.createClass({
<div {...elementProps}
role='group'
onKeyDown={this._keyDown}
onFocus={this._focus.bind(null, true)}
onBlur ={this._focus.bind(null, false)}
onBlur={this.handleBlur}
onFocus={this.handleFocus}
className={cx(className, 'rw-calendar', 'rw-widget', {
'rw-state-focus': focused,
'rw-state-disabled': disabled,
Expand Down Expand Up @@ -275,23 +281,8 @@ let Calendar = React.createClass({
focus() {
if (+this.props.tabIndex > -1)
compat.findDOMNode(this).focus()

//console.log(document.activeElement)
},

@widgetEnabled
_focus(focused, e){
if (+this.props.tabIndex === -1)
return

this.setTimeout('focus', () => {
if( focused !== this.state.focused){
notify(this.props[focused ? 'onFocus' : 'onBlur'], e)
this.setState({ focused })
}
})
},


@widgetEditable
change(date){
if (this.state.view === this.props.initialView){
Expand Down
33 changes: 13 additions & 20 deletions src/Combobox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import GroupableList from './ListGroupable';
import validateList from './util/validateListInterface';
import createUncontrolledWidget from 'uncontrollable';
import { dataItem, dataText, dataIndexOf } from './util/dataHelpers';
import { widgetEditable, widgetEnabled, isDisabled, isReadOnly } from './util/interaction';
import { widgetEditable, isDisabled, isReadOnly } from './util/interaction';
import { instanceId, notify, isFirstFocusedRender } from './util/widgetHelpers';

let defaultSuggest = f => f === true ? 'startsWith' : f ? f : 'eq'
Expand Down Expand Up @@ -70,7 +70,16 @@ var ComboBox = React.createClass({
require('./mixins/DataFilterMixin'),
require('./mixins/PopupScrollToMixin'),
require('./mixins/RtlParentContextMixin'),
require('./mixins/AriaDescendantMixin')('input')
require('./mixins/AriaDescendantMixin')('input'),
require('./mixins/FocusMixin')({
willHandle(focused) {
// not suggesting anymore
!focused && this.refs.input.accept()
},
didHandle(focused) {
if (!focused) this.close()
}
})
],

propTypes: propTypes,
Expand Down Expand Up @@ -174,8 +183,8 @@ var ComboBox = React.createClass({
{...elementProps}
ref="element"
onKeyDown={this._keyDown}
onFocus={this._focus.bind(null, true)}
onBlur ={this._focus.bind(null, false)}
onBlur={this.handleBlur}
onFocus={this.handleFocus}
tabIndex={'-1'}
className={cx(className, 'rw-combobox', 'rw-widget', {
'rw-state-focus': focused,
Expand Down Expand Up @@ -287,22 +296,6 @@ var ComboBox = React.createClass({
this.refs.input.focus()
},

@widgetEnabled
_focus(focused, e){

!focused && this.refs.input.accept() //not suggesting anymore

this.setTimeout('focus', () => {

if( !focused) this.close()

if( focused !== this.state.focused) {
notify(this.props[focused ? 'onFocus' : 'onBlur'], e)
this.setState({ focused: focused })
}
})
},

@widgetEditable
_keyDown(e){
var self = this
Expand Down
24 changes: 8 additions & 16 deletions src/DateTimePicker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import DateInput from './DateInput';
import Btn from './WidgetButton';
import CustomPropTypes from './util/propTypes';
import createUncontrolledWidget from 'uncontrollable';
import { widgetEditable, widgetEnabled } from './util/interaction';
import { widgetEditable } from './util/interaction';
import { instanceId, notify, isFirstFocusedRender } from './util/widgetHelpers';

let { calendarViews: views, datePopups: popups } = constants;
Expand Down Expand Up @@ -90,6 +90,11 @@ var DateTimePicker = React.createClass({
require('./mixins/PureRenderMixin'),
require('./mixins/PopupScrollToMixin'),
require('./mixins/RtlParentContextMixin'),
require('./mixins/FocusMixin')({
didHandle(focused) {
if (!focused) this.close()
}
}),
require('./mixins/AriaDescendantMixin')('valueInput', function(key, id){
var { open } = this.props
, current = this.ariaActiveDescendant()
Expand Down Expand Up @@ -168,8 +173,8 @@ var DateTimePicker = React.createClass({
tabIndex={'-1'}
onKeyDown={this._keyDown}
onKeyPress={this._keyPress}
onFocus={this._focus.bind(null, true)}
onBlur={this._focus.bind(null, false)}
onBlur={this.handleBlur}
onFocus={this.handleFocus}
className={cx(className, 'rw-datetimepicker', 'rw-widget', {
'rw-state-focus': focused,
'rw-state-disabled': disabled,
Expand Down Expand Up @@ -356,19 +361,6 @@ var DateTimePicker = React.createClass({
this.refs.timePopup._keyPress(e)
},

@widgetEnabled
_focus(focused, e){

this.setTimeout('focus', () => {
if (!focused) this.close()

if (focused !== this.state.focused){
notify(this.props[focused ? 'onFocus' : 'onBlur'], e)
this.setState({ focused })
}
})
},

focus(){
if (activeElement() !== compat.findDOMNode(this.refs.valueInput))
this.refs.valueInput.focus()
Expand Down
24 changes: 8 additions & 16 deletions src/DropdownList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,12 @@ var DropdownList = React.createClass({
require('./mixins/DataFilterMixin'),
require('./mixins/PopupScrollToMixin'),
require('./mixins/RtlParentContextMixin'),
require('./mixins/AriaDescendantMixin')()
require('./mixins/AriaDescendantMixin')(),
require('./mixins/FocusMixin')({
didHandle(focused) {
if (!focused) this.close()
}
})
],

propTypes: propTypes,
Expand Down Expand Up @@ -160,8 +165,8 @@ var DropdownList = React.createClass({
onKeyDown={this._keyDown}
onKeyPress={this._keyPress}
onClick={this._click}
onFocus={this._focus.bind(null, true)}
onBlur ={this._focus.bind(null, false)}
onBlur={this.handleBlur}
onFocus={this.handleFocus}
className={cx(className, 'rw-dropdownlist', 'rw-widget', {
'rw-state-disabled': disabled,
'rw-state-readonly': readOnly,
Expand Down Expand Up @@ -231,19 +236,6 @@ var DropdownList = React.createClass({
)
},

@widgetEnabled
_focus(focused, e){

this.setTimeout('focus', () => {
if (!focused) this.close()

if (focused !== this.state.focused) {
notify(this.props[focused ? 'onFocus' : 'onBlur'], e)
this.setState({ focused: focused })
}
})
},

@widgetEditable
_onSelect(data){
this.close()
Expand Down
83 changes: 39 additions & 44 deletions src/Multiselect.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import GroupableList from './ListGroupable';
import validateList from './util/validateListInterface';
import createUncontrolledWidget from 'uncontrollable';
import { dataItem, dataText, valueMatcher } from './util/dataHelpers';
import { widgetEditable, widgetEnabled } from './util/interaction';
import { widgetEditable } from './util/interaction';
import { instanceId, notify, isFirstFocusedRender } from './util/widgetHelpers';

var compatCreate = (props, msgs) => typeof msgs.createNew === 'function'
Expand Down Expand Up @@ -76,6 +76,20 @@ var Multiselect = React.createClass({
require('./mixins/DataFilterMixin'),
require('./mixins/PopupScrollToMixin'),
require('./mixins/RtlParentContextMixin'),
require('./mixins/FocusMixin')({
willHandle(focused) {
focused && this.focus()
},
didHandle(focused) {
if (!focused) this.close()

if (!focused && this.refs.tagList)
this.setState({ focusedTag: null })

if (focused && !this.props.open)
this.open()
}
}),
require('./mixins/AriaDescendantMixin')('input', function(key, id){
let { ariaActiveDescendantKey: myKey } = this.props;

Expand Down Expand Up @@ -191,9 +205,9 @@ var Multiselect = React.createClass({
ref="element"
id={instanceId(this)}
onKeyDown={this._keyDown}
onFocus={this._focus.bind(null, true)}
onBlur ={this._focus.bind(null, false)}
onTouchEnd={this._focus.bind(null, true)}
onBlur={this.handleBlur}
onFocus={this.handleFocus}
onTouchEnd={this.handleFocus}
tabIndex={'-1'}
className={cx(className, 'rw-widget', 'rw-multiselect', {
'rw-state-focus': focused,
Expand Down Expand Up @@ -255,9 +269,8 @@ var Multiselect = React.createClass({
onKeyDown={this._searchKeyDown}
onKeyUp={this._searchgKeyUp}
onChange={this._typing}
onFocus={this._inputFocus}
onClick={this._inputFocus}
onTouchEnd={this._inputFocus}
onClick={this.handleInputInteraction}
onTouchEnd={this.handleInputInteraction}
/>
</div>
<Popup {...popupProps}
Expand Down Expand Up @@ -309,54 +322,32 @@ var Multiselect = React.createClass({
return this.state.processedData
},

_delete(value){
this._focus(true)
_delete(value) {
this.focus()
this.change(
this.state.dataItems.filter( d => d !== value))
},

_inputFocus(){
this._focus(true)
!this.props.open && this.open()
},

@widgetEnabled
_focus(focused, e){
if (this.props.disabled === true )
return

if(focused) this.refs.input.focus()

this.setTimeout('focus', () => {
if(!focused)
this.refs.tagList && this.setState({ focusedTag: null })

if(focused !== this.state.focused) {
focused
? this.open()
: this.close();

notify(this.props[focused ? 'onFocus' : 'onBlur'], e)
this.setState({ focused: focused })
}
})
},

_searchKeyDown(e){
_searchKeyDown(e) {
if (e.key === 'Backspace' && e.target.value && !this._deletingText)
this._deletingText = true
},

_searchgKeyUp(e){
_searchgKeyUp(e) {
if (e.key === 'Backspace' && this._deletingText)
this._deletingText = false
},

_typing(e){
_typing(e) {
notify(this.props.onSearch, [ e.target.value ])
this.open()
},

@widgetEditable
handleInputInteraction() {
this.open()
},

@widgetEditable
_onSelect(data){

Expand All @@ -371,7 +362,7 @@ var Multiselect = React.createClass({
this.change(this.state.dataItems.concat(data))

this.close()
this._focus(true)
this.focus()
},

@widgetEditable
Expand All @@ -384,7 +375,7 @@ var Multiselect = React.createClass({
&& notify(this.props.onSearch, [ '' ])

this.close()
this._focus(true)
this.focus()
},

@widgetEditable
Expand Down Expand Up @@ -461,8 +452,12 @@ var Multiselect = React.createClass({
notify(this.props.onSearch, [ '' ])
},

open(){
if (!(this.props.disabled === true || this.props.readOnly === true))
focus() {
this.refs.input.focus()
},

open() {
if (!this.props.open)
notify(this.props.onToggle, true)
},

Expand Down Expand Up @@ -521,4 +516,4 @@ function msgs(msgs){
}

export default createUncontrolledWidget(Multiselect
, { open: 'onToggle', value: 'onChange', searchTerm: 'onSearch' });
, { open: 'onToggle', value: 'onChange', searchTerm: 'onSearch' }, ['focus']);
Loading

0 comments on commit 31151a8

Please sign in to comment.