cx 25.11.1 → 26.0.1

package/src/widgets/form/Slider.tsx

@@ -0,0 +1,461 @@
+/** @jsxImportSource react */
+
+import { BooleanProp, NumberProp, StringProp, StructuredProp, StyleProp } from "../../ui/Prop";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { VDOM, Widget, getContent } from "../../ui/Widget";
+import { addEventListenerWithOptions } from "../../util/addEventListenerWithOptions";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { isDefined } from "../../util/isDefined";
+import { isUndefined } from "../../util/isUndefined";
+import { captureMouseOrTouch, getCursorPos } from "../overlay/captureMouse";
+import {
+   tooltipMouseLeave,
+   tooltipMouseMove,
+   tooltipParentDidMount,
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
+   type TooltipConfig,
+} from "../overlay/tooltip-ops";
+import { Field, FieldConfig, FieldInstance, getFieldTooltip } from "./Field";
+
+export interface SliderConfig extends FieldConfig {
+   /** Low value of the slider range. */
+   from?: NumberProp;
+
+   /** High value of the slider range. */
+   to?: NumberProp;
+
+   /** Rounding step. */
+   step?: NumberProp;
+
+   /** Minimum allowed value. Default is `0`. */
+   minValue?: NumberProp;
+
+   /** Maximum allowed value. Default is `100`. */
+   maxValue?: NumberProp;
+
+   /** Style object to be applied on the selected axis range. */
+   rangeStyle?: StyleProp;
+
+   /** Style object to be applied on the handle. */
+   handleStyle?: StyleProp;
+
+   /** Minimum allowed value. Default is `0`. */
+   min?: NumberProp;
+
+   /** Maximum allowed value. Default is `100`. */
+   max?: NumberProp;
+
+   /** High value of the slider range. */
+   value?: NumberProp;
+
+   /** Set to `true` to orient the slider vertically. */
+   vertical?: boolean;
+
+   /** Invert vertical slider behavior. Set this to `true` if you want the slider to go from `top` to `bottom`. */
+   invert?: boolean;
+
+   /** Range tooltip configuration. */
+   toTooltip?: StringProp | StructuredProp;
+
+   /** Range tooltip configuration. */
+   valueTooltip?: StringProp | StructuredProp;
+
+   /** Range tooltip configuration. */
+   fromTooltip?: StringProp | StructuredProp;
+
+   /** When set to `true`, slider responds to mouse wheel events, while hovering it. It will not work if both `from` and `to` values are used. Default value is `false`. */
+   wheel?: BooleanProp;
+
+   /** Value increment/decrement, when controlling the slider with mouse wheel. Default value is set to `1%` of range. */
+   increment?: NumberProp;
+
+   /** Increment percentage. Default value is `0.01` (1%). */
+   incrementPercentage?: number;
+
+   /** Set to `true` to make the slider read-only. */
+   readOnly?: BooleanProp;
+}
+
+export class Slider extends Field<SliderConfig, FieldInstance<Slider>> {
+   declare baseClass: string;
+   declare min?: number;
+   declare max?: number;
+   declare minValue: number;
+   declare maxValue: number;
+   declare value?: number;
+   declare vertical: boolean;
+   declare invert: boolean;
+   declare from?: number;
+   declare to?: number;
+   declare showFrom?: boolean;
+   declare showTo?: boolean;
+   declare toTooltip?: TooltipConfig;
+   declare fromTooltip?: TooltipConfig;
+   declare valueTooltip?: TooltipConfig;
+   declare incrementPercentage: number;
+   declare wheel: boolean;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            from: 0,
+            to: 0,
+            step: undefined,
+            minValue: undefined,
+            maxValue: undefined,
+            increment: undefined,
+            incrementPercentage: undefined,
+            wheel: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            readOnly: undefined,
+            rangeStyle: {
+               structured: true,
+            },
+            handleStyle: {
+               structured: true,
+            },
+            invert: false,
+         },
+         ...args,
+      );
+   }
+
+   init(): void {
+      if (isDefined(this.min)) this.minValue = this.min;
+
+      if (isDefined(this.max)) this.maxValue = this.max;
+
+      if (this.value != null) this.to = this.value;
+
+      if (isUndefined(this.from)) this.from = this.minValue;
+      else this.showFrom = true;
+
+      if (isUndefined(this.to)) this.to = this.maxValue;
+      else this.showTo = true;
+
+      if (this.valueTooltip) this.toTooltip = this.valueTooltip;
+
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: FieldInstance<Slider>): void {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         horizontal: !this.vertical,
+         vertical: this.vertical,
+         disabled: data.disabled,
+      };
+      super.prepareData(context, instance);
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance<Slider>, key: string): React.ReactNode {
+      return (
+         <SliderComponent
+            key={key}
+            instance={instance}
+            data={instance.data}
+            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+         />
+      );
+   }
+}
+
+Slider.prototype.baseClass = "slider";
+Slider.prototype.minValue = 0;
+Slider.prototype.maxValue = 100;
+Slider.prototype.vertical = false;
+Slider.prototype.incrementPercentage = 0.01;
+Slider.prototype.wheel = false;
+Slider.prototype.invert = false;
+
+Widget.alias("slider", Slider);
+
+interface SliderComponentProps {
+   instance: FieldInstance<Slider>;
+   data: Record<string, any>;
+   label?: React.ReactNode;
+}
+
+interface SliderComponentState {
+   from: number;
+   to: number;
+   drag?: boolean;
+}
+
+interface DomRefs {
+   el?: HTMLElement;
+   range?: HTMLElement;
+   from?: HTMLElement;
+   to?: HTMLElement;
+}
+
+class SliderComponent extends VDOM.Component<SliderComponentProps, SliderComponentState> {
+   dom: DomRefs;
+   unsubscribeOnWheel?: () => void;
+
+   constructor(props: SliderComponentProps) {
+      super(props);
+      this.dom = {};
+      let { data } = props;
+      this.state = {
+         from: data.from as number,
+         to: data.to as number,
+      };
+   }
+
+   render(): React.ReactNode {
+      let { instance, data, label } = this.props;
+      let { widget } = instance;
+      let { CSS, baseClass } = widget;
+      let { minValue, maxValue } = data;
+      let { from, to } = this.state;
+
+      from = Math.min(maxValue, Math.max(minValue, from));
+      to = Math.min(maxValue, Math.max(minValue, to));
+
+      let handleStyle = CSS.parseStyle(data.handleStyle);
+      let anchor = widget.vertical ? (widget.invert ? "top" : "bottom") : "left";
+      let rangeStart = from - minValue;
+      let rangeSize = to - from;
+
+      let fromHandleStyle = {
+         ...handleStyle,
+         [anchor]: `${(100 * (from - minValue)) / (maxValue - minValue)}%`,
+      };
+
+      let toHandleStyle = {
+         ...handleStyle,
+         [anchor]: `${(100 * (to - minValue)) / (maxValue - minValue)}%`,
+      };
+
+      let rangeStyle = {
+         ...CSS.parseStyle(data.rangeStyle),
+         [anchor]: `${(100 * rangeStart) / (maxValue - minValue)}%`,
+         [widget.vertical ? "height" : "width"]: `${(100 * rangeSize) / (maxValue - minValue)}%`,
+      };
+
+      return (
+         <div
+            className={data.classNames}
+            style={data.style}
+            id={data.id}
+            onClick={(e: React.MouseEvent) => this.onClick(e)}
+            ref={(el: HTMLDivElement | null) => (this.dom.el = el || undefined)}
+            onMouseMove={(e: React.MouseEvent) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
+            onMouseLeave={(e: React.MouseEvent) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
+         >
+            {label}&nbsp;
+            <div className={CSS.element(baseClass, "axis")}>
+               {rangeSize > 0 && <div key="range" className={CSS.element(baseClass, "range")} style={rangeStyle} />}
+               <div
+                  key="space"
+                  className={CSS.element(baseClass, "space")}
+                  ref={(c: HTMLDivElement | null) => (this.dom.range = c || undefined)}
+               >
+                  {widget.showFrom && (
+                     <div
+                        key="from"
+                        className={CSS.element(baseClass, "handle")}
+                        tabIndex={data.disabled ? undefined : (data.tabIndex as number) || 0}
+                        style={fromHandleStyle}
+                        onMouseDown={(e: React.MouseEvent) => this.onHandleMouseDown(e, "from")}
+                        onMouseMove={(e: React.MouseEvent) =>
+                           tooltipMouseMove(e, instance, widget.fromTooltip, { tooltipName: "fromTooltip" })
+                        }
+                        onMouseLeave={(e: React.MouseEvent) => this.onHandleMouseLeave(e, "from")}
+                        onTouchStart={(e: React.TouchEvent) => this.onHandleMouseDown(e, "from")}
+                        ref={(c: HTMLDivElement | null) => (this.dom.from = c || undefined)}
+                     />
+                  )}
+                  {widget.showTo && (
+                     <div
+                        key="to"
+                        className={CSS.element(baseClass, "handle")}
+                        tabIndex={data.disabled ? undefined : 0}
+                        style={toHandleStyle}
+                        onMouseDown={(e: React.MouseEvent) => this.onHandleMouseDown(e, "to")}
+                        onMouseMove={(e: React.MouseEvent) =>
+                           tooltipMouseMove(e, instance, widget.toTooltip, { tooltipName: "toTooltip" })
+                        }
+                        onMouseLeave={(e: React.MouseEvent) => this.onHandleMouseLeave(e, "to")}
+                        onTouchStart={(e: React.TouchEvent) => this.onHandleMouseDown(e, "to")}
+                        ref={(c: HTMLDivElement | null) => (this.dom.to = c || undefined)}
+                     />
+                  )}
+               </div>
+            </div>
+         </div>
+      );
+   }
+
+   UNSAFE_componentWillReceiveProps(props: SliderComponentProps): void {
+      this.setState({
+         from: props.data.from,
+         to: props.data.to,
+      });
+
+      let { instance } = props;
+      let { widget } = instance;
+      tooltipParentWillReceiveProps(this.dom.to!, instance, widget.toTooltip, { tooltipName: "toTooltip" });
+      tooltipParentWillReceiveProps(this.dom.from!, instance, widget.fromTooltip, { tooltipName: "fromTooltip" });
+   }
+
+   componentWillUnmount(): void {
+      tooltipParentWillUnmount(this.props.instance);
+      this.unsubscribeOnWheel?.();
+   }
+
+   componentDidMount(): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+      tooltipParentDidMount(this.dom.to!, instance, widget.toTooltip, { tooltipName: "toTooltip" });
+      tooltipParentDidMount(this.dom.from!, instance, widget.fromTooltip, { tooltipName: "fromTooltip" });
+
+      this.unsubscribeOnWheel = addEventListenerWithOptions(this.dom.el!, "wheel", (e) => this.onWheel(e), {
+         passive: false,
+      });
+   }
+
+   onHandleMouseLeave(e: React.MouseEvent, handle: "from" | "to"): void {
+      if (!this.state.drag) {
+         let tooltipName = handle + "Tooltip";
+         let { instance } = this.props;
+         let tooltip = handle == "from" ? instance.widget.fromTooltip : instance.widget.toTooltip;
+         tooltipMouseLeave(e, instance, tooltip, { tooltipName });
+      }
+   }
+
+   onHandleMouseDown(e: React.MouseEvent | React.TouchEvent, handle: "from" | "to"): void {
+      e.preventDefault();
+      e.stopPropagation();
+
+      let { instance } = this.props;
+      let { data, widget } = instance;
+      if (data.disabled || data.readOnly) return;
+
+      let handleEl = this.dom[handle];
+      let b = getTopLevelBoundingClientRect(handleEl!);
+      let pos = getCursorPos(e);
+      let dx = pos.clientX - (b.left + b.right) / 2;
+      let dy = pos.clientY - (b.top + b.bottom) / 2;
+
+      let tooltipName = handle + "Tooltip";
+      let tooltip = handle == "from" ? widget.fromTooltip : widget.toTooltip;
+
+      this.setState({
+         drag: true,
+      });
+
+      captureMouseOrTouch(
+         e,
+         (e) => {
+            let { value } = this.getValues(e, widget.vertical ? dy : dx);
+            if (handle === "from") {
+               if (instance.set("from", value)) this.setState({ from: value });
+               if (value > this.state.to) {
+                  if (instance.set("to", value)) this.setState({ to: value });
+               }
+            } else if (handle === "to") {
+               if (instance.set("to", value)) this.setState({ to: value });
+               if (value < this.state.from) {
+                  if (instance.set("from", value)) this.setState({ from: value });
+               }
+            }
+            tooltipMouseMove(e, instance, tooltip, { tooltipName, target: handleEl });
+         },
+         (e: any) => {
+            this.setState({
+               drag: false,
+            });
+            let pos = getCursorPos(e);
+            let el = document.elementFromPoint(pos.clientX, pos.clientY);
+            if (el !== handleEl) tooltipMouseLeave(e, instance, tooltip as any, { tooltipName, target: handleEl });
+         },
+      );
+   }
+
+   getValues(
+      e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
+      d: number = 0,
+   ): { percent: number; value: number } {
+      let { data, widget } = this.props.instance;
+      let { minValue, maxValue } = data;
+      let b = getTopLevelBoundingClientRect(this.dom.range!);
+      let pos = getCursorPos(e as any);
+      let pct = widget.vertical
+         ? widget.invert
+            ? Math.max(0, Math.min(1, (pos.clientY - b.top - d) / this.dom.range!.offsetHeight))
+            : Math.max(0, Math.min(1, (b.bottom - pos.clientY + d) / this.dom.range!.offsetHeight))
+         : Math.max(0, Math.min(1, (pos.clientX - b.left - d) / this.dom.range!.offsetWidth));
+      let delta = (maxValue - minValue) * pct;
+      if (data.step) {
+         let currentValue = Math.round(delta / data.step) * data.step + minValue;
+         let value = this.checkBoundaries(currentValue);
+
+         if (maxValue % data.step === 0) delta = Math.round(delta / data.step) * data.step;
+
+         delta = value - minValue;
+      }
+
+      return {
+         percent: delta / (maxValue - minValue),
+         value: minValue + delta,
+      };
+   }
+
+   onClick(e: React.MouseEvent): void {
+      let { instance } = this.props;
+      let { data, widget } = instance;
+      if (!data.disabled && !data.readOnly) {
+         let { value } = this.getValues(e);
+         this.props.instance.set("value", value, { immediate: true });
+
+         if (widget.showFrom) {
+            this.setState({ from: value });
+            this.props.instance.set("from", value, { immediate: true });
+         }
+         if (widget.showTo) {
+            this.setState({ to: value });
+            this.props.instance.set("to", value, { immediate: true });
+         }
+      }
+   }
+
+   onWheel(e: WheelEvent): void {
+      let { instance } = this.props;
+      let { data, widget } = instance;
+      if ((widget.showFrom && widget.showTo) || !data.wheel) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      let increment = e.deltaY > 0 ? this.getIncrement() : -this.getIncrement();
+
+      if (!data.disabled && !data.readOnly) {
+         if (widget.showFrom) {
+            let value = this.checkBoundaries(data.from + increment);
+            if (instance.set("from", value)) this.setState({ from: value });
+         } else if (widget.showTo) {
+            let value = this.checkBoundaries(data.to + increment);
+            if (instance.set("to", value)) this.setState({ to: value });
+         }
+      }
+   }
+
+   checkBoundaries(value: number): number {
+      let { data } = this.props.instance;
+      if (value > data.maxValue) value = data.maxValue;
+      else if (value < data.minValue) value = data.minValue;
+      return value;
+   }
+
+   getIncrement(): number {
+      let { instance } = this.props;
+      let { data } = instance;
+      let increment = data.increment || (data.maxValue - data.minValue) * data.incrementPercentage;
+      return increment;
+   }
+}

package/src/widgets/form/Switch.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-switch(
    $name: "switch",
    $state-style-map: $cx-input-state-style-map,
@@ -10,9 +12,9 @@
    $empty-text: $cx-empty-text,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    $padding: cx-get-state-rule($state-style-map, default, padding);
    $border-width: cx-get-state-rule($state-style-map, default, border-width);

package/src/widgets/form/Switch.tsx

@@ -0,0 +1,174 @@
+/** @jsxImportSource react */
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { KeyCode } from "../../util/KeyCode";
+import { parseStyle } from "../../util/parseStyle";
+import { Field, FieldConfig, getFieldTooltip, FieldInstance } from "./Field";
+import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
+import { preventFocus } from "../../ui/FocusManager";
+import { isDefined } from "../../util/isDefined";
+import * as React from "react";
+import { BooleanProp, StringProp, StyleProp } from "../../ui/Prop";
+
+export interface SwitchConfig extends FieldConfig {
+   /** Value indicating that switch is on. */
+   on?: BooleanProp;
+
+   /** Value indicating that switch is off. */
+   off?: BooleanProp;
+
+   /** Value indicating that switch is on. */
+   value?: BooleanProp;
+
+   /** Defaults to `false`. Used to make the field read-only. */
+   readOnly?: BooleanProp;
+
+   /** Text description. */
+   text?: StringProp;
+
+   /** Style object to be applied on the axis range when the switch is on. */
+   rangeStyle?: StyleProp;
+
+   /** Style object to be applied on the switch handle. */
+   handleStyle?: StyleProp;
+
+   /** Base CSS class to be applied to the field. Defaults to `switch`. */
+   baseClass?: string;
+
+   /** Determines if button should receive focus on mousedown event. Default is `false`. */
+   focusOnMouseDown?: boolean;
+}
+
+export class Switch extends Field<SwitchConfig> {
+   declare public on?: unknown;
+   declare public off?: unknown;
+   declare public value?: unknown;
+   declare public rangeStyle?: Record<string, unknown> | string;
+   declare public handleStyle?: Record<string, unknown> | string;
+   declare public focusOnMouseDown?: boolean;
+
+   constructor(config?: SwitchConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            on: false,
+            off: true,
+            value: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            readOnly: undefined,
+            text: undefined,
+            rangeStyle: {
+               structured: true,
+            },
+            handleStyle: {
+               structured: true,
+            },
+         },
+         ...args
+      );
+   }
+
+   isEmpty(): boolean {
+      return false;
+   }
+
+   init(): void {
+      if (isDefined(this.value)) this.on = this.value;
+
+      this.rangeStyle = parseStyle(this.rangeStyle);
+      this.handleStyle = parseStyle(this.handleStyle);
+
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: FieldInstance<Switch>): void {
+      let { data } = instance;
+
+      if (isDefined(this.off)) data.on = !data.off;
+
+      data.stateMods = {
+         ...data.stateMods,
+         on: data.on,
+         disabled: data.disabled,
+      };
+      super.prepareData(context, instance);
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance, key: string): React.ReactElement {
+      let { data, widget } = instance;
+      let { rangeStyle, handleStyle } = data;
+      let { CSS, baseClass } = this;
+
+      let text = data.text || this.renderChildren(context, instance);
+      let renderTextElement = text?.length != 0;
+
+      return (
+         <div
+            key={key}
+            className={data.classNames}
+            style={data.style}
+            id={data.id}
+            tabIndex={data.disabled ? undefined : ((data.tabIndex as number) || 0)}
+            onMouseDown={(e: React.MouseEvent) => {
+               e.stopPropagation();
+               if (!this.focusOnMouseDown) preventFocus(e);
+            }}
+            onClick={(e: React.MouseEvent) => {
+               this.toggle(e, instance);
+            }}
+            onKeyDown={(e: React.KeyboardEvent) => {
+               const switchWidget = widget as Switch;
+               if (switchWidget.handleKeyDown && switchWidget.handleKeyDown(e, instance) === false) return;
+               if (e.keyCode == KeyCode.space) {
+                  this.toggle(e, instance);
+               }
+            }}
+            onMouseMove={(e: React.MouseEvent) => {
+               const tooltip = getFieldTooltip(instance);
+               if (Array.isArray(tooltip)) {
+                  tooltipMouseMove(e, ...tooltip);
+               }
+            }}
+            onMouseLeave={(e: React.MouseEvent) => {
+               const tooltip = getFieldTooltip(instance);
+               if (Array.isArray(tooltip)) {
+                  tooltipMouseLeave(e, ...tooltip);
+               }
+            }}
+         >
+            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+            &nbsp;
+            <div className={CSS.element(baseClass, "axis")}>
+               <div className={CSS.element(baseClass, "range")} style={parseStyle(rangeStyle)} />
+               <div className={CSS.element(baseClass, "space")}>
+                  <div className={CSS.element(baseClass, "handle")} style={parseStyle(handleStyle)} />
+               </div>
+            </div>
+            {renderTextElement && (
+               <div key="text" className={CSS.element(this.baseClass, "text")}>
+                  {text}
+               </div>
+            )}
+         </div>
+      );
+   }
+
+   toggle(e: React.MouseEvent | React.KeyboardEvent, instance: Instance): void {
+      let { data } = instance;
+      if (data.readOnly || data.disabled) return;
+      instance.set("on", !data.on);
+      instance.set("off", data.on);
+      e.preventDefault();
+      e.stopPropagation();
+   }
+}
+
+Switch.prototype.baseClass = "switch";
+Switch.prototype.focusOnMouseDown = false;
+
+Widget.alias("switch", Switch);

package/src/widgets/form/TextArea.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-textarea(
    $name: "textarea",
    $state-style-map: $cx-textarea-state-style-map,
@@ -8,10 +10,10 @@
    $width: $cx-default-textarea-width,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       line-height: 0;