mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-08 00:42:15 +02:00
Use getters and setters appropriately
This commit is contained in:
parent
275295adc5
commit
152b740670
|
@ -119,9 +119,9 @@ class Choices {
|
||||||
this.presetItems = this.config.items;
|
this.presetItems = this.config.items;
|
||||||
|
|
||||||
// Then add any values passed from attribute
|
// Then add any values passed from attribute
|
||||||
if (this.passedElement.getValue()) {
|
if (this.passedElement.value) {
|
||||||
this.presetItems = this.presetItems.concat(
|
this.presetItems = this.presetItems.concat(
|
||||||
this.passedElement.getValue().split(this.config.delimiter),
|
this.passedElement.value.split(this.config.delimiter),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -220,7 +220,7 @@ class Choices {
|
||||||
this.containerOuter.unwrap(this.passedElement.element);
|
this.containerOuter.unwrap(this.passedElement.element);
|
||||||
|
|
||||||
if (this.isSelectElement) {
|
if (this.isSelectElement) {
|
||||||
this.passedElement.setOptions(this.presetChoices);
|
this.passedElement.options = this.presetChoices;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clear data store
|
// Clear data store
|
||||||
|
@ -391,10 +391,10 @@ class Choices {
|
||||||
|
|
||||||
if (this.isTextElement) {
|
if (this.isTextElement) {
|
||||||
// Update the value of the hidden input
|
// Update the value of the hidden input
|
||||||
this.passedElement.setValue(items);
|
this.passedElement.value = items;
|
||||||
} else {
|
} else {
|
||||||
// Update the options of the hidden input
|
// Update the options of the hidden input
|
||||||
this.passedElement.setOptions(items);
|
this.passedElement.options = items;
|
||||||
}
|
}
|
||||||
|
|
||||||
const addItemToFragment = (item) => {
|
const addItemToFragment = (item) => {
|
||||||
|
@ -416,7 +416,7 @@ class Choices {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
this.currentState = this.store.getState();
|
this.currentState = this.store.state;
|
||||||
const stateChanged = (
|
const stateChanged = (
|
||||||
this.currentState.choices !== this.prevState.choices ||
|
this.currentState.choices !== this.prevState.choices ||
|
||||||
this.currentState.groups !== this.prevState.groups ||
|
this.currentState.groups !== this.prevState.groups ||
|
||||||
|
@ -465,7 +465,7 @@ class Choices {
|
||||||
// If we have choices to show
|
// If we have choices to show
|
||||||
if (choiceListFragment.childNodes && choiceListFragment.childNodes.length > 0) {
|
if (choiceListFragment.childNodes && choiceListFragment.childNodes.length > 0) {
|
||||||
const activeItems = this.store.getItemsFilteredByActive();
|
const activeItems = this.store.getItemsFilteredByActive();
|
||||||
const canAddItem = this._canAddItem(activeItems, this.input.getValue());
|
const canAddItem = this._canAddItem(activeItems, this.input.value);
|
||||||
|
|
||||||
// ...and we can select them
|
// ...and we can select them
|
||||||
if (canAddItem.response) {
|
if (canAddItem.response) {
|
||||||
|
@ -581,7 +581,7 @@ class Choices {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
highlightAll() {
|
highlightAll() {
|
||||||
const items = this.store.getItems();
|
const items = this.store.items;
|
||||||
items.forEach(item => this.highlightItem(item));
|
items.forEach(item => this.highlightItem(item));
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
@ -592,7 +592,7 @@ class Choices {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
unhighlightAll() {
|
unhighlightAll() {
|
||||||
const items = this.store.getItems();
|
const items = this.store.items;
|
||||||
items.forEach(item => this.unhighlightItem(item));
|
items.forEach(item => this.unhighlightItem(item));
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
@ -670,7 +670,7 @@ class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
this.dropdown.show();
|
this.dropdown.show();
|
||||||
this.containerOuter.open(this.dropdown.getVerticalPos());
|
this.containerOuter.open(this.dropdown.distanceFromTopWindow());
|
||||||
|
|
||||||
if (focusInput && this.canSearch) {
|
if (focusInput && this.canSearch) {
|
||||||
this.input.focus();
|
this.input.focus();
|
||||||
|
@ -1046,7 +1046,7 @@ class Choices {
|
||||||
// If editing the last item is allowed and there are not other selected items,
|
// If editing the last item is allowed and there are not other selected items,
|
||||||
// we can edit the item value. Otherwise if we can remove items, remove all selected items
|
// we can edit the item value. Otherwise if we can remove items, remove all selected items
|
||||||
if (this.config.editItems && !hasHighlightedItems && lastItem) {
|
if (this.config.editItems && !hasHighlightedItems && lastItem) {
|
||||||
this.input.setValue(lastItem.value);
|
this.input.value = lastItem.value;
|
||||||
this.input.setWidth();
|
this.input.setWidth();
|
||||||
this._removeItem(lastItem);
|
this._removeItem(lastItem);
|
||||||
this._triggerChange(lastItem.value);
|
this._triggerChange(lastItem.value);
|
||||||
|
@ -1077,7 +1077,7 @@ class Choices {
|
||||||
placeholderItem.innerHTML = this.config.loadingText;
|
placeholderItem.innerHTML = this.config.loadingText;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.input.setPlaceholder(this.config.loadingText);
|
this.input.placeholder = this.config.loadingText;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.containerOuter.removeLoadingState();
|
this.containerOuter.removeLoadingState();
|
||||||
|
@ -1085,7 +1085,7 @@ class Choices {
|
||||||
if (this.isSelectOneElement) {
|
if (this.isSelectOneElement) {
|
||||||
placeholderItem.innerHTML = (this.placeholder || '');
|
placeholderItem.innerHTML = (this.placeholder || '');
|
||||||
} else {
|
} else {
|
||||||
this.input.setPlaceholder(this.placeholder || '');
|
this.input.placeholder = (this.placeholder || '');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1351,7 +1351,7 @@ class Choices {
|
||||||
this.canSearch = false;
|
this.canSearch = false;
|
||||||
if (
|
if (
|
||||||
this.config.removeItems &&
|
this.config.removeItems &&
|
||||||
!this.input.getValue() &&
|
!this.input.value &&
|
||||||
this.input.element === document.activeElement
|
this.input.element === document.activeElement
|
||||||
) {
|
) {
|
||||||
// Highlight items
|
// Highlight items
|
||||||
|
@ -1363,7 +1363,7 @@ class Choices {
|
||||||
const onEnterKey = () => {
|
const onEnterKey = () => {
|
||||||
// If enter key is pressed and the input has a value
|
// If enter key is pressed and the input has a value
|
||||||
if (this.isTextElement && target.value) {
|
if (this.isTextElement && target.value) {
|
||||||
const value = this.input.getValue();
|
const value = this.input.value;
|
||||||
const canAddItem = this._canAddItem(activeItems, value);
|
const canAddItem = this._canAddItem(activeItems, value);
|
||||||
|
|
||||||
// All is good, add
|
// All is good, add
|
||||||
|
@ -1490,7 +1490,7 @@ class Choices {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const value = this.input.getValue();
|
const value = this.input.value;
|
||||||
const activeItems = this.store.getItemsFilteredByActive();
|
const activeItems = this.store.getItemsFilteredByActive();
|
||||||
const canAddItem = this._canAddItem(activeItems, value);
|
const canAddItem = this._canAddItem(activeItems, value);
|
||||||
|
|
||||||
|
@ -1523,7 +1523,7 @@ class Choices {
|
||||||
this.store.dispatch(activateChoices(true));
|
this.store.dispatch(activateChoices(true));
|
||||||
}
|
}
|
||||||
} else if (this.canSearch && canAddItem.response) {
|
} else if (this.canSearch && canAddItem.response) {
|
||||||
this._handleSearch(this.input.getValue());
|
this._handleSearch(this.input.value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Re-establish canSearch value from changes in _onKeyDown
|
// Re-establish canSearch value from changes in _onKeyDown
|
||||||
|
@ -1901,7 +1901,7 @@ class Choices {
|
||||||
let passedValue = isType('String', value) ? value.trim() : value;
|
let passedValue = isType('String', value) ? value.trim() : value;
|
||||||
const passedKeyCode = keyCode;
|
const passedKeyCode = keyCode;
|
||||||
const passedCustomProperties = customProperties;
|
const passedCustomProperties = customProperties;
|
||||||
const items = this.store.getItems();
|
const items = this.store.items;
|
||||||
const passedLabel = label || passedValue;
|
const passedLabel = label || passedValue;
|
||||||
const passedOptionId = parseInt(choiceId, 10) || -1;
|
const passedOptionId = parseInt(choiceId, 10) || -1;
|
||||||
|
|
||||||
|
@ -2183,9 +2183,9 @@ class Choices {
|
||||||
this.containerOuter.wrap(this.containerInner.element);
|
this.containerOuter.wrap(this.containerInner.element);
|
||||||
|
|
||||||
if (this.isSelectOneElement) {
|
if (this.isSelectOneElement) {
|
||||||
this.input.setPlaceholder(this.config.searchPlaceholderValue || '');
|
this.input.placeholder = (this.config.searchPlaceholderValue || '');
|
||||||
} else if (this.placeholder) {
|
} else if (this.placeholder) {
|
||||||
this.input.setPlaceholder(this.placeholder);
|
this.input.placeholder = this.placeholder;
|
||||||
this.input.setWidth(true);
|
this.input.setWidth(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2215,14 +2215,14 @@ class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
_addPredefinedChoices() {
|
_addPredefinedChoices() {
|
||||||
const passedGroups = this.passedElement.getOptionGroups();
|
const passedGroups = this.passedElement.optionGroups;
|
||||||
|
|
||||||
this.highlightPosition = 0;
|
this.highlightPosition = 0;
|
||||||
this.isSearching = false;
|
this.isSearching = false;
|
||||||
|
|
||||||
if (passedGroups && passedGroups.length) {
|
if (passedGroups && passedGroups.length) {
|
||||||
// If we have a placeholder option
|
// If we have a placeholder option
|
||||||
const placeholderChoice = this.passedElement.getPlaceholderOption();
|
const placeholderChoice = this.passedElement.placeholderOption;
|
||||||
if (placeholderChoice && placeholderChoice.parentNode.tagName === 'SELECT') {
|
if (placeholderChoice && placeholderChoice.parentNode.tagName === 'SELECT') {
|
||||||
this._addChoice(
|
this._addChoice(
|
||||||
placeholderChoice.value,
|
placeholderChoice.value,
|
||||||
|
@ -2239,7 +2239,7 @@ class Choices {
|
||||||
this._addGroup(group, (group.id || null));
|
this._addGroup(group, (group.id || null));
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
const passedOptions = this.passedElement.getOptions();
|
const passedOptions = this.passedElement.options;
|
||||||
const filter = this.config.sortFn;
|
const filter = this.config.sortFn;
|
||||||
const allChoices = this.presetChoices;
|
const allChoices = this.presetChoices;
|
||||||
|
|
||||||
|
|
|
@ -767,18 +767,17 @@ describe('choices', () => {
|
||||||
];
|
];
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
storeGetItemsStub = stub().returns(items);
|
storeGetItemsStub = stub(instance.store, 'items').get(() => items);
|
||||||
highlightItemStub = stub();
|
highlightItemStub = stub();
|
||||||
|
|
||||||
instance.highlightItem = highlightItemStub;
|
instance.highlightItem = highlightItemStub;
|
||||||
instance.store.getItems = storeGetItemsStub;
|
|
||||||
|
|
||||||
output = instance.highlightAll();
|
output = instance.highlightAll();
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
highlightItemStub.reset();
|
highlightItemStub.reset();
|
||||||
instance.store.getItems.reset();
|
storeGetItemsStub.reset();
|
||||||
});
|
});
|
||||||
|
|
||||||
returnsInstance(output);
|
returnsInstance(output);
|
||||||
|
@ -806,18 +805,17 @@ describe('choices', () => {
|
||||||
];
|
];
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
storeGetItemsStub = stub().returns(items);
|
storeGetItemsStub = stub(instance.store, 'items').get(() => items);
|
||||||
unhighlightItemStub = stub();
|
unhighlightItemStub = stub();
|
||||||
|
|
||||||
instance.unhighlightItem = unhighlightItemStub;
|
instance.unhighlightItem = unhighlightItemStub;
|
||||||
instance.store.getItems = storeGetItemsStub;
|
|
||||||
|
|
||||||
output = instance.unhighlightAll();
|
output = instance.unhighlightAll();
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
instance.unhighlightItem.reset();
|
instance.unhighlightItem.reset();
|
||||||
instance.store.getItems.reset();
|
storeGetItemsStub.reset();
|
||||||
});
|
});
|
||||||
|
|
||||||
returnsInstance(output);
|
returnsInstance(output);
|
||||||
|
|
|
@ -15,10 +15,6 @@ export default class Container {
|
||||||
this.onBlur = this.onBlur.bind(this);
|
this.onBlur = this.onBlur.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
getElement() {
|
|
||||||
return this.element;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add event listeners
|
* Add event listeners
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -40,12 +40,6 @@ describe('components/container', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('getElement', () => {
|
|
||||||
it('returns DOM reference of element', () => {
|
|
||||||
expect(instance.getElement()).to.eql(element);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('addEventListeners', () => {
|
describe('addEventListeners', () => {
|
||||||
let addEventListenerStub;
|
let addEventListenerStub;
|
||||||
|
|
||||||
|
|
|
@ -8,16 +8,12 @@ export default class Dropdown {
|
||||||
this.isActive = false;
|
this.isActive = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
getElement() {
|
|
||||||
return this.element;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Determine how far the top of our element is from
|
* Determine how far the top of our element is from
|
||||||
* the top of the window
|
* the top of the window
|
||||||
* @return {Number} Vertical position
|
* @return {Number} Vertical position
|
||||||
*/
|
*/
|
||||||
getVerticalPos() {
|
distanceFromTopWindow() {
|
||||||
this.dimensions = this.element.getBoundingClientRect();
|
this.dimensions = this.element.getBoundingClientRect();
|
||||||
this.position = Math.ceil(this.dimensions.top + window.pageYOffset + this.element.offsetHeight);
|
this.position = Math.ceil(this.dimensions.top + window.pageYOffset + this.element.offsetHeight);
|
||||||
return this.position;
|
return this.position;
|
||||||
|
|
|
@ -39,13 +39,7 @@ describe('components/dropdown', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('getElement', () => {
|
describe('distanceFromTopWindow', () => {
|
||||||
it('returns DOM reference of element', () => {
|
|
||||||
expect(instance.getElement()).to.eql(choicesElement);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('getVerticalPos', () => {
|
|
||||||
let top;
|
let top;
|
||||||
let offset;
|
let offset;
|
||||||
let dimensions;
|
let dimensions;
|
||||||
|
@ -74,18 +68,18 @@ describe('components/dropdown', () => {
|
||||||
|
|
||||||
it('determines how far the top of our element is from the top of the window', () => {
|
it('determines how far the top of our element is from the top of the window', () => {
|
||||||
const expectedResponse = top + offset;
|
const expectedResponse = top + offset;
|
||||||
const actualResponse = instance.getVerticalPos();
|
const actualResponse = instance.distanceFromTopWindow();
|
||||||
expect(actualResponse).to.equal(expectedResponse);
|
expect(actualResponse).to.equal(expectedResponse);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('assigns dimensions to instance', () => {
|
it('assigns dimensions to instance', () => {
|
||||||
instance.getVerticalPos();
|
instance.distanceFromTopWindow();
|
||||||
const expectedResponse = dimensions;
|
const expectedResponse = dimensions;
|
||||||
expect(instance.dimensions).to.equal(expectedResponse);
|
expect(instance.dimensions).to.equal(expectedResponse);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('assigns posisiton to instance', () => {
|
it('assigns posisiton to instance', () => {
|
||||||
instance.getVerticalPos();
|
instance.distanceFromTopWindow();
|
||||||
const expectedResponse = top + offset;
|
const expectedResponse = top + offset;
|
||||||
expect(instance.position).to.equal(expectedResponse);
|
expect(instance.position).to.equal(expectedResponse);
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { getWidthOfInput } from '../lib/utils';
|
import { calcWidthOfInput } from '../lib/utils';
|
||||||
|
|
||||||
export default class Input {
|
export default class Input {
|
||||||
constructor(instance, element, classNames) {
|
constructor(instance, element, classNames) {
|
||||||
|
@ -15,8 +15,16 @@ export default class Input {
|
||||||
this.onBlur = this.onBlur.bind(this);
|
this.onBlur = this.onBlur.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
getElement() {
|
set placeholder(placeholder) {
|
||||||
return this.element;
|
this.element.placeholder = placeholder;
|
||||||
|
}
|
||||||
|
|
||||||
|
set value(value) {
|
||||||
|
this.element.value = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get value() {
|
||||||
|
return this.element.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
addEventListeners() {
|
addEventListeners() {
|
||||||
|
@ -124,28 +132,16 @@ export default class Input {
|
||||||
this.element.value.length >= (this.parentInstance.placeholder.length / 1.25)) ||
|
this.element.value.length >= (this.parentInstance.placeholder.length / 1.25)) ||
|
||||||
enforceWidth
|
enforceWidth
|
||||||
) {
|
) {
|
||||||
this.element.style.width = this.getWidth();
|
this.element.style.width = this.calcWidth();
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// If there is no placeholder, resize input to contents
|
// If there is no placeholder, resize input to contents
|
||||||
this.element.style.width = this.getWidth();
|
this.element.style.width = this.calcWidth();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
getWidth() {
|
calcWidth() {
|
||||||
return getWidthOfInput(this.element);
|
return calcWidthOfInput(this.element);
|
||||||
}
|
|
||||||
|
|
||||||
setPlaceholder(placeholder) {
|
|
||||||
this.element.placeholder = placeholder;
|
|
||||||
}
|
|
||||||
|
|
||||||
setValue(value) {
|
|
||||||
this.element.value = value;
|
|
||||||
}
|
|
||||||
|
|
||||||
getValue() {
|
|
||||||
return this.element.value;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setActiveDescendant(activeDescendantID) {
|
setActiveDescendant(activeDescendantID) {
|
||||||
|
|
|
@ -37,12 +37,6 @@ describe('components/input', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('getElement', () => {
|
|
||||||
it('returns DOM reference of element', () => {
|
|
||||||
expect(instance.getElement()).to.eql(choicesElement);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('addEventListeners', () => {
|
describe('addEventListeners', () => {
|
||||||
let addEventListenerStub;
|
let addEventListenerStub;
|
||||||
|
|
||||||
|
@ -278,15 +272,15 @@ describe('components/input', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('setWidth', () => {
|
describe('setWidth', () => {
|
||||||
let getWidthStub;
|
let calcWidthStub;
|
||||||
const inputWidth = '200px';
|
const inputWidth = '200px';
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
getWidthStub = stub(instance, 'getWidth').returns(inputWidth);
|
calcWidthStub = stub(instance, 'calcWidth').returns(inputWidth);
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
getWidthStub.restore();
|
calcWidthStub.restore();
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('with a placeholder', () => {
|
describe('with a placeholder', () => {
|
||||||
|
@ -296,7 +290,7 @@ describe('components/input', () => {
|
||||||
instance.element.value = 'This is a test';
|
instance.element.value = 'This is a test';
|
||||||
expect(instance.element.style.width).to.not.equal(inputWidth);
|
expect(instance.element.style.width).to.not.equal(inputWidth);
|
||||||
instance.setWidth();
|
instance.setWidth();
|
||||||
expect(getWidthStub.callCount).to.equal(1);
|
expect(calcWidthStub.callCount).to.equal(1);
|
||||||
expect(instance.element.style.width).to.equal(inputWidth);
|
expect(instance.element.style.width).to.equal(inputWidth);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -307,7 +301,7 @@ describe('components/input', () => {
|
||||||
instance.element.value = '';
|
instance.element.value = '';
|
||||||
expect(instance.element.style.width).to.not.equal(inputWidth);
|
expect(instance.element.style.width).to.not.equal(inputWidth);
|
||||||
instance.setWidth(true);
|
instance.setWidth(true);
|
||||||
expect(getWidthStub.callCount).to.equal(1);
|
expect(calcWidthStub.callCount).to.equal(1);
|
||||||
expect(instance.element.style.width).to.equal(inputWidth);
|
expect(instance.element.style.width).to.equal(inputWidth);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -317,7 +311,7 @@ describe('components/input', () => {
|
||||||
instance.parentInstance.placeholder = 'This is a test';
|
instance.parentInstance.placeholder = 'This is a test';
|
||||||
instance.element.value = 'Test';
|
instance.element.value = 'Test';
|
||||||
instance.setWidth();
|
instance.setWidth();
|
||||||
expect(getWidthStub.callCount).to.equal(0);
|
expect(calcWidthStub.callCount).to.equal(0);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -327,35 +321,35 @@ describe('components/input', () => {
|
||||||
instance.placeholder = null;
|
instance.placeholder = null;
|
||||||
expect(instance.element.style.width).to.not.equal(inputWidth);
|
expect(instance.element.style.width).to.not.equal(inputWidth);
|
||||||
instance.setWidth();
|
instance.setWidth();
|
||||||
expect(getWidthStub.callCount).to.equal(1);
|
expect(calcWidthStub.callCount).to.equal(1);
|
||||||
expect(instance.element.style.width).to.equal(inputWidth);
|
expect(instance.element.style.width).to.equal(inputWidth);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('setPlaceholder', () => {
|
describe('placeholder setter', () => {
|
||||||
it('sets value of element to passed placeholder', () => {
|
it('sets value of element to passed placeholder', () => {
|
||||||
const placeholder = 'test';
|
const placeholder = 'test';
|
||||||
expect(instance.element.placeholder).to.equal('');
|
expect(instance.element.placeholder).to.equal('');
|
||||||
instance.setPlaceholder(placeholder);
|
instance.placeholder = placeholder;
|
||||||
expect(instance.element.placeholder).to.equal(placeholder);
|
expect(instance.element.placeholder).to.equal(placeholder);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('setValue', () => {
|
describe('value setter', () => {
|
||||||
it('sets value of element to passed value', () => {
|
it('sets value of element to passed value', () => {
|
||||||
const value = 'test';
|
const value = 'test';
|
||||||
expect(instance.element.value).to.equal('');
|
expect(instance.element.value).to.equal('');
|
||||||
instance.setValue(value);
|
instance.value = value;
|
||||||
expect(instance.element.value).to.equal(value);
|
expect(instance.element.value).to.equal(value);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('getValue', () => {
|
describe('value getter', () => {
|
||||||
it('sets value of element to passed value', () => {
|
it('sets value of element to passed value', () => {
|
||||||
const value = 'test';
|
const value = 'test';
|
||||||
instance.element.value = value;
|
instance.element.value = value;
|
||||||
const actualResponse = instance.getValue();
|
const actualResponse = instance.value;
|
||||||
expect(actualResponse).to.equal(value);
|
expect(actualResponse).to.equal(value);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -8,10 +8,6 @@ export default class List {
|
||||||
this.hasChildren = !!this.element.children;
|
this.hasChildren = !!this.element.children;
|
||||||
}
|
}
|
||||||
|
|
||||||
getElement() {
|
|
||||||
return this.element;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Clear List contents
|
* Clear List contents
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -36,12 +36,6 @@ describe('components/list', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('getElement', () => {
|
|
||||||
it('returns DOM reference of element', () => {
|
|
||||||
expect(instance.getElement()).to.eql(choicesElement);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('clear', () => {
|
describe('clear', () => {
|
||||||
it('clears element\'s inner HTML', () => {
|
it('clears element\'s inner HTML', () => {
|
||||||
const innerHTML = 'test';
|
const innerHTML = 'test';
|
||||||
|
|
|
@ -8,11 +8,7 @@ export default class WrappedElement {
|
||||||
this.isDisabled = false;
|
this.isDisabled = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
getElement() {
|
get value() {
|
||||||
return this.element;
|
|
||||||
}
|
|
||||||
|
|
||||||
getValue() {
|
|
||||||
return this.element.value;
|
return this.element.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -41,9 +41,9 @@ describe('components/wrappedElement', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('getElement', () => {
|
describe('value getter', () => {
|
||||||
it('returns DOM reference of element', () => {
|
it('returns element value', () => {
|
||||||
expect(instance.getElement()).to.eql(element);
|
expect(instance.value).to.eql(element.value);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -9,8 +9,16 @@ export default class WrappedInput extends WrappedElement {
|
||||||
this.classNames = classNames;
|
this.classNames = classNames;
|
||||||
}
|
}
|
||||||
|
|
||||||
getElement() {
|
set value(items) {
|
||||||
super.getElement();
|
const itemsFiltered = reduceToValues(items);
|
||||||
|
const itemsFilteredString = itemsFiltered.join(this.parentInstance.config.delimiter);
|
||||||
|
|
||||||
|
this.element.setAttribute('value', itemsFilteredString);
|
||||||
|
this.element.value = itemsFilteredString;
|
||||||
|
}
|
||||||
|
|
||||||
|
get value() {
|
||||||
|
return super.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
conceal() {
|
conceal() {
|
||||||
|
@ -28,12 +36,4 @@ export default class WrappedInput extends WrappedElement {
|
||||||
disable() {
|
disable() {
|
||||||
super.disable();
|
super.disable();
|
||||||
}
|
}
|
||||||
|
|
||||||
setValue(items) {
|
|
||||||
const itemsFiltered = reduceToValues(items);
|
|
||||||
const itemsFilteredString = itemsFiltered.join(this.parentInstance.config.delimiter);
|
|
||||||
|
|
||||||
this.element.setAttribute('value', itemsFilteredString);
|
|
||||||
this.element.value = itemsFilteredString;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -39,7 +39,7 @@ describe('components/wrappedInput', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('inherited methods', () => {
|
describe('inherited methods', () => {
|
||||||
['getElement', 'conceal', 'reveal', 'enable', 'disable'].forEach((method) => {
|
['conceal', 'reveal', 'enable', 'disable'].forEach((method) => {
|
||||||
describe(method, () => {
|
describe(method, () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
stub(WrappedElement.prototype, method);
|
stub(WrappedElement.prototype, method);
|
||||||
|
@ -58,7 +58,7 @@ describe('components/wrappedInput', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('setValue', () => {
|
describe('value setter', () => {
|
||||||
const data = [
|
const data = [
|
||||||
{
|
{
|
||||||
id: 'ID 1',
|
id: 'ID 1',
|
||||||
|
@ -76,8 +76,8 @@ describe('components/wrappedInput', () => {
|
||||||
|
|
||||||
it('sets delimited value of element based on passed data', () => {
|
it('sets delimited value of element based on passed data', () => {
|
||||||
expect(instance.element.value).to.equal('');
|
expect(instance.element.value).to.equal('');
|
||||||
instance.setValue(data);
|
instance.value = data;
|
||||||
expect(instance.element.value).to.equal('Value 1,Value 2,Value 3');
|
expect(instance.value).to.equal('Value 1,Value 2,Value 3');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -9,8 +9,31 @@ export default class WrappedSelect extends WrappedElement {
|
||||||
this.classNames = classNames;
|
this.classNames = classNames;
|
||||||
}
|
}
|
||||||
|
|
||||||
getElement() {
|
get placeholderOption() {
|
||||||
super.getElement();
|
return this.element.querySelector('option[placeholder]');
|
||||||
|
}
|
||||||
|
|
||||||
|
get optionGroups() {
|
||||||
|
return Array.from(this.element.getElementsByTagName('OPTGROUP'));
|
||||||
|
}
|
||||||
|
|
||||||
|
get options() {
|
||||||
|
return Array.from(this.element.options);
|
||||||
|
}
|
||||||
|
|
||||||
|
set options(options) {
|
||||||
|
const fragment = document.createDocumentFragment();
|
||||||
|
const addOptionToFragment = (data) => {
|
||||||
|
// Create a standard select option
|
||||||
|
const template = templates.option(data);
|
||||||
|
// Append it to fragment
|
||||||
|
fragment.appendChild(template);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add each list item to list
|
||||||
|
options.forEach(optionData => addOptionToFragment(optionData));
|
||||||
|
|
||||||
|
this.appendDocFragment(fragment);
|
||||||
}
|
}
|
||||||
|
|
||||||
conceal() {
|
conceal() {
|
||||||
|
@ -29,33 +52,6 @@ export default class WrappedSelect extends WrappedElement {
|
||||||
super.disable();
|
super.disable();
|
||||||
}
|
}
|
||||||
|
|
||||||
getPlaceholderOption() {
|
|
||||||
return this.element.querySelector('option[placeholder]');
|
|
||||||
}
|
|
||||||
|
|
||||||
getOptions() {
|
|
||||||
return Array.from(this.element.options);
|
|
||||||
}
|
|
||||||
|
|
||||||
getOptionGroups() {
|
|
||||||
return Array.from(this.element.getElementsByTagName('OPTGROUP'));
|
|
||||||
}
|
|
||||||
|
|
||||||
setOptions(options) {
|
|
||||||
const fragment = document.createDocumentFragment();
|
|
||||||
const addOptionToFragment = (data) => {
|
|
||||||
// Create a standard select option
|
|
||||||
const template = templates.option(data);
|
|
||||||
// Append it to fragment
|
|
||||||
fragment.appendChild(template);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Add each list item to list
|
|
||||||
options.forEach(optionData => addOptionToFragment(optionData));
|
|
||||||
|
|
||||||
this.appendDocFragment(fragment);
|
|
||||||
}
|
|
||||||
|
|
||||||
appendDocFragment(fragment) {
|
appendDocFragment(fragment) {
|
||||||
this.element.innerHTML = '';
|
this.element.innerHTML = '';
|
||||||
this.element.appendChild(fragment);
|
this.element.appendChild(fragment);
|
||||||
|
|
|
@ -55,7 +55,7 @@ describe('components/wrappedSelect', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('inherited methods', () => {
|
describe('inherited methods', () => {
|
||||||
['getElement', 'conceal', 'reveal', 'enable', 'disable'].forEach((method) => {
|
['conceal', 'reveal', 'enable', 'disable'].forEach((method) => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
stub(WrappedElement.prototype, method);
|
stub(WrappedElement.prototype, method);
|
||||||
});
|
});
|
||||||
|
@ -74,39 +74,38 @@ describe('components/wrappedSelect', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('getPlaceholderOption', () => {
|
describe('placeholderOption getter', () => {
|
||||||
it('returns option element with placeholder attribute', () => {
|
it('returns option element with placeholder attribute', () => {
|
||||||
const output = instance.getPlaceholderOption();
|
expect(instance.placeholderOption).to.be.instanceOf(HTMLOptionElement);
|
||||||
expect(output).to.be.instanceOf(HTMLOptionElement);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('getOptions', () => {
|
describe('options getter', () => {
|
||||||
it('returns all option elements', () => {
|
it('returns all option elements', () => {
|
||||||
const output = instance.getOptions();
|
const { options } = instance;
|
||||||
expect(output).to.be.an('array');
|
expect(options).to.be.an('array');
|
||||||
output.forEach((option) => {
|
options.forEach((option) => {
|
||||||
expect(option).to.be.instanceOf(HTMLOptionElement);
|
expect(option).to.be.instanceOf(HTMLOptionElement);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('getOptionGroups', () => {
|
describe('optionGroups getter', () => {
|
||||||
it('returns an array of all option groups', () => {
|
it('returns an array of all option groups', () => {
|
||||||
for (let i = 1; i <= 3; i++) {
|
for (let i = 1; i <= 3; i++) {
|
||||||
const group = document.createElement('optgroup');
|
const group = document.createElement('optgroup');
|
||||||
instance.element.appendChild(group);
|
instance.element.appendChild(group);
|
||||||
}
|
}
|
||||||
|
|
||||||
const output = instance.getOptionGroups();
|
const { optionGroups } = instance;
|
||||||
expect(output.length).to.equal(3);
|
expect(optionGroups.length).to.equal(3);
|
||||||
output.forEach((option) => {
|
optionGroups.forEach((option) => {
|
||||||
expect(option).to.be.instanceOf(HTMLOptGroupElement);
|
expect(option).to.be.instanceOf(HTMLOptGroupElement);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('setOptions', () => {
|
describe('options setter', () => {
|
||||||
let appendDocFragmentStub;
|
let appendDocFragmentStub;
|
||||||
const options = [
|
const options = [
|
||||||
{
|
{
|
||||||
|
@ -134,7 +133,7 @@ describe('components/wrappedSelect', () => {
|
||||||
|
|
||||||
it('creates an option element for each passed object, adds it to a fragment and calls appendDocFragment with created fragment', () => {
|
it('creates an option element for each passed object, adds it to a fragment and calls appendDocFragment with created fragment', () => {
|
||||||
expect(appendDocFragmentStub.called).to.equal(false);
|
expect(appendDocFragmentStub.called).to.equal(false);
|
||||||
instance.setOptions(options);
|
instance.options = options;
|
||||||
expect(appendDocFragmentStub.called).to.equal(true);
|
expect(appendDocFragmentStub.called).to.equal(true);
|
||||||
|
|
||||||
const fragment = appendDocFragmentStub.firstCall.args[0];
|
const fragment = appendDocFragmentStub.firstCall.args[0];
|
||||||
|
|
|
@ -485,7 +485,7 @@ export const strToEl = (function() {
|
||||||
* Sets the width of a passed input based on its value
|
* Sets the width of a passed input based on its value
|
||||||
* @return {Number} Width of input
|
* @return {Number} Width of input
|
||||||
*/
|
*/
|
||||||
export const getWidthOfInput = (input) => {
|
export const calcWidthOfInput = (input) => {
|
||||||
const value = input.value || input.placeholder;
|
const value = input.value || input.placeholder;
|
||||||
let width = input.offsetWidth;
|
let width = input.offsetWidth;
|
||||||
|
|
||||||
|
|
|
@ -33,7 +33,7 @@ export default class Store {
|
||||||
* Get store object (wrapping Redux method)
|
* Get store object (wrapping Redux method)
|
||||||
* @return {Object} State
|
* @return {Object} State
|
||||||
*/
|
*/
|
||||||
getState() {
|
get state() {
|
||||||
return this.store.getState();
|
return this.store.getState();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -41,9 +41,8 @@ export default class Store {
|
||||||
* Get items from store
|
* Get items from store
|
||||||
* @return {Array} Item objects
|
* @return {Array} Item objects
|
||||||
*/
|
*/
|
||||||
getItems() {
|
get items() {
|
||||||
const state = this.store.getState();
|
return this.state.items;
|
||||||
return state.items;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -51,7 +50,7 @@ export default class Store {
|
||||||
* @return {Array} Item objects
|
* @return {Array} Item objects
|
||||||
*/
|
*/
|
||||||
getItemsFilteredByActive() {
|
getItemsFilteredByActive() {
|
||||||
const items = this.getItems();
|
const items = this.items;
|
||||||
const values = items.filter(item => item.active === true);
|
const values = items.filter(item => item.active === true);
|
||||||
|
|
||||||
return values;
|
return values;
|
||||||
|
@ -62,7 +61,7 @@ export default class Store {
|
||||||
* @return {Array} Item objects
|
* @return {Array} Item objects
|
||||||
*/
|
*/
|
||||||
getItemsFilteredByHighlighted() {
|
getItemsFilteredByHighlighted() {
|
||||||
const items = this.getItems();
|
const items = this.items;
|
||||||
const values = items.filter(item => item.active && item.highlighted);
|
const values = items.filter(item => item.active && item.highlighted);
|
||||||
|
|
||||||
return values;
|
return values;
|
||||||
|
@ -73,8 +72,7 @@ export default class Store {
|
||||||
* @return {Array} Option objects
|
* @return {Array} Option objects
|
||||||
*/
|
*/
|
||||||
getChoices() {
|
getChoices() {
|
||||||
const state = this.store.getState();
|
return this.state.choices;
|
||||||
return state.choices;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -139,8 +137,7 @@ export default class Store {
|
||||||
* @return {Array} Group objects
|
* @return {Array} Group objects
|
||||||
*/
|
*/
|
||||||
getGroups() {
|
getGroups() {
|
||||||
const state = this.store.getState();
|
return this.state.groups;
|
||||||
return state.groups;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -53,11 +53,14 @@ describe('reducers/store', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('getState', () => {
|
describe('state getter', () => {
|
||||||
it('wraps redux getState method', () => {
|
it('returns state', () => {
|
||||||
expect(getStateStub.callCount).to.equal(0);
|
const state = {
|
||||||
instance.getState();
|
items: [],
|
||||||
expect(getStateStub.callCount).to.equal(1);
|
};
|
||||||
|
getStateStub.returns(state);
|
||||||
|
|
||||||
|
expect(instance.state).to.equal(state);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -153,11 +156,10 @@ describe('reducers/store', () => {
|
||||||
getStateStub.returns(state);
|
getStateStub.returns(state);
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('getItems', () => {
|
describe('items getter', () => {
|
||||||
it('returns items', () => {
|
it('returns items', () => {
|
||||||
const expectedResponse = state.items;
|
const expectedResponse = state.items;
|
||||||
const actualResponse = instance.getItems();
|
expect(instance.items).to.eql(expectedResponse);
|
||||||
expect(actualResponse).to.eql(expectedResponse);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue