From 23228c4a3a0414b58bb133c585fab286289ca6a0 Mon Sep 17 00:00:00 2001 From: Will Eastcott Date: Fri, 10 May 2024 13:42:47 +0100 Subject: [PATCH] Refactor class name imports (#353) * Refactor class name imports * Reorder exports --- src/class.ts | 54 +++++++++------------------- src/components/BooleanInput/index.ts | 8 ++--- src/components/ColorPicker/index.ts | 8 ++--- src/components/Container/index.ts | 24 ++++++------- src/components/Element/index.ts | 24 ++++++------- src/components/InputElement/index.ts | 6 ++-- src/components/Label/index.ts | 8 ++--- src/components/NumericInput/index.ts | 8 ++--- src/components/Panel/index.ts | 14 ++++---- src/components/RadioButton/index.ts | 8 ++--- src/components/SelectInput/index.ts | 12 +++---- src/components/SliderInput/index.ts | 14 ++++---- src/components/TextInput/index.ts | 6 ++-- src/components/TreeViewItem/index.ts | 4 +-- src/components/VectorInput/index.ts | 14 ++++---- 15 files changed, 96 insertions(+), 116 deletions(-) diff --git a/src/class.ts b/src/class.ts index 4c2bf676..58706bb4 100644 --- a/src/class.ts +++ b/src/class.ts @@ -1,37 +1,17 @@ -const FLEX = 'pcui-flex'; -const GRID = 'pcui-grid'; -const HIDDEN = 'pcui-hidden'; -const SCROLLABLE = 'pcui-scrollable'; -const RESIZABLE = 'pcui-resizable'; -const READONLY = 'pcui-readonly'; -const DISABLED = 'pcui-disabled'; -const COLLAPSIBLE = 'pcui-collapsible'; -const COLLAPSED = 'pcui-collapsed'; -const FOCUS = 'pcui-focus'; -const MULTIPLE_VALUES = 'pcui-multiple-values'; -const ERROR = 'pcui-error'; -const FLASH = 'flash'; -const NOT_FLEXIBLE = 'pcui-not-flexible'; -const DEFAULT_MOUSEDOWN = 'pcui-default-mousedown'; -const FONT_REGULAR = 'font-regular'; -const FONT_BOLD = 'font-bold'; - -export { - FLEX, - GRID, - HIDDEN, - SCROLLABLE, - RESIZABLE, - READONLY, - DISABLED, - COLLAPSIBLE, - COLLAPSED, - FOCUS, - MULTIPLE_VALUES, - ERROR, - FLASH, - NOT_FLEXIBLE, - DEFAULT_MOUSEDOWN, - FONT_REGULAR, - FONT_BOLD -}; +export const CLASS_COLLAPSED = 'pcui-collapsed'; +export const CLASS_COLLAPSIBLE = 'pcui-collapsible'; +export const CLASS_DEFAULT_MOUSEDOWN = 'pcui-default-mousedown'; +export const CLASS_DISABLED = 'pcui-disabled'; +export const CLASS_ERROR = 'pcui-error'; +export const CLASS_FLASH = 'flash'; +export const CLASS_FLEX = 'pcui-flex'; +export const CLASS_FOCUS = 'pcui-focus'; +export const CLASS_FONT_REGULAR = 'font-regular'; +export const CLASS_FONT_BOLD = 'font-bold'; +export const CLASS_GRID = 'pcui-grid'; +export const CLASS_HIDDEN = 'pcui-hidden'; +export const CLASS_MULTIPLE_VALUES = 'pcui-multiple-values'; +export const CLASS_NOT_FLEXIBLE = 'pcui-not-flexible'; +export const CLASS_READONLY = 'pcui-readonly'; +export const CLASS_RESIZABLE = 'pcui-resizable'; +export const CLASS_SCROLLABLE = 'pcui-scrollable'; diff --git a/src/components/BooleanInput/index.ts b/src/components/BooleanInput/index.ts index 2220281d..e10c9483 100644 --- a/src/components/BooleanInput/index.ts +++ b/src/components/BooleanInput/index.ts @@ -1,5 +1,5 @@ +import { CLASS_NOT_FLEXIBLE, CLASS_MULTIPLE_VALUES } from '../../class'; import Element, { ElementArgs, IBindable, IBindableArgs, IFocusable } from '../Element'; -import * as pcuiClass from '../../class'; const CLASS_BOOLEAN_INPUT = 'pcui-boolean-input'; const CLASS_BOOLEAN_INPUT_TICKED = CLASS_BOOLEAN_INPUT + '-ticked'; @@ -40,7 +40,7 @@ class BooleanInput extends Element implements IBindable, IFocusable { } else { this.class.add(CLASS_BOOLEAN_INPUT); } - this.class.add(pcuiClass.NOT_FLEXIBLE); + this.class.add(CLASS_NOT_FLEXIBLE); this.dom.addEventListener('keydown', this._onKeyDown); this.dom.addEventListener('focus', this._onFocus); @@ -100,7 +100,7 @@ class BooleanInput extends Element implements IBindable, IFocusable { }; protected _updateValue(value: boolean) { - this.class.remove(pcuiClass.MULTIPLE_VALUES); + this.class.remove(CLASS_MULTIPLE_VALUES); if (value === this.value) return false; @@ -146,7 +146,7 @@ class BooleanInput extends Element implements IBindable, IFocusable { if (different) { this._updateValue(null); - this.class.add(pcuiClass.MULTIPLE_VALUES); + this.class.add(CLASS_MULTIPLE_VALUES); } else { this._updateValue(values[0]); } diff --git a/src/components/ColorPicker/index.ts b/src/components/ColorPicker/index.ts index 5709ed53..58453f58 100644 --- a/src/components/ColorPicker/index.ts +++ b/src/components/ColorPicker/index.ts @@ -1,10 +1,10 @@ import { EventHandle } from '@playcanvas/observer'; +import { CLASS_MULTIPLE_VALUES, CLASS_NOT_FLEXIBLE } from '../../class'; import Element, { ElementArgs, IBindable, IBindableArgs } from '../Element'; import Overlay from '../Overlay'; import NumericInput from '../NumericInput'; import TextInput from '../TextInput'; -import * as pcuiClass from '../../class'; import { _hsv2rgb, _rgb2hsv } from '../../Math/color-value'; const CLASS_ROOT = 'pcui-color-input'; @@ -99,7 +99,7 @@ class ColorPicker extends Element implements IBindable { constructor(args: Readonly = {}) { super(args); - this.class.add(CLASS_ROOT, pcuiClass.NOT_FLEXIBLE); + this.class.add(CLASS_ROOT, CLASS_NOT_FLEXIBLE); // this element shows the actual color. The // parent element shows the checkerboard pattern @@ -451,7 +451,7 @@ class ColorPicker extends Element implements IBindable { } } - this.class.remove(pcuiClass.MULTIPLE_VALUES); + this.class.remove(CLASS_MULTIPLE_VALUES); if (dirty) { this._setValue(value); @@ -744,7 +744,7 @@ class ColorPicker extends Element implements IBindable { if (different) { this.value = null; - this.class.add(pcuiClass.MULTIPLE_VALUES); + this.class.add(CLASS_MULTIPLE_VALUES); } else { // @ts-ignore this.value = values[0]; diff --git a/src/components/Container/index.ts b/src/components/Container/index.ts index 07c03b43..452e2d74 100644 --- a/src/components/Container/index.ts +++ b/src/components/Container/index.ts @@ -1,5 +1,5 @@ +import { CLASS_FLEX, CLASS_GRID, CLASS_RESIZABLE, CLASS_SCROLLABLE } from '../../class'; import Element, { ElementArgs, IFlexArgs, IParentArgs } from '../Element'; -import * as pcuiClass from '../../class'; const RESIZE_HANDLE_SIZE = 4; @@ -11,7 +11,7 @@ const VALID_RESIZABLE_VALUES = [ 'left' ]; -const CLASS_RESIZING = pcuiClass.RESIZABLE + '-resizing'; +const CLASS_RESIZING = CLASS_RESIZABLE + '-resizing'; const CLASS_RESIZABLE_HANDLE = 'pcui-resizable-handle'; const CLASS_CONTAINER = 'pcui-container'; @@ -643,9 +643,9 @@ class Container extends Element { this._flex = value; if (value) { - this.class.add(pcuiClass.FLEX); + this.class.add(CLASS_FLEX); } else { - this.class.remove(pcuiClass.FLEX); + this.class.remove(CLASS_FLEX); } } @@ -662,9 +662,9 @@ class Container extends Element { this._grid = value; if (value) { - this.class.add(pcuiClass.GRID); + this.class.add(CLASS_GRID); } else { - this.class.remove(pcuiClass.GRID); + this.class.remove(CLASS_GRID); } } @@ -681,9 +681,9 @@ class Container extends Element { this._scrollable = value; if (value) { - this.class.add(pcuiClass.SCROLLABLE); + this.class.add(CLASS_SCROLLABLE); } else { - this.class.remove(pcuiClass.SCROLLABLE); + this.class.remove(CLASS_SCROLLABLE); } } @@ -706,7 +706,7 @@ class Container extends Element { // remove old class if (this._resizable) { - this.class.remove(`${pcuiClass.RESIZABLE}-${this._resizable}`); + this.class.remove(`${CLASS_RESIZABLE}-${this._resizable}`); } this._resizable = value; @@ -714,8 +714,8 @@ class Container extends Element { if (value) { // add resize class and create / append resize handle - this.class.add(pcuiClass.RESIZABLE); - this.class.add(`${pcuiClass.RESIZABLE}-${value}`); + this.class.add(CLASS_RESIZABLE); + this.class.add(`${CLASS_RESIZABLE}-${value}`); if (!this._domResizeHandle) { this._createResizeHandle(); @@ -723,7 +723,7 @@ class Container extends Element { this._dom.appendChild(this._domResizeHandle); } else { // remove resize class and resize handle - this.class.remove(pcuiClass.RESIZABLE); + this.class.remove(CLASS_RESIZABLE); if (this._domResizeHandle) { this._dom.removeChild(this._domResizeHandle); } diff --git a/src/components/Element/index.ts b/src/components/Element/index.ts index d590bebc..ab13d1b9 100644 --- a/src/components/Element/index.ts +++ b/src/components/Element/index.ts @@ -1,7 +1,7 @@ import { EventHandle, Events, HandleEvent, Observer } from '@playcanvas/observer'; import * as React from 'react'; -import * as pcuiClass from '../../class'; +import { CLASS_DISABLED, CLASS_ERROR, CLASS_FLASH, CLASS_FONT_REGULAR, CLASS_HIDDEN, CLASS_READONLY } from '../../class'; import { BindingBase } from '../../binding'; const CLASS_ELEMENT = 'pcui-element'; @@ -437,7 +437,7 @@ class Element extends Events { this._dom.addEventListener('mouseout', this._onMouseOut); // add css classes - this._dom.classList.add(CLASS_ELEMENT, pcuiClass.FONT_REGULAR); + this._dom.classList.add(CLASS_ELEMENT, CLASS_FONT_REGULAR); // add user classes if (args.class) { @@ -575,10 +575,10 @@ class Element extends Events { flash() { if (this._flashTimeout) return; - this.class.add(pcuiClass.FLASH); + this.class.add(CLASS_FLASH); this._flashTimeout = window.setTimeout(() => { this._flashTimeout = null; - this.class.remove(pcuiClass.FLASH); + this.class.remove(CLASS_FLASH); }, 200); } @@ -602,9 +602,9 @@ class Element extends Events { protected _onEnabledChange(enabled: boolean) { if (enabled) { - this.class.remove(pcuiClass.DISABLED); + this.class.remove(CLASS_DISABLED); } else { - this.class.add(pcuiClass.DISABLED); + this.class.add(CLASS_DISABLED); } this.emit(enabled ? 'enable' : 'disable'); @@ -646,9 +646,9 @@ class Element extends Events { protected _onReadOnlyChange(readOnly: boolean) { if (readOnly) { - this.class.add(pcuiClass.READONLY); + this.class.add(CLASS_READONLY); } else { - this.class.remove(pcuiClass.READONLY); + this.class.remove(CLASS_READONLY); } this.emit('readOnly', readOnly); @@ -815,9 +815,9 @@ class Element extends Events { this._hidden = value; if (value) { - this.class.add(pcuiClass.HIDDEN); + this.class.add(CLASS_HIDDEN); } else { - this.class.remove(pcuiClass.HIDDEN); + this.class.remove(CLASS_HIDDEN); } this.emit(value ? 'hide' : 'show'); @@ -863,9 +863,9 @@ class Element extends Events { if (this._hasError === value) return; this._hasError = value; if (value) { - this.class.add(pcuiClass.ERROR); + this.class.add(CLASS_ERROR); } else { - this.class.remove(pcuiClass.ERROR); + this.class.remove(CLASS_ERROR); } } diff --git a/src/components/InputElement/index.ts b/src/components/InputElement/index.ts index 0d30a719..33dfe90c 100644 --- a/src/components/InputElement/index.ts +++ b/src/components/InputElement/index.ts @@ -1,5 +1,5 @@ +import { CLASS_FOCUS } from '../../class'; import Element, { ElementArgs, IBindable, IBindableArgs, IFocusable, IPlaceholder, IPlaceholderArgs } from '../Element'; -import * as pcuiClass from '../../class'; const CLASS_INPUT_ELEMENT = 'pcui-input-element'; @@ -116,13 +116,13 @@ abstract class InputElement extends Element implements IBindable, IFocusable, IP } protected _onInputFocus = (evt: FocusEvent) => { - this.class.add(pcuiClass.FOCUS); + this.class.add(CLASS_FOCUS); this.emit('focus', evt); this._prevValue = this._domInput.value; }; protected _onInputBlur = (evt: FocusEvent) => { - this.class.remove(pcuiClass.FOCUS); + this.class.remove(CLASS_FOCUS); this.emit('blur', evt); }; diff --git a/src/components/Label/index.ts b/src/components/Label/index.ts index 403217a8..c27f03f6 100644 --- a/src/components/Label/index.ts +++ b/src/components/Label/index.ts @@ -1,4 +1,4 @@ -import * as pcuiClass from '../../class'; +import { CLASS_DEFAULT_MOUSEDOWN, CLASS_MULTIPLE_VALUES } from '../../class'; import Element, { ElementArgs, IBindable, IBindableArgs, IFlexArgs, IPlaceholder, IPlaceholderArgs } from '../Element'; const CLASS_LABEL = 'pcui-label'; @@ -59,7 +59,7 @@ class Label extends Element implements IPlaceholder, IBindable { this.text = args.text ?? args.value ?? ''; if (args.allowTextSelection) { - this.class.add(pcuiClass.DEFAULT_MOUSEDOWN); + this.class.add(CLASS_DEFAULT_MOUSEDOWN); } if (args.nativeTooltip) { @@ -77,7 +77,7 @@ class Label extends Element implements IPlaceholder, IBindable { } protected _updateText(value: string) { - this.class.remove(pcuiClass.MULTIPLE_VALUES); + this.class.remove(CLASS_MULTIPLE_VALUES); if (this._text === value) return false; @@ -127,7 +127,7 @@ class Label extends Element implements IPlaceholder, IBindable { if (different) { this._updateText(''); - this.class.add(pcuiClass.MULTIPLE_VALUES); + this.class.add(CLASS_MULTIPLE_VALUES); } else { this._updateText(values[0]); } diff --git a/src/components/NumericInput/index.ts b/src/components/NumericInput/index.ts index 1a56a181..894051a2 100644 --- a/src/components/NumericInput/index.ts +++ b/src/components/NumericInput/index.ts @@ -1,6 +1,6 @@ +import { CLASS_MULTIPLE_VALUES } from '../../class'; import Element from '../Element'; import InputElement, { InputElementArgs } from '../InputElement'; -import * as pcuiClass from '../../class'; const CLASS_NUMERIC_INPUT = 'pcui-numeric-input'; const CLASS_NUMERIC_INPUT_SLIDER_CONTROL = CLASS_NUMERIC_INPUT + '-slider-control'; @@ -298,7 +298,7 @@ class NumericInput extends InputElement { this._domInput.value = String(value); } - this.class.remove(pcuiClass.MULTIPLE_VALUES); + this.class.remove(CLASS_MULTIPLE_VALUES); if (different) { this.emit('change', value); @@ -309,7 +309,7 @@ class NumericInput extends InputElement { set value(value: number) { value = this._normalizeValue(value); - const forceUpdate = this.class.contains(pcuiClass.MULTIPLE_VALUES) && value === null && this._allowNull; + const forceUpdate = this.class.contains(CLASS_MULTIPLE_VALUES) && value === null && this._allowNull; const changed = this._updateValue(value, forceUpdate); if (changed && this.binding) { @@ -332,7 +332,7 @@ class NumericInput extends InputElement { if (different) { this._updateValue(null); - this.class.add(pcuiClass.MULTIPLE_VALUES); + this.class.add(CLASS_MULTIPLE_VALUES); if (this._sliderControl) { this._sliderControl.class.add(CLASS_NUMERIC_INPUT_SLIDER_CONTROL_HIDDEN); } diff --git a/src/components/Panel/index.ts b/src/components/Panel/index.ts index ca46ecc9..a82c84e1 100644 --- a/src/components/Panel/index.ts +++ b/src/components/Panel/index.ts @@ -1,4 +1,4 @@ -import * as pcuiClass from '../../class'; +import { CLASS_COLLAPSED, CLASS_COLLAPSIBLE, CLASS_FONT_BOLD } from '../../class'; import Element from '../Element'; import Container, { ContainerArgs } from '../Container'; import Label from '../Label'; @@ -196,13 +196,13 @@ class Panel extends Container { this._containerHeader = new Container({ flex: true, flexDirection: 'row', - class: [CLASS_PANEL_HEADER, pcuiClass.FONT_BOLD] + class: [CLASS_PANEL_HEADER, CLASS_FONT_BOLD] }); // header title this._labelTitle = new Label({ text: args.headerText, - class: [CLASS_PANEL_HEADER_TITLE, pcuiClass.FONT_BOLD] + class: [CLASS_PANEL_HEADER_TITLE, CLASS_FONT_BOLD] }); this._containerHeader.append(this._labelTitle); @@ -285,11 +285,11 @@ class Panel extends Container { // add collapsed class after getting the width and height // because if we add it before then because of overflow:hidden // we might get inaccurate width/heights. - this.class.add(pcuiClass.COLLAPSED); + this.class.add(CLASS_COLLAPSED); } else { // remove collapsed class first and the restore width and height // (opposite order of collapsing) - this.class.remove(pcuiClass.COLLAPSED); + this.class.remove(CLASS_COLLAPSED); if (this._collapseHorizontally) { this.height = ''; @@ -362,9 +362,9 @@ class Panel extends Container { this._collapsible = value; if (value) { - this.class.add(pcuiClass.COLLAPSIBLE); + this.class.add(CLASS_COLLAPSIBLE); } else { - this.class.remove(pcuiClass.COLLAPSIBLE); + this.class.remove(CLASS_COLLAPSIBLE); } this._reflow(); diff --git a/src/components/RadioButton/index.ts b/src/components/RadioButton/index.ts index a7f7839f..60f2fc49 100644 --- a/src/components/RadioButton/index.ts +++ b/src/components/RadioButton/index.ts @@ -1,5 +1,5 @@ +import { CLASS_MULTIPLE_VALUES, CLASS_NOT_FLEXIBLE } from '../../class'; import Element, { ElementArgs, IBindable, IBindableArgs, IFocusable } from '../Element'; -import * as pcuiClass from '../../class'; const CLASS_RADIO_BUTTON = 'pcui-radio-button'; const CLASS_RADIO_BUTTON_SELECTED = CLASS_RADIO_BUTTON + '-selected'; @@ -26,7 +26,7 @@ class RadioButton extends Element implements IBindable, IFocusable { super({ tabIndex: 0, ...args }); this.class.add(CLASS_RADIO_BUTTON); - this.class.add(pcuiClass.NOT_FLEXIBLE); + this.class.add(CLASS_NOT_FLEXIBLE); this.dom.addEventListener('keydown', this._onKeyDown); this.dom.addEventListener('focus', this._onFocus); @@ -82,7 +82,7 @@ class RadioButton extends Element implements IBindable, IFocusable { }; protected _updateValue(value: boolean) { - this.class.remove(pcuiClass.MULTIPLE_VALUES); + this.class.remove(CLASS_MULTIPLE_VALUES); if (value === this.value) return false; @@ -128,7 +128,7 @@ class RadioButton extends Element implements IBindable, IFocusable { if (different) { this._updateValue(null); - this.class.add(pcuiClass.MULTIPLE_VALUES); + this.class.add(CLASS_MULTIPLE_VALUES); } else { this._updateValue(values[0]); } diff --git a/src/components/SelectInput/index.ts b/src/components/SelectInput/index.ts index 82df3c15..48d7f709 100644 --- a/src/components/SelectInput/index.ts +++ b/src/components/SelectInput/index.ts @@ -1,9 +1,9 @@ +import { CLASS_FOCUS, CLASS_MULTIPLE_VALUES } from '../../class'; import Element, { ElementArgs, IBindable, IBindableArgs, IFocusable, IPlaceholderArgs } from '../Element'; import Container from '../Container'; import TextInput from '../TextInput'; import Button from '../Button'; import Label from '../Label'; -import * as pcuiClass from '../../class'; import { searchItems } from '../../helpers/search'; const CLASS_SELECT_INPUT = 'pcui-select-input'; @@ -818,7 +818,7 @@ class SelectInput extends Element implements IBindable, IFocusable { }; protected _onFocus = () => { - this.class.add(pcuiClass.FOCUS); + this.class.add(CLASS_FOCUS); this.emit('focus'); if (!this._input.hidden) { this.open(); @@ -826,7 +826,7 @@ class SelectInput extends Element implements IBindable, IFocusable { }; protected _onBlur = () => { - this.class.remove(pcuiClass.FOCUS); + this.class.remove(CLASS_FOCUS); this.emit('blur'); }; @@ -1145,7 +1145,7 @@ class SelectInput extends Element implements IBindable, IFocusable { } this._suspendInputChange = false; - this.class.remove(pcuiClass.MULTIPLE_VALUES); + this.class.remove(CLASS_MULTIPLE_VALUES); value = this._convertValue(value); @@ -1153,7 +1153,7 @@ class SelectInput extends Element implements IBindable, IFocusable { // if the value is null because we are showing multiple values // but someone wants to actually set the value of all observers to null // then make sure we do not return early - if (value !== null || !this._allowNull || !this.class.contains(pcuiClass.MULTIPLE_VALUES)) { + if (value !== null || !this._allowNull || !this.class.contains(CLASS_MULTIPLE_VALUES)) { return; } } @@ -1213,7 +1213,7 @@ class SelectInput extends Element implements IBindable, IFocusable { } } - this.class.add(pcuiClass.MULTIPLE_VALUES); + this.class.add(CLASS_MULTIPLE_VALUES); } else { this.value = values[0]; } diff --git a/src/components/SliderInput/index.ts b/src/components/SliderInput/index.ts index 97e70155..b33ecb44 100644 --- a/src/components/SliderInput/index.ts +++ b/src/components/SliderInput/index.ts @@ -1,6 +1,6 @@ +import { CLASS_MULTIPLE_VALUES } from '../../class'; import Element, { ElementArgs, IBindable, IBindableArgs, IFlexArgs, IFocusable, IPlaceholder, IPlaceholderArgs } from '../Element'; import NumericInput from '../NumericInput'; -import * as pcuiClass from '../../class'; const CLASS_SLIDER = 'pcui-slider'; const CLASS_SLIDER_CONTAINER = CLASS_SLIDER + '-container'; @@ -334,10 +334,10 @@ class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder set value(value) { this._numericInput.value = value; - if (this._numericInput.class.contains(pcuiClass.MULTIPLE_VALUES)) { - this.class.add(pcuiClass.MULTIPLE_VALUES); + if (this._numericInput.class.contains(CLASS_MULTIPLE_VALUES)) { + this.class.add(CLASS_MULTIPLE_VALUES); } else { - this.class.remove(pcuiClass.MULTIPLE_VALUES); + this.class.remove(CLASS_MULTIPLE_VALUES); } } @@ -348,10 +348,10 @@ class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder /* eslint accessor-pairs: 0 */ set values(values: Array) { this._numericInput.values = values; - if (this._numericInput.class.contains(pcuiClass.MULTIPLE_VALUES)) { - this.class.add(pcuiClass.MULTIPLE_VALUES); + if (this._numericInput.class.contains(CLASS_MULTIPLE_VALUES)) { + this.class.add(CLASS_MULTIPLE_VALUES); } else { - this.class.remove(pcuiClass.MULTIPLE_VALUES); + this.class.remove(CLASS_MULTIPLE_VALUES); } } diff --git a/src/components/TextInput/index.ts b/src/components/TextInput/index.ts index 6cbbaa08..93418566 100644 --- a/src/components/TextInput/index.ts +++ b/src/components/TextInput/index.ts @@ -1,6 +1,6 @@ +import { CLASS_MULTIPLE_VALUES } from '../../class'; import Element, { IBindableArgs, IPlaceholderArgs } from '../Element'; import InputElement, { InputElementArgs } from '../InputElement'; -import * as pcuiClass from '../../class'; const CLASS_TEXT_INPUT = 'pcui-text-input'; @@ -58,7 +58,7 @@ class TextInput extends InputElement { } protected _updateValue(value: string | Array) { - this.class.remove(pcuiClass.MULTIPLE_VALUES); + this.class.remove(CLASS_MULTIPLE_VALUES); if (value && typeof (value) === 'object') { if (Array.isArray(value)) { @@ -112,7 +112,7 @@ class TextInput extends InputElement { if (different) { this._updateValue(null); - this.class.add(pcuiClass.MULTIPLE_VALUES); + this.class.add(CLASS_MULTIPLE_VALUES); } else { this._updateValue(values[0]); } diff --git a/src/components/TreeViewItem/index.ts b/src/components/TreeViewItem/index.ts index 715f43d5..186c1b39 100644 --- a/src/components/TreeViewItem/index.ts +++ b/src/components/TreeViewItem/index.ts @@ -1,8 +1,8 @@ +import { CLASS_FONT_REGULAR } from '../../class'; import Element from '../Element'; import Label from '../Label'; import Container, { ContainerArgs } from '../Container'; import TextInput from '../TextInput'; -import * as pcuiClass from '../../class'; const CLASS_ROOT = 'pcui-treeview-item'; const CLASS_ICON = CLASS_ROOT + '-icon'; @@ -359,7 +359,7 @@ class TreeViewItem extends Container { const textInput = new TextInput({ renderChanges: false, value: this.text, - class: pcuiClass.FONT_REGULAR + class: CLASS_FONT_REGULAR }); textInput.on('blur', () => { diff --git a/src/components/VectorInput/index.ts b/src/components/VectorInput/index.ts index 10cf40b4..b7f4e780 100644 --- a/src/components/VectorInput/index.ts +++ b/src/components/VectorInput/index.ts @@ -1,7 +1,7 @@ import { Observer } from '@playcanvas/observer'; +import { CLASS_FOCUS, CLASS_MULTIPLE_VALUES } from '../../class'; import Element, { ElementArgs, IBindable, IBindableArgs, IFocusable, IPlaceholder, IPlaceholderArgs } from '../Element'; import NumericInput from '../NumericInput'; -import * as pcuiClass from '../../class'; const CLASS_VECTOR_INPUT = 'pcui-vector-input'; @@ -76,7 +76,7 @@ class VectorInput extends Element implements IBindable, IFocusable, IPlaceholder if (this._bindAllInputs) { input.focus(); for (let i = 0; i < this._inputs.length; i++) { - this._inputs[i].class.add(pcuiClass.FOCUS); + this._inputs[i].class.add(CLASS_FOCUS); } if (this.binding) { @@ -88,7 +88,7 @@ class VectorInput extends Element implements IBindable, IFocusable, IPlaceholder this._onInputChange(input); this._bindAllInputs = false; for (let i = 0; i < this._inputs.length; i++) { - this._inputs[i].class.remove(pcuiClass.FOCUS); + this._inputs[i].class.remove(CLASS_FOCUS); } input.blur(); @@ -127,12 +127,12 @@ class VectorInput extends Element implements IBindable, IFocusable, IPlaceholder if (this._applyingChange) return; // check if any of our inputs have the MULTIPLE_VALUES class and if so inherit it for us as well - const multipleValues = this._inputs.some(input => input.class.contains(pcuiClass.MULTIPLE_VALUES)); + const multipleValues = this._inputs.some(input => input.class.contains(CLASS_MULTIPLE_VALUES)); if (multipleValues) { - this.class.add(pcuiClass.MULTIPLE_VALUES); + this.class.add(CLASS_MULTIPLE_VALUES); } else { - this.class.remove(pcuiClass.MULTIPLE_VALUES); + this.class.remove(CLASS_MULTIPLE_VALUES); } if (this._bindAllInputs) { @@ -149,7 +149,7 @@ class VectorInput extends Element implements IBindable, IFocusable, IPlaceholder } protected _updateValue(value: number[]) { - this.class.remove(pcuiClass.MULTIPLE_VALUES); + this.class.remove(CLASS_MULTIPLE_VALUES); if (JSON.stringify(this.value) === JSON.stringify(value)) return false;