@gateweb/react-utils 1.14.1 → 1.14.2

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.
@@ -402,8 +402,9 @@ declare const extractEnumLikeObject: <T extends Record<string, { [P in K]: any;
402
402
  *
403
403
  * 取得 label 的方法 - 傳入 value 可以取得對應的 label
404
404
  *
405
- * @param obj 要處理的物件
406
- * @param name 生成的 enum 名稱
405
+ * 參數:
406
+ * - obj:要處理的物件
407
+ * - options:設定物件(可選)。若未提供 name,將使用預設鍵名:`Enum`、`List`、`getLabel`。
407
408
  *
408
409
  * @remarks
409
410
  * 若需多場景 label,請傳入第三參數 scene,詳細用法請見範例。
@@ -412,43 +413,102 @@ declare const extractEnumLikeObject: <T extends Record<string, { [P in K]: any;
412
413
  *
413
414
  * ```ts
414
415
  *
415
- * // 一般使用
416
+ * // 一般使用(命名版)
416
417
  * const Status = { Enabled: { value: 'enabled', label: '啟用' }, Disabled: { value: 'disabled', label: '停用' }};
417
- * const { EnumStatus, StatusList, getStatusLabel } = createEnumLikeObject(Status, 'Status');
418
+ * const { EnumStatus, StatusList, getStatusLabel } = createEnumLikeObject(Status, { name: 'Status' });
418
419
  * console.log(EnumStatus); // { Enabled: 'enabled', Disabled: 'disabled' }
419
420
  * console.log(StatusList); // [ { key: 'Enabled', value: 'enabled', label: '啟用' }, { key: 'Disabled', value: 'disabled', label: '停用' }]
420
421
  * console.log(getStatusLabel('enabled')); // '啟用'
421
422
  *
423
+ * // 一般使用(未命名,使用預設鍵名)
424
+ * const { Enum, List, getLabel } = createEnumLikeObject(Status);
425
+ * console.log(Enum); // { Enabled: 'enabled', Disabled: 'disabled' }
426
+ * console.log(List); // [ { key: 'Enabled', value: 'enabled', label: '啟用' }, { key: 'Disabled', value: 'disabled', label: '停用' }]
427
+ * console.log(getLabel('enabled')); // '啟用'
428
+ *
422
429
  * // scenes 版本
423
430
  *
424
431
  * const Status = { Enabled: { value: 'enabled', scenes: { webA: { label: '啟用' }, webB: { label: '激活' } } }, Disabled: { value: 'disabled', scenes: { webA: { label: '停用' }, webB: { label: '停止' }}}}
425
- * const { EnumStatusA, StatusAList, getStatusALabel } = createEnumLikeObject(Status, 'StatusA', 'webA');
432
+ * const { EnumStatusA, StatusAList, getStatusALabel } = createEnumLikeObject(Status, { name: 'StatusA', scene: 'webA' });
426
433
  * console.log(EnumStatusA); // { Enabled: 'enabled', Disabled: 'disabled' }
427
434
  * console.log(StatusAList); // [ { key: 'Enabled', value: 'enabled', label: '啟用' }, { key: 'Disabled', value: 'disabled', label: '停用' }]
428
435
  * console.log(getStatusALabel('enabled')); // '啟用'
429
436
  *
430
- * const { EnumStatusA, StatusAList, getStatusALabel } = createEnumLikeObject(Status, 'StatusB', 'webB');
437
+ * const { EnumStatusB, StatusBList, getStatusBLabel } = createEnumLikeObject(Status, { name: 'StatusB', scene: 'webB' });
431
438
  * console.log(EnumStatusB); // { Enabled: 'enabled', Disabled: 'disabled' }
432
439
  * console.log(StatusBList); // [ { key: 'Enabled', value: 'enabled', label: '激活' }, { key: 'Disabled', value: 'disabled', label: '停止' }]
433
440
  * console.log(getStatusBLabel('enabled')); // '激活'
434
441
  *
442
+ * // scenes 版本(未命名,使用預設鍵名)
443
+ * const { Enum, List, getLabel } = createEnumLikeObject(Status, { scene: 'webA' });
444
+ * console.log(Enum); // { Enabled: 'enabled', Disabled: 'disabled' }
445
+ * console.log(List); // [ { key: 'Enabled', value: 'enabled', label: '啟用' }, { key: 'Disabled', value: 'disabled', label: '停用' }]
446
+ * console.log(getLabel('enabled')); // '啟用'
435
447
  * ```
436
448
  *
437
449
  */
438
450
  declare function createEnumLikeObject<T extends Record<string, {
439
451
  value: any;
440
452
  label: string;
441
- }>, N extends string>(obj: T, name: N): {
453
+ }>, N extends string>(obj: T, options: {
454
+ name: N;
455
+ }): {
442
456
  [K in `Enum${N}` | `${N}List` | `get${N}Label`]: K extends `Enum${N}` ? {
443
457
  [key in keyof T]: T[key]['value'];
444
458
  } : K extends `${N}List` ? Array<{
445
459
  key: string;
446
460
  } & T[keyof T]> : (value: T[keyof T]['value']) => string;
447
461
  };
462
+ declare function createEnumLikeObject<T extends Record<string, Record<VK, any> & {
463
+ label: string;
464
+ }>, N extends string, VK extends keyof T[keyof T] & string>(obj: T, options: {
465
+ name: N;
466
+ valueKey: VK;
467
+ }): {
468
+ [K in `Enum${N}` | `${N}List` | `get${N}Label`]: K extends `Enum${N}` ? {
469
+ [key in keyof T]: T[key][VK];
470
+ } : K extends `${N}List` ? Array<{
471
+ key: string;
472
+ } & Omit<T[keyof T], 'value'> & {
473
+ value: T[keyof T][VK];
474
+ }> : (value: T[keyof T][VK]) => string;
475
+ };
476
+ declare function createEnumLikeObject<T extends Record<string, {
477
+ value: any;
478
+ label: string;
479
+ }>>(obj: T, options?: {
480
+ name?: undefined;
481
+ }): {
482
+ Enum: {
483
+ [key in keyof T]: T[key]['value'];
484
+ };
485
+ List: Array<{
486
+ key: string;
487
+ } & T[keyof T]>;
488
+ getLabel: (value: T[keyof T]['value']) => string;
489
+ };
490
+ declare function createEnumLikeObject<T extends Record<string, Record<VK, any> & {
491
+ label: string;
492
+ }>, VK extends keyof T[keyof T] & string>(obj: T, options: {
493
+ valueKey: VK;
494
+ }): {
495
+ Enum: {
496
+ [key in keyof T]: T[key][VK];
497
+ };
498
+ List: Array<{
499
+ key: string;
500
+ } & Omit<T[keyof T], 'value'> & {
501
+ value: T[keyof T][VK];
502
+ }>;
503
+ getLabel: (value: T[keyof T][VK]) => string;
504
+ };
448
505
  declare function createEnumLikeObject<T extends Record<string, {
449
506
  value: any;
450
507
  scenes: Record<string, Record<string, any>>;
451
- }>, N extends string, Scene extends keyof T[keyof T]['scenes']>(obj: T, name: N, scene: Scene): {
508
+ }>, N extends string, Scene extends keyof T[keyof T]['scenes']>(obj: T, options: {
509
+ name: N;
510
+ scene: Scene;
511
+ }): {
452
512
  [K in `Enum${N}` | `${N}List` | `get${N}Label`]: K extends `Enum${N}` ? {
453
513
  [key in keyof T]: T[key]['value'];
454
514
  } : K extends `${N}List` ? Array<{
@@ -456,6 +516,50 @@ declare function createEnumLikeObject<T extends Record<string, {
456
516
  value: T[keyof T]['value'];
457
517
  } & T[keyof T]['scenes'][Scene]> : (value: T[keyof T]['value']) => string;
458
518
  };
519
+ declare function createEnumLikeObject<T extends Record<string, Record<VK, any> & {
520
+ scenes: Record<string, Record<string, any>>;
521
+ }>, N extends string, Scene extends keyof T[keyof T]['scenes'], VK extends keyof T[keyof T] & string>(obj: T, options: {
522
+ name: N;
523
+ scene: Scene;
524
+ valueKey: VK;
525
+ }): {
526
+ [K in `Enum${N}` | `${N}List` | `get${N}Label`]: K extends `Enum${N}` ? {
527
+ [key in keyof T]: T[key][VK];
528
+ } : K extends `${N}List` ? Array<{
529
+ key: string;
530
+ value: T[keyof T][VK];
531
+ } & T[keyof T]['scenes'][Scene]> : (value: T[keyof T][VK]) => string;
532
+ };
533
+ declare function createEnumLikeObject<T extends Record<string, {
534
+ value: any;
535
+ scenes: Record<string, Record<string, any>>;
536
+ }>, Scene extends keyof T[keyof T]['scenes']>(obj: T, options: {
537
+ scene: Scene;
538
+ }): {
539
+ Enum: {
540
+ [key in keyof T]: T[key]['value'];
541
+ };
542
+ List: Array<{
543
+ key: string;
544
+ value: T[keyof T]['value'];
545
+ } & T[keyof T]['scenes'][Scene]>;
546
+ getLabel: (value: T[keyof T]['value']) => string;
547
+ };
548
+ declare function createEnumLikeObject<T extends Record<string, Record<VK, any> & {
549
+ scenes: Record<string, Record<string, any>>;
550
+ }>, Scene extends keyof T[keyof T]['scenes'], VK extends keyof T[keyof T] & string>(obj: T, options: {
551
+ scene: Scene;
552
+ valueKey: VK;
553
+ }): {
554
+ Enum: {
555
+ [key in keyof T]: T[key][VK];
556
+ };
557
+ List: Array<{
558
+ key: string;
559
+ value: T[keyof T][VK];
560
+ } & T[keyof T]['scenes'][Scene]>;
561
+ getLabel: (value: T[keyof T][VK]) => string;
562
+ };
459
563
 
460
564
  /**
461
565
  * simulate a fake api request
package/dist/cjs/index.js CHANGED
@@ -179,34 +179,48 @@ const FILE_SIZE_UNITS$1 = [
179
179
  [key]: value[valueKey]
180
180
  }), {});
181
181
  // 實作
182
- function createEnumLikeObject(obj, name, scene) {
183
- const Enum = extractEnumLikeObject(obj, 'value');
182
+ function createEnumLikeObject(obj, options) {
183
+ const name = options?.name;
184
+ const scene = options?.scene;
185
+ const valueKey = options?.valueKey ?? 'value';
186
+ const Enum = extractEnumLikeObject(obj, valueKey);
184
187
  // List:根據有無 scene 做不同處理
185
188
  let list;
186
189
  if (scene) {
187
190
  // scenes 版本:解構指定 scene 的 label
188
191
  list = Object.entries(obj).map(([key, item])=>({
189
192
  key,
190
- value: item.value,
193
+ value: item?.[valueKey],
191
194
  ...item.scenes?.[scene] ?? {}
192
195
  }));
193
196
  } else {
194
197
  // label only 版本
195
198
  list = Object.entries(obj).map(([key, item])=>({
196
199
  key,
200
+ value: item?.[valueKey],
197
201
  ...item
198
202
  }));
199
203
  }
200
204
  function getLabel(value) {
201
- const targetItem = list.find((item)=>item.value === value);
205
+ const targetItem = list.find((item)=>// 如果 list 項目內含有 valueKey 對應欄位,優先以該欄位比對;否則以 value 欄位比對
206
+ valueKey in item ? item[valueKey] === value : item.value === value);
202
207
  if (!targetItem) return String(value);
203
208
  if ('label' in targetItem) return targetItem.label;
204
209
  return String(value);
205
210
  }
211
+ if (name) {
212
+ // 命名版:使用 Enum${name}, ${name}List, get${name}Label 鍵名
213
+ return {
214
+ [`Enum${name}`]: Enum,
215
+ [`${name}List`]: list,
216
+ [`get${name}Label`]: getLabel
217
+ };
218
+ }
219
+ // 未命名:提供預設鍵名 Enum, List, getLabel
206
220
  return {
207
- [`Enum${name}`]: Enum,
208
- [`${name}List`]: list,
209
- [`get${name}Label`]: getLabel
221
+ Enum,
222
+ List: list,
223
+ getLabel
210
224
  };
211
225
  }
212
226
 
@@ -402,8 +402,9 @@ declare const extractEnumLikeObject: <T extends Record<string, { [P in K]: any;
402
402
  *
403
403
  * 取得 label 的方法 - 傳入 value 可以取得對應的 label
404
404
  *
405
- * @param obj 要處理的物件
406
- * @param name 生成的 enum 名稱
405
+ * 參數:
406
+ * - obj:要處理的物件
407
+ * - options:設定物件(可選)。若未提供 name,將使用預設鍵名:`Enum`、`List`、`getLabel`。
407
408
  *
408
409
  * @remarks
409
410
  * 若需多場景 label,請傳入第三參數 scene,詳細用法請見範例。
@@ -412,43 +413,102 @@ declare const extractEnumLikeObject: <T extends Record<string, { [P in K]: any;
412
413
  *
413
414
  * ```ts
414
415
  *
415
- * // 一般使用
416
+ * // 一般使用(命名版)
416
417
  * const Status = { Enabled: { value: 'enabled', label: '啟用' }, Disabled: { value: 'disabled', label: '停用' }};
417
- * const { EnumStatus, StatusList, getStatusLabel } = createEnumLikeObject(Status, 'Status');
418
+ * const { EnumStatus, StatusList, getStatusLabel } = createEnumLikeObject(Status, { name: 'Status' });
418
419
  * console.log(EnumStatus); // { Enabled: 'enabled', Disabled: 'disabled' }
419
420
  * console.log(StatusList); // [ { key: 'Enabled', value: 'enabled', label: '啟用' }, { key: 'Disabled', value: 'disabled', label: '停用' }]
420
421
  * console.log(getStatusLabel('enabled')); // '啟用'
421
422
  *
423
+ * // 一般使用(未命名,使用預設鍵名)
424
+ * const { Enum, List, getLabel } = createEnumLikeObject(Status);
425
+ * console.log(Enum); // { Enabled: 'enabled', Disabled: 'disabled' }
426
+ * console.log(List); // [ { key: 'Enabled', value: 'enabled', label: '啟用' }, { key: 'Disabled', value: 'disabled', label: '停用' }]
427
+ * console.log(getLabel('enabled')); // '啟用'
428
+ *
422
429
  * // scenes 版本
423
430
  *
424
431
  * const Status = { Enabled: { value: 'enabled', scenes: { webA: { label: '啟用' }, webB: { label: '激活' } } }, Disabled: { value: 'disabled', scenes: { webA: { label: '停用' }, webB: { label: '停止' }}}}
425
- * const { EnumStatusA, StatusAList, getStatusALabel } = createEnumLikeObject(Status, 'StatusA', 'webA');
432
+ * const { EnumStatusA, StatusAList, getStatusALabel } = createEnumLikeObject(Status, { name: 'StatusA', scene: 'webA' });
426
433
  * console.log(EnumStatusA); // { Enabled: 'enabled', Disabled: 'disabled' }
427
434
  * console.log(StatusAList); // [ { key: 'Enabled', value: 'enabled', label: '啟用' }, { key: 'Disabled', value: 'disabled', label: '停用' }]
428
435
  * console.log(getStatusALabel('enabled')); // '啟用'
429
436
  *
430
- * const { EnumStatusA, StatusAList, getStatusALabel } = createEnumLikeObject(Status, 'StatusB', 'webB');
437
+ * const { EnumStatusB, StatusBList, getStatusBLabel } = createEnumLikeObject(Status, { name: 'StatusB', scene: 'webB' });
431
438
  * console.log(EnumStatusB); // { Enabled: 'enabled', Disabled: 'disabled' }
432
439
  * console.log(StatusBList); // [ { key: 'Enabled', value: 'enabled', label: '激活' }, { key: 'Disabled', value: 'disabled', label: '停止' }]
433
440
  * console.log(getStatusBLabel('enabled')); // '激活'
434
441
  *
442
+ * // scenes 版本(未命名,使用預設鍵名)
443
+ * const { Enum, List, getLabel } = createEnumLikeObject(Status, { scene: 'webA' });
444
+ * console.log(Enum); // { Enabled: 'enabled', Disabled: 'disabled' }
445
+ * console.log(List); // [ { key: 'Enabled', value: 'enabled', label: '啟用' }, { key: 'Disabled', value: 'disabled', label: '停用' }]
446
+ * console.log(getLabel('enabled')); // '啟用'
435
447
  * ```
436
448
  *
437
449
  */
438
450
  declare function createEnumLikeObject<T extends Record<string, {
439
451
  value: any;
440
452
  label: string;
441
- }>, N extends string>(obj: T, name: N): {
453
+ }>, N extends string>(obj: T, options: {
454
+ name: N;
455
+ }): {
442
456
  [K in `Enum${N}` | `${N}List` | `get${N}Label`]: K extends `Enum${N}` ? {
443
457
  [key in keyof T]: T[key]['value'];
444
458
  } : K extends `${N}List` ? Array<{
445
459
  key: string;
446
460
  } & T[keyof T]> : (value: T[keyof T]['value']) => string;
447
461
  };
462
+ declare function createEnumLikeObject<T extends Record<string, Record<VK, any> & {
463
+ label: string;
464
+ }>, N extends string, VK extends keyof T[keyof T] & string>(obj: T, options: {
465
+ name: N;
466
+ valueKey: VK;
467
+ }): {
468
+ [K in `Enum${N}` | `${N}List` | `get${N}Label`]: K extends `Enum${N}` ? {
469
+ [key in keyof T]: T[key][VK];
470
+ } : K extends `${N}List` ? Array<{
471
+ key: string;
472
+ } & Omit<T[keyof T], 'value'> & {
473
+ value: T[keyof T][VK];
474
+ }> : (value: T[keyof T][VK]) => string;
475
+ };
476
+ declare function createEnumLikeObject<T extends Record<string, {
477
+ value: any;
478
+ label: string;
479
+ }>>(obj: T, options?: {
480
+ name?: undefined;
481
+ }): {
482
+ Enum: {
483
+ [key in keyof T]: T[key]['value'];
484
+ };
485
+ List: Array<{
486
+ key: string;
487
+ } & T[keyof T]>;
488
+ getLabel: (value: T[keyof T]['value']) => string;
489
+ };
490
+ declare function createEnumLikeObject<T extends Record<string, Record<VK, any> & {
491
+ label: string;
492
+ }>, VK extends keyof T[keyof T] & string>(obj: T, options: {
493
+ valueKey: VK;
494
+ }): {
495
+ Enum: {
496
+ [key in keyof T]: T[key][VK];
497
+ };
498
+ List: Array<{
499
+ key: string;
500
+ } & Omit<T[keyof T], 'value'> & {
501
+ value: T[keyof T][VK];
502
+ }>;
503
+ getLabel: (value: T[keyof T][VK]) => string;
504
+ };
448
505
  declare function createEnumLikeObject<T extends Record<string, {
449
506
  value: any;
450
507
  scenes: Record<string, Record<string, any>>;
451
- }>, N extends string, Scene extends keyof T[keyof T]['scenes']>(obj: T, name: N, scene: Scene): {
508
+ }>, N extends string, Scene extends keyof T[keyof T]['scenes']>(obj: T, options: {
509
+ name: N;
510
+ scene: Scene;
511
+ }): {
452
512
  [K in `Enum${N}` | `${N}List` | `get${N}Label`]: K extends `Enum${N}` ? {
453
513
  [key in keyof T]: T[key]['value'];
454
514
  } : K extends `${N}List` ? Array<{
@@ -456,6 +516,50 @@ declare function createEnumLikeObject<T extends Record<string, {
456
516
  value: T[keyof T]['value'];
457
517
  } & T[keyof T]['scenes'][Scene]> : (value: T[keyof T]['value']) => string;
458
518
  };
519
+ declare function createEnumLikeObject<T extends Record<string, Record<VK, any> & {
520
+ scenes: Record<string, Record<string, any>>;
521
+ }>, N extends string, Scene extends keyof T[keyof T]['scenes'], VK extends keyof T[keyof T] & string>(obj: T, options: {
522
+ name: N;
523
+ scene: Scene;
524
+ valueKey: VK;
525
+ }): {
526
+ [K in `Enum${N}` | `${N}List` | `get${N}Label`]: K extends `Enum${N}` ? {
527
+ [key in keyof T]: T[key][VK];
528
+ } : K extends `${N}List` ? Array<{
529
+ key: string;
530
+ value: T[keyof T][VK];
531
+ } & T[keyof T]['scenes'][Scene]> : (value: T[keyof T][VK]) => string;
532
+ };
533
+ declare function createEnumLikeObject<T extends Record<string, {
534
+ value: any;
535
+ scenes: Record<string, Record<string, any>>;
536
+ }>, Scene extends keyof T[keyof T]['scenes']>(obj: T, options: {
537
+ scene: Scene;
538
+ }): {
539
+ Enum: {
540
+ [key in keyof T]: T[key]['value'];
541
+ };
542
+ List: Array<{
543
+ key: string;
544
+ value: T[keyof T]['value'];
545
+ } & T[keyof T]['scenes'][Scene]>;
546
+ getLabel: (value: T[keyof T]['value']) => string;
547
+ };
548
+ declare function createEnumLikeObject<T extends Record<string, Record<VK, any> & {
549
+ scenes: Record<string, Record<string, any>>;
550
+ }>, Scene extends keyof T[keyof T]['scenes'], VK extends keyof T[keyof T] & string>(obj: T, options: {
551
+ scene: Scene;
552
+ valueKey: VK;
553
+ }): {
554
+ Enum: {
555
+ [key in keyof T]: T[key][VK];
556
+ };
557
+ List: Array<{
558
+ key: string;
559
+ value: T[keyof T][VK];
560
+ } & T[keyof T]['scenes'][Scene]>;
561
+ getLabel: (value: T[keyof T][VK]) => string;
562
+ };
459
563
 
460
564
  /**
461
565
  * simulate a fake api request
package/dist/es/index.mjs CHANGED
@@ -172,34 +172,48 @@ const FILE_SIZE_UNITS$1 = [
172
172
  [key]: value[valueKey]
173
173
  }), {});
174
174
  // 實作
175
- function createEnumLikeObject(obj, name, scene) {
176
- const Enum = extractEnumLikeObject(obj, 'value');
175
+ function createEnumLikeObject(obj, options) {
176
+ const name = options?.name;
177
+ const scene = options?.scene;
178
+ const valueKey = options?.valueKey ?? 'value';
179
+ const Enum = extractEnumLikeObject(obj, valueKey);
177
180
  // List:根據有無 scene 做不同處理
178
181
  let list;
179
182
  if (scene) {
180
183
  // scenes 版本:解構指定 scene 的 label
181
184
  list = Object.entries(obj).map(([key, item])=>({
182
185
  key,
183
- value: item.value,
186
+ value: item?.[valueKey],
184
187
  ...item.scenes?.[scene] ?? {}
185
188
  }));
186
189
  } else {
187
190
  // label only 版本
188
191
  list = Object.entries(obj).map(([key, item])=>({
189
192
  key,
193
+ value: item?.[valueKey],
190
194
  ...item
191
195
  }));
192
196
  }
193
197
  function getLabel(value) {
194
- const targetItem = list.find((item)=>item.value === value);
198
+ const targetItem = list.find((item)=>// 如果 list 項目內含有 valueKey 對應欄位,優先以該欄位比對;否則以 value 欄位比對
199
+ valueKey in item ? item[valueKey] === value : item.value === value);
195
200
  if (!targetItem) return String(value);
196
201
  if ('label' in targetItem) return targetItem.label;
197
202
  return String(value);
198
203
  }
204
+ if (name) {
205
+ // 命名版:使用 Enum${name}, ${name}List, get${name}Label 鍵名
206
+ return {
207
+ [`Enum${name}`]: Enum,
208
+ [`${name}List`]: list,
209
+ [`get${name}Label`]: getLabel
210
+ };
211
+ }
212
+ // 未命名:提供預設鍵名 Enum, List, getLabel
199
213
  return {
200
- [`Enum${name}`]: Enum,
201
- [`${name}List`]: list,
202
- [`get${name}Label`]: getLabel
214
+ Enum,
215
+ List: list,
216
+ getLabel
203
217
  };
204
218
  }
205
219
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gateweb/react-utils",
3
- "version": "1.14.1",
3
+ "version": "1.14.2",
4
4
  "description": "React Utils for GateWeb",
5
5
  "homepage": "https://github.com/GatewebSolutions/react-utils",
6
6
  "files": [