💥 feat: valueEnum support map

.umirc.js

@@ -1,5 +1,5 @@
 export default {
-  title: 'Pro-Table',
+  title: 'ProTable',
   mode: 'site',
   logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
   extraBabelPlugins: [

docs/index.md

@@ -3,7 +3,7 @@ title: 介绍
 order: 10
 sidebar: false
 hero:
-  title: Pro-Table
+  title: ProTable
   desc: 🏆 Use Ant Design Table like a Pro!.
   actions:
     - text: 快速开始 →

docs/search.md

@@ -9,7 +9,7 @@ nav:
 
 # Table 搜索
 
-Pro-Table 会根据列来生成一个 Form，用于筛选列表数据，最后的值会根据通过 `request` 的第一个参数返回，看起来就像。
+ProTable 会根据列来生成一个 Form，用于筛选列表数据，最后的值会根据通过 `request` 的第一个参数返回，看起来就像。
 
 ```jsx | pure
 <ProTable request={(params,sort,filter)=>{ all params}}>
@@ -33,7 +33,7 @@ Form 的列是根据 `valueType` 来生成不同的类型。
 
 ## 相关 API
 
-### Pro-Table
+### ProTable
 
 | 属性 | 描述 | 类型 | 默认值 |
 | --- | --- | --- | --- |

docs/valueType.md

@@ -9,7 +9,7 @@ nav:
 
 # 值类型
 
-Pro-Table 封装了一些常用的值类型来减少重复的 `render` 操作，配置一个`valueType` 即可展示格式化响应的数据。
+ProTable 封装了一些常用的值类型来减少重复的 `render` 操作，配置一个`valueType` 即可展示格式化响应的数据。
 
 ## valueType
 
@@ -74,7 +74,7 @@ return { type: 'percent', showSymbol: true | false, precision: 2 };
 
 ## valueEnum
 
-valueEnum 需要传入一个枚举，Pro-Table 会自动根据值获取响应的枚举，并且在 from 中生成一个下拉框。看起来是这样的：
+valueEnum 需要传入一个枚举，ProTable 会自动根据值获取响应的枚举，并且在 from 中生成一个下拉框。看起来是这样的：
 
 ```ts | pure
 const valueEnum = {

src/Form/index.tsx

@@ -9,7 +9,12 @@ import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider';
 import { DownOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 
-import { parsingValueEnumToArray, useDeepCompareEffect, genColumnKey } from '../component/util';
+import {
+  parsingValueEnumToArray,
+  useDeepCompareEffect,
+  genColumnKey,
+  ObjToMap,
+} from '../component/util';
 import { useIntl, IntlType } from '../component/intlContext';
 import Container from '../container';
 import { ProColumnsValueTypeFunction } from '../defaultRender';
@@ -171,7 +176,7 @@ export const FormInputRender: React.FC<{
           {...rest}
           {...item.formItemProps}
         >
-          {parsingValueEnumToArray(valueEnum).map(({ value, text }) => (
+          {parsingValueEnumToArray(ObjToMap(valueEnum)).map(({ value, text }) => (
             <Select.Option key={value} value={value}>
               {text}
             </Select.Option>

src/Table.tsx

@@ -25,6 +25,7 @@ import get, {
   useDeepCompareEffect,
   genColumnKey,
   removeObjectNull,
+  ObjToMap,
 } from './component/util';
 import defaultRenderText, {
   ProColumnsValueType,
@@ -48,6 +49,24 @@ export interface ColumnsState {
   fixed?: 'right' | 'left' | undefined;
 }
 
+export type valueEnumObj = {
+  [key: string]:
+    | {
+        text: ReactNode;
+        status: StatusType;
+      }
+    | ReactNode;
+};
+
+export type valueEnumMap = Map<
+  React.ReactText,
+  | {
+      text: ReactNode;
+      status: StatusType;
+    }
+  | ReactNode
+>;
+
 export interface ProColumnType<T = unknown>
   extends Omit<ColumnType<T>, 'render' | 'children'>,
     Partial<Omit<FormItemProps, 'children'>> {
@@ -114,14 +133,7 @@ export interface ProColumnType<T = unknown>
   /**
    * 值的枚举，如果存在枚举，Search 中会生成 select
    */
-  valueEnum?: {
-    [key: string]:
-      | {
-          text: ReactNode;
-          status: StatusType;
-        }
-      | ReactNode;
-  };
+  valueEnum?: valueEnumMap | valueEnumObj;
 
   /**
    * 在查询表单中隐藏
@@ -415,7 +427,12 @@ const columRender = <T, U = any>({
     return null;
   }
 
-  const renderTextStr = renderText(parsingText(text, valueEnum), row, index, action.current);
+  const renderTextStr = renderText(
+    parsingText(text, ObjToMap(valueEnum)),
+    row,
+    index,
+    action.current,
+  );
   const textDom = defaultRenderText<T, {}>(
     renderTextStr,
     item.valueType || 'text',
@@ -427,7 +444,7 @@ const columRender = <T, U = any>({
   const dom: React.ReactNode = genEllipsis(
     genCopyable(textDom, item),
     item,
-    renderText(parsingText(text, valueEnum, true), row, index, action.current),
+    renderText(parsingText(text, ObjToMap(valueEnum), true), row, index, action.current),
   );
 
   if (item.render) {
@@ -451,6 +468,13 @@ const columRender = <T, U = any>({
   return checkUndefinedOrNull(dom) ? dom : null;
 };
 
+/**
+ * 转化 columns 到 pro 的格式
+ * 主要是 render 方法的自行实现
+ * @param columns
+ * @param map
+ * @param columnEmptyText
+ */
 const genColumnList = <T, U = {}>(
   columns: ProColumns<T>[],
   map: {
@@ -459,6 +483,10 @@ const genColumnList = <T, U = {}>(
   columnEmptyText?: ColumnEmptyText,
 ): (ColumnsType<T>[number] & { index?: number })[] =>
   (columns
+    .map((item) => ({
+      ...item,
+      valueEnum: ObjToMap(item.valueEnum),
+    }))
     .map((item, columnsIndex) => {
       const { key, dataIndex } = item;
       const columnKey = genColumnKey(key, dataIndex, columnsIndex);

src/component/util.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode, useEffect, useRef, ReactText, DependencyList, useCall
 import isEqual from 'lodash.isequal';
 import { DataIndex } from 'rc-table/lib/interface';
 import TableStatus, { StatusType } from './status';
+import { valueEnumObj, valueEnumMap } from '../Table';
 
 /**
  * 转化 text 和 valueEnum
@@ -10,29 +11,19 @@ import TableStatus, { StatusType } from './status';
  * @param valueEnum
  * @param prue 纯净模式，不增加 status
  */
-export const parsingText = (
-  text: string | number,
-  valueEnum?: {
-    [key: string]:
-      | {
-          text: ReactNode;
-          type: StatusType;
-        }
-      | ReactNode;
-  },
-  pure?: boolean,
-) => {
+export const parsingText = (text: string | number, valueEnum?: valueEnumMap, pure?: boolean) => {
   if (!valueEnum) {
     return text;
   }
-  const domText = valueEnum[text] as {
-    text: ReactNode;
-    status: StatusType;
-  };
-  if (!domText) {
+
+  if (!valueEnum.has(text)) {
     return text;
   }
 
+  const domText = valueEnum.get(text) as {
+    text: ReactNode;
+    status: StatusType;
+  };
   if (domText.status) {
     if (pure) {
       return domText.text;
@@ -47,32 +38,41 @@ export const parsingText = (
 };
 
 /**
- * 把 value 的枚举转化为 数组
+ * 把 value 的枚举转化为数组
  * @param valueEnum
  */
 export const parsingValueEnumToArray = (
-  valueEnum: {
-    [key: string]:
-      | {
-          text: ReactNode;
-          type: StatusType;
-        }
-      | ReactNode;
-  } = {},
+  valueEnum: valueEnumMap | undefined = new Map(),
 ): {
   value: string;
   text: string;
 }[] =>
-  Object.keys(valueEnum).map((key) => {
-    const value =
-      (valueEnum[key] as {
+  Object.keys(valueEnum)
+    .filter((key) => {
+      if (!valueEnum.has(key)) {
+        return false;
+      }
+      const value = valueEnum.get(key);
+      if (!value) {
+        return false;
+      }
+      return true;
+    })
+    .map((key) => {
+      const value = valueEnum.get(key) as {
         text: string;
-      }) || '';
-    return {
-      text: ((value.text || value || '') as unknown) as string,
-      value: key,
-    };
-  });
+      };
+      if (typeof value === 'object' && value?.text) {
+        return {
+          text: (value?.text as unknown) as string,
+          value: key,
+        };
+      }
+      return {
+        text: ((value || '') as unknown) as string,
+        value: key,
+      };
+    });
 
 /**
  * 检查值是否存在
@@ -258,3 +258,32 @@ export const removeObjectNull = (obj: { [key: string]: any }) => {
   });
   return newObj;
 };
+
+/**
+ * 获取类型的 type
+ * @param obj
+ */
+function getType(obj: any) {
+  // @ts-ignore
+  const type = Object.prototype.toString
+    .call(obj)
+    .match(/^\[object (.*)\]$/)[1]
+    .toLowerCase();
+  if (type === 'string' && typeof obj === 'object') return 'object'; // Let "new String('')" return 'object'
+  if (obj === null) return 'null'; // PhantomJS has type "DOMWindow" for null
+  if (obj === undefined) return 'undefined'; // PhantomJS has type "DOMWindow" for undefined
+  return type;
+}
+
+export const ObjToMap = (
+  value: valueEnumObj | valueEnumMap | undefined,
+): valueEnumMap | undefined => {
+  if (!value) {
+    return value;
+  }
+  console.log(getType(value));
+  if (getType(value) === 'map') {
+    return value as valueEnumMap;
+  }
+  return new Map(Object.entries(value));
+};