cx 26.1.2 → 26.1.4

package/src/widgets/form/Checkbox.tsx

@@ -1,287 +1,287 @@
-/** @jsxImportSource react */
-
-import { VDOM } from "../../ui/VDOM";
-import type { Instance } from "../../ui/Instance";
-import type { RenderingContext } from "../../ui/RenderingContext";
-import { Widget, getContent } from "../../ui/Widget";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { KeyCode } from "../../util/KeyCode";
-import CheckIcon from "../icons/check";
-import SquareIcon from "../icons/square";
-import { tooltipMouseLeave, tooltipMouseMove } from "../overlay/tooltip-ops";
-import { Field, FieldConfig, getFieldTooltip, FieldInstance } from "./Field";
-import { BooleanProp, StringProp } from "../../ui/Prop";
-
-export interface CheckboxConfig extends FieldConfig {
-   /** Value of the checkbox. */
-   value?: BooleanProp;
-
-   /** Set to `true` to make the checkbox read-only. */
-   readOnly?: BooleanProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `checkbox`. */
-   baseClass?: string;
-
-   /** Use native checkbox HTML element. */
-   native?: boolean;
-
-   /** Set to `true` to display a square icon to indicate `null` or `undefined` value. */
-   indeterminate?: boolean;
-
-   /** Checked value alias for `value`. */
-   checked?: BooleanProp;
-
-   /** Text description. */
-   text?: StringProp;
-
-   /** Set to true to disable focusing on the checkbox. Used in grids to avoid conflicts. */
-   unfocusable?: boolean;
-
-   /** View mode text. */
-   viewText?: StringProp;
-
-   /** Custom validation function. */
-   onValidate?: string | ((value: boolean, instance: Instance, validationParams: Record<string, unknown>) => unknown);
-}
-
-export class Checkbox extends Field<CheckboxConfig> {
-   declare public baseClass: string;
-   declare public checked?: unknown;
-   declare public value?: unknown;
-   declare public indeterminate?: boolean;
-   declare public unfocusable?: boolean;
-   declare public native?: boolean;
-
-   constructor(config?: CheckboxConfig) {
-      super(config);
-   }
-
-   init(): void {
-      if (this.checked) this.value = this.checked;
-
-      super.init();
-   }
-
-   declareData(...args: Record<string, unknown>[]): void {
-      super.declareData(
-         {
-            value: !this.indeterminate ? false : undefined,
-            text: undefined,
-            readOnly: undefined,
-            disabled: undefined,
-            enabled: undefined,
-            required: undefined,
-            viewText: undefined,
-         },
-         ...args,
-      );
-   }
-
-   renderWrap(
-      context: RenderingContext,
-      instance: FieldInstance<Checkbox>,
-      key: string,
-      content: React.ReactNode,
-   ): React.ReactElement {
-      let { data } = instance;
-      return (
-         <label
-            key={key}
-            className={data.classNames}
-            onMouseDown={(e) => {
-               e.stopPropagation();
-               if (this.unfocusable) e.preventDefault();
-            }}
-            onMouseMove={(e) => {
-               const tooltip = getFieldTooltip(instance);
-               if (Array.isArray(tooltip)) {
-                  tooltipMouseMove(e, ...tooltip);
-               }
-            }}
-            onMouseLeave={(e) => {
-               const tooltip = getFieldTooltip(instance);
-               if (Array.isArray(tooltip)) {
-                  tooltipMouseLeave(e, ...tooltip);
-               }
-            }}
-            onClick={(e) => {
-               this.handleClick(e, instance);
-            }}
-            style={data.style}
-         >
-            {content}
-            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-         </label>
-      );
-   }
-
-   validateRequired(context: RenderingContext, instance: FieldInstance<Checkbox>): string | undefined {
-      let { data } = instance;
-      if (!data.value) return this.requiredText;
-   }
-
-   renderNativeCheck(context: RenderingContext, instance: FieldInstance<Checkbox>): React.ReactElement {
-      let { CSS, baseClass } = this;
-      let { data } = instance;
-      return (
-         <input
-            key="input"
-            className={CSS.element(baseClass, "checkbox")}
-            id={data.id}
-            type="checkbox"
-            checked={data.value || false}
-            disabled={data.disabled}
-            {...data.inputAttrs}
-            onClick={stopPropagation}
-            onChange={(e) => {
-               this.handleChange(e, instance, (e.target as HTMLInputElement).checked);
-            }}
-         />
-      );
-   }
-
-   renderCheck(context: RenderingContext, instance: FieldInstance<Checkbox>): React.ReactElement {
-      return <CheckboxCmp key="check" instance={instance} data={instance.data} />;
-   }
-
-   renderInput(context: RenderingContext, instance: FieldInstance<Checkbox>, key: string): React.ReactElement {
-      let { data } = instance;
-      let text = data.text || this.renderChildren?.(context, instance);
-      let { CSS, baseClass } = this;
-      return this.renderWrap(context, instance, key, [
-         this.native ? this.renderNativeCheck(context, instance) : this.renderCheck(context, instance),
-         text ? (
-            <div key="text" className={CSS.element(baseClass, "text")}>
-               {text}
-            </div>
-         ) : (
-            <span key="baseline" className={CSS.element(baseClass, "baseline")}>
-               &nbsp;
-            </span>
-         ),
-      ]);
-   }
-
-   renderValue(context: RenderingContext, instance: FieldInstance): React.ReactNode {
-      let { data } = instance;
-      if (!data.viewText) return super.renderValue(context, instance, undefined);
-      return <span className={this.CSS.element(this.baseClass, "view-text")}>{data.viewText}</span>;
-   }
-
-   formatValue(context: RenderingContext, instance: Instance): React.ReactNode | string {
-      let { data } = instance;
-      return data.value && (data.text || this.renderChildren?.(context, instance));
-   }
-
-   handleClick(e: React.MouseEvent, instance: Instance): void {
-      if (this.native) e.stopPropagation();
-      else {
-         var el = document.getElementById(instance.data.id);
-         if (el) el.focus();
-         if (!instance.data.viewMode) {
-            e.preventDefault();
-            e.stopPropagation();
-            this.handleChange(e, instance, !instance.data.value);
-         }
-      }
-   }
-
-   handleChange(
-      e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent,
-      instance: Instance,
-      checked?: boolean,
-   ): void {
-      let { data } = instance;
-
-      if (data.readOnly || data.disabled || data.viewMode) return;
-
-      instance.set("value", checked != null ? checked : (e.target as HTMLInputElement).checked);
-   }
-}
-
-Checkbox.prototype.baseClass = "checkbox";
-Checkbox.prototype.native = false;
-Checkbox.prototype.indeterminate = false;
-Checkbox.prototype.unfocusable = false;
-
-Widget.alias("checkbox", Checkbox);
-
-interface CheckboxCmpProps {
-   key?: string;
-   instance: FieldInstance<Checkbox>;
-   data: Record<string, any>;
-}
-
-interface CheckboxCmpState {
-   value: unknown;
-}
-
-class CheckboxCmp extends VDOM.Component<CheckboxCmpProps, CheckboxCmpState> {
-   constructor(props: CheckboxCmpProps) {
-      super(props);
-      this.state = {
-         value: props.data.value,
-      };
-   }
-
-   UNSAFE_componentWillReceiveProps(props: CheckboxCmpProps) {
-      this.setState({
-         value: props.data.value,
-      });
-   }
-
-   render(): React.ReactElement {
-      let { instance, data } = this.props;
-      let { widget } = instance;
-      let { baseClass, CSS } = widget;
-
-      let check: string | boolean = false;
-
-      if (this.state.value == null && widget.indeterminate) check = "indeterminate";
-      else if (this.state.value) check = "check";
-
-      return (
-         <span
-            key="check"
-            tabIndex={widget.unfocusable || data.disabled ? undefined : (data.tabIndex as number) || 0}
-            className={CSS.element(baseClass, "input", {
-               checked: check,
-            })}
-            style={CSS.parseStyle(data.inputStyle)}
-            id={data.id}
-            onClick={this.onClick.bind(this)}
-            onKeyDown={this.onKeyDown.bind(this)}
-         >
-            {check == "check" && <CheckIcon className={CSS.element(baseClass, "input-check")} />}
-            {check == "indeterminate" && <SquareIcon className={CSS.element(baseClass, "input-check")} />}
-         </span>
-      );
-   }
-
-   onClick(e: React.MouseEvent): void {
-      let { instance, data } = this.props;
-      let { widget } = instance;
-      if (!data.disabled && !data.readOnly) {
-         e.stopPropagation();
-         e.preventDefault();
-         this.setState({ value: !this.state.value });
-         widget.handleChange(e, instance, !this.state.value);
-      }
-   }
-
-   onKeyDown(e: React.KeyboardEvent): void {
-      let { instance } = this.props;
-      const { widget } = instance;
-      if (
-         widget.handleKeyDown &&
-         widget.handleKeyDown(e as unknown as React.KeyboardEvent<Element>, instance) === false
-      )
-         return;
-
-      switch (e.keyCode) {
-         case KeyCode.space:
-            this.onClick(e as unknown as React.MouseEvent);
-            break;
-      }
-   }
-}
+/** @jsxImportSource react */
+
+import { VDOM } from "../../ui/VDOM";
+import type { Instance } from "../../ui/Instance";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { Widget, getContent } from "../../ui/Widget";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { KeyCode } from "../../util/KeyCode";
+import CheckIcon from "../icons/check";
+import SquareIcon from "../icons/square";
+import { tooltipMouseLeave, tooltipMouseMove } from "../overlay/tooltip-ops";
+import { Field, FieldConfig, getFieldTooltip, FieldInstance } from "./Field";
+import { BooleanProp, StringProp } from "../../ui/Prop";
+
+export interface CheckboxConfig extends FieldConfig {
+   /** Value of the checkbox. */
+   value?: BooleanProp;
+
+   /** Set to `true` to make the checkbox read-only. */
+   readOnly?: BooleanProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `checkbox`. */
+   baseClass?: string;
+
+   /** Use native checkbox HTML element. */
+   native?: boolean;
+
+   /** Set to `true` to display a square icon to indicate `null` or `undefined` value. */
+   indeterminate?: boolean;
+
+   /** Checked value alias for `value`. */
+   checked?: BooleanProp;
+
+   /** Text description. */
+   text?: StringProp;
+
+   /** Set to true to disable focusing on the checkbox. Used in grids to avoid conflicts. */
+   unfocusable?: boolean;
+
+   /** View mode text. */
+   viewText?: StringProp;
+
+   /** Custom validation function. */
+   onValidate?: string | ((value: boolean, instance: Instance, validationParams: Record<string, unknown>) => unknown);
+}
+
+export class Checkbox extends Field<CheckboxConfig> {
+   declare public baseClass: string;
+   declare public checked?: unknown;
+   declare public value?: unknown;
+   declare public indeterminate?: boolean;
+   declare public unfocusable?: boolean;
+   declare public native?: boolean;
+
+   constructor(config?: CheckboxConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (this.checked) this.value = this.checked;
+
+      super.init();
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            value: !this.indeterminate ? false : undefined,
+            text: undefined,
+            readOnly: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            required: undefined,
+            viewText: undefined,
+         },
+         ...args,
+      );
+   }
+
+   renderWrap(
+      context: RenderingContext,
+      instance: FieldInstance<Checkbox>,
+      key: string,
+      content: React.ReactNode,
+   ): React.ReactElement {
+      let { data } = instance;
+      return (
+         <label
+            key={key}
+            className={data.classNames}
+            onMouseDown={(e) => {
+               e.stopPropagation();
+               if (this.unfocusable) e.preventDefault();
+            }}
+            onMouseMove={(e) => {
+               const tooltip = getFieldTooltip(instance);
+               if (Array.isArray(tooltip)) {
+                  tooltipMouseMove(e, ...tooltip);
+               }
+            }}
+            onMouseLeave={(e) => {
+               const tooltip = getFieldTooltip(instance);
+               if (Array.isArray(tooltip)) {
+                  tooltipMouseLeave(e, ...tooltip);
+               }
+            }}
+            onClick={(e) => {
+               this.handleClick(e, instance);
+            }}
+            style={data.style}
+         >
+            {content}
+            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+         </label>
+      );
+   }
+
+   validateRequired(context: RenderingContext, instance: FieldInstance<Checkbox>): string | undefined {
+      let { data } = instance;
+      if (!data.value) return this.requiredText;
+   }
+
+   renderNativeCheck(context: RenderingContext, instance: FieldInstance<Checkbox>): React.ReactElement {
+      let { CSS, baseClass } = this;
+      let { data } = instance;
+      return (
+         <input
+            key="input"
+            className={CSS.element(baseClass, "checkbox")}
+            id={data.id}
+            type="checkbox"
+            checked={data.value || false}
+            disabled={data.disabled}
+            {...data.inputAttrs}
+            onClick={stopPropagation}
+            onChange={(e) => {
+               this.handleChange(e, instance, (e.target as HTMLInputElement).checked);
+            }}
+         />
+      );
+   }
+
+   renderCheck(context: RenderingContext, instance: FieldInstance<Checkbox>): React.ReactElement {
+      return <CheckboxCmp key="check" instance={instance} data={instance.data} />;
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance<Checkbox>, key: string): React.ReactElement {
+      let { data } = instance;
+      let text = data.text || this.renderChildren?.(context, instance);
+      let { CSS, baseClass } = this;
+      return this.renderWrap(context, instance, key, [
+         this.native ? this.renderNativeCheck(context, instance) : this.renderCheck(context, instance),
+         text ? (
+            <div key="text" className={CSS.element(baseClass, "text")}>
+               {text}
+            </div>
+         ) : (
+            <span key="baseline" className={CSS.element(baseClass, "baseline")}>
+               &nbsp;
+            </span>
+         ),
+      ]);
+   }
+
+   renderValue(context: RenderingContext, instance: FieldInstance): React.ReactNode {
+      let { data } = instance;
+      if (!data.viewText) return super.renderValue(context, instance, undefined);
+      return <span className={this.CSS.element(this.baseClass, "view-text")}>{data.viewText}</span>;
+   }
+
+   formatValue(context: RenderingContext, instance: Instance): React.ReactNode | string {
+      let { data } = instance;
+      return data.value && (data.text || this.renderChildren?.(context, instance));
+   }
+
+   handleClick(e: React.MouseEvent, instance: Instance): void {
+      if (this.native) e.stopPropagation();
+      else {
+         var el = document.getElementById(instance.data.id);
+         if (el) el.focus();
+         if (!instance.data.viewMode) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.handleChange(e, instance, !instance.data.value);
+         }
+      }
+   }
+
+   handleChange(
+      e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent,
+      instance: Instance,
+      checked?: boolean,
+   ): void {
+      let { data } = instance;
+
+      if (data.readOnly || data.disabled || data.viewMode) return;
+
+      instance.set("value", checked != null ? checked : (e.target as HTMLInputElement).checked);
+   }
+}
+
+Checkbox.prototype.baseClass = "checkbox";
+Checkbox.prototype.native = false;
+Checkbox.prototype.indeterminate = false;
+Checkbox.prototype.unfocusable = false;
+
+Widget.alias("checkbox", Checkbox);
+
+interface CheckboxCmpProps {
+   key?: string;
+   instance: FieldInstance<Checkbox>;
+   data: Record<string, any>;
+}
+
+interface CheckboxCmpState {
+   value: unknown;
+}
+
+class CheckboxCmp extends VDOM.Component<CheckboxCmpProps, CheckboxCmpState> {
+   constructor(props: CheckboxCmpProps) {
+      super(props);
+      this.state = {
+         value: props.data.value,
+      };
+   }
+
+   UNSAFE_componentWillReceiveProps(props: CheckboxCmpProps) {
+      this.setState({
+         value: props.data.value,
+      });
+   }
+
+   render(): React.ReactElement {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+      let { baseClass, CSS } = widget;
+
+      let check: string | boolean = false;
+
+      if (this.state.value == null && widget.indeterminate) check = "indeterminate";
+      else if (this.state.value) check = "check";
+
+      return (
+         <span
+            key="check"
+            tabIndex={widget.unfocusable || data.disabled ? undefined : (data.tabIndex as number) || 0}
+            className={CSS.element(baseClass, "input", {
+               checked: check,
+            })}
+            style={CSS.parseStyle(data.inputStyle)}
+            id={data.id}
+            onClick={this.onClick.bind(this)}
+            onKeyDown={this.onKeyDown.bind(this)}
+         >
+            {check == "check" && <CheckIcon className={CSS.element(baseClass, "input-check")} />}
+            {check == "indeterminate" && <SquareIcon className={CSS.element(baseClass, "input-check")} />}
+         </span>
+      );
+   }
+
+   onClick(e: React.MouseEvent): void {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+      if (!data.disabled && !data.readOnly) {
+         e.stopPropagation();
+         e.preventDefault();
+         this.setState({ value: !this.state.value });
+         widget.handleChange(e, instance, !this.state.value);
+      }
+   }
+
+   onKeyDown(e: React.KeyboardEvent): void {
+      let { instance } = this.props;
+      const { widget } = instance;
+      if (
+         widget.handleKeyDown &&
+         widget.handleKeyDown(e as unknown as React.KeyboardEvent<Element>, instance) === false
+      )
+         return;
+
+      switch (e.keyCode) {
+         case KeyCode.space:
+            this.onClick(e as unknown as React.MouseEvent);
+            break;
+      }
+   }
+}

package/src/widgets/form/Checkbox.variables.scss

@@ -1,40 +1,40 @@
-
-$cx-default-checkbox-color: $cx-default-input-color !default;
-$cx-default-checkbox-background-color: $cx-default-input-background-color !default;
-$cx-default-checkbox-border-width: cx-get-state-rule($cx-input-state-style-map, default, border-width) !default;
-$cx-default-checkbox-border-color: $cx-default-input-border-color !default;
-
-$cx-checkbox-state-style-map: cx-deep-map-merge($cx-input-state-style-map, (
-  default: (
-    color: $cx-default-checkbox-color,
-    background-color: $cx-default-checkbox-background-color,
-    border-width: $cx-default-checkbox-border-width,
-    border-color: $cx-default-checkbox-border-color
-  ),
-  checked: (
-
-  ),
-  checked-focus: (
-    
-  ),
-  focus: (
-    border-color: cx-get-state-rule($cx-input-state-style-map, focus, border-color),
-    outline: cx-get-state-rule($cx-input-state-style-map, focus, outline),
-    box-shadow: cx-get-state-rule($cx-input-state-style-map, focus, box-shadow)
-  ),
-
-  disabled: (
-    background: rgb(235, 235, 228),
-    color: rgb(84, 84, 84)
-  ),
-  disabled-checked: (
-    
-  ),
-  error: (
-    border-color: rgba(220, 0, 9, 0.8)
-  ),
-
-  error-focus: (
-    box-shadow: 0 0 2px rgba(220, 0, 9, 0.8)
-  )
+
+$cx-default-checkbox-color: $cx-default-input-color !default;
+$cx-default-checkbox-background-color: $cx-default-input-background-color !default;
+$cx-default-checkbox-border-width: cx-get-state-rule($cx-input-state-style-map, default, border-width) !default;
+$cx-default-checkbox-border-color: $cx-default-input-border-color !default;
+
+$cx-checkbox-state-style-map: cx-deep-map-merge($cx-input-state-style-map, (
+  default: (
+    color: $cx-default-checkbox-color,
+    background-color: $cx-default-checkbox-background-color,
+    border-width: $cx-default-checkbox-border-width,
+    border-color: $cx-default-checkbox-border-color
+  ),
+  checked: (
+
+  ),
+  checked-focus: (
+    
+  ),
+  focus: (
+    border-color: cx-get-state-rule($cx-input-state-style-map, focus, border-color),
+    outline: cx-get-state-rule($cx-input-state-style-map, focus, outline),
+    box-shadow: cx-get-state-rule($cx-input-state-style-map, focus, box-shadow)
+  ),
+
+  disabled: (
+    background: rgb(235, 235, 228),
+    color: rgb(84, 84, 84)
+  ),
+  disabled-checked: (
+    
+  ),
+  error: (
+    border-color: rgba(220, 0, 9, 0.8)
+  ),
+
+  error-focus: (
+    box-shadow: 0 0 2px rgba(220, 0, 9, 0.8)
+  )
 )) !default;