From 73c90914c4b9257a0961d7fc5620bffe27de9a69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A7=8B=E9=80=A2?= <yuxi.byx@alibaba-inc.com>
Date: Thu, 28 Nov 2019 16:09:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A8=E8=BE=BE=E5=BC=8Fvalue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/FieldEditor.tsx            | 37 ++++++++++++++-----
 packages/react-schema-editor/src/index.tsx    |  1 +
 .../src/utils/fieldEditorHelpers.ts           |  6 +++
 .../react-schema-editor/src/utils/schema.ts   |  3 +-
 4 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/packages/react-schema-editor/src/components/FieldEditor.tsx b/packages/react-schema-editor/src/components/FieldEditor.tsx
index f877491bc90..89b336f7d7d 100644
--- 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
index b770cc91989..6dc36491ca5 100644
--- 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
index e7d81a3b6ed..bd1a1570c3a 100644
--- 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
index 7b978992eed..d3edfa4b872 100644
--- 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: '正则'
       },