cx 24.0.2 → 24.2.0

package/src/widgets/form/Field.js

@@ -15,6 +15,7 @@ import { tooltipMouseLeave, tooltipMouseMove } from "../overlay/tooltip-ops";
 import { coalesce } from "../../util/coalesce";
 import { isUndefined } from "../../util/isUndefined";
 import { shallowEquals } from "../../util/shallowEquals";
+import { FieldIcon } from "./FieldIcon";
 
 export class Field extends PureContainer {
    declareData() {
@@ -36,11 +37,16 @@ export class Field extends PureContainer {
             tabIndex: undefined,
             validationParams: { structured: true },
          },
-         ...arguments
+         ...arguments,
       );
    }
 
    init() {
+      this.inputStyle = parseStyle(this.inputStyle);
+      super.init();
+   }
+
+   initComponents(context, instance) {
       if (this.validationMode == "tooltip" && isUndefined(this.errorTooltip)) {
          this.errorTooltip = {
             text: { bind: "$error" },
@@ -92,15 +98,20 @@ export class Field extends PureContainer {
          this.label = Label.create(labelConfig);
       }
 
-      this.inputStyle = parseStyle(this.inputStyle);
+      if (this.icon != null) {
+         let iconConfig = {
+            className: this.CSS.element(this.baseClass, "icon"),
+         };
+         if (isSelector(this.icon)) iconConfig.name = this.icon;
+         else Object.assign(iconConfig, this.icon);
 
-      super.init();
-   }
+         this.icon = FieldIcon.create(iconConfig);
+      }
 
-   initComponents(context, instance) {
       return super.initComponents(...arguments, {
          label: this.label,
          help: this.help,
+         icon: this.icon,
       });
    }
 
@@ -148,22 +159,22 @@ export class Field extends PureContainer {
       data.disabled = coalesce(
          context.parentStrict ? context.parentDisabled : null,
          data._disabled,
-         context.parentDisabled
+         context.parentDisabled,
       );
       data.readOnly = coalesce(
          context.parentStrict ? context.parentReadOnly : null,
          data._readOnly,
-         context.parentReadOnly
+         context.parentReadOnly,
       );
       data.viewMode = coalesce(
          context.parentStrict ? context.parentViewMode : null,
          data._viewMode,
-         context.parentViewMode
+         context.parentViewMode,
       );
       data.tabOnEnterKey = coalesce(
          context.parentStrict ? context.parentTabOnEnterKey : null,
          data._tabOnEnterKey,
-         context.parentTabOnEnterKey
+         context.parentTabOnEnterKey,
       );
       data.visited = coalesce(context.parentStrict ? context.parentVisited : null, data.visited, context.parentVisited);
 
@@ -312,6 +323,10 @@ export class Field extends PureContainer {
       if (instance.components.help) return getContent(instance.components.help.render(context, key));
    }
 
+   renderIcon(context, instance, key) {
+      if (instance.components.icon) return getContent(instance.components.icon.render(context, key));
+   }
+
    formatValue(context, { data }) {
       return data.text || data.value;
    }

package/src/widgets/form/FieldIcon.js

@@ -0,0 +1,42 @@
+import { Widget } from "../../ui/Widget";
+import { Icon } from "../Icon";
+import { tooltipMouseLeave, tooltipMouseMove } from "../overlay/tooltip-ops";
+
+export class FieldIcon extends Widget {
+   declareData(...args) {
+      super.declareData(...args, {
+         name: undefined,
+      });
+   }
+
+   render(context, instance, key) {
+      let { data } = instance;
+      if (!data.name) return null;
+
+      let onClick, onMouseMove, onMouseLeave;
+
+      if (this.onClick)
+         onClick = (e) => {
+            instance.invoke("onClick", e, instance);
+         };
+
+      if (this.tooltip) {
+         onMouseLeave = (e) => {
+            tooltipMouseLeave(e, instance, this.tooltip);
+         };
+         onMouseMove = (e) => {
+            tooltipMouseMove(e, instance, this.tooltip);
+         };
+      }
+
+      return Icon.render(data.name, {
+         className: data.classNames,
+         style: data.style,
+         onClick,
+         onMouseMove,
+         onMouseLeave,
+      });
+   }
+}
+
+FieldIcon.prototype.styled = true;

package/src/widgets/form/Label.js

@@ -1,88 +1,88 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { HtmlElement } from "../HtmlElement";
-import { FocusManager } from "../../ui/FocusManager";
-import { isArray } from "../../util/isArray";
-import { coalesce } from "../../util/coalesce";
-
-export class Label extends HtmlElement {
-   declareData() {
-      super.declareData(...arguments, {
-         required: undefined,
-         disabled: undefined,
-         htmlFor: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         disabled: data.disabled,
-      };
-      data._disabled = data.disabled;
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      let { data } = instance;
-
-      if (!data.htmlFor) data.htmlFor = context.lastFieldId;
-
-      data.disabled = data.stateMods.disabled = coalesce(
-         context.parentStrict ? context.parentDisabled : null,
-         data._disabled,
-         context.parentDisabled
-      );
-
-      data.asterisk = context.parentAsterisk || this.asterisk;
-
-      if (instance.cache("disabled", data.disabled) || instance.cache("asterisk", data.asterisk)) {
-         instance.markShouldUpdate(context);
-         this.prepareCSS(context, instance);
-      }
-
-      super.explore(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "asterisk":
-         case "required":
-            return false;
-      }
-      return super.isValidHtmlAttribute(attrName);
-   }
-
-   attachProps(context, instance, props) {
-      super.attachProps(context, instance, props);
-
-      let { data } = instance;
-
-      if (data.htmlFor) {
-         props.htmlFor = data.htmlFor;
-
-         if (!props.onClick)
-            props.onClick = () => {
-               //additional focus for LookupFields which are not input based
-               let el = document.getElementById(instance.data.htmlFor);
-               if (el) FocusManager.focusFirst(el);
-            };
-      }
-
-      if (!props.id && data.htmlFor) props.id = `${data.htmlFor}-label`;
-
-      if (data.required && data.asterisk) {
-         if (!isArray(props.children)) props.children = [props.children];
-         props.children.push(" ");
-         props.children.push(
-            <span key="asterisk" className={this.CSS.element(this.baseClass, "asterisk")}>
-               *
-            </span>
-         );
-      }
-   }
-}
-
-Label.prototype.baseClass = "label";
-Label.prototype.tag = "label";
-Label.prototype.asterisk = false;
+import { Widget, VDOM } from "../../ui/Widget";
+import { HtmlElement } from "../HtmlElement";
+import { FocusManager } from "../../ui/FocusManager";
+import { isArray } from "../../util/isArray";
+import { coalesce } from "../../util/coalesce";
+
+export class Label extends HtmlElement {
+   declareData() {
+      super.declareData(...arguments, {
+         required: undefined,
+         disabled: undefined,
+         htmlFor: undefined,
+      });
+   }
+
+   prepareData(context, instance) {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         disabled: data.disabled,
+      };
+      data._disabled = data.disabled;
+      super.prepareData(context, instance);
+   }
+
+   explore(context, instance) {
+      let { data } = instance;
+
+      if (!data.htmlFor) data.htmlFor = context.lastFieldId;
+
+      data.disabled = data.stateMods.disabled = coalesce(
+         context.parentStrict ? context.parentDisabled : null,
+         data._disabled,
+         context.parentDisabled
+      );
+
+      data.asterisk = context.parentAsterisk || this.asterisk;
+
+      if (instance.cache("disabled", data.disabled) || instance.cache("asterisk", data.asterisk)) {
+         instance.markShouldUpdate(context);
+         this.prepareCSS(context, instance);
+      }
+
+      super.explore(context, instance);
+   }
+
+   isValidHtmlAttribute(attrName) {
+      switch (attrName) {
+         case "asterisk":
+         case "required":
+            return false;
+      }
+      return super.isValidHtmlAttribute(attrName);
+   }
+
+   attachProps(context, instance, props) {
+      super.attachProps(context, instance, props);
+
+      let { data } = instance;
+
+      if (data.htmlFor) {
+         props.htmlFor = data.htmlFor;
+
+         if (!props.onClick)
+            props.onClick = () => {
+               //additional focus for LookupFields which are not input based
+               let el = document.getElementById(instance.data.htmlFor);
+               if (el) FocusManager.focusFirst(el);
+            };
+      }
+
+      if (!props.id && data.htmlFor) props.id = `${data.htmlFor}-label`;
+
+      if (data.required && data.asterisk) {
+         if (!isArray(props.children)) props.children = [props.children];
+         props.children.push(" ");
+         props.children.push(
+            <span key="asterisk" className={this.CSS.element(this.baseClass, "asterisk")}>
+               *
+            </span>
+         );
+      }
+   }
+}
+
+Label.prototype.baseClass = "label";
+Label.prototype.tag = "label";
+Label.prototype.asterisk = false;

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

@@ -1,174 +1,173 @@
-import { Instance } from "./../../ui/Instance";
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-export interface LookupBinding {
-   local: string;
-   remote: string;
-   key?: boolean;
-}
-
-interface LookupFieldProps extends FieldProps {
-   /** Defaults to `false`. Set to `true` to enable multiple selection. */
-   multiple?: Cx.BooleanProp;
-
-   /** Selected value. Used only if `multiple` is set to `false`. */
-   value?: Cx.Prop<number | string>;
-
-   /** A list of selected ids. Used only if `multiple` is set to `true`. */
-   values?: Cx.Prop<any[]>;
-
-   /** A list of selected records. Used only if `multiple` is set to `true`. */
-   records?: Cx.RecordsProp;
-
-   /** Text associated with the selection. Used only if `multiple` is set to `false`. */
-   text?: Cx.StringProp;
-
-   /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp;
-
-   /** Default text displayed when the field is empty. */
-   placeholder?: Cx.StringProp;
-
-   /** A list of available options. */
-   options?: Cx.RecordsProp;
-
-   /**
-    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property.
-    * No effect if `multiple` is used. Default value is `false`.
-    */
-   hideClear?: boolean;
-
-   /**
-    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property.
-    * No effect if `multiple` is used. Default value is `true`.
-    */
-   showClear?: boolean;
-
-   /**
-    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
-    */
-   alwaysShowClear?: boolean;
-
-   /** Base CSS class to be applied to the field. Defaults to `lookupfield`. */
-   baseClass?: string;
-
-   /* TODO: Check type */
-
-   /** Additional config to be applied to all items */
-   itemsConfig?: any;
-
-   /**
-    * An array of objects describing the mapping of option data to store data.
-    * Each entry must define `local`, `remote` bindings. `key: true` is used to indicate fields that are used in the primary key.
-    */
-   bindings?: LookupBinding[];
-
-   /** A delay in milliseconds between the moment the user stops typing and when tha query is made. Default value is `150`. */
-   queryDelay?: number;
-
-   /** Minimal number of characters required before query is made. */
-   minQueryLength?: number;
-
-   /** Set to `true` to hide the search field. */
-   hideSearchField?: boolean;
-
-   /**
-    * Number of options required to show the search field.
-    * If there are only a few options, there is no need for search. Defaults to `7`.
-    */
-   minOptionsForSearchField?: number;
-
-   /** Text to display while data is being loaded. */
-   loadingText?: string;
-
-   /** Error message displayed to the user if server query throws an exception. */
-   queryErrorText?: string;
-
-   /** Message to be displayed if no entries match the user query. */
-   noResultsText?: string;
-
-   /** Name of the field which holds the id of the option. Default value is `id`. */
-   optionIdField?: string;
-
-   /** Name of the field which holds the display text of the option. Default value is `text`. */
-   optionTextField?: string;
-
-   /**
-    * Available only in `multiple` selection mode and without custom `bindings`.
-    * Name of the field to store id of the selected value. Default value is `id`.
-    */
-   valueIdField?: string;
-
-   /**
-    * Available only in `multiple` selection mode.
-    * Name of the field to store display text of the selected value. Default value is `text`.
-    */
-   valueTextField?: string;
-
-   /**
-    * If `true` `onQuery` will be called only once to fetch all options.
-    * After that options are filtered client-side.
-    */
-   fetchAll?: boolean;
-
-   /**
-    * If this flag is set along with `fetchAll`, fetched options are cached for the lifetime of the widget.
-    * Otherwise, data is fetched whenever the dropdown is shown.
-    */
-   cacheAll?: boolean;
-
-   /** Close the dropdown after selection. Default is `true`. */
-   closeOnSelect?: boolean;
-
-   /** Mesasge to be displayed to the user if the entered search query is too short. */
-   minQueryLengthMessageText?: string;
-
-   /** Name of the icon to be put on the left side of the input. */
-   icon?: Cx.StringProp;
-
-   /** Query function. */
-   onQuery?: (
-      query: string | { query: string; page: number; pageSize: number },
-      instance: Instance
-   ) => Cx.Record[] | Promise<Cx.Record>;
-
-   /** Set to true to sort dropdown options. */
-   sort?: boolean;
-
-   /** Additional list options, such as grouping configuration, custom sorting, etc. */
-   listOptions?: Cx.Config;
-
-   /** Set to true to show the dropdown immediately after the component has mounted.
-    * This is commonly used for cell editing in grids. */
-   autoOpen?: Cx.BooleanProp;
-
-   /** Set to true to allow enter key events to be propagated. This is useful for submitting forms or closing grid cell editors. */
-   submitOnEnterKey?: Cx.BooleanProp;
-
-   /** Set to true to allow dropdown enter key events to be propagated. This is useful for submitting forms on dropdown enter key selection. */
-   submitOnDropdownEnterKey?: Cx.BooleanProp;
-
-   /** Defaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp;
-
-   /** Set to `true` to enable loading of additional lookup options when the scroll is reaching the end. */
-   infinite?: boolean;
-
-   /** Number of additional items to be loaded in `infinite` mode. Default is 100. */
-   pageSize?: number;
-
-   /** Set to `true` to allow quick selection of all displayed lookup items on `ctrl + a` keys combination.  */
-   quickSelectAll?: boolean;
-
-   /** Parameters that affect filtering. */
-   filterParams?: Cx.StructuredProp;
-
-   /** Callback to create a filter function for given filter params. */
-   onCreateVisibleOptionsFilter?: (filterParams: any, instance?: Instance) => (record: Record) => boolean;
-
-   /** Used in multiple selection lookups in combination with records, to construct the display text out of multiple fields or when additional formatting is needed. */
-   onGetRecordDisplayText?: (record: any, instance?: Instance) => string;
-}
-
-export class LookupField extends Cx.Widget<LookupFieldProps> {}
+import { Instance } from "./../../ui/Instance";
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
+
+export interface LookupBinding {
+   local: string;
+   remote: string;
+   key?: boolean;
+}
+
+interface LookupFieldProps<T = unknown> extends FieldProps {
+   /** Defaults to `false`. Set to `true` to enable multiple selection. */
+   multiple?: Cx.BooleanProp;
+
+   /** Selected value. Used only if `multiple` is set to `false`. */
+   value?: Cx.Prop<number | string>;
+
+   /** A list of selected ids. Used only if `multiple` is set to `true`. */
+   values?: Cx.Prop<any[]>;
+
+   /** A list of selected records. Used only if `multiple` is set to `true`. */
+   records?: Cx.RecordsProp;
+
+   /** Text associated with the selection. Used only if `multiple` is set to `false`. */
+   text?: Cx.StringProp;
+
+   /** The opposite of `disabled`. */
+   enabled?: Cx.BooleanProp;
+
+   /** Default text displayed when the field is empty. */
+   placeholder?: Cx.StringProp;
+
+   /** A list of available options. */
+   options?: Cx.Prop<T[]>;
+
+   /**
+    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property.
+    * No effect if `multiple` is used. Default value is `false`.
+    */
+   hideClear?: boolean;
+
+   /**
+    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property.
+    * No effect if `multiple` is used. Default value is `true`.
+    */
+   showClear?: boolean;
+
+   /**
+    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
+    */
+   alwaysShowClear?: boolean;
+
+   /** Base CSS class to be applied to the field. Defaults to `lookupfield`. */
+   baseClass?: string;
+
+   /* TODO: Check type */
+
+   /** Additional config to be applied to all items */
+   itemsConfig?: any;
+
+   /**
+    * An array of objects describing the mapping of option data to store data.
+    * Each entry must define `local`, `remote` bindings. `key: true` is used to indicate fields that are used in the primary key.
+    */
+   bindings?: LookupBinding[];
+
+   /** A delay in milliseconds between the moment the user stops typing and when tha query is made. Default value is `150`. */
+   queryDelay?: number;
+
+   /** Minimal number of characters required before query is made. */
+   minQueryLength?: number;
+
+   /** Set to `true` to hide the search field. */
+   hideSearchField?: boolean;
+
+   /**
+    * Number of options required to show the search field.
+    * If there are only a few options, there is no need for search. Defaults to `7`.
+    */
+   minOptionsForSearchField?: number;
+
+   /** Text to display while data is being loaded. */
+   loadingText?: string;
+
+   /** Error message displayed to the user if server query throws an exception. */
+   queryErrorText?: string;
+
+   /** Message to be displayed if no entries match the user query. */
+   noResultsText?: string;
+
+   /** Name of the field which holds the id of the option. Default value is `id`. */
+   optionIdField?: string;
+
+   /** Name of the field which holds the display text of the option. Default value is `text`. */
+   optionTextField?: string;
+
+   /**
+    * Available only in `multiple` selection mode and without custom `bindings`.
+    * Name of the field to store id of the selected value. Default value is `id`.
+    */
+   valueIdField?: string;
+
+   /**
+    * Available only in `multiple` selection mode.
+    * Name of the field to store display text of the selected value. Default value is `text`.
+    */
+   valueTextField?: string;
+
+   /**
+    * If `true` `onQuery` will be called only once to fetch all options.
+    * After that options are filtered client-side.
+    */
+   fetchAll?: boolean;
+
+   /**
+    * If this flag is set along with `fetchAll`, fetched options are cached for the lifetime of the widget.
+    * Otherwise, data is fetched whenever the dropdown is shown.
+    */
+   cacheAll?: boolean;
+
+   /** Close the dropdown after selection. Default is `true`. */
+   closeOnSelect?: boolean;
+
+   /** Mesasge to be displayed to the user if the entered search query is too short. */
+   minQueryLengthMessageText?: string;
+
+   /** Name or configuration of the icon to be put on the left side of the input.  */
+   icon?: Cx.StringProp | Cx.Record;
+
+   /** Query function. */
+   onQuery?:
+      | string
+      | ((query: string | { query: string; page: number; pageSize: number }, instance: Instance) => T[] | Promise<T[]>);
+
+   /** Set to true to sort dropdown options. */
+   sort?: boolean;
+
+   /** Additional list options, such as grouping configuration, custom sorting, etc. */
+   listOptions?: Cx.Config;
+
+   /** Set to true to show the dropdown immediately after the component has mounted.
+    * This is commonly used for cell editing in grids. */
+   autoOpen?: Cx.BooleanProp;
+
+   /** Set to true to allow enter key events to be propagated. This is useful for submitting forms or closing grid cell editors. */
+   submitOnEnterKey?: Cx.BooleanProp;
+
+   /** Set to true to allow dropdown enter key events to be propagated. This is useful for submitting forms on dropdown enter key selection. */
+   submitOnDropdownEnterKey?: Cx.BooleanProp;
+
+   /** Defaults to `false`. Used to make the field read-only. */
+   readOnly?: Cx.BooleanProp;
+
+   /** Set to `true` to enable loading of additional lookup options when the scroll is reaching the end. */
+   infinite?: boolean;
+
+   /** Number of additional items to be loaded in `infinite` mode. Default is 100. */
+   pageSize?: number;
+
+   /** Set to `true` to allow quick selection of all displayed lookup items on `ctrl + a` keys combination.  */
+   quickSelectAll?: boolean;
+
+   /** Parameters that affect filtering. */
+   filterParams?: Cx.StructuredProp;
+
+   /** Callback to create a filter function for given filter params. */
+   onCreateVisibleOptionsFilter?: (filterParams: any, instance?: Instance) => (record: T) => boolean;
+
+   /** Used in multiple selection lookups in combination with records, to construct the display text out of multiple fields or when additional formatting is needed. */
+   onGetRecordDisplayText?: (record: T, instance?: Instance) => string;
+}
+
+export class LookupField<T = unknown> extends Cx.Widget<LookupFieldProps<T>> {}