Refactor class name imports

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_FLEX = 'pcui-flex';
+export const CLASS_GRID = 'pcui-grid';
+export const CLASS_HIDDEN = 'pcui-hidden';
+export const CLASS_SCROLLABLE = 'pcui-scrollable';
+export const CLASS_RESIZABLE = 'pcui-resizable';
+export const CLASS_READONLY = 'pcui-readonly';
+export const CLASS_DISABLED = 'pcui-disabled';
+export const CLASS_COLLAPSIBLE = 'pcui-collapsible';
+export const CLASS_COLLAPSED = 'pcui-collapsed';
+export const CLASS_FOCUS = 'pcui-focus';
+export const CLASS_MULTIPLE_VALUES = 'pcui-multiple-values';
+export const CLASS_ERROR = 'pcui-error';
+export const CLASS_FLASH = 'flash';
+export const CLASS_NOT_FLEXIBLE = 'pcui-not-flexible';
+export const CLASS_DEFAULT_MOUSEDOWN = 'pcui-default-mousedown';
+export const CLASS_FONT_REGULAR = 'font-regular';
+export const CLASS_FONT_BOLD = 'font-bold';

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]);
         }

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<ColorPickerArgs> = {}) {
         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];

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,24 +706,24 @@ 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;
         this._resizeHorizontally = (value === 'right' || value === 'left');
 
         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();
             }
             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);
             }

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);
         }
     }
 

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);
     };
 

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]);
         }

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);
             }