cx 25.11.1 → 26.0.1

package/src/widgets/form/TextArea.tsx

@@ -0,0 +1,229 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { TextField, TextFieldConfig } from "./TextField";
+import { getFieldTooltip, FieldInstance } from "./Field";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import {
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
+   tooltipMouseMove,
+   tooltipMouseLeave,
+   tooltipParentDidMount,
+} from "../overlay/tooltip-ops";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { KeyCode } from "../../util/KeyCode";
+import { autoFocus } from "../autoFocus";
+import { getActiveElement } from "../../util/getActiveElement";
+import { NumberProp } from "../../ui/Prop";
+
+export interface TextAreaConfig extends TextFieldConfig {
+   /** Specifies the number of visible lines. */
+   rows?: NumberProp;
+
+   /** Event used to report on a new value. Defaults to `blur`. Other permitted value is `input`. */
+   reactOn?: string;
+
+   /** Base CSS class to be applied to the element. Defaults to `textarea`. */
+   baseClass?: string;
+}
+
+export class TextArea extends TextField<TextAreaConfig> {
+   constructor(config?: TextAreaConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         rows: undefined,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: FieldInstance<TextArea>): void {
+      let { state, data, cached } = instance;
+      if (!cached.data || data.value != cached.data.value) state.empty = !data.value;
+      super.prepareData(context, instance);
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance<TextArea>, key: string): React.ReactNode {
+      return (
+         <Input
+            key={key}
+            data={instance.data}
+            instance={instance}
+            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
+         />
+      );
+   }
+
+   validateRequired(context: RenderingContext, instance: FieldInstance<TextArea>): string | undefined {
+      return instance.state.empty && this.requiredText;
+   }
+}
+
+TextArea.prototype.baseClass = "textarea";
+TextArea.prototype.reactOn = "blur";
+TextArea.prototype.suppressErrorsUntilVisited = true;
+
+interface InputProps {
+   instance: FieldInstance<TextArea>;
+   data: Record<string, any>;
+   label?: React.ReactNode;
+   help?: React.ReactNode;
+}
+
+interface InputState {
+   focus: boolean;
+}
+
+class Input extends VDOM.Component<InputProps, InputState> {
+   input?: HTMLTextAreaElement;
+
+   constructor(props: InputProps) {
+      super(props);
+      this.state = {
+         focus: false,
+      };
+   }
+
+   render(): React.ReactNode {
+      let { instance, label, help } = this.props;
+      let { widget, data, state } = instance;
+      let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
+
+      let empty = this.input ? !this.input.value : data.empty;
+
+      return (
+         <div
+            className={CSS.expand(
+               data.classNames,
+               CSS.state({
+                  visited: state.visited,
+                  focus: this.state.focus,
+                  empty: empty && !data.placeholder,
+                  error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
+               }),
+            )}
+            style={data.style}
+            onMouseDown={stopPropagation}
+            onTouchStart={stopPropagation}
+         >
+            <textarea
+               className={CSS.element(baseClass, "input")}
+               ref={(el: HTMLTextAreaElement | null) => {
+                  this.input = el || undefined;
+               }}
+               id={data.id}
+               rows={data.rows}
+               style={data.inputStyle}
+               defaultValue={data.value}
+               disabled={data.disabled}
+               readOnly={data.readOnly}
+               tabIndex={data.tabIndex}
+               placeholder={data.placeholder}
+               {...data.inputAttrs}
+               onInput={(e: React.FormEvent<HTMLTextAreaElement>) => this.onChange(e.currentTarget.value, "input")}
+               onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => this.onChange(e.target.value, "change")}
+               onBlur={(e: React.FocusEvent<HTMLTextAreaElement>) => this.onBlur(e)}
+               onFocus={(e: React.FocusEvent<HTMLTextAreaElement>) => this.onFocus()}
+               onClick={stopPropagation}
+               onKeyDown={(e: React.KeyboardEvent<HTMLTextAreaElement>) => this.onKeyDown(e)}
+               onMouseMove={(e: React.MouseEvent<HTMLTextAreaElement>) =>
+                  tooltipMouseMove(e, ...getFieldTooltip(instance))
+               }
+               onMouseLeave={(e: React.MouseEvent<HTMLTextAreaElement>) =>
+                  tooltipMouseLeave(e, ...getFieldTooltip(instance))
+               }
+            />
+            {label}
+            {help}
+         </div>
+      );
+   }
+
+   componentWillUnmount(): void {
+      if (this.input == getActiveElement()) {
+         this.onChange(this.input.value, "blur");
+      }
+      tooltipParentWillUnmount(this.props.instance);
+   }
+
+   componentDidMount(): void {
+      tooltipParentDidMount(this.input!, ...getFieldTooltip(this.props.instance));
+      autoFocus(this.input, this);
+   }
+
+   componentDidUpdate(): void {
+      autoFocus(this.input, this);
+   }
+
+   onKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>): void {
+      let { instance } = this.props;
+      if (instance.widget.handleKeyDown(e, instance) === false) return;
+
+      switch (e.keyCode) {
+         case KeyCode.down:
+         case KeyCode.up:
+         case KeyCode.left:
+         case KeyCode.right:
+            e.stopPropagation();
+            break;
+      }
+   }
+
+   UNSAFE_componentWillReceiveProps({ data, instance }: InputProps): void {
+      if (data.value != this.props.data.value) {
+         this.input!.value = data.value || "";
+      }
+      tooltipParentWillReceiveProps(this.input!, ...getFieldTooltip(instance));
+   }
+
+   onChange(inputValue: string, change: string): void {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+
+      if (change == "blur") {
+         instance.setState({ visited: true });
+         if (this.state.focus)
+            this.setState({
+               focus: false,
+            });
+      }
+
+      if (data.required) {
+         instance.setState({
+            empty: !inputValue,
+         });
+      }
+
+      if (instance.widget.reactOn.indexOf(change) != -1) {
+         let value = inputValue || widget.emptyValue;
+         instance.set("value", value);
+      }
+   }
+
+   onFocus(): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+      if (widget.trackFocus) {
+         this.setState({
+            focus: true,
+         });
+
+         instance.set("focused", true);
+      }
+   }
+
+   onBlur(e: React.FocusEvent<HTMLTextAreaElement>): void {
+      const { instance } = this.props;
+      if (instance.widget.trackFocus) {
+         instance.set("focused", false);
+      }
+
+      this.onChange(e.target.value, "blur");
+   }
+}
+
+Widget.alias("textarea", TextArea);

package/src/widgets/form/TextField.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-textfield(
    $name: "textfield",
    $state-style-map: $cx-std-field-state-style-map,
@@ -9,10 +11,10 @@
    $width: $cx-default-input-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} {
       @include cxb-field($besm, $state-style-map, $width: $width, $input: true);

package/src/widgets/form/TextField.tsx

@@ -0,0 +1,345 @@
+/** @jsxImportSource react */
+
+import { Widget, getContent } from "../../ui/Widget";
+import { Field, FieldConfig, getFieldTooltip } from "./Field";
+import { BooleanProp, NumberProp, Prop, StringProp } from "../../ui/Prop";
+import { Instance } from "../../ui/Instance";
+
+export interface TextFieldConfig extends FieldConfig {
+   value?: Prop<any>;
+   placeholder?: StringProp;
+   disabled?: BooleanProp;
+   readOnly?: BooleanProp;
+   required?: BooleanProp;
+   minLength?: NumberProp;
+   maxLength?: NumberProp;
+   validationRegExp?: Prop<RegExp>;
+   validationErrorText?: StringProp;
+   minLengthValidationErrorText?: StringProp;
+   maxLengthValidationErrorText?: StringProp;
+   reactOn?: StringProp;
+   inputType?: StringProp;
+   keyboardShortcut?: StringProp;
+   trim?: BooleanProp;
+   hideClear?: BooleanProp;
+   showClear?: BooleanProp;
+   alwaysShowClear?: BooleanProp;
+   icon?: Prop<any>;
+   inputAttrs?: Prop<any>;
+   onChange?: string | ((value: any, instance: Instance) => void);
+   onInput?: string | ((value: any, instance: Instance) => void);
+   onFocus?: string | ((e: FocusEvent, instance: Instance) => void);
+   onBlur?: string | ((e: FocusEvent, instance: Instance) => void);
+}
+
+// Legacy alias for backward compatibility
+export interface TextFieldProps extends TextFieldConfig {}
+
+import {
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
+   tooltipMouseMove,
+   tooltipMouseLeave,
+   tooltipParentDidMount,
+} from "../overlay/tooltip-ops";
+import { stopPropagation, preventDefault } from "../../util/eventCallbacks";
+import { StringTemplate } from "../../data/StringTemplate";
+import { Icon } from "../Icon";
+import { KeyCode } from "../../util/KeyCode";
+import { Localization } from "../../ui/Localization";
+import ClearIcon from "../icons/clear";
+import { autoFocus } from "../autoFocus";
+import { isString } from "../../util/isString";
+import { getActiveElement } from "../../util/getActiveElement";
+import { VDOM } from "../../ui/VDOM";
+
+export class TextField<Config extends TextFieldConfig = TextFieldConfig> extends Field<Config> {
+   declare public hideClear?: boolean;
+   declare public showClear?: boolean;
+   declare public alwaysShowClear?: boolean;
+   declare public validationRegExp?: RegExp;
+   declare public validationErrorText?: string;
+   declare public minLengthValidationErrorText: string;
+   declare public maxLengthValidationErrorText: string;
+   declare public reactOn: string;
+   declare public inputType?: string;
+   declare public keyboardShortcut?: string;
+   declare public trim?: boolean;
+
+   public init(): void {
+      if (typeof this.hideClear !== "undefined") this.showClear = !this.hideClear;
+
+      if (this.alwaysShowClear) this.showClear = true;
+
+      super.init();
+   }
+
+   public declareData(...args: any[]): void {
+      super.declareData(
+         {
+            value: this.emptyValue,
+            disabled: undefined,
+            readOnly: undefined,
+            enabled: undefined,
+            placeholder: undefined,
+            required: undefined,
+            minLength: undefined,
+            maxLength: undefined,
+            icon: undefined,
+            trim: undefined,
+         },
+         ...args,
+      );
+   }
+
+   public renderInput(context: any, instance: any, key?: any): any {
+      return (
+         <Input
+            key={key}
+            instance={instance}
+            data={instance.data}
+            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
+            icon={this.renderIcon(context, instance, "icon")}
+         />
+      );
+   }
+
+   public validate(context: any, instance: any): void {
+      super.validate(context, instance);
+
+      let { data } = instance;
+
+      if (!data.error && data.value) {
+         if (this.validationRegExp) this.validationRegExp.lastIndex = 0;
+         if (this.validationRegExp && !this.validationRegExp.test(data.value)) data.error = this.validationErrorText;
+         else if (typeof data.value === "string" && data.minLength != null && data.value.length < data.minLength)
+            data.error = StringTemplate.format(this.minLengthValidationErrorText, data.minLength, data.value.length);
+         else if (typeof data.value === "string" && data.maxLength != null && data.value.length > data.maxLength)
+            data.error = StringTemplate.format(this.maxLengthValidationErrorText, data.maxLength, data.value.length);
+      }
+   }
+}
+
+TextField.prototype.baseClass = "textfield";
+TextField.prototype.reactOn = "change input blur enter";
+TextField.prototype.inputType = "text";
+TextField.prototype.validationErrorText = "The entered value is not valid.";
+TextField.prototype.minLengthValidationErrorText = "Enter {[{0}-{1}]} more character(s).";
+TextField.prototype.maxLengthValidationErrorText = "Use {0} characters or fewer.";
+TextField.prototype.suppressErrorsUntilVisited = true;
+TextField.prototype.icon = null;
+TextField.prototype.showClear = false;
+TextField.prototype.alwaysShowClear = false;
+TextField.prototype.keyboardShortcut = "false";
+TextField.prototype.trim = false;
+
+Localization.registerPrototype("cx/widgets/TextField", TextField);
+
+class Input extends VDOM.Component<any, any> {
+   public input?: HTMLInputElement;
+
+   constructor(props: any) {
+      super(props);
+      this.state = {
+         focus: false,
+      };
+   }
+
+   render(): any {
+      let { instance, data, label, help, icon: iconVDOM } = this.props;
+      let { widget, state } = instance;
+      let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
+
+      let icon = iconVDOM && (
+         <div
+            className={CSS.element(baseClass, "left-icon")}
+            onMouseDown={preventDefault}
+            onClick={(e: any) => this.onChange((e.target as any).value, "enter")}
+         >
+            {iconVDOM}
+         </div>
+      );
+
+      let insideButton;
+      if (
+         widget.showClear &&
+         !data.empty &&
+         !data.readOnly &&
+         !data.disabled &&
+         (widget.alwaysShowClear || !data.required)
+      ) {
+         insideButton = (
+            <div
+               className={CSS.element(baseClass, "clear")}
+               onMouseDown={(e: any) => e.preventDefault()}
+               onClick={(e: any) => this.onClearClick(e)}
+            >
+               <ClearIcon className={CSS.element(baseClass, "icon")} />
+            </div>
+         );
+      }
+
+      let empty = this.input ? !this.trimmed(this.input.value) : data.empty;
+
+      return (
+         <div
+            className={CSS.expand(
+               data.classNames,
+               CSS.state({
+                  visited: state.visited,
+                  focus: this.state.focus,
+                  icon: !!icon,
+                  clear: insideButton != null,
+                  empty: empty && !data.placeholder,
+                  error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
+               }),
+            )}
+            style={data.style}
+            onMouseDown={stopPropagation}
+            onTouchStart={stopPropagation}
+         >
+            <input
+               ref={(el: HTMLInputElement | null) => {
+                  this.input = el || undefined;
+               }}
+               className={CSS.expand(CSS.element(baseClass, "input"), data.inputClass)}
+               defaultValue={data.value}
+               id={data.id}
+               style={data.inputStyle}
+               type={widget.inputType}
+               disabled={data.disabled}
+               readOnly={data.readOnly}
+               tabIndex={data.tabIndex}
+               placeholder={data.placeholder}
+               {...data.inputAttrs}
+               onMouseMove={this.onMouseMove.bind(this)}
+               onMouseLeave={this.onMouseLeave.bind(this)}
+               onInput={(e: any) => this.onChange(e.target.value, "input")}
+               onChange={(e: any) => this.onChange((e.target as any).value, "change")}
+               onKeyDown={this.onKeyDown.bind(this)}
+               onFocus={this.onFocus.bind(this)}
+               onBlur={this.onBlur.bind(this)}
+               onClick={stopPropagation}
+            />
+            {insideButton}
+            {icon}
+            {label}
+            {help}
+         </div>
+      );
+   }
+
+   onFocus(): void {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+      if (widget.trackFocus) {
+         this.setState({
+            focus: true,
+         });
+         instance.set("focused", true);
+      }
+      if (data.error && data.value) instance.setState({ visited: true });
+   }
+
+   onBlur(e: any): void {
+      if (this.state.focus) {
+         this.setState({
+            focus: false,
+         });
+         this.props.instance.set("focused", false);
+      }
+      this.onChange((e.target as any).value, "blur");
+   }
+
+   onClearClick(_e: any): void {
+      if (this.input) this.input.value = ""; // prevent onChange call with old text value on blur or component unmount
+      this.props.instance.set("value", this.props.instance.widget.emptyValue, { immediate: true });
+   }
+
+   onMouseMove(e: any): void {
+      const tooltip = getFieldTooltip(this.props.instance);
+      tooltipMouseMove(e, tooltip[0], tooltip[1], tooltip[2]);
+   }
+
+   onMouseLeave(e: any): void {
+      const tooltip = getFieldTooltip(this.props.instance);
+      tooltipMouseLeave(e, tooltip[0], tooltip[1], tooltip[2]);
+   }
+
+   componentDidMount(): void {
+      const tooltip = getFieldTooltip(this.props.instance);
+      tooltipParentDidMount(this.input!, tooltip[0], tooltip[1], tooltip[2]);
+      autoFocus(this.input, this);
+   }
+
+   componentDidUpdate(): void {
+      autoFocus(this.input, this);
+   }
+
+   componentWillUnmount(): void {
+      if (this.input == getActiveElement() && this.input && this.input.value != this.props.data.value)
+         this.onChange(this.input.value, "blur");
+      tooltipParentWillUnmount(this.props.instance);
+   }
+
+   onKeyDown(e: any): void {
+      let { instance } = this.props;
+      if (instance.widget.handleKeyDown(e, instance) === false) return;
+
+      switch (e.keyCode) {
+         case KeyCode.enter:
+            this.onChange(e.target.value, "enter");
+            break;
+
+         case KeyCode.left:
+         case KeyCode.right:
+            e.stopPropagation();
+            break;
+      }
+   }
+
+   UNSAFE_componentWillReceiveProps(props: any): void {
+      let { data } = props;
+      // The second check is required for debouncing, sometimes the value in the store lags after the input
+      // and update may be caused by some other property, i.e. visited
+      if (this.input && data.value != this.input.value && data.value != this.props.data.value)
+         this.input.value = data.value || "";
+      const tooltip = getFieldTooltip(props.instance);
+      tooltipParentWillReceiveProps(this.input!, tooltip[0], tooltip[1], tooltip[2]);
+   }
+
+   onChange(textValue: any, change: string): void {
+      let { instance, data } = this.props;
+
+      let immediate = change == "blur" || change == "enter";
+
+      if (immediate) {
+         instance.setState({ visited: true });
+      }
+
+      let { widget } = instance;
+
+      if (widget.reactOn.indexOf(change) != -1) {
+         let text = this.trimmed(textValue);
+         if (data.maxLength != null && text.length > data.maxLength) {
+            text = text.substring(0, data.maxLength);
+            if (this.input) this.input.value = text;
+         }
+
+         let value = text || widget.emptyValue;
+         if (!instance.set("value", value, { immediate })) {
+            if (this.input && text != this.input.value && immediate) this.input.value = text;
+         } else {
+            if (value) instance.setState({ visited: true });
+         }
+      }
+   }
+
+   trimmed(value: any): any {
+      if (this.props.data.trim && isString(value)) return value.trim();
+      return value;
+   }
+}
+
+Widget.alias("textfield", TextField);

package/src/widgets/form/TimeField.ts

@@ -0,0 +1,10 @@
+import { Widget } from "../../ui/Widget";
+import { Localization } from "../../ui/Localization";
+import { DateTimeField } from "./DateTimeField";
+
+export class TimeField extends DateTimeField {}
+
+TimeField.prototype.segment = "time";
+
+Widget.alias("timefield", TimeField);
+Localization.registerPrototype("cx/widgets/TimeField", TimeField);

package/src/widgets/form/TimeList.tsx

@@ -0,0 +1,94 @@
+/** @jsxImportSource react */
+import { ContentResolver } from "../../ui/ContentResolver";
+import { DataProxy } from "../../ui/DataProxy";
+import { List } from "../List";
+import { KeySelection } from "../../ui/selection/KeySelection";
+import { createFunctionalComponent } from "../../ui/createFunctionalComponent";
+import { zeroTime } from "../../util/date/zeroTime";
+import { Format } from "../../util/Format";
+import { Culture } from "../../ui/Culture";
+import { isString } from "../../util/isString";
+import { isFunction } from "../../util/isFunction";
+import { bind } from "../../ui/bind";
+import { Widget } from "../../ui/Widget";
+import type { Instance } from "../../ui/Instance";
+import { HtmlElement } from "../HtmlElement";
+
+interface TimeListProps {
+   value?: unknown;
+   step?: number;
+   format?: string;
+   encoding?: (date: Date) => unknown;
+   onSelect?: string | ((e: React.MouseEvent, instance: Instance, date: Date) => void);
+   [key: string]: unknown;
+}
+
+export const TimeList = createFunctionalComponent(({ value, step, format, encoding, onSelect, ...props }: TimeListProps) => {
+   return Widget.create({
+      type: ContentResolver,
+      params: { step, format, dummy: true },
+      onResolve: ({ step, format }: { step?: number; format?: string }) => {
+         let max = 24 * 60;
+         if (!step) step = 15;
+         if (step < 1) step = 1;
+         let times = [];
+         let today = zeroTime(new Date()).valueOf();
+         for (let m = 0; m < max; m += step) {
+            let time = m * 60 * 1000;
+            times.push({
+               id: m * 60 * 1000,
+               text: Format.value(today + time, format || "datetime;HHmm"),
+            });
+         }
+         let stepMs = step * 60 * 1000;
+         return Widget.create({
+            type: DataProxy,
+            data: { $value: value },
+            immutable: true,
+            children: Widget.create({
+               type: DataProxy,
+               data: {
+                  $selection: {
+                     get: ({ $value }: { $value?: unknown }) => {
+                        if ($value == null) return null;
+                        let selectionDate = new Date($value as any);
+                        let selectionTime = selectionDate.valueOf() - zeroTime(selectionDate).valueOf();
+                        return (Math.round(selectionTime / stepMs) * stepMs) % 86400000;
+                     },
+                     set: (value: unknown, instance: Instance) => {
+                        let { store } = instance;
+                        let $value = store.get("$value");
+                        let copy = $value ? new Date($value as any) : new Date();
+                        let today = zeroTime(new Date()).valueOf();
+                        let date = new Date(today + (value as number));
+                        copy.setHours(date.getHours());
+                        copy.setMinutes(date.getMinutes());
+                        copy.setSeconds(date.getSeconds());
+                        copy.setMilliseconds(0);
+                        let encode = encoding || Culture.getDefaultDateEncoding();
+                        store.set("$value", encode(copy));
+                     },
+                  },
+               },
+               children: Widget.create({
+                  type: List,
+                  records: times,
+                  recordAlias: "$time",
+                  selection: {
+                     type: KeySelection,
+                     selection: { bind: "$selection" },
+                  },
+                  ...props,
+                  onItemClick: (e: React.MouseEvent, instance: Instance) => {
+                     if (!onSelect) return;
+                     let date = new Date(instance.store.get('$value') as any);
+                     if (isString(onSelect)) instance.invokeControllerMethod(onSelect, e, instance, date);
+                     else if (isFunction(onSelect)) onSelect(e, instance, date);
+                  },
+                  children: HtmlElement.create("div", { text: bind("$time.text") }),
+               }),
+            }),
+         });
+      },
+   });
+});