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

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

import React, { useState } from 'react';
import { isResourceHost, isResourceList } from 'jjb-lc-designable/core';
import { isFn } from 'jjb-lc-designable/shared';
import { observer } from 'jjb-lc-formily/reactive-react';
import { usePrefix } from '../../hooks';
import { IconWidget } from '../IconWidget';
import { TextWidget } from '../TextWidget';
import cls from 'classnames';
import './styles.less';
export const ResourceWidget = observer(props => {
  const prefix = usePrefix('resource');
  const [expand, setExpand] = useState(props.defaultExpand);
  const renderNode = source => {
    const {
      node,
      icon,
      title,
      thumb,
      span
    } = source;
    return /*#__PURE__*/React.createElement("div", {
      className: prefix + '-item',
      style: {
        gridColumnStart: `span ${span || 1}`
      },
      key: node.id,
      "data-designer-source-id": node.id
    }, thumb && /*#__PURE__*/React.createElement("img", {
      className: prefix + '-item-thumb',
      src: thumb
    }), icon && /*#__PURE__*/React.isValidElement(icon) ? /*#__PURE__*/React.createElement(React.Fragment, null, icon) : /*#__PURE__*/React.createElement(IconWidget, {
      className: prefix + '-item-icon',
      infer: icon,
      style: {
        width: 150,
        height: 40
      }
    }), /*#__PURE__*/React.createElement("span", {
      className: prefix + '-item-text'
    }, /*#__PURE__*/React.createElement(TextWidget, null, title || node.children[0]?.getMessage('title'))));
  };
  const sources = props.sources.reduce((buf, source) => {
    if (isResourceList(source)) {
      return buf.concat(source);
    } else if (isResourceHost(source)) {
      return buf.concat(source.Resource);
    }
    return buf;
  }, []);
  const remainItems = sources.reduce((length, source) => {
    return length + (source.span ?? 1);
  }, 0) % 3;
  return /*#__PURE__*/React.createElement("div", {
    className: cls(prefix, props.className, {
      expand
    })
  }, /*#__PURE__*/React.createElement("div", {
    className: prefix + '-header',
    onClick: e => {
      e.stopPropagation();
      e.preventDefault();
      setExpand(!expand);
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: prefix + '-header-expand'
  }, /*#__PURE__*/React.createElement(IconWidget, {
    infer: "Expand",
    size: 10
  })), /*#__PURE__*/React.createElement("div", {
    className: prefix + '-header-content'
  }, /*#__PURE__*/React.createElement(TextWidget, null, props.title))), /*#__PURE__*/React.createElement("div", {
    className: prefix + '-content-wrapper'
  }, /*#__PURE__*/React.createElement("div", {
    className: prefix + '-content'
  }, sources.map(isFn(props.children) ? props.children : renderNode), remainItems ? /*#__PURE__*/React.createElement("div", {
    className: prefix + '-item-remain',
    style: {
      gridColumnStart: `span ${3 - remainItems}`
    }
  }) : null)));
});
ResourceWidget.defaultProps = {
  defaultExpand: true
};