jjb-lc-designable
Version:
基于alibaba-designable源码二次封装的表单设计器。
105 lines • 3.8 kB
JavaScript
import React, { useMemo, Fragment } from 'react';
import { Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { ArrayItems, Form, Input, FormItem } from 'jjb-lc-formily/antd';
import { createForm } from 'jjb-lc-formily/core';
import { observer } from 'jjb-lc-formily/reactive-react';
import { createSchemaField } from 'jjb-lc-formily/react';
import { ValueInput } from 'jjb-lc-designable/react-settings-form';
import { usePrefix, TextWidget } from 'jjb-lc-designable/react';
import { Header } from './Header';
import { traverseTree } from './shared';
import './styles.less';
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
ArrayItems,
ValueInput
}
});
export const DataSettingPanel = observer(props => {
const {
allowExtendOption,
effects
} = props;
const prefix = usePrefix('data-source-setter');
const form = useMemo(() => {
let values;
traverseTree(props.treeDataSource.dataSource, dataItem => {
if (dataItem.key === props.treeDataSource.selectedKey) {
values = dataItem;
}
});
return createForm({
values,
effects: effects
});
}, [props.treeDataSource.selectedKey, props.treeDataSource.dataSource.length]);
if (!props.treeDataSource.selectedKey) return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
title: /*#__PURE__*/React.createElement(TextWidget, {
token: "SettingComponents.DataSourceSetter.nodeProperty"
}),
extra: null
}), /*#__PURE__*/React.createElement("div", {
className: `${prefix + '-layout-item-content'}`
}, /*#__PURE__*/React.createElement(TextWidget, {
token: "SettingComponents.DataSourceSetter.pleaseSelectNode"
})));
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
title: /*#__PURE__*/React.createElement(TextWidget, {
token: "SettingComponents.DataSourceSetter.nodeProperty"
}),
extra: allowExtendOption ? /*#__PURE__*/React.createElement(Button, {
type: "text",
onClick: () => {
form.setFieldState('map', state => {
state.value.push({});
});
},
icon: /*#__PURE__*/React.createElement(PlusOutlined, null)
}, /*#__PURE__*/React.createElement(TextWidget, {
token: "SettingComponents.DataSourceSetter.addKeyValuePair"
})) : null
}), /*#__PURE__*/React.createElement("div", {
className: `${prefix + '-layout-item-content'}`
}, /*#__PURE__*/React.createElement(Form, {
form: form,
labelWidth: 60,
wrapperWidth: 160
}, /*#__PURE__*/React.createElement(SchemaField, null, /*#__PURE__*/React.createElement(SchemaField.Array, {
name: "map",
"x-component": "ArrayItems"
}, /*#__PURE__*/React.createElement(SchemaField.Object, {
"x-decorator": "ArrayItems.Item",
"x-decorator-props": {
type: 'divide'
}
}, /*#__PURE__*/React.createElement(SchemaField.String, {
title: /*#__PURE__*/React.createElement(TextWidget, {
token: "SettingComponents.DataSourceSetter.label"
}),
"x-decorator": "FormItem",
"x-disabled": !allowExtendOption,
name: "label",
"x-component": "Input"
}), /*#__PURE__*/React.createElement(SchemaField.String, {
title: /*#__PURE__*/React.createElement(TextWidget, {
token: "SettingComponents.DataSourceSetter.value"
}),
"x-decorator": "FormItem",
name: "value",
"x-component": "ValueInput"
}), /*#__PURE__*/React.createElement(SchemaField.Void, {
"x-component": "ArrayItems.Remove",
"x-visible": allowExtendOption,
"x-component-props": {
style: {
margin: 5,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}
}
})))))));
});