@riil-frontend/component-page-creater/es/components/com-list/index.js

page creater components,include components list,component attribute panel and page canvas

import _Collapse from "@alifd/next/es/collapse";
import _Box from "@alifd/next/es/box";
import _Message from "@alifd/next/es/message";
import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import _ from 'lodash';
import PropTypes from 'prop-types';
import RiilIcon from '@riil-frontend/component-riil-icon'; // import { useState } from 'react';

import './index.scss';
import { getComRequire } from '../util';
import { COMLIST_TEMPLATE_TYPE } from '../constant';
import IconTitle from './IconTitle';

function ComList(props) {
  var comList = props.comList,
      onItemDragStart = props.onItemDragStart,
      collapseProps = props.collapseProps,
      customGetComRequire = props.customGetComRequire,
      onItemDragEnd = props.onItemDragEnd; // const [searchKey, setSearchKey] = useState('');

  var configs = comList && comList.map(function (ele, index) {
    var children = [];
    ele.children.forEach(function (item) {
      if (!item.importFrom || item.type === COMLIST_TEMPLATE_TYPE) {
        children.push(item);
      } else {
        var Com = getComRequire(item.type, item.importFrom, customGetComRequire);
        var config = Com ? _.cloneDeep(Com.config) : null;
        config = _extends({}, config, item.config);
        config && children.push(_extends({}, config, item));
      }
    });
    return _extends({}, ele, {
      children: children
    });
  }); // configs = configs.filter((item) => {
  //   if (searchKey === '') {
  //     return item;
  //   }
  //   let name = item.name.toLocaleLowerCase();
  //   return name.includes(searchKey.toLocaleLowerCase());
  // });

  return /*#__PURE__*/React.createElement("div", {
    className: "uicbb-com-list"
  }, /*#__PURE__*/React.createElement(_Collapse, _extends({}, collapseProps, {
    className: "com-list-collapse collapse-no-title-background"
  }), configs.map(function (ele) {
    return /*#__PURE__*/React.createElement(_Collapse.Panel, {
      key: ele.key,
      title: ele.iconInfo ? /*#__PURE__*/React.createElement(IconTitle, {
        title: ele.title,
        iconInfo: ele.iconInfo
      }) : ele.title
    }, ele.message ? /*#__PURE__*/React.createElement(_Message, {
      type: "notice",
      closeable: true,
      style: {
        marginBottom: 16
      }
    }, ele.message) : null, /*#__PURE__*/React.createElement(_Box, {
      direction: "row",
      wrap: true,
      spacing: 12,
      justify: "space-between"
    }, ele.children.map(function (item, index) {
      var _item$attributes;

      return /*#__PURE__*/React.createElement("div", {
        key: 'comlist' + index,
        className: "uicbb-com-list-item",
        draggable: true,
        onDragStart: function onDragStart(e) {
          e.dataTransfer.setData('text/plain', JSON.stringify(item));
          onItemDragStart && onItemDragStart(item, e);
        },
        onDragEnd: function onDragEnd(e) {
          onItemDragEnd && onItemDragEnd();
        },
        onDragOver: function onDragOver(e) {}
      }, /*#__PURE__*/React.createElement(_Box, {
        className: "uicbb-com-list-item-icon",
        align: "center",
        justify: "center"
      }, /*#__PURE__*/React.createElement(RiilIcon, {
        type: item.icon,
        size: "xxl"
      })), /*#__PURE__*/React.createElement("div", {
        style: {
          textAlign: 'center'
        }
      }, item.name || (item === null || item === void 0 ? void 0 : (_item$attributes = item.attributes) === null || _item$attributes === void 0 ? void 0 : _item$attributes.comName) || item.type));
    })));
  })));
}

ComList.propTypes = {
  /**
   * 组件列表数据exp:[{key:'workbench',title:'工作台'，children:[{type: 'component-exp-alarm-list', importFrom: 'npm',icon:'help'}]  }],
   * */
  comList: PropTypes.array,

  /**
   * 当组件图标拖拽开始时回调
   * @type {(config:Object,e:MouseEvent)=>{}} config为拖拽组件的配置数据，e为鼠标event
   */
  onItemDragStart: PropTypes.func,

  /**
   * 透传折叠面板属性
   */
  collapseProps: PropTypes.object,

  /**
   * 自定义组件类引用方法
   */
  customGetComRequire: PropTypes.func
};
ComList.defaultProps = {};
export default ComList;