@gateweb/react-utils 1.9.0 → 1.11.0

package/dist/cjs/index.d.ts

@@ -1,6 +1,6 @@
-import { TExtractValueType, AtLeastOne } from './types.js';
+import React, { ReactNode } from 'react';
+import { AtLeastOne } from './types.js';
 export * from './types.js';
-import React from 'react';
 
 declare const FILE_SIZE_UNITS: readonly ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
 type FileSizeUnit = (typeof FILE_SIZE_UNITS)[number];
@@ -404,27 +404,55 @@ declare const extractEnumLikeObject: <T extends Record<string, { [P in K]: any;
  *
  * @param obj 要處理的物件
  * @param name 生成的 enum 名稱
+ * @param scene 要使用的條件 (參考 example)
  *
  * @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
@@ -947,6 +975,43 @@ declare const QueryProvider: <Q>({ children, query, handleChangeQuery, }: React.
  */
 declare const useQueryContext: <Q>() => <T>(selector: (state: TQueryState<Q>) => T, equalityFn?: (left: T, right: T) => boolean) => T;
 
+/**
+ * Creates a strongly-typed React Context and Provider pair for data sharing.
+ *
+ * This utility helps you avoid prop drilling by providing a reusable way to define
+ * context with strict type inference. It returns a custom hook for consuming the context
+ * and a Provider component for supplying context values.
+ *
+ * @template T - The value type for the context.
+ * @returns {Object} An object containing:
+ *   - useDataContext: A custom hook to access the context value. Throws an error if used outside the provider.
+ *   - DataProvider: A Provider component to wrap your component tree and supply the context value.
+ *
+ * @example
+ * // Example usage:
+ * const { useDataContext, DataProvider } = createDataContext<{ count: number }>();
+ *
+ * function Counter() {
+ *   const { count } = useDataContext();
+ *   return <span>{count}</span>;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DataProvider value={{ count: 42 }}>
+ *       <Counter />
+ *     </DataProvider>
+ *   );
+ * }
+ */
+declare const createDataContext: <T>() => {
+    readonly useDataContext: () => T & ({} | null);
+    readonly DataProvider: ({ children, value }: {
+        children: ReactNode;
+        value: T;
+    }) => React.JSX.Element;
+};
+
 type TCountdownActions = {
     /** 目前秒數 */
     countdown: number;
@@ -1080,4 +1145,4 @@ declare const getLocalStorage: <T>(key: string, deCode?: boolean) => T | undefin
  */
 declare const setLocalStorage: (key: string, value: Record<string, any>, enCode?: boolean) => void;
 
-export { ByteSize, type PartialBy, QueryProvider, type RequiredBy, type TCountdownActions, adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, convertBytes, createEnumLikeObject, debounce, deepMerge, downloadFile, extractEnumLikeObject, fakeApi, formatAmount, formatBytes, formatStarMask, generatePeriodArray, getCurrentPeriod, getLocalStorage, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isEqual, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, isValidPassword, maskString, mergeRefs, objectToSearchParams, omit, omitByValue, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, pick, pickByValue, rocEraToAd, searchParamsToObject, setLocalStorage, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, useCountdown, useQueryContext, useValue, validTaxId, validateDateString, validateFileType, wait };
+export { ByteSize, type PartialBy, QueryProvider, type RequiredBy, type TCountdownActions, adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, convertBytes, createDataContext, createEnumLikeObject, debounce, deepMerge, downloadFile, extractEnumLikeObject, fakeApi, formatAmount, formatBytes, formatStarMask, generatePeriodArray, getCurrentPeriod, getLocalStorage, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isEqual, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, isValidPassword, maskString, mergeRefs, objectToSearchParams, omit, omitByValue, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, pick, pickByValue, rocEraToAd, searchParamsToObject, setLocalStorage, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, useCountdown, useQueryContext, useValue, validTaxId, validateDateString, validateFileType, wait };

package/dist/cjs/index.js

@@ -2,14 +2,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var dayjs = require('dayjs');
 var queryStoreClient = require('./queryStore-client-q_SLGgYH.js');
-var useCountdownClient = require('./useCountdown-client-uiqhgllY.js');
 var React = require('react');
+var useCountdownClient = require('./useCountdown-client-uiqhgllY.js');
 var downloadClient = require('./download-client-DKxkL92w.js');
 var webStorageClient = require('./webStorage-client-BGQKUfrO.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
+var React__default = /*#__PURE__*/_interopDefault(React);
 
 const FILE_SIZE_UNITS$1 = [
     'Bytes',
@@ -177,56 +178,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
@@ -1058,6 +1044,57 @@ const FILE_SIZE_UNITS = [
     return dayjs__default.default(dateString, format, true).isValid();
 };
 
+/**
+ * Creates a strongly-typed React Context and Provider pair for data sharing.
+ *
+ * This utility helps you avoid prop drilling by providing a reusable way to define
+ * context with strict type inference. It returns a custom hook for consuming the context
+ * and a Provider component for supplying context values.
+ *
+ * @template T - The value type for the context.
+ * @returns {Object} An object containing:
+ *   - useDataContext: A custom hook to access the context value. Throws an error if used outside the provider.
+ *   - DataProvider: A Provider component to wrap your component tree and supply the context value.
+ *
+ * @example
+ * // Example usage:
+ * const { useDataContext, DataProvider } = createDataContext<{ count: number }>();
+ *
+ * function Counter() {
+ *   const { count } = useDataContext();
+ *   return <span>{count}</span>;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DataProvider value={{ count: 42 }}>
+ *       <Counter />
+ *     </DataProvider>
+ *   );
+ * }
+ */ const createDataContext = ()=>{
+    const Context = /*#__PURE__*/ React.createContext(undefined);
+    const useDataContext = ()=>{
+        const context = React.useContext(Context);
+        if (context === undefined) {
+            throw new Error(`useDataContext must be used within a DataProvider`);
+        }
+        return context;
+    };
+    const DataProvider = ({ children, value })=>{
+        const memoized = React.useMemo(()=>value, [
+            value
+        ]);
+        return /*#__PURE__*/ React__default.default.createElement(Context.Provider, {
+            value: memoized
+        }, children);
+    };
+    return {
+        useDataContext,
+        DataProvider
+    };
+};
+
 /**
  * A hook to manage a value.
  *
@@ -1195,6 +1232,7 @@ exports.camelCase2SnakeCase = camelCase2SnakeCase;
 exports.camelString2PascalString = camelString2PascalString;
 exports.camelString2SnakeString = camelString2SnakeString;
 exports.convertBytes = convertBytes;
+exports.createDataContext = createDataContext;
 exports.createEnumLikeObject = createEnumLikeObject;
 exports.debounce = debounce;
 exports.deepMerge = deepMerge;

package/dist/es/index.d.mts

@@ -1,6 +1,6 @@
-import { TExtractValueType, AtLeastOne } from './types.mjs';
+import React, { ReactNode } from 'react';
+import { AtLeastOne } from './types.mjs';
 export * from './types.mjs';
-import React from 'react';
 
 declare const FILE_SIZE_UNITS: readonly ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
 type FileSizeUnit = (typeof FILE_SIZE_UNITS)[number];
@@ -404,27 +404,55 @@ declare const extractEnumLikeObject: <T extends Record<string, { [P in K]: any;
  *
  * @param obj 要處理的物件
  * @param name 生成的 enum 名稱
+ * @param scene 要使用的條件 (參考 example)
  *
  * @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
@@ -947,6 +975,43 @@ declare const QueryProvider: <Q>({ children, query, handleChangeQuery, }: React.
  */
 declare const useQueryContext: <Q>() => <T>(selector: (state: TQueryState<Q>) => T, equalityFn?: (left: T, right: T) => boolean) => T;
 
+/**
+ * Creates a strongly-typed React Context and Provider pair for data sharing.
+ *
+ * This utility helps you avoid prop drilling by providing a reusable way to define
+ * context with strict type inference. It returns a custom hook for consuming the context
+ * and a Provider component for supplying context values.
+ *
+ * @template T - The value type for the context.
+ * @returns {Object} An object containing:
+ *   - useDataContext: A custom hook to access the context value. Throws an error if used outside the provider.
+ *   - DataProvider: A Provider component to wrap your component tree and supply the context value.
+ *
+ * @example
+ * // Example usage:
+ * const { useDataContext, DataProvider } = createDataContext<{ count: number }>();
+ *
+ * function Counter() {
+ *   const { count } = useDataContext();
+ *   return <span>{count}</span>;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DataProvider value={{ count: 42 }}>
+ *       <Counter />
+ *     </DataProvider>
+ *   );
+ * }
+ */
+declare const createDataContext: <T>() => {
+    readonly useDataContext: () => T & ({} | null);
+    readonly DataProvider: ({ children, value }: {
+        children: ReactNode;
+        value: T;
+    }) => React.JSX.Element;
+};
+
 type TCountdownActions = {
     /** 目前秒數 */
     countdown: number;
@@ -1080,4 +1145,4 @@ declare const getLocalStorage: <T>(key: string, deCode?: boolean) => T | undefin
  */
 declare const setLocalStorage: (key: string, value: Record<string, any>, enCode?: boolean) => void;
 
-export { ByteSize, type PartialBy, QueryProvider, type RequiredBy, type TCountdownActions, adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, convertBytes, createEnumLikeObject, debounce, deepMerge, downloadFile, extractEnumLikeObject, fakeApi, formatAmount, formatBytes, formatStarMask, generatePeriodArray, getCurrentPeriod, getLocalStorage, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isEqual, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, isValidPassword, maskString, mergeRefs, objectToSearchParams, omit, omitByValue, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, pick, pickByValue, rocEraToAd, searchParamsToObject, setLocalStorage, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, useCountdown, useQueryContext, useValue, validTaxId, validateDateString, validateFileType, wait };
+export { ByteSize, type PartialBy, QueryProvider, type RequiredBy, type TCountdownActions, adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, convertBytes, createDataContext, createEnumLikeObject, debounce, deepMerge, downloadFile, extractEnumLikeObject, fakeApi, formatAmount, formatBytes, formatStarMask, generatePeriodArray, getCurrentPeriod, getLocalStorage, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isEqual, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, isValidPassword, maskString, mergeRefs, objectToSearchParams, omit, omitByValue, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, pick, pickByValue, rocEraToAd, searchParamsToObject, setLocalStorage, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, useCountdown, useQueryContext, useValue, validTaxId, validateDateString, validateFileType, wait };

package/dist/es/index.mjs

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs';
 export { Q as QueryProvider, u as useQueryContext } from './queryStore-client-vG-bXFYm.mjs';
+import React, { useContext, useMemo, createContext, useState, useCallback } from 'react';
 export { u as useCountdown } from './useCountdown-client-t52WIHfq.mjs';
-import { useState, useCallback } from 'react';
 export { d as downloadFile } from './download-client-CnaJ0p_f.mjs';
 export { g as getLocalStorage, s as setLocalStorage } from './webStorage-client-Pd-loNCg.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
@@ -1052,6 +1037,57 @@ const FILE_SIZE_UNITS = [
     return dayjs(dateString, format, true).isValid();
 };
 
+/**
+ * Creates a strongly-typed React Context and Provider pair for data sharing.
+ *
+ * This utility helps you avoid prop drilling by providing a reusable way to define
+ * context with strict type inference. It returns a custom hook for consuming the context
+ * and a Provider component for supplying context values.
+ *
+ * @template T - The value type for the context.
+ * @returns {Object} An object containing:
+ *   - useDataContext: A custom hook to access the context value. Throws an error if used outside the provider.
+ *   - DataProvider: A Provider component to wrap your component tree and supply the context value.
+ *
+ * @example
+ * // Example usage:
+ * const { useDataContext, DataProvider } = createDataContext<{ count: number }>();
+ *
+ * function Counter() {
+ *   const { count } = useDataContext();
+ *   return <span>{count}</span>;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DataProvider value={{ count: 42 }}>
+ *       <Counter />
+ *     </DataProvider>
+ *   );
+ * }
+ */ const createDataContext = ()=>{
+    const Context = /*#__PURE__*/ createContext(undefined);
+    const useDataContext = ()=>{
+        const context = useContext(Context);
+        if (context === undefined) {
+            throw new Error(`useDataContext must be used within a DataProvider`);
+        }
+        return context;
+    };
+    const DataProvider = ({ children, value })=>{
+        const memoized = useMemo(()=>value, [
+            value
+        ]);
+        return /*#__PURE__*/ React.createElement(Context.Provider, {
+            value: memoized
+        }, children);
+    };
+    return {
+        useDataContext,
+        DataProvider
+    };
+};
+
 /**
  * A hook to manage a value.
  *
@@ -1176,4 +1212,4 @@ function mergeRefs(refs) {
     return dayjs(endMonth, 'YYYYMM').subtract(1911, 'year').format('YYYYMM').substring(1);
 };
 
-export { ByteSize, adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, convertBytes, createEnumLikeObject, debounce, deepMerge, extractEnumLikeObject, fakeApi, formatAmount, formatBytes, formatStarMask, generatePeriodArray, getCurrentPeriod, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isEqual, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, isValidPassword, maskString, mergeRefs, objectToSearchParams, omit, omitByValue, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, pick, pickByValue, rocEraToAd, searchParamsToObject, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, useValue, validTaxId, validateDateString, validateFileType, wait };
+export { ByteSize, adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, convertBytes, createDataContext, createEnumLikeObject, debounce, deepMerge, extractEnumLikeObject, fakeApi, formatAmount, formatBytes, formatStarMask, generatePeriodArray, getCurrentPeriod, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isEqual, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, isValidPassword, maskString, mergeRefs, objectToSearchParams, omit, omitByValue, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, pick, pickByValue, rocEraToAd, searchParamsToObject, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, useValue, validTaxId, validateDateString, validateFileType, wait };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gateweb/react-utils",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "description": "React Utils for GateWeb",
   "homepage": "https://github.com/GatewebSolutions/react-utils",
   "files": [
@@ -45,6 +45,7 @@
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@gateweb/eslint-config-gateweb": "^1.0.6",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/jest": "^29.5.13",
     "@types/node": "^22.7.7",
@@ -66,6 +67,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",