@riil-frontend/component-page-config/lib/components/edit-layout/EditTabDrawer.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 _drawer = _interopRequireDefault(require("@alifd/next/lib/drawer"));

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

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

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

var _form = _interopRequireDefault(require("@alifd/next/lib/form"));

var _input = _interopRequireDefault(require("@alifd/next/lib/input"));

var _table = _interopRequireDefault(require("@alifd/next/lib/table"));

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

var _componentFooterLayout = _interopRequireDefault(require("@riil-frontend/component-footer-layout"));

var _componentAddDataGroup = _interopRequireDefault(require("@riil-frontend/component-add-data-group"));

var _dragPanel = _interopRequireDefault(require("../drag-panel"));

require("./EditTabDrawer.scss");

var EditTabDrawer = function EditTabDrawer(props) {
  var visible = props.visible,
      _onClose = props.onClose,
      _onOk = props.onOk,
      appPageConfig = props.appPageConfig;
  var configs = appPageConfig.configs;

  var _useState = (0, _react.useState)([]),
      tableData = _useState[0],
      setTableData = _useState[1];

  var columnNodes = [/*#__PURE__*/_react["default"].createElement(_table["default"].Column, {
    key: "pageName",
    cell: function cell(val, index, record) {
      return layerNameInput(val, index, record, "pageName");
    },
    title: "\u9875\u7B7E\u540D\u79F0",
    dataIndex: "pageName"
  })];

  var layerNameInput = function layerNameInput(val, index, record, dataIndex) {
    return /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
      label: "",
      required: true,
      requiredTrigger: "onBlur",
      requiredMessage: "\u540D\u79F0\u4E0D\u80FD\u4E3A\u7A7A"
    }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
      maxLength: 6,
      onChange: function onChange(v, e) {
        layerNameChange(v, record, dataIndex);
      },
      value: val,
      style: {
        width: "100%"
      },
      name: dataIndex + index,
      disabled: record.disabled
    }));
  };

  var layerNameChange = function layerNameChange(value, record, dataIndex) {
    var newData = tableData.map(function (ele) {
      if (ele.myRowKey === record.myRowKey) {
        ele[dataIndex] = value;
        return ele;
      } else {
        return ele;
      }
    });
    setTableData(newData);
  };

  (0, _react.useEffect)(function () {
    var tbdata = configs.map(function (ele) {
      return {
        pageName: ele.pageName,
        pageId: ele.pageId,
        myRowKey: ele.pageId
      };
    });
    setTableData(tbdata);
  }, [configs]);

  var convertSubmitData = function convertSubmitData() {
    var _appPageConfig$config, _appPageConfig$config2;

    //使用第一个页签的layoutConfig作为模板，实现新建相同配置的页签模板
    var firstLayout = (appPageConfig === null || appPageConfig === void 0 ? void 0 : (_appPageConfig$config = appPageConfig.configs) === null || _appPageConfig$config === void 0 ? void 0 : (_appPageConfig$config2 = _appPageConfig$config[0]) === null || _appPageConfig$config2 === void 0 ? void 0 : _appPageConfig$config2.layoutConfig) || {};
    var oldDataObj = {};
    configs.forEach(function (ele) {
      oldDataObj[ele.pageId] = ele;
    });
    var newData = tableData.map(function (ele) {
      if (oldDataObj[ele.pageId]) {
        return (0, _extends2["default"])({}, oldDataObj[ele.pageId], {
          pageName: ele.pageName
        });
      } else {
        var layoutConfig = (0, _extends2["default"])({}, _dragPanel["default"].defaultProps.pageConfig.layoutConfig, firstLayout);
        return {
          pageId: ele.myRowKey,
          pageName: ele.pageName,
          layoutConfig: layoutConfig,
          widgets: []
        };
      }
    });
    return (0, _extends2["default"])({}, appPageConfig, {
      configs: newData
    });
  };

  var onSubmit = function onSubmit(v, e) {
    if (!e) {
      var isDelOld = false;

      var _loop = function _loop(index) {
        var ele = configs[index];
        var isIn = !!tableData.find(function (item) {
          return item.pageId === ele.pageId;
        });

        if (!isIn) {
          isDelOld = true;
          return "break";
        }
      };

      for (var index = 0; index < configs.length; index++) {
        var _ret = _loop(index);

        if (_ret === "break") break;
      }

      if (isDelOld) {
        _dialog["default"].confirm({
          content: "此操作中有删除页签操作，是否确定删除？",
          onOk: function onOk() {
            var newApp = convertSubmitData();

            _onOk(newApp);

            _onClose();
          }
        });
      } else {
        var newApp = convertSubmitData();

        _onOk(newApp);

        _onClose();
      }
    }
  };

  return /*#__PURE__*/_react["default"].createElement(_drawer["default"], {
    width: 408,
    visible: true,
    onClose: function onClose() {
      _onClose();
    },
    closeable: "close",
    bodyStyle: {
      height: "calc(100% - 46px)",
      padding: 0
    },
    title: "\u7F16\u8F91\u9875\u7B7E"
  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
    style: {
      height: "100%"
    }
  }, /*#__PURE__*/_react["default"].createElement(_componentFooterLayout["default"], {
    className: "edit-tab-drawer-footer-layout",
    footer: [/*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_form["default"].Submit, {
      type: "primary",
      key: 5,
      onClick: onSubmit,
      validate: true
    }, "\u786E\u5B9A")), /*#__PURE__*/_react["default"].createElement(_button["default"], {
      key: 6,
      onClick: function onClick() {
        _onClose();
      }
    }, "\u53D6\u6D88")],
    align: "right"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    style: {
      height: "100%"
    }
  }, /*#__PURE__*/_react["default"].createElement(_componentAddDataGroup["default"], {
    minDataLength: 1,
    isShowAddButton: true,
    canDrag: true,
    tableData: tableData,
    isShowDeleteButton: true,
    onChange: function onChange(val) {
      setTableData(val);
    },
    addDisabled: false,
    value: tableData,
    ColumnNodes: columnNodes,
    defaultRowData: {
      pageName: "",
      disabled: false
    }
  })))));
};

var _default = EditTabDrawer;
exports["default"] = _default;