cx 24.9.1 → 24.9.3

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

@@ -1,96 +1,96 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface NumberFieldProps extends FieldProps {
-   /** Value of the input. */
-   value?: Cx.NumberProp;
-
-   /** Defaults to false. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp;
-
-   /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp;
-
-   /** Default text displayed when the field is empty. */
-   placeholder?: Cx.StringProp;
-
-   /** Template used to format the value. Examples: `ps` - percentage sign; `n;2` - two decimals.
-    * By default, number formatting is applied with optional maximum decimal precision. */
-   format?: Cx.StringProp;
-
-   /** Minimum number value. */
-   minValue?: Cx.NumberProp;
-
-   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
-   minExclusive?: Cx.BooleanProp;
-
-   /** Maximum number value. */
-   maxValue?: Cx.NumberProp;
-
-   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
-   maxExclusive?: Cx.BooleanProp;
-
-   /** When specified, values lower than `minValue` or higher than `maxValue` will be constrained to `minValue` that is, `maxValue`, respectively. */
-   constrain?: Cx.BooleanProp;
-
-   /**
-    * Percentage used to calculate the increment when it's not explicitly specified.
-    * Default value is `0.1` (10%).
-    */
-   incrementPercentage?: Cx.NumberProp;
-
-   /** Increment/decrement value when using arrow keys or mouse wheel. */
-   increment?: Cx.NumberProp;
-
-   /** Increment/decrement value when using arrow keys or mouse wheel. */
-   step?: number;
-
-   /** Base CSS class to be applied to the field. Defaults to `numberfield`. */
-   baseClass?: string;
-
-   /** Round values to the nearest tick. Default is `true`. */
-   snapToIncrement?: boolean;
-
-   /** Name or configuration of the icon to be put on the left side of the input.  */
-   icon?: Cx.StringProp | Cx.Record;
-
-   /** Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property. Default value is `true`. */
-   showClear?: boolean;
-
-   /** Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property. Default value is `false`. */
-   hideClear?: boolean;
-
-   /**
-    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
-    */
-   alwaysShowClear?: boolean;
-
-   /** Defaults to `input`. Other permitted values are `enter` and `blur`. Multiple values should be separated by space, .e.g. 'enter blur'. */
-   reactOn?: string;
-
-   /** Defaults to `text`. Other permitted value is `password`. */
-   inputType?: "text" | "password";
-
-   /** Maximum value error text. */
-   maxValueErrorText?: string;
-
-   /** Maximum exclusive value error text. */
-   maxExclusiveErrorText?: string;
-
-   /** Minimum value error text. */
-   minValueErrorText?: string;
-
-   /** Minimum exclusive value error text. */
-   minExclusiveErrorText?: string;
-
-   /** Invalid input error text. */
-   inputErrorText?: string;
-
-   /** A scale used to define mapping between displayed and stored values. E.g. 0.01 for percentages. DV = (SV - OFFSET) / SCALE */
-   scale?: number;
-
-   /** Offset to define mapping between displayed and stored values. DV = (SV - OFFSET) / SCALE */
-   offset?: number;
-}
-
-export class NumberField extends Cx.Widget<NumberFieldProps> {}
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
+
+interface NumberFieldProps extends FieldProps {
+   /** Value of the input. */
+   value?: Cx.NumberProp;
+
+   /** Defaults to false. Used to make the field read-only. */
+   readOnly?: Cx.BooleanProp;
+
+   /** The opposite of `disabled`. */
+   enabled?: Cx.BooleanProp;
+
+   /** Default text displayed when the field is empty. */
+   placeholder?: Cx.StringProp;
+
+   /** Template used to format the value. Examples: `ps` - percentage sign; `n;2` - two decimals.
+    * By default, number formatting is applied with optional maximum decimal precision. */
+   format?: Cx.StringProp;
+
+   /** Minimum number value. */
+   minValue?: Cx.NumberProp;
+
+   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
+   minExclusive?: Cx.BooleanProp;
+
+   /** Maximum number value. */
+   maxValue?: Cx.NumberProp;
+
+   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
+   maxExclusive?: Cx.BooleanProp;
+
+   /** When specified, values lower than `minValue` or higher than `maxValue` will be constrained to `minValue` that is, `maxValue`, respectively. */
+   constrain?: Cx.BooleanProp;
+
+   /**
+    * Percentage used to calculate the increment when it's not explicitly specified.
+    * Default value is `0.1` (10%).
+    */
+   incrementPercentage?: Cx.NumberProp;
+
+   /** Increment/decrement value when using arrow keys or mouse wheel. */
+   increment?: Cx.NumberProp;
+
+   /** Increment/decrement value when using arrow keys or mouse wheel. */
+   step?: number;
+
+   /** Base CSS class to be applied to the field. Defaults to `numberfield`. */
+   baseClass?: string;
+
+   /** Round values to the nearest tick. Default is `true`. */
+   snapToIncrement?: boolean;
+
+   /** Name or configuration of the icon to be put on the left side of the input.  */
+   icon?: Cx.StringProp | Cx.Record;
+
+   /** Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property. Default value is `true`. */
+   showClear?: boolean;
+
+   /** Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property. Default value is `false`. */
+   hideClear?: boolean;
+
+   /**
+    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
+    */
+   alwaysShowClear?: boolean;
+
+   /** Defaults to `input`. Other permitted values are `enter` and `blur`. Multiple values should be separated by space, .e.g. 'enter blur'. */
+   reactOn?: string;
+
+   /** Defaults to `text`. Other permitted value is `password`. */
+   inputType?: "text" | "password";
+
+   /** Maximum value error text. */
+   maxValueErrorText?: string;
+
+   /** Maximum exclusive value error text. */
+   maxExclusiveErrorText?: string;
+
+   /** Minimum value error text. */
+   minValueErrorText?: string;
+
+   /** Minimum exclusive value error text. */
+   minExclusiveErrorText?: string;
+
+   /** Invalid input error text. */
+   inputErrorText?: string;
+
+   /** A scale used to define mapping between displayed and stored values. E.g. 0.01 for percentages. DV = (SV - OFFSET) / SCALE */
+   scale?: number;
+
+   /** Offset to define mapping between displayed and stored values. DV = (SV - OFFSET) / SCALE */
+   offset?: number;
+}
+
+export class NumberField extends Cx.Widget<NumberFieldProps> {}

package/src/widgets/form/NumberField.js

@@ -249,7 +249,7 @@ class Input extends VDOM.Component {
    }
 
    componentWillUnmount() {
-      if (this.input == getActiveElement()) {
+      if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
          this.onChange({ target: { value: this.input.value } }, "blur");
       }
       tooltipParentWillUnmount(this.props.instance);

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

@@ -1,37 +1,37 @@
-import * as Cx from '../../core';
-import { FieldProps } from './Field';
-
-interface RadioProps extends FieldProps {
-
-   /** Selected value. If the value is equal to `option`, the radio button appears checked. */
-   value?: Cx.Prop< number | string | boolean >,
-
-   /** Selected value. If the value is equal to `option`, the radio button appears checked. */
-   selection?: Cx.Prop< number | string | boolean >,
-
-   /** Value to be written into `value` if radio button is clicked. */
-   option?: Cx.Prop< number | string | boolean >,
-
-   /** Defaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp,
-
-   /** Text description. */
-   text?: Cx.StringProp,
-
-   /** Base CSS class to be applied to the field. Defaults to `radio`. */
-   baseClass?: string,
-
-   /** 
-    * Use native radio HTML element (`<input type="radio"/>`). 
-    * Default is `false`. Native radio buttons are difficult to style.
-    */
-   native?: boolean,
-
-   /**
-    * Set to `true` to set the make the radio initially selected.
-    */
-   default?: boolean
-
-}
-
-export class Radio extends Cx.Widget<RadioProps> {}
+import * as Cx from '../../core';
+import { FieldProps } from './Field';
+
+interface RadioProps extends FieldProps {
+
+   /** Selected value. If the value is equal to `option`, the radio button appears checked. */
+   value?: Cx.Prop< number | string | boolean >,
+
+   /** Selected value. If the value is equal to `option`, the radio button appears checked. */
+   selection?: Cx.Prop< number | string | boolean >,
+
+   /** Value to be written into `value` if radio button is clicked. */
+   option?: Cx.Prop< number | string | boolean >,
+
+   /** Defaults to `false`. Used to make the field read-only. */
+   readOnly?: Cx.BooleanProp,
+
+   /** Text description. */
+   text?: Cx.StringProp,
+
+   /** Base CSS class to be applied to the field. Defaults to `radio`. */
+   baseClass?: string,
+
+   /** 
+    * Use native radio HTML element (`<input type="radio"/>`). 
+    * Default is `false`. Native radio buttons are difficult to style.
+    */
+   native?: boolean,
+
+   /**
+    * Set to `true` to set the make the radio initially selected.
+    */
+   default?: boolean
+
+}
+
+export class Radio extends Cx.Widget<RadioProps> {}

package/src/widgets/form/Radio.js

@@ -1,188 +1,188 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Field, getFieldTooltip } from "./Field";
-import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { KeyCode } from "../../util/KeyCode";
-import { isUndefined } from "../../util/isUndefined";
-
-export class Radio extends Field {
-   declareData() {
-      super.declareData(
-         {
-            value: undefined,
-            selection: undefined,
-            option: undefined,
-            disabled: undefined,
-            enabled: undefined,
-            readOnly: undefined,
-            required: undefined,
-            text: undefined,
-         },
-         ...arguments
-      );
-   }
-
-   init() {
-      if (this.selection) this.value = this.selection;
-
-      super.init();
-   }
-
-   formatValue(context, { data }) {
-      return data.text;
-   }
-
-   prepareData(context, instance) {
-      super.prepareData(...arguments);
-      let { data } = instance;
-      data.checked = data.value === data.option;
-      if (this.default && isUndefined(data.value)) instance.set("value", data.option);
-   }
-
-   renderValue(context, { data }) {
-      if (data.value === data.option) return super.renderValue(...arguments);
-      return null;
-   }
-
-   renderWrap(context, instance, key, content) {
-      var { data } = instance;
-      return (
-         <label
-            key={key}
-            className={data.classNames}
-            style={data.style}
-            onMouseDown={stopPropagation}
-            onTouchStart={stopPropagation}
-            onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
-            onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
-            onClick={(e) => {
-               this.handleClick(e, instance);
-            }}
-            htmlFor={data.id}
-         >
-            {content}
-            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-         </label>
-      );
-   }
-
-   renderNativeCheck(context, instance) {
-      var { CSS, baseClass } = this;
-      var { data } = instance;
-      return (
-         <input
-            key="input"
-            className={CSS.element(baseClass, "radio")}
-            id={data.id}
-            type="radio"
-            checked={data.checked}
-            disabled={data.disabled}
-            {...data.inputAttrs}
-            onClick={stopPropagation}
-            onChange={(e) => {
-               this.handleChange(e, instance);
-            }}
-         />
-      );
-   }
-
-   renderCheck(context, instance) {
-      return <RadioCmp key="check" instance={instance} data={instance.data} />;
-   }
-
-   renderInput(context, instance, key) {
-      var { data } = instance;
-      var text = data.text || this.renderChildren(context, instance);
-      var { CSS, baseClass } = this;
-      return this.renderWrap(context, instance, key, [
-         this.native ? this.renderNativeCheck(context, instance) : this.renderCheck(context, instance),
-         text ? (
-            <div key="text" className={CSS.element(baseClass, "text")}>
-               {text}
-            </div>
-         ) : (
-            <span key="baseline" className={CSS.element(baseClass, "baseline")}>
-               &nbsp;
-            </span>
-         ),
-      ]);
-   }
-
-   handleClick(e, instance) {
-      if (this.native) e.stopPropagation();
-      else {
-         var el = document.getElementById(instance.data.id);
-         if (el) el.focus();
-         e.preventDefault();
-         this.handleChange(e, instance);
-      }
-   }
-
-   handleChange(e, instance) {
-      var { data } = instance;
-      if (data.disabled || data.readOnly || data.viewMode) return;
-      instance.set("value", data.option);
-   }
-}
-
-Radio.prototype.baseClass = "radio";
-Radio.prototype.native = false;
-Radio.prototype.default = false;
-
-Widget.alias("radio", Radio);
-
-class RadioCmp extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         value: props.data.checked,
-      };
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      this.setState({
-         value: props.data.checked,
-      });
-   }
-
-   render() {
-      var { instance, data } = this.props;
-      var { widget } = instance;
-      var { baseClass, CSS } = widget;
-
-      return (
-         <span
-            key="check"
-            tabIndex={data.disabled ? null : data.tabIndex || 0}
-            className={CSS.element(baseClass, "input", {
-               checked: this.state.value,
-            })}
-            style={CSS.parseStyle(data.inputStyle)}
-            id={data.id}
-            onClick={this.onClick.bind(this)}
-            onKeyDown={this.onKeyDown.bind(this)}
-         />
-      );
-   }
-
-   onClick(e) {
-      var { instance, data } = this.props;
-      var { widget } = instance;
-      if (!data.disabled && !data.readOnly) {
-         e.stopPropagation();
-         e.preventDefault();
-         widget.handleChange(e, instance);
-      }
-   }
-
-   onKeyDown(e) {
-      let { instance } = this.props;
-      if (instance.widget.handleKeyDown(e, instance) === false) return;
-
-      switch (e.keyCode) {
-         case KeyCode.space:
-            this.onClick(e);
-            break;
-      }
-   }
-}
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { Field, getFieldTooltip } from "./Field";
+import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { KeyCode } from "../../util/KeyCode";
+import { isUndefined } from "../../util/isUndefined";
+
+export class Radio extends Field {
+   declareData() {
+      super.declareData(
+         {
+            value: undefined,
+            selection: undefined,
+            option: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            readOnly: undefined,
+            required: undefined,
+            text: undefined,
+         },
+         ...arguments
+      );
+   }
+
+   init() {
+      if (this.selection) this.value = this.selection;
+
+      super.init();
+   }
+
+   formatValue(context, { data }) {
+      return data.text;
+   }
+
+   prepareData(context, instance) {
+      super.prepareData(...arguments);
+      let { data } = instance;
+      data.checked = data.value === data.option;
+      if (this.default && isUndefined(data.value)) instance.set("value", data.option);
+   }
+
+   renderValue(context, { data }) {
+      if (data.value === data.option) return super.renderValue(...arguments);
+      return null;
+   }
+
+   renderWrap(context, instance, key, content) {
+      var { data } = instance;
+      return (
+         <label
+            key={key}
+            className={data.classNames}
+            style={data.style}
+            onMouseDown={stopPropagation}
+            onTouchStart={stopPropagation}
+            onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
+            onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
+            onClick={(e) => {
+               this.handleClick(e, instance);
+            }}
+            htmlFor={data.id}
+         >
+            {content}
+            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+         </label>
+      );
+   }
+
+   renderNativeCheck(context, instance) {
+      var { CSS, baseClass } = this;
+      var { data } = instance;
+      return (
+         <input
+            key="input"
+            className={CSS.element(baseClass, "radio")}
+            id={data.id}
+            type="radio"
+            checked={data.checked}
+            disabled={data.disabled}
+            {...data.inputAttrs}
+            onClick={stopPropagation}
+            onChange={(e) => {
+               this.handleChange(e, instance);
+            }}
+         />
+      );
+   }
+
+   renderCheck(context, instance) {
+      return <RadioCmp key="check" instance={instance} data={instance.data} />;
+   }
+
+   renderInput(context, instance, key) {
+      var { data } = instance;
+      var text = data.text || this.renderChildren(context, instance);
+      var { CSS, baseClass } = this;
+      return this.renderWrap(context, instance, key, [
+         this.native ? this.renderNativeCheck(context, instance) : this.renderCheck(context, instance),
+         text ? (
+            <div key="text" className={CSS.element(baseClass, "text")}>
+               {text}
+            </div>
+         ) : (
+            <span key="baseline" className={CSS.element(baseClass, "baseline")}>
+               &nbsp;
+            </span>
+         ),
+      ]);
+   }
+
+   handleClick(e, instance) {
+      if (this.native) e.stopPropagation();
+      else {
+         var el = document.getElementById(instance.data.id);
+         if (el) el.focus();
+         e.preventDefault();
+         this.handleChange(e, instance);
+      }
+   }
+
+   handleChange(e, instance) {
+      var { data } = instance;
+      if (data.disabled || data.readOnly || data.viewMode) return;
+      instance.set("value", data.option);
+   }
+}
+
+Radio.prototype.baseClass = "radio";
+Radio.prototype.native = false;
+Radio.prototype.default = false;
+
+Widget.alias("radio", Radio);
+
+class RadioCmp extends VDOM.Component {
+   constructor(props) {
+      super(props);
+      this.state = {
+         value: props.data.checked,
+      };
+   }
+
+   UNSAFE_componentWillReceiveProps(props) {
+      this.setState({
+         value: props.data.checked,
+      });
+   }
+
+   render() {
+      var { instance, data } = this.props;
+      var { widget } = instance;
+      var { baseClass, CSS } = widget;
+
+      return (
+         <span
+            key="check"
+            tabIndex={data.disabled ? null : data.tabIndex || 0}
+            className={CSS.element(baseClass, "input", {
+               checked: this.state.value,
+            })}
+            style={CSS.parseStyle(data.inputStyle)}
+            id={data.id}
+            onClick={this.onClick.bind(this)}
+            onKeyDown={this.onKeyDown.bind(this)}
+         />
+      );
+   }
+
+   onClick(e) {
+      var { instance, data } = this.props;
+      var { widget } = instance;
+      if (!data.disabled && !data.readOnly) {
+         e.stopPropagation();
+         e.preventDefault();
+         widget.handleChange(e, instance);
+      }
+   }
+
+   onKeyDown(e) {
+      let { instance } = this.props;
+      if (instance.widget.handleKeyDown(e, instance) === false) return;
+
+      switch (e.keyCode) {
+         case KeyCode.space:
+            this.onClick(e);
+            break;
+      }
+   }
+}