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

package/components/input/fileupload/useFileUpload.js

@@ -0,0 +1,365 @@
+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 { useCallback, useEffect, useRef, useState } from "react";
+import { isEmpty } from "lodash-es";
+import { fileUploadConstants } from "../../constants";
+import { getDefaultChooseFilter, getValidFiles, clearFile, generateFileId } from "./Utils";
+import { eventObserver } from "../../../core/event-notifier";
+const useFileUpload = (props) => {
+  var _a, _b;
+  const {
+    name,
+    multiple = fileUploadConstants.DEFAULT_VALUES.MULTIPLE,
+    disabled = !fileUploadConstants.DEFAULT_VALUES.ENABLED,
+    contenttype = "",
+    maxfilesize,
+    uploadpath,
+    datasource,
+    extensions,
+    filetype,
+    readonly = false,
+    deletedatasource,
+    onError,
+    onSelect,
+    onBeforeselect,
+    onDelete,
+    listener
+  } = props;
+  const allowedFileUploadExtensions = (_b = (_a = listener == null ? void 0 : listener.appConfig) == null ? void 0 : _a.appProperties) == null ? void 0 : _b.allowedFileUploadExtensions;
+  const fileInputRef = useRef(null);
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+  const [confirmDialogProps, setConfirmDialogProps] = useState({
+    title: "",
+    message: "",
+    oktext: "OK",
+    canceltext: "Cancel",
+    onOk: () => {
+    },
+    onCancel: () => {
+    }
+  });
+  const showConfirmDialog = (props2) => {
+    setConfirmDialogProps({
+      title: props2.title,
+      message: props2.message,
+      oktext: props2.oktext || "OK",
+      canceltext: props2.canceltext || "Cancel",
+      onOk: props2.onOk,
+      onCancel: props2.onCancel || (() => {
+      })
+    });
+    setConfirmDialogOpen(true);
+  };
+  const closeConfirmDialog = () => {
+    setConfirmDialogOpen(false);
+  };
+  const normalizeExtensions = useCallback((extensionString) => {
+    if (!extensionString) return "";
+    const extensions2 = extensionString.split(/[,\s]+/).filter((ext) => ext.trim());
+    return extensions2.map((ext) => {
+      const trimmedExt = ext.trim();
+      if (trimmedExt.includes("/")) {
+        return trimmedExt;
+      }
+      if (trimmedExt.startsWith(".")) {
+        return trimmedExt;
+      }
+      return `.${trimmedExt}`;
+    }).join(",");
+  }, []);
+  const getChooseFilter = () => {
+    const normalizedContenttype = normalizeExtensions(contenttype);
+    const normalizedExtensions = normalizeExtensions(extensions || "");
+    const normalizedFiletype = normalizeExtensions(filetype || "");
+    const defaultFilter = getDefaultChooseFilter(DEFAULT_ALLOWED_EXTENSIONS);
+    return normalizedContenttype || normalizedExtensions || normalizedFiletype || defaultFilter;
+  };
+  const DEFAULT_ALLOWED_EXTENSIONS = (allowedFileUploadExtensions == null ? void 0 : allowedFileUploadExtensions.split(" ").map((item) => item.trim()).map((item) => item.endsWith("/*") ? item : `.${item}`)) || [];
+  const [chooseFilter, setChooseFilter] = useState(() => {
+    return getChooseFilter();
+  });
+  const [highlightDropArea, setHighlightDropArea] = useState(false);
+  const [uploadedFiles, setUploadedFiles] = useState([]);
+  const [selectedFolders, setSelectedFolders] = useState([]);
+  const invokeEventCallback = useCallback(
+    (eventName, payload) => {
+      var _a2, _b2;
+      const eventHandler = (_b2 = (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]) == null ? void 0 : _b2[eventName];
+      return eventHandler ? eventHandler(payload.$event, listener.Widgets[name], payload.files) || true : true;
+    },
+    [listener, name]
+  );
+  const fileUploadProgress = (progress) => {
+    setUploadedFiles((prevFiles) => {
+      return prevFiles.map((file) => {
+        if (file.name === progress.fileName && file.uniqueId === progress.uniqueId) {
+          file.progress = progress.progress;
+          if (file.progress === 100) {
+            file.status = "success";
+          } else {
+            file.status = progress.status;
+            if (progress.errMsg) {
+              file.errMsg = progress.errMsg;
+              file.status = "error";
+            }
+          }
+        }
+        return file;
+      });
+    });
+  };
+  useEffect(() => {
+    const progressObs = datasource && datasource._progressObservable;
+    if (progressObs) {
+      progressObs.subscribe((progress) => {
+        var _a2, _b2;
+        fileUploadProgress(progress);
+        if (progress.progress === 100) {
+          (_a2 = listener == null ? void 0 : listener.App) == null ? void 0 : _a2.notifyApp("File uploaded successfully", "Success");
+        } else if (progress.errMsg) {
+          (_b2 = listener == null ? void 0 : listener.App) == null ? void 0 : _b2.notifyApp("File upload failed", "Error");
+        }
+      });
+    }
+    return () => {
+      const progressObs2 = datasource && datasource._progressObservable;
+      if (progressObs2 == null ? void 0 : progressObs2.unsubscribe) {
+        progressObs2.unsubscribe();
+      }
+    };
+  }, [invokeEventCallback]);
+  useEffect(() => {
+    const selected = getChooseFilter();
+    setChooseFilter(selected);
+  }, [contenttype, extensions, filetype, normalizeExtensions, DEFAULT_ALLOWED_EXTENSIONS]);
+  useEffect(() => {
+    var _a2, _b2;
+    const selected = (_b2 = (_a2 = contenttype != null ? contenttype : extensions) != null ? _a2 : filetype) != null ? _b2 : getDefaultChooseFilter(DEFAULT_ALLOWED_EXTENSIONS);
+    setChooseFilter(selected);
+  }, [contenttype, extensions, filetype]);
+  useEffect(() => {
+    if (disabled || readonly) {
+      setHighlightDropArea(false);
+      window.removeEventListener("focus", disableDropZone);
+    } else {
+      document.addEventListener("dragover", dragOverCb);
+      document.addEventListener("drop", dropCb);
+      document.addEventListener("mouseleave", dropCb);
+    }
+    return () => {
+      document.removeEventListener("dragover", dragOverCb);
+      document.removeEventListener("drop", dropCb);
+      document.removeEventListener("mouseleave", dropCb);
+    };
+  }, [disabled, readonly]);
+  const dragOverCb = (e) => {
+    e.preventDefault();
+    const dropzone = document.getElementById("dropzone");
+    if (dropzone) {
+      dropzone.classList.add("highlight-drop-box");
+    }
+  };
+  const dropCb = () => {
+    const dropzone = document.getElementById("dropzone");
+    if (dropzone) {
+      dropzone.classList.remove("highlight-drop-box");
+    }
+    setHighlightDropArea(false);
+  };
+  const dragOverHandler = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setHighlightDropArea(true);
+  };
+  const disableDropZone = () => {
+    setHighlightDropArea(false);
+    window.removeEventListener("focus", disableDropZone);
+  };
+  const onBeforeSelectEventCall = ($event, $files) => {
+    var _a2, _b2, _c, _d;
+    const files = getValidFiles(
+      $files,
+      contenttype,
+      extensions || "",
+      filetype || "",
+      chooseFilter,
+      maxfilesize || "10",
+      onError,
+      listener
+    );
+    if (!isEmpty(files.errorFiles)) {
+      invokeEventCallback("error", {
+        $event: __spreadProps(__spreadValues({}, $event), { files: files.errorFiles }),
+        files: files.errorFiles
+      });
+    }
+    if (files.validFiles.length) {
+      const beforeSelectVal = invokeEventCallback("beforeselect", {
+        $event: __spreadProps(__spreadValues({}, $event), { files: files.validFiles }),
+        files: files.validFiles
+      });
+      if (onBeforeselect) {
+        const event = __spreadProps(__spreadValues({}, $event), { _reactName: "onBeforeselect" });
+        onBeforeselect(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name], files.validFiles);
+      }
+      if (beforeSelectVal !== false) {
+        const filesWithIds = files.validFiles.map((file) => {
+          const fileWithId = file;
+          if (!fileWithId.name) {
+            fileWithId.name = file.name;
+          }
+          if (!fileWithId.size) {
+            fileWithId.size = file.size;
+          }
+          fileWithId.uniqueId = generateFileId();
+          if (datasource) {
+            fileWithId.status = "onProgress";
+            fileWithId.progress = 0;
+          }
+          return fileWithId;
+        });
+        if (datasource) {
+          datasource._progressObservable = eventObserver();
+          datasource.dataBinding = datasource.dataBinding || {};
+          datasource.dataBinding.files = filesWithIds;
+          datasource.dataSet = filesWithIds;
+        }
+        setUploadedFiles((prev) => multiple ? [...prev, ...filesWithIds] : [...filesWithIds]);
+        listener == null ? void 0 : listener.onChange(name, { selectedFiles: filesWithIds });
+        const selectedFile = (_d = filesWithIds[0]) != null ? _d : (_c = (_b2 = fileInputRef.current) == null ? void 0 : _b2.files) == null ? void 0 : _c[0];
+        onSelect == null ? void 0 : onSelect($event, selectedFile, filesWithIds);
+      }
+    }
+  };
+  const onFileSelect = (e) => {
+    setSelectedFolders([]);
+    onBeforeSelectEventCall(e, e.target.files || []);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+  const onFileDrop = (e) => {
+    var _a2, _b2;
+    e.preventDefault();
+    let listOfFiles = [];
+    setSelectedFolders([]);
+    const filesData = e.dataTransfer.items;
+    if (filesData.length > 0) {
+      for (let i = 0; i < filesData.length; i++) {
+        const entry = (_b2 = (_a2 = filesData[i]).webkitGetAsEntry) == null ? void 0 : _b2.call(_a2);
+        if (entry && entry.isFile) {
+          const file = filesData[i].getAsFile();
+          if (file) listOfFiles.push(file);
+        } else if (entry && entry.isDirectory) {
+          const file = filesData[i].getAsFile();
+          if (file) setSelectedFolders((prev) => [...prev, file]);
+        }
+      }
+      onBeforeSelectEventCall(e, listOfFiles);
+    }
+  };
+  const clearSelectedFile = (file) => {
+    setUploadedFiles((prev) => clearFile(prev, file));
+  };
+  const triggerFileSelect = () => {
+    if (fileInputRef.current && !disabled && !readonly) {
+      fileInputRef.current.click();
+    }
+  };
+  const deleteFileProgress = (file) => {
+    if (!deletedatasource) return;
+    deletedatasource._deleteFileObservable.subscribe((response) => {
+      if (response.status === "success") {
+        setUploadedFiles((prev) => prev.filter((fileObj) => file !== fileObj) || []);
+        setSelectedFolders((prev) => prev.filter((fileObj) => file !== fileObj) || []);
+      }
+    });
+  };
+  const onFileDelete = (e, file) => {
+    if (!file || readonly) return;
+    const beforeDeleteVal = invokeEventCallback("beforedelete", { $event: file });
+    if (beforeDeleteVal !== false) {
+      showConfirmDialog({
+        title: "Delete file",
+        message: "Are you sure you want to delete this file?",
+        oktext: "Ok",
+        canceltext: "Cancel",
+        onOk: () => {
+          var _a2, _b2, _c, _d, _e;
+          try {
+            if (deletedatasource) {
+              deletedatasource._deleteFileObservable = eventObserver();
+              deleteFileProgress(file);
+              const fileResponse = (_a2 = file._response) == null ? void 0 : _a2[0];
+              const fileName = (_b2 = fileResponse == null ? void 0 : fileResponse.fileName) != null ? _b2 : file.name;
+              deletedatasource.setInput("file", fileName);
+              const event = __spreadProps(__spreadValues({}, e), { _reactName: "onDelete" });
+              onDelete == null ? void 0 : onDelete(event, (_c = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _c[name]);
+              listener && ((_d = listener == null ? void 0 : listener.App) == null ? void 0 : _d.notifyApp("File deleted successfully", "Success"));
+            }
+          } catch (error) {
+            listener && ((_e = listener == null ? void 0 : listener.App) == null ? void 0 : _e.notifyApp("Service Call Failed", "Error"));
+          } finally {
+            closeConfirmDialog();
+          }
+        },
+        onCancel: () => {
+          closeConfirmDialog();
+        }
+      });
+    }
+  };
+  const handleBeforeSelect = useCallback(
+    (event, widget, selectedFiles) => {
+      onBeforeselect == null ? void 0 : onBeforeselect(event, widget != null ? widget : {}, selectedFiles != null ? selectedFiles : []);
+    },
+    [onBeforeselect]
+  );
+  const handleError = useCallback(
+    (event, widget, file) => {
+      onError == null ? void 0 : onError(event, widget, file);
+    },
+    [onError]
+  );
+  const events = __spreadValues(__spreadValues({}, onBeforeselect ? { onBeforeselect: handleBeforeSelect } : {}), onError ? { onError: handleError } : {});
+  return __spreadValues({
+    fileInputRef,
+    chooseFilter,
+    highlightDropArea,
+    uploadedFiles,
+    selectedFolders,
+    setSelectedFolders,
+    dragOverHandler,
+    onFileSelect,
+    onFileDrop,
+    setHighlightDropArea,
+    clearSelectedFile,
+    triggerFileSelect,
+    onFileDelete,
+    // Confirm dialog state and functions
+    confirmDialogOpen,
+    confirmDialogProps,
+    showConfirmDialog,
+    closeConfirmDialog
+  }, events);
+};
+export {
+  useFileUpload
+};

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

@@ -0,0 +1,170 @@
+import React from "react";
+declare const WmNumberStandalone: React.ComponentType<import("../../data/form/form-controller/props").WithFormControllerProps & {
+    required?: boolean;
+    regexp?: string;
+    disabled?: boolean;
+    inputmode?: "natural" | "financial";
+    trailingzero?: boolean;
+    step?: number;
+    minvalue?: number;
+    maxvalue?: number;
+    placeholder?: string;
+    shortcutkey?: string;
+    autofocus?: boolean;
+    datavalue?: any;
+    maxDataValue?: number | null;
+    isMaxWidget?: boolean;
+    updatedelay?: string;
+    updateon?: "blur" | "keypress";
+    readonly?: boolean;
+    decimalplaces?: number;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newVal: number | string | null, oldVal: number | string | null) => void;
+    onClick?: ((event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void) & ((event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onMouseEnter?: ((event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void) & ((event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onMouseLeave?: ((event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void) & ((event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    error?: boolean;
+    id?: string;
+    fieldName?: string;
+    maxdisplayValue?: string | null;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    dataset?: any;
+    prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+} & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
+export { WmNumberStandalone as WmNumber };
+/**
+ * The WmNumber component provides a numeric input with step controls, formatting, and validation.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-number--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-number--docs)
+ *
+ * @param props - {@link WmNumberProps}
+ */
+declare const _default: React.ComponentType<{
+    [x: string]: any;
+    standalone?: boolean;
+    formRef?: any;
+    formKey?: string;
+    name: string;
+    datavalue?: any;
+    defaultvalue?: any;
+    validators?: import("../../data/form/form-controller/props").ValidatorConfig[];
+    asyncValidators?: import("../../data/form/form-controller/props").ValidatorConfig[];
+    required?: boolean;
+    maxchars?: number;
+    regexp?: string | (RegExp & string);
+    validationmessage?: string;
+    hint?: string;
+    type?: string;
+    observe?: string[];
+    onBlur?: ((e: any) => void) & ((event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    disabled?: boolean;
+    inputmode?: "natural" | "financial";
+    trailingzero?: boolean;
+    step?: number;
+    minvalue?: number;
+    maxvalue?: number;
+    placeholder?: string;
+    shortcutkey?: string;
+    autofocus?: boolean;
+    maxDataValue?: number | null;
+    isMaxWidget?: boolean;
+    updatedelay?: string;
+    updateon?: "blur" | "keypress";
+    readonly?: boolean;
+    decimalplaces?: number;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newVal: number | string | null, oldVal: number | string | null) => void;
+    onClick?: ((event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void) & ((event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onMouseEnter?: ((event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void) & ((event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onMouseLeave?: ((event: React.MouseEvent<HTMLElement>, widget: Record<string, unknown>) => void) & ((event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    error?: boolean;
+    id?: string;
+    fieldName?: string;
+    maxdisplayValue?: string | null;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    dataset?: any;
+    prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+}>;
+export default _default;