Make event handlers private

This commit is contained in:
Josh Johnson 2018-05-25 09:22:14 +01:00
parent b3956db628
commit 8f67de4844
6 changed files with 110 additions and 125 deletions

View file

@ -344,10 +344,6 @@ class Choices {
* @public * @public
*/ */
removeActiveItemsByValue(value) { removeActiveItemsByValue(value) {
if (!value) {
return this;
}
this._store.activeItems this._store.activeItems
.filter(item => item.value === value) .filter(item => item.value === value)
.forEach(item => this._removeItem(item)); .forEach(item => this._removeItem(item));
@ -448,7 +444,7 @@ class Choices {
if (this.dropdown.isActive) { if (this.dropdown.isActive) {
this.hideDropdown(); this.hideDropdown();
} else { } else {
this.showDropdown(true); this.showDropdown(true); // code smell 🤢
} }
return this; return this;
@ -462,9 +458,8 @@ class Choices {
* @public * @public
*/ */
getValue(valueOnly = false) { getValue(valueOnly = false) {
const items = this._store.activeItems; const values = this._store.activeItems
.reduce((selectedItems, item) => {
const values = items.reduce((selectedItems, item) => {
const itemValue = valueOnly ? item.value : item; const itemValue = valueOnly ? item.value : item;
selectedItems.push(itemValue); selectedItems.push(itemValue);
return selectedItems; return selectedItems;

View file

@ -1204,15 +1204,6 @@ describe('choices', () => {
}); });
describe('removeActiveItemsByValue', () => { describe('removeActiveItemsByValue', () => {
describe('passing invalid value', () => {
beforeEach(() => {
output = instance.removeActiveItemsByValue(null);
});
returnsInstance(output);
});
describe('passing valid value', () => {
let activeItemsStub; let activeItemsStub;
let removeItemStub; let removeItemStub;
const value = 'Removed'; const value = 'Removed';
@ -1250,7 +1241,6 @@ describe('choices', () => {
expect(removeItemStub.secondCall.args[0]).to.equal(items[2]); expect(removeItemStub.secondCall.args[0]).to.equal(items[2]);
}); });
}); });
});
describe('removeActiveItems', () => { describe('removeActiveItems', () => {
let activeItemsStub; let activeItemsStub;

View file

@ -10,16 +10,16 @@ export default class Container {
this.isDisabled = false; this.isDisabled = false;
this.isLoading = false; this.isLoading = false;
this.onFocus = this.onFocus.bind(this); this._onFocus = this._onFocus.bind(this);
this.onBlur = this.onBlur.bind(this); this._onBlur = this._onBlur.bind(this);
} }
/** /**
* Add event listeners * Add event listeners
*/ */
addEventListeners() { addEventListeners() {
this.element.addEventListener('focus', this.onFocus); this.element.addEventListener('focus', this._onFocus);
this.element.addEventListener('blur', this.onBlur); this.element.addEventListener('blur', this._onBlur);
} }
/** /**
@ -28,22 +28,8 @@ export default class Container {
/** */ /** */
removeEventListeners() { removeEventListeners() {
this.element.removeEventListener('focus', this.onFocus); this.element.removeEventListener('focus', this._onFocus);
this.element.removeEventListener('blur', this.onBlur); this.element.removeEventListener('blur', this._onBlur);
}
/**
* Set focussed state
*/
onFocus() {
this.isFocussed = true;
}
/**
* Remove blurred state
*/
onBlur() {
this.isFocussed = false;
} }
/** /**
@ -177,4 +163,18 @@ export default class Container {
this.element.removeAttribute('aria-busy'); this.element.removeAttribute('aria-busy');
this.isLoading = false; this.isLoading = false;
} }
/**
* Set focussed state
*/
_onFocus() {
this.isFocussed = true;
}
/**
* Remove blurred state
*/
_onBlur() {
this.isFocussed = false;
}
} }

View file

@ -77,7 +77,7 @@ describe('components/container', () => {
describe('onFocus', () => { describe('onFocus', () => {
it('sets isFocussed flag to true', () => { it('sets isFocussed flag to true', () => {
expect(instance.isFocussed).to.equal(false); expect(instance.isFocussed).to.equal(false);
instance.onFocus(); instance._onFocus();
expect(instance.isFocussed).to.equal(true); expect(instance.isFocussed).to.equal(true);
}); });
}); });
@ -85,7 +85,7 @@ describe('components/container', () => {
describe('onBlur', () => { describe('onBlur', () => {
it('sets isFocussed flag to false', () => { it('sets isFocussed flag to false', () => {
instance.isFocussed = true; instance.isFocussed = true;
instance.onBlur(); instance._onBlur();
expect(instance.isFocussed).to.equal(false); expect(instance.isFocussed).to.equal(false);
}); });
}); });

View file

@ -10,10 +10,10 @@ export default class Input {
this.isDisabled = false; this.isDisabled = false;
// Bind event listeners // Bind event listeners
this.onPaste = this.onPaste.bind(this); this._onPaste = this._onPaste.bind(this);
this.onInput = this.onInput.bind(this); this._onInput = this._onInput.bind(this);
this.onFocus = this.onFocus.bind(this); this._onFocus = this._onFocus.bind(this);
this.onBlur = this.onBlur.bind(this); this._onBlur = this._onBlur.bind(this);
} }
set placeholder(placeholder) { set placeholder(placeholder) {
@ -29,49 +29,17 @@ export default class Input {
} }
addEventListeners() { addEventListeners() {
this.element.addEventListener('input', this.onInput); this.element.addEventListener('input', this._onInput);
this.element.addEventListener('paste', this.onPaste); this.element.addEventListener('paste', this._onPaste);
this.element.addEventListener('focus', this.onFocus); this.element.addEventListener('focus', this._onFocus);
this.element.addEventListener('blur', this.onBlur); this.element.addEventListener('blur', this._onBlur);
} }
removeEventListeners() { removeEventListeners() {
this.element.removeEventListener('input', this.onInput); this.element.removeEventListener('input', this._onInput);
this.element.removeEventListener('paste', this.onPaste); this.element.removeEventListener('paste', this._onPaste);
this.element.removeEventListener('focus', this.onFocus); this.element.removeEventListener('focus', this._onFocus);
this.element.removeEventListener('blur', this.onBlur); this.element.removeEventListener('blur', this._onBlur);
}
/**
* Input event
* @return
* @private
*/
onInput() {
if (this.type !== 'select-one') {
this.setWidth();
}
}
/**
* Paste event
* @param {Object} e Event
* @return
* @private
*/
onPaste(e) {
// Disable pasting into the input if option has been set
if (e.target === this.element && this.preventPaste) {
e.preventDefault();
}
}
onFocus() {
this.isFocussed = true;
}
onBlur() {
this.isFocussed = false;
} }
enable() { enable() {
@ -146,4 +114,36 @@ export default class Input {
removeActiveDescendant() { removeActiveDescendant() {
this.element.removeAttribute('aria-activedescendant'); this.element.removeAttribute('aria-activedescendant');
} }
/**
* Input event
* @return
* @private
*/
_onInput() {
if (this.type !== 'select-one') {
this.setWidth();
}
}
/**
* Paste event
* @param {Object} e Event
* @return
* @private
*/
_onPaste(e) {
// Disable pasting into the input if option has been set
if (e.target === this.element && this.preventPaste) {
e.preventDefault();
}
}
_onFocus() {
this.isFocussed = true;
}
_onBlur() {
this.isFocussed = false;
}
} }

View file

@ -90,7 +90,7 @@ describe('components/input', () => {
describe('when element is select one', () => { describe('when element is select one', () => {
it('does not set input width', () => { it('does not set input width', () => {
instance.type = 'select-one'; instance.type = 'select-one';
instance.onInput(); instance._onInput();
expect(setWidthStub.callCount).to.equal(0); expect(setWidthStub.callCount).to.equal(0);
}); });
}); });
@ -98,7 +98,7 @@ describe('components/input', () => {
describe('when element is not a select one', () => { describe('when element is not a select one', () => {
it('sets input width', () => { it('sets input width', () => {
instance.type = 'text'; instance.type = 'text';
instance.onInput(); instance._onInput();
expect(setWidthStub.callCount).to.equal(1); expect(setWidthStub.callCount).to.equal(1);
}); });
}); });
@ -117,7 +117,7 @@ describe('components/input', () => {
describe('when pasting is disabled and target is the element', () => { describe('when pasting is disabled and target is the element', () => {
it('prevents default pasting behaviour', () => { it('prevents default pasting behaviour', () => {
instance.preventPaste = true; instance.preventPaste = true;
instance.onPaste(eventMock); instance._onPaste(eventMock);
expect(eventMock.preventDefault.callCount).to.equal(1); expect(eventMock.preventDefault.callCount).to.equal(1);
}); });
}); });
@ -125,7 +125,7 @@ describe('components/input', () => {
describe('when pasting is enabled', () => { describe('when pasting is enabled', () => {
it('does not prevent default pasting behaviour', () => { it('does not prevent default pasting behaviour', () => {
instance.preventPaste = false; instance.preventPaste = false;
instance.onPaste(eventMock); instance._onPaste(eventMock);
expect(eventMock.preventDefault.callCount).to.equal(0); expect(eventMock.preventDefault.callCount).to.equal(0);
}); });
}); });
@ -134,7 +134,7 @@ describe('components/input', () => {
describe('onFocus', () => { describe('onFocus', () => {
it('sets isFocussed flag to true', () => { it('sets isFocussed flag to true', () => {
expect(instance.isFocussed).to.equal(false); expect(instance.isFocussed).to.equal(false);
instance.onFocus(); instance._onFocus();
expect(instance.isFocussed).to.equal(true); expect(instance.isFocussed).to.equal(true);
}); });
}); });
@ -142,7 +142,7 @@ describe('components/input', () => {
describe('onBlur', () => { describe('onBlur', () => {
it('sets isFocussed flag to false', () => { it('sets isFocussed flag to false', () => {
instance.isFocussed = true; instance.isFocussed = true;
instance.onBlur(); instance._onBlur();
expect(instance.isFocussed).to.equal(false); expect(instance.isFocussed).to.equal(false);
}); });
}); });