feat: 表达式value

alibaba · Nov 28, 2019 · 73c9091 · 73c9091
1 parent e9f2c04
commit 73c9091
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 10 deletions.
diff --git a/packages/react-schema-editor/src/components/FieldEditor.tsx b/packages/react-schema-editor/src/components/FieldEditor.tsx
@@ -9,6 +9,7 @@ import {
   getComponentPropsValue,
   getInputType,
   getPropertyValue,
+  getExpressionValue,
   getRuleMessage
 } from '../utils/fieldEditorHelpers'
 import { InputTypes, ComponentPropsTypes } from '../utils/types'
@@ -60,7 +61,7 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
   const componentPropsValue = getComponentPropsValue({ schema, propsKey })
 
   const handleXComponentPropsValueChange = (value, property) => {
-    const newSchema = { ...schema }
+    let newSchema
     if (propsKey === ComponentPropsTypes.X_RULES) {
       const newRules = _.map(schema[propsKey], rule => {
         if (_.has(rule, property)) {
@@ -71,15 +72,24 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
         }
         return rule
       })
-      _.set(newSchema, `${propsKey}`, newRules)
+      newSchema = {
+        ...schema,
+        [propsKey]: newRules
+      }
     } else {
-      _.set(newSchema, `${propsKey}.${property}`, value)
+      newSchema = {
+        ...schema,
+        [propsKey]: {
+          ...schema[propsKey],
+          [property]: value
+        }
+      }
     }
     onChange(newSchema)
   }
 
   const handleInputTypeChange = (value, property) => {
-    const newSchema = { ...schema }
+    let newSchema
     let defaultValue
     switch (value) {
       case InputTypes.INPUT: {
@@ -109,9 +119,18 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
         }
         return rule
       })
-      _.set(newSchema, `${propsKey}`, newRules)
+      newSchema = {
+        ...schema,
+        [propsKey]: newRules
+      }
     } else {
-      _.set(newSchema, `${propsKey}.${property}`, defaultValue)
+      newSchema = {
+        ...schema,
+        [propsKey]: {
+          ...schema[propsKey],
+          [property]: defaultValue
+        }
+      }
     }
     onChange(newSchema)
   }
@@ -305,9 +324,9 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
                 className="field-group-form-item"
               >
                 <Input.TextArea
-                  placeholder="{{}}/{}/[]"
-                  // TODO, 这里暂时用 defaultValue
-                  defaultValue={value}
+                  key={getExpressionValue(value)}
+                  placeholder="格式：{{}}/{}/[]，失去焦点生效"
+                  defaultValue={getExpressionValue(value)}
                   onBlur={event => {
                     let value = event.target.value
                     try {

diff --git a/packages/react-schema-editor/src/index.tsx b/packages/react-schema-editor/src/index.tsx
@@ -28,6 +28,7 @@ const components = [
 export const SchemaEditor: React.FC = () => {
   const initialSchema = jsonToSchema(json)
   const [schema, setSchema] = React.useState(initialSchema)
+
   return (
     <div className="schema-editor">
       <div className="schema-menus">

diff --git a/packages/react-schema-editor/src/utils/fieldEditorHelpers.ts b/packages/react-schema-editor/src/utils/fieldEditorHelpers.ts
@@ -129,6 +129,12 @@ const isExpression = value => {
   return /^{{(.*)}}$/.test(value)
 }
 
+export const getExpressionValue = value => {
+  if (_.isObject(value)) {
+    return JSON.stringify(value)
+  }
+  return value
+}
 export const getInputType = value => {
   if (typeof value === 'object' || isExpression(value)) {
     return InputTypes.TEXT_AREA

diff --git a/packages/react-schema-editor/src/utils/schema.ts b/packages/react-schema-editor/src/utils/schema.ts
@@ -7,6 +7,8 @@ export default {
     'x-props': {
       help: '不得超过6个汉字',
       validateStatus: 'success',
+      labelCol: [{ col: 2 }],
+      extra: null
     },
     'x-component': 'Input',
     'x-component-props': {
@@ -19,7 +21,6 @@ export default {
         message: '此项必填'
       },
       {
-        //TODO
         pattern: '[\\u4e00-\\u9fa5]',
         message: '正则'
       },