@riil-frontend/component-page-creater/es/components/uicbb-container/index.js

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

import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Box from "@alifd/next/es/box";
import _Dialog from "@alifd/next/es/dialog";
import _extends from "@babel/runtime/helpers/extends";
import _Grid from "@alifd/next/es/grid";
import React, { Component } from 'react';
import { isAvailableArray } from '@riil-frontend/utils';
import { ReactSortable } from 'react-sortablejs';
import { getUUID } from '@riil-frontend/utils';
import ColEdit from './ColEdit';
import _ from 'lodash';
import './index.scss';
import { CONTAINER_COM_TYPE } from './constant';
import IconTitle from './IconTitle';
var Row = _Grid.Row,
    Col = _Grid.Col;

var Template = function Template(props) {
  var config = props.config,
      customGetComRequire = props.customGetComRequire,
      getComRequire = props.getComRequire,
      isEdit = props.isEdit,
      selectedId = props.selectedId,
      getBaseAttributes = props.getBaseAttributes,
      onSelect = props.onSelect,
      setPageState = props.setPageState,
      removePageState = props.removePageState,
      widgetsProps = props.widgetsProps,
      setWidgetsState = props.setWidgetsState,
      pageProps = props.pageProps,
      request = props.request,
      jumpto = props.jumpto,
      onConfigChange = props.onConfigChange,
      toggleFullScreen = props.toggleFullScreen,
      getFullScreenState = props.getFullScreenState,
      allWidgets = props.allWidgets,
      onAllWidgetsChangeByCom = props.onAllWidgetsChangeByCom,
      dragPanelIsDroppable = props.dragPanelIsDroppable,
      hideComList = props.hideComList;
  var attributes = config.attributes;

  var onSortChange = function onSortChange(widgets, item, index) {
    var newItem = _extends({}, item, {
      widgets: widgets
    });

    var newCols = attributes.cols.map(function (ele, idx) {
      if (idx === index) {
        return newItem;
      } else {
        return ele;
      }
    });
    onConfigChange(_extends({}, config, {
      attributes: _extends({}, config.attributes, {
        cols: newCols
      })
    }));
  }; //删除组件


  var _onRemoveItem = function onRemoveItem(item) {
    _Dialog.confirm({
      title: '删除',
      content: '是否删除所选组件？',
      messageProps: {
        type: 'warning'
      },
      onOk: function onOk() {
        var newCols = attributes.cols.map(function (ele) {
          var newWidgets = ele.widgets.filter(function (fd) {
            return fd.id !== item.id;
          });
          return _extends({}, ele, {
            widgets: newWidgets
          });
        });
        onConfigChange(_extends({}, config, {
          attributes: _extends({}, config.attributes, {
            cols: newCols
          })
        }));
      }
    });
  };

  var onChildConfigChange = function onChildConfigChange(comWidget, callback, isUpdateService) {
    if (isUpdateService === void 0) {
      isUpdateService = true;
    }

    var newCols = attributes.cols.map(function (ele) {
      var newWidgets = ele.widgets.map(function (fd) {
        if (fd.id === comWidget.id) {
          return comWidget;
        } else {
          return fd;
        }
      });
      return _extends({}, ele, {
        widgets: newWidgets
      });
    });
    onConfigChange(_extends({}, config, {
      attributes: _extends({}, config.attributes, {
        cols: newCols
      })
    }), callback, isUpdateService);
  };

  var generateDOM = function generateDOM(widgets, direction) {
    if (isAvailableArray(widgets)) {
      return widgets.filter(function (ele) {
        return !hideComList.includes(ele.type);
      }).map(function (item, i) {
        var Com = getComRequire(item.type, item.importFrom, customGetComRequire);
        var layouts = item.layouts;

        if (layouts.y === null) {
          layouts.y = 0;
        }

        var editClassName = isEdit ? ' edit' : '';
        var selectClassName = selectedId === item.id && isEdit ? ' selected' : '';

        var _style = item.comContainerAttributes ? item.comContainerAttributes : getBaseAttributes();

        var paddingLeft = _style.paddingLeft,
            paddingRight = _style.paddingRight,
            paddingTop = _style.paddingTop,
            paddingBottom = _style.paddingBottom;
        return /*#__PURE__*/React.createElement("div", {
          onClick: function onClick(e) {
            e.stopPropagation(); // isEdit && onSelect && onSelect(item.id);
          },
          onMouseDown: function onMouseDown(e) {
            e.stopPropagation();
            isEdit && onSelect && onSelect(item.id);
          },
          className: 'drag-item-custom' + editClassName + selectClassName,
          key: item.id,
          style: {
            width: direction === 'row' ? 0 : "calc(100% - " + (paddingLeft + paddingRight) + "px)",
            position: 'relative',
            marginTop: paddingTop,
            marginLeft: paddingLeft,
            marginRight: paddingRight,
            marginBottom: paddingBottom,
            flex: 1,
            height: direction === 'row' ? "calc(100% - " + (paddingBottom + paddingTop) + "px)" : 0
          },
          id: item.id,
          draggable: isEdit,
          onDragStart: function onDragStart(e) {
            if (!isEdit) {
              return;
            }

            e.dataTransfer.setData('text/plain', JSON.stringify(item));
          }
        }, /*#__PURE__*/React.createElement(DragItem, {
          config: item,
          setPageState: setPageState,
          removePageState: removePageState,
          pageProps: pageProps,
          isEdit: isEdit,
          onRemoveItem: function onRemoveItem() {
            _onRemoveItem(item);
          },
          render: /*#__PURE__*/React.createElement(Com, {
            isEdit: isEdit,
            config: item,
            pageProps: pageProps,
            widgetsProps: widgetsProps,
            setPageState: setPageState,
            setWidgetsState: setWidgetsState,
            request: request,
            jumpto: jumpto,
            onConfigChange: onChildConfigChange,
            toggleFullScreen: toggleFullScreen,
            getFullScreenState: getFullScreenState,
            getBaseAttributes: getBaseAttributes,
            getComRequire: getComRequire,
            customGetComRequire: customGetComRequire
          })
        }));
      });
    } else {
      return null;
    }
  };

  var findItemById = function findItemById(id, index) {
    var dragFrom;
    var dragTo = index;
    var isPass = true;
    var newConfig;
    var dragItem;
    config.attributes.cols.forEach(function (item, idx) {
      item.widgets.forEach(function (ele) {
        if (ele.id === id) {
          isPass = false;
          dragFrom = idx;
          dragItem = ele;
        }
      });
    });

    if (dragFrom === dragTo || dragFrom === undefined) {
      newConfig = null;
    } else {
      newConfig = _.cloneDeep(config);
      newConfig.attributes.cols.forEach(function (item, idx) {
        if (idx === dragFrom) {
          item.widgets = item.widgets.filter(function (ele) {
            return ele.id != id;
          });
        } else if (idx === dragTo) {
          item.widgets.push(dragItem);
        }
      });
    }

    if (newConfig) {
      onConfigChange(newConfig);
    }

    return isPass;
  };
  /**
   * 查找拖拽的业务组件，是否存在于其他的容器内
   * @param {string} id
   * @returns {null|{ widgetsIndex: number, colsIndex: number, childrenWidgetsIndex: number }} -若查无数据，返回null，若查找到，返回对应索引
   */


  var findItemInOtherTemplate = function findItemInOtherTemplate(id) {
    var result = null;
    allWidgets.forEach(function (item, index) {
      if (item.type === CONTAINER_COM_TYPE) {
        item.attributes.cols.forEach(function (ele, eleIndex) {
          ele.widgets.forEach(function (fd, fdIndex) {
            if (fd.id === id) {
              result = {
                widgetsIndex: index,
                colsIndex: eleIndex,
                childrenWidgetsIndex: fdIndex
              };
            }
          });
        });
      }
    });
    return result;
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "uicbb-container-wrap"
  }, /*#__PURE__*/React.createElement(Row, {
    className: "template-row",
    wrap: true
  }, attributes.cols.map(function (item, index) {
    var span = item.span,
        widgets = item.widgets,
        direction = item.direction;
    return /*#__PURE__*/React.createElement(Col, {
      className: "template-col " + (isEdit ? '' : 'view') + " " + (selectedId === config.id && isEdit ? 'content-selected ' : ''),
      span: span,
      key: 'cols' + index
    }, /*#__PURE__*/React.createElement("div", {
      className: "template-col-content",
      onDragOver: function onDragOver(e) {
        if (!isEdit) {
          return;
        }

        if (!dragPanelIsDroppable) {
          e.preventDefault();
          e.stopPropagation();
        }
      },
      onDrop: function onDrop(e) {
        var _config = JSON.parse(e.dataTransfer.getData('text/plain'));

        var hasCom = findItemById(_config.id, index); // 查找本容器内是否包含拖拽业务组件，若存在，则不执行drop

        if (!hasCom || _config.type === CONTAINER_COM_TYPE || _config.type === 'layout' || !isEdit) {
          return;
        } // 查找拖拽业务组件是否来自本页面其他容器，若是，则进行移动组件操作


        var hasComInOtherTemplate = findItemInOtherTemplate(_config.id);

        if (hasComInOtherTemplate) {
          var newAllWidgets = _.cloneDeep(allWidgets);

          newAllWidgets.forEach(function (item1, widgetsIndex) {
            if (widgetsIndex === hasComInOtherTemplate.widgetsIndex) {
              item1.attributes.cols.forEach(function (item2, eleIndex) {
                if (eleIndex === hasComInOtherTemplate.colsIndex) {
                  item2.widgets.splice(hasComInOtherTemplate.childrenWidgetsIndex, 1);
                }
              });
            } else if (item1.id === config.id) {
              item1.attributes.cols[index].widgets.push(_config);
            }
          });
          onAllWidgetsChangeByCom(newAllWidgets);
          return;
        } //从工具栏拖拽进入本容器，创建新的业务组件


        var id = getUUID();
        _config.id = id;
        var newWidgets = [].concat(widgets, [_config]);

        var newItem = _extends({}, item, {
          widgets: newWidgets
        });

        var newCols = attributes.cols.map(function (ele, idx) {
          if (idx === index) {
            return newItem;
          } else {
            return ele;
          }
        });
        onConfigChange(_extends({}, config, {
          attributes: _extends({}, config.attributes, {
            cols: newCols
          })
        }));
        onSelect(id);
      }
    }, isEdit ? /*#__PURE__*/React.createElement(ReactSortable, {
      list: widgets,
      setList: function setList(wd) {
        onSortChange(wd, item, index);
      },
      style: {
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: direction
      }
    }, isAvailableArray(widgets) ? generateDOM(widgets, direction) : null) : /*#__PURE__*/React.createElement("div", {
      style: {
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: direction
      }
    }, isAvailableArray(widgets) ? generateDOM(widgets, direction) : null), widgets.length === 0 && isEdit ? /*#__PURE__*/React.createElement(_Box, {
      align: "center",
      justify: "center",
      className: "drag-background-info"
    }, "\u5C06\u7EC4\u4EF6\u62D6\u81F3\u6B64\u533A\u57DF") : null));
  })));
};

var DragItem = /*#__PURE__*/function (_Component) {
  _inheritsLoose(DragItem, _Component);

  function DragItem(props) {
    var _this;

    _this = _Component.call(this, props) || this;
    var config = props.config,
        setPageState = props.setPageState;

    if (config && config.publishProps) {
      config.publishProps.forEach(function (item) {
        var _setPageState;

        setPageState((_setPageState = {}, _setPageState[item.key] = item.defaultValue, _setPageState));
      });
    }

    return _this;
  }

  var _proto = DragItem.prototype;

  _proto.componentWillUnmount = function componentWillUnmount() {
    var _this$props = this.props,
        config = _this$props.config,
        removePageState = _this$props.removePageState;

    if (config && config.publishProps) {
      removePageState(config.publishProps.map(function (item) {
        return item.key;
      }));
    }
  };

  _proto.render = function render() {
    var _this$props2 = this.props,
        children = _this$props2.children,
        config = _this$props2.config,
        pageProps = _this$props2.pageProps,
        isEdit = _this$props2.isEdit,
        onRemoveItem = _this$props2.onRemoveItem,
        render = _this$props2.render;
    var lackInfoElements = [];
    var removeElement = isEdit ? /*#__PURE__*/React.createElement(_Button, {
      className: "content-remove",
      onMouseDown: function onMouseDown(e) {
        e.stopPropagation();
      },
      onClick: function onClick(e) {
        e.stopPropagation();
        onRemoveItem();
      },
      title: "\u5220\u9664\u7EC4\u4EF6",
      style: {
        background: '#666666',
        color: 'white'
      },
      text: true
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: "ashbin"
    })) : null; //只有在浏览模式下（!isEdit），缺少等级属性，才会显示为lackInfoElements

    if (!isEdit && config && config.dependentProps) {
      config.dependentProps.forEach(function (item) {
        if (!(item.key in pageProps)) {
          lackInfoElements.push( /*#__PURE__*/React.createElement("div", {
            key: item.key
          }, item.info));
        }
      });
    }

    return /*#__PURE__*/React.createElement(React.Fragment, null, lackInfoElements.length > 0 ? /*#__PURE__*/React.createElement("div", {
      style: {
        width: '100%',
        height: '100%',
        border: '1px solid #e9e9e9',
        background: 'white'
      }
    }, lackInfoElements) : render, isEdit && config.type !== CONTAINER_COM_TYPE ? /*#__PURE__*/React.createElement("div", {
      className: "edit-item-mask"
    }) : null, removeElement, children);
  };

  return DragItem;
}(Component);

Template.config = {
  layouts: {
    x: 0,
    y: 0,
    w: 24,
    h: 8,
    i: 'uuid',
    "static": false
  },
  id: 'uuid',
  title: '这是逻辑面板组件，拖拽添加到画布',
  icon: '',
  type: 'uicbb-container',
  importFrom: 'local',
  isOnlyOne: false,
  comContainerAttributes: {
    paddingLeft: 0,
    paddingTop: 0,
    paddingRight: 0,
    paddingBottom: 0
  },
  attributes: {
    comName: '布局模板',
    cols: [{
      span: 12,
      direction: 'row',
      widgets: []
    }, {
      span: 12,
      direction: 'column',
      widgets: []
    }]
  }
};

Template.getSchema = /*#__PURE__*/function () {
  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
    var pageProps, config, request;
    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            pageProps = _ref.pageProps, config = _ref.config, request = _ref.request;
            return _context.abrupt("return", {
              type: 'object',
              defaultValue: {
                cols: [{
                  span: 6,
                  widgets: []
                }, {
                  span: 18,
                  widgets: []
                }]
              },
              properties: {
                Collapse: {
                  type: 'object',
                  'x-component': 'FormCollapse',
                  'x-component-props': {
                    defaultExpandedKeys: ['panel1', 'panel2']
                  },
                  'x-props': {
                    style: {
                      paddingTop: 12
                    }
                  },
                  properties: {
                    panel1: {
                      type: 'object',
                      'x-component': 'FormCollapsePanel',
                      'x-component-props': {
                        title: /*#__PURE__*/React.createElement(IconTitle, {
                          title: "\u6837\u5F0F",
                          iconInfo: {
                            icon: 'Businesscenter-Details',
                            tooltip: '最多配置6列，列的总栅格数为24。'
                          }
                        }),
                        key: 'panel1'
                      },
                      properties: {
                        cols: {
                          triggerType: 'onChange',
                          type: 'array',
                          'x-component': 'ColEdit',
                          'x-rules': function xRules(value) {
                            var totle = 0;
                            value.forEach(function (element) {
                              var num = Number(element.span);
                              totle += num;
                            });

                            if (totle === 24) {
                              return null;
                            } else {
                              return '请调整栅格数，保证总数为24栅格！';
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            });

          case 2:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));

  return function (_x) {
    return _ref2.apply(this, arguments);
  };
}();

Template.CustomScCom = {
  ColEdit: ColEdit
};

Template.validate = function (attributes) {
  var totle = 0;
  attributes.cols.forEach(function (element) {
    var num = Number(element.span);
    totle += num;
  });
  return totle === 24;
};

Template.stopChangeOnValidateError = true;
Template.defaultProps = {
  hideComList: []
};
export default Template;