@farmzone/fz-react-ui 1.0.4 → 1.0.6

package/dist/index.cjs

@@ -5019,7 +5019,7 @@ function Table(props) {
           id: `${col.key}-body`,
           "data-row-cell": "true",
           "data-col-key": col.key,
-          className: `${isCheckbox ? "p-0" : "px-2 py-4"} whitespace-nowrap text-sm text-gray-900 border-r border-b border-gray-200 last:border-r-0 bg-inherit group-hover:bg-gray-100 transition-all`,
+          className: `${isCheckbox ? "p-0" : "px-2 py-3"} whitespace-nowrap text-sm text-gray-900 border-r border-b border-gray-200 last:border-r-0 bg-inherit group-hover:bg-gray-100 transition-all`,
           style: {
             width,
             minWidth: minWidth || width,
@@ -6147,14 +6147,53 @@ function resolveValueColSpan(colspan) {
   const span = colspan ?? 10;
   return COL_SPAN_CLASS[span] ?? COL_SPAN_CLASS[10];
 }
+var THREE_DIGIT_AREA_CODES = /* @__PURE__ */ new Set([
+  "031",
+  "032",
+  "033",
+  "041",
+  "042",
+  "043",
+  "051",
+  "052",
+  "053",
+  "054",
+  "055",
+  "061",
+  "062",
+  "063"
+]);
 function formatPhoneNumber(value) {
-  const numbers = value.replace(/\D/g, "");
-  if (numbers.length <= 3) return numbers;
-  if (numbers.length <= 7) return `${numbers.slice(0, 3)}-${numbers.slice(3)}`;
-  if (numbers.length <= 11) {
-    return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7)}`;
+  let digits = value.replace(/\D/g, "");
+  if (digits.startsWith("02")) {
+    if (digits.length > 2 && digits.length <= 6) {
+      return `${digits.slice(0, 2)}-${digits.slice(2)}`;
+    }
+    if (digits.length > 6) {
+      return `${digits.slice(0, 2)}-${digits.slice(2, 6)}-${digits.slice(6)}`;
+    }
+  } else if (THREE_DIGIT_AREA_CODES.has(digits.slice(0, 3))) {
+    if (digits.length > 3 && digits.length <= 6) {
+      return `${digits.slice(0, 3)}-${digits.slice(3)}`;
+    }
+    if (digits.length > 6) {
+      return `${digits.slice(0, 3)}-${digits.slice(3, 6)}-${digits.slice(6)}`;
+    }
+  } else {
+    if (digits.length > 3 && digits.length <= 7) {
+      return `${digits.slice(0, 3)}-${digits.slice(3)}`;
+    }
+    if (digits.length > 7) {
+      return `${digits.slice(0, 3)}-${digits.slice(3, 7)}-${digits.slice(7)}`;
+    }
   }
-  return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7, 11)}`;
+  return digits;
+}
+function resolvePhoneMaxLength(formattedValue) {
+  if (formattedValue.startsWith("02") || THREE_DIGIT_AREA_CODES.has(formattedValue.slice(0, 3))) {
+    return 12;
+  }
+  return 13;
 }
 function formatNumberWithCommas(value) {
   const numStr = String(value).replace(/,/g, "");
@@ -6978,11 +7017,13 @@ function PhoneField(props) {
     hasError = false
   } = props;
   const { placeholder = "010-0000-0000", disabled = false, readOnly = false, className = "" } = config;
+  const phoneValue = String(value ?? "");
+  const phoneMaxLength = resolvePhoneMaxLength(phoneValue);
   const handleChange = (e) => {
     onChange(formatPhoneNumber(e.target.value));
   };
   if (readOnly) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: String(value ?? "") || "\u2014" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: phoneValue || "\u2014" }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx(
     Input2,
@@ -6990,12 +7031,12 @@ function PhoneField(props) {
       name,
       ref,
       onBlur,
-      value: String(value ?? ""),
+      value: phoneValue,
       type: "text",
       placeholder,
       disabled,
       readOnly,
-      maxLength: 13,
+      maxLength: phoneMaxLength,
       status: "default",
       className: formControlClass(hasError),
       bare: true,
@@ -7636,40 +7677,35 @@ function PageFilter(props) {
     values,
     primaryColor
   } = props;
-  const [localValues, setLocalValues] = React6.useState(values);
   const initialValuesRef = React6.useRef(values);
-  const updateLocal = (updates) => {
-    setLocalValues((prev) => ({ ...prev, ...updates }));
-  };
   const handleInputChange = (key) => (e) => {
-    updateLocal({ [key]: e.target.value });
+    onChange({ [key]: e.target.value });
   };
   const handleSelectChange = (key) => (value) => {
-    updateLocal({ [key]: value });
+    onChange({ [key]: value });
   };
   const handleRadioChange = (key) => (value) => {
-    updateLocal({ [key]: value });
+    onChange({ [key]: value });
   };
   const handleDateChange = (key) => (date) => {
-    updateLocal({ [key]: date });
+    onChange({ [key]: date });
   };
   const handleRangeChangeCurried = (startKey, endKey) => (start, end) => {
-    updateLocal({ [startKey]: start, [endKey]: end });
+    onChange({ [startKey]: start, [endKey]: end });
   };
   const handleCheckboxChange = (key) => (checked) => {
-    updateLocal({ [key]: checked ? "true" : "false" });
+    onChange({ [key]: checked ? "true" : "false" });
   };
   const handleSubmit = () => {
-    onChange(localValues);
     onSubmit();
   };
   const handleReset = () => {
-    setLocalValues(initialValuesRef.current);
+    onChange(initialValuesRef.current);
     onReset?.();
   };
   const renderFilterOption = (option, gap, index) => {
     const optionKey = option.key;
-    const currentValue = String(localValues[optionKey] ?? "");
+    const currentValue = String(values[optionKey] ?? "");
     const rowGap2 = index !== 0 ? option.label ? gap : 5 : 0;
     switch (option.type) {
       case "input":
@@ -7744,10 +7780,7 @@ function PageFilter(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cn(
-        "flex flex-col gap-3 bg-white py-3 px-5 border-t-main border-t-1 shadow-panel",
-        containerClassName
-      ),
+      className: cn("flex flex-col gap-3 bg-white py-3 px-5 border-t-main border-t-1 shadow-panel", containerClassName),
       style: primaryColor ? { borderTopColor: primaryColor } : void 0,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex flex-col", style: { gap: `${colGap}px` }, children: rows.map((row, ix) => {
         const isLastRow = rows.length - 1 === ix;
@@ -9841,6 +9874,144 @@ function useScrollToTop(containerId) {
   return scrollToTop;
 }
 
+// src/hooks/useParams/config/utils.ts
+function paramsToSearchParams(params) {
+  const searchParams = new URLSearchParams();
+  Object.entries(params).forEach(([key, value]) => {
+    if (value === null || value === void 0) {
+      return;
+    }
+    if (Array.isArray(value)) {
+      value.forEach((item) => searchParams.append(key, String(item)));
+    } else if (value !== "") {
+      searchParams.set(key, String(value));
+    }
+  });
+  return searchParams;
+}
+function useParams(initialParams) {
+  if (!initialParams) {
+    throw new Error("initialParams is required");
+  }
+  const [params, setParams] = React6.useState(initialParams);
+  const [localParams, setLocalParams] = React6.useState(initialParams);
+  const [searchParams, setSearchParams] = reactRouter.useSearchParams();
+  const isInitializedRef = React6.useRef(false);
+  const getInitialState = React6.useCallback(() => {
+    const result = { ...initialParams };
+    Object.keys(initialParams).forEach((key) => {
+      const initialValue = initialParams[key];
+      if (Array.isArray(initialValue)) {
+        const urlValue = searchParams.getAll(key);
+        if (urlValue.length > 0) {
+          result[key] = urlValue;
+        }
+      } else {
+        const urlValue = searchParams.get(key);
+        if (urlValue !== null) {
+          if (urlValue === "null") {
+            result[key] = null;
+          } else if (urlValue === "undefined") {
+            result[key] = void 0;
+          } else {
+            result[key] = urlValue;
+          }
+        }
+      }
+    });
+    return result;
+  }, [initialParams, searchParams]);
+  React6.useEffect(() => {
+    if (!isInitializedRef.current) {
+      const initialState = getInitialState();
+      setLocalParams(initialState);
+      setParams(initialState);
+      if (!searchParams.toString()) {
+        const newSearchParams = paramsToSearchParams(initialParams);
+        setSearchParams(newSearchParams, { replace: true });
+      }
+      isInitializedRef.current = true;
+    }
+  }, [getInitialState, initialParams, searchParams, setSearchParams]);
+  const updateLocalParam = React6.useCallback(
+    (key, value) => {
+      setLocalParams((prev) => ({
+        ...prev,
+        [key]: value
+      }));
+    },
+    [setLocalParams]
+  );
+  const updateParams = React6.useCallback(
+    (updatedParams) => {
+      const newParams = {
+        ...params,
+        ...updatedParams
+      };
+      setParams(newParams);
+      setLocalParams(newParams);
+      setSearchParams(paramsToSearchParams(newParams));
+    },
+    [params, setSearchParams]
+  );
+  const updateParam = React6.useCallback(
+    (key, value) => {
+      const newParams = {
+        ...params,
+        [key]: value
+      };
+      setParams(newParams);
+      setLocalParams(newParams);
+      setSearchParams(paramsToSearchParams(newParams));
+    },
+    [params, setSearchParams]
+  );
+  const update = React6.useCallback(() => {
+    const paramsWithResetPage = {
+      ...localParams,
+      page: 0
+    };
+    const newSearchParams = paramsToSearchParams(paramsWithResetPage);
+    setSearchParams(newSearchParams);
+    setParams(paramsWithResetPage);
+    setLocalParams(paramsWithResetPage);
+  }, [localParams, setSearchParams]);
+  const reset = React6.useCallback(() => {
+    setLocalParams(initialParams);
+    setParams(initialParams);
+    const newSearchParams = paramsToSearchParams(initialParams);
+    setSearchParams(newSearchParams);
+  }, [initialParams, setSearchParams]);
+  const handleSortChange = React6.useCallback(
+    (sortKey, sortOrder) => {
+      const newParams = {
+        ...params,
+        sortBy: sortKey,
+        sortOrder
+      };
+      updateParams(newParams);
+    },
+    [updateParams, params]
+  );
+  const sortOption = React6.useMemo(() => {
+    if (!params.sortBy || !params.sortOrder) return void 0;
+    return {
+      sortKey: params.sortBy,
+      sortOrder: params.sortOrder
+    };
+  }, [params.sortBy, params.sortOrder]);
+  return {
+    localParams,
+    params,
+    updateParam,
+    updateLocalParam,
+    update,
+    reset,
+    handleSortChange,
+    sortOption
+  };
+}
+
 exports.ArrowIcon = ArrowIcon;
 exports.Badge = Badge;
 exports.BaseUploader = BaseUploader;
@@ -9931,6 +10102,7 @@ exports.useDetailController = useDetailController;
 exports.useFilePreviewViewer = useFilePreviewViewer;
 exports.useModal = useModal;
 exports.useMultiTabStore = useMultiTabStore;
+exports.useParams = useParams;
 exports.useScrollToTop = useScrollToTop;
 exports.useStableImageSrc = useStableImageSrc;
 exports.useToast = useToast;