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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));

var _box = _interopRequireDefault(require("@alifd/next/lib/box"));

var _message = _interopRequireDefault(require("@alifd/next/lib/message"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireDefault(require("react"));

var _lodash = _interopRequireDefault(require("lodash"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _componentRiilIcon = _interopRequireDefault(require("@riil-frontend/component-riil-icon"));

require("./index.scss");

var _util = require("../util");

var _constant = require("../constant");

var _IconTitle = _interopRequireDefault(require("./IconTitle"));

// import { useState } from 'react';
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 === _constant.COMLIST_TEMPLATE_TYPE) {
        children.push(item);
      } else {
        var Com = (0, _util.getComRequire)(item.type, item.importFrom, customGetComRequire);
        var config = Com ? _lodash["default"].cloneDeep(Com.config) : null;
        config = (0, _extends2["default"])({}, config, item.config);
        config && children.push((0, _extends2["default"])({}, config, item));
      }
    });
    return (0, _extends2["default"])({}, ele, {
      children: children
    });
  }); // configs = configs.filter((item) => {
  //   if (searchKey === '') {
  //     return item;
  //   }
  //   let name = item.name.toLocaleLowerCase();
  //   return name.includes(searchKey.toLocaleLowerCase());
  // });

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "uicbb-com-list"
  }, /*#__PURE__*/_react["default"].createElement(_collapse["default"], (0, _extends2["default"])({}, collapseProps, {
    className: "com-list-collapse collapse-no-title-background"
  }), configs.map(function (ele) {
    return /*#__PURE__*/_react["default"].createElement(_collapse["default"].Panel, {
      key: ele.key,
      title: ele.iconInfo ? /*#__PURE__*/_react["default"].createElement(_IconTitle["default"], {
        title: ele.title,
        iconInfo: ele.iconInfo
      }) : ele.title
    }, ele.message ? /*#__PURE__*/_react["default"].createElement(_message["default"], {
      type: "notice",
      closeable: true,
      style: {
        marginBottom: 16
      }
    }, ele.message) : null, /*#__PURE__*/_react["default"].createElement(_box["default"], {
      direction: "row",
      wrap: true,
      spacing: 12,
      justify: "space-between"
    }, ele.children.map(function (item, index) {
      var _item$attributes;

      return /*#__PURE__*/_react["default"].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["default"].createElement(_box["default"], {
        className: "uicbb-com-list-item-icon",
        align: "center",
        justify: "center"
      }, /*#__PURE__*/_react["default"].createElement(_componentRiilIcon["default"], {
        type: item.icon,
        size: "xxl"
      })), /*#__PURE__*/_react["default"].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["default"].array,

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

  /**
   * 透传折叠面板属性
   */
  collapseProps: _propTypes["default"].object,

  /**
   * 自定义组件类引用方法
   */
  customGetComRequire: _propTypes["default"].func
};
ComList.defaultProps = {};
var _default = ComList;
exports["default"] = _default;