jjb-lc-designable/formily-setters/components/DataSourceSetter/index.js

基于alibaba-designable源码二次封装的表单设计器。

import React, { Fragment, useMemo, useState } from 'react';
import cls from 'classnames';
import { Modal, Button } from 'antd';
import { observable } from 'jjb-lc-formily/reactive';
import { observer } from 'jjb-lc-formily/reactive-react';
import { usePrefix, useTheme, TextWidget } from 'jjb-lc-designable/react';
import { DataSettingPanel } from './DataSettingPanel';
import { TreePanel } from './TreePanel';
import { transformDataToValue, transformValueToData } from './shared';
import './styles.less';
export const DataSourceSetter = observer(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);
  const treeDataSource = useMemo(() => observable({
    dataSource: transformValueToData(value),
    selectedKey: ''
  }), [value, modalVisible]);
  const openModal = () => setModalVisible(true);
  const closeModal = () => setModalVisible(false);
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
    block: true,
    onClick: openModal
  }, /*#__PURE__*/React.createElement(TextWidget, {
    token: "SettingComponents.DataSourceSetter.configureDataSource"
  })), /*#__PURE__*/React.createElement(Modal, {
    title: /*#__PURE__*/React.createElement(TextWidget, {
      token: "SettingComponents.DataSourceSetter.configureDataSource"
    }),
    width: "65%",
    bodyStyle: {
      padding: 10
    },
    transitionName: "",
    maskTransitionName: "",
    visible: modalVisible,
    onCancel: closeModal,
    onOk: () => {
      onChange(transformDataToValue(treeDataSource.dataSource));
      closeModal();
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: `${cls(prefix, className)} ${prefix + '-' + theme} ${prefix + '-layout'}`
  }, /*#__PURE__*/React.createElement("div", {
    className: `${prefix + '-layout-item left'}`
  }, /*#__PURE__*/React.createElement(TreePanel, {
    defaultOptionValue: defaultOptionValue,
    allowTree: allowTree,
    treeDataSource: treeDataSource
  })), /*#__PURE__*/React.createElement("div", {
    className: `${prefix + '-layout-item right'}`
  }, /*#__PURE__*/React.createElement(DataSettingPanel, {
    allowExtendOption: allowExtendOption,
    treeDataSource: treeDataSource,
    effects: effects
  })))));
});