@fonixtree/magic-design 0.0.17 → 0.0.18

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

@@ -0,0 +1,310 @@
+import { __extends, __assign } from '../../../../../my_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 '../../../../../my_node_modules/qs/lib/stringify.js';
+import '../../../../../my_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 '../../../../../my_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/utils/commonUtil.js

@@ -0,0 +1,240 @@
+import axios from 'axios';
+import lib from '../../../my_node_modules/qs/lib/index.js';
+
+/**
+ * 安全获取数据
+ * @param {function} func 获取函数
+ * @param {any} defaults 默认值
+ */
+
+function ensure(func, defaults) {
+  try {
+    return func() || defaults;
+  } catch (error) {
+    return defaults;
+  }
+}
+/**
+ * fish fetch
+ * @param {*} url 请求地址
+ * @param {*} data 入参
+ * @param {*} method 请求方法
+ */
+
+function commonFetch(url, data, method) {
+  if (data === void 0) {
+    data = {};
+  }
+
+  if (method === void 0) {
+    method = 'GET';
+  }
+
+  var _method = method.toUpperCase();
+
+  return new Promise(function (resolve) {
+    var _a, _b;
+
+    var isLoginUrl = url.includes('portal/login');
+    var headers = {
+      'Content-Type': isLoginUrl ? 'application/x-www-form-urlencoded' : 'application/json; charset=UTF-8'
+    };
+
+    if (_method === 'GET') {
+      if ((_a = window.magicDesign) === null || _a === void 0 ? void 0 : _a.fetch) {
+        window.magicDesign.fetch(url, {
+          method: 'GET',
+          params: data
+        }).then(function (res) {
+          resolve(res);
+        });
+        return;
+      }
+
+      axios.get(url, {
+        params: data,
+        headers: headers
+      }).then(function (res) {
+        resolve(res.data);
+      });
+    }
+
+    if (_method === 'POST') {
+      if ((_b = window.magicDesign) === null || _b === void 0 ? void 0 : _b.fetch) {
+        window.magicDesign.fetch(url, {
+          method: 'POST',
+          data: data
+        }).then(function (res) {
+          resolve(res);
+        });
+        return;
+      }
+
+      axios.post(url, isLoginUrl ? lib.stringify(data) : data, {
+        headers: headers
+      }).then(function (res) {
+        resolve(res.data);
+      });
+    }
+  });
+}
+var navigateTo = function (url) {
+  if (!window.magicDesign || !window.magicDesign.history) {
+    window.location.href = url;
+    return;
+  }
+
+  window.magicDesign.history.push(url);
+};
+var dragSource = function (source, from, to) {
+  var out = source.splice(from, 1);
+
+  if (from > to) {
+    source.splice(to, 0, out[0]);
+  } else {
+    source.splice(to, 0, out[0]);
+  }
+
+  return source;
+}; // 校验文件名称,不能存在 / \ ,
+
+var checkFileName = function (fileName) {
+  if (fileName === undefined || fileName === null || fileName === '') {
+    return false;
+  }
+
+  var reg = /[\\,/]+/;
+
+  if (reg.test(fileName)) {
+    return false;
+  }
+
+  return true;
+}; // 获取浏览器参数
+/**
+ * 补0 函数
+ * @param {*} num 数字
+ */
+
+var addZero = function (num) {
+  return String(num).length === 1 ? "0".concat(String(num)) : String(num);
+};
+/**
+ * 计算倒计时
+ * @param {number} lastTime 剩余时间 单位：毫秒
+ * @param {string?} type 'day' 以日为单位
+ * @returns
+ */
+
+var calcLastTime = function (lastTime, type) {
+  if (lastTime <= 0) {
+    return 0;
+  }
+
+  var day = ~~(lastTime / 1000 / 60 / 60 / 24);
+  var hours = ~~(lastTime / 1000 / 60 / 60);
+  var mines = ~~(lastTime / 1000 / 60 % 60);
+  var second = ~~(lastTime / 1000 % 60);
+
+  if (type === 'day') {
+    hours = ~~(lastTime / 1000 / 60 / 60 % 24);
+    return "".concat(day, "DAYS  ").concat(addZero(hours), ":").concat(addZero(mines), ":").concat(addZero(second));
+  }
+
+  if (type === '_hour') {
+    return hours;
+  }
+
+  if (type === '_mines') {
+    return mines;
+  }
+
+  return "".concat(addZero(hours), ":").concat(addZero(mines), ":").concat(addZero(second));
+};
+/**
+ * 获取图片URL
+ * @param {object} imageObj 图片对象
+ * @param {string?} type small | big
+ */
+
+function convertImageUrl(imageObj, type) {
+  if (imageObj === void 0) {
+    imageObj = {};
+  }
+
+  if (!imageObj) return '';
+  var typeMap = {
+    small: 'smallImgUrl',
+    big: 'bigImgUrl'
+  }[type];
+  return ensure(function () {
+    return encodeURI(imageObj[typeMap] || imageObj.url);
+  }, '');
+}
+/** 序列化 style对象 */
+
+var styleStringify = function (style, _a) {
+  var _b = _a === void 0 ? {} : _a,
+      _c = _b.suffix,
+      suffix = _c === void 0 ? 'px' : _c;
+
+  var numericProperties = ['height', 'width', 'top', 'left', 'right', 'bottom', 'fontSize', 'maxHeight', 'maxWidth', 'lineHeight', 'margin', 'marginTop', 'marginLeft', 'marginRight', 'marginBottom', 'padding', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom'];
+  return Object.keys(style).reduce(function (styleStr, key) {
+    var value = style[key];
+    if (value == null) return styleStr;
+    var needSuffix = numericProperties.includes(key) && typeof value === 'number';
+    var newName = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+    return "".concat(styleStr).concat(newName, ": ").concat(value).concat(needSuffix ? suffix : '', "; ");
+  }, '');
+};
+/** 十六进制色值转换成rgba */
+
+var getColorRgba = function (sHex, alpha) {
+  if (alpha === void 0) {
+    alpha = 1;
+  }
+
+  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+  var sColor = sHex.toLowerCase();
+
+  if (sColor && reg.test(sColor)) {
+    if (sColor.length === 4) {
+      var sColorNew = '#';
+
+      for (var i = 1; i < 4; i += 1) {
+        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+      }
+
+      sColor = sColorNew;
+    }
+
+    var sColorChange = [];
+
+    for (var i = 1; i < 7; i += 2) {
+      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
+    }
+
+    return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')';
+  } else {
+    return sColor;
+  }
+};
+/** url to image */
+
+function asyncDataURLtoImage(dataUrl) {
+  return new Promise(function (resolve, reject) {
+    var img = new Image();
+
+    img.onload = function () {
+      resolve(img);
+    };
+
+    img.onerror = function () {
+      reject(new Error('img error'));
+    };
+
+    img.src = dataUrl;
+  });
+}
+
+export { addZero, asyncDataURLtoImage, calcLastTime, checkFileName, commonFetch, convertImageUrl, dragSource, ensure, getColorRgba, navigateTo, styleStringify };

package/src/components/utils/coreUtil.js

@@ -0,0 +1,108 @@
+import uuid_1 from '../../../my_node_modules/uuid/index.js';
+import { parseUrl } from './businessUtil.js';
+import { navigateTo } from './commonUtil.js';
+import { browserVersion } from './androidUtil.js';
+
+var _this = undefined;
+var isDesignMode = function () {
+  return window.magicDesign.mode === 'designer';
+};
+var isPc = function () {
+  return window.magicDesign.device === 'pc';
+};
+/** 刷新预览区域 */
+
+var renderPreview = function () {
+  var evt = new Event('render-view', {
+    bubbles: false
+  });
+  window.document.dispatchEvent(evt);
+};
+var clickUrl = function (url) {
+  console.log('url', url);
+
+  if (window.magicDesign.readOnly || window.magicDesign.mode !== 'renderer' || !url) {
+    return;
+  }
+
+  var _a = parseUrl(url),
+      h5Link = _a.h5Link,
+      params = _a.params;
+
+  var type = params.type,
+      data = params.data; // 领取优惠券
+
+  if (type === 'GET_COUPON') {
+    _this.getCoupon(data.couponId);
+
+    return;
+  }
+
+  if (!browserVersion().isApp) {
+    if (url.startsWith('/')) {
+      navigateTo(url);
+    } else {
+      location.href = url;
+    }
+
+    return;
+  }
+
+  if (browserVersion().android) {
+    sendToAndroid({
+      type: 'jump',
+      params: {
+        url: h5Link
+      }
+    });
+  } else if (browserVersion().ios) {
+    if (type === 'CUSTOMIZED') {
+      // 适配ios 从首页跳转自定义页面
+      _this.goH5Page(h5Link);
+    }
+
+    sendToIos(params);
+  }
+};
+
+function isObject(value) {
+  var type = typeof value;
+  return value != null && (type === 'object' || type === 'function');
+} // 拷贝节点方法，重新生成节点中的id和parentId字段
+
+
+var copyNode = function (value, parentId) {
+  if (!isObject(value)) {
+    return value;
+  }
+
+  var isArr = Array.isArray(value);
+
+  if (isArr) {
+    var newArray_1 = [];
+    value.forEach(function (data) {
+      newArray_1.push(copyNode(data));
+    });
+    return newArray_1;
+  }
+
+  var newNode = {};
+
+  if (value.id) {
+    newNode.id = uuid_1.v4();
+  }
+
+  var names = Object.getOwnPropertyNames(value);
+  names.forEach(function (name) {
+    if (name === 'id') return;
+
+    if (name === 'parentId') {
+      newNode.parentId = parentId;
+    } else {
+      newNode[name] = copyNode(value[name], newNode.id);
+    }
+  });
+  return newNode;
+};
+
+export { clickUrl, copyNode, isDesignMode, isPc, renderPreview };