@fonixtree/magic-design 0.0.13 → 0.0.16

package/src/components/decorator/compositeDecorator.js

@@ -1,94 +0,0 @@
-import { __extends } from '../../../my_my_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/decorator/metaDecorator.js

@@ -1,150 +0,0 @@
-import { __extends, __rest } from '../../../my_my_node_modules/tslib/tslib.es6.js';
-import React__default, { Component } from 'react';
-import { store } from '../mobx/index.js';
-import { autorun } from 'mobx';
-
-function metaDecorator(WrappedComponent) {
-  var Wrapper =
-  /** @class */
-  function (_super) {
-    __extends(Wrapper, _super);
-
-    function Wrapper() {
-      var _this = _super !== null && _super.apply(this, arguments) || this;
-
-      _this.state = {
-        clickedMeta: '',
-        hoveredMeta: ''
-      }; // 元组件点击事件
-
-      _this.onMetaClick = function (event) {
-        var _a, _b, _c;
-
-        if (window.magicDesign.mode === 'renderer') {
-          return;
-        } // 组织冒泡
-
-
-        event.preventDefault();
-        event.stopPropagation();
-        var parentId = (_a = _this.props.data) === null || _a === void 0 ? void 0 : _a.parentId;
-        var metaId = (_b = _this.props.data) === null || _b === void 0 ? void 0 : _b.id;
-        var floorId = null; // group中的元组件
-
-        if (parentId) {
-          floorId = store.getFloorIdByGroupId(parentId);
-        } else {
-          // 复合组件中的元组件
-          floorId = store.getFloorIdByMetaId(metaId);
-        }
-
-        store.setState({
-          clickedMeta: (_c = _this.props.data) === null || _c === void 0 ? void 0 : _c.id,
-          clickedGroup: parentId,
-          clickedFloor: floorId
-        });
-      };
-
-      _this.onMouseEnter = function () {
-        var _a;
-
-        if (window.magicDesign.mode === 'renderer') {
-          return;
-        }
-
-        store.setState({
-          hoveredMeta: (_a = _this.props.data) === null || _a === void 0 ? void 0 : _a.id
-        });
-      };
-
-      _this.onMouseLeave = function () {
-        if (window.magicDesign.mode === 'renderer') {
-          return;
-        }
-
-        store.setState({
-          hoveredMeta: ''
-        });
-      };
-
-      _this.isDesignerActive = function () {
-        var data = _this.props.data;
-        var _a = _this.state,
-            hoveredMeta = _a.hoveredMeta,
-            clickedMeta = _a.clickedMeta;
-        var isHover = (data === null || data === void 0 ? void 0 : data.id) === hoveredMeta;
-        var isClick = (data === null || data === void 0 ? void 0 : data.id) === clickedMeta;
-
-        if (window.magicDesign.mode === 'designer' && (isHover || isClick)) {
-          return true;
-        }
-
-        return false;
-      };
-
-      _this.getStyle = function () {
-        var _a = _this.state,
-            hoveredMeta = _a.hoveredMeta,
-            clickedMeta = _a.clickedMeta;
-        var data = _this.props.data;
-        var isHover = (data === null || data === void 0 ? void 0 : data.id) === hoveredMeta;
-        var isClick = (data === null || data === void 0 ? void 0 : data.id) === clickedMeta;
-        var style = {
-          boxSizing: 'border-box',
-          height: '100%'
-        };
-
-        if (window.magicDesign.mode === 'renderer') {
-          return style;
-        } else {
-          style.border = isHover || isClick ? '1px solid #2F54EB' : '1px solid transparent';
-          style.backgroundColor = isHover ? 'rgba(47,84,235,0.2)' : '';
-        }
-
-        return style;
-      };
-
-      return _this;
-    }
-
-    Wrapper.prototype.componentDidMount = function () {
-      var _this = this;
-
-      this.distroy = autorun(function () {
-        _this.setState({
-          clickedMeta: store.clickedMeta,
-          hoveredMeta: store.hoveredMeta
-        });
-      });
-    };
-
-    Wrapper.prototype.componentWillUnmount = function () {
-      this.distroy();
-    };
-
-    Wrapper.prototype.render = function () {
-      var _a = this.props,
-          className = _a.className,
-          style = _a.style,
-          rest = __rest(_a, ["className", "style"]);
-
-      var hoverStyle = this.getStyle();
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: className,
-        style: style
-      }, /*#__PURE__*/React__default.createElement("div", {
-        className: "meta_wrap",
-        onClick: this.onMetaClick,
-        onMouseEnter: this.onMouseEnter,
-        onMouseLeave: this.onMouseLeave,
-        style: hoverStyle
-      }, /*#__PURE__*/React__default.createElement(WrappedComponent, rest)));
-    };
-
-    return Wrapper;
-  }(Component);
-
-  return Wrapper;
-}
-
-export { metaDecorator 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 '../../../../../my_my_node_modules/tslib/tslib.es6.js';
-import React__default, { Component } from 'react';
-import classNames from '../../../../../my_my_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 '../../../../../my_my_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,133 +0,0 @@
-import { __extends, __decorate } from '../../../../../my_my_node_modules/tslib/tslib.es6.js';
-import React__default from 'react';
-import classNames from '../../../../../my_my_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,
-          limitWidthHeight = _a.limitWidthHeight;
-      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;
-      }
-
-      if (limitWidthHeight) {
-        if (isPc()) {
-          obj.width = data.content.pcImgWidth;
-          obj.height = data.content.pcImgHeight;
-        } else {
-          obj.width = data.content.h5ImgWidth;
-          obj.height = data.content.h5ImgHeight;
-        }
-      }
-
-      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,
-    limitWidthHeight: 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 '../../../../../my_my_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);