@riil-frontend/component-page-config/lib/components/uicbb-container/index.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

var _button = _interopRequireDefault(require("@alifd/next/lib/button"));

var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));

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

var _overlay = _interopRequireDefault(require("@alifd/next/lib/overlay"));

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

var _dialog = _interopRequireDefault(require("@alifd/next/lib/dialog"));

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

var _grid = _interopRequireDefault(require("@alifd/next/lib/grid"));

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

var _utils = require("@riil-frontend/utils");

var _reactSortablejs = require("react-sortablejs");

var _ColEdit = _interopRequireDefault(require("./ColEdit"));

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

require("./index.scss");

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

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

var _AttributesPanel = _interopRequireDefault(require("./AttributesPanel"));

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

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

var Row = _grid["default"].Row,
    Col = _grid["default"].Col;

var Template = function Template(props) {
  var _thisRef$current, _thisRef$current$dom, _thisRef$current$dom$;

  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,
      comDict = props.comDict,
      dragPanelState = props.dragPanelState,
      setDragPanelState = props.setDragPanelState,
      configVisible = props.configVisible,
      setConfigVisible = props.setConfigVisible,
      appConfig = props.appConfig,
      pageConfig = props.pageConfig;
  var attributes = config.attributes; //用来实现快速点击的计时器

  var thisRef = (0, _react.useRef)({
    quickClickTime: 0,
    newElementId: "",
    dom: null
  });

  var onSortChange = function onSortChange(widgets, item, index) {
    var newItem = (0, _extends2["default"])({}, item, {
      widgets: widgets
    });
    var newCols = attributes.cols.map(function (ele, idx) {
      if (idx === index) {
        return newItem;
      } else {
        return ele;
      }
    });
    onConfigChange((0, _extends2["default"])({}, config, {
      attributes: (0, _extends2["default"])({}, config.attributes, {
        cols: newCols
      })
    }));
  }; //删除组件


  var _onRemoveItem = function onRemoveItem(item) {
    _dialog["default"].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 (0, _extends2["default"])({}, ele, {
            widgets: newWidgets
          });
        });
        onConfigChange((0, _extends2["default"])({}, config, {
          attributes: (0, _extends2["default"])({}, config.attributes, {
            cols: newCols
          })
        }));
      }
    });
  };

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

    thisRef.current.newElementId = "";
    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 (0, _extends2["default"])({}, ele, {
        widgets: newWidgets
      });
    });
    onConfigChange((0, _extends2["default"])({}, config, {
      attributes: (0, _extends2["default"])({}, config.attributes, {
        cols: newCols
      })
    }), callback, isUpdateService);
  };

  var _setConfigVisible = function _setConfigVisible(b) {
    if (thisRef.current.newElementId !== "") {
      var newCols = attributes.cols.map(function (item) {
        var span = item.span,
            widgets = item.widgets,
            direction = item.direction;
        var newWidgets = widgets.filter(function (ele) {
          return ele.id !== thisRef.current.newElementId;
        });
        var newItem = (0, _extends2["default"])({}, item, {
          widgets: newWidgets
        });
        return newItem;
      });
      onConfigChange((0, _extends2["default"])({}, config, {
        attributes: (0, _extends2["default"])({}, config.attributes, {
          cols: newCols
        })
      }));
      thisRef.current.newElementId = "";
    } else {
      setDragPanelState({
        attrDrawerId: ""
      });
    }
  };

  var generateDOM = function generateDOM(widgets, direction) {
    if ((0, _utils.isAvailableArray)(widgets)) {
      return widgets.filter(function (ele) {
        return !hideComList.includes(ele.type);
      }).map(function (ele, i) {
        var item = (0, _util.fixWidget)(ele);
        var Com = getComRequire(item.type, comDict, 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;
        var configVisible = dragPanelState.attrDrawerId === item.id;
        return /*#__PURE__*/_react["default"].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["default"].createElement(DragItem, {
          config: item,
          setPageState: setPageState,
          removePageState: removePageState,
          pageProps: pageProps,
          isEdit: isEdit,
          onRemoveItem: function onRemoveItem() {
            _onRemoveItem(item);
          },
          onQuickClick: function onQuickClick() {
            setDragPanelState({
              attrDrawerId: item.id
            });
          },
          render: /*#__PURE__*/_react["default"].createElement(Com, {
            isEdit: isEdit,
            config: item,
            pageProps: pageProps,
            widgetsProps: widgetsProps,
            setPageState: setPageState,
            setWidgetsState: setWidgetsState,
            request: request,
            jumpto: jumpto,
            onConfigChange: onChildConfigChange,
            toggleFullScreen: function toggleFullScreen() {
              return _toggleFullScreen(item.id);
            },
            getFullScreenState: getFullScreenState,
            getBaseAttributes: getBaseAttributes,
            getComRequire: getComRequire,
            customGetComRequire: customGetComRequire,
            comDict: comDict,
            setConfigVisible: function setConfigVisible(b) {
              _setConfigVisible(b); // setDragPanelState({ attrDrawerId: '' });

            },
            configVisible: configVisible,
            appConfig: appConfig,
            pageConfig: pageConfig
          })
        }));
      });
    } 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 = _lodash["default"].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 === _constant.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["default"].createElement("div", {
      className: "uicbb-container-wrap",
      ref: function ref(node) {
        thisRef.current.dom = node;
      } // onMouseDown={(e) => {
      // 	thisRef.current.quickClickTime = new Date().getTime();
      // }}
      // onMouseUp={(e) => {
      // 	if (thisRef.current.quickClickTime) {
      // 		thisRef.current.quickClickTime = new Date().getTime() - thisRef.current.quickClickTime;
      // 		if (thisRef.current.quickClickTime < quickClickInterval) {
      // 			setDragPanelState({ attrDrawerId: config.id });
      // 		}
      // 		thisRef.current.quickClickTime = 0;
      // 	}
      // }}

    }, /*#__PURE__*/_react["default"].createElement(Row, {
      className: "template-row",
      wrap: true
    }, attributes.cols.map(function (item, index) {
      var span = item.span,
          widgets = item.widgets,
          direction = item.direction;
      var p = span * 100 / _constant.TOTAL;
      var styl = {
        width: p + "%",
        maxWidth: p + "%",
        flex: "0 0 " + p + "%"
      };
      return /*#__PURE__*/_react["default"].createElement(Col, {
        className: "template-col " + (isEdit ? "" : "view") + " " + (selectedId === config.id && isEdit ? "content-selected " : ""),
        style: styl,
        span: span,
        key: "cols" + index
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "template-col-content",
        onDragOver: function onDragOver(e) {
          if (!isEdit) {
            return;
          }

          if (!dragPanelIsDroppable) {
            e.preventDefault();
            e.stopPropagation();
          }
        },
        onDrop: function onDrop(e) {
          window.__uicbbDragState__ = "droped";

          var _config = JSON.parse(e.dataTransfer.getData("text/plain"));

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

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


          var hasComInOtherTemplate = findItemInOtherTemplate(_config.id);

          if (hasComInOtherTemplate) {
            var newAllWidgets = _lodash["default"].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 = (0, _utils.getUUID)();
          _config.id = id;
          _config = (0, _util.fixWidget)(_config);
          var newWidgets = [].concat(widgets, [_config]);
          var newItem = (0, _extends2["default"])({}, item, {
            widgets: newWidgets
          });
          var newCols = attributes.cols.map(function (ele, idx) {
            if (idx === index) {
              return newItem;
            } else {
              return ele;
            }
          });
          thisRef.current.newElementId = id;
          setDragPanelState({
            attrDrawerId: id
          });
          onConfigChange((0, _extends2["default"])({}, config, {
            attributes: (0, _extends2["default"])({}, config.attributes, {
              cols: newCols
            })
          }));
          onSelect(id);
        }
      }, isEdit ? /*#__PURE__*/_react["default"].createElement(_reactSortablejs.ReactSortable, {
        list: widgets,
        setList: function setList(wd) {
          onSortChange(wd, item, index);
        },
        style: {
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: direction
        }
      }, (0, _utils.isAvailableArray)(widgets) ? generateDOM(widgets, direction) : null) : /*#__PURE__*/_react["default"].createElement("div", {
        style: {
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: direction
        }
      }, (0, _utils.isAvailableArray)(widgets) ? generateDOM(widgets, direction) : null), widgets.length === 0 && isEdit ? /*#__PURE__*/_react["default"].createElement(_box["default"], {
        align: "center",
        justify: "center",
        className: "drag-background-info"
      }, "\u5C06\u7EC4\u4EF6\u62D6\u81F3\u6B64\u533A\u57DF") : null));
    })), configVisible ? /*#__PURE__*/_react["default"].createElement(_overlay["default"], {
      visible: configVisible,
      align: "tr br",
      target: thisRef === null || thisRef === void 0 ? void 0 : (_thisRef$current = thisRef.current) === null || _thisRef$current === void 0 ? void 0 : (_thisRef$current$dom = _thisRef$current.dom) === null || _thisRef$current$dom === void 0 ? void 0 : (_thisRef$current$dom$ = _thisRef$current$dom.parentNode) === null || _thisRef$current$dom$ === void 0 ? void 0 : _thisRef$current$dom$.getElementsByClassName("option-group")[0],
      safeNode: function safeNode() {
        return document.querySelector('div[role="alertdialog"]');
      },
      onRequestClose: function onRequestClose() {
        setConfigVisible(false);
      }
    }, /*#__PURE__*/_react["default"].createElement(_AttributesPanel["default"], {
      getSchema: Template.getSchema,
      CustomScCom: Template.CustomScCom,
      pageProps: pageProps,
      config: config,
      request: request,
      onConfigChange: onConfigChange
    })) : null)
  );
};

var DragItem = /*#__PURE__*/function (_Component) {
  (0, _inheritsLoose2["default"])(DragItem, _Component);

  function DragItem(props) {
    var _this;

    _this = _Component.call(this, props) || this;
    _this.quickClickTime = 0;
    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,
        onQuickClick = _this$props2.onQuickClick;
    var isHideConfig = config === null || config === void 0 ? void 0 : config.isHideConfig;
    var lackInfoElements = [];
    var removeElement = isEdit ? /*#__PURE__*/_react["default"].createElement(_button["default"].Group, {
      className: "option-group-template"
    }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
      className: "option-children",
      onMouseDown: function onMouseDown(e) {
        e.stopPropagation();
      },
      onClick: function onClick(e) {
        e.stopPropagation();
        onRemoveItem();
      },
      title: "\u5220\u9664\u7EC4\u4EF6",
      style: {
        color: "white"
      },
      text: true
    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      type: "ashbin"
    })), isHideConfig ? null : /*#__PURE__*/_react["default"].createElement(_button["default"], {
      className: "option-children ",
      onMouseDown: function onMouseDown(e) {
        e.stopPropagation();
      },
      onClick: function onClick(e) {
        e.stopPropagation();
        onQuickClick();
      },
      title: "\u8BBE\u7F6E",
      text: true,
      style: {
        color: "white"
      }
    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      type: "set"
    }))) : null; //只有在浏览模式下（!isEdit），缺少等级属性，才会显示为lackInfoElements

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

    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, lackInfoElements.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        width: "100%",
        height: "100%",
        border: "1px solid #e9e9e9",
        background: "white"
      }
    }, lackInfoElements) : render, isEdit && config.type !== _constant.CONTAINER_COM_TYPE ?
    /*#__PURE__*/
    //在遮罩面板上增加快速点击事件，实现弹出组件抽屉的行为
    _react["default"].createElement("div", {
      // onMouseDown={(e) => {
      // 	// e.stopPropagation();
      // 	this.quickClickTime = new Date().getTime();
      // }}
      // onMouseUp={(e) => {
      // 	e.stopPropagation();
      // 	if (this.quickClickTime) {
      // 		this.quickClickTime = new Date().getTime() - this.quickClickTime;
      // 		if (this.quickClickTime < quickClickInterval) {
      // 			onQuickClick();
      // 		}
      // 		this.quickClickTime = 0;
      // 	}
      // }}
      className: "edit-item-mask"
    }) : null, removeElement, children);
  };

  return DragItem;
}(_react.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 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(_ref) {
    var pageProps, config, request;
    return _regenerator["default"].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: {
                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 === _constant.TOTAL) {
                      return null;
                    } else {
                      return "\u5217\u5BBD\u6570\u603B\u548C\u5E94\u4E3A" + _constant.TOTAL + "\uFF0C\u4E0D\u6EE1\u8DB3\u4FEE\u6539\u5C06\u4E0D\u751F\u6548\u3002";
                    }
                  }
                }
              } // 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: (
              // 						<IconTitle
              // 							title="样式"
              // 							iconInfo={{ icon: 'Businesscenter-Details', tooltip: '最多配置6列，列的总栅格数为24。' }}
              // 						/>
              // 					),
              // 					key: 'panel1',
              // 				},
              // 				properties: {
              // 					cols: {
              // 						triggerType: 'onChange',
              // 						type: 'array',
              // 						'x-component': 'ColEdit',
              // 						'x-rules': (value) => {
              // 							let totle = 0;
              // 							value.forEach((element) => {
              // 								let 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["default"]
};

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

Template.stopChangeOnValidateError = true;
Template.defaultProps = {
  hideComList: []
};
var _default = Template;
exports["default"] = _default;