@fonixtree/magic-design 2.0.161 → 2.0.162

package/lib/core/Designer/ConfigPanel/index.js

@@ -1,396 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSecondConfigName = exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _TerminalSelect = _interopRequireDefault(require("./TerminalSelect"));
-
-var _coreUtil = require("../../../utils/coreUtil");
-
-var _commonUtil = require("../../../utils/commonUtil");
-
-var _Button = _interopRequireDefault(require("../../../common/Button"));
-
-var _constants = require("../../../constants");
-
-var _componentTypes = require("../../../constants/component-types");
-
-var _mobx = require("../../../mobx");
-
-var _locale = require("../../../locale");
-
-require("./index.less");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var __extends = void 0 && (void 0).__extends || function () {
-  var _extendStatics = function extendStatics(d, b) {
-    _extendStatics = Object.setPrototypeOf || {
-      __proto__: []
-    } instanceof Array && function (d, b) {
-      d.__proto__ = b;
-    } || function (d, b) {
-      for (var p in b) {
-        if (b.hasOwnProperty(p)) d[p] = b[p];
-      }
-    };
-
-    return _extendStatics(d, b);
-  };
-
-  return function (d, b) {
-    _extendStatics(d, b);
-
-    function __() {
-      this.constructor = d;
-    }
-
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-  };
-}();
-
-var getSecondConfigName = function getSecondConfigName(selectedNode, clickedGroup) {
-  var _a, _b, _c, _d;
-
-  if (!selectedNode || !selectedNode.groupSource) {
-    return;
-  }
-
-  var panelProps = selectedNode.groupSource.find(function (src) {
-    return src.id === clickedGroup;
-  });
-  var panelIndex = selectedNode.groupSource.findIndex(function (src) {
-    return src.id === clickedGroup;
-  });
-
-  if (!panelProps) {
-    return;
-  }
-
-  var groupName = '';
-
-  switch (selectedNode.type) {
-    case 'IMAGE_GALLERY':
-    case 'BANNER':
-      groupName = ''; // if (!groupName) {
-      //   groupName = isPc() ? panelProps.image?.content?.pcName : panelProps.image?.content?.h5Name;
-      // }
-
-      if ((0, _coreUtil.isPc)()) {
-        groupName = panelProps.image.content.pcImgSrc ? panelProps.image.content.pcName : (0, _locale.i18n)('BANNER_GROUP_NAME');
-      } else {
-        groupName = panelProps.image.content.h5ImgSrc ? panelProps.image.content.h5Name : (0, _locale.i18n)('BANNER_GROUP_NAME');
-      }
-
-      break;
-
-    case 'CAROUSEL':
-      groupName = (0, _coreUtil.isPc)() ? (_b = (_a = panelProps.image) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.pcName : (_d = (_c = panelProps.image) === null || _c === void 0 ? void 0 : _c.content) === null || _d === void 0 ? void 0 : _d.h5Name;
-      break;
-
-    case 'MOBILE_NAVIGATION':
-    case 'PC_NAVIGATION':
-      groupName = (panelProps === null || panelProps === void 0 ? void 0 : panelProps.title.text) || (0, _locale.i18n)('NAVIGATION_NAME');
-      break;
-
-    case 'IMAGE_TEXT':
-      groupName = panelProps.title.open ? panelProps.title.text : (0, _locale.i18n)('IMAGE_AND_TEXT_NAME');
-      break;
-
-    case 'TEXT':
-    case 'WALLET':
-    case 'COMMON_FUNCTIONS':
-      groupName = panelProps.title.text;
-      break;
-
-    case 'RECOMMEND':
-    case 'AFFILIATE_RECOMMEND':
-    case 'MONPAY_RECOMMEND':
-      groupName = panelProps.groupName.text;
-      break;
-
-    case 'BUTTON':
-      groupName = panelProps.button.text;
-      break;
-
-    case 'VIDEO':
-      groupName = 'Video' + (panelIndex + 1);
-      break;
-
-    case 'TAG':
-      groupName = panelProps.button.text;
-      break;
-
-    case 'PERSONAL_INFOMATION':
-    case 'ORDERS':
-      groupName = panelProps.sourceType;
-      break;
-  }
-
-  return groupName || 'Group Name';
-};
-
-exports.getSecondConfigName = getSecondConfigName;
-
-var ConfigPanel =
-/** @class */
-function (_super) {
-  __extends(ConfigPanel, _super);
-
-  function ConfigPanel() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-
-    _this.preClickedGroup = null; // 以及面板展开状态
-
-    _this.configOpen = false;
-    _this.state = {
-      selectedNode: {}
-    };
-
-    _this.resetState = function (propsData, clickedFloor) {
-      var pageData = propsData.pageData;
-      var selectedNode = pageData.find(function (floor) {
-        return floor.id === clickedFloor;
-      });
-
-      _this.setState({
-        clickedGroup: _mobx.store.clickedGroup,
-        selectedNode: selectedNode
-      }); // 展开一级面板
-
-
-      if (selectedNode) {
-        _this.openConfig();
-      } else {
-        _this.closeConfig();
-      } // 展开二级面板
-
-
-      if (!_mobx.store.clickedGroup && _this.preClickedGroup) {
-        _this.closeSecConfig();
-      } else if (Boolean(_mobx.store.clickedGroup) != Boolean(_this.preClickedGroup)) {
-        _this.openSecConfig();
-      }
-
-      _this.preClickedGroup = _mobx.store.clickedGroup;
-    };
-
-    _this.animation = function (type) {
-      document.getElementsByClassName('config_wrap')[0].setAttribute('style', "animation-name:" + type + ";animation-duration: 0.3s;animation-fill-mode:both");
-    };
-
-    _this.openPcConfig = function () {
-      _this.animation('openPcConfig');
-    };
-
-    _this.closePcConfig = function () {
-      _this.animation('closePcConfig');
-    };
-
-    _this.openMobileConfig = function () {
-      _this.animation('openMobileConfig');
-    };
-
-    _this.closeMobileConfig = function () {
-      _this.animation('closeMobileConfig');
-    };
-
-    _this.openConfig = function () {
-      if (_this.configOpen) {
-        return;
-      }
-
-      if (window.magicDesign.device === 'pc') {
-        _this.openPcConfig();
-      } else {
-        _this.openMobileConfig();
-      }
-
-      _this.configOpen = true;
-    };
-
-    _this.closeConfig = function () {
-      if (!_this.configOpen) {
-        return;
-      }
-
-      if (window.magicDesign.device === 'pc') {
-        _this.closePcConfig();
-      } else {
-        _this.closeMobileConfig();
-      }
-
-      _this.configOpen = false;
-    };
-
-    _this.openSecConfig = function () {
-      var _a;
-
-      (_a = document.getElementsByClassName('sec_config_wrap')[0]) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'animation-name:openSecConfig;animation-duration: 0.3s;animation-fill-mode:both');
-    };
-
-    _this.closeSecConfig = function () {
-      var _a;
-
-      (_a = document.getElementsByClassName('sec_config_wrap')[0]) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'animation-name:closeSecConfig;animation-duration: 0.3s;animation-fill-mode:both');
-
-      _mobx.store.setState({
-        clickedMeta: ''
-      });
-    };
-
-    _this.onDoneClick = function () {
-      var _a = _this.props,
-          device = _a.device,
-          onClose = _a.onClose;
-
-      if (device === _constants.deviceTypeMap.PC) {
-        _this.closePcConfig();
-      }
-
-      onClose();
-    };
-
-    _this.getConfigPanelInstance = function () {
-      var device = _this.props.device;
-      var selectedNode = _this.state.selectedNode;
-      var Clazz = _componentTypes.configPanelMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type];
-      var panelProps = {
-        data: selectedNode,
-        device: device
-      };
-      var instance = Clazz ? /*#__PURE__*/_react["default"].createElement(Clazz, panelProps) : null;
-
-      if (!instance) {
-        _mobx.store.setState({
-          clickedFloor: null
-        });
-      }
-
-      return instance;
-    };
-
-    _this.getSecondConfigInstance = function () {
-      var selectedNode = _this.state.selectedNode;
-      var outputType = _this.props.outputType;
-      var Clazz = _componentTypes.secondConfigPanelMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type];
-      var panelProps = (0, _commonUtil.ensure)(function () {
-        return selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.groupSource.find(function (src) {
-          return src.id === _this.state.clickedGroup;
-        });
-      }, null);
-
-      if (panelProps) {
-        var instance = Clazz ? /*#__PURE__*/_react["default"].createElement(Clazz, {
-          panelProps: panelProps,
-          outputType: outputType,
-          parentNode: selectedNode
-        }) : null;
-        return instance;
-      }
-
-      return null;
-    };
-
-    _this.onSecConfigBack = function () {
-      _mobx.store.setState({
-        clickedGroup: null
-      });
-
-      window.document.dispatchEvent(new Event(_constants.eventType.UPDATE_FIRST_CONFIG, {
-        bubbles: false
-      }));
-    };
-
-    _this.onTerminalChange = function (terminal) {
-      var selectedNode = _this.state.selectedNode;
-      selectedNode.activeTerminal = terminal;
-
-      _this.setState({
-        selectedNode: selectedNode
-      }); // 刷新页面组件列表 和 viewArea
-
-
-      (0, _coreUtil.renderPreview)();
-    };
-
-    return _this;
-  }
-
-  ConfigPanel.prototype.componentDidMount = function () {
-    var _this = this;
-
-    this.distroy = (0, _mobx.autorun)(function () {
-      _this.resetState(_this.props, _mobx.store.clickedFloor);
-    });
-  };
-
-  ConfigPanel.prototype.componentWillReceiveProps = function (nextProps) {
-    if (JSON.stringify(this.props) !== JSON.stringify(nextProps)) {
-      this.resetState(nextProps, _mobx.store.clickedFloor);
-    }
-  };
-
-  ConfigPanel.prototype.componentWillUnmount = function () {
-    this.distroy();
-  };
-
-  ConfigPanel.prototype.render = function () {
-    var _a, _b;
-
-    var device = this.props.device;
-    var _c = this.state,
-        selectedNode = _c.selectedNode,
-        clickedGroup = _c.clickedGroup;
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "config_wrap"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "first_config_wrap"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "config_header"
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: "title",
-      title: (_a = _constants.compInfoMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type]) === null || _a === void 0 ? void 0 : _a.name
-    }, (_b = _constants.compInfoMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type]) === null || _b === void 0 ? void 0 : _b.name), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "right_wrap"
-    }, /*#__PURE__*/_react["default"].createElement(_TerminalSelect["default"], {
-      onChange: this.onTerminalChange,
-      terminalType: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.terminalType,
-      value: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.activeTerminal
-    }), device === _constants.deviceTypeMap.PC && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      onClick: this.onDoneClick,
-      size: "small",
-      type: "light"
-    }, (0, _locale.i18n)('DONE')))), this.getConfigPanelInstance()), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "sec_config_wrap"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "config_header"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "button_wrap"
-    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      icon: "icon-left",
-      onClick: this.onSecConfigBack,
-      type: "icon"
-    })), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "title",
-      dangerouslySetInnerHTML: {
-        __html: getSecondConfigName(selectedNode, clickedGroup)
-      }
-    })), this.getSecondConfigInstance()));
-  };
-
-  return ConfigPanel;
-}(_react.Component);
-
-var _default = ConfigPanel;
-exports["default"] = _default;

package/lib/core/Designer/ConfigPanel/index.less

@@ -1,148 +0,0 @@
-.config_wrap {
-  width: 354px;
-  background: #ffffff;
-  max-height: 100vh;
-  // overflow: scroll;
-  transition-property: transform;
-  transition-duration: .3s;
-  transition-timing-function: ease;
-  left: -354px;
-  z-index: 200;
-  // position: fixed;
-  position: absolute;
-  flex-shrink: 0;
-
-  &.show_config {
-    position: fixed;
-    transform: translateX(354px);
-  }
-
-  .first_config_wrap {
-    height: 100%;
-    padding: 24px;
-    height: 100vh;
-    overflow: auto;
-
-    .config_header {
-      font-size: 26px;
-      line-height: 36px;
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 10px;
-
-      .title {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-family: 'Open Sans';
-        font-style: normal;
-        font-weight: 700;
-        font-size: 26px;
-        line-height: 32px;
-        color: #232F46;
-      }
-      .right_wrap {
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-
-  .sec_config_wrap {
-    position: absolute;
-    height: 100vh;
-    overflow: auto;
-    width: 354px;
-    z-index: 201;
-    left: -354px;
-    bottom: 0;
-    top: 0;
-    background-color: #FFF;
-    padding: 24px;
-
-    .config_header {
-      .button_wrap {
-        display: flex;
-      }
-
-      .title {
-        margin-top: 20px;
-        font-family: 'Open Sans';
-        font-style: normal;
-        font-weight: 700;
-        font-size: 26px;
-        line-height: 32px;
-        color: #232F46;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-  }
-}
-
-
-@keyframes openPcConfig {
-  from {
-    left: -354px;
-  }
-
-  to {
-    left: 0px;
-  }
-}
-
-@keyframes closePcConfig {
-  from {
-    left: 0px;
-  }
-
-  to {
-    left: -354px;
-  }
-}
-
-@keyframes openMobileConfig {
-  from {
-    left: 0px;
-    z-index: 50;
-  }
-
-  to {
-    left: 355px;
-    z-index: 50;
-  }
-}
-
-@keyframes closeMobileConfig {
-  from {
-    left: 355px;
-    z-index: 50;
-  }
-
-  to {
-    left: 0px;
-    z-index: 50;
-  }
-}
-
-
-@keyframes openSecConfig {
-  from {
-    left: -354px;
-  }
-
-  to {
-    left: 0px;
-  }
-}
-
-@keyframes closeSecConfig {
-  from {
-    left: 0px;
-  }
-
-  to {
-    left: -354px;
-  }
-}