Skip to content

Commit

Permalink
Refactor class name imports (#353)
Browse files Browse the repository at this point in the history 
* Refactor class name imports

* Reorder exports
  • Loading branch information
@willeastcott
willeastcott authored May 10, 2024
1 parent 150f03c commit 23228c4
Show file tree
Hide file tree
Showing 15 changed files with 96 additions and 116 deletions.
54 changes: 17 additions & 37 deletions src/class.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
8 changes: 4 additions & 4 deletions src/components/BooleanInput/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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]);
}
Expand Down
8 changes: 4 additions & 4 deletions src/components/ColorPicker/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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];
Expand Down
24 changes: 12 additions & 12 deletions src/components/Container/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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;

Expand All @@ -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';

Expand Down Expand Up @@ -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);
}
}

Expand All @@ -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);
}
}

Expand All @@ -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);
}

}
Expand All @@ -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);
}
Expand Down
24 changes: 12 additions & 12 deletions src/components/Element/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}

Expand All @@ -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');
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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);
}
}

Expand Down
6 changes: 3 additions & 3 deletions src/components/InputElement/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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);
};

Expand Down
8 changes: 4 additions & 4 deletions src/components/Label/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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) {
Expand All @@ -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;

Expand Down Expand Up @@ -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]);
}
Expand Down
8 changes: 4 additions & 4 deletions src/components/NumericInput/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);
Expand All @@ -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) {
Expand All @@ -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);
}
Expand Down
Loading

0 comments on commit 23228c4

Please sign in to comment.