jjb-lc-designable/react/panels/SettingsPanel.js

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

import React, { useEffect, useState } from 'react';
import { requestIdle } from 'jjb-lc-designable/shared';
import { observer } from 'jjb-lc-formily/reactive-react';
import { TextWidget, IconWidget } from '../widgets';
import { usePrefix, useWorkbench } from '../hooks';
import cls from 'classnames';
export const SettingsPanel = observer(props => {
  const prefix = usePrefix('settings-panel');
  const workbench = useWorkbench();
  const [innerVisible, setInnerVisible] = useState(true);
  const [pinning, setPinning] = useState(false);
  const [visible, setVisible] = useState(true);
  useEffect(() => {
    if (visible || workbench.type === 'DESIGNABLE') {
      if (!innerVisible) {
        requestIdle(() => {
          requestAnimationFrame(() => {
            setInnerVisible(true);
          });
        });
      }
    }
  }, [visible, workbench.type]);
  if (workbench.type !== 'DESIGNABLE') {
    if (innerVisible) setInnerVisible(false);
    return null;
  }
  if (!visible) {
    if (innerVisible) setInnerVisible(false);
    return /*#__PURE__*/React.createElement("div", {
      className: prefix + '-opener',
      onClick: () => {
        setVisible(true);
      }
    }, /*#__PURE__*/React.createElement(IconWidget, {
      infer: "Setting",
      size: 20
    }));
  }
  return /*#__PURE__*/React.createElement("div", {
    className: cls(prefix, {
      pinning
    })
  }, /*#__PURE__*/React.createElement("div", {
    className: prefix + '-header'
  }, /*#__PURE__*/React.createElement("div", {
    className: prefix + '-header-title'
  }, /*#__PURE__*/React.createElement(TextWidget, null, props.title)), /*#__PURE__*/React.createElement("div", {
    className: prefix + '-header-actions'
  }, /*#__PURE__*/React.createElement("div", {
    className: prefix + '-header-extra'
  }, props.extra), !pinning && /*#__PURE__*/React.createElement(IconWidget, {
    infer: "PushPinOutlined",
    className: prefix + '-header-pin',
    onClick: () => {
      setPinning(!pinning);
    }
  }), pinning && /*#__PURE__*/React.createElement(IconWidget, {
    infer: "PushPinFilled",
    className: prefix + '-pin-filled',
    onClick: () => {
      setPinning(!pinning);
    }
  }), /*#__PURE__*/React.createElement(IconWidget, {
    infer: "Close",
    className: prefix + '-header-close',
    onClick: () => {
      setVisible(false);
    }
  }))), /*#__PURE__*/React.createElement("div", {
    className: prefix + '-body'
  }, innerVisible && props.children));
});