feat: FieldEditor 中组件、属性、校验规则可以不用枚举

alibaba · Dec 8, 2019 · ede3a27 · ede3a27
1 parent 7208b4f
commit ede3a27
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 50 deletions.
diff --git a/packages/react-schema-editor/src/components/FieldEditor.tsx b/packages/react-schema-editor/src/components/FieldEditor.tsx
@@ -1,6 +1,14 @@
 import React from 'react'
 import _ from 'lodash'
-import { Form, Button, Checkbox, Input, InputNumber, Select } from 'antd'
+import {
+  Form,
+  Button,
+  Checkbox,
+  Input,
+  InputNumber,
+  Select,
+  AutoComplete
+} from 'antd'
 import {
   getFieldTypeData,
   getInputTypeData,
@@ -29,9 +37,9 @@ interface IFieldEditorProps {
   fieldKey: string
   onFieldKeyChange: (fieldKey: string) => void
   schema: any
-  components: any
-  xProps: any
-  xRules: any
+  components?: any
+  xProps?: any
+  xRules?: any
   onChange: (schema: any) => void
 }
 
@@ -211,15 +219,15 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
       onChange({
         ...schema,
         [propsKey]: _.concat(schema[propsKey] || [], {
-          [componentPropsData.defaultValue]: BLANK_PROPERTY_VALUE
+          [BLANK_PROPERTY_VALUE]: BLANK_PROPERTY_VALUE
         })
       })
     } else {
       onChange({
         ...schema,
         [propsKey]: {
           ...schema[propsKey],
-          [componentPropsData.defaultValue]: BLANK_PROPERTY_VALUE
+          [BLANK_PROPERTY_VALUE]: BLANK_PROPERTY_VALUE
         }
       })
     }
@@ -238,20 +246,22 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
               {...formItemLayout}
               className="field-group-form-item"
             >
-              <Select
+              <AutoComplete
                 placeholder="请选择属性"
-                notFoundContent="没有其他选项了"
+                dataSource={_.map(
+                  componentPropsData.options,
+                  ({ value }) => value
+                )}
                 value={property}
+                filterOption={(inputValue, option) =>
+                  (option.props.children as string)
+                    .toUpperCase()
+                    .includes(inputValue.toUpperCase())
+                }
                 onChange={value => {
                   handlePropertyChange(value, property)
                 }}
-              >
-                {_.map(componentPropsData.options, ({ label, value }) => (
-                  <SelectOption value={value} key={value}>
-                    {label}
-                  </SelectOption>
-                ))}
-              </Select>
+              />
             </FormItem>
             <FormItem
               label={index === 0 ? '输入方式' : null}
@@ -374,7 +384,6 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
         type="primary"
         icon="plus"
         size="small"
-        disabled={componentPropsData.options.length < 1}
         onClick={handlePlusClick}
       />
     </div>
@@ -438,22 +447,22 @@ const FieldEditor: React.FC<IFieldEditorProps> = ({
             {...formItemLayout}
             className="field-group-form-item"
           >
-            <Select
+            <AutoComplete
+              dataSource={_.map(xComponentData.options, ({ value }) => value)}
               value={schema[ComponentPropsTypes.X_COMPONENT]}
+              filterOption={(inputValue, option) =>
+                (option.props.children as string)
+                  .toUpperCase()
+                  .includes(inputValue.toUpperCase())
+              }
               onChange={value => {
                 onChange({
                   ...schema,
                   [ComponentPropsTypes.X_COMPONENT]: value,
                   [ComponentPropsTypes.X_COMPONENT_PROPS]: {}
                 })
               }}
-            >
-              {_.map(xComponentData.options, ({ label, value }) => (
-                <SelectOption value={value} key={value}>
-                  {label}
-                </SelectOption>
-              ))}
-            </Select>
+            />
           </FormItem>
           <FormItem
             label="描述"
@@ -506,4 +515,4 @@ const FieldEditor: React.FC<IFieldEditorProps> = ({
   )
 }
 
-export default Form.create()(FieldEditor)
+export default FieldEditor
diff --git a/packages/react-schema-editor/src/components/SchemaTree.tsx b/packages/react-schema-editor/src/components/SchemaTree.tsx
@@ -5,6 +5,52 @@ import * as fp from 'lodash/fp'
 import _ from 'lodash'
 import FieldEditor from './FieldEditor'
 
+const xProps = {
+  colon: {},
+  extra: {},
+  hasFeedback: {},
+  help: {},
+  htmlFor: {},
+  label: {},
+  labelCol: {},
+  labelAlign: {},
+  required: {},
+  validateStatus: {},
+  wrapperCol: {}
+}
+
+const xRules = {
+  enum: {},
+  len: {},
+  max: {},
+  min: {},
+  pattern: {},
+  required: {},
+  transform: {},
+  type: {},
+  validator: {},
+  whitespace: {}
+}
+
+const components = [
+  {
+    name: 'Input',
+    'x-component-props': {
+      value: {},
+      disabled: {},
+      onChange: {}
+    }
+  },
+  {
+    name: 'Switch',
+    'x-component-props': {
+      checked: {},
+      disabled: {},
+      onChange: {}
+    }
+  }
+]
+
 const TreeNode = Tree.TreeNode
 
 export const SchemaTree: React.FC<ISchemaTreeProps> = ({
@@ -94,31 +140,10 @@ export const SchemaTree: React.FC<ISchemaTreeProps> = ({
       <Col span={16}>
         {selectedSchema && (
           <FieldEditor
-            xProps={{
-              help: {},
-              validateStatus: {},
-              hasFeedback: {}
-            }}
-            xRules={{ required: {}, pattern: {}, validator: {} }}
-            components={[
-              {
-                name: 'Input',
-                'x-component-props': {
-                  value: {},
-                  disabled: {},
-                  onChange: {}
-                }
-              },
-              {
-                name: 'Switch',
-                'x-component-props': {
-                  checked: {},
-                  disabled: {},
-                  onChange: {}
-                }
-              }
-            ]}
-            fieldKey={'fieldC'}
+            xProps={xProps}
+            xRules={xRules}
+            components={components}
+            fieldKey="fieldC"
             onFieldKeyChange={value => {
               console.log('onFieldKeyChange====', value)
             }}