@farmzone/fz-react-ui 1.0.4 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -5019,7 +5019,7 @@ function Table(props) {
5019
5019
  id: `${col.key}-body`,
5020
5020
  "data-row-cell": "true",
5021
5021
  "data-col-key": col.key,
5022
- 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`,
5022
+ 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`,
5023
5023
  style: {
5024
5024
  width,
5025
5025
  minWidth: minWidth || width,
@@ -6147,14 +6147,53 @@ function resolveValueColSpan(colspan) {
6147
6147
  const span = colspan ?? 10;
6148
6148
  return COL_SPAN_CLASS[span] ?? COL_SPAN_CLASS[10];
6149
6149
  }
6150
+ var THREE_DIGIT_AREA_CODES = /* @__PURE__ */ new Set([
6151
+ "031",
6152
+ "032",
6153
+ "033",
6154
+ "041",
6155
+ "042",
6156
+ "043",
6157
+ "051",
6158
+ "052",
6159
+ "053",
6160
+ "054",
6161
+ "055",
6162
+ "061",
6163
+ "062",
6164
+ "063"
6165
+ ]);
6150
6166
  function formatPhoneNumber(value) {
6151
- const numbers = value.replace(/\D/g, "");
6152
- if (numbers.length <= 3) return numbers;
6153
- if (numbers.length <= 7) return `${numbers.slice(0, 3)}-${numbers.slice(3)}`;
6154
- if (numbers.length <= 11) {
6155
- return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7)}`;
6167
+ let digits = value.replace(/\D/g, "");
6168
+ if (digits.startsWith("02")) {
6169
+ if (digits.length > 2 && digits.length <= 6) {
6170
+ return `${digits.slice(0, 2)}-${digits.slice(2)}`;
6171
+ }
6172
+ if (digits.length > 6) {
6173
+ return `${digits.slice(0, 2)}-${digits.slice(2, 6)}-${digits.slice(6)}`;
6174
+ }
6175
+ } else if (THREE_DIGIT_AREA_CODES.has(digits.slice(0, 3))) {
6176
+ if (digits.length > 3 && digits.length <= 6) {
6177
+ return `${digits.slice(0, 3)}-${digits.slice(3)}`;
6178
+ }
6179
+ if (digits.length > 6) {
6180
+ return `${digits.slice(0, 3)}-${digits.slice(3, 6)}-${digits.slice(6)}`;
6181
+ }
6182
+ } else {
6183
+ if (digits.length > 3 && digits.length <= 7) {
6184
+ return `${digits.slice(0, 3)}-${digits.slice(3)}`;
6185
+ }
6186
+ if (digits.length > 7) {
6187
+ return `${digits.slice(0, 3)}-${digits.slice(3, 7)}-${digits.slice(7)}`;
6188
+ }
6189
+ }
6190
+ return digits;
6191
+ }
6192
+ function resolvePhoneMaxLength(formattedValue) {
6193
+ if (formattedValue.startsWith("02") || THREE_DIGIT_AREA_CODES.has(formattedValue.slice(0, 3))) {
6194
+ return 12;
6156
6195
  }
6157
- return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7, 11)}`;
6196
+ return 13;
6158
6197
  }
6159
6198
  function formatNumberWithCommas(value) {
6160
6199
  const numStr = String(value).replace(/,/g, "");
@@ -6978,11 +7017,13 @@ function PhoneField(props) {
6978
7017
  hasError = false
6979
7018
  } = props;
6980
7019
  const { placeholder = "010-0000-0000", disabled = false, readOnly = false, className = "" } = config;
7020
+ const phoneValue = String(value ?? "");
7021
+ const phoneMaxLength = resolvePhoneMaxLength(phoneValue);
6981
7022
  const handleChange = (e) => {
6982
7023
  onChange(formatPhoneNumber(e.target.value));
6983
7024
  };
6984
7025
  if (readOnly) {
6985
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: String(value ?? "") || "\u2014" }) });
7026
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: phoneValue || "\u2014" }) });
6986
7027
  }
6987
7028
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx(
6988
7029
  Input2,
@@ -6990,12 +7031,12 @@ function PhoneField(props) {
6990
7031
  name,
6991
7032
  ref,
6992
7033
  onBlur,
6993
- value: String(value ?? ""),
7034
+ value: phoneValue,
6994
7035
  type: "text",
6995
7036
  placeholder,
6996
7037
  disabled,
6997
7038
  readOnly,
6998
- maxLength: 13,
7039
+ maxLength: phoneMaxLength,
6999
7040
  status: "default",
7000
7041
  className: formControlClass(hasError),
7001
7042
  bare: true,
@@ -9841,6 +9882,144 @@ function useScrollToTop(containerId) {
9841
9882
  return scrollToTop;
9842
9883
  }
9843
9884
 
9885
+ // src/hooks/useParams/config/utils.ts
9886
+ function paramsToSearchParams(params) {
9887
+ const searchParams = new URLSearchParams();
9888
+ Object.entries(params).forEach(([key, value]) => {
9889
+ if (value === null || value === void 0) {
9890
+ return;
9891
+ }
9892
+ if (Array.isArray(value)) {
9893
+ value.forEach((item) => searchParams.append(key, String(item)));
9894
+ } else if (value !== "") {
9895
+ searchParams.set(key, String(value));
9896
+ }
9897
+ });
9898
+ return searchParams;
9899
+ }
9900
+ function useParams(initialParams) {
9901
+ if (!initialParams) {
9902
+ throw new Error("initialParams is required");
9903
+ }
9904
+ const [params, setParams] = React6.useState(initialParams);
9905
+ const [localParams, setLocalParams] = React6.useState(initialParams);
9906
+ const [searchParams, setSearchParams] = reactRouter.useSearchParams();
9907
+ const isInitializedRef = React6.useRef(false);
9908
+ const getInitialState = React6.useCallback(() => {
9909
+ const result = { ...initialParams };
9910
+ Object.keys(initialParams).forEach((key) => {
9911
+ const initialValue = initialParams[key];
9912
+ if (Array.isArray(initialValue)) {
9913
+ const urlValue = searchParams.getAll(key);
9914
+ if (urlValue.length > 0) {
9915
+ result[key] = urlValue;
9916
+ }
9917
+ } else {
9918
+ const urlValue = searchParams.get(key);
9919
+ if (urlValue !== null) {
9920
+ if (urlValue === "null") {
9921
+ result[key] = null;
9922
+ } else if (urlValue === "undefined") {
9923
+ result[key] = void 0;
9924
+ } else {
9925
+ result[key] = urlValue;
9926
+ }
9927
+ }
9928
+ }
9929
+ });
9930
+ return result;
9931
+ }, [initialParams, searchParams]);
9932
+ React6.useEffect(() => {
9933
+ if (!isInitializedRef.current) {
9934
+ const initialState = getInitialState();
9935
+ setLocalParams(initialState);
9936
+ setParams(initialState);
9937
+ if (!searchParams.toString()) {
9938
+ const newSearchParams = paramsToSearchParams(initialParams);
9939
+ setSearchParams(newSearchParams, { replace: true });
9940
+ }
9941
+ isInitializedRef.current = true;
9942
+ }
9943
+ }, [getInitialState, initialParams, searchParams, setSearchParams]);
9944
+ const updateLocalParam = React6.useCallback(
9945
+ (key, value) => {
9946
+ setLocalParams((prev) => ({
9947
+ ...prev,
9948
+ [key]: value
9949
+ }));
9950
+ },
9951
+ [setLocalParams]
9952
+ );
9953
+ const updateParams = React6.useCallback(
9954
+ (updatedParams) => {
9955
+ const newParams = {
9956
+ ...params,
9957
+ ...updatedParams
9958
+ };
9959
+ setParams(newParams);
9960
+ setLocalParams(newParams);
9961
+ setSearchParams(paramsToSearchParams(newParams));
9962
+ },
9963
+ [params, setSearchParams]
9964
+ );
9965
+ const updateParam = React6.useCallback(
9966
+ (key, value) => {
9967
+ const newParams = {
9968
+ ...params,
9969
+ [key]: value
9970
+ };
9971
+ setParams(newParams);
9972
+ setLocalParams(newParams);
9973
+ setSearchParams(paramsToSearchParams(newParams));
9974
+ },
9975
+ [params, setSearchParams]
9976
+ );
9977
+ const update = React6.useCallback(() => {
9978
+ const paramsWithResetPage = {
9979
+ ...localParams,
9980
+ page: 0
9981
+ };
9982
+ const newSearchParams = paramsToSearchParams(paramsWithResetPage);
9983
+ setSearchParams(newSearchParams);
9984
+ setParams(paramsWithResetPage);
9985
+ setLocalParams(paramsWithResetPage);
9986
+ }, [localParams, setSearchParams]);
9987
+ const reset = React6.useCallback(() => {
9988
+ setLocalParams(initialParams);
9989
+ setParams(initialParams);
9990
+ const newSearchParams = paramsToSearchParams(initialParams);
9991
+ setSearchParams(newSearchParams);
9992
+ }, [initialParams, setSearchParams]);
9993
+ const handleSortChange = React6.useCallback(
9994
+ (sortKey, sortOrder) => {
9995
+ const newParams = {
9996
+ ...params,
9997
+ sortBy: sortKey,
9998
+ sortOrder
9999
+ };
10000
+ updateParams(newParams);
10001
+ },
10002
+ [updateParams, params]
10003
+ );
10004
+ const sortOption = React6.useMemo(() => {
10005
+ if (!params.sortBy || !params.sortOrder) return void 0;
10006
+ return {
10007
+ sortKey: params.sortBy,
10008
+ sortOrder: params.sortOrder
10009
+ };
10010
+ }, [params.sortBy, params.sortOrder]);
10011
+ return {
10012
+ localParams,
10013
+ params,
10014
+ updateParam,
10015
+ updateLocalParam,
10016
+ update,
10017
+ reset,
10018
+ handleSortChange,
10019
+ sortOption
10020
+ };
10021
+ }
10022
+
9844
10023
  exports.ArrowIcon = ArrowIcon;
9845
10024
  exports.Badge = Badge;
9846
10025
  exports.BaseUploader = BaseUploader;
@@ -9931,6 +10110,7 @@ exports.useDetailController = useDetailController;
9931
10110
  exports.useFilePreviewViewer = useFilePreviewViewer;
9932
10111
  exports.useModal = useModal;
9933
10112
  exports.useMultiTabStore = useMultiTabStore;
10113
+ exports.useParams = useParams;
9934
10114
  exports.useScrollToTop = useScrollToTop;
9935
10115
  exports.useStableImageSrc = useStableImageSrc;
9936
10116
  exports.useToast = useToast;