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

@gateweb/react-utils 0.0.4 → 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 (5) hide show

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

@@ -1,3 +1,4 @@
+import { TExtractValueType } from './types.js';
 export * from './types.js';
 type CamelToPascal<S extends string> = S extends `${infer Head}${infer Tail}` ? `${Uppercase<Head>}${Tail}` : S;
@@ -205,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 類型
  *
@@ -602,4 +665,4 @@ declare const getLocalStorage: <T>(key: string, deCode?: boolean) => T | undefin
  */
 declare const setLocalStorage: (key: string, value: Record<string, any>, enCode?: boolean) => void;
-export { type TCountdownActions, 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/es/index.d.mts CHANGED Viewed

@@ -1,3 +1,4 @@
+import { TExtractValueType } from './types.mjs';
 export * from './types.mjs';
 type CamelToPascal<S extends string> = S extends `${infer Head}${infer Tail}` ? `${Uppercase<Head>}${Tail}` : S;
@@ -205,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 類型
  *
@@ -602,4 +665,4 @@ declare const getLocalStorage: <T>(key: string, deCode?: boolean) => T | undefin
  */
 declare const setLocalStorage: (key: string, value: Record<string, any>, enCode?: boolean) => void;
-export { type TCountdownActions, 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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gateweb/react-utils",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React Utils for GateWeb",
   "homepage": "https://github.com/GatewebSolutions/react-utils",
   "files": [