Merge branch 'dev' of github.com:alibaba/form-render into dev

tools/schema-generator/package.json

 {
   "name": "fr-generator",
-  "version": "2.0.3",
+  "version": "2.1.1",
   "scripts": {
     "build": "father-build",
     "prepare": "npm run build",

tools/schema-generator/src/FR/RenderField.js

@@ -73,8 +73,9 @@ const RenderField = ({
   const usefulWidgetProps = transformProps({
     value: data || schema.default,
     checked: data,
-    disabled: schema['disabled'],
-    readOnly: schema['readOnly'],
+    disabled: schema.disabled,
+    readOnly: schema.readOnly,
+    format: schema.format,
     onChange,
     schema,
     ...schema['props'],

tools/schema-generator/src/FRWrapper.js

@@ -11,8 +11,8 @@ import {
   flattenToData,
   looseJsonParse,
   isObject,
-  oldSchemaToNew,
   newSchemaToOld,
+  schemaToState,
 } from './utils';
 import { Ctx, StoreCtx } from './context';
 import FR from './FR';
@@ -90,28 +90,12 @@ function Wrapper(
     setState({ schemaForImport: e.target.value });
   };
 
-  // 收口点 propsSchema 到 schema 的转换（一共就3个入口：defaultValue，importSchema，setValue）
-  // TODO: 3个入口可能还是太多了，是不是考虑在外面裹一层
-  // TODO2: 导入这边看看会不会传一个乱写的schema就crash
   const importSchema = () => {
     try {
       const value = transformFrom(looseJsonParse(local.schemaForImport));
-      let _isNewVersion = true;
-      if (value && value.propsSchema) {
-        _isNewVersion = false;
-      }
-      const schema = oldSchemaToNew(value);
-      setGlobal(state => ({
-        schema,
-        formData: {},
+      setGlobal(() => ({
         selected: undefined,
-        isNewVersion: _isNewVersion,
-        frProps: {
-          ...state.frProps,
-          column: schema.column,
-          displayType: schema.displayType,
-          labelWidth: schema.labelWidth,
-        },
+        ...schemaToState(value),
       }));
     } catch (error) {
       message.info('格式不对哦，请重新尝试'); // 可以加个格式哪里不对的提示
@@ -141,29 +125,12 @@ function Wrapper(
 
   const getValue = () => displaySchema;
 
-  // 收口点 propsSchema 到 schema
-  // setValue 外部用于修改大schema，叫setSchema比较合适
-  // TODO: 这次顶层的props传递改动和整理后，确保这个api还是正确的
   const setValue = value => {
     try {
-      // TODO: 这里默认使用setValue的同学不使用ui:Schema
-      let _isNewVersion = true;
-      if (value && value.propsSchema) {
-        _isNewVersion = false;
-      }
-      const schema = oldSchemaToNew(value);
       setGlobal(state => ({
         ...state,
-        schema,
-        formData: {},
         selected: undefined,
-        isNewVersion: _isNewVersion,
-        frProps: {
-          ...state.frProps,
-          column: schema.column,
-          displayType: schema.displayType,
-          labelWidth: schema.labelWidth,
-        },
+        ...schemaToState(value),
       }));
     } catch (error) {
       console.error(error);

tools/schema-generator/src/Main.js

@@ -10,7 +10,7 @@ import list from './widgets/antd/list';
 import './atom.less';
 import './Main.less';
 import 'antd/dist/antd.less';
-import { oldSchemaToNew } from './utils';
+import { schemaToState } from './utils';
 
 const DEFAULT_SCHEMA = {
   type: 'object',
@@ -48,9 +48,7 @@ function App(props, ref) {
   const frwRef = ref || useRef();
   const [state, setState] = useSet({
     formData: {},
-    frProps: {
-      displayType: 'row',
-    }, // form-render 的全局props等
+    frProps: {}, // form-render 的全局 props 等
     hovering: undefined, // 目前没有用到
     isNewVersion: true, // 用schema字段，还是用propsSchema字段，这是一个问题
     preview: false, // preview = false 是编辑模式
@@ -61,21 +59,7 @@ function App(props, ref) {
   // 收口点 propsSchema 到 schema 的转换 (一共3处，其他两个是 importSchema 和 setValue，在 FRWrapper 文件)
   useEffect(() => {
     const schema = defaultValue ? transformFrom(defaultValue) : DEFAULT_SCHEMA;
-    if (!schema) return;
-    if (schema.propsSchema) {
-      setState({ isNewVersion: false });
-    } else {
-      setState({ isNewVersion: true });
-    }
-    setState({
-      schema: oldSchemaToNew(schema), // 旧的转新的，新的不变
-      formData: schema.formData || {},
-      frProps: {
-        column: schema.column,
-        displayType: schema.displayType,
-        labelWidth: schema.labelWidth,
-      },
-    });
+    if (schema) setState(schemaToState(schema));
   }, [defaultValue]);
 
   const {

tools/schema-generator/src/Right/GlobalSettings.js

@@ -6,12 +6,9 @@ import { useStore, useGlobal } from '../hooks';
 export default function GlobalSettings() {
   const form = useForm();
   const [innerUpdate, setInnerUpdate] = useState(false);
-  const { widgets, frProps, userProps } = useStore();
+  const { widgets, frProps, userProps = {} } = useStore();
   const setGlobal = useGlobal();
-  const globalSettings =
-    userProps && userProps.globalSettings
-      ? userProps.globalSettings
-      : defaultGlobalSettings;
+  const globalSettings = userProps.globalSettings || defaultGlobalSettings;
 
   const onDataChange = value => {
     setInnerUpdate(true);

tools/schema-generator/src/Right/ItemSettings.js

@@ -69,7 +69,7 @@ export default function ItemSettings() {
     // setting 该显示什么的计算，要把选中组件的 schema 和它对应的 widgets 的整体 schema 进行拼接
     try {
       const item = flatten[selected];
-      if (!item) return;
+      if (!item || selected === '#') return;
       setReady(false);
       // 算 widgetList
       const _settings = Array.isArray(settings)
@@ -88,13 +88,16 @@ export default function ItemSettings() {
 
       if (hideId) delete properties.$id;
 
-      form.setValues(item.schema);
       setSettingSchema({
         type: 'object',
         displayType: 'column',
         properties,
       });
-      setTimeout(() => setReady(true), 0);
+      form.setValues(item.schema);
+      setTimeout(() => {
+        setReady(true);
+        onDataChange(form.getValues());
+      }, 0);
     } catch (error) {
       console.log(error);
     }

tools/schema-generator/src/Settings/index.js

@@ -11,6 +11,21 @@ export const defaultCommonSettings = {
     title: '标题',
     type: 'string',
   },
+  type: {
+    title: '类型',
+    type: 'string',
+    hidden: '{{true}}',
+  },
+  widget: {
+    title: '组件',
+    type: 'string',
+    hidden: '{{true}}',
+  },
+  format: {
+    title: '格式',
+    type: 'string',
+    hidden: '{{true}}',
+  },
   description: {
     title: '说明',
     type: 'string',
@@ -322,7 +337,6 @@ export const elements = [
     name: 'checkboxes',
     schema: {
       title: '多选',
-      description: '点击多选',
       type: 'array',
       widget: 'checkboxes',
       items: {
@@ -445,6 +459,10 @@ export const layouts = [
       },
     },
     setting: {
+      items: {
+        type: 'object',
+        hidden: '{{true}}',
+      },
       min: {
         title: '最小长度',
         type: 'number',
@@ -486,6 +504,10 @@ export const layouts = [
       },
     },
     setting: {
+      items: {
+        type: 'object',
+        hidden: '{{true}}',
+      },
       min: {
         title: '最小长度',
         type: 'number',
@@ -531,6 +553,10 @@ export const layouts = [
       },
     },
     setting: {
+      items: {
+        type: 'object',
+        hidden: '{{true}}',
+      },
       min: {
         title: '最小长度',
         type: 'number',
@@ -572,6 +598,10 @@ export const layouts = [
       },
     },
     setting: {
+      items: {
+        type: 'object',
+        hidden: '{{true}}',
+      },
       min: {
         title: '最小长度',
         type: 'number',
@@ -694,6 +724,7 @@ export const defaultGlobalSettings = {
     displayType: {
       title: '标签展示模式',
       type: 'string',
+      default: 'row',
       enum: ['row', 'column'],
       enumNames: ['同行', '单独一行'],
       widget: 'radio',

tools/schema-generator/src/utils.js

@@ -588,6 +588,22 @@ export const newSchemaToOld = setting => {
   return setting;
 };
 
+export const schemaToState = value => {
+  const schema = oldSchemaToNew(value);
+  const frProps = Object.keys(schema).reduce((rst, cur) => {
+    if (['type', 'properties'].includes(cur)) return rst;
+    return { ...rst, [cur]: schema[cur] };
+  }, {});
+  const isNewVersion = !(value && value.propsSchema);
+
+  return {
+    schema,
+    frProps,
+    formData: schema.formData || {},
+    isNewVersion,
+  };
+};
+
 export function defaultGetValueFromEvent(valuePropName, ...args) {
   const event = args[0];
   if (event && event.target && valuePropName in event.target) {