@eztrak/shared 0.7.0 → 0.7.3

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  CustomCellEditor: () => CustomCellEditor,
   CustomPagination: () => CustomPagination,
   EztrakTabs: () => EztrakTabs,
   Loader: () => Loader,
@@ -1078,7 +1079,7 @@ function SearchInput({
     {
       onSubmit: handleSearch,
       className: cn(
-        "flex items-center justify-between bg-white rounded-md px-2 h-11",
+        "flex items-center justify-between bg-white rounded-xl px-2 h-11 border",
         searchWrapperClass
       ),
       children: [
@@ -1314,8 +1315,223 @@ function Modal({
   }
   return (0, import_react_dom.createPortal)(modalContent, modalRoot);
 }
+
+// src/components/cell-editor/CustomCellEditor.tsx
+var import_react6 = require("react");
+var import_react_hot_toast2 = __toESM(require("react-hot-toast"));
+var import_fa2 = require("react-icons/fa");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ButtonSpinner() {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "svg",
+    {
+      className: "animate-spin",
+      width: 8,
+      height: 8,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "white",
+            strokeWidth: "4",
+            strokeOpacity: "0.25"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "path",
+          {
+            d: "M12 2a10 10 0 0 1 10 10",
+            stroke: "white",
+            strokeWidth: "4",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function normalizeInitialValue(initialValue, inputType) {
+  if (inputType === "date" && initialValue != null && initialValue !== "") {
+    return toDateInputValue(String(initialValue));
+  }
+  if (initialValue == null) {
+    return "";
+  }
+  return initialValue;
+}
+var CustomCellEditor = (0, import_react6.forwardRef)(
+  ({
+    value: initialValue,
+    name,
+    inputType = "text",
+    stopEditing,
+    entityId,
+    entityName = "Record",
+    onSave,
+    dropdownOptions = [],
+    className
+  }, ref) => {
+    const normalizedInitial = normalizeInitialValue(initialValue, inputType);
+    const [value, setValue] = (0, import_react6.useState)(normalizedInitial);
+    const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
+    const inputRef = (0, import_react6.useRef)(null);
+    const selectRef = (0, import_react6.useRef)(null);
+    (0, import_react6.useImperativeHandle)(ref, () => ({
+      getValue: () => value,
+      isCancelBeforeStart: () => false,
+      isCancelAfterEnd: () => false
+    }));
+    (0, import_react6.useEffect)(() => {
+      if (inputType === "dropdown") {
+        const el2 = selectRef.current;
+        if (el2) {
+          el2.focus();
+        }
+        return;
+      }
+      const el = inputRef.current;
+      if (!el) {
+        return;
+      }
+      el.focus();
+      if (inputType !== "date") {
+        el.select();
+      }
+    }, [inputType]);
+    const handleSave = async () => {
+      if (isLoading) {
+        return;
+      }
+      if (String(value) === String(normalizedInitial)) {
+        stopEditing();
+        return;
+      }
+      if (!entityId) {
+        import_react_hot_toast2.default.error("Entity ID is required");
+        return;
+      }
+      if (!name) {
+        import_react_hot_toast2.default.error("Property name is required");
+        return;
+      }
+      setIsLoading(true);
+      const payloadValue = inputType === "number" && value !== "" ? parseFloat(String(value)) : value;
+      const payload = {
+        propertyName: name,
+        propertyValue: payloadValue,
+        entityId,
+        entityName
+      };
+      try {
+        await onSave(payload);
+        import_react_hot_toast2.default.success("Record updated successfully");
+        stopEditing();
+      } catch (error) {
+        console.error("Update error:", error);
+        const errorMessage = error instanceof Error ? error.message : "Failed to update record";
+        import_react_hot_toast2.default.error(errorMessage);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    const handleCancel = () => {
+      setValue(normalizedInitial);
+      stopEditing();
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        handleSave();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        handleCancel();
+      }
+    };
+    const handleInputChange = (event) => {
+      let newValue = event.target.value;
+      if (inputType === "number") {
+        newValue = newValue.replace(/[^0-9.-]/g, "");
+      }
+      setValue(newValue);
+    };
+    const handleDropdownChange = (event) => {
+      setValue(event.target.value);
+    };
+    const isSaveDisabled = isLoading || String(value) === String(normalizedInitial);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        className: cn(
+          "flex items-center w-full h-full min-h-0 overflow-hidden gap-0.5 min-w-[80px]",
+          className
+        ),
+        children: [
+          inputType === "dropdown" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "select",
+            {
+              ref: selectRef,
+              value: String(value),
+              onChange: handleDropdownChange,
+              onKeyDown: handleKeyDown,
+              className: "flex-1 h-full p-0 text-[10px] border border-gray-300 rounded-sm focus:outline-none focus:ring-1 focus:ring-blue-400 min-w-0 truncate",
+              disabled: isLoading,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", disabled: true, children: "Select option..." }),
+                dropdownOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+              ]
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: inputType,
+              value: String(value),
+              onChange: handleInputChange,
+              onKeyDown: handleKeyDown,
+              className: "flex-1 h-full p-0 text-[10px] border border-gray-300 rounded-sm focus:outline-none focus:ring-1 focus:ring-blue-400 min-w-0 truncate",
+              placeholder: "...",
+              disabled: isLoading
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center shrink-0 gap-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: handleSave,
+                disabled: isSaveDisabled,
+                className: "flex items-center justify-center w-4 h-4 text-white bg-green-500 rounded-sm hover:bg-green-600 disabled:opacity-50",
+                title: "Save (Enter)",
+                children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonSpinner, {}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fa2.FaCheck, { size: 7, "aria-hidden": true })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: handleCancel,
+                disabled: isLoading,
+                className: "flex items-center justify-center w-4 h-4 text-white bg-red-500 rounded-sm hover:bg-red-600 disabled:opacity-50",
+                title: "Cancel (Escape)",
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fa2.FaTimes, { size: 7, "aria-hidden": true })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+CustomCellEditor.displayName = "CustomCellEditor";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CustomCellEditor,
   CustomPagination,
   EztrakTabs,
   Loader,