cx 25.11.1 → 26.0.2

package/src/widgets/form/UploadButton.d.ts

@@ -1,34 +0,0 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface UploadButtonProps extends FieldProps {
-   /** Text description. */
-   text?: Cx.StringProp;
-
-   url?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the element. Default is 'uploadbutton'. */
-   baseClass?: string;
-
-   /** Defaults to `false`. Set to `true` to enable multiple selection. */
-   multiple?: boolean;
-
-   method?: string;
-   uploadInProgressText?: string;
-
-   /** Defaults to `false`. Set to `true` to abort uploads if the button is destroyed (unmounted). */
-   abortOnDestroy?: boolean;
-
-   /** Defines file types that are accepted for upload. */
-   accept?: Cx.StringProp;
-
-   /** Name of the icon to be put on the left side of the button. */
-   icon?: Cx.StringProp;
-
-   onUploadStarting?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => boolean) | string;
-   onUploadComplete?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => void) | string;
-   onUploadProgress?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
-   onUploadError?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
-}
-
-export class UploadButton extends Cx.Widget<UploadButtonProps> {}

package/src/widgets/form/UploadButton.js

@@ -1,213 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Icon } from "../Icon";
-import { Field } from "./Field";
-import { Url } from "../../ui/app/Url";
-import { Localization } from "../../ui/Localization";
-
-//TODO: Implement UploadStatus which will enable canceling
-
-export class UploadButton extends Field {
-   declareData() {
-      super.declareData(
-         {
-            disabled: undefined,
-            enabled: undefined,
-            text: undefined,
-            url: undefined,
-            icon: undefined,
-            accept: undefined
-         },
-         ...arguments
-      );
-   }
-
-   renderInput(context, instance, key) {
-      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);
-
-class UploadButtonComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.uploads = {};
-      this.state = {
-         progress: 100,
-         uploadKey: 0,
-      };
-   }
-
-   render() {
-      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"), children.length == 0 && CSS.state("empty"));
-      }
-
-      return (
-         <div
-            ref={(el) => {
-               this.el = el;
-            }}
-            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}
-                  multiple={widget.multiple}
-                  tabIndex={data.tabIndex}
-                  onChange={this.onFileSelected.bind(this)}
-               />
-            )}
-         </div>
-      );
-   }
-
-   onFileSelected(e) {
-      let files = e.dataTransfer ? e.dataTransfer.files : e.target ? e.target.files : [];
-      for (let i = 0; i < files.length; i++) this.uploadFile(files[i]);
-   }
-
-   componentDidMount() {
-      if (this.props.instance.data.autoFocus) this.el.focus();
-   }
-
-   componentWillUnmount() {
-      if (this.props.instance.widget.abortOnDestroy) {
-         for (let key in this.uploads) {
-            let upload = this.uploads[key];
-            upload.xhr.abort();
-         }
-      }
-   }
-
-   uploadFile(file) {
-      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, url) {
-      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() {
-      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.uploadInProgressText,
-      });
-
-      this.setState({
-         progress: Math.max(0.001, Math.floor(progress)),
-      });
-   }
-}
-
-Widget.alias("upload-button", UploadButton);

package/src/widgets/form/ValidationError.d.ts

@@ -1,10 +0,0 @@
-import * as Cx from '../../core';
-
-interface ValidationErrorProps extends Cx.WidgetProps {
-
-   /** Base CSS class to be applied to the field. Defaults to `validationerror`. */
-   baseClass?: boolean,
-
-}
-
-export class ValidationError extends Cx.Widget<ValidationErrorProps> {}

package/src/widgets/form/ValidationError.js

@@ -1,44 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-
-export class ValidationError extends Widget {
-   checkVisible(context, instance, data) {
-      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, instance) {
-      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, instance, key) {
-      var { data } = instance;
-      return (
-         <label key={key} className={data.classNames} htmlFor={data.fieldId} style={data.style}>
-            {data.errorMessage}
-         </label>
-      );
-   }
-}
-
-ValidationError.prototype.baseClass = "validationerror";
-ValidationError.prototype.styled = true;
-
-Widget.alias("validation-error", ValidationError);

package/src/widgets/form/ValidationGroup.d.ts

@@ -1,41 +0,0 @@
-import * as Cx from "../../core";
-
-export interface ValidationGroupProps extends Cx.PureContainerProps {
-   /** Binding used to store validation errors in the store. */
-   errors?: Cx.Record[];
-
-   /** Binding which will be set to true if all child form field are valid. */
-   valid?: Cx.BooleanProp;
-
-   /** Binding which will be set to true if any of child form field reports validation error. */
-   invalid?: Cx.BooleanProp;
-
-   /** Set to `false` to disable all inner elements that support `disabled` property. */
-   enabled?: Cx.BooleanProp;
-
-   /** Set to `true` to disable all inner elements that support `disabled` property. */
-   disabled?: Cx.BooleanProp;
-
-   /** Set to `true` to make read-only all inner elements that support `readOnly` property. */
-   readOnly?: Cx.BooleanProp;
-
-   /** Set to `true` to isolate children from participating in outer validation scopes. */
-   isolated?: Cx.BooleanProp;
-
-   /** Set to `true` to notify all children to report errors. */
-   visited?: Cx.BooleanProp;
-
-   /** Set to `true` to tab on Enter key for all children. */
-   tabOnEnterKey?: Cx.BooleanProp;
-
-   /** Set to `true` to set all child fields to view mode. */
-   viewMode?: Cx.BooleanProp;
-
-   /** Set to `true` to force children to respect disabled, readOnly, viewMode and visited flags set on the group level. */
-   strict?: Cx.BooleanProp;
-
-   /** Set to `true` to add red asterisk for all required fields inside the group. */
-   asterisk?: Cx.BooleanProp;
-}
-
-export class ValidationGroup extends Cx.Widget<ValidationGroupProps> {}

package/src/widgets/form/ValidationGroup.js

@@ -1,68 +0,0 @@
-import { Widget } from "../../ui/Widget";
-import { PureContainer } from "../../ui/PureContainer";
-import { isDefined } from "../../util/isDefined";
-import { shallowEquals } from "../../util/shallowEquals";
-import { coalesce } from "../../util/coalesce";
-
-export class ValidationGroup extends PureContainer {
-   declareData() {
-      return super.declareData(...arguments, {
-         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, instance) {
-      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, instance) {
-      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/ValidationGroup.spec.js

@@ -1,148 +0,0 @@
-import { Cx } from "../../ui/Cx";
-import { VDOM } from "../../ui/VDOM";
-import { Store } from "../../data/Store";
-import { HtmlElement } from "../HtmlElement";
-import { ValidationGroup } from "./ValidationGroup";
-import { Validator } from "./Validator";
-
-import renderer from "react-test-renderer";
-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 = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      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 = renderer.create(<Cx widget={widget} store={store} subscribe />);
-
-      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 = renderer.create(<Cx widget={widget} store={store} subscribe />);
-
-      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 = renderer.create(<Cx widget={widget} store={store} subscribe />);
-
-      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 = renderer.create(<Cx widget={widget} store={store} subscribe />);
-
-      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 = renderer.create(<Cx widget={widget} store={store} subscribe />);
-
-      let tree = component.toJSON();
-      assert.equal(store.get("invalid"), false);
-   });
-});

package/src/widgets/form/Validator.d.ts

@@ -1,8 +0,0 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface ValidatorProps extends FieldProps {
-   value: Cx.StructuredProp;
-}
-
-export class Validator extends Cx.Widget<ValidatorProps> {}

package/src/widgets/form/Validator.js

@@ -1,21 +0,0 @@
-import { Field } from "./Field";
-
-export class Validator extends Field {
-   declareData() {
-      return super.declareData(...arguments, {
-         value: {
-            structured: true,
-         },
-         disabled: undefined,
-      });
-   }
-
-   isEmpty(data) {
-      return false;
-   }
-
-   render(context, instance, key) {
-      if (!instance.state.visited || !instance.data.error) return;
-      return this.renderChildren(context, instance, key);
-   }
-}