@gateweb/react-utils 1.9.0 → 1.10.0

package/dist/cjs/index.d.ts

@@ -1,6 +1,6 @@
-import { TExtractValueType, AtLeastOne } from './types.js';
-export * from './types.js';
 import React from 'react';
+import { AtLeastOne } from './types.js';
+export * from './types.js';
 
 declare const FILE_SIZE_UNITS: readonly ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
 type FileSizeUnit = (typeof FILE_SIZE_UNITS)[number];
@@ -408,23 +408,50 @@ declare const extractEnumLikeObject: <T extends Record<string, { [P in K]: any;
  * @example
  *
  * ```ts
- * const Status = { Enabled: { value: 'enabled', label: '啟用' }, Disabled: { value: 'disabled', label: '停用' } };
  *
+ * // 一般使用
+ * 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')); // '啟用'
  *
- * console.log(StatusList); // [ { key: 'Enabled', value: 'enabled', label: '啟用' }, { key: 'Disabled', value: 'disabled', label: '停用' } ]
+ * // scenes 版本
+ *
+ * Status = { Enabled: { value: 'enabled', scenes: { webA: { label: '啟用' }, webB: { label: '激活' } } }, Disabled: { value: 'disabled', scenes: { webA: { label: '停用' }, webB: { label: '停止' }}}}
+ * const { EnumStatusA, StatusAList, getStatusALabel } = createEnumLikeObject(Status, 'StatusA', 'webA');
+ * console.log(EnumStatusA); // { Enabled: 'enabled', Disabled: 'disabled' }
+ * console.log(StatusAList); // [ { key: 'Enabled', value: 'enabled', label: '啟用' }, { key: 'Disabled', value: 'disabled', label: '停用' }]
+ * console.log(getStatusALabel('enabled')); // '啟用'
+ *
+ * const { EnumStatusA, StatusAList, getStatusALabel } = createEnumLikeObject(Status, 'StatusB', 'webB');
+ * console.log(EnumStatusB); // { Enabled: 'enabled', Disabled: 'disabled' }
+ * console.log(StatusBList); // [ { key: 'Enabled', value: 'enabled', label: '激活' }, { key: 'Disabled', value: 'disabled', label: '停止' }]
+ * console.log(getStatusBLabel('enabled')); // '激活'
  *
- * console.log(getStatusLabel('enabled')); // '啟用'
  * ```
  */
-declare const createEnumLikeObject: <T extends Record<string, {
+declare function 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` ? ({
-    key: keyof T;
-} & T[keyof T])[] : (value: TExtractValueType<T, "value">) => string | TExtractValueType<T, "value">; };
+}>, 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` ? Array<{
+        key: string;
+    } & T[keyof T]> : (value: T[keyof T]['value']) => string;
+};
+declare function createEnumLikeObject<T extends Record<string, {
+    value: any;
+    scenes: Record<string, Record<string, any>>;
+}>, N extends string, Scene extends keyof T[keyof T]['scenes']>(obj: T, name: N, scene: Scene): {
+    [K in `Enum${N}` | `${N}List` | `get${N}Label`]: K extends `Enum${N}` ? {
+        [key in keyof T]: T[key]['value'];
+    } : K extends `${N}List` ? Array<{
+        key: string;
+        value: T[keyof T]['value'];
+    } & T[keyof T]['scenes'][Scene]> : (value: T[keyof T]['value']) => string;
+};
 
 /**
  * simulate a fake api request

package/dist/cjs/index.js

@@ -177,56 +177,41 @@ const FILE_SIZE_UNITS$1 = [
             ...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)=>{
+// 實作
+function createEnumLikeObject(obj, name, scene) {
     const Enum = extractEnumLikeObject(obj, 'value');
-    const list = Object.entries(obj).map(([key, item])=>({
-            key,
-            ...item
-        }));
-    const getLabel = (value)=>{
+    // List：根據有無 scene 做不同處理
+    let list;
+    if (scene) {
+        // scenes 版本：解構指定 scene 的 label
+        list = Object.entries(obj).map(([key, item])=>({
+                key,
+                value: item.value,
+                ...item.scenes?.[scene] ?? {}
+            }));
+    } else {
+        // label only 版本
+        list = Object.entries(obj).map(([key, item])=>({
+                key,
+                ...item
+            }));
+    }
+    function getLabel(value) {
         const targetItem = list.find((item)=>item.value === value);
-        if (!targetItem) return value;
-        return targetItem.label;
-    };
+        if (!targetItem) return String(value);
+        if ('scenes' in targetItem && scene) {
+            const sceneObj = targetItem.scenes?.[scene];
+            return sceneObj && sceneObj.label || String(value);
+        }
+        if ('label' in targetItem) return targetItem.label;
+        return String(value);
+    }
     return {
         [`Enum${name}`]: Enum,
         [`${name}List`]: list,
         [`get${name}Label`]: getLabel
     };
-};
+}
 
 /**
  * simulate a fake api request

package/dist/es/index.d.mts

@@ -1,6 +1,6 @@
-import { TExtractValueType, AtLeastOne } from './types.mjs';
-export * from './types.mjs';
 import React from 'react';
+import { AtLeastOne } from './types.mjs';
+export * from './types.mjs';
 
 declare const FILE_SIZE_UNITS: readonly ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
 type FileSizeUnit = (typeof FILE_SIZE_UNITS)[number];
@@ -408,23 +408,50 @@ declare const extractEnumLikeObject: <T extends Record<string, { [P in K]: any;
  * @example
  *
  * ```ts
- * const Status = { Enabled: { value: 'enabled', label: '啟用' }, Disabled: { value: 'disabled', label: '停用' } };
  *
+ * // 一般使用
+ * 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')); // '啟用'
  *
- * console.log(StatusList); // [ { key: 'Enabled', value: 'enabled', label: '啟用' }, { key: 'Disabled', value: 'disabled', label: '停用' } ]
+ * // scenes 版本
+ *
+ * Status = { Enabled: { value: 'enabled', scenes: { webA: { label: '啟用' }, webB: { label: '激活' } } }, Disabled: { value: 'disabled', scenes: { webA: { label: '停用' }, webB: { label: '停止' }}}}
+ * const { EnumStatusA, StatusAList, getStatusALabel } = createEnumLikeObject(Status, 'StatusA', 'webA');
+ * console.log(EnumStatusA); // { Enabled: 'enabled', Disabled: 'disabled' }
+ * console.log(StatusAList); // [ { key: 'Enabled', value: 'enabled', label: '啟用' }, { key: 'Disabled', value: 'disabled', label: '停用' }]
+ * console.log(getStatusALabel('enabled')); // '啟用'
+ *
+ * const { EnumStatusA, StatusAList, getStatusALabel } = createEnumLikeObject(Status, 'StatusB', 'webB');
+ * console.log(EnumStatusB); // { Enabled: 'enabled', Disabled: 'disabled' }
+ * console.log(StatusBList); // [ { key: 'Enabled', value: 'enabled', label: '激活' }, { key: 'Disabled', value: 'disabled', label: '停止' }]
+ * console.log(getStatusBLabel('enabled')); // '激活'
  *
- * console.log(getStatusLabel('enabled')); // '啟用'
  * ```
  */
-declare const createEnumLikeObject: <T extends Record<string, {
+declare function 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` ? ({
-    key: keyof T;
-} & T[keyof T])[] : (value: TExtractValueType<T, "value">) => string | TExtractValueType<T, "value">; };
+}>, 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` ? Array<{
+        key: string;
+    } & T[keyof T]> : (value: T[keyof T]['value']) => string;
+};
+declare function createEnumLikeObject<T extends Record<string, {
+    value: any;
+    scenes: Record<string, Record<string, any>>;
+}>, N extends string, Scene extends keyof T[keyof T]['scenes']>(obj: T, name: N, scene: Scene): {
+    [K in `Enum${N}` | `${N}List` | `get${N}Label`]: K extends `Enum${N}` ? {
+        [key in keyof T]: T[key]['value'];
+    } : K extends `${N}List` ? Array<{
+        key: string;
+        value: T[keyof T]['value'];
+    } & T[keyof T]['scenes'][Scene]> : (value: T[keyof T]['value']) => string;
+};
 
 /**
  * simulate a fake api request

package/dist/es/index.mjs

@@ -171,56 +171,41 @@ const FILE_SIZE_UNITS$1 = [
             ...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)=>{
+// 實作
+function createEnumLikeObject(obj, name, scene) {
     const Enum = extractEnumLikeObject(obj, 'value');
-    const list = Object.entries(obj).map(([key, item])=>({
-            key,
-            ...item
-        }));
-    const getLabel = (value)=>{
+    // List：根據有無 scene 做不同處理
+    let list;
+    if (scene) {
+        // scenes 版本：解構指定 scene 的 label
+        list = Object.entries(obj).map(([key, item])=>({
+                key,
+                value: item.value,
+                ...item.scenes?.[scene] ?? {}
+            }));
+    } else {
+        // label only 版本
+        list = Object.entries(obj).map(([key, item])=>({
+                key,
+                ...item
+            }));
+    }
+    function getLabel(value) {
         const targetItem = list.find((item)=>item.value === value);
-        if (!targetItem) return value;
-        return targetItem.label;
-    };
+        if (!targetItem) return String(value);
+        if ('scenes' in targetItem && scene) {
+            const sceneObj = targetItem.scenes?.[scene];
+            return sceneObj && sceneObj.label || String(value);
+        }
+        if ('label' in targetItem) return targetItem.label;
+        return String(value);
+    }
     return {
         [`Enum${name}`]: Enum,
         [`${name}List`]: list,
         [`get${name}Label`]: getLabel
     };
-};
+}
 
 /**
  * simulate a fake api request

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gateweb/react-utils",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "React Utils for GateWeb",
   "homepage": "https://github.com/GatewebSolutions/react-utils",
   "files": [
@@ -66,6 +66,7 @@
   "scripts": {
     "run-code": "ts-node src/period.ts",
     "test": "vitest run",
+    "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "test:ui": "vitest --ui --coverage.enabled=true",
     "build": "bunchee",