feat: 临时交互对焦

alibaba · Nov 15, 2019 · bed060f · bed060f
1 parent 1b184a6
commit bed060f
Show file tree

Hide file tree

Showing 7 changed files with 300 additions and 63 deletions.
diff --git a/packages/react-schema-editor/src/components/FieldEditor.css b/packages/react-schema-editor/src/components/FieldEditor.css
@@ -0,0 +1,10 @@
+.field-group{
+  display: flex;
+  margin-bottom: 5px;
+}
+.field-group .field-input:not(:first-of-type){
+  margin-left: 5px;
+}
+.field-group .op-btn-delete{
+  margin-left: 5px;
+}
diff --git a/packages/react-schema-editor/src/components/FieldEditor.tsx b/packages/react-schema-editor/src/components/FieldEditor.tsx
@@ -1,68 +1,248 @@
-import { Input, Select, Checkbox, Button, Icon } from '@alifd/next'
+import { Input, Select, Button } from '@alifd/next'
 import React from 'react'
+import { IFieldEditorProps } from '../utils/types'
+import './FieldEditor.css'
 
-const typeOptions = [
+const types = [
   { label: '字符串', value: 'string' },
   { label: '布尔值', value: 'boolean' },
   { label: '数字', value: 'number' },
   { label: '数组', value: 'array' },
   { label: '对象', value: 'object' }
 ]
 
-export const FieldEditor: React.FC = ({ children }) => {
+const getComponentNames = components => {
+  return components.map(({ name }) => name)
+}
+
+const getComponentByComponentName = (componentName: string, components) => {
+  return components.find(({ name }) => name === componentName)
+}
+
+const getXPropsByComponentName = (componentName: string, components) => {
+  const component = getComponentByComponentName(componentName, components)
+  if (!component) {
+    return {}
+  }
+  return component['x-props']
+}
+
+const getXComponentPropsByComponentName = (
+  componentName: string,
+  components
+) => {
+  const component = getComponentByComponentName(componentName, components)
+  if (!component) {
+    return []
+  }
+  return component['x-component-props']
+}
+
+export const FieldEditor: React.FC<IFieldEditorProps> = ({
+  schema,
+  components,
+  xRules,
+  onChange
+}) => {
+  const componentName = schema['x-component']
+  const componentNames = getComponentNames(components)
+  const xProps = getXPropsByComponentName(componentName, components)
+  const xComponentProps = getXComponentPropsByComponentName(
+    componentName,
+    components
+  )
+
+  const handleChange = (property, value) => {
+    onChange({
+      ...schema,
+      ...{
+        [property]: value
+      }
+    })
+  }
+
   return (
     <div className="field-editor">
-      <div className="field-operate">
-        <Button className="op-btn op-btn-add" size="small">
-          +
-        </Button>
-        <Button className="op-btn op-btn-delete" size="small">
-          -
-        </Button>
-        <Button className="op-btn op-btn-delete" size="small">
-          <Icon type="set" />
-        </Button>
+      <div>
+        <h3>字段</h3>
+        <div className="field-group">
+          <Input
+            className="field-input"
+            label="label"
+            size="small"
+            value={schema.title}
+            onChange={value => {
+              handleChange('title', value)
+            }}
+          />
+          <Select
+            className="field-input"
+            label="类型"
+            size="small"
+            dataSource={types}
+            value={schema.type}
+            onChange={value => {
+              handleChange('type', value)
+            }}
+          />
+          <Select
+            className="field-input"
+            label="组件"
+            size="small"
+            dataSource={componentNames}
+            style={{ width: 300 }}
+            value={componentName}
+            onChange={value => {
+              handleChange('x-component', value)
+            }}
+          />
+          <Input
+            className="field-input"
+            label="描述"
+            size="small"
+            value={schema.description}
+            onChange={value => {
+              handleChange('description', value)
+            }}
+          />
+        </div>
+      </div>
+
+      <div>
+        <h3>x-props</h3>
+        {Object.keys(schema['x-props']).map(property => (
+          <div className="field-group" key={property}>
+            <Select.AutoComplete
+              className="field-input"
+              label="属性"
+              size="small"
+              dataSource={Object.keys(xProps)}
+              style={{ width: 150 }}
+              value={property}
+            />
+            <Select
+              className="field-input"
+              label="类型"
+              name="x-props-type"
+              size="small"
+              dataSource={types}
+              value={schema['x-props'][property].constructor.name.toLowerCase()}
+            />
+            <Input
+              className="field-input"
+              label="值"
+              name="x-props-value"
+              size="small"
+              value={schema['x-props'][property]}
+            />
+            <Button className="op-btn op-btn-delete" size="small">
+              -
+            </Button>
+          </div>
+        ))}
+
+        <div>
+          <Button
+            className="op-btn op-btn-add"
+            size="small"
+            onClick={() => {
+              handleChange('x-props', {
+                ...schema['x-props'],
+                ...{
+                  '': ''
+                }
+              })
+            }}
+          >
+            +
+          </Button>
+        </div>
       </div>
-      <div className="field-group">
-        <Input
-          className="field-input"
-          label="key"
-          name="key"
-          size="small"
-        ></Input>
-        <Input
-          className="field-input"
-          label="title"
-          name="title"
-          size="small"
-        ></Input>
-        <Select
-          className="field-input"
-          label="type"
-          name="type"
-          size="small"
-          dataSource={typeOptions}
-        ></Select>
-        <Select
-          className="field-input"
-          label="component"
-          name="component"
-          size="small"
-        ></Select>
-        <Input
-          className="field-input"
-          label="desc"
-          name="description"
-          size="small"
-        ></Input>
-        <Checkbox
-          className="field-input"
-          label="必填"
-          name="required"
-        ></Checkbox>
+
+      <div>
+        <h3>x-component-props</h3>
+        {Object.keys(schema['x-component-props']).map(property => (
+          <div className="field-group" key={property}>
+            <Select
+              className="field-input"
+              label="属性"
+              size="small"
+              dataSource={Object.keys(xComponentProps)}
+              style={{ width: 150 }}
+              value={property}
+            />
+            <Select
+              className="field-input"
+              label="类型"
+              size="small"
+              dataSource={types}
+              value={schema['x-component-props'][
+                property
+              ].constructor.name.toLowerCase()}
+            />
+            <Input
+              className="field-input"
+              label="值"
+              size="small"
+              value={schema['x-component-props'][property]}
+            />
+            <Button className="op-btn op-btn-delete" size="small">
+              -
+            </Button>
+          </div>
+        ))}
+
+        <div>
+          <Button
+            className="op-btn op-btn-add"
+            size="small"
+            onClick={() => {
+              handleChange('x-props', {
+                ...schema['x-props'],
+                ...{
+                  '': ''
+                }
+              })
+            }}
+          >
+            +
+          </Button>
+        </div>
+      </div>
+
+      <div>
+        <h3>x-rules</h3>
+        <div className="field-group">
+          <Select
+            className="field-input"
+            label="属性"
+            name="xRules"
+            size="small"
+            dataSource={xRules}
+          />
+          <Select
+            className="field-input"
+            label="类型"
+            name="x-component-props-type"
+            size="small"
+            dataSource={types}
+          />
+          <Input
+            className="field-input"
+            label="值"
+            name="x-component-props-value"
+            size="small"
+          />
+        </div>
+        <div>
+          <Button className="op-btn op-btn-add" size="small">
+            +
+          </Button>
+          <Button className="op-btn op-btn-delete" size="small">
+            -
+          </Button>
+        </div>
       </div>
-      <div className="props-group"></div>
-      <div className="field-children">{children}</div>
     </div>
   )
 }
diff --git a/packages/react-schema-editor/src/components/SchemaTree.tsx b/packages/react-schema-editor/src/components/SchemaTree.tsx
@@ -4,18 +4,23 @@ import { FieldEditor } from './FieldEditor'
 
 export const SchemaTree: React.FC<ISchemaTreeProps> = ({
   schema,
+  components,
   onChange
 }) => {
+  const xRules = ['required', 'pattern', 'validator']
   return (
     <div>
-      <FieldEditor></FieldEditor>
-      <FieldEditor></FieldEditor>
-      <FieldEditor>
-        <FieldEditor>
-          <FieldEditor></FieldEditor>
-        </FieldEditor>
-        <FieldEditor></FieldEditor>
-      </FieldEditor>
+      <FieldEditor
+        schema={schema.name}
+        components={components}
+        xRules={xRules}
+        onChange={currentSchema => {
+          console.log('currentSchema====', currentSchema);
+          onChange({
+            name: currentSchema
+          })
+        }}
+      />
     </div>
   )
 }
diff --git a/packages/react-schema-editor/src/index.tsx b/packages/react-schema-editor/src/index.tsx
@@ -7,10 +7,37 @@ import json from './utils/schema'
 import '@alifd/next/dist/next.css'
 const { Row, Col } = Grid
 
+const components = [
+  {
+    name: 'Input',
+    'x-props': {
+      help: {},
+      validateStatus: {},
+      hasFeedback: {}
+    },
+    'x-component-props': {
+      value: {},
+      disabled: {},
+      onChange: {}
+    }
+  },
+  {
+    name: 'Switch',
+    'x-props': {
+      help: {},
+      validateStatus: {}
+    },
+    'x-component-props': {
+      checked: {},
+      disabled: {},
+      onChange: {}
+    }
+  }
+]
+
 export const SchemaEditor: React.FC = () => {
   const initialSchema = jsonToSchema(json)
   const [schema, setSchema] = React.useState(initialSchema)
-
   return (
     <div className="schema-editor">
       <div className="schema-menus">
@@ -21,7 +48,11 @@ export const SchemaEditor: React.FC = () => {
       </div>
       <Row className="schema-editor-main">
         <Col span={14} className="schema-col schema-tree splitter">
-          <SchemaTree schema={schema} onChange={setSchema}></SchemaTree>
+          <SchemaTree
+            schema={schema}
+            onChange={setSchema}
+            components={components}
+          ></SchemaTree>
         </Col>
         <Col span={10} className="schema-col schema-code">
           <SchemaCode schema={schema} onChange={setSchema}></SchemaCode>