jjb-lc-designable/react-settings-form/components/DrawerSetter/index.js

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

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { Fragment, useState, useLayoutEffect } from 'react';
import { createPortal } from 'react-dom';
import { observer, useField } from 'jjb-lc-formily/react';
import { FormLayout } from 'jjb-lc-formily/antd';
import { IconWidget, usePrefix, useTreeNode } from 'jjb-lc-designable/react';
import { Button } from 'antd';
import cls from 'classnames';
import './styles.less';
export const DrawerSetter = observer(props => {
  const node = useTreeNode();
  const field = useField();
  const [visible, setVisible] = useState(false);
  const [remove, setRemove] = useState(false);
  const [root, setRoot] = useState();
  const prefix = usePrefix('drawer-setter');
  const formWrapperCls = usePrefix('settings-form-wrapper');
  useLayoutEffect(() => {
    const wrapper = document.querySelector('.' + formWrapperCls);
    if (wrapper) {
      setRoot(wrapper);
    }
  }, [node]);
  const renderDrawer = () => {
    if (root && visible) {
      return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
        className: cls(prefix, 'animate__animated animate__slideInRight', {
          animate__slideOutRight: remove
        })
      }, /*#__PURE__*/React.createElement("div", {
        className: prefix + '-header',
        onClick: handleClose
      }, /*#__PURE__*/React.createElement(IconWidget, {
        infer: "Return",
        size: 18
      }), /*#__PURE__*/React.createElement("span", {
        className: prefix + '-header-text'
      }, props.text || field.title)), /*#__PURE__*/React.createElement("div", {
        className: prefix + '-body'
      }, /*#__PURE__*/React.createElement(FormLayout, {
        colon: false,
        labelWidth: 120,
        labelAlign: "left",
        wrapperAlign: "right",
        feedbackLayout: "none",
        tooltipLayout: "text"
      }, props.children))), root);
    }
    return null;
  };
  const handleOpen = () => {
    setVisible(true);
  };
  const handleClose = () => {
    setRemove(true);
    setTimeout(() => {
      setVisible(false);
      setRemove(false);
    }, 150);
  };
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({
    block: true,
    onClick: handleOpen
  }, props.triggerProps), props.text || field.title), renderDrawer());
});