@oliasoft-open-source/react-ui-library 4.6.11 → 4.6.13

package/dist/index.d.ts

@@ -1234,6 +1234,26 @@ export declare interface ISliderProps {
     }) => void;
 }
 
+export declare type ISmartUploadModalProps = {
+    visible: boolean;
+    prompt: string;
+    onCloseModal: () => void;
+    onUpload: (prompt: string, file: File) => any;
+    onComplete: (data: {
+        [key: string]: string;
+    }[]) => void;
+    onFailed?: () => void;
+    onError?: (error: any) => void;
+    width?: number;
+    heading?: string;
+    dialogText?: string;
+    fileInputText?: string;
+    fileInputPlaceholder?: string;
+    uploadText?: string;
+    cancelText?: string;
+    testId?: string;
+};
+
 declare interface ISortCell extends TCommonCell {
     type: TCellType;
     hasSort?: boolean;
@@ -1666,6 +1686,8 @@ export declare const SideBar: React_2.MemoExoticComponent<({ options, startOpen,
 
 export declare const Slider: ({ name, label, width, labelWidth, value, min, max, step, marks, showArrows, showTooltip, tooltipFormatter, disabled, range, small, vertical, onChange, }: ISliderProps) => JSX_2.Element;
 
+export declare const SmartUploadModal: ({ visible, prompt, onCloseModal, onUpload, onComplete, onFailed, onError, width, heading, dialogText, fileInputText, fileInputPlaceholder, uploadText, cancelText, testId, }: ISmartUploadModalProps) => JSX_2.Element;
+
 export declare const Spacer: ({ height, width, flex, }: ISpacerProps) => JSX_2.Element;
 
 export declare const Spinner: ({ small, colored, dark, tiny, }: ISpinnerProps) => JSX_2.Element;

package/dist/index.js

@@ -11,7 +11,7 @@ import * as PropTypes from "prop-types";
 import PropTypes__default from "prop-types";
 import ReactDOM, { createPortal, unstable_batchedUpdates, render } from "react-dom";
 import _$1, { set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$2, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$2, isObject as isObject$5, isObjectLike, has as has$1, isEqual as isEqual$4 } from "lodash";
-import { roundToFixed, validateNumber, cleanNumStr, unitFromQuantity, isValueWithUnit, withUnit, convertSamePrecision, getValue as getValue$1, getUnit, KNOWN_UNITS, split as split$1, checkAndCleanDecimalComma, label as label$b, altUnitsList, getUnitsForQuantity, convertAndGetValue, isScientificStringNum, roundToPrecision } from "@oliasoft-open-source/units";
+import { roundToFixed, validateNumber, cleanNumStr, unitFromQuantity, isValueWithUnit, withUnit, convertSamePrecision, getValue as getValue$1, getUnit, KNOWN_UNITS, split as split$1, checkAndCleanDecimalComma, label as label$b, altUnitsList, getUnitsForQuantity, convertAndGetValue, isScientificStringNum, roundToPrecision, roundByMagnitudeToFixed } from "@oliasoft-open-source/units";
 import { isValueWithUnit as isValueWithUnit$1 } from "@oliasoft-open-source/units/dist/units";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x2) {
@@ -70839,6 +70839,154 @@ const UnitTable = ({
     }
   );
 };
+const INTERVAL_TIME = 250;
+const REQUEST_TIME = 4e4;
+const FINISH_INTERVALS = 20;
+const FINISH_TIME = 500;
+const SmartUploadModal = ({
+  visible,
+  prompt,
+  onCloseModal,
+  onUpload,
+  onComplete,
+  onFailed,
+  onError: onError3,
+  width: width2,
+  heading: heading2,
+  dialogText,
+  fileInputText,
+  fileInputPlaceholder,
+  uploadText,
+  cancelText,
+  testId
+}) => {
+  const [file, setFile] = useState(null);
+  const [isFetching, setFetching] = useState(false);
+  const [requestTimer, setRequestTimer] = useState(0);
+  let timer = 0;
+  const updateTimer = () => {
+    const newTime = timer + INTERVAL_TIME;
+    timer = newTime;
+    setRequestTimer(timer);
+  };
+  const finishTimer = (deltaTime) => {
+    let newTime = timer + deltaTime;
+    if (newTime >= 0.99 * REQUEST_TIME) {
+      newTime = REQUEST_TIME;
+    }
+    timer = newTime;
+    setRequestTimer(timer);
+  };
+  useEffect(() => {
+    setFile(null);
+  }, [visible]);
+  const handleFileChange = (event) => {
+    if (!event.target.value)
+      return;
+    setFile(event.target.value);
+  };
+  const handleUpload = async () => {
+    setRequestTimer(0);
+    const id2 = setInterval(updateTimer, INTERVAL_TIME);
+    try {
+      if (!file)
+        return;
+      setFetching(true);
+      const data = await onUpload(prompt, file);
+      if (!visible)
+        return;
+      if (data) {
+        clearInterval(id2);
+        const id22 = setInterval(
+          finishTimer,
+          FINISH_TIME / FINISH_INTERVALS,
+          (REQUEST_TIME - timer) / (FINISH_INTERVALS - 1)
+        );
+        setTimeout(() => {
+          onComplete(data);
+          clearInterval(id22);
+          setFetching(false);
+        }, FINISH_TIME);
+      } else {
+        onFailed == null ? void 0 : onFailed();
+        setFetching(false);
+      }
+    } catch (error2) {
+      onError3 == null ? void 0 : onError3(error2);
+      setFetching(false);
+    } finally {
+      clearInterval(id2);
+    }
+  };
+  const onConfirm = () => {
+    handleUpload();
+  };
+  const onClose = () => {
+    onCloseModal();
+  };
+  const content2 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(Text, { children: dialogText || "Upload file and extract data using a LLM" }),
+    /* @__PURE__ */ jsx(Spacer, {}),
+    /* @__PURE__ */ jsx(
+      FileInput,
+      {
+        placeholder: fileInputPlaceholder || "No file",
+        label: fileInputText || "Select",
+        file: file || void 0,
+        onChange: handleFileChange,
+        testId: `${testId}-file-input`,
+        accept: "image/*"
+      }
+    ),
+    isFetching && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(Spacer, {}),
+      /* @__PURE__ */ jsx(
+        ProgressBar$1,
+        {
+          percentage: roundByMagnitudeToFixed(
+            100 * requestTimer / REQUEST_TIME,
+            3
+          )
+        }
+      )
+    ] })
+  ] });
+  const footer2 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        label: uploadText || "Upload",
+        colored: true,
+        onClick: onConfirm,
+        disabled: !file || isFetching,
+        testId: `${testId}-button-upload`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        label: cancelText || "Cancel",
+        onClick: onClose,
+        testId: `${testId}-button-cancel`
+      }
+    )
+  ] });
+  useKeyboardEvent("Escape", () => onClose());
+  return /* @__PURE__ */ jsx(Modal, { visible, centered: true, children: /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      dialog: {
+        scroll: true,
+        heading: heading2 || "Smart Upload",
+        content: content2,
+        footer: footer2,
+        onClose,
+        width: width2 || 350,
+        testId
+      }
+    }
+  ) });
+};
 export {
   Accordion,
   AccordionWithDefaultToggle,
@@ -70903,6 +71051,7 @@ export {
   Select,
   SideBar,
   Slider,
+  SmartUploadModal,
   Spacer,
   Spinner$1 as Spinner,
   Table,