@fonixtree/magic-design 0.0.17 → 0.0.18

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

@@ -0,0 +1,121 @@
+import { __extends, __assign, __decorate } from '../../../../../my_node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import classNames from '../../../../../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) {
+    var should1 = JSON.stringify(nextProps.data) != this.preData;
+    var should2 = window.magicDesign.device != this.preDevice;
+    var result = should1 || should2;
+    return result;
+  };
+
+  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);
+    this.preDevice = window.magicDesign.device;
+
+    var style = __assign(__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), {
+      fontSize: window.magicDesign.device == 'pc' ? data.buttonText.pcFontSize : data.buttonText.fontSize
+    });
+
+    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(__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), {
+        fontSize: window.magicDesign.device == 'pc' ? data.hover.buttonText.pcFontSize : data.hover.buttonText.fontSize
+      });
+      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 '../../../../../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

@@ -0,0 +1,133 @@
+import { __extends, __decorate } from '../../../../../my_node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import classNames from '../../../../../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()) {
+          if (data.content.pcImgWidth) obj.width = data.content.pcImgWidth;
+          if (data.content.pcImgHeight) obj.height = data.content.pcImgHeight;
+        } else {
+          if (data.content.h5ImgWidth) obj.width = data.content.h5ImgWidth;
+          if (data.content.h5ImgHeight) 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

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../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);

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

@@ -0,0 +1,385 @@
+import { __extends, __assign, __decorate, __spreadArray } from '../../../../../my_node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import classNames from '../../../../../my_node_modules/classnames/index.js';
+import { debounce, isEmpty } from 'lodash';
+import './index.less.js';
+import { convertIconClass } from '../../../common/Iconfont/index.js';
+import { store } from '../../../mobx/index.js';
+import metaDecorator from '../../../decorator/metaDecorator.js';
+import { computeStyle } from '../../../utils/businessUtil.js';
+import { isDesignMode } from '../../../utils/coreUtil.js';
+import { styleStringify } from '../../../utils/commonUtil.js';
+
+var contentStyle = function (content) {
+  return {
+    fontSize: window.magicDesign.device == 'pc' ? content.pcFontSize : content.fontSize,
+    fontFamily: content.fontFamily,
+    fontWeight: content.fontWeight,
+    fontStyle: content.fontStyle,
+    color: content.color,
+    backgroundColor: content.backgroundColor,
+    textAlign: content.textAlign,
+    width: window.magicDesign.device == 'mobile' ? '100%' : content.width || 'fit-content'
+  };
+};
+/** 从父级数组中 分离出 片段数组 */
+
+var calcSplitRange = function (parentRange, splitRange) {
+  if (parentRange[0] == splitRange[0]) {
+    if (parentRange[1] == splitRange[1]) {
+      return parentRange;
+    } else {
+      return [[parentRange[0], splitRange[1]], [splitRange[1], parentRange[1]]];
+    }
+  }
+
+  if (parentRange[1] == splitRange[1]) {
+    return [[parentRange[0], splitRange[0]], [splitRange[0], parentRange[1]]];
+  }
+
+  return [[parentRange[0], splitRange[0]], [splitRange[0], splitRange[1]], [splitRange[1], parentRange[1]]];
+};
+/** 驱动配置面板渲染 */
+
+
+var triggerTextConfigRender = function () {
+  window.document.dispatchEvent(new Event('text-render', {
+    bubbles: false
+  }));
+};
+/** 初始化监听事件 */
+
+
+var initSelectionEvent = function () {
+  if (!window.document.onselectionchange) {
+    window.document.onselectionchange = debounce(function (e) {
+      var _a;
+
+      var _b, _c, _d, _e;
+      /** 找到选中的text区域 并且注册过事件 */
+
+
+      var findSelectionTarget = window._selectionTarget.find(function (_a) {
+        var target = _a.target;
+        return target == e.target.activeElement;
+      });
+      /** 所有选中状态清楚 */
+
+
+      var clearSelection = function () {
+        store.setState({
+          textSelection: null
+        });
+        triggerTextConfigRender();
+      };
+
+      if (findSelectionTarget) {
+        var range = window.getSelection().getRangeAt(0);
+        var startOffset = range.startOffset,
+            endOffset = range.endOffset,
+            startContainer_1 = range.startContainer,
+            endContainer = range.endContainer;
+        /** 起始点=终点 取消 */
+
+        if (startOffset == endOffset) {
+          clearSelection();
+          return;
+        }
+        /** 如果全部选中 取消 */
+
+
+        if (startOffset == 0 && endOffset == findSelectionTarget.data.text.length) {
+          clearSelection();
+          return;
+        }
+        /** 判断起始点和结束点是否相同  */
+
+
+        if (startContainer_1 == endContainer) {
+          /** 如果还没有选中区域 */
+          if (findSelectionTarget.data.specialContent.length == 0) {
+            var nowRange_1 = [startOffset, endOffset].sort(function (a, b) {
+              return a - b;
+            });
+            var rangeList = calcSplitRange([0, findSelectionTarget.data.text.length], nowRange_1);
+            findSelectionTarget.data.specialContent = rangeList.map(function (range) {
+              return {
+                range: range,
+                content: {}
+              };
+            });
+            var findSelectionRange = (_b = findSelectionTarget.data.specialContent) === null || _b === void 0 ? void 0 : _b.find(function (c) {
+              return JSON.stringify(c.range) == JSON.stringify(nowRange_1);
+            });
+            store.setState({
+              textSelection: findSelectionRange.content
+            });
+          } else {
+            /** 如果已有选中区域 */
+            var nowRange_2 = [startOffset, endOffset].sort(function (a, b) {
+              return a - b;
+            });
+            var selectionRangeJSON_1 = Object.keys(findSelectionTarget.selectionRefMap).find(function (rangeTarget) {
+              return findSelectionTarget.selectionRefMap[rangeTarget] == startContainer_1.parentNode;
+            });
+            var findSelectionRangeTarget_1 = (_c = findSelectionTarget.data.specialContent) === null || _c === void 0 ? void 0 : _c.find(function (c) {
+              return JSON.stringify(c.range) == selectionRangeJSON_1;
+            });
+            /** 选中没配置过的区域 可以进行拆分 */
+
+            if (isEmpty(findSelectionRangeTarget_1.content)) {
+              /** 计算偏移值 */
+              nowRange_2[0] += findSelectionRangeTarget_1.range[0];
+              nowRange_2[1] += findSelectionRangeTarget_1.range[0];
+              /** 补充新的选中区域 */
+
+              if (JSON.stringify(findSelectionRangeTarget_1.range) != JSON.stringify(nowRange_2)) {
+                var rangeList = calcSplitRange(findSelectionRangeTarget_1.range, nowRange_2);
+                var nowContentIndex = (_d = findSelectionTarget.data.specialContent) === null || _d === void 0 ? void 0 : _d.findIndex(function (c) {
+                  return c == findSelectionRangeTarget_1;
+                });
+
+                (_a = findSelectionTarget.data.specialContent).splice.apply(_a, __spreadArray([nowContentIndex, 1], rangeList.map(function (range) {
+                  return {
+                    range: range,
+                    content: {}
+                  };
+                }), false));
+              }
+
+              var findSelectionRange = (_e = findSelectionTarget.data.specialContent) === null || _e === void 0 ? void 0 : _e.find(function (c) {
+                return JSON.stringify(c.range) == JSON.stringify(nowRange_2);
+              });
+              store.setState({
+                textSelection: findSelectionRange.content
+              });
+            } else {
+              /** 选中已经配置过的区域 不能拆分 */
+              store.setState({
+                textSelection: findSelectionRangeTarget_1.content
+              });
+            }
+          }
+        } else {
+          store.setState({
+            textSelection: null
+          });
+        }
+
+        findSelectionTarget.refresh();
+      }
+
+      triggerTextConfigRender();
+    }, 500);
+  }
+};
+/** 添加选择区域监听目标 */
+
+
+var appendSelectionTarget = function (data) {
+  if (!window._selectionTarget) {
+    window._selectionTarget = [__assign({}, data)];
+  } else {
+    window._selectionTarget.push(__assign({}, data));
+  }
+};
+/** 删除监听目标 */
+
+
+var deleteSelectionTarget = function (deleteTarget) {
+  window._selectionTarget = window._selectionTarget.filter(function (_a) {
+    var target = _a.target;
+    return target != deleteTarget;
+  });
+};
+
+var Text =
+/** @class */
+function (_super) {
+  __extends(Text, _super);
+
+  function Text() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+    /** 分割区域dom映射 */
+
+    _this.selectionRefMap = {};
+    _this.textRef = /*#__PURE__*/React__default.createRef();
+    /** 备份历史数据 比对不一致时渲染 */
+
+    _this.preData = '';
+    _this.preTextSelection = null;
+    /** 创建关闭图标按钮 */
+
+    _this.createHoverClose = function (node, onCloseClick) {
+      if (onCloseClick === void 0) {
+        onCloseClick = function () {};
+      }
+
+      node.className = 'select-container';
+      var closeNode = document.createElement('span');
+      closeNode.className = 'close-wrap';
+      closeNode.contentEditable = 'false';
+      var iconNode = document.createElement('span');
+      iconNode.contentEditable = 'false';
+      iconNode.className = convertIconClass('icon-close-circle');
+      iconNode.onclick = onCloseClick;
+      closeNode.appendChild(iconNode);
+      node.appendChild(closeNode);
+    };
+
+    _this.renderText = function (data) {
+      if (!_this.textRef.current) return;
+
+      _this.textRef.current.blur();
+      /** 保留历史数据 */
+
+
+      _this.preData = JSON.stringify(data);
+      _this.preTextSelection = store.textSelection;
+      _this.preDevice = window.magicDesign.device;
+      /** 渲染html */
+
+      if (data.specialContent.length == 0) {
+        _this.textRef.current.innerHTML = data.text;
+      } else {
+        _this.textRef.current.innerHTML = '';
+        data.specialContent.forEach(function (c, index) {
+          var _a;
+
+          var node = document.createElement('span');
+          node.style = styleStringify(contentStyle(c.content));
+          node.innerText = (_a = data.text).slice.apply(_a, c.range);
+          _this.selectionRefMap[JSON.stringify(c.range)] = node;
+
+          _this.textRef.current.appendChild(node);
+          /** 找到当前选中的区域 */
+
+
+          if (store.textSelection == c.content) {
+            /** 添加删除按钮 */
+            _this.createHoverClose(node, function () {
+              /** 第一步去除选中区域 */
+              store.setState({
+                textSelection: null
+              });
+              /** 清空区间配置 */
+
+              data.specialContent[index].content = {};
+              /** 合并区间无配置区间 */
+
+              for (var i = 0; i < data.specialContent.length - 1;) {
+                /** 如果本级和下级都是空值 那么合并 */
+                if (isEmpty(data.specialContent[i].content) && isEmpty(data.specialContent[i + 1].content)) {
+                  data.specialContent[i].range = [data.specialContent[i].range[0], data.specialContent[i + 1].range[1]];
+                  data.specialContent.splice(i + 1, 1);
+                } else {
+                  i += 1;
+                }
+              }
+
+              triggerTextConfigRender();
+            });
+          }
+        });
+      }
+      /** 清除无用的node */
+
+
+      Object.keys(_this.selectionRefMap).forEach(function (key) {
+        if (!data.specialContent.find(function (c) {
+          return JSON.stringify(c.range) == key;
+        })) {
+          Reflect.deleteProperty(_this.selectionRefMap, key);
+        }
+      });
+    };
+
+    return _this;
+  }
+
+  Text.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.renderText(this.props.data);
+    initSelectionEvent();
+    appendSelectionTarget({
+      target: this.textRef.current,
+      data: this.props.data,
+      selectionRefMap: this.selectionRefMap,
+      refresh: function () {
+        _this.renderText(_this.props.data);
+      }
+    });
+  };
+
+  Text.prototype.shouldComponentUpdate = function (nextProps) {
+    var should1 = JSON.stringify(nextProps.data) != this.preData;
+    var should2 = store.textSelection != this.preTextSelection;
+    var should3 = window.magicDesign.device != this.preDevice;
+    var result = should1 || should2 || should3;
+
+    if (result) {
+      this.renderText(nextProps.data);
+    }
+
+    return result;
+  };
+
+  Text.prototype.componentWillUnmount = function () {
+    deleteSelectionTarget(this.textRef.current);
+  };
+
+  Text.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props,
+        data = _a.data,
+        className = _a.className,
+        readonly = _a.readonly,
+        onTextInput = _a.onTextInput;
+
+    var style = __assign(__assign({}, contentStyle(data.content)), {
+      textDecorationLine: data.underline.open ? 'underline' : 'none',
+      textDecorationColor: data.underline.textDecorationColor,
+      textDecorationStyle: data.underline.textDecorationStyle
+    });
+
+    var wrapStyle = computeStyle(data, window.magicDesign.device);
+    return /*#__PURE__*/React__default.createElement("div", {
+      ref: this.textRef,
+      className: classNames('m-meta-text', className),
+      contentEditable: isDesignMode() && !readonly,
+      onInput: function (e) {
+        var text = e.target.textContent;
+        data.text = text;
+        /** 毁灭吧 累了 */
+
+        data.specialContent = [];
+        /** 主动更新历史数据避免render */
+
+        _this.preData = JSON.stringify(__assign(__assign({}, JSON.parse(_this.preData)), {
+          text: text
+        }));
+        /** 通知变更 */
+
+        onTextInput(text);
+      },
+      onKeyDown: function (e) {
+        e.stopPropagation();
+      },
+      style: __assign(__assign({}, style), wrapStyle),
+      suppressContentEditableWarning: true
+    });
+  };
+
+  Text.defaultProps = {
+    readonly: false,
+    onTextInput: function () {}
+  };
+  Text = __decorate([metaDecorator], Text);
+  return Text;
+}(React__default.Component);
+
+export { contentStyle, Text as default };

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

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../my_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);