@fonixtree/magic-design 0.0.6 → 0.0.9

package/src/components/decorator/metaDecorator.js

@@ -0,0 +1,150 @@
+import { __extends, __rest } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import { store } from '../mobx/index.js';
+import { autorun } from '../../../node_modules/mobx/dist/mobx.esm.js';
+
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,113 @@
+import { __extends, __assign, __decorate } from '../../../../../node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import classNames from 'classnames';
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,121 @@
+import { __extends, __decorate } from '../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import classNames from 'classnames';
+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

@@ -0,0 +1,4 @@
+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);