jjb-lc-designable/react/widgets/ViewToolsWidget/index.js

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

import React from 'react';
import { Button } from 'antd';
import { observer } from 'jjb-lc-formily/reactive-react';
import { IconWidget } from '../IconWidget';
import { usePrefix, useWorkbench } from '../../hooks';
import cls from 'classnames';
export const ViewToolsWidget = observer(({
  use,
  style,
  className
}) => {
  const workbench = useWorkbench();
  const prefix = usePrefix('view-tools');
  return /*#__PURE__*/React.createElement(Button.Group, {
    style: style,
    className: cls(prefix, className)
  }, use.includes('DESIGNABLE') && /*#__PURE__*/React.createElement(Button, {
    disabled: workbench.type === 'DESIGNABLE',
    onClick: () => {
      workbench.type = 'DESIGNABLE';
    },
    size: "small"
  }, /*#__PURE__*/React.createElement(IconWidget, {
    infer: "Design"
  })), use.includes('JSONTREE') && /*#__PURE__*/React.createElement(Button, {
    disabled: workbench.type === 'JSONTREE',
    onClick: () => {
      workbench.type = 'JSONTREE';
    },
    size: "small"
  }, /*#__PURE__*/React.createElement(IconWidget, {
    infer: "JSON"
  })), use.includes('MARKUP') && /*#__PURE__*/React.createElement(Button, {
    disabled: workbench.type === 'MARKUP',
    onClick: () => {
      workbench.type = 'MARKUP';
    },
    size: "small"
  }, /*#__PURE__*/React.createElement(IconWidget, {
    infer: "Code"
  })), use.includes('PREVIEW') && /*#__PURE__*/React.createElement(Button, {
    disabled: workbench.type === 'PREVIEW',
    onClick: () => {
      workbench.type = 'PREVIEW';
    },
    size: "small"
  }, /*#__PURE__*/React.createElement(IconWidget, {
    infer: "Play"
  })));
});
ViewToolsWidget.defaultProps = {
  use: ['DESIGNABLE', 'JSONTREE', 'PREVIEW']
};