cx 26.4.4 → 26.6.0

package/src/widgets/form/Field.tsx

@@ -312,6 +312,7 @@ export class Field<
     data._readOnly = data.readOnly;
     data._viewMode = data.mode === "view" || data.viewMode;
     data._tabOnEnterKey = data.tabOnEnterKey;
+    data._visited = data.visited;
     data.validationValue = this.getValidationValue(data);
     instance.parentDisabled = context.parentDisabled;
     instance.parentReadOnly = context.parentReadOnly;
@@ -366,7 +367,7 @@ export class Field<
     );
     data.visited = coalesce(
       context.parentStrict ? context.parentVisited : null,
-      data.visited,
+      data._visited,
       context.parentVisited,
     );
 

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

@@ -1,5 +1,10 @@
 import { createAccessorModelProxy } from "../../data/createAccessorModelProxy";
 import { LookupField } from "./LookupField";
+import { Store } from "../../data/Store";
+import { ValidationGroup } from "./ValidationGroup";
+import { bind } from "../../ui/bind";
+import { createTestRenderer } from "../../util/test/createTestRenderer";
+import assert from "assert";
 
 interface User {
    id: number;
@@ -90,4 +95,148 @@ describe("LookupField", () => {
          </cx>
       );
    });
+
+   describe("validateOptionExists", () => {
+      const options = [
+         { id: 1, text: "One" },
+         { id: 2, text: "Two" },
+      ];
+
+      it("reports an error when the selected value is missing from options", async () => {
+         let widget = (
+            <cx>
+               <ValidationGroup errors={bind("errors")}>
+                  <LookupField
+                     value={bind("value")}
+                     text={bind("text")}
+                     options={options}
+                     validateOptionExists
+                  />
+               </ValidationGroup>
+            </cx>
+         );
+
+         let store = new Store();
+         store.set("value", 99);
+         store.set("text", "Stale");
+
+         await createTestRenderer(store, widget);
+
+         let errors = store.get("errors");
+         assert.equal(errors.length, 1);
+         assert.equal(errors[0].message, "The selected option is no longer available.");
+      });
+
+      it("does not report an error when the selected value matches an option", async () => {
+         let widget = (
+            <cx>
+               <ValidationGroup errors={bind("errors")}>
+                  <LookupField
+                     value={bind("value")}
+                     text={bind("text")}
+                     options={options}
+                     validateOptionExists
+                  />
+               </ValidationGroup>
+            </cx>
+         );
+
+         let store = new Store();
+         store.set("value", 1);
+         store.set("text", "One");
+
+         await createTestRenderer(store, widget);
+
+         let errors = store.get("errors");
+         assert.equal(errors.length, 0);
+      });
+
+      it("does not report an error when the field is empty", async () => {
+         let widget = (
+            <cx>
+               <ValidationGroup errors={bind("errors")}>
+                  <LookupField
+                     value={bind("value")}
+                     text={bind("text")}
+                     options={options}
+                     validateOptionExists
+                  />
+               </ValidationGroup>
+            </cx>
+         );
+
+         let store = new Store();
+
+         await createTestRenderer(store, widget);
+
+         let errors = store.get("errors");
+         assert.equal(errors.length, 0);
+      });
+
+      it("does not report an error when options are not provided (server-side mode)", async () => {
+         let widget = (
+            <cx>
+               <ValidationGroup errors={bind("errors")}>
+                  <LookupField
+                     value={bind("value")}
+                     text={bind("text")}
+                     onQuery={() => []}
+                     validateOptionExists
+                  />
+               </ValidationGroup>
+            </cx>
+         );
+
+         let store = new Store();
+         store.set("value", 99);
+         store.set("text", "Stale");
+
+         await createTestRenderer(store, widget);
+
+         let errors = store.get("errors");
+         assert.equal(errors.length, 0);
+      });
+
+      it("reports an error in multiple mode when some ids are not in options", async () => {
+         let widget = (
+            <cx>
+               <ValidationGroup errors={bind("errors")}>
+                  <LookupField
+                     multiple
+                     values={bind("values")}
+                     options={options}
+                     validateOptionExists
+                  />
+               </ValidationGroup>
+            </cx>
+         );
+
+         let store = new Store();
+         store.set("values", [1, 99]);
+
+         await createTestRenderer(store, widget);
+
+         let errors = store.get("errors");
+         assert.equal(errors.length, 1);
+      });
+
+      it("does not validate by default (back-compat)", async () => {
+         let widget = (
+            <cx>
+               <ValidationGroup errors={bind("errors")}>
+                  <LookupField value={bind("value")} text={bind("text")} options={options} />
+               </ValidationGroup>
+            </cx>
+         );
+
+         let store = new Store();
+         store.set("value", 99);
+         store.set("text", "Stale");
+
+         await createTestRenderer(store, widget);
+
+         let errors = store.get("errors");
+         assert.equal(errors.length, 0);
+      });
+   });
 });

package/src/widgets/form/LookupField.tsx

@@ -117,6 +117,12 @@ interface LookupFieldBaseConfig<TOption = any> extends FieldConfig {
   /** Error message displayed if server query throws an exception. */
   queryErrorText?: string;
 
+  /** Set to `true` to report a validation error when the selected value is not present in `options`. Only applies when `options` is an array. Default is `false`. */
+  validateOptionExists?: boolean;
+
+  /** Error message displayed when the selected value is not present in `options`. */
+  invalidOptionText?: string;
+
   /** Message to be displayed if no entries match the user query. */
   noResultsText?: string;
 
@@ -292,6 +298,8 @@ export class LookupField<TOption = any, TRecord = any> extends Field<
   declare public minOptionsForSearchField: number;
   declare public loadingText: string;
   declare public queryErrorText: string;
+  declare public validateOptionExists: boolean;
+  declare public invalidOptionText: string;
   declare public noResultsText: string;
   declare public optionIdField: string;
   declare public optionTextField: string;
@@ -501,6 +509,22 @@ export class LookupField<TOption = any, TRecord = any> extends Field<
 
     (instance as DropdownInstance).lastDropdown = context.lastDropdown;
 
+    if (
+      this.validateOptionExists &&
+      isArray(data.options) &&
+      !this.isEmpty(data)
+    ) {
+      let invalid = this.multiple
+        ? isArray(data.values) && data.records!.length < data.values.length
+        : !data.options.some(($option) =>
+            areKeysEqual(
+              getOptionKey(this.keyBindings!, { $option }),
+              data.selectedKeys[0],
+            ),
+          );
+      if (invalid) data.error = this.invalidOptionText;
+    }
+
     super.prepareData(context, instance);
   }
 
@@ -604,6 +628,9 @@ LookupField.prototype.minOptionsForSearchField = 7;
 LookupField.prototype.loadingText = "Loading...";
 LookupField.prototype.queryErrorText =
   "Error occurred while querying for lookup data.";
+LookupField.prototype.validateOptionExists = false;
+LookupField.prototype.invalidOptionText =
+  "The selected option is no longer available.";
 LookupField.prototype.noResultsText = "No results found.";
 LookupField.prototype.optionIdField = "id";
 LookupField.prototype.optionTextField = "text";

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

@@ -1,8 +1,9 @@
 import { Store } from "../../data/Store";
 import { ValidationGroup } from "./ValidationGroup";
 import { Validator } from "./Validator";
+import { TextField } from "./TextField";
 import { bind } from "../../ui/bind";
-import { createTestRenderer } from "../../util/test/createTestRenderer";
+import { createTestRenderer, act } from "../../util/test/createTestRenderer";
 
 import assert from "assert";
 
@@ -107,6 +108,34 @@ describe("ValidationGroup", () => {
       assert(visited);
    });
 
+   it("visited flag changes are propagated to fields after being initialized to false", async () => {
+      let widget = (
+         <cx>
+            <ValidationGroup errors={bind("errors")} visited={bind("form.visited")}>
+               <TextField required value={bind("value1")} />
+            </ValidationGroup>
+         </cx>
+      );
+
+      let store = new Store();
+      //initializing the bound value to false used to shadow later updates
+      store.set("form.visited", false);
+
+      const component = await createTestRenderer(store, widget);
+
+      let errors = store.get("errors");
+      assert.equal(errors.length, 1);
+      assert.equal(errors[0].visited, false);
+
+      await act(async () => {
+         store.set("form.visited", true);
+      });
+
+      errors = store.get("errors");
+      assert.equal(errors.length, 1);
+      assert.equal(errors[0].visited, true);
+   });
+
    it("disabled flag can be overruled by the field props", async () => {
       let widget = (
          <cx>

package/src/widgets/form/Wheel.tsx

@@ -65,6 +65,10 @@ Wheel.prototype.baseClass = "wheel";
 Wheel.prototype.size = 3;
 Wheel.prototype.styled = true;
 
+/** A cyclic wheel renders its option list this many times, leaving scroll
+ * headroom on both sides of the centre copy. */
+export const WHEEL_BUFFER_COPIES = 3;
+
 export interface WheelComponentProps {
    size: number;
    children: React.ReactNode[];
@@ -74,6 +78,11 @@ export interface WheelComponentProps {
    className?: string;
    style?: React.CSSProperties;
    index?: number;
+   /** Set to render the option list as an endlessly scrolling wheel. The list
+    * is rendered `WHEEL_BUFFER_COPIES` times and the wheel snaps to whichever
+    * copy of the selected value is nearest its current position, so a wrap
+    * scrolls seamlessly into the adjacent identical copy. */
+   cycle?: boolean;
    onChange: (newIndex: number) => void;
    onPipeKeyDown?: (fn: (e: React.KeyboardEvent) => void) => void;
    onMouseDown?: () => void;
@@ -109,23 +118,30 @@ export class WheelComponent extends VDOM.Component<WheelComponentProps, WheelCom
    scrollRef: (el: HTMLDivElement | null) => void;
 
    render(): React.ReactNode {
-      let { size, children, CSS, baseClass, active, className, style, onMouseDown } = this.props;
+      let { size, children, CSS, baseClass, active, className, style, onMouseDown, cycle } = this.props;
       let optionClass = CSS.element(baseClass, "option");
       let dummyClass = CSS.element(baseClass, "option", { dummy: true });
 
+      // A cyclic wheel repeats the option list so it can scroll past either end.
+      let options = children;
+      if (cycle) {
+         options = [];
+         for (let i = 0; i < WHEEL_BUFFER_COPIES; i++) options.push(...children);
+      }
+
       let tpad = [],
          bpad = [],
          padSize = 0;
 
       for (let i = 0; i < (size - 1) / 2; i++) {
-         tpad.push({ key: -1 - i, child: children[0], cls: dummyClass });
-         bpad.push({ key: -100 - i, child: children[0], cls: dummyClass });
+         tpad.push({ key: -1 - i, child: options[0], cls: dummyClass });
+         bpad.push({ key: -100 - i, child: options[0], cls: dummyClass });
          padSize++;
       }
 
       let displayedOptions = [
          ...tpad,
-         ...children.map((c, i) => ({
+         ...options.map((c, i) => ({
             key: i,
             child: c,
             cls: optionClass,
@@ -228,7 +244,19 @@ export class WheelComponent extends VDOM.Component<WheelComponentProps, WheelCom
    }
 
    UNSAFE_componentWillReceiveProps(props: WheelComponentProps): void {
-      this.index = props.index || 0;
+      let newIndex = props.index || 0;
+      // A cyclic wheel renders the option list several times, so the same value
+      // appears in several copies. Snap to the copy nearest the wheel's current
+      // position rather than the one `props.index` names — a wrap then scrolls
+      // one item into the adjacent (identical) copy with no jump, instead of
+      // animating all the way back to the centre copy.
+      if (props.cycle) {
+         let period = props.children.length;
+         let value = ((newIndex % period) + period) % period;
+         newIndex = value + period * Math.round((this.index - value) / period);
+         newIndex = Math.max(0, Math.min(period * WHEEL_BUFFER_COPIES - 1, newIndex));
+      }
+      this.index = newIndex;
       this.scrollTo();
    }
 
@@ -272,8 +300,9 @@ export class WheelComponent extends VDOM.Component<WheelComponentProps, WheelCom
    }
 
    select(newIndex: number): void {
-      let { children } = this.props;
-      newIndex = Math.max(0, Math.min(children.length - 1, newIndex));
+      let { children, cycle } = this.props;
+      let length = children.length * (cycle ? WHEEL_BUFFER_COPIES : 1);
+      newIndex = Math.max(0, Math.min(length - 1, newIndex));
       if (this.index !== newIndex) {
          this.index = newIndex;
          this.props.onChange(newIndex);