refactor: 💡 pro-enum now is powerful! cascader better,rm sugg

docs/components/_meta.json

@@ -8,10 +8,5 @@
     "type": "dir",
     "name": "plus",
     "label": "Plus 增强型组件"
-  },
-  {
-    "type": "dir",
-    "name": "pretty",
-    "label": "Pretty 优雅阅读态"
   }
 ]

docs/components/demos/CascaderPlus.tsx

@@ -102,16 +102,17 @@ export const getById = (parent?: React.Key) => {
       return flatten.filter((x) => x.parent === parent);
     });
 };
-export const loadData = (options: OptionData[]): Promise<OptionData[]> => {
-  const keys = [undefined, ...options.map((x) => x.value)];
-  const last = options[options.length - 1];
-  return getById(last?.value).then((opts) =>
+export const loadData = (
+  values: Array<number | string>,
+): Promise<OptionData[]> => {
+  const last = values[values.length - 1];
+  return getById(last).then((opts) =>
     opts.map((item) => {
       return {
         value: item.code,
         label: item.name,
-        // 需要给出叶子条件, 这里我们是省市区3级, 所以keys长度是3的时候就到最后一级别了
-        isLeaf: keys.length === 3,
+        // 需要给出叶子条件, 这里我们是省市区3级, 所以keys长度是2时候就到最后一级别了
+        isLeaf: values.length === 2,
       };
     }),
   );

docs/components/demos/ProEnum.tsx

@@ -14,7 +14,6 @@ import { createForm } from "@formily/core";
 import { FormProvider, createSchemaField } from "@formily/react";
 import {
   CascaderPlus,
-  Suggestion,
   ProEnum,
   ProEnumPretty,
   useProEnumEffects,
@@ -117,19 +116,22 @@ export const getById = (parent?: React.Key) => {
       return flatten.filter((x) => x.parent === parent);
     });
 };
-export const loadData = (options: OptionData[]): Promise<OptionData[]> => {
-  const keys = [undefined, ...options.map((x) => x.value)];
-  const last = options[options.length - 1];
-  return getById(last?.value).then((opts) =>
+export const loadData = (
+  values: Array<string | number>,
+): Promise<OptionData[]> => {
+  const last = values[values.length - 1];
+  const ret = getById(last).then((opts) =>
     opts.map((item) => {
       return {
         value: item.code,
         label: item.name,
-        // 需要给出叶子条件, 这里我们是省市区3级, 所以keys长度是3的时候就到最后一级别了
-        isLeaf: keys.length === 3,
+        // 需要给出叶子条件, 这里我们是省市区3级, 所以keys长度是2的时候就到最后一级别了
+        isLeaf: values.length === 2,
       };
     }),
   );
+
+  return ret;
 };
 const list = [
   {
@@ -145,11 +147,11 @@ const list = [
     value: "e",
   },
 ];
-const suggest = (params: object & { kw: string }) => {
-  console.log("search params", params);
+const suggest = (kw: string) => {
+  if (!kw) return Promise.resolve([]);
   const str = qs.stringify({
     code: "utf-8",
-    q: params?.kw,
+    q: kw,
   });
   return jsonp(`https://suggest.taobao.com/sug?${str}`)
     .then((response: any) => response.json())
@@ -177,8 +179,18 @@ const enums = {
       }, 1000);
     });
   }),
-  suggest: ProEnum.from(suggest, { mapToProp: "suggest" }),
-  linkage: ProEnum.from(loadData, { mapToProp: "loadData" }),
+  suggest: ProEnum.from(suggest, {
+    pretty: false,
+    mapToProp: "onSearch",
+    debounce: 200,
+    colorful: false,
+  }),
+  linkage: ProEnum.from(loadData, {
+    mapToProp: "loadData",
+    lazyTree: true,
+    pretty: false,
+    colorful: false,
+  }),
 };
 
 const SchemaField = createSchemaField({
@@ -192,7 +204,6 @@ const SchemaField = createSchemaField({
     FormLayout,
     Space,
     CascaderPlus,
-    Suggestion,
     ProEnumPretty,
   },
   scope: {
@@ -224,7 +235,9 @@ const schema: SchemaShape = {
           "x-component": "Select",
           enum: "{{enums.list}}",
           "x-component-props": {
-            showType: "badge",
+            enum: {
+              showType: "badge",
+            },
           },
         },
         lazySelect: {
@@ -235,7 +248,9 @@ const schema: SchemaShape = {
           enum: "{{enums.lazyList}}",
           "x-component-props": {
             mode: "multiple",
-            showType: "tag",
+            enum: {
+              showType: "tag",
+            },
           },
         },
         radio: {
@@ -300,17 +315,13 @@ const schema: SchemaShape = {
           title: "Suggestion",
           type: "string",
           "x-decorator": "FormItem",
-          "x-component": "Suggestion",
+          "x-component": "Select",
           "x-component-props": {
             placeholder: "查询淘宝商品..",
-            multiple: true,
+            mode: "multiple",
+            showSearch: true,
           },
           enum: "{{enums.suggest}}",
-          // "x-data": {
-          //   proEnum: {
-          //     mapToProp: "suggest"
-          // }
-          // },
         },
         linkage: {
           title: "Linkage",

docs/components/plus/cascader-plus.mdx

@@ -5,8 +5,8 @@
 |属性|说明|类型|默认值|
 |---|---|---|---|
 |`labelInValue`| 增加类比 `<Select />` 的 `labelInValue` 属性和功能支持| `boolean` | `false`|
-|`all`| 懒加载可以加载整棵树的数据 | `boolean` | `false`|
-|`loadData`| 结合 all 属性, 你现在可以加载一整棵树了 | `(opts:{value}[]) => Promise<{ label, value, children?}[]>` | -- |
+|`all`| 表示懒加载是加载整棵树的数据 | `boolean` | `false`|
+|`loadData`| 结合 all 属性, 你现在可以加载一整棵树了 | `(opts: string[]\|number[]) => Promise<{ label, value, children?}[]>` | -- |
 
 - 增强: 初始值只有 `value` 的时候, 自动调用接口补全 `label` 展示, 请刷新注意下面两个反显的示意
 

docs/components/pro/pro-enum.mdx

@@ -17,7 +17,7 @@ export type ProEnumItem = {
   children?: ProEnumItem[];
   /** lazy */
   loading?: boolean;
-  /** read prettery */
+  /** read pretty */
   color?: keyof typeof BUILTIN_COLOR | (string & {});
 };
 ```
@@ -32,32 +32,56 @@ export type ProEnumItem = {
 
 - 劫持 `readPretty` 形态下的 field.component, 优化枚举值的展示
 
-### 针对 Suggestion/CascaderPlus 这种
-
-更有用的是 异步数据的加载器， 而不是 `dataSource`, 因此如果 loader 被 mapToProp 到 field.componentProps 上的话, 我们认为加载流程会被托管到组件， 那么上述的自动加载和劫持都是不会生效的。
-
-取而代之的是， 你需要在组件内部处理这个异步请求；
-
+### 针对 Suggestion/Cascader 这种
 
+- 根据 `lazyTree` 判断是否是懒加载的树状数据， 如果是树状数据，将在拼装完成后， 传递给 dataSource
 
+- 根据 debounce 是否 >0 ,请求会进行防抖处理
 
 ## 代码案例
 
-如此，我们就可以通过固定的形式， 方便的在 Formliy 中使用异步的枚举值
+如此，我们就可以通过固定的形式， 方便的在 Formliy 中使用异步的枚举值, 以及轻松的适配 Suggestion(Select)/CascaderPlus
 
 <code src="../demos/ProEnum.tsx"  />
 
 ## API
 
 ### ProEnum
 
+pretty 劫持属性
+
 ```ts | pure
+/**
+ * Schema 上的配置
+ * @example
+ * {
+ *  type: 'string',
+ *  enum: ProEnum.from([]),
+ *  "x-component-props": {
+ *     enum: {
+ *       hijack: false,
+ *     }
+ *  }
+ * }
+ */
+type ProEnumSchemaOption = Pick<ProEnumOption, "mapToProp"> & {
+  pretty?: boolean;
+  showType?: React.ComponentProps<typeof ProEnumPretty>["showType"];
+  strict?: React.ComponentProps<typeof ProEnumPretty>["strictMode"];
+  // 额外的请求参数
+  params?: any;
+};
 
+/** 创建时候的配置 */
 type ProEnumOption = {
-  /** loader 映射到 componentProps 上的名称 */
-  mapToProp: string;
-  /** 是否进行缓存， 默认开启， 显示设置 false 关闭缓存  */
+  mapToProp?: string;
   cache?: boolean;
+  // > 0 启用
+  debounce?: number;
+  lazyTree?: boolean;
+  colorful?: boolean;
+  // 是否劫持 read pretty
+  pretty?: boolean;
 };
 
 type TItemsOrLoader =