feat(formily-setters): add config to DataSourceSetter (#121)

alibaba · Nov 5, 2021 · 6fdf887 · 6fdf887
1 parent 6583cf9
commit 6fdf887
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 25 deletions.
diff --git a/formily/setters/src/components/DataSourceSetter/DataSettingPanel.tsx b/formily/setters/src/components/DataSourceSetter/DataSettingPanel.tsx
@@ -2,7 +2,7 @@ import React, { useMemo, Fragment } from 'react'
 import { Button } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
 import { ArrayItems, Form, Input, FormItem } from '@formily/antd'
-import { createForm } from '@formily/core'
+import { createForm, Form as FormCore } from '@formily/core'
 import { observer } from '@formily/reactive-react'
 import { createSchemaField } from '@formily/react'
 import { ValueInput } from '@designable/react-settings-form'
@@ -23,10 +23,13 @@ const SchemaField = createSchemaField({
 
 export interface IDataSettingPanelProps {
   treeDataSource: ITreeDataSource
+  allowExtendOption?: boolean
+  effects?: (form: FormCore<any>) => void
 }
 
 export const DataSettingPanel: React.FC<IDataSettingPanelProps> = observer(
   (props) => {
+    const { allowExtendOption, effects } = props
     const prefix = usePrefix('data-source-setter')
     const form = useMemo(() => {
       let values: any
@@ -37,6 +40,7 @@ export const DataSettingPanel: React.FC<IDataSettingPanelProps> = observer(
       })
       return createForm({
         values,
+        effects: effects,
       })
     }, [
       props.treeDataSource.selectedKey,
@@ -63,17 +67,19 @@ export const DataSettingPanel: React.FC<IDataSettingPanelProps> = observer(
             <TextWidget token="SettingComponents.DataSourceSetter.nodeProperty" />
           }
           extra={
-            <Button
-              type="text"
-              onClick={() => {
-                form.setFieldState('map', (state) => {
-                  state.value.push({})
-                })
-              }}
-              icon={<PlusOutlined />}
-            >
-              <TextWidget token="SettingComponents.DataSourceSetter.addKeyValuePair" />
-            </Button>
+            allowExtendOption ? (
+              <Button
+                type="text"
+                onClick={() => {
+                  form.setFieldState('map', (state) => {
+                    state.value.push({})
+                  })
+                }}
+                icon={<PlusOutlined />}
+              >
+                <TextWidget token="SettingComponents.DataSourceSetter.addKeyValuePair" />
+              </Button>
+            ) : null
           }
         />
         <div className={`${prefix + '-layout-item-content'}`}>
@@ -89,6 +95,7 @@ export const DataSettingPanel: React.FC<IDataSettingPanelProps> = observer(
                       <TextWidget token="SettingComponents.DataSourceSetter.label" />
                     }
                     x-decorator="FormItem"
+                    x-disabled={!allowExtendOption}
                     name="label"
                     x-component="Input"
                   />
@@ -102,6 +109,7 @@ export const DataSettingPanel: React.FC<IDataSettingPanelProps> = observer(
                   />
                   <SchemaField.Void
                     x-component="ArrayItems.Remove"
+                    x-visible={allowExtendOption}
                     x-component-props={{
                       style: {
                         margin: 5,

diff --git a/formily/setters/src/components/DataSourceSetter/TreePanel.tsx b/formily/setters/src/components/DataSourceSetter/TreePanel.tsx
@@ -10,8 +10,20 @@ import { ITreeDataSource, INodeItem } from './types'
 import './styles.less'
 import { GlobalRegistry } from '@designable/core'
 
+const limitTreeDrag = ({ dropPosition }) => {
+  if (dropPosition === 0) {
+    return false
+  }
+  return true
+}
+
 export interface ITreePanelProps {
   treeDataSource: ITreeDataSource
+  allowTree: boolean
+  defaultOptionValue: {
+    label: string
+    value: any
+  }[]
 }
 
 export const TreePanel: React.FC<ITreePanelProps> = observer((props) => {
@@ -77,18 +89,19 @@ export const TreePanel: React.FC<ITreePanelProps> = observer((props) => {
             onClick={() => {
               const uuid = uid()
               const dataSource = props.treeDataSource.dataSource
+              const initialKeyValuePairs = props.defaultOptionValue || [
+                {
+                  label: 'label',
+                  value: `${GlobalRegistry.getDesignerMessage(
+                    `SettingComponents.DataSourceSetter.item`
+                  )} ${dataSource.length + 1}`,
+                },
+                { label: 'value', value: uuid },
+              ]
               props.treeDataSource.dataSource = dataSource.concat({
                 key: uuid,
                 duplicateKey: uuid,
-                map: [
-                  {
-                    label: 'label',
-                    value: `${GlobalRegistry.getDesignerMessage(
-                      `SettingComponents.DataSourceSetter.item`
-                    )} ${dataSource.length + 1}`,
-                  },
-                  { label: 'value', value: uuid },
-                ],
+                map: initialKeyValuePairs,
                 children: [],
               })
             }}
@@ -101,7 +114,8 @@ export const TreePanel: React.FC<ITreePanelProps> = observer((props) => {
       <div className={`${prefix + '-layout-item-content'}`}>
         <Tree
           blockNode
-          draggable
+          draggable={true}
+          allowDrop={props.allowTree ? null : limitTreeDrag}
           defaultExpandAll
           defaultExpandParent
           autoExpandParent

diff --git a/formily/setters/src/components/DataSourceSetter/index.tsx b/formily/setters/src/components/DataSourceSetter/index.tsx
@@ -1,6 +1,7 @@
 import React, { Fragment, useMemo, useState } from 'react'
 import cls from 'classnames'
 import { Modal, Button } from 'antd'
+import { Form } from '@formily/core'
 import { observable } from '@formily/reactive'
 import { observer } from '@formily/reactive-react'
 import { usePrefix, useTheme, TextWidget } from '@designable/react'
@@ -9,16 +10,31 @@ import { TreePanel } from './TreePanel'
 import { transformDataToValue, transformValueToData } from './shared'
 import { IDataSourceItem, ITreeDataSource } from './types'
 import './styles.less'
-
 export interface IDataSourceSetterProps {
   className?: string
   style?: React.CSSProperties
   onChange: (dataSource: IDataSourceItem[]) => void
   value: IDataSourceItem[]
+  allowTree?: boolean
+  allowExtendOption?: boolean
+  defaultOptionValue?: {
+    label: string
+    value: any
+  }[]
+  effects?: (form: Form<any>) => void
 }
+
 export const DataSourceSetter: React.FC<IDataSourceSetterProps> = observer(
   (props) => {
-    const { className, value = [], onChange } = props
+    const {
+      className,
+      value = [],
+      onChange,
+      allowTree = true,
+      allowExtendOption = true,
+      defaultOptionValue,
+      effects = () => {},
+    } = props
     const theme = useTheme()
     const prefix = usePrefix('data-source-setter')
     const [modalVisible, setModalVisible] = useState(false)
@@ -58,11 +74,17 @@ export const DataSourceSetter: React.FC<IDataSourceSetterProps> = observer(
             }`}
           >
             <div className={`${prefix + '-layout-item left'}`}>
-              <TreePanel treeDataSource={treeDataSource}></TreePanel>
+              <TreePanel
+                defaultOptionValue={defaultOptionValue}
+                allowTree={allowTree}
+                treeDataSource={treeDataSource}
+              ></TreePanel>
             </div>
             <div className={`${prefix + '-layout-item right'}`}>
               <DataSettingPanel
+                allowExtendOption={allowExtendOption}
                 treeDataSource={treeDataSource}
+                effects={effects}
               ></DataSettingPanel>
             </div>
           </div>