Skip to content

Commit

Permalink
feat(uip-setting): implement new setInconsistency() logic
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sisha0
Sisha0 committed May 6, 2021
1 parent a2be1da commit 1b7a9b7
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 45 deletions.
36 changes: 17 additions & 19 deletions src/settings/setting/bool-setting/bool-setting.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import {UIPSetting} from '../setting';
import {attr} from '@exadel/esl/modules/esl-base-element/core';

import {UIPSetting} from '../setting';
import {UIPStateModel} from '../../../utils/state-model/state-model';
import TokenListUtils from '../../../utils/array-utils/token-list-utils';
import {WARN} from "../../../utils/warn-messages/warn";

export class UIPBoolSetting extends UIPSetting {
public static is = 'uip-bool-setting';
public static inconsistentState = {
message: '(multiple values)',
class: 'inconsistency-marker'
};
public static inconsistencyClass = 'inconsistency-marker';

@attr({defaultValue: ''}) public label: string;
@attr({defaultValue: ''}) public value: string;
Expand Down Expand Up @@ -42,7 +41,7 @@ export class UIPBoolSetting extends UIPSetting {
return val || null;
}

const attrTokens = TokenListUtils.remove(attrValue.split(/\s+/), this.value);
const attrTokens = TokenListUtils.remove(TokenListUtils.split(attrValue), this.value);
val && attrTokens.push(val);

return attrTokens.join(' ');
Expand All @@ -52,21 +51,20 @@ export class UIPBoolSetting extends UIPSetting {
updateFrom(model: UIPStateModel) {
const attrValues = model.getAttribute(this.target, this.attribute);

if (!attrValues.length) return this.setInconsistency(WARN.noTarget);

if (this.mode === 'replace') {
if ((attrValues[0] === null || attrValues[0] === this.value) &&
attrValues.every(val => attrValues[0] === val)) {
this.setValue(attrValues[0]);
} else {
this.setInconsistency();
if (attrValues.some(val => this.value ? val !== attrValues[0] : typeof val !== typeof attrValues[0])) {
return this.setInconsistency(WARN.multiple);
}

return;
return this.setValue((this.value && attrValues[0] !== this.value) ? null : attrValues[0]);
}

const valueMatch = attrValues.map(attrValue =>
TokenListUtils.intersection([this.value], attrValue?.split(' ') || []));
TokenListUtils.intersection([this.value], TokenListUtils.split(attrValue)));
valueMatch.every(match => TokenListUtils.equals(match, valueMatch[0])) ?
this.setValue(valueMatch[0].length ? this.value : null) : this.setInconsistency();
this.setValue(valueMatch[0].length ? this.value : null) : this.setInconsistency(WARN.multiple);
}

protected getDisplayedValue(): string | boolean {
Expand All @@ -84,16 +82,16 @@ export class UIPBoolSetting extends UIPSetting {
this.$field.checked = value !== null;
}

this.querySelector(`.${UIPBoolSetting.inconsistentState.class}`)?.remove();
this.querySelector(`.${UIPBoolSetting.inconsistencyClass}`)?.remove();
}

protected setInconsistency(): void {
protected setInconsistency(msg=WARN.inconsistent): void {
this.$field.checked = false;
this.querySelector(`.${UIPBoolSetting.inconsistentState.class}`)?.remove();
this.querySelector(`.${UIPBoolSetting.inconsistencyClass}`)?.remove();

const inconsistencyMarker = document.createElement('span');
inconsistencyMarker.classList.add(UIPBoolSetting.inconsistentState.class);
inconsistencyMarker.innerText = UIPBoolSetting.inconsistentState.message;
inconsistencyMarker.classList.add(UIPBoolSetting.inconsistencyClass);
inconsistencyMarker.innerText = `(${msg})`;

this.appendChild(inconsistencyMarker);
}
Expand Down
46 changes: 25 additions & 21 deletions src/settings/setting/select-setting/select-setting.ts
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import {attr, boolAttr} from '@exadel/esl/modules/esl-base-element/core';
import {UIPSetting} from '../setting';
import {ESLSelect} from '@exadel/esl';
import {generateUId} from '@exadel/esl/modules/esl-utils/misc/uid';

import {UIPSetting} from '../setting';
import {UIPStateModel} from '../../../utils/state-model/state-model';
import TokenListUtils from '../../../utils/array-utils/token-list-utils';
import {generateUId} from '@exadel/esl/modules/esl-utils/misc/uid';
import {WARN} from "../../../utils/warn-messages/warn";

export class UIPSelectSetting extends UIPSetting {
public static is = 'uip-select-setting';
public static inconsistentState = {
value: 'inconsistent',
text: 'Multiple values'
};
public static inconsistentValue = 'inconsistent';

@attr({defaultValue: ''}) public label: string;
@attr({defaultValue: 'replace'}) public mode: 'replace' | 'append';
Expand Down Expand Up @@ -45,7 +44,7 @@ export class UIPSelectSetting extends UIPSetting {

this.querySelectorAll('option').forEach(option => select.add(option));
select.addEventListener('change', () => {
select.remove(this.values.indexOf(UIPSelectSetting.inconsistentState.value));
select.remove(this.values.indexOf(UIPSelectSetting.inconsistentValue));
});

this.$field.$select = select;
Expand All @@ -66,31 +65,36 @@ export class UIPSelectSetting extends UIPSetting {
}

const attrTokens = this.values.reduce((tokens, option) =>
TokenListUtils.remove(tokens, option), attrValue.split(/\s+/));
TokenListUtils.remove(tokens, option), TokenListUtils.split(attrValue));
val && attrTokens.push(val);

return attrTokens.join(' ');
});
}

updateFrom(model: UIPStateModel) {
this.reset();
const settingOptions = this.values;
const attrValues = model.getAttribute(this.target, this.attribute);

if (!attrValues.length) return this.setInconsistency(WARN.noTarget);

if (this.mode === 'replace') {
if (attrValues[0] && TokenListUtils.contains(settingOptions, attrValues[0].split(' ')) &&
attrValues.every(val => val === attrValues[0])) {
this.setValue(attrValues[0]);
} else {
this.setInconsistency();
if (attrValues.some(val => val !== attrValues[0])) return this.setInconsistency(WARN.multiple);
if (attrValues[0] && TokenListUtils.contains(settingOptions, TokenListUtils.split(attrValues[0]))) {
return this.setValue(attrValues[0]);
}

return;
return this.setInconsistency(WARN.noMatch);
}

const attrTokens = attrValues.map(value => value?.split(' ') || []);
const valueTokens = TokenListUtils.intersection(settingOptions, ...attrTokens);
valueTokens.length ? this.setValue(valueTokens.join(' ')) : this.setInconsistency();
const optionsMatch = attrValues.map(attrValue =>
TokenListUtils.intersection(settingOptions, TokenListUtils.split(attrValue)));
const commonOptions = TokenListUtils.intersection(...optionsMatch);

if (this.multiple || commonOptions.length) return this.setValue(commonOptions.join(' '));
optionsMatch.some(match => match.length) ?
this.setInconsistency(WARN.multiple) : this.setInconsistency(WARN.noMatch);
}

protected getDisplayedValue(): string {
Expand All @@ -105,11 +109,11 @@ export class UIPSelectSetting extends UIPSetting {
this.addEventListener(UIPSelectSetting.changeEvent, this._onChange);
}

protected setInconsistency(): void {
protected setInconsistency(msg=WARN.inconsistent): void {
this.reset();

const inconsistentOption = new Option(UIPSelectSetting.inconsistentState.text,
UIPSelectSetting.inconsistentState.value, false, true);
const inconsistentOption = new Option(msg, UIPSelectSetting.inconsistentValue,
false, true);
inconsistentOption.disabled = true;

this.$field.$select.add(inconsistentOption, 0);
Expand All @@ -118,6 +122,6 @@ export class UIPSelectSetting extends UIPSetting {

protected reset(): void {
this.$field.options.forEach(opt => opt.selected = false);
this.$field.$select.remove(this.values.indexOf(UIPSelectSetting.inconsistentState.value));
this.$field.$select.remove(this.values.indexOf(UIPSelectSetting.inconsistentValue));
}
}
12 changes: 7 additions & 5 deletions src/settings/setting/text-setting/text-setting.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import {UIPSetting} from '../setting';
import {attr} from '@exadel/esl/modules/esl-base-element/core';

import {UIPSetting} from '../setting';
import {WARN} from "../../../utils/warn-messages/warn";

export class UIPTextSetting extends UIPSetting {
public static is = 'uip-text-setting';

Expand All @@ -24,13 +26,13 @@ export class UIPTextSetting extends UIPSetting {
return this.$field.value;
}

protected setValue(value: string): void {
this.$field.value = value;
protected setValue(value: string | null): void {
this.$field.value = value || '';
this.$field.placeholder = '';
}

protected setInconsistency(): void {
protected setInconsistency(msg=WARN.inconsistent): void {
this.$field.value = '';
this.$field.placeholder = 'Multiple values';
this.$field.placeholder = msg;
}
}

0 comments on commit 1b7a9b7

Please sign in to comment.