@fonixtree/magic-design 0.0.7 → 0.0.10

package/src/components/meta-comp/config-panels/TextConfig/index.js

@@ -0,0 +1,310 @@
+import { __extends, __assign } from '../../../../../node_modules/tslib/tslib.es6.js';
+import React__default, { Fragment } from 'react';
+import { Select } from 'antd';
+import './index.less.js';
+import '../../../common/LayoutSelector/index.js';
+import Field from '../../../common/Field/index.js';
+import UrlPicker from '../../../common/UrlPicker/index.js';
+import '../../../common/Iconfont/index.js';
+import '../../../common/Button/index.js';
+import '../../../common/AlignSelector/index.js';
+import CommonCollapse from '../../../common/Collapse/index.js';
+import ColorPickerInput from '../../../common/ColorPickerInput/index.js';
+import '../../../common/ImagePicker/index.js';
+import '../../../common/IconPicker/index.js';
+import '../../../common/SwitchCollapse/index.js';
+import SliderInput from '../../../common/Slider/index.js';
+import FontStyles from '../../../common/FontStyles/index.js';
+import '../../../common/ButtonIconLayout/index.js';
+import 'axios';
+import '../../../../../node_modules/qs/lib/stringify.js';
+import '../../../../../node_modules/qs/lib/utils.js';
+import '../../../common/ProductModal/index.js';
+import '../../../common/ProductSource/index.less.js';
+import SpacingConfig from '../../../composite-comp/common/config-panels/SpacingConfig/index.js';
+import { store } from '../../../mobx/index.js';
+import BaseConfig from '../BaseConfig.js';
+
+/** 预设字体样式 */
+
+var sizeTypeList = [{
+  key: 'Customize font styles'
+}, {
+  key: 'Headline 1',
+  fontFamily: 'Montserrat',
+  pcFontSize: 50,
+  fontSize: 68,
+  fontWeight: 600
+}, {
+  key: 'Headline 2',
+  fontFamily: 'Montserrat',
+  pcFontSize: 32,
+  fontSize: 42,
+  fontWeight: 600
+}, {
+  key: 'Headline 3',
+  fontFamily: 'Montserrat',
+  pcFontSize: 30,
+  fontSize: 38,
+  fontWeight: 600
+}, {
+  key: 'Title 1',
+  fontFamily: 'Montserrat',
+  pcFontSize: 28,
+  fontSize: 32,
+  fontWeight: 400
+}, {
+  key: 'Title 2',
+  fontFamily: 'Montserrat',
+  pcFontSize: 20,
+  fontSize: 24,
+  fontWeight: 400
+}, {
+  key: 'Title 3',
+  fontFamily: 'Montserrat',
+  pcFontSize: 18,
+  fontSize: 20,
+  fontWeight: 400
+}, {
+  key: 'Body 1',
+  fontFamily: 'Open Sans',
+  pcFontSize: 16,
+  fontSize: 18,
+  fontWeight: 400
+}, {
+  key: 'Body 2',
+  fontFamily: 'Open Sans',
+  pcFontSize: 14,
+  fontSize: 16,
+  fontWeight: 400
+}, {
+  key: 'Body 3',
+  fontFamily: 'Open Sans',
+  pcFontSize: 12,
+  fontSize: 14,
+  fontWeight: 400
+}];
+
+var TextConfig =
+/** @class */
+function (_super) {
+  __extends(TextConfig, _super);
+
+  function TextConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.onSizeTypeChange = function (v, obj) {
+      Object.assign(obj, sizeTypeMap[v]);
+    };
+
+    return _this;
+  }
+
+  TextConfig.prototype.componentDidMount = function () {
+    window.document.addEventListener('text-render', this.selfRender);
+  };
+
+  TextConfig.prototype.componentWillUnmount = function () {
+    window.document.removeEventListener('text-render', this.selfRender);
+  };
+
+  TextConfig.prototype.render = function () {
+    var _this = this;
+
+    var data = this.props.data;
+    var textData = store.textSelection ? store.textSelection : data.content;
+
+    if (!data.spacing) {
+      data.spacing = {
+        pc: {},
+        mobile: {}
+      };
+    } // const textData = data.content;
+
+
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "m-text-config"
+    }, /*#__PURE__*/React__default.createElement(CommonCollapse // divider="dashed"
+    // headerSize="small"
+    , {
+      onRefresh: this.selfRender,
+      source: [{
+        key: '1',
+        name: 'Content',
+        value: /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(Field, {
+          title: "Font Style"
+        }, /*#__PURE__*/React__default.createElement(Select, {
+          onChange: function (v) {
+            if (v == 'Customize font styles') {
+              textData.sizeType = v;
+            } else {
+              var findOne = sizeTypeList.find(function (t) {
+                return t.key == v;
+              });
+              Object.assign(textData, __assign(__assign({}, findOne), {
+                sizeType: findOne === null || findOne === void 0 ? void 0 : findOne.key
+              }));
+            }
+
+            _this.selfRender();
+          },
+          value: textData.sizeType
+        }, sizeTypeList.map(function (sizeType) {
+          return /*#__PURE__*/React__default.createElement(Select.Option, {
+            key: sizeType.key,
+            value: sizeType.key
+          }, sizeType.key);
+        }))), textData.sizeType == 'Customize font styles' && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Field, {
+          title: "font Family"
+        }, /*#__PURE__*/React__default.createElement(Select, {
+          onChange: function (v) {
+            textData.fontFamily = v;
+
+            _this.selfRender();
+          },
+          value: textData.fontFamily
+        }, /*#__PURE__*/React__default.createElement(Select.Option, {
+          value: "Montserrat"
+        }, "Montserrat"), /*#__PURE__*/React__default.createElement(Select.Option, {
+          value: "Open Sans"
+        }, "Open Sans"))), /*#__PURE__*/React__default.createElement(Field, {
+          title: "font Weight"
+        }, /*#__PURE__*/React__default.createElement(Select, {
+          onChange: function (v) {
+            textData.fontWeight = v;
+
+            _this.selfRender();
+          },
+          value: textData.fontWeight
+        }, /*#__PURE__*/React__default.createElement(Select.Option, {
+          value: 400
+        }, "Regular"), /*#__PURE__*/React__default.createElement(Select.Option, {
+          value: 600
+        }, "Medium"))), /*#__PURE__*/React__default.createElement(Field, {
+          title: "Font Size"
+        }, /*#__PURE__*/React__default.createElement(SliderInput, {
+          onChange: function (_a) {
+            var count = _a.count;
+
+            if (window.magicDesign.device == 'pc') {
+              textData.pcFontSize = count;
+            } else {
+              textData.fontSize = count;
+            }
+
+            _this.selfRender();
+          },
+          unit: "px",
+          value: {
+            count: window.magicDesign.device == 'pc' ? textData.pcFontSize : textData.fontSize
+          }
+        }))), /*#__PURE__*/React__default.createElement(Field, {
+          title: ""
+        }, /*#__PURE__*/React__default.createElement(FontStyles, {
+          onChange: function (value) {
+            Object.assign(textData, value);
+
+            _this.selfRender();
+          },
+          showTextAlign: true,
+          value: textData
+        })), /*#__PURE__*/React__default.createElement(Field, {
+          split: true,
+          title: "URL"
+        }, /*#__PURE__*/React__default.createElement(UrlPicker, {
+          onChange: function (v) {
+            textData.clickUrl = v;
+
+            _this.selfRender();
+          },
+          value: data.content.clickUrl
+        })), /*#__PURE__*/React__default.createElement(Field, {
+          title: "Content Width"
+        }, /*#__PURE__*/React__default.createElement(SliderInput, {
+          maxVal: 1760,
+          minVal: 0,
+          onChange: function (_a) {
+            var count = _a.count;
+            textData.width = count;
+
+            _this.selfRender();
+          },
+          unit: "px",
+          value: {
+            count: textData.width
+          }
+        })))
+      }, {
+        key: '2',
+        name: 'Spacing',
+        value: /*#__PURE__*/React__default.createElement(SpacingConfig, {
+          data: data.spacing,
+          type: "button"
+        })
+      }, {
+        key: '3',
+        name: 'Underline Setting',
+        value: /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(Field, {
+          split: true,
+          title: "Underline Color"
+        }, /*#__PURE__*/React__default.createElement(ColorPickerInput, {
+          onChange: function (v) {
+            data.underline.textDecorationColor = v;
+
+            _this.selfRender();
+          },
+          value: data.underline.textDecorationColor
+        })), /*#__PURE__*/React__default.createElement(Field, {
+          title: "Underline Style"
+        }, /*#__PURE__*/React__default.createElement(Select, {
+          onChange: function (v) {
+            data.underline.textDecorationStyle = v;
+
+            _this.selfRender();
+          },
+          value: data.underline.textDecorationStyle
+        }, /*#__PURE__*/React__default.createElement(Select.Option, {
+          value: "solid"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "line-config line-solid",
+          dangerouslySetInnerHTML: {
+            __html: ' '.repeat(50)
+          }
+        })), /*#__PURE__*/React__default.createElement(Select.Option, {
+          value: "dashed"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "line-config dashed-line",
+          dangerouslySetInnerHTML: {
+            __html: ' '.repeat(50)
+          }
+        })), /*#__PURE__*/React__default.createElement(Select.Option, {
+          value: "double"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "line-config double-line",
+          dangerouslySetInnerHTML: {
+            __html: ' '.repeat(50)
+          }
+        })), /*#__PURE__*/React__default.createElement(Select.Option, {
+          value: "wavy"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "line-config wavy-line",
+          dangerouslySetInnerHTML: {
+            __html: ' '.repeat(50)
+          }
+        }))))),
+        metaOption: data.underline,
+        toggleType: 'checkbox'
+      }],
+      type: "arrow"
+    }));
+  };
+
+  TextConfig.defaultProps = {
+    data: null
+  };
+  return TextConfig;
+}(BaseConfig);
+
+export { TextConfig as default, sizeTypeList };

package/src/components/meta-comp/config-panels/TextConfig/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_m-text-config__G10fc {\n  display: flex;\n  flex-direction: column;\n  padding: 0 12px;\n  background-color: #F5F6F7;\n}\n.index_m-text-config__G10fc .index_line-config__E1EJs {\n  text-decoration-line: line-through;\n  text-decoration-color: #000;\n  font-size: 14px;\n  font-weight: 600;\n}\n.index_m-text-config__G10fc .index_line-solid__fpZMp {\n  text-decoration-style: solid;\n}\n.index_m-text-config__G10fc .index_dashed-line__up9Nm {\n  text-decoration-style: dashed;\n}\n.index_m-text-config__G10fc .index_double-line__WGcsB {\n  text-decoration-style: double;\n}\n.index_m-text-config__G10fc .index_wavy-line__WUvJg {\n  text-decoration-style: wavy;\n}\n";
+styleInject(css_248z);

package/src/components/mobx/Store.js

@@ -0,0 +1,88 @@
+import { makeObservable, observable, action } from 'mobx';
+
+var debug = require('debug')('worker:mobx');
+
+var Store =
+/** @class */
+function () {
+  function Store() {
+    this.hoveredMeta = ''; // hover的元组件Id
+
+    this.clickedMeta = ''; // 点击的元组件Id
+
+    this.clickedGroup = ''; // 点击的元组件组Id
+
+    this.clickedFloor = ''; // 点击的楼层Id
+
+    this.textSelection = null; // 文本元组件选中区域
+
+    this.MPageData = []; // 楼层数据
+
+    this.CarouselStore = {}; // 轮播组件暂存数据
+
+    makeObservable(this, {
+      hoveredMeta: observable,
+      clickedMeta: observable,
+      clickedGroup: observable,
+      clickedFloor: observable,
+      CarouselStore: observable,
+      setState: action.bound
+    });
+  }
+  /** 修改状态 */
+
+
+  Store.prototype.setState = function (data) {
+    var _this = this;
+
+    debug('magicDesign state', data);
+    var propertyList = Object.getOwnPropertyNames(data);
+    propertyList.forEach(function (field) {
+      _this[field] = data[field];
+    });
+  };
+  /**
+   *根据groupId 获取楼层Id
+   * @param id groupId
+   */
+
+
+  Store.prototype.getFloorIdByGroupId = function (id) {
+    var componentFloor = this.MPageData.find(function (floor) {
+      var _a;
+
+      var group = (_a = floor.groupSource) === null || _a === void 0 ? void 0 : _a.find(function (grp) {
+        return grp.id === id;
+      });
+      return !!group;
+    });
+    return componentFloor === null || componentFloor === void 0 ? void 0 : componentFloor.id;
+  };
+  /**
+   * 根据元组件Id 获取 楼层Id
+   * @param id
+   * @returns
+   */
+
+
+  Store.prototype.getFloorIdByMetaId = function (id) {
+    var componentFloor = this.MPageData.find(function (floor) {
+      var floorStr = JSON.stringify(floor);
+      return floorStr.includes(id);
+    });
+    return componentFloor.id;
+  };
+
+  Store.prototype.getFloorInfo = function () {
+    var _this = this;
+
+    var componentFloor = this.MPageData.find(function (floor) {
+      return floor.id === _this.clickedFloor;
+    });
+    return componentFloor;
+  };
+
+  return Store;
+}();
+
+export { Store };

package/src/components/mobx/index.js

@@ -0,0 +1,12 @@
+import { configure } from 'mobx';
+export * from 'mobx';
+import { Store } from './Store.js';
+
+/* 开启严格模式 */
+
+configure({
+  enforceActions: 'observed'
+});
+var store = new Store();
+
+export { store };

package/src/components/utils/androidUtil.js

@@ -0,0 +1,22 @@
+// 判断访问终端
+var browserVersion = function () {
+  var u = navigator.userAgent;
+  return {
+    trident: u.indexOf('Trident') > -1,
+    presto: u.indexOf('Presto') > -1,
+    webKit: u.indexOf('AppleWebKit') > -1,
+    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
+    mobile: !!u.match(/AppleWebKit.*Mobile.*/),
+    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
+    android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
+    iPhone: u.indexOf('iPhone') > -1,
+    iPad: u.indexOf('iPad') > -1,
+    webApp: u.indexOf('Safari') == -1,
+    weixin: u.indexOf('MicroMessenger') > -1,
+    qq: u.match(/\sQQ/i) == ' qq',
+    isApp: u.indexOf('app/CYLON-APP') > -1 // 是否为CYLON-APP
+
+  };
+};
+
+export { browserVersion };

package/src/components/utils/businessUtil.js

@@ -0,0 +1,214 @@
+import { urlType } from '../constants/index.js';
+
+var parseUrl = function (url) {
+  var h5Link = url;
+  var pcLink = url;
+  var params;
+
+  var _a = url.split('-'),
+      type = _a[0],
+      arg1 = _a[1],
+      arg2 = _a[2];
+
+  switch (type) {
+    // 商品详情
+    case urlType.PRODUCT_DETAIL:
+      pcLink = "/offer-detail/".concat(arg1);
+      h5Link = "/product/detail/".concat(arg1, "?productId=").concat(arg2 !== null && arg2 !== void 0 ? arg2 : '');
+      params = {
+        type: 'PROD_DETAIL',
+        data: {
+          offerId: arg1,
+          productId: arg2
+        }
+      };
+      break;
+
+    case urlType.CATG_PROD_LIST:
+      // 商品列表
+      pcLink = "/offer-list/catg/".concat(arg1);
+      h5Link = "/product/list/".concat(arg1);
+      params = {
+        type: 'PROD_LIST',
+        data: {
+          catgId: arg1
+        }
+      };
+      break;
+
+    case urlType.GIVEAWAY_MISSION:
+      // 零元购
+      pcLink = '';
+      h5Link = "/special-mission?campaignId=".concat(arg1);
+      params = {
+        type: 'GIVEAWAY_MISSION',
+        data: {
+          campaignId: arg1
+        }
+      };
+      break;
+
+    case urlType.CUSTOMIZED:
+      // 自定义页面
+      pcLink = "/promotion/".concat(arg1);
+      h5Link = "/group/".concat(arg1);
+      params = {
+        type: 'CUSTOMIZED',
+        data: {
+          url: "/group/".concat(arg1)
+        }
+      };
+      break;
+
+    case urlType.PROD_FILTER:
+      pcLink = '';
+      h5Link = "/product/list?".concat(arg1);
+      params = {
+        type: 'PROD_FILTER',
+        data: {
+          params: arg1
+        }
+      };
+      break;
+
+    case urlType.ANCHOR:
+      // document.getElementById(id) && document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
+      params = {
+        type: 'ANCHOR',
+        data: {
+          id: arg1
+        }
+      };
+      break;
+
+    case urlType.GET_COUPON:
+      // 领取优惠券
+      params = {
+        type: 'GET_COUPON',
+        data: {
+          couponId: arg1
+        }
+      };
+      break;
+
+    case '/spike':
+      params = {
+        type: 'FLASH_SHOP_MORE'
+      };
+      break;
+
+    default:
+      pcLink = url;
+      h5Link = url;
+      params = {
+        type: url
+      };
+  }
+
+  return {
+    pcLink: pcLink,
+    h5Link: h5Link,
+    params: params
+  };
+};
+/** 刷新预览区域 */
+
+var renderPreview = function () {
+  var evt = new Event('render-view', {
+    bubbles: false
+  });
+  window.document.dispatchEvent(evt);
+}; // 分类列表 数组转换成树结构
+
+var listToTree = function (list) {
+  var map = {};
+  var node;
+  var tree = [];
+
+  for (var i = 0; i < list.length; i++) {
+    map[list[i].catgId] = list[i];
+    list[i].children = list[i].isLeaf == 0 ? null : [];
+  }
+
+  for (var i = 0; i < list.length; i += 1) {
+    node = {
+      catgName: list[i].catgName,
+      title: list[i].catgName,
+      value: list[i].catgId,
+      key: list[i].catgId,
+      children: list[i].children
+    };
+
+    if (list[i].parentCatgId !== null) {
+      map[list[i].parentCatgId] && map[list[i].parentCatgId].children.push(node);
+    } else {
+      tree.push(node);
+    }
+  }
+
+  return tree;
+}; // 获取商品活动标签 包含秒杀、团规、满系
+
+var getPromotionList = function (offer) {
+  var PROMOTION_TYPE_MAP = {
+    2: 'SPECIAL PROMO',
+    4: 'Group',
+    C: 'Discount',
+    D: 'Discount',
+    G: 'Gift' // 满赠
+
+  };
+  var promotType = offer.promotType,
+      sppType = offer.sppType;
+  var typeList = []; // 满系
+
+  if (promotType) {
+    typeList = promotType.match(/(C|G|D)/g) || [];
+  } // 秒杀团购
+
+
+  if (sppType) {
+    typeList = typeList.concat(sppType.split(','));
+  }
+
+  var promotNames = typeList.map(function (type) {
+    return PROMOTION_TYPE_MAP[type];
+  });
+  return Array.from(new Set(promotNames));
+};
+var canNumber = function (value) {
+  if (isNaN(Number(value))) {
+    return value;
+  }
+
+  return Number(value);
+};
+/** 计算样式 */
+
+var computeStyle = function (_a, device) {
+  var background = _a.background,
+      spacing = _a.spacing;
+  var wrapStyle = {};
+
+  if (background) {
+    if (background.bgType === 'color') {
+      wrapStyle.backgroundColor = background.color;
+      wrapStyle.opacity = background.opacity ? background.opacity : 1;
+    } else {
+      wrapStyle.backgroundImage = "url(".concat(background.image, ")");
+      wrapStyle.backgroundPosition = 'center';
+    }
+  }
+
+  if (spacing) {
+    Object.keys(spacing[device]).forEach(function (key) {
+      if (!['', undefined].includes(spacing[device][key])) {
+        wrapStyle[key] = canNumber(spacing[device][key]);
+      }
+    });
+  }
+
+  return wrapStyle;
+};
+
+export { canNumber, computeStyle, getPromotionList, listToTree, parseUrl, renderPreview };