feat(generator): v2.7.8 (alibaba#726)

* fix(generator): 属性配置表单 * chore(generator): v2.7.6 * feat(generator): 获取配置表单实例 * chore(generator): v2.7.7 * docs(generator): 调整文档布局 * fix: alibaba#703 文本域指定高度 * feat(generator): 支持复杂类型默认值配置 close alibaba#682 * chore(generator): v2.7.8
wuweikd · Apr 2, 2022 · ebad008 · ebad008
1 parent d8f1547
commit ebad008
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 47 deletions.
diff --git a/docs/generator/demo.md b/docs/generator/demo.md
@@ -0,0 +1,29 @@
+---
+order: 3
+title: 案例演示
+toc: menu
+---
+
+### 浮窗接入
+
+用于 schema 的可视化修改
+
+<code src='./demo/modal.jsx' />
+
+### 侧栏配置
+
+使用 settings/commonSettings 自由配置左右侧栏内容，并使用 widgets 注入和使用自定义组件
+
+“计数器”是自定义组件。
+
+<code src='./demo/settings.jsx' />
+
+### 自定义布局
+
+<code src='./demo/layout.jsx' />
+
+### Schema 互转
+
+使用 `transformer` 这个 props，进行 schema 的互转
+
+<code src='./demo/transformer.jsx' />
diff --git a/docs/generator/faq.md b/docs/generator/faq.md
@@ -0,0 +1,9 @@
+---
+order: 4
+title: 常见问题
+toc: content
+---
+
+**1、如何控制编辑器高度**
+
+给组件外层要包裹的 div 设置高度即可，否则为默认值 min-height: 30vh
diff --git a/docs/generator/index.md b/docs/generator/index.md
@@ -1,18 +1,16 @@
 ---
 order: 1
-title: 使用文档
-toc: content
+title: 如何使用
+toc: menu
 ---
 
-## 如何使用
-
-### 安装
+## 安装
 
 ```bash
 npm i fr-generator
 ```
 
-### 代码演示
+## 代码演示
 
 ```jsx
 /**
@@ -101,34 +99,3 @@ export default Demo;
 | copyValue      | 将现有 schema 拷贝到剪贴板 | -        |
 | getErrorFields | 获取配置项校验错误         | -        |
 
-## 案例演示
-
-### 浮窗接入
-
-用于 schema 的可视化修改
-
-<code src='./demo/modal.jsx' />
-
-### 侧栏配置
-
-使用 settings/commonSettings 自由配置左右侧栏内容，并使用 widgets 注入和使用自定义组件
-
-“计数器”是自定义组件。
-
-<code src='./demo/settings.jsx' />
-
-### 自定义布局
-
-<code src='./demo/layout.jsx' />
-
-### Schema 互转
-
-使用 `transformer` 这个 props，进行 schema 的互转
-
-<code src='./demo/transformer.jsx' />
-
-## 常见问题
-
-**1、如何控制编辑器高度**
-
-给组件外层要包裹的 div 设置高度即可，否则为默认值 min-height: 30vh
diff --git a/tools/schema-generator/package.json b/tools/schema-generator/package.json
@@ -1,13 +1,13 @@
 {
   "name": "fr-generator",
-  "version": "2.7.5",
+  "version": "2.7.8",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",
   "scripts": {
     "beta": "npm publish --tag beta",
     "build": "father-build",
-    "prepare": "npm run build",
+    "prepare": "yarn build",
     "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
     "postpublish": "git push --tags",
     "test": "umi-test",

diff --git a/tools/schema-generator/src/Provider.jsx b/tools/schema-generator/src/Provider.jsx
@@ -74,6 +74,7 @@ function Provider(props, ref) {
     preview: false, // preview = false 是编辑模式
     schema: {},
     selected: undefined, // 被选中的$id, 如果object/array的内部，以首字母0标识
+    settingsForm: null,
   });
   const [errorFields, setErrorFields] = useState([]);
 
@@ -186,11 +187,14 @@ function Provider(props, ref) {
 
   const getErrorFields = () => errorFields;
 
+  const getSettingsForm = () => state.settingsForm;
+
   useImperativeHandle(frwRef, () => ({
     getValue,
     setValue,
     copyValue,
     getErrorFields,
+    getSettingsForm,
   }));
 
   // TODO: flatten是频繁在变的，应该和其他两个函数分开

diff --git a/tools/schema-generator/src/components/Settings/GlobalSettings.jsx b/tools/schema-generator/src/components/Settings/GlobalSettings.jsx
@@ -23,6 +23,10 @@ export default function GlobalSettings({ widgets }) {
     }
   }, [frProps]);
 
+  useEffect(() => {
+    setGlobal({ settingsForm: form });
+  }, []);
+
   return (
     <div style={{ paddingRight: 24 }}>
       <FormRender

diff --git a/tools/schema-generator/src/components/Settings/ItemSettings.jsx b/tools/schema-generator/src/components/Settings/ItemSettings.jsx
@@ -1,5 +1,6 @@
 import FormRender, { useForm } from 'form-render';
 import React, { useEffect, useState } from 'react';
+import * as frgWidgets from '../../widgets';
 import {
   advancedElements,
   baseCommonSettings,
@@ -9,13 +10,11 @@ import {
   layouts,
 } from '../../settings';
 import { isObject, mergeInOrder } from '../../utils';
-import { useStore } from '../../utils/hooks';
 import { getWidgetName } from '../../utils/mapping';
-import HtmlInput from '../../widgets/htmlInput';
-import IdInput from '../../widgets/idInput';
-import PercentSlider from '../../widgets/percentSlider';
+import { useStore, useGlobal } from '../../utils/hooks';
 
 export default function ItemSettings({ widgets }) {
+  const setGlobal = useGlobal();
   const form = useForm();
   const {
     selected,
@@ -33,9 +32,7 @@ export default function ItemSettings({ widgets }) {
 
   const _widgets = {
     ...globalWidgets,
-    idInput: IdInput,
-    htmlInput: HtmlInput,
-    percentSlider: PercentSlider,
+    ...frgWidgets,
   };
 
   const getWidgetList = (settings, commonSettings) => {
@@ -128,6 +125,10 @@ export default function ItemSettings({ widgets }) {
     validation && onItemErrorChange(form?.errorFields);
   }, [validation, form?.errorFields]);
 
+  useEffect(() => {
+    setGlobal({ settingsForm: form });
+  }, []);
+
   return (
     <div style={{ paddingRight: 24 }}>
       <FormRender

diff --git a/tools/schema-generator/src/settings/index.js b/tools/schema-generator/src/settings/index.js
@@ -177,7 +177,7 @@ export const elements = [
             title: '高度自动',
             type: 'boolean',
           },
-          row: {
+          rows: {
             title: '指定高度',
             type: 'number',
           },
@@ -378,6 +378,11 @@ export const elements = [
       widget: 'multiSelect',
     },
     setting: {
+      default: {
+        title: '默认值',
+        type: 'array',
+        widget: 'jsonInput'
+      },
       enumList: {
         title: '选项',
         type: 'array',
@@ -423,6 +428,11 @@ export const elements = [
       enumNames: ['杭州', '武汉', '湖州', '贵阳'],
     },
     setting: {
+      default: {
+        title: '默认值',
+        type: 'array',
+        widget: 'jsonInput'
+      },
       enumList: {
         title: '选项',
         type: 'array',
@@ -557,6 +567,11 @@ export const layouts = [
       },
     },
     setting: {
+      default: {
+        title: '默认值',
+        type: 'array',
+        widget: 'jsonInput'
+      },
       items: {
         type: 'object',
         hidden: '{{true}}',
@@ -602,6 +617,11 @@ export const layouts = [
       },
     },
     setting: {
+      default: {
+        title: '默认值',
+        type: 'array',
+        widget: 'jsonInput'
+      },
       items: {
         type: 'object',
         hidden: '{{true}}',
@@ -651,6 +671,11 @@ export const layouts = [
       },
     },
     setting: {
+      default: {
+        title: '默认值',
+        type: 'array',
+        widget: 'jsonInput'
+      },
       items: {
         type: 'object',
         hidden: '{{true}}',
@@ -696,6 +721,11 @@ export const layouts = [
       },
     },
     setting: {
+      default: {
+        title: '默认值',
+        type: 'array',
+        widget: 'jsonInput'
+      },
       items: {
         type: 'object',
         hidden: '{{true}}',

diff --git a/tools/schema-generator/src/widgets/index.js b/tools/schema-generator/src/widgets/index.js
@@ -0,0 +1,11 @@
+import idInput from './idInput';
+import htmlInput from './htmlInput';
+import jsonInput from './jsonInput';
+import percentSlider from './percentSlider';
+
+export {
+  idInput,
+  htmlInput,
+  jsonInput,
+  percentSlider,
+}
diff --git a/tools/schema-generator/src/widgets/jsonInput.jsx b/tools/schema-generator/src/widgets/jsonInput.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Input } from 'antd';
+
+export default function jsonInput({
+  onChange,
+  value,
+  disabled,
+  readonly,
+  options,
+}) {
+  const handleChange = e => {
+    try {
+      onChange(JSON.parse(e.target.value));
+    } catch {
+      onChange(e.target.value);
+    }
+  };
+
+  const inputValue = typeof value === 'string' ? value : JSON.stringify(value)
+
+  return (
+    <Input
+      disabled={disabled || readonly}
+      {...options}
+      onChange={handleChange}
+      value={inputValue}
+    />
+  );
+}