@fonixtree/magic-design 0.0.11 → 0.0.16

package/src/components/core/Designer/ViewArea/index.js

@@ -1,86 +0,0 @@
-import { __extends, __assign } from '../../../../../node_modules/tslib/tslib.es6.js';
-import classNames from '../../../../../node_modules/classnames/index.js';
-import React__default, { Component } from 'react';
-import isEmpty_1 from '../../../../../node_modules/lodash/isEmpty.js';
-import { deviceTypeMap } from '../../../constants/index.js';
-import { componentMap } from '../../../constants/component-types.js';
-import './index.less.js';
-import { store } from '../../../mobx/index.js';
-import { autorun } from 'mobx';
-
-var ViewArea =
-/** @class */
-function (_super) {
-  __extends(ViewArea, _super);
-
-  function ViewArea() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-
-    _this.state = {
-      clickedFloor: ''
-    };
-
-    _this.isPhoneEdit = function () {
-      var device = _this.props.device;
-      return device === deviceTypeMap.PHONE && !isEmpty_1(_this.state.clickedFloor);
-    };
-
-    _this.renderView = function () {
-      _this.setState({});
-    };
-
-    return _this;
-  }
-
-  ViewArea.prototype.componentDidMount = function () {
-    var _this = this;
-
-    this.distroy = autorun(function () {
-      _this.setState({
-        clickedFloor: store.clickedFloor
-      });
-    });
-  };
-
-  ViewArea.prototype.componentWillUnmount = function () {
-    this.distroy();
-  };
-
-  ViewArea.prototype.render = function () {
-    var _a = this.props,
-        device = _a.device,
-        renderHeader = _a.renderHeader,
-        pageData = _a.pageData;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classNames('design-area-wrap', {
-        'phone-edit': this.isPhoneEdit()
-      })
-    }, renderHeader(), /*#__PURE__*/React__default.createElement("div", {
-      className: device === deviceTypeMap.PC ? 'pc_view_area' : 'phone_view_area'
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "device_border",
-      style: {
-        background: window.magicDesign.pageBackground
-      }
-    }, pageData && pageData.map(function (nodeData) {
-      var Clazz = componentMap[nodeData.type];
-
-      if (!Clazz) {
-        console.error("[MagicBox] Can not find type ".concat(nodeData.type));
-        return;
-      }
-
-      var newInstanceProps = {
-        nodeData: nodeData
-      };
-      return /*#__PURE__*/React__default.createElement("div", {
-        key: nodeData.id,
-        id: "view".concat(nodeData.id)
-      }, /*#__PURE__*/React__default.createElement(Clazz, __assign({}, newInstanceProps), null));
-    }))));
-  };
-
-  return ViewArea;
-}(Component);
-
-export { ViewArea as default };

package/src/components/core/Designer/ViewArea/index.less.js

@@ -1,4 +0,0 @@
-import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".index_design-area-wrap__1UMY8 {\n  width: calc(100vw - 354px);\n  flex: auto;\n  background: #F5F6F7;\n  display: flex;\n  flex-direction: column;\n  padding-left: 1px;\n  transition-property: all;\n  transition-duration: 0.3s;\n  transition-timing-function: ease;\n}\n.index_design-area-wrap__1UMY8.index_phone-edit__-2SG9 {\n  margin-left: 355px;\n}\n.index_design-area-wrap__1UMY8 .index_phone_view_area__Jv0A0 {\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px 0;\n}\n.index_design-area-wrap__1UMY8 .index_phone_view_area__Jv0A0 .index_device_border__I7Vyh {\n  width: 375px;\n  max-height: 691px;\n  height: calc(100vh - 150px);\n  overflow: scroll;\n  overflow-x: hidden;\n  border: 10px solid #FFF;\n  background-color: #F2F2F2;\n  border-radius: 12px;\n  box-sizing: content-box;\n}\n.index_design-area-wrap__1UMY8 .index_pc_view_area__3s0Hi {\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n}\n.index_design-area-wrap__1UMY8 .index_pc_view_area__3s0Hi .index_device_border__I7Vyh {\n  padding: 1px;\n  max-width: 1240px;\n  width: 100%;\n  min-height: 70vh;\n  border: 16px solid #FFF;\n  border-radius: 12px;\n  max-height: calc(100vh - 180px);\n  height: 100%;\n  overflow: scroll;\n  box-sizing: content-box;\n}\n";
-styleInject(css_248z);

package/src/components/core/Designer/index.less.js

@@ -1,4 +0,0 @@
-import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".index_designer-wrap__u7r1K {\n  display: flex;\n  width: 100%;\n  height: 100vh;\n  background-color: #F5F6F7;\n}\n";
-styleInject(css_248z);

package/src/components/core/Renderer/index.js

@@ -1,55 +0,0 @@
-import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
-import React__default from 'react';
-import { componentMap } from '../../constants/component-types.js';
-
-var setDesignConfig = function setDesignConfig(props) {
-  var config = props.config,
-      device = props.device,
-      isShop = props.isShop;
-  window.magicDesign = __assign({
-    pageBackground: '#f2f2f2',
-    compSpacing: '16',
-    mode: 'renderer',
-    device: device,
-    isShop: isShop
-  }, config);
-};
-/**
- * @class Renderer 页面预览器，外部工程使用此类来渲染出页面。
- */
-
-
-var Renderer = function Renderer(props) {
-  var pageData = props.pageData;
-  setDesignConfig(props);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "render_wrap",
-    magic_design: "",
-    style: {
-      background: window.magicDesign.pageBackground
-    }
-  }, pageData && pageData.childNodes && pageData.childNodes.map(function (nodeData) {
-    var Clazz = componentMap[nodeData.type];
-
-    if (!Clazz) {
-      console.error("[MagicBox] Can not find type ".concat(nodeData.type));
-      return;
-    }
-
-    var newInstanceProps = __assign(__assign({}, nodeData), {
-      nodeData: nodeData
-    });
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: nodeData.id
-    }, /*#__PURE__*/React__default.createElement(Clazz, __assign({}, newInstanceProps), null));
-  }));
-};
-
-Renderer.defaultProps = {
-  pageData: {},
-  device: 'pc',
-  config: {}
-};
-
-export { Renderer as default };

package/src/components/decorator/compositeDecorator.js

@@ -1,94 +0,0 @@
-import { __extends } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default, { Component } from 'react';
-import { store } from '../mobx/index.js';
-import { autorun } from 'mobx';
-
-function compositeDecorator(WrappedComponent) {
-  var Wrapper =
-  /** @class */
-  function (_super) {
-    __extends(Wrapper, _super);
-
-    function Wrapper() {
-      var _this = _super !== null && _super.apply(this, arguments) || this;
-
-      _this.state = {
-        clickedFloor: ''
-      }; // 复合组件点击事件
-
-      _this.onCompositeCompClick = function (event) {
-        // 触发左侧楼层的滚动
-        if (document.getElementById("card".concat(_this.props.nodeData.id))) {
-          document.getElementById("card".concat(_this.props.nodeData.id)).scrollIntoView({
-            behavior: 'smooth'
-          });
-        } // 这里必须阻止事件冒泡，然后再触发自定义的事件
-
-
-        event.preventDefault();
-        event.stopPropagation(); // 触发点击组件事件
-
-        var evt = new Event('component-click', {
-          bubbles: false
-        });
-        evt.data = _this.props.nodeData;
-        window.document.dispatchEvent(evt);
-      };
-
-      _this.getStyle = function () {
-        var style = {
-          border: 'none'
-        }; // 处理复合组件的选中状态
-
-        if (window.magicDesign.mode === 'designer') {
-          // style.border = '1px solid transparent';
-          style.border = 'none';
-
-          if (_this.props.nodeData.id === _this.state.clickedFloor) {
-            style.border = '1px dashed red';
-          }
-        } // 处理复合组件的下边距
-
-
-        if (Wrapper.type !== 'DIVIDER') {
-          var rate = window.magicDesign.device === 'pc' ? 1.5 : 1;
-          style.marginBottom = "".concat(Number(window.magicDesign.compSpacing) * rate, "px");
-        }
-
-        return style;
-      };
-
-      return _this;
-    }
-
-    Wrapper.prototype.componentDidMount = function () {
-      var _this = this;
-
-      this.distroy = autorun(function () {
-        _this.setState({
-          clickedFloor: store.clickedFloor
-        });
-      });
-    };
-
-    Wrapper.prototype.componentWillUnmount = function () {
-      this.distroy();
-    };
-
-    Wrapper.prototype.render = function () {
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: "composite_wrap",
-        onClick: this.onCompositeCompClick,
-        style: this.getStyle()
-      }, /*#__PURE__*/React__default.createElement(WrappedComponent, this.props));
-    };
-
-    Wrapper.getDefaultJSON = WrappedComponent.getDefaultJSON;
-    Wrapper.type = WrappedComponent.type;
-    return Wrapper;
-  }(Component);
-
-  return Wrapper;
-}
-
-export { compositeDecorator as default };

package/src/components/index.js

@@ -1,4 +0,0 @@
-import './assets/less/index.less.js';
-import './assets/less/cylon-antd.less.js';
-export { default as Designer } from './core/Designer/index.js';
-export { default as Renderer } from './core/Renderer/index.js';

package/src/components/meta-comp/components/Button/index.js

@@ -1,113 +0,0 @@
-import { __extends, __assign, __decorate } from '../../../../../node_modules/tslib/tslib.es6.js';
-import React__default, { Component } from 'react';
-import classNames from '../../../../../node_modules/classnames/index.js';
-import './index.less.js';
-import { computeStyle } from '../../../utils/businessUtil.js';
-import { isDesignMode, clickUrl } from '../../../utils/coreUtil.js';
-import '../../../mobx/index.js';
-import metaDecorator from '../../../decorator/metaDecorator.js';
-
-var Button =
-/** @class */
-function (_super) {
-  __extends(Button, _super);
-
-  function Button() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-
-    _this.state = {
-      hover: false
-    };
-    /** 备份历史数据 比对不一致时渲染 */
-
-    _this.preData = '';
-    return _this;
-  }
-
-  Button.prototype.shouldComponentUpdate = function (nextProps) {
-    return JSON.stringify(nextProps.data) != this.preData;
-  };
-
-  Button.prototype.render = function () {
-    var _this = this;
-
-    var _a;
-
-    var _b = this.props,
-        data = _b.data,
-        className = _b.className,
-        readonly = _b.readonly;
-    var hover = this.state.hover;
-    this.preData = JSON.stringify(data);
-
-    var style = __assign({
-      backgroundColor: data.content.backgroundColor,
-      border: data.buttonBorder.open && data.buttonBorder.borderColor ? "1px solid ".concat(data.buttonBorder.borderColor) : '1px solid transparent',
-      borderRadius: data.buttonBorder.open ? data.buttonBorder.borderRadius : 0
-    }, data.buttonText);
-
-    var iconUrl = data.buttonIcon.iconUrl;
-    var iconLayout = data.buttonIcon.layout;
-
-    if (hover && ((_a = data.hover) === null || _a === void 0 ? void 0 : _a.open)) {
-      style = __assign(__assign(__assign({}, style), {
-        backgroundColor: data.hover.content.backgroundColor,
-        border: data.hover.buttonBorder.open && data.hover.buttonBorder.borderColor ? "1px solid ".concat(data.hover.buttonBorder.borderColor) : '1px solid transparent',
-        borderRadius: data.hover.buttonBorder.open ? data.hover.buttonBorder.borderRadius : 0
-      }), data.hover.buttonText);
-      iconUrl = data.hover.buttonIcon.iconUrl;
-      iconLayout = data.hover.buttonIcon.layout;
-    }
-
-    var btnText = /*#__PURE__*/React__default.createElement("span", {
-      className: "item",
-      contentEditable: isDesignMode() && !readonly,
-      onInput: function (e) {
-        var text = e.target.textContent;
-        data.text = text;
-        /** 主动更新历史数据避免render */
-
-        _this.preData = JSON.stringify(__assign(__assign({}, JSON.parse(_this.preData)), {
-          text: text
-        }));
-      },
-      suppressContentEditableWarning: true
-    }, data.text);
-    var wrapStyle = computeStyle(data, window.magicDesign.device);
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classNames('m-meta-button', className),
-      onClick: function () {
-        return clickUrl(data.content.url);
-      },
-      onMouseEnter: function () {
-        return _this.setState({
-          hover: true
-        });
-      },
-      onMouseLeave: function () {
-        return _this.setState({
-          hover: false
-        });
-      },
-      style: __assign(__assign({}, style), wrapStyle)
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: classNames('btnContent', {
-        horizontal: iconLayout === 'left' || iconLayout === 'right'
-      })
-    }, (iconLayout === 'right' || iconLayout === 'bottom') && btnText, iconUrl && /*#__PURE__*/React__default.createElement("img", {
-      alt: "",
-      className: "item",
-      src: iconUrl
-    }), (iconLayout === 'left' || iconLayout === 'top') && btnText));
-  };
-
-  Button.defaultProps = {
-    data: {},
-    className: '',
-    readonly: false
-  };
-  Button = __decorate([metaDecorator], Button);
-  return Button;
-}(Component);
-
-export { Button as default };

package/src/components/meta-comp/components/Button/index.less.js

@@ -1,4 +0,0 @@
-import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".index_m-meta-button__xC3hx {\n  transition: all 0.25s;\n}\n.index_m-meta-button__xC3hx .index_btnContent__EeMhF {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n}\n.index_m-meta-button__xC3hx .index_btnContent__EeMhF.index_horizontal__BTkyD {\n  flex-direction: row;\n}\n.index_m-meta-button__xC3hx .index_btnContent__EeMhF img {\n  height: 20px;\n}\n";
-styleInject(css_248z);

package/src/components/meta-comp/components/Image/index.js

@@ -1,121 +0,0 @@
-import { __extends, __decorate } from '../../../../../node_modules/tslib/tslib.es6.js';
-import React__default from 'react';
-import classNames from '../../../../../node_modules/classnames/index.js';
-import './index.less.js';
-import { isPc, clickUrl } from '../../../utils/coreUtil.js';
-import '../../../mobx/index.js';
-import metaDecorator from '../../../decorator/metaDecorator.js';
-
-var Image =
-/** @class */
-function (_super) {
-  __extends(Image, _super);
-
-  function Image() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-
-    _this.state = {
-      // 当仅作为一个图片时，鼠标移上去，hover状态
-      hoverImgSrc: false
-    };
-
-    _this.getStyle = function () {
-      var _a = _this.props,
-          data = _a.data,
-          hoverState = _a.hoverState,
-          maxHeight = _a.maxHeight,
-          maxWidth = _a.maxWidth;
-      var hoverImgSrc = _this.state.hoverImgSrc;
-      var obj = {};
-
-      if (data.hover.open && data.hover.backgroundType === 'enlarge' && (hoverState || hoverImgSrc)) {
-        // return { transform: `scale(${data.hover.magnification})` };
-        obj.transform = "scale(".concat(data.hover.magnification / 2, ")");
-      }
-
-      if (maxHeight) {
-        obj.maxHeight = maxHeight;
-      }
-
-      if (maxWidth) {
-        obj.maxWidth = maxWidth;
-      }
-
-      return obj;
-    };
-
-    _this.mouseEnterImg = function () {
-      var _a = _this.props,
-          data = _a.data,
-          isBackground = _a.isBackground;
-
-      if (data.hover.open && !isBackground) {
-        _this.setState({
-          hoverImgSrc: true
-        });
-      }
-    };
-
-    _this.mouseLeaveImg = function () {
-      var _a = _this.props,
-          data = _a.data,
-          isBackground = _a.isBackground;
-
-      if (data.hover.open && !isBackground) {
-        _this.setState({
-          hoverImgSrc: false
-        });
-      }
-    };
-
-    return _this;
-  }
-
-  Image.prototype.render = function () {
-    var _a, _b;
-
-    var _c = this.props,
-        data = _c.data,
-        isBackground = _c.isBackground,
-        hoverState = _c.hoverState;
-    var hoverImgSrc = this.state.hoverImgSrc; // const { hoverSrc } = this.state;
-    // console.log('--metaImage ', this.props);
-
-    var srcImg = isPc() ? (_a = data.content) === null || _a === void 0 ? void 0 : _a.pcImgSrc : (_b = data.content) === null || _b === void 0 ? void 0 : _b.h5ImgSrc;
-
-    if (data.hover.open && data.hover.backgroundType === 'new' && (hoverState || hoverImgSrc)) {
-      srcImg = isPc() ? data.hover.pcImgHoverUrl : data.hover.h5ImgHoverUrl;
-    }
-
-    if (window.magicDesign.isShop && (srcImg === null || srcImg === void 0 ? void 0 : srcImg.includes('ecommerce/static'))) {
-      srcImg = srcImg.replace('ecommerce/static', 'static');
-    }
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classNames('m-meta-image', {
-        backgroundImg: isBackground
-      }),
-      onClick: function () {
-        clickUrl(data.content.clickUrl);
-      }
-    }, srcImg && /*#__PURE__*/React__default.createElement("img", {
-      onMouseEnter: this.mouseEnterImg,
-      onMouseLeave: this.mouseLeaveImg,
-      src: srcImg,
-      style: this.getStyle()
-    }));
-  };
-
-  Image.defaultProps = {
-    data: {
-      content: {},
-      hover: {}
-    },
-    isBackground: false,
-    hoverState: false
-  };
-  Image = __decorate([metaDecorator], Image);
-  return Image;
-}(React__default.Component);
-
-export { Image as default };

package/src/components/meta-comp/components/Image/index.less.js

@@ -1,4 +0,0 @@
-import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".index_m-meta-image__6oFhF {\n  width: 100%;\n  height: 100%;\n}\n.index_m-meta-image__6oFhF > img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  transition: all 0.2s linear;\n  vertical-align: initial;\n}\n.index_m-meta-image__6oFhF.index_backgroundImg__-X-kA > img {\n  object-fit: cover;\n}\n";
-styleInject(css_248z);

package/src/components/meta-comp/components/Text/index.less.js

@@ -1,4 +0,0 @@
-import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".index_m-meta-text__4g6d0 {\n  display: block;\n}\n.index_m-meta-text__4g6d0 .index_select-container__tUvJE {\n  position: relative;\n}\n.index_m-meta-text__4g6d0 .index_select-container__tUvJE .index_close-wrap__IItPw {\n  user-select: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border: 1px dashed #cccccc;\n}\n.index_m-meta-text__4g6d0 .index_select-container__tUvJE .index_close-wrap__IItPw .index_magic-box-iconfont__8UEh8 {\n  position: absolute;\n  top: 0;\n  right: 0;\n  font-size: 21px;\n  transform: translate(50%, -50%);\n  color: #ffffff;\n  text-shadow: 1px 1px 4px #000;\n}\n.index_m-meta-text__4g6d0 .index_select-container__tUvJE .index_close-wrap__IItPw .index_magic-box-iconfont__8UEh8:hover {\n  color: #f46868;\n  cursor: pointer;\n}\n";
-styleInject(css_248z);

package/src/components/meta-comp/config-panels/BaseConfig.js

@@ -1,47 +0,0 @@
-import { __extends } from '../../../../node_modules/tslib/tslib.es6.js';
-import React__default, { Component } from 'react';
-import { renderPreview } from '../../utils/coreUtil.js';
-
-var BaseConfig =
-/** @class */
-function (_super) {
-  __extends(BaseConfig, _super);
-
-  function BaseConfig() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-    /**
-     *重新渲染展示区域
-     */
-
-
-    _this.reRenderViewArea = function () {
-      renderPreview();
-    };
-    /**
-     * 重新渲染一级配置面板
-     */
-
-
-    _this.reRenderConfig = function () {};
-    /**
-     * 重新渲染当前面板
-     */
-
-
-    _this.selfRender = function () {
-      _this.setState({});
-
-      _this.reRenderViewArea();
-    };
-
-    return _this;
-  }
-
-  BaseConfig.prototype.render = function () {
-    return /*#__PURE__*/React__default.createElement("div", null, "BaseMetaComponent");
-  };
-
-  return BaseConfig;
-}(Component);
-
-export { BaseConfig as default };