Remove the defaultArgs property from components (#265)

* remove default args from components

src/components/ArrayInput/index.ts

@@ -39,11 +39,11 @@ export interface ArrayInputArgs extends ElementArgs, IBindableArgs {
      */
     fixedSize?: boolean;
     /**
-     * If `true` then the array will be rendered using panels.
+     * If `true` then the array will be rendered using panels. Defaults to `false`.
      */
     usePanels?: boolean;
     /**
-     * Used to specify the default values for each element in the array. Can be left null.
+     * Used to specify the default values for each element in the array. Defaults to `null`.
      */
     getDefaultFn?: () => any;
 }
@@ -52,12 +52,6 @@ export interface ArrayInputArgs extends ElementArgs, IBindableArgs {
  * Element that allows editing an array of values.
  */
 class ArrayInput extends Element implements IFocusable, IBindable {
-    static readonly defaultArgs: ArrayInputArgs = {
-        ...Element.defaultArgs,
-        getDefaultFn: null,
-        usePanels: false
-    };
-
     /**
      * Fired when an array element is linked to observers.
      *
@@ -123,9 +117,7 @@ class ArrayInput extends Element implements IFocusable, IBindable {
 
     protected _renderChanges: boolean;
 
-    constructor(args: ArrayInputArgs = ArrayInput.defaultArgs) {
-        args = { ...ArrayInput.defaultArgs, ...args };
-
+    constructor(args: ArrayInputArgs = {}) {
         // remove binding because we want to set it later
         const binding = args.binding;
         delete args.binding;
@@ -142,7 +134,7 @@ class ArrayInput extends Element implements IFocusable, IBindable {
 
         this.class.add(CLASS_ARRAY_INPUT, CLASS_ARRAY_EMPTY);
 
-        this._usePanels = args.usePanels;
+        this._usePanels = args.usePanels ?? false;
 
         this._fixedSize = !!args.fixedSize;
 
@@ -182,7 +174,7 @@ class ArrayInput extends Element implements IFocusable, IBindable {
         this._suspendArrayElementEvts = false;
         this._arrayElementChangeTimeout = null;
 
-        this._getDefaultFn = args.getDefaultFn;
+        this._getDefaultFn = args.getDefaultFn ?? null;
 
         // @ts-ignore
         let valueType = args.elementArgs && args.elementArgs.type || args.type;

src/components/BooleanInput/component.tsx

@@ -5,7 +5,7 @@ import BaseComponent from '../Element/component';
  * A checkbox element.
  */
 class Component extends BaseComponent <BooleanInputArgs, any> {
-    constructor(props: BooleanInputArgs = Element.defaultArgs) {
+    constructor(props: BooleanInputArgs = {}) {
         super(props);
         this.elementClass = Element;
     }

src/components/BooleanInput/index.ts

@@ -10,6 +10,10 @@ const CLASS_BOOLEAN_INPUT_TOGGLE = CLASS_BOOLEAN_INPUT + '-toggle';
  * The arguments for the {@link BooleanInput} constructor.
  */
 export interface BooleanInputArgs extends ElementArgs, IBindableArgs {
+    /**
+     * Sets the tabIndex of the {@link BooleanInput}. Defaults to 0.
+     */
+    tabIndex?: number,
     /**
      * The type of checkbox. Currently can be `null` or 'toggle'.
      */
@@ -20,18 +24,10 @@ export interface BooleanInputArgs extends ElementArgs, IBindableArgs {
  * A checkbox element.
  */
 class BooleanInput extends Input implements IBindable, IFocusable {
-    static readonly defaultArgs: BooleanInputArgs = {
-        ...Element.defaultArgs,
-        renderChanges: false,
-        value: false,
-        tabIndex: 0,
-        dom: 'div'
-    };
-
     protected _value: boolean;
 
-    constructor(args: BooleanInputArgs = BooleanInput.defaultArgs) {
-        args = { ...BooleanInput.defaultArgs, ...args };
+    constructor(args: BooleanInputArgs = {}) {
+        args.tabIndex = args.tabIndex ?? 0;
         super(args.dom, args);
 
         if (args.type === 'toggle') {
@@ -50,7 +46,7 @@ class BooleanInput extends Input implements IBindable, IFocusable {
             this.value = args.value;
         }
 
-        this.renderChanges = args.renderChanges;
+        this.renderChanges = args.renderChanges ?? false;
     }
 
     destroy() {

src/components/Button/component.tsx

@@ -6,7 +6,7 @@ import BaseComponent from '../Element/component';
  * User input with click interaction
  */
 class Component extends BaseComponent <ButtonArgs, any> {
-    constructor(props: ButtonArgs = Element.defaultArgs) {
+    constructor(props: ButtonArgs = {}) {
         super(props);
         this.elementClass = Element;
     }

src/components/Button/index.ts

@@ -21,7 +21,7 @@ export interface ButtonArgs extends ElementArgs {
      */
     icon?: string,
     /**
-     * Gets / sets the 'size' type of the button. Can be 'small' or `null`. Defaults to `null`.
+     * Sets the 'size' type of the button. Can be 'small' or `null`. Defaults to `null`.
      */
     size?: 'small'
 }
@@ -30,15 +30,6 @@ export interface ButtonArgs extends ElementArgs {
  * User input with click interaction.
  */
 class Button extends Element {
-    static readonly defaultArgs: ButtonArgs = {
-        ...Element.defaultArgs,
-        text: '',
-        icon: '',
-        unsafe: false,
-        size: null,
-        dom: 'button'
-    };
-
     protected _unsafe: boolean;
 
     protected _text: string;
@@ -47,9 +38,8 @@ class Button extends Element {
 
     protected _size: string | null;
 
-    constructor(args: ButtonArgs = Button.defaultArgs) {
-        args = { ...Button.defaultArgs, ...args };
-        super(args.dom, args);
+    constructor(args: ButtonArgs = {}) {
+        super(args.dom ?? 'button', args);
 
         this.class.add(CLASS_BUTTON);
 

src/components/Canvas/component.tsx

@@ -6,7 +6,7 @@ import BaseComponent from '../Element/component';
  * Represents a Canvas
  */
 class Component extends BaseComponent <CanvasArgs, any> {
-    constructor(props: CanvasArgs = Element.defaultArgs) {
+    constructor(props: CanvasArgs = {}) {
         super(props);
         this.elementClass = Element;
     }

src/components/Canvas/index.ts

@@ -15,20 +15,14 @@ export interface CanvasArgs extends ElementArgs {
  * Represents a Canvas.
  */
 class Canvas extends Element {
-    static readonly defaultArgs: CanvasArgs = {
-        ...Element.defaultArgs,
-        dom: 'canvas'
-    };
-
     protected _width: number;
 
     protected _height: number;
 
     protected _ratio: number;
 
-    constructor(args: CanvasArgs = Canvas.defaultArgs) {
-        args = { ...Canvas.defaultArgs, ...args };
-        super(args.dom, args);
+    constructor(args: CanvasArgs = {}) {
+        super(args.dom ?? 'canvas', args);
 
         const canvas = this._dom as HTMLCanvasElement;
         canvas.classList.add('pcui-canvas');

src/components/Code/index.ts

@@ -19,16 +19,11 @@ export interface CodeArgs extends ContainerArgs {
  * Represents a code block.
  */
 class Code extends Container {
-    static readonly defaultArgs: CodeArgs = {
-        ...Container.defaultArgs
-    };
-
     protected _inner: Label;
 
     protected _text: string;
 
-    constructor(args: CodeArgs = Code.defaultArgs) {
-        args = { ...Code.defaultArgs, ...args };
+    constructor(args: CodeArgs = {}) {
         super(args);
         this.class.add(CLASS_ROOT);
 

src/components/ColorPicker/index.ts

@@ -28,13 +28,6 @@ export interface ColorPickerArgs extends ElementArgs, IBindableArgs {
  * Represents a color picker.
  */
 class ColorPicker extends Element implements IBindable {
-    static readonly defaultArgs: ColorPickerArgs = {
-        ...Element.defaultArgs,
-        channels: 3,
-        value: [0, 0, 255, 1],
-        renderChanges: false
-    };
-
     protected _domColor: HTMLDivElement;
 
     protected _historyCombine: boolean;
@@ -93,8 +86,7 @@ class ColorPicker extends Element implements IBindable {
 
     protected _renderChanges: boolean;
 
-    constructor(args: ColorPickerArgs = ColorPicker.defaultArgs) {
-        args = { ...ColorPicker.defaultArgs, ...args };
+    constructor(args: ColorPickerArgs = {}) {
         super(args.dom, args);
 
         this._size = 144;
@@ -128,11 +120,11 @@ class ColorPicker extends Element implements IBindable {
         this._historyCombine = false;
         this._historyPostfix = null;
 
-        this._value = args.value;
-        this._channels = args.channels;
+        this._value = args.value ?? [0, 0, 255, 1];
+        this._channels = args.channels ?? 3;
         this._setValue(this._value);
 
-        this.renderChanges = args.renderChanges;
+        this.renderChanges = args.renderChanges ?? false;
 
         this.on('change', () => {
             if (this.renderChanges) {

src/components/Container/component.tsx

@@ -7,7 +7,7 @@ import BaseComponent from '../Element/component';
  * A container can contain any other element including other containers.
  */
 class Component extends BaseComponent <ContainerArgs, any> {
-    constructor(props: ContainerArgs = Element.defaultArgs) {
+    constructor(props: ContainerArgs = {}) {
         super(props);
         this.elementClass = Element;
     }

src/components/Container/index.ts

@@ -24,7 +24,7 @@ const CLASS_DRAGGED_CHILD = CLASS_DRAGGED + '-child';
 export interface ContainerArgs extends ElementArgs, IParentArgs, IFlexArgs {
     /**
      * Sets whether the {@link Container} is resizable and where the resize handle is located. Can
-     * be one of 'top', 'bottom', 'right', 'left'. Set to null to disable resizing.
+     * be one of 'top', 'bottom', 'right', 'left'. Defaults to `null` which disables resizing.
      */
     resizable?: string,
     /**
@@ -58,12 +58,6 @@ export interface ContainerArgs extends ElementArgs, IParentArgs, IFlexArgs {
  * container can contain any other element including other containers.
  */
 class Container extends Element {
-    static readonly defaultArgs: ContainerArgs = {
-        ...Element.defaultArgs,
-        resizable: null,
-        dom: 'div'
-    };
-
     /**
      * Fired when a child Element gets added to the Container.
      *
@@ -146,8 +140,7 @@ class Container extends Element {
 
     protected _draggedHeight: number;
 
-    constructor(args: ContainerArgs = Container.defaultArgs) {
-        args = { ...Container.defaultArgs, ...args };
+    constructor(args: ContainerArgs = {}) {
         super(args.dom, args);
 
         this.class.add(CLASS_CONTAINER);
@@ -181,7 +174,7 @@ class Container extends Element {
         this._resizeData = null;
         this._resizeHorizontally = true;
 
-        this.resizable = args.resizable;
+        this.resizable = args.resizable ?? null;
         this._resizeMin = 100;
         this._resizeMax = 300;
 

src/components/Divider/index.ts

@@ -11,13 +11,8 @@ export interface DividerArgs extends ElementArgs {}
  * Represents a vertical division between two elements.
  */
 class Divider extends Element {
-    static readonly defaultArgs: DividerArgs = {
-        ...Element.defaultArgs
-    };
-
-    constructor(args: ElementArgs = Divider.defaultArgs) {
-        args = { ...Divider.defaultArgs, ...args };
-        super(args.dom ? args.dom : document.createElement('div'), args);
+    constructor(args: DividerArgs = {}) {
+        super(args.dom, args);
 
         this.class.add(CLASS_ROOT);
     }

src/components/Element/component.tsx

@@ -5,8 +5,6 @@ import Element, { ElementArgs } from './index';
  * The base class for all UI elements. Wraps a DOM element with the PCUI interface.
  */
 class Component <P extends ElementArgs, S> extends React.Component <P, S> {
-    static defaultArgs = Element.defaultArgs;
-
     static ctor: any;
 
     element: any;
@@ -46,15 +44,13 @@ class Component <P extends ElementArgs, S> extends React.Component <P, S> {
             this.element = new this.elementClass(
                 nodeElement,
                 {
-                    ...this.elementClass.defaultArgs,
                     ...this.props,
                     container: containerElement,
                     parent: undefined
                 }
             );
         } else {
             this.element = new this.elementClass({
-                ...this.elementClass.defaultArgs,
                 ...this.props,
                 dom: nodeElement,
                 content: containerElement,