@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/input/number/index.js

@@ -0,0 +1,448 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useEffect, useCallback, useMemo } from "react";
+import clsx from "clsx";
+import TextField from "@mui/material/TextField";
+import * as lodash from "lodash-es";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import withFormController from "../../data/form/form-controller/withFormController";
+import {
+  validateNumericValue,
+  handleNumericInputChange,
+  formatOnBlur,
+  handleStepValue
+} from "../../../utils/format-util";
+import { sanitizeInputValue } from "../util";
+import withStandalone from "../../../higherOrder/withStandalone";
+const DEFAULT_CLASS = "form-control app-textbox app-number-input";
+const WmNumber = memo(
+  (props) => {
+    const {
+      required = false,
+      regexp = ".*",
+      disabled,
+      name,
+      hint,
+      arialabel,
+      tabindex,
+      shortcutkey,
+      autofocus,
+      datavalue: initialDataValue = null,
+      maxDataValue: initialMaxDataValue = null,
+      maxvalue: initialMaxValue = null,
+      maxdisplayValue: initialMaxDisplayValue = null,
+      isMaxWidget = false,
+      styles = {},
+      className,
+      placeholder,
+      updatedelay = "0",
+      listener,
+      updateon = "blur",
+      step,
+      minvalue,
+      maxvalue,
+      readonly,
+      inputmode = "natural",
+      trailingzero = false,
+      decimalplaces = 0,
+      onChange,
+      onClick,
+      onKeydown,
+      onKeyup,
+      onKeypress,
+      onBlur,
+      onFocus,
+      onMouseEnter,
+      onMouseLeave,
+      id,
+      error
+    } = props;
+    const [showError, setShowError] = useState(false);
+    const effectiveInitialValue = isMaxWidget ? initialMaxDataValue !== null && initialMaxDataValue !== void 0 ? initialMaxDataValue : initialMaxValue !== null && initialMaxValue !== void 0 ? initialMaxValue : null : initialDataValue !== null && initialDataValue !== void 0 ? initialDataValue : null;
+    const [datavalue, setDatavalue] = useState(effectiveInitialValue);
+    const [prevDatavalue, setPrevDatavalue] = useState(effectiveInitialValue);
+    const [internalValue, setInternalValue] = useState(
+      effectiveInitialValue !== null ? effectiveInitialValue.toString() : ""
+    );
+    const [rawInputValue, setRawInputValue] = useState(
+      effectiveInitialValue !== null ? effectiveInitialValue.toString() : ""
+    );
+    const [isDirty, setIsDirty] = useState(false);
+    const [isTouched, setIsTouched] = useState(false);
+    const inputEl = useRef(null);
+    const effectiveDecimalPlaces = useMemo(() => {
+      if (decimalplaces > 0) return decimalplaces;
+      if (inputmode === "financial" && step && step < 1) {
+        const stepStr = step.toString();
+        if (stepStr.includes(".")) {
+          return stepStr.split(".")[1].length;
+        }
+      }
+      return decimalplaces;
+    }, [decimalplaces, inputmode, step]);
+    const displayError = error || isDirty && showError;
+    const validateNumber = useCallback(
+      (value2) => {
+        return validateNumericValue(value2, required, minvalue, maxvalue, regexp);
+      },
+      [required, regexp, minvalue, maxvalue]
+    );
+    const debouncedUpdateValue = useCallback(
+      lodash.debounce(
+        (value2) => {
+          var _a;
+          const validation = validateNumber(value2);
+          setShowError(!validation.isValid);
+          if (prevDatavalue === value2) {
+            return;
+          }
+          if (onChange || (listener == null ? void 0 : listener.onChange)) {
+            const syntheticEvent = {
+              target: {
+                value: value2 === null ? "" : value2.toString(),
+                name
+              },
+              currentTarget: inputEl.current
+            };
+            const updatedWidgetData = isMaxWidget ? {
+              maxDataValue: value2 == null ? "" : value2,
+              maxvalue: value2 == null ? "" : value2,
+              maxdisplayValue: value2 == null ? "" : value2.toString()
+            } : {
+              datavalue: value2 == null ? "" : value2,
+              value: value2 == null ? "" : value2,
+              displayValue: value2 == null ? "" : value2.toString()
+            };
+            (_a = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a.call(listener, props.fieldName || name, updatedWidgetData, value2, prevDatavalue);
+            if (onChange) {
+              const updatedProps = isMaxWidget ? __spreadProps(__spreadValues({}, props), {
+                maxDataValue: value2,
+                maxvalue: value2,
+                maxdisplayValue: value2 == null ? "" : value2.toString()
+              }) : __spreadProps(__spreadValues({}, props), {
+                datavalue: value2,
+                value: value2,
+                displayValue: value2 == null ? "" : value2.toString()
+              });
+              onChange(syntheticEvent, updatedProps, value2, prevDatavalue);
+            }
+          }
+          setPrevDatavalue(value2);
+        },
+        parseInt(updatedelay || "10"),
+        { leading: parseInt(updatedelay) === 0 }
+      ),
+      [onChange, name, prevDatavalue, updatedelay, validateNumber]
+    );
+    useEffect(() => {
+      if (!shortcutkey) return;
+      const handleGlobalKeyDown = (e) => {
+        var _a;
+        if (e.altKey && e.key.toLowerCase() === shortcutkey.toLowerCase()) {
+          e.preventDefault();
+          (_a = inputEl.current) == null ? void 0 : _a.focus();
+        }
+      };
+      window.addEventListener("keydown", handleGlobalKeyDown);
+      return () => window.removeEventListener("keydown", handleGlobalKeyDown);
+    }, [shortcutkey]);
+    const handleInputChange = (event) => {
+      var _a;
+      const result = handleNumericInputChange(
+        event.target.value,
+        inputmode,
+        effectiveDecimalPlaces,
+        setRawInputValue
+      );
+      if (result.newVal === null && event.target.value !== "") {
+        return;
+      }
+      setInternalValue(result.inputValue);
+      setDatavalue(result.newVal);
+      const validation = validateNumber(result.newVal);
+      setShowError(!validation.isValid);
+      if (updateon === "keypress") {
+        debouncedUpdateValue(result.newVal);
+        onChange == null ? void 0 : onChange(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name], result.newVal, prevDatavalue);
+      }
+    };
+    const handleBlur = (e) => {
+      var _a;
+      const formattedValue = formatOnBlur(
+        datavalue,
+        rawInputValue,
+        trailingzero,
+        effectiveDecimalPlaces
+      );
+      if (formattedValue) {
+        setInternalValue(formattedValue);
+      }
+      if (updateon === "blur") {
+        debouncedUpdateValue(datavalue);
+      }
+      onBlur == null ? void 0 : onBlur(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+      const validation = validateNumber(datavalue);
+      if (!validation.isValid && (required || maxvalue || minvalue)) {
+        setIsDirty(true);
+      } else {
+        setIsDirty(false);
+      }
+      if (!validation.isValid && regexp != ".*") {
+        setIsTouched(true);
+        setIsDirty(true);
+        setShowError(true);
+      }
+    };
+    const handleArrowPress = useCallback(
+      (event, direction) => {
+        var _a;
+        event.preventDefault();
+        if (readonly || disabled || !step || step === 0) {
+          return;
+        }
+        const targetVal = event.target.value;
+        let currentValue = targetVal && !isNaN(Number.parseFloat(targetVal)) ? Number.parseFloat(targetVal) : datavalue;
+        const newValue = handleStepValue(
+          currentValue,
+          direction,
+          step,
+          effectiveDecimalPlaces,
+          minvalue,
+          maxvalue
+        );
+        const currentPrevValue = datavalue;
+        const cleanValue = newValue.toString();
+        setInternalValue(cleanValue);
+        setDatavalue(newValue);
+        setPrevDatavalue(currentPrevValue);
+        setRawInputValue(cleanValue);
+        const validation = validateNumber(newValue);
+        setShowError(!validation.isValid);
+        if (onChange || (listener == null ? void 0 : listener.onChange)) {
+          const syntheticEvent = {
+            target: {
+              value: newValue.toString(),
+              name
+            },
+            currentTarget: inputEl.current
+          };
+          const updatedWidgetData = isMaxWidget ? {
+            maxDataValue: newValue == null ? "" : newValue,
+            maxvalue: newValue == null ? "" : newValue,
+            maxdisplayValue: newValue == null ? "" : newValue.toString()
+          } : {
+            datavalue: newValue == null ? "" : newValue,
+            value: newValue == null ? "" : newValue,
+            displayValue: newValue == null ? "" : newValue.toString()
+          };
+          (_a = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a.call(
+            listener,
+            props.fieldName || name,
+            updatedWidgetData,
+            newValue,
+            currentPrevValue
+          );
+          if (onChange) {
+            const updatedProps = __spreadProps(__spreadValues({}, props), {
+              datavalue: newValue,
+              displayValue: newValue == null ? "" : newValue.toString()
+            });
+            onChange(syntheticEvent, updatedProps, newValue, currentPrevValue);
+          }
+        }
+        if (updateon === "keypress") {
+          debouncedUpdateValue(newValue);
+        }
+        setPrevDatavalue(newValue);
+      },
+      [
+        readonly,
+        disabled,
+        step,
+        datavalue,
+        minvalue,
+        maxvalue,
+        effectiveDecimalPlaces,
+        validateNumber,
+        onChange,
+        name,
+        props,
+        listener,
+        updateon,
+        debouncedUpdateValue
+      ]
+    );
+    const handleKeyDown = (e) => {
+      var _a, _b;
+      if (step && step !== 0) {
+        if (e.key === "ArrowUp") {
+          handleArrowPress(e, "UP");
+          return;
+        } else if (e.key === "ArrowDown") {
+          handleArrowPress(e, "DOWN");
+          return;
+        } else {
+          onKeydown == null ? void 0 : onKeydown(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+        }
+      }
+      if (e.key === "Enter") {
+        debouncedUpdateValue(datavalue);
+      }
+      onKeydown == null ? void 0 : onKeydown(e, (_b = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b[name]);
+    };
+    const handleKeyUp = (e) => {
+      var _a;
+      onKeyup == null ? void 0 : onKeyup(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+    };
+    const handleFocus = (e) => {
+      var _a;
+      onFocus == null ? void 0 : onFocus(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+    };
+    const handleClick = (e) => {
+      var _a;
+      onClick == null ? void 0 : onClick(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+    };
+    const handleMouseEnter = (e) => {
+      var _a;
+      setIsTouched(true);
+      onMouseEnter == null ? void 0 : onMouseEnter(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+    };
+    const handleMouseLeave = (e) => {
+      var _a;
+      setIsTouched(false);
+      onMouseLeave == null ? void 0 : onMouseLeave(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+    };
+    const handleKeyPress = (e) => {
+      var _a;
+      onKeypress == null ? void 0 : onKeypress(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+    };
+    useEffect(() => {
+      const currentInitialValue = isMaxWidget ? initialMaxDataValue !== null && initialMaxDataValue !== void 0 ? initialMaxDataValue : initialMaxValue !== null && initialMaxValue !== void 0 ? initialMaxValue : null : initialDataValue !== null && initialDataValue !== void 0 ? initialDataValue : null;
+      const currentValue = datavalue !== null && datavalue !== void 0 ? datavalue : null;
+      const newValue = currentInitialValue;
+      if (currentValue !== newValue) {
+        setDatavalue(newValue);
+        const cleanValue = newValue !== null ? newValue.toString() : "";
+        setInternalValue(cleanValue);
+        setRawInputValue(cleanValue);
+        setPrevDatavalue(currentValue);
+      }
+    }, [initialDataValue, initialMaxDataValue, initialMaxValue, isMaxWidget]);
+    useEffect(() => {
+      var _a;
+      if (inputEl.current) {
+        const focus = () => {
+          var _a2;
+          (_a2 = inputEl.current) == null ? void 0 : _a2.focus();
+        };
+        if ((_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]) {
+          listener.Widgets[name].focus = focus;
+        }
+      }
+    }, []);
+    const events = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+      onChange: handleInputChange,
+      onKeyDown: handleKeyDown
+    }, onMouseEnter ? { onMouseEnter: handleMouseEnter } : {}), onMouseLeave ? { onMouseLeave: handleMouseLeave } : {}), onClick ? { onClick: handleClick } : {}), onFocus ? { onFocus: handleFocus } : {}), onKeyup ? { onKeyUp: handleKeyUp } : {}), onKeypress ? { onKeyPress: handleKeyPress } : {}), updateon === "blur" || onBlur ? { onBlur: handleBlur } : {});
+    const value = sanitizeInputValue(internalValue);
+    return /* @__PURE__ */ jsx(
+      TextField,
+      __spreadProps(__spreadValues({}, events), {
+        hidden: props.hidden,
+        title: hint || "Number Input",
+        name,
+        inputRef: inputEl,
+        variant: "standard",
+        autoFocus: autofocus,
+        disabled,
+        placeholder: placeholder != null ? placeholder : "Enter number",
+        type: "text",
+        id: id || name,
+        value,
+        error: displayError,
+        className: clsx(
+          "app-input-wrapper",
+          "wm-number-textfield",
+          disabled && "wm-number-textfield-disabled",
+          isTouched ? "ng-touched" : "ng-untouched",
+          displayError ? "ng-invalid" : "ng-valid"
+        ),
+        slotProps: {
+          htmlInput: {
+            step,
+            min: minvalue,
+            max: maxvalue,
+            readOnly: readonly,
+            required,
+            className: clsx(
+              DEFAULT_CLASS,
+              className,
+              "wm-number-slot-input",
+              isTouched ? "ng-touched" : "ng-untouched",
+              displayError ? "ng-invalid" : "ng-valid"
+            ),
+            style: styles,
+            "aria-label": arialabel,
+            pattern: regexp,
+            tabIndex: tabindex
+          },
+          formHelperText: {
+            className: clsx("wm-number-helper-text", displayError && "wm-number-helper-text-error")
+          }
+        },
+        sx: styles
+      })
+    );
+  },
+  (prev, current) => {
+    const keys = [
+      "datavalue",
+      "maxDataValue",
+      "isMaxWidget",
+      "disabled",
+      "required",
+      "readonly",
+      "placeholder",
+      "tabindex",
+      "shortcutkey",
+      "autofocus",
+      "arialabel",
+      "inputmode",
+      "trailingzero",
+      "decimalplaces",
+      "minvalue",
+      "maxvalue",
+      "className",
+      "hidden",
+      "show",
+      "error"
+    ];
+    return keys.every((key) => prev[key] === current[key]);
+  }
+);
+WmNumber.displayName = "WmNumber";
+const WithForm = withFormController(WmNumber);
+const WmNumberStandalone = withStandalone(WithForm);
+var number_default = withBaseWrapper(WithForm);
+export {
+  WmNumberStandalone as WmNumber,
+  number_default as default
+};

package/components/input/number/props.d.ts

@@ -0,0 +1,119 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Props specific to the WmNumber component.
+ */
+export interface NumberProps {
+    /**
+     * Whether the input is required.
+     */
+    required?: boolean;
+    /**
+     * Regular expression pattern for input validation.
+     */
+    regexp?: string;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Input mode for the number widget.
+     * - `"natural"`: Standard number input.
+     * - `"financial"`: Financial format with trailing zeros.
+     * @default "natural"
+     */
+    inputmode?: "natural" | "financial";
+    /**
+     * Whether to display trailing zeros.
+     */
+    trailingzero?: boolean;
+    /**
+     * Step increment for the number input.
+     */
+    step?: number;
+    /**
+     * Minimum value allowed.
+     */
+    minvalue?: number;
+    /**
+     * Maximum value allowed.
+     */
+    maxvalue?: number;
+    /**
+     * Placeholder text shown when the input is empty.
+     */
+    placeholder?: string;
+    /**
+     * Keyboard shortcut key to focus the input.
+     */
+    shortcutkey?: string;
+    /**
+     * Whether the input should be focused on mount.
+     */
+    autofocus?: boolean;
+    /**
+     * The bound data value of the number input.
+     */
+    datavalue?: number | null;
+    /**
+     * Maximum data value for range number inputs.
+     */
+    maxDataValue?: number | null;
+    /**
+     * Whether this is a max-value widget in a range input.
+     */
+    isMaxWidget?: boolean;
+    /**
+     * Delay in milliseconds before updating the data value.
+     * @default "0"
+     */
+    updatedelay?: string;
+    /**
+     * When the data value should be updated.
+     * @default "blur"
+     */
+    updateon?: "blur" | "keypress";
+    /**
+     * Whether the input is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Number of decimal places to display.
+     */
+    decimalplaces?: number;
+    /**
+     * Callback invoked when the number value changes.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newVal: number | string | null, oldVal: number | string | null) => void;
+    /**
+     * Callback invoked when the number input is clicked.
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the mouse enters the number input.
+     */
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the mouse leaves the number input.
+     */
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void;
+    /**
+     * Whether the input has a validation error (typically injected by form controller).
+     */
+    error?: boolean;
+    /**
+     * The unique ID for the widget.
+     */
+    id?: string;
+    /**
+     * Field name used by the form controller.
+     */
+    fieldName?: string;
+    /**
+     * Display value for the max widget.
+     */
+    maxdisplayValue?: string | null;
+}
+/**
+ * Combined props for the WmNumber component, including base WaveMaker props.
+ */
+export type WmNumberProps = Prettify<NumberProps & BaseProps>;