mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-18 13:36:35 +02:00
Destructure class args
This commit is contained in:
parent
b3108835bb
commit
d3a18e255b
|
@ -80,9 +80,16 @@ class Choices {
|
||||||
this.isValidElementType = this.isTextElement || this.isSelectElement;
|
this.isValidElementType = this.isTextElement || this.isSelectElement;
|
||||||
|
|
||||||
if (this.isTextElement) {
|
if (this.isTextElement) {
|
||||||
this.passedElement = new WrappedInput(this, passedElement, this.config.classNames);
|
this.passedElement = new WrappedInput({
|
||||||
|
element: passedElement,
|
||||||
|
classNames: this.config.classNames,
|
||||||
|
delimiter: this.config.delimiter,
|
||||||
|
});
|
||||||
} else if (this.isSelectElement) {
|
} else if (this.isSelectElement) {
|
||||||
this.passedElement = new WrappedSelect(this, passedElement, this.config.classNames);
|
this.passedElement = new WrappedSelect({
|
||||||
|
element: passedElement,
|
||||||
|
classNames: this.config.classNames,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!this.passedElement) {
|
if (!this.passedElement) {
|
||||||
|
@ -106,9 +113,9 @@ class Choices {
|
||||||
this.highlightPosition = 0;
|
this.highlightPosition = 0;
|
||||||
this.canSearch = this.config.searchEnabled;
|
this.canSearch = this.config.searchEnabled;
|
||||||
|
|
||||||
this.placeholder = false;
|
this.placeholderValue = false;
|
||||||
if (!this.isSelectOneElement) {
|
if (!this.isSelectOneElement) {
|
||||||
this.placeholder = this.config.placeholder ?
|
this.placeholderValue = this.config.placeholder ?
|
||||||
(this.config.placeholderValue || this.passedElement.element.getAttribute('placeholder')) :
|
(this.config.placeholderValue || this.passedElement.element.getAttribute('placeholder')) :
|
||||||
false;
|
false;
|
||||||
}
|
}
|
||||||
|
@ -1085,9 +1092,9 @@ class Choices {
|
||||||
this.containerOuter.removeLoadingState();
|
this.containerOuter.removeLoadingState();
|
||||||
|
|
||||||
if (this.isSelectOneElement) {
|
if (this.isSelectOneElement) {
|
||||||
placeholderItem.innerHTML = (this.placeholder || '');
|
placeholderItem.innerHTML = (this.placeholderValue || '');
|
||||||
} else {
|
} else {
|
||||||
this.input.placeholder = (this.placeholder || '');
|
this.input.placeholder = (this.placeholderValue || '');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2166,12 +2173,39 @@ class Choices {
|
||||||
const input = this._getTemplate('input');
|
const input = this._getTemplate('input');
|
||||||
const dropdown = this._getTemplate('dropdown');
|
const dropdown = this._getTemplate('dropdown');
|
||||||
|
|
||||||
this.containerOuter = new Container(this, containerOuter, this.config.classNames);
|
this.containerOuter = new Container({
|
||||||
this.containerInner = new Container(this, containerInner, this.config.classNames);
|
element: containerOuter,
|
||||||
this.input = new Input(this, input, this.config.classNames);
|
classNames: this.config.classNames,
|
||||||
this.choiceList = new List(this, choiceList, this.config.classNames);
|
type: this.passedElement.element.type,
|
||||||
this.itemList = new List(this, itemList, this.config.classNames);
|
position: this.config.position,
|
||||||
this.dropdown = new Dropdown(this, dropdown, this.config.classNames);
|
});
|
||||||
|
|
||||||
|
this.containerInner = new Container({
|
||||||
|
element: containerInner,
|
||||||
|
classNames: this.config.classNames,
|
||||||
|
type: this.passedElement.element.type,
|
||||||
|
position: this.config.position,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.input = new Input({
|
||||||
|
element: input,
|
||||||
|
classNames: this.config.classNames,
|
||||||
|
type: this.passedElement.element.type,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.choiceList = new List({
|
||||||
|
element: choiceList,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.itemList = new List({
|
||||||
|
element: itemList,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.dropdown = new Dropdown({
|
||||||
|
element: dropdown,
|
||||||
|
classNames: this.config.classNames,
|
||||||
|
type: this.passedElement.element.type,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -2189,8 +2223,8 @@ class Choices {
|
||||||
|
|
||||||
if (this.isSelectOneElement) {
|
if (this.isSelectOneElement) {
|
||||||
this.input.placeholder = (this.config.searchPlaceholderValue || '');
|
this.input.placeholder = (this.config.searchPlaceholderValue || '');
|
||||||
} else if (this.placeholder) {
|
} else if (this.placeholderValue) {
|
||||||
this.input.placeholder = this.placeholder;
|
this.input.placeholder = this.placeholderValue;
|
||||||
this.input.setWidth(true);
|
this.input.setWidth(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,16 +1,15 @@
|
||||||
import { getWindowHeight, wrap } from '../lib/utils';
|
import { getWindowHeight, wrap } from '../lib/utils';
|
||||||
|
|
||||||
export default class Container {
|
export default class Container {
|
||||||
constructor(instance, element, classNames) {
|
constructor({ element, type, classNames, position }) {
|
||||||
this.parentInstance = instance;
|
Object.assign(this, { element, classNames, type, position });
|
||||||
this.element = element;
|
|
||||||
this.classNames = classNames;
|
|
||||||
this.config = instance.config;
|
|
||||||
this.isOpen = false;
|
this.isOpen = false;
|
||||||
this.isFlipped = false;
|
this.isFlipped = false;
|
||||||
this.isFocussed = false;
|
this.isFocussed = false;
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
@ -57,16 +56,16 @@ export default class Container {
|
||||||
if (dropdownPos === undefined) {
|
if (dropdownPos === undefined) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// If flip is enabled and the dropdown bottom position is
|
// If flip is enabled and the dropdown bottom position is
|
||||||
// greater than the window height flip the dropdown.
|
// greater than the window height flip the dropdown.
|
||||||
let shouldFlip = false;
|
let shouldFlip = false;
|
||||||
if (this.config.position === 'auto') {
|
if (this.position === 'auto') {
|
||||||
shouldFlip = dropdownPos >= windowHeight;
|
shouldFlip = dropdownPos >= windowHeight;
|
||||||
} else if (this.config.position === 'top') {
|
} else if (this.position === 'top') {
|
||||||
shouldFlip = true;
|
shouldFlip = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
return shouldFlip;
|
return shouldFlip;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -129,7 +128,7 @@ export default class Container {
|
||||||
enable() {
|
enable() {
|
||||||
this.element.classList.remove(this.classNames.disabledState);
|
this.element.classList.remove(this.classNames.disabledState);
|
||||||
this.element.removeAttribute('aria-disabled');
|
this.element.removeAttribute('aria-disabled');
|
||||||
if (this.parentInstance.isSelectOneElement) {
|
if (this.type === 'select-one') {
|
||||||
this.element.setAttribute('tabindex', '0');
|
this.element.setAttribute('tabindex', '0');
|
||||||
}
|
}
|
||||||
this.isDisabled = false;
|
this.isDisabled = false;
|
||||||
|
@ -141,7 +140,7 @@ export default class Container {
|
||||||
disable() {
|
disable() {
|
||||||
this.element.classList.add(this.classNames.disabledState);
|
this.element.classList.add(this.classNames.disabledState);
|
||||||
this.element.setAttribute('aria-disabled', 'true');
|
this.element.setAttribute('aria-disabled', 'true');
|
||||||
if (this.parentInstance.isSelectOneElement) {
|
if (this.type === 'select-one') {
|
||||||
this.element.setAttribute('tabindex', '-1');
|
this.element.setAttribute('tabindex', '-1');
|
||||||
}
|
}
|
||||||
this.isDisabled = true;
|
this.isDisabled = true;
|
||||||
|
|
|
@ -1,23 +1,23 @@
|
||||||
import { expect } from 'chai';
|
import { expect } from 'chai';
|
||||||
import { stub } from 'sinon';
|
import { stub } from 'sinon';
|
||||||
import Container from './container';
|
import Container from './container';
|
||||||
import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants';
|
import { DEFAULT_CLASSNAMES } from '../constants';
|
||||||
|
|
||||||
describe('components/container', () => {
|
describe('components/container', () => {
|
||||||
let instance;
|
let instance;
|
||||||
let choicesInstance;
|
|
||||||
let element;
|
let element;
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
choicesInstance = {
|
|
||||||
config: {
|
|
||||||
...DEFAULT_CONFIG,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
element = document.createElement('div');
|
element = document.createElement('div');
|
||||||
element.id = 'container';
|
element.id = 'container';
|
||||||
|
|
||||||
document.body.appendChild(element);
|
document.body.appendChild(element);
|
||||||
instance = new Container(choicesInstance, document.getElementById('container'), DEFAULT_CLASSNAMES);
|
instance = new Container({
|
||||||
|
element: document.getElementById('container'),
|
||||||
|
classNames: DEFAULT_CLASSNAMES,
|
||||||
|
position: 'auto',
|
||||||
|
type: 'text',
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
|
@ -27,10 +27,6 @@ describe('components/container', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('constructor', () => {
|
describe('constructor', () => {
|
||||||
it('assigns choices instance to class', () => {
|
|
||||||
expect(instance.parentInstance).to.eql(choicesInstance);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('assigns choices element to class', () => {
|
it('assigns choices element to class', () => {
|
||||||
expect(instance.element).to.eql(element);
|
expect(instance.element).to.eql(element);
|
||||||
});
|
});
|
||||||
|
@ -104,7 +100,7 @@ describe('components/container', () => {
|
||||||
describe('passing dropdownPos', () => {
|
describe('passing dropdownPos', () => {
|
||||||
describe('position config option set to "auto"', () => {
|
describe('position config option set to "auto"', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
instance.config.position = 'auto';
|
instance.position = 'auto';
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('dropdownPos is greater than window height', () => {
|
describe('dropdownPos is greater than window height', () => {
|
||||||
|
@ -122,7 +118,7 @@ describe('components/container', () => {
|
||||||
|
|
||||||
describe('position config option set to "top"', () => {
|
describe('position config option set to "top"', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
instance.config.position = 'top';
|
instance.position = 'top';
|
||||||
});
|
});
|
||||||
|
|
||||||
it('returns true', () => {
|
it('returns true', () => {
|
||||||
|
@ -132,7 +128,7 @@ describe('components/container', () => {
|
||||||
|
|
||||||
describe('position config option set to "bottom"', () => {
|
describe('position config option set to "bottom"', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
instance.config.position = 'bottom';
|
instance.position = 'bottom';
|
||||||
});
|
});
|
||||||
|
|
||||||
it('returns false', () => {
|
it('returns false', () => {
|
||||||
|
@ -310,7 +306,7 @@ describe('components/container', () => {
|
||||||
|
|
||||||
describe('select one element', () => {
|
describe('select one element', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
instance.parentInstance.isSelectOneElement = true;
|
instance.type = 'select-one';
|
||||||
instance.enable();
|
instance.enable();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -344,7 +340,7 @@ describe('components/container', () => {
|
||||||
|
|
||||||
describe('select one element', () => {
|
describe('select one element', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
instance.parentInstance.isSelectOneElement = true;
|
instance.type = 'select-one';
|
||||||
instance.disable();
|
instance.disable();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1,10 +1,7 @@
|
||||||
export default class Dropdown {
|
export default class Dropdown {
|
||||||
constructor(instance, element, classNames) {
|
constructor({ element, type, classNames }) {
|
||||||
this.parentInstance = instance;
|
Object.assign(this, { element, type, classNames });
|
||||||
this.element = element;
|
|
||||||
this.classNames = classNames;
|
|
||||||
this.dimensions = null;
|
|
||||||
this.position = null;
|
|
||||||
this.isActive = false;
|
this.isActive = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -36,7 +33,7 @@ export default class Dropdown {
|
||||||
this.element.classList.add(this.classNames.activeState);
|
this.element.classList.add(this.classNames.activeState);
|
||||||
this.element.setAttribute('aria-expanded', 'true');
|
this.element.setAttribute('aria-expanded', 'true');
|
||||||
this.isActive = true;
|
this.isActive = true;
|
||||||
return this.parentInstance;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -48,6 +45,6 @@ export default class Dropdown {
|
||||||
this.element.classList.remove(this.classNames.activeState);
|
this.element.classList.remove(this.classNames.activeState);
|
||||||
this.element.setAttribute('aria-expanded', 'false');
|
this.element.setAttribute('aria-expanded', 'false');
|
||||||
this.isActive = false;
|
this.isActive = false;
|
||||||
return this.parentInstance;
|
return this;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,23 +1,20 @@
|
||||||
import { expect } from 'chai';
|
import { expect } from 'chai';
|
||||||
import sinon from 'sinon';
|
import sinon from 'sinon';
|
||||||
import Dropdown from './dropdown';
|
import Dropdown from './dropdown';
|
||||||
import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants';
|
import { DEFAULT_CLASSNAMES } from '../constants';
|
||||||
|
|
||||||
describe('components/dropdown', () => {
|
describe('components/dropdown', () => {
|
||||||
let instance;
|
let instance;
|
||||||
let choicesInstance;
|
|
||||||
let choicesElement;
|
let choicesElement;
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
choicesInstance = {
|
|
||||||
config: {
|
|
||||||
...DEFAULT_CONFIG,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
choicesElement = document.createElement('div');
|
choicesElement = document.createElement('div');
|
||||||
document.body.appendChild(choicesElement);
|
document.body.appendChild(choicesElement);
|
||||||
instance = new Dropdown(choicesInstance, choicesElement, DEFAULT_CLASSNAMES);
|
instance = new Dropdown({
|
||||||
|
element: choicesElement,
|
||||||
|
type: 'text',
|
||||||
|
classNames: DEFAULT_CLASSNAMES,
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
|
@ -26,10 +23,6 @@ describe('components/dropdown', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('constructor', () => {
|
describe('constructor', () => {
|
||||||
it('assigns choices instance to instance', () => {
|
|
||||||
expect(instance.parentInstance).to.eql(choicesInstance);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('assigns choices element to instance', () => {
|
it('assigns choices element to instance', () => {
|
||||||
expect(instance.element).to.eql(choicesElement);
|
expect(instance.element).to.eql(choicesElement);
|
||||||
});
|
});
|
||||||
|
@ -125,8 +118,8 @@ describe('components/dropdown', () => {
|
||||||
expect(instance.isActive).to.equal(true);
|
expect(instance.isActive).to.equal(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('returns parent instance', () => {
|
it('returns instance', () => {
|
||||||
expect(actualResponse).to.eql(choicesInstance);
|
expect(actualResponse).to.eql(instance);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -153,8 +146,8 @@ describe('components/dropdown', () => {
|
||||||
expect(instance.isActive).to.equal(false);
|
expect(instance.isActive).to.equal(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('returns parent instance', () => {
|
it('returns instance', () => {
|
||||||
expect(actualResponse).to.eql(choicesInstance);
|
expect(actualResponse).to.eql(instance);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
import { calcWidthOfInput } from '../lib/utils';
|
import { calcWidthOfInput } from '../lib/utils';
|
||||||
|
|
||||||
export default class Input {
|
export default class Input {
|
||||||
constructor(instance, element, classNames) {
|
constructor({ element, type, classNames, placeholderValue }) {
|
||||||
this.parentInstance = instance;
|
Object.assign(this, { element, type, classNames, placeholderValue });
|
||||||
|
|
||||||
this.element = element;
|
this.element = element;
|
||||||
this.classNames = classNames;
|
this.classNames = classNames;
|
||||||
this.isFocussed = this.element === document.activeElement;
|
this.isFocussed = this.element === document.activeElement;
|
||||||
|
@ -47,7 +48,7 @@ export default class Input {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
onInput() {
|
onInput() {
|
||||||
if (!this.parentInstance.isSelectOneElement) {
|
if (this.type !== 'select-one') {
|
||||||
this.setWidth();
|
this.setWidth();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -60,21 +61,15 @@ export default class Input {
|
||||||
*/
|
*/
|
||||||
onPaste(e) {
|
onPaste(e) {
|
||||||
// Disable pasting into the input if option has been set
|
// Disable pasting into the input if option has been set
|
||||||
if (e.target === this.element && !this.parentInstance.config.paste) {
|
if (e.target === this.element && this.preventPaste) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Set focussed state
|
|
||||||
*/
|
|
||||||
onFocus() {
|
onFocus() {
|
||||||
this.isFocussed = true;
|
this.isFocussed = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove focussed state
|
|
||||||
*/
|
|
||||||
onBlur() {
|
onBlur() {
|
||||||
this.isFocussed = false;
|
this.isFocussed = false;
|
||||||
}
|
}
|
||||||
|
@ -115,7 +110,7 @@ export default class Input {
|
||||||
this.setWidth();
|
this.setWidth();
|
||||||
}
|
}
|
||||||
|
|
||||||
return this.parentInstance;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -124,12 +119,12 @@ export default class Input {
|
||||||
* @return
|
* @return
|
||||||
*/
|
*/
|
||||||
setWidth(enforceWidth) {
|
setWidth(enforceWidth) {
|
||||||
if (this.parentInstance.placeholder) {
|
if (this.placeholderValue) {
|
||||||
// If there is a placeholder, we only want to set the width of the input when it is a greater
|
// If there is a placeholder, we only want to set the width of the input when it is a greater
|
||||||
// length than 75% of the placeholder. This stops the input jumping around.
|
// length than 75% of the placeholder. This stops the input jumping around.
|
||||||
if (
|
if (
|
||||||
(this.element.value &&
|
(this.element.value &&
|
||||||
this.element.value.length >= (this.parentInstance.placeholder.length / 1.25)) ||
|
this.element.value.length >= (this.placeholderValue.length / 1.25)) ||
|
||||||
enforceWidth
|
enforceWidth
|
||||||
) {
|
) {
|
||||||
this.element.style.width = this.calcWidth();
|
this.element.style.width = this.calcWidth();
|
||||||
|
|
|
@ -1,21 +1,21 @@
|
||||||
import { expect } from 'chai';
|
import { expect } from 'chai';
|
||||||
import { stub } from 'sinon';
|
import { stub } from 'sinon';
|
||||||
import Input from './input';
|
import Input from './input';
|
||||||
import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants';
|
import { DEFAULT_CLASSNAMES } from '../constants';
|
||||||
|
|
||||||
describe('components/input', () => {
|
describe('components/input', () => {
|
||||||
let instance;
|
let instance;
|
||||||
let choicesInstance;
|
|
||||||
let choicesElement;
|
let choicesElement;
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
choicesInstance = {
|
|
||||||
config: {
|
|
||||||
...DEFAULT_CONFIG,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
choicesElement = document.createElement('input');
|
choicesElement = document.createElement('input');
|
||||||
instance = new Input(choicesInstance, choicesElement, DEFAULT_CLASSNAMES);
|
instance = new Input({
|
||||||
|
element: choicesElement,
|
||||||
|
type: 'text',
|
||||||
|
classNames: DEFAULT_CLASSNAMES,
|
||||||
|
placeholderValue: null,
|
||||||
|
preventPaste: false,
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
|
@ -24,10 +24,6 @@ describe('components/input', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('constructor', () => {
|
describe('constructor', () => {
|
||||||
it('assigns choices instance to class', () => {
|
|
||||||
expect(instance.parentInstance).to.eql(choicesInstance);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('assigns choices element to class', () => {
|
it('assigns choices element to class', () => {
|
||||||
expect(instance.element).to.eql(choicesElement);
|
expect(instance.element).to.eql(choicesElement);
|
||||||
});
|
});
|
||||||
|
@ -93,7 +89,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.parentInstance.isSelectOneElement = true;
|
instance.type = 'select-one';
|
||||||
instance.onInput();
|
instance.onInput();
|
||||||
expect(setWidthStub.callCount).to.equal(0);
|
expect(setWidthStub.callCount).to.equal(0);
|
||||||
});
|
});
|
||||||
|
@ -101,7 +97,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.parentInstance.isSelectOneElement = false;
|
instance.type = 'text';
|
||||||
instance.onInput();
|
instance.onInput();
|
||||||
expect(setWidthStub.callCount).to.equal(1);
|
expect(setWidthStub.callCount).to.equal(1);
|
||||||
});
|
});
|
||||||
|
@ -120,7 +116,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.parentInstance.config.paste = false;
|
instance.preventPaste = true;
|
||||||
instance.onPaste(eventMock);
|
instance.onPaste(eventMock);
|
||||||
expect(eventMock.preventDefault.callCount).to.equal(1);
|
expect(eventMock.preventDefault.callCount).to.equal(1);
|
||||||
});
|
});
|
||||||
|
@ -128,7 +124,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.parentInstance.config.paste = true;
|
instance.preventPaste = false;
|
||||||
instance.onPaste(eventMock);
|
instance.onPaste(eventMock);
|
||||||
expect(eventMock.preventDefault.callCount).to.equal(0);
|
expect(eventMock.preventDefault.callCount).to.equal(0);
|
||||||
});
|
});
|
||||||
|
@ -264,10 +260,9 @@ describe('components/input', () => {
|
||||||
expect(setWidthStub.callCount).to.equal(1);
|
expect(setWidthStub.callCount).to.equal(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('returns parent instance', () => {
|
it('returns instance', () => {
|
||||||
const actualResponse = instance.clear();
|
const response = instance.clear();
|
||||||
const expectedResponse = choicesInstance;
|
expect(response).to.eql(instance);
|
||||||
expect(actualResponse).to.eql(expectedResponse);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -286,7 +281,7 @@ describe('components/input', () => {
|
||||||
describe('with a placeholder', () => {
|
describe('with a placeholder', () => {
|
||||||
describe('when value length is greater or equal to 75% of the placeholder length', () => {
|
describe('when value length is greater or equal to 75% of the placeholder length', () => {
|
||||||
it('sets the width of the element based on input value', () => {
|
it('sets the width of the element based on input value', () => {
|
||||||
instance.parentInstance.placeholder = 'This is a test';
|
instance.placeholderValue = 'This is a test';
|
||||||
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();
|
||||||
|
@ -297,7 +292,7 @@ describe('components/input', () => {
|
||||||
|
|
||||||
describe('when width is enforced', () => {
|
describe('when width is enforced', () => {
|
||||||
it('sets the width of the element based on input value', () => {
|
it('sets the width of the element based on input value', () => {
|
||||||
instance.parentInstance.placeholder = 'This is a test';
|
instance.placeholderValue = 'This is a test';
|
||||||
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);
|
||||||
|
@ -308,7 +303,7 @@ describe('components/input', () => {
|
||||||
|
|
||||||
describe('when value length is less than 75% of the placeholder length', () => {
|
describe('when value length is less than 75% of the placeholder length', () => {
|
||||||
it('does not set the width of the element', () => {
|
it('does not set the width of the element', () => {
|
||||||
instance.parentInstance.placeholder = 'This is a test';
|
instance.placeholderValue = 'This is a test';
|
||||||
instance.element.value = 'Test';
|
instance.element.value = 'Test';
|
||||||
instance.setWidth();
|
instance.setWidth();
|
||||||
expect(calcWidthStub.callCount).to.equal(0);
|
expect(calcWidthStub.callCount).to.equal(0);
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
export default class List {
|
export default class List {
|
||||||
constructor(instance, element, classNames) {
|
constructor({ element }) {
|
||||||
this.parentInstance = instance;
|
Object.assign(this, { element });
|
||||||
this.element = element;
|
|
||||||
this.classNames = classNames;
|
|
||||||
this.scrollPos = this.element.scrollTop;
|
this.scrollPos = this.element.scrollTop;
|
||||||
this.height = this.element.offsetHeight;
|
this.height = this.element.offsetHeight;
|
||||||
this.hasChildren = !!this.element.children;
|
this.hasChildren = !!this.element.children;
|
||||||
|
|
|
@ -1,20 +1,15 @@
|
||||||
import { expect } from 'chai';
|
import { expect } from 'chai';
|
||||||
import List from './list';
|
import List from './list';
|
||||||
import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants';
|
|
||||||
|
|
||||||
describe('components/list', () => {
|
describe('components/list', () => {
|
||||||
let instance;
|
let instance;
|
||||||
let choicesInstance;
|
|
||||||
let choicesElement;
|
let choicesElement;
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
choicesInstance = {
|
|
||||||
config: {
|
|
||||||
...DEFAULT_CONFIG,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
choicesElement = document.createElement('div');
|
choicesElement = document.createElement('div');
|
||||||
instance = new List(choicesInstance, choicesElement, DEFAULT_CLASSNAMES);
|
instance = new List({
|
||||||
|
element: choicesElement,
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
|
@ -23,17 +18,9 @@ describe('components/list', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('constructor', () => {
|
describe('constructor', () => {
|
||||||
it('assigns choices instance to class', () => {
|
|
||||||
expect(instance.parentInstance).to.eql(choicesInstance);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('assigns choices element to class', () => {
|
it('assigns choices element to class', () => {
|
||||||
expect(instance.element).to.eql(choicesElement);
|
expect(instance.element).to.eql(choicesElement);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('assigns classnames to class', () => {
|
|
||||||
expect(instance.classNames).to.eql(DEFAULT_CLASSNAMES);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('clear', () => {
|
describe('clear', () => {
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
import { dispatchEvent } from '../lib/utils';
|
import { dispatchEvent } from '../lib/utils';
|
||||||
|
|
||||||
export default class WrappedElement {
|
export default class WrappedElement {
|
||||||
constructor(instance, element, classNames) {
|
constructor({ element, classNames }) {
|
||||||
this.parentInstance = instance;
|
Object.assign(this, { element, classNames });
|
||||||
this.element = element;
|
|
||||||
this.classNames = classNames;
|
|
||||||
this.isDisabled = false;
|
this.isDisabled = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,21 +1,17 @@
|
||||||
import { expect } from 'chai';
|
import { expect } from 'chai';
|
||||||
import WrappedElement from './wrapped-element';
|
import WrappedElement from './wrapped-element';
|
||||||
import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants';
|
import { DEFAULT_CLASSNAMES } from '../constants';
|
||||||
|
|
||||||
describe('components/wrappedElement', () => {
|
describe('components/wrappedElement', () => {
|
||||||
let instance;
|
let instance;
|
||||||
let choicesInstance;
|
|
||||||
let element;
|
let element;
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
choicesInstance = {
|
|
||||||
config: {
|
|
||||||
...DEFAULT_CONFIG,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
element = document.createElement('select');
|
element = document.createElement('select');
|
||||||
instance = new WrappedElement(choicesInstance, element, DEFAULT_CLASSNAMES);
|
instance = new WrappedElement({
|
||||||
|
element,
|
||||||
|
classNames: DEFAULT_CLASSNAMES,
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
|
@ -24,10 +20,6 @@ describe('components/wrappedElement', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('constructor', () => {
|
describe('constructor', () => {
|
||||||
it('assigns choices instance to class', () => {
|
|
||||||
expect(instance.parentInstance).to.eql(choicesInstance);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('assigns choices element to class', () => {
|
it('assigns choices element to class', () => {
|
||||||
expect(instance.element).to.eql(element);
|
expect(instance.element).to.eql(element);
|
||||||
});
|
});
|
||||||
|
|
|
@ -2,16 +2,14 @@ import WrappedElement from './wrapped-element';
|
||||||
import { reduceToValues } from './../lib/utils';
|
import { reduceToValues } from './../lib/utils';
|
||||||
|
|
||||||
export default class WrappedInput extends WrappedElement {
|
export default class WrappedInput extends WrappedElement {
|
||||||
constructor(instance, element, classNames) {
|
constructor({ element, classNames, delimiter }) {
|
||||||
super(instance, element, classNames);
|
super({ element, classNames });
|
||||||
this.parentInstance = instance;
|
this.delimiter = delimiter;
|
||||||
this.element = element;
|
|
||||||
this.classNames = classNames;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
set value(items) {
|
set value(items) {
|
||||||
const itemsFiltered = reduceToValues(items);
|
const itemsFiltered = reduceToValues(items);
|
||||||
const itemsFilteredString = itemsFiltered.join(this.parentInstance.config.delimiter);
|
const itemsFilteredString = itemsFiltered.join(this.delimiter);
|
||||||
|
|
||||||
this.element.setAttribute('value', itemsFilteredString);
|
this.element.setAttribute('value', itemsFilteredString);
|
||||||
this.element.value = itemsFilteredString;
|
this.element.value = itemsFilteredString;
|
||||||
|
|
|
@ -2,21 +2,20 @@ import { expect } from 'chai';
|
||||||
import { stub } from 'sinon';
|
import { stub } from 'sinon';
|
||||||
import WrappedElement from './wrapped-element';
|
import WrappedElement from './wrapped-element';
|
||||||
import WrappedInput from './wrapped-input';
|
import WrappedInput from './wrapped-input';
|
||||||
import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants';
|
import { DEFAULT_CLASSNAMES } from '../constants';
|
||||||
|
|
||||||
describe('components/wrappedInput', () => {
|
describe('components/wrappedInput', () => {
|
||||||
let instance;
|
let instance;
|
||||||
let choicesInstance;
|
|
||||||
let element;
|
let element;
|
||||||
|
const delimiter = '-';
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
choicesInstance = {
|
|
||||||
config: {
|
|
||||||
...DEFAULT_CONFIG,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
element = document.createElement('input');
|
element = document.createElement('input');
|
||||||
instance = new WrappedInput(choicesInstance, element, DEFAULT_CLASSNAMES);
|
instance = new WrappedInput({
|
||||||
|
element,
|
||||||
|
classNames: DEFAULT_CLASSNAMES,
|
||||||
|
delimiter,
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
|
@ -25,10 +24,6 @@ describe('components/wrappedInput', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('constructor', () => {
|
describe('constructor', () => {
|
||||||
it('assigns choices instance to class', () => {
|
|
||||||
expect(instance.parentInstance).to.eql(choicesInstance);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('assigns choices element to class', () => {
|
it('assigns choices element to class', () => {
|
||||||
expect(instance.element).to.eql(element);
|
expect(instance.element).to.eql(element);
|
||||||
});
|
});
|
||||||
|
@ -77,7 +72,7 @@ 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.value = data;
|
instance.value = data;
|
||||||
expect(instance.value).to.equal('Value 1,Value 2,Value 3');
|
expect(instance.value).to.equal(`Value 1${delimiter}Value 2${delimiter}Value 3`);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -2,11 +2,8 @@ import WrappedElement from './wrapped-element';
|
||||||
import templates from './../templates';
|
import templates from './../templates';
|
||||||
|
|
||||||
export default class WrappedSelect extends WrappedElement {
|
export default class WrappedSelect extends WrappedElement {
|
||||||
constructor(instance, element, classNames) {
|
constructor({ element, classNames }) {
|
||||||
super(instance, element, classNames);
|
super({ element, classNames });
|
||||||
this.parentInstance = instance;
|
|
||||||
this.element = element;
|
|
||||||
this.classNames = classNames;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get placeholderOption() {
|
get placeholderOption() {
|
||||||
|
|
|
@ -2,20 +2,13 @@ import { expect } from 'chai';
|
||||||
import { stub } from 'sinon';
|
import { stub } from 'sinon';
|
||||||
import WrappedElement from './wrapped-element';
|
import WrappedElement from './wrapped-element';
|
||||||
import WrappedSelect from './wrapped-select';
|
import WrappedSelect from './wrapped-select';
|
||||||
import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants';
|
import { DEFAULT_CLASSNAMES } from '../constants';
|
||||||
|
|
||||||
describe('components/wrappedSelect', () => {
|
describe('components/wrappedSelect', () => {
|
||||||
let instance;
|
let instance;
|
||||||
let choicesInstance;
|
|
||||||
let element;
|
let element;
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
choicesInstance = {
|
|
||||||
config: {
|
|
||||||
...DEFAULT_CONFIG,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
element = document.createElement('select');
|
element = document.createElement('select');
|
||||||
element.id = 'target';
|
element.id = 'target';
|
||||||
for (let i = 1; i <= 4; i++) {
|
for (let i = 1; i <= 4; i++) {
|
||||||
|
@ -32,7 +25,10 @@ describe('components/wrappedSelect', () => {
|
||||||
}
|
}
|
||||||
document.body.appendChild(element);
|
document.body.appendChild(element);
|
||||||
|
|
||||||
instance = new WrappedSelect(choicesInstance, document.getElementById('target'), DEFAULT_CLASSNAMES);
|
instance = new WrappedSelect({
|
||||||
|
element: document.getElementById('target'),
|
||||||
|
classNames: DEFAULT_CLASSNAMES,
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
|
@ -41,10 +37,6 @@ describe('components/wrappedSelect', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('constructor', () => {
|
describe('constructor', () => {
|
||||||
it('assigns choices instance to class', () => {
|
|
||||||
expect(instance.parentInstance).to.eql(choicesInstance);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('assigns choices element to class', () => {
|
it('assigns choices element to class', () => {
|
||||||
expect(instance.element).to.eql(element);
|
expect(instance.element).to.eql(element);
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue