cx 25.11.1 → 26.0.2

package/src/widgets/form/UploadButton.scss

@@ -1,4 +1,6 @@
 
+@use "sass:map";
+
 @import "../Button";
 
 @mixin cx-uploadbutton(
@@ -7,9 +9,9 @@
    $mods: $cx-button-mods,
    $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);
 
    @include cx-button($name,
       $mods: $mods,

package/src/widgets/form/UploadButton.tsx

@@ -0,0 +1,256 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM } from "../../ui/Widget";
+import { Icon } from "../Icon";
+import { Field, FieldInstance } from "./Field";
+import { Url } from "../../ui/app/Url";
+import { Localization } from "../../ui/Localization";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
+
+//TODO: Implement UploadStatus which will enable canceling
+
+export class UploadButton extends Field {
+   declare public multiple: boolean;
+   declare public method: string;
+   declare public abortOnDestroy: boolean;
+   declare public uploadInProgressText: string;
+   declare public onResolveUrl?: string | ((file: File, instance: Instance) => string | Promise<string>);
+   declare public onUploadStarting?:
+      | string
+      | ((xhr: XMLHttpRequest, instance: Instance, file: File, formData: FormData) => boolean | Promise<boolean>);
+   declare public onUploadComplete?:
+      | string
+      | ((xhr: XMLHttpRequest, instance: Instance, file: File, formData: FormData) => void);
+   declare public onUploadProgress?:
+      | string
+      | ((event: ProgressEvent, instance: Instance, file: File, formData: FormData) => void);
+   declare public onUploadError?: string | ((error: unknown, instance: Instance, file: File, formData: FormData) => void);
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            disabled: undefined,
+            enabled: undefined,
+            text: undefined,
+            url: undefined,
+            icon: undefined,
+            accept: undefined,
+         },
+         ...args,
+      );
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance<UploadButton>, key: string): React.ReactNode {
+      let { data } = instance;
+      return (
+         <UploadButtonComponent key={key} instance={instance}>
+            {data.text || this.renderChildren(context, instance)}
+         </UploadButtonComponent>
+      );
+   }
+}
+
+UploadButton.prototype.baseClass = "uploadbutton";
+UploadButton.prototype.multiple = false;
+UploadButton.prototype.method = "POST";
+UploadButton.prototype.abortOnDestroy = false;
+UploadButton.prototype.uploadInProgressText = "Upload is in progress.";
+
+Localization.registerPrototype("cx/widgets/UploadButton", UploadButton);
+
+interface UploadButtonComponentProps {
+   instance: FieldInstance<UploadButton>;
+   children?: React.ReactNode;
+}
+
+interface UploadButtonComponentState {
+   progress: number;
+   uploadKey: number;
+}
+
+interface Upload {
+   progress: number;
+   size: number;
+   file: File;
+   xhr: XMLHttpRequest;
+}
+
+class UploadButtonComponent extends VDOM.Component<UploadButtonComponentProps, UploadButtonComponentState> {
+   uploads: Record<string, Upload>;
+   el?: HTMLDivElement;
+
+   constructor(props: UploadButtonComponentProps) {
+      super(props);
+      this.uploads = {};
+      this.state = {
+         progress: 100,
+         uploadKey: 0,
+      };
+   }
+
+   render(): React.ReactNode {
+      let { instance, children } = this.props;
+      let { widget, data } = instance;
+      let { CSS, baseClass } = widget;
+
+      let icon;
+
+      let className = data.classNames;
+
+      if (data.icon) {
+         icon = Icon.render(data.icon, {
+            className: CSS.element(baseClass, "icon"),
+         });
+         className = CSS.expand(className, CSS.state("icon"), !isNonEmptyArray(children) && CSS.state("empty"));
+      }
+
+      return (
+         <div
+            ref={(el: HTMLDivElement | null) => {
+               this.el = el || undefined;
+            }}
+            className={className}
+            style={data.style}
+         >
+            <div
+               key="progress"
+               className={CSS.element(baseClass, "progress", { done: this.state.progress == 100 })}
+               style={{ width: `${this.state.progress}%` }}
+            />
+            {icon}
+            {children}
+            {!data.disabled && (
+               <input
+                  key={this.state.uploadKey}
+                  className={CSS.element(baseClass, "input")}
+                  type="file"
+                  title=" "
+                  accept={data.accept as string}
+                  multiple={widget.multiple}
+                  tabIndex={data.tabIndex as number}
+                  onChange={this.onFileSelected.bind(this)}
+               />
+            )}
+         </div>
+      );
+   }
+
+   onFileSelected(e: React.ChangeEvent<HTMLInputElement>): void {
+      let files = e.target.files;
+      if (files) {
+         for (let i = 0; i < files.length; i++) this.uploadFile(files[i]);
+      }
+   }
+
+   componentDidMount(): void {
+      if (this.props.instance.data.autoFocus) this.el!.focus();
+   }
+
+   componentWillUnmount(): void {
+      if (this.props.instance.widget.abortOnDestroy) {
+         for (let key in this.uploads) {
+            let upload = this.uploads[key];
+            upload.xhr.abort();
+         }
+      }
+   }
+
+   uploadFile(file: File): void {
+      let { instance } = this.props;
+      let { data, widget } = instance;
+
+      if (widget.onResolveUrl) {
+         Promise.resolve(instance.invoke("onResolveUrl", file, instance)).then((url) => {
+            this.doUpload(file, url);
+         });
+      } else {
+         this.doUpload(file, data.url);
+      }
+   }
+
+   doUpload(file: File, url: string): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+
+      if (!url) throw new Error("Upload URL not set.");
+
+      let xhr = new XMLHttpRequest();
+      xhr.open(widget.method, Url.resolve(url));
+
+      let formData = new FormData();
+      formData.append("file", file);
+
+      let key = this.state.uploadKey;
+      this.setState({
+         uploadKey: key + 1,
+      });
+
+      let startingPromise = widget.onUploadStarting
+         ? instance.invoke("onUploadStarting", xhr, instance, file, formData)
+         : true;
+
+      Promise.resolve(startingPromise)
+         .then((result) => {
+            if (result === false) return;
+
+            let upload = (this.uploads[key] = {
+               progress: 0,
+               size: file.size || 1,
+               file: file,
+               xhr: xhr,
+            });
+
+            xhr.onload = () => {
+               delete this.uploads[key];
+               if (widget.onUploadComplete) instance.invoke("onUploadComplete", xhr, instance, file, formData);
+               this.reportProgress();
+            };
+            xhr.onerror = (e) => {
+               delete this.uploads[key];
+               if (widget.onUploadError) instance.invoke("onUploadError", e, instance, file, formData);
+               this.reportProgress();
+            };
+
+            xhr.upload.onprogress = (event) => {
+               if (event.lengthComputable) {
+                  upload.progress = event.loaded / event.total;
+                  this.reportProgress();
+                  if (widget.onUploadProgress) instance.invoke("onUploadProgress", event, instance, file, formData);
+               }
+            };
+
+            xhr.send(formData);
+         })
+         .catch((err) => {
+            if (widget.onUploadError) instance.invoke("onUploadError", err, instance, file, formData);
+            else console.error("Unhandled upload error.", err);
+         });
+
+      this.reportProgress();
+   }
+
+   reportProgress(): void {
+      let totalSize = 0;
+      let uploaded = 0;
+
+      for (let key in this.uploads) {
+         let upload = this.uploads[key];
+         totalSize += upload.size;
+         uploaded += upload.size * upload.progress;
+      }
+
+      let progress = 100 * (totalSize ? uploaded / totalSize : 1);
+
+      this.props.instance.setState({
+         inputError: progress == 100 ? false : this.props.instance.widget.uploadInProgressText,
+      });
+
+      this.setState({
+         progress: Math.max(0.001, Math.floor(progress)),
+      });
+   }
+}
+
+Widget.alias("upload-button", UploadButton);

package/src/widgets/form/ValidationError.scss

@@ -1,11 +1,12 @@
+@use "sass:map";
 
 @mixin cx-validationerror(
    $name: 'uploadbutton',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $mod: map.get($besm, mod);
 
    .#{$block}validationerror {
       color: rgb(220, 0, 9);

package/src/widgets/form/ValidationError.tsx

@@ -0,0 +1,72 @@
+/** @jsxImportSource react */
+
+import type { Instance } from "../../ui/Instance";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { Widget } from "../../ui/Widget";
+import type { FormRenderingContext } from "./ValidationGroup";
+
+interface ValidationErrorData {
+   visible?: boolean;
+   classNames?: string;
+   fieldId?: string;
+   errorMessage?: string;
+   style?: Record<string, string | number> | string;
+}
+
+interface ValidationErrorInstance extends Instance {
+   lastError?: {
+      fieldId: string;
+      message: string;
+      visited: boolean;
+      type: string;
+   };
+   data: ValidationErrorData;
+}
+
+export class ValidationError extends Widget {
+   checkVisible(context: FormRenderingContext, instance: ValidationErrorInstance, data: ValidationErrorData): boolean {
+      if (
+         data.visible &&
+         context.lastFieldId &&
+         context.validation &&
+         context.validation.errors &&
+         context.validation.errors.length > 0
+      ) {
+         var lastError = (instance.lastError = context.validation.errors[context.validation.errors.length - 1]);
+         return lastError.fieldId == context.lastFieldId && lastError.visited;
+      }
+
+      return false;
+   }
+
+   explore(context: FormRenderingContext, instance: ValidationErrorInstance): void {
+      var { data, lastError } = instance;
+      let c1 = instance.cache("lastErrorMessage", lastError?.message);
+      let c2 = instance.cache("lastErrorFieldId", lastError?.fieldId);
+      if (c1 || c2) {
+         data.errorMessage = lastError?.message;
+         data.fieldId = lastError?.fieldId;
+         instance.markShouldUpdate(context);
+      }
+      super.explore(context, instance);
+   }
+
+   render(context: RenderingContext, instance: ValidationErrorInstance, key: string): React.ReactElement {
+      var { data } = instance;
+      return (
+         <label
+            key={key}
+            className={data.classNames as string}
+            htmlFor={data.fieldId}
+            style={data.style as React.CSSProperties}
+         >
+            {data.errorMessage}
+         </label>
+      );
+   }
+}
+
+ValidationError.prototype.baseClass = "validationerror";
+ValidationError.prototype.styled = true;
+
+Widget.alias("validation-error", ValidationError);

package/src/widgets/form/ValidationGroup.spec.tsx

@@ -0,0 +1,147 @@
+import { Store } from "../../data/Store";
+import { ValidationGroup } from "./ValidationGroup";
+import { Validator } from "./Validator";
+import { bind } from "../../ui/bind";
+import { createTestRenderer } from "../../util/test/createTestRenderer";
+
+import assert from "assert";
+
+describe("ValidationGroup", () => {
+   it("performs validation and sets the flags", () => {
+      let widget = (
+         <cx>
+            <ValidationGroup invalid={bind("invalid")} valid={bind("valid")}>
+               <Validator onValidate={() => "Something is wrong..."} />
+               <div visible={bind("invalid")}>Invalid</div>
+            </ValidationGroup>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree));
+      assert.equal(tree.type, "div");
+      assert.equal(store.get("invalid"), true);
+      assert.equal(store.get("valid"), false);
+   });
+
+   it("nested validation works", () => {
+      let widget = (
+         <cx>
+            <div>
+               <ValidationGroup invalid={bind("invalid")}>
+                  <ValidationGroup invalid={bind("invalid1")}>
+                     <Validator onValidate={() => "Something is wrong..."} />
+                  </ValidationGroup>
+                  <ValidationGroup invalid={bind("invalid2")}>
+                     <Validator onValidate={() => false} />
+                  </ValidationGroup>
+               </ValidationGroup>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.equal(store.get("invalid"), true);
+      assert.equal(store.get("invalid1"), true);
+      assert.equal(store.get("invalid2"), false);
+   });
+
+   it("isolated validation group does not affect the parent", () => {
+      let widget = (
+         <cx>
+            <div>
+               <ValidationGroup invalid={bind("invalid")}>
+                  <ValidationGroup invalid={bind("invalid1")} isolated>
+                     <Validator onValidate={() => "Something is wrong..."} />
+                  </ValidationGroup>
+                  <ValidationGroup invalid={bind("invalid2")}>
+                     <Validator onValidate={() => false} />
+                  </ValidationGroup>
+               </ValidationGroup>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.equal(store.get("invalid"), false);
+      assert.equal(store.get("invalid1"), true);
+      assert.equal(store.get("invalid2"), false);
+   });
+
+   it("visited flag is propagated into nested validation groups", () => {
+      let visited = false;
+
+      let widget = (
+         <cx>
+            <div>
+               <ValidationGroup visited>
+                  <ValidationGroup>
+                     <div
+                        onExplore={(context, instance) => {
+                           if (context.parentVisited) visited = true;
+                        }}
+                     />
+                  </ValidationGroup>
+               </ValidationGroup>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(visited);
+   });
+
+   it("disabled flag can be overruled by the field props", () => {
+      let widget = (
+         <cx>
+            <div>
+               <ValidationGroup invalid={bind("invalid")} disabled>
+                  <Validator onValidate={() => "Something is wrong..."} disabled={false} />
+               </ValidationGroup>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.equal(store.get("invalid"), true);
+   });
+
+   it("strict flag is used to enforce disabled flag", () => {
+      let widget = (
+         <cx>
+            <div>
+               <ValidationGroup invalid={bind("invalid")} disabled strict>
+                  <Validator onValidate={() => "Something is wrong..."} disabled={false} />
+               </ValidationGroup>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.equal(store.get("invalid"), false);
+   });
+});

package/src/widgets/form/ValidationGroup.ts

@@ -0,0 +1,141 @@
+import { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { Widget } from "../../ui/Widget";
+import { PureContainerBase, PureContainerConfig } from "../../ui/PureContainer";
+import { isDefined } from "../../util/isDefined";
+import { shallowEquals } from "../../util/shallowEquals";
+import { coalesce } from "../../util/coalesce";
+import { BooleanProp, Prop } from "../../ui/Prop";
+
+/** Typed context interface for form-related context properties */
+export interface FormRenderingContext extends RenderingContext {
+   parentDisabled?: boolean;
+   parentReadOnly?: boolean;
+   parentViewMode?: boolean | string;
+   parentTabOnEnterKey?: boolean;
+   parentVisited?: boolean;
+   parentStrict?: boolean;
+   parentAsterisk?: boolean;
+   validation?: { errors: ValidationErrorData[] };
+   lastFieldId?: string;
+}
+
+export interface ValidationErrorData {
+   fieldId: string;
+   message: string;
+   visited: boolean;
+   type: string;
+}
+
+export interface ValidationGroupInstance extends Instance {
+   validation: {
+      errors: ValidationErrorData[];
+   };
+   valid?: boolean;
+}
+
+export interface ValidationGroupConfig extends PureContainerConfig {
+   /** Binding used to store validation errors in the store. */
+   errors?: Prop<ValidationErrorData[]>;
+
+   /** Binding which will be set to true if all child form field are valid. */
+   valid?: BooleanProp;
+
+   /** Binding which will be set to true if any of child form field reports validation error. */
+   invalid?: BooleanProp;
+
+   /** Set to `false` to disable all inner elements that support `disabled` property. */
+   enabled?: BooleanProp;
+
+   /** Set to `true` to disable all inner elements that support `disabled` property. */
+   disabled?: BooleanProp;
+
+   /** Set to `true` to make read-only all inner elements that support `readOnly` property. */
+   readOnly?: BooleanProp;
+
+   /** Set to `true` to isolate children from participating in outer validation scopes. */
+   isolated?: BooleanProp;
+
+   /** Set to `true` to notify all children to report errors. */
+   visited?: BooleanProp;
+
+   /** Set to `true` to tab on Enter key for all children. */
+   tabOnEnterKey?: BooleanProp;
+
+   /** Set to `true` to set all child fields to view mode. */
+   viewMode?: BooleanProp;
+
+   /** Set to `true` to force children to respect disabled, readOnly, viewMode and visited flags set on the group level. */
+   strict?: BooleanProp;
+
+   /** Set to `true` to add red asterisk for all required fields inside the group. */
+   asterisk?: BooleanProp;
+}
+
+export class ValidationGroup<
+   TConfig extends ValidationGroupConfig = ValidationGroupConfig
+> extends PureContainerBase<TConfig, ValidationGroupInstance> {
+   declare errors?: Prop<ValidationErrorData[]>;
+   declare isolated?: boolean;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         errors: undefined,
+         valid: undefined,
+         invalid: undefined,
+         disabled: undefined,
+         enabled: undefined,
+         readOnly: undefined,
+         viewMode: undefined,
+         tabOnEnterKey: undefined,
+         isolated: undefined,
+         visited: undefined,
+         strict: undefined,
+         asterisk: undefined,
+      });
+   }
+
+   explore(context: FormRenderingContext, instance: ValidationGroupInstance): void {
+      if (isDefined(instance.data.enabled)) instance.data.disabled = !instance.data.enabled;
+
+      instance.validation = {
+         errors: [],
+      };
+
+      context.push("parentStrict", coalesce(instance.data.strict, context.parentStrict));
+      context.push("parentDisabled", coalesce(instance.data.disabled, context.parentDisabled));
+      context.push("parentReadOnly", coalesce(instance.data.readOnly, context.parentReadOnly));
+      context.push("parentViewMode", coalesce(instance.data.viewMode, context.parentViewMode));
+      context.push("parentTabOnEnterKey", coalesce(instance.data.tabOnEnterKey, context.parentTabOnEnterKey));
+      context.push("parentVisited", coalesce(instance.data.visited, context.parentVisited));
+      context.push("parentAsterisk", coalesce(instance.data.asterisk, context.parentAsterisk));
+      context.push("validation", instance.validation);
+
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: FormRenderingContext, instance: ValidationGroupInstance): void {
+      context.pop("validation");
+      context.pop("parentVisited");
+      context.pop("parentDisabled");
+      context.pop("parentReadOnly");
+      context.pop("parentViewMode");
+      context.pop("parentTabOnEnterKey");
+      context.pop("parentStrict");
+      context.pop("parentAsterisk");
+
+      instance.valid = instance.validation.errors.length == 0;
+      if (!instance.valid && !this.isolated && context.validation)
+         context.validation.errors.push(...instance.validation.errors);
+
+      instance.set("valid", instance.valid);
+      instance.set("invalid", !instance.valid);
+
+      if (this.errors && !shallowEquals(instance.data.errors, instance.validation.errors))
+         instance.set("errors", instance.validation.errors);
+   }
+}
+
+ValidationGroup.prototype.isolated = false;
+
+Widget.alias("validation-group", ValidationGroup);

package/src/widgets/form/Validator.ts

@@ -0,0 +1,23 @@
+import { Field } from "./Field";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+
+export class Validator extends Field {
+   declareData(...args: Record<string, unknown>[]): void {
+      return super.declareData(...args, { 
+         value: {
+            structured: true,
+         },
+         disabled: undefined,
+      });
+   }
+
+   isEmpty(data: Record<string, unknown>): boolean {
+      return false;
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): any {
+      if (!instance.state?.visited || !instance.data.error) return null;
+      return this.renderChildren(context, instance, key);
+   }
+}