npm - @gateweb/react-utils - Versions diffs - 0.0.3 → 0.0.5 - Mend

@gateweb/react-utils 0.0.3 → 0.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.

Files changed (9) hide show

package/dist/cjs/index.d.ts CHANGED Viewed

@@ -1,3 +1,6 @@
+import { TExtractValueType } from './types.js';
+export * from './types.js';
 type CamelToPascal<S extends string> = S extends `${infer Head}${infer Tail}` ? `${Uppercase<Head>}${Tail}` : S;
 /**
  * convert CamelCase string to PascalCase string
@@ -203,6 +206,68 @@ declare const rocEraToAd: (dateString: string, format?: string) => string;
  */
 declare const adToRocEra: (dateString: string, format?: string) => string;
+/**
+ * 將指定格式的物件轉換成類似 enum 的物件
+ *
+ * @param enumObject enum 物件
+ * @param valueKey value 的 key
+ *
+ * @example
+ *
+ * ```js
+ * const myObj = {
+ *    A: { value: 'a' },
+ *    B: { value: 'b', other: 'other' },
+ * }
+ *
+ * const enumCode = extractEnumLikeObject(myObj, 'value');
+ * console.log(enumCode); // { A: 'a', B: 'b' }
+ * ```
+ */
+declare const extractEnumLikeObject: <T extends Record<string, { [P in K]: any; }>, K extends string>(enumObject: T, valueKey: K) => { [key in keyof T]: T[key][K]; };
+/**
+ * 將指定格式的物件生成 enum 物件、enum 列表、取得 label 的方法
+ *
+ * 輸入的物件格式為
+ *
+ * ```ts
+ * { key: { value: string, label: string }, key2: { value: string, label: string }, ... }
+ * ```
+ *
+ * 會生成以下三個物件
+ *
+ * enum 物件 - 根據 value 生成的 enum 物件
+ *
+ * enum 列表 - 根據 value 與 label 生成的列表
+ *
+ * 取得 label 的方法 - 傳入 value 可以取得對應的 label
+ *
+ * @param obj 要處理的物件
+ * @param name 生成的 enum 名稱
+ *
+ * @example
+ *
+ * ```ts
+ * const Status = { Enabled: { value: 'enabled', label: '啟用' }, Disabled: { value: 'disabled', label: '停用' } };
+ *
+ * const { EnumStatus, StatusList, getStatusLabel } = createEnumLikeObject(Status, 'Status');
+ *
+ * console.log(EnumStatus); // { Enabled: 'enabled', Disabled: 'disabled' }
+ *
+ * console.log(StatusList); // [ { key: 'Enabled', value: 'enabled', label: '啟用' }, { key: 'Disabled', value: 'disabled', label: '停用' } ]
+ *
+ * console.log(getStatusLabel('enabled')); // '啟用'
+ * ```
+ */
+declare const createEnumLikeObject: <T extends Record<string, {
+    value: any;
+    label: string;
+}>, N extends string>(obj: T, name: N) => { [K in `Enum${N}` | `${N}List` | `get${N}Label`]: K extends `Enum${N}` ? { [key in keyof T]: T[key]["value"]; } : K extends `${N}List` ? {
+    value: any;
+    label: string;
+    key: string;
+}[] : (value: TExtractValueType<T, "value">) => string | TExtractValueType<T, "value">; };
 /**
  * 檢查檔案是否為合法的 MIME 類型
  *
@@ -600,28 +665,4 @@ declare const getLocalStorage: <T>(key: string, deCode?: boolean) => T | undefin
  */
 declare const setLocalStorage: (key: string, value: Record<string, any>, enCode?: boolean) => void;
-/**
- * 從對象類型中提取特定屬性的值類型。
- *
- * @template T 要處理的對象類型
- * @template K 要提取的屬性名（字符串字面量類型）
- *
- * @description
- * 這個類型用於從一個對象類型 T 中提取指定屬性 K 的值類型。
- * T 應該是一個對象，其每個屬性都是另一個包含 K 屬性的對象。
- * 如果 T 不符合這個結構，或者指定的屬性 K 不存在，則返回 never。
- *
- * @example
- * type Obj = {
- *   a: { value: string },
- *   b: { value: number }
- * };
- * type Result = ExtractValueType<Obj, 'value'>; // string | number
- *
- * @returns 返回 T 中所有 K 屬性值的聯合類型，如果不符合條件則返回 never
- */
-type TExtractValueType<T, K extends string> = T extends Record<string, {
-    [P in K]: infer R;
-}> ? R : never;
-export { type TCountdownActions, type TExtractValueType, adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, debounce, downloadFile, formatAmount, formatStarMask, generatePeriodArray, getCurrentPeriod, getLocalStorage, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, omit, omitByValue, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, rocEraToAd, setLocalStorage, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, useCountdown, validTaxId, validateDateString, validateFileType };
+export { type TCountdownActions, adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, createEnumLikeObject, debounce, downloadFile, extractEnumLikeObject, formatAmount, formatStarMask, generatePeriodArray, getCurrentPeriod, getLocalStorage, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, omit, omitByValue, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, rocEraToAd, setLocalStorage, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, useCountdown, validTaxId, validateDateString, validateFileType };

package/dist/cjs/index.js CHANGED Viewed

@@ -307,6 +307,78 @@ const transformObjectKey = (obj, transformFunName)=>{
     return dayjs__default.default(dateString, format).add(-1911, 'year').format(format).substring(1);
 };
+/**
+ * 將指定格式的物件轉換成類似 enum 的物件
+ *
+ * @param enumObject enum 物件
+ * @param valueKey value 的 key
+ *
+ * @example
+ *
+ * ```js
+ * const myObj = {
+ *    A: { value: 'a' },
+ *    B: { value: 'b', other: 'other' },
+ * }
+ *
+ * const enumCode = extractEnumLikeObject(myObj, 'value');
+ * console.log(enumCode); // { A: 'a', B: 'b' }
+ * ```
+ */ const extractEnumLikeObject = (enumObject, valueKey)=>Object.entries(enumObject).reduce((acc, [key, value])=>({
+            ...acc,
+            [key]: value[valueKey]
+        }), {});
+/**
+ * 將指定格式的物件生成 enum 物件、enum 列表、取得 label 的方法
+ *
+ * 輸入的物件格式為
+ *
+ * ```ts
+ * { key: { value: string, label: string }, key2: { value: string, label: string }, ... }
+ * ```
+ *
+ * 會生成以下三個物件
+ *
+ * enum 物件 - 根據 value 生成的 enum 物件
+ *
+ * enum 列表 - 根據 value 與 label 生成的列表
+ *
+ * 取得 label 的方法 - 傳入 value 可以取得對應的 label
+ *
+ * @param obj 要處理的物件
+ * @param name 生成的 enum 名稱
+ *
+ * @example
+ *
+ * ```ts
+ * const Status = { Enabled: { value: 'enabled', label: '啟用' }, Disabled: { value: 'disabled', label: '停用' } };
+ *
+ * const { EnumStatus, StatusList, getStatusLabel } = createEnumLikeObject(Status, 'Status');
+ *
+ * console.log(EnumStatus); // { Enabled: 'enabled', Disabled: 'disabled' }
+ *
+ * console.log(StatusList); // [ { key: 'Enabled', value: 'enabled', label: '啟用' }, { key: 'Disabled', value: 'disabled', label: '停用' } ]
+ *
+ * console.log(getStatusLabel('enabled')); // '啟用'
+ * ```
+ */ const createEnumLikeObject = (obj, name)=>{
+    const Enum = extractEnumLikeObject(obj, 'value');
+    const list = Object.entries(obj).map(([key, item])=>({
+            key,
+            ...item
+        }));
+    const getLabel = (value)=>{
+        const targetItem = list.find((item)=>item.value === value);
+        if (!targetItem) return value;
+        return targetItem.label;
+    };
+    return {
+        [`Enum${name}`]: Enum,
+        [`${name}List`]: list,
+        [`get${name}Label`]: getLabel
+    };
+};
 /**
  * 檢查檔案是否為合法的 MIME 類型
  *
@@ -683,7 +755,9 @@ exports.camelCase2PascalCase = camelCase2PascalCase;
 exports.camelCase2SnakeCase = camelCase2SnakeCase;
 exports.camelString2PascalString = camelString2PascalString;
 exports.camelString2SnakeString = camelString2SnakeString;
+exports.createEnumLikeObject = createEnumLikeObject;
 exports.debounce = debounce;
+exports.extractEnumLikeObject = extractEnumLikeObject;
 exports.formatAmount = formatAmount;
 exports.formatStarMask = formatStarMask;
 exports.generatePeriodArray = generatePeriodArray;

package/dist/cjs/types.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+/**
+ * 從對象類型中提取特定屬性的值類型。
+ *
+ * @template T 要處理的對象類型
+ * @template K 要提取的屬性名（字符串字面量類型）
+ *
+ * @description
+ * 這個類型用於從一個對象類型 T 中提取指定屬性 K 的值類型。
+ * T 應該是一個對象，其每個屬性都是另一個包含 K 屬性的對象。
+ * 如果 T 不符合這個結構，或者指定的屬性 K 不存在，則返回 never。
+ *
+ * @example
+ * type Obj = {
+ *   a: { value: string },
+ *   b: { value: number }
+ * };
+ * type Result = ExtractValueType<Obj, 'value'>; // string | number
+ *
+ * @returns 返回 T 中所有 K 屬性值的聯合類型，如果不符合條件則返回 never
+ */
+type TExtractValueType<T, K extends string> = T extends Record<string, {
+    [P in K]: infer R;
+}> ? R : never;
+export type { TExtractValueType };

package/dist/cjs/types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+

package/dist/es/index.d.mts CHANGED Viewed

@@ -1,3 +1,6 @@
+import { TExtractValueType } from './types.mjs';
+export * from './types.mjs';
 type CamelToPascal<S extends string> = S extends `${infer Head}${infer Tail}` ? `${Uppercase<Head>}${Tail}` : S;
 /**
  * convert CamelCase string to PascalCase string
@@ -203,6 +206,68 @@ declare const rocEraToAd: (dateString: string, format?: string) => string;
  */
 declare const adToRocEra: (dateString: string, format?: string) => string;
+/**
+ * 將指定格式的物件轉換成類似 enum 的物件
+ *
+ * @param enumObject enum 物件
+ * @param valueKey value 的 key
+ *
+ * @example
+ *
+ * ```js
+ * const myObj = {
+ *    A: { value: 'a' },
+ *    B: { value: 'b', other: 'other' },
+ * }
+ *
+ * const enumCode = extractEnumLikeObject(myObj, 'value');
+ * console.log(enumCode); // { A: 'a', B: 'b' }
+ * ```
+ */
+declare const extractEnumLikeObject: <T extends Record<string, { [P in K]: any; }>, K extends string>(enumObject: T, valueKey: K) => { [key in keyof T]: T[key][K]; };
+/**
+ * 將指定格式的物件生成 enum 物件、enum 列表、取得 label 的方法
+ *
+ * 輸入的物件格式為
+ *
+ * ```ts
+ * { key: { value: string, label: string }, key2: { value: string, label: string }, ... }
+ * ```
+ *
+ * 會生成以下三個物件
+ *
+ * enum 物件 - 根據 value 生成的 enum 物件
+ *
+ * enum 列表 - 根據 value 與 label 生成的列表
+ *
+ * 取得 label 的方法 - 傳入 value 可以取得對應的 label
+ *
+ * @param obj 要處理的物件
+ * @param name 生成的 enum 名稱
+ *
+ * @example
+ *
+ * ```ts
+ * const Status = { Enabled: { value: 'enabled', label: '啟用' }, Disabled: { value: 'disabled', label: '停用' } };
+ *
+ * const { EnumStatus, StatusList, getStatusLabel } = createEnumLikeObject(Status, 'Status');
+ *
+ * console.log(EnumStatus); // { Enabled: 'enabled', Disabled: 'disabled' }
+ *
+ * console.log(StatusList); // [ { key: 'Enabled', value: 'enabled', label: '啟用' }, { key: 'Disabled', value: 'disabled', label: '停用' } ]
+ *
+ * console.log(getStatusLabel('enabled')); // '啟用'
+ * ```
+ */
+declare const createEnumLikeObject: <T extends Record<string, {
+    value: any;
+    label: string;
+}>, N extends string>(obj: T, name: N) => { [K in `Enum${N}` | `${N}List` | `get${N}Label`]: K extends `Enum${N}` ? { [key in keyof T]: T[key]["value"]; } : K extends `${N}List` ? {
+    value: any;
+    label: string;
+    key: string;
+}[] : (value: TExtractValueType<T, "value">) => string | TExtractValueType<T, "value">; };
 /**
  * 檢查檔案是否為合法的 MIME 類型
  *
@@ -600,28 +665,4 @@ declare const getLocalStorage: <T>(key: string, deCode?: boolean) => T | undefin
  */
 declare const setLocalStorage: (key: string, value: Record<string, any>, enCode?: boolean) => void;
-/**
- * 從對象類型中提取特定屬性的值類型。
- *
- * @template T 要處理的對象類型
- * @template K 要提取的屬性名（字符串字面量類型）
- *
- * @description
- * 這個類型用於從一個對象類型 T 中提取指定屬性 K 的值類型。
- * T 應該是一個對象，其每個屬性都是另一個包含 K 屬性的對象。
- * 如果 T 不符合這個結構，或者指定的屬性 K 不存在，則返回 never。
- *
- * @example
- * type Obj = {
- *   a: { value: string },
- *   b: { value: number }
- * };
- * type Result = ExtractValueType<Obj, 'value'>; // string | number
- *
- * @returns 返回 T 中所有 K 屬性值的聯合類型，如果不符合條件則返回 never
- */
-type TExtractValueType<T, K extends string> = T extends Record<string, {
-    [P in K]: infer R;
-}> ? R : never;
-export { type TCountdownActions, type TExtractValueType, adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, debounce, downloadFile, formatAmount, formatStarMask, generatePeriodArray, getCurrentPeriod, getLocalStorage, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, omit, omitByValue, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, rocEraToAd, setLocalStorage, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, useCountdown, validTaxId, validateDateString, validateFileType };
+export { type TCountdownActions, adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, createEnumLikeObject, debounce, downloadFile, extractEnumLikeObject, formatAmount, formatStarMask, generatePeriodArray, getCurrentPeriod, getLocalStorage, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, omit, omitByValue, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, rocEraToAd, setLocalStorage, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, useCountdown, validTaxId, validateDateString, validateFileType };

package/dist/es/index.mjs CHANGED Viewed

@@ -301,6 +301,78 @@ const transformObjectKey = (obj, transformFunName)=>{
     return dayjs(dateString, format).add(-1911, 'year').format(format).substring(1);
 };
+/**
+ * 將指定格式的物件轉換成類似 enum 的物件
+ *
+ * @param enumObject enum 物件
+ * @param valueKey value 的 key
+ *
+ * @example
+ *
+ * ```js
+ * const myObj = {
+ *    A: { value: 'a' },
+ *    B: { value: 'b', other: 'other' },
+ * }
+ *
+ * const enumCode = extractEnumLikeObject(myObj, 'value');
+ * console.log(enumCode); // { A: 'a', B: 'b' }
+ * ```
+ */ const extractEnumLikeObject = (enumObject, valueKey)=>Object.entries(enumObject).reduce((acc, [key, value])=>({
+            ...acc,
+            [key]: value[valueKey]
+        }), {});
+/**
+ * 將指定格式的物件生成 enum 物件、enum 列表、取得 label 的方法
+ *
+ * 輸入的物件格式為
+ *
+ * ```ts
+ * { key: { value: string, label: string }, key2: { value: string, label: string }, ... }
+ * ```
+ *
+ * 會生成以下三個物件
+ *
+ * enum 物件 - 根據 value 生成的 enum 物件
+ *
+ * enum 列表 - 根據 value 與 label 生成的列表
+ *
+ * 取得 label 的方法 - 傳入 value 可以取得對應的 label
+ *
+ * @param obj 要處理的物件
+ * @param name 生成的 enum 名稱
+ *
+ * @example
+ *
+ * ```ts
+ * const Status = { Enabled: { value: 'enabled', label: '啟用' }, Disabled: { value: 'disabled', label: '停用' } };
+ *
+ * const { EnumStatus, StatusList, getStatusLabel } = createEnumLikeObject(Status, 'Status');
+ *
+ * console.log(EnumStatus); // { Enabled: 'enabled', Disabled: 'disabled' }
+ *
+ * console.log(StatusList); // [ { key: 'Enabled', value: 'enabled', label: '啟用' }, { key: 'Disabled', value: 'disabled', label: '停用' } ]
+ *
+ * console.log(getStatusLabel('enabled')); // '啟用'
+ * ```
+ */ const createEnumLikeObject = (obj, name)=>{
+    const Enum = extractEnumLikeObject(obj, 'value');
+    const list = Object.entries(obj).map(([key, item])=>({
+            key,
+            ...item
+        }));
+    const getLabel = (value)=>{
+        const targetItem = list.find((item)=>item.value === value);
+        if (!targetItem) return value;
+        return targetItem.label;
+    };
+    return {
+        [`Enum${name}`]: Enum,
+        [`${name}List`]: list,
+        [`get${name}Label`]: getLabel
+    };
+};
 /**
  * 檢查檔案是否為合法的 MIME 類型
  *
@@ -668,4 +740,4 @@ message) {
  * formatString('123456', 1, 4) // '1****6'
  */ const formatStarMask = (str, n, m)=>str.slice(0, n) + '*'.repeat(m - n + 1) + str.slice(m + 1);
-export { adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, debounce, formatAmount, formatStarMask, generatePeriodArray, getCurrentPeriod, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, omit, omitByValue, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, rocEraToAd, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, validTaxId, validateDateString, validateFileType };
+export { adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, createEnumLikeObject, debounce, extractEnumLikeObject, formatAmount, formatStarMask, generatePeriodArray, getCurrentPeriod, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, omit, omitByValue, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, rocEraToAd, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, validTaxId, validateDateString, validateFileType };

package/dist/es/types.d.mts ADDED Viewed

@@ -0,0 +1,25 @@
+/**
+ * 從對象類型中提取特定屬性的值類型。
+ *
+ * @template T 要處理的對象類型
+ * @template K 要提取的屬性名（字符串字面量類型）
+ *
+ * @description
+ * 這個類型用於從一個對象類型 T 中提取指定屬性 K 的值類型。
+ * T 應該是一個對象，其每個屬性都是另一個包含 K 屬性的對象。
+ * 如果 T 不符合這個結構，或者指定的屬性 K 不存在，則返回 never。
+ *
+ * @example
+ * type Obj = {
+ *   a: { value: string },
+ *   b: { value: number }
+ * };
+ * type Result = ExtractValueType<Obj, 'value'>; // string | number
+ *
+ * @returns 返回 T 中所有 K 屬性值的聯合類型，如果不符合條件則返回 never
+ */
+type TExtractValueType<T, K extends string> = T extends Record<string, {
+    [P in K]: infer R;
+}> ? R : never;
+export type { TExtractValueType };

package/dist/es/types.mjs ADDED Viewed

	@@ -0,0 +1 @@
1	+

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gateweb/react-utils",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "React Utils for GateWeb",
   "homepage": "https://github.com/GatewebSolutions/react-utils",
   "files": [
@@ -19,6 +19,16 @@
         "types": "./dist/cjs/index.d.ts",
         "default": "./dist/cjs/index.js"
       }
+    },
+    "./types": {
+      "import": {
+        "types": "./dist/es/types.d.mts",
+        "default": "./dist/es/types.mjs"
+      },
+      "require": {
+        "types": "./dist/cjs/types.d.ts",
+        "default": "./dist/cjs/types.js"
+      }
     }
   },
   "publishConfig": {