refactor(@uform/react-schema-editor): improve code (#566)

alibaba · Dec 31, 2019 · cab64d2 · cab64d2
1 parent 8d589aa
commit cab64d2
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 27 deletions.
diff --git a/packages/react-schema-editor/src/components/FieldEditor.tsx b/packages/react-schema-editor/src/components/FieldEditor.tsx
@@ -7,15 +7,16 @@ import {
   Input,
   InputNumber,
   Select,
-  AutoComplete,
+  AutoComplete
 } from 'antd'
 import {
   getFieldTypeData,
   getInputTypeData,
   getXComponentData,
   getComponentPropsData,
-  getComponentPropsValue,
+  getComponentProps,
   getInputType,
+  getDefaultValue,
   getPropertyValue,
   getExpressionValue,
   getRuleMessage,
@@ -66,7 +67,7 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
     propsKey
   })
 
-  const componentPropsValue = getComponentPropsValue({ schema, propsKey })
+  const componentProps = getComponentProps({ schema, propsKey })
 
   const handleXComponentPropsValueChange = (value, property) => {
     let newSchema
@@ -98,25 +99,8 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
 
   const handleInputTypeChange = (value, property) => {
     let newSchema
-    let defaultValue
-    switch (value) {
-      case InputTypes.INPUT: {
-        defaultValue = ''
-        break
-      }
-      case InputTypes.NUMBER_PICKER: {
-        defaultValue = 0
-        break
-      }
-      case InputTypes.CHECKBOX: {
-        defaultValue = false
-        break
-      }
-      case InputTypes.TEXT_AREA: {
-        defaultValue = null
-        break
-      }
-    }
+    let defaultValue = getDefaultValue(value)
+
     if (propsKey === ComponentPropsTypes.X_RULES) {
       const newRules = _.map(schema[propsKey], rule => {
         if (_.has(rule, property)) {
@@ -234,7 +218,7 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
   return (
     <div className="field-group">
       <div className="field-group-title">{title}</div>
-      {_.map(componentPropsValue, (property, index) => {
+      {_.map(componentProps, (property, index) => {
         const value = getPropertyValue({ schema, propsKey, property })
         const inputType = getInputType(value)
         return (
@@ -303,7 +287,7 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
                 className="field-group-form-item"
               >
                 <InputNumber
-                  style={{width: '100%'}}
+                  style={{ width: '100%' }}
                   value={value}
                   onChange={value => {
                     handleXComponentPropsValueChange(value, property)
@@ -380,6 +364,7 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
         )
       })}
       <Button
+        disabled={_.includes(componentProps, BLANK_PROPERTY_VALUE)}
         type="primary"
         icon="plus"
         size="small"
@@ -396,6 +381,7 @@ const FieldEditor: React.FC<IFieldEditorProps> = ({
   onFieldKeyChange,
   onChange
 }) => {
+  // 如果节点类型不是 object 或者 array，则该节点为叶子节点
   const isLeafField = !['object', 'array'].includes(schema.type)
   const fieldTypeData = getFieldTypeData()
 
@@ -431,6 +417,7 @@ const FieldEditor: React.FC<IFieldEditorProps> = ({
                   type: value
                 })
               }}
+              // 如果当前节点不是叶子节点，而且拥有子元素，则该节点不能变更类型
               disabled={fieldTypeDisabled(schema)}
             >
               {_.map(fieldTypeData.options, ({ label, value }) => (
@@ -513,4 +500,4 @@ const FieldEditor: React.FC<IFieldEditorProps> = ({
   )
 }
 
-export default FieldEditor
+export default FieldEditor
diff --git a/packages/react-schema-editor/src/utils/fieldEditorHelpers.ts b/packages/react-schema-editor/src/utils/fieldEditorHelpers.ts
@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import { InputTypes, ComponentPropsTypes } from './types'
 
+// 组件取值类型
 export const getFieldTypeData = () => {
   const options = [
     { label: '字符串', value: 'string' },
@@ -15,6 +16,7 @@ export const getFieldTypeData = () => {
   }
 }
 
+// 属性配置输入方式
 export const getInputTypeData = () => {
   const options = [
     { label: '字符串输入框', value: InputTypes.INPUT },
@@ -28,8 +30,9 @@ export const getInputTypeData = () => {
   }
 }
 
+// 表单字段属性（对应 FormItem 的配置属性）
 export const getDefaultXProps = () => {
-  return  {
+  return {
     colon: {},
     extra: {},
     hasFeedback: {},
@@ -44,6 +47,7 @@ export const getDefaultXProps = () => {
   }
 }
 
+// 校验规则属性
 export const getDefaultXRules = () => {
   return {
     enum: {},
@@ -59,6 +63,7 @@ export const getDefaultXRules = () => {
   }
 }
 
+// 数组转换成 Select 组件识别的数据结构
 const convertKeysToSelectData = keys => {
   const options = keys.map(value => ({
     label: value,
@@ -70,6 +75,7 @@ const convertKeysToSelectData = keys => {
   }
 }
 
+// 提取所有组件的组件名
 export const getXComponentData = components => {
   return convertKeysToSelectData(_.map(components, ({ name }) => name))
 }
@@ -130,7 +136,7 @@ export const getComponentPropsData = ({
   return convertKeysToSelectData(remainingKeys)
 }
 
-export const getComponentPropsValue = ({ schema, propsKey }) => {
+export const getComponentProps = ({ schema, propsKey }) => {
   if (propsKey === ComponentPropsTypes.X_RULES) {
     return getComponentXRules(schema)
   } else {
@@ -165,6 +171,27 @@ export const getExpressionValue = value => {
   return value
 }
 
+// 根据用户选择的输入类型，为属性赋初始值
+export const getDefaultValue = inputType => {
+  switch (inputType) {
+    case InputTypes.INPUT: {
+      return ''
+    }
+    case InputTypes.NUMBER_PICKER: {
+      return 0
+    }
+    case InputTypes.CHECKBOX: {
+      return false
+    }
+    case InputTypes.TEXT_AREA: {
+      return null
+    }
+    default:
+      return null
+  }
+}
+
+// 根据属性的值反推输入类型
 export const getInputType = value => {
   if (typeof value === 'object' || isExpression(value)) {
     return InputTypes.TEXT_AREA