cx 24.4.8 → 24.5.0

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

@@ -1,41 +1,41 @@
-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> {}
+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 +1,68 @@
-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);
+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 +1,148 @@
-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);
-   });
-});
+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 +1,8 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface ValidatorProps extends FieldProps {
-   value: Cx.StructuredProp;
-}
-
-export class Validator extends Cx.Widget<ValidatorProps> {}
+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 +1,21 @@
-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);
-   }
-}
+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);
+   }
+}