@fonixtree/magic-design 2.0.31 → 2.0.33

package/es/composite-comp/dito/config-panels/SignBoardConfig/SignBoardConfigContent/index.js

@@ -15,6 +15,8 @@ var _ImageConfig = _interopRequireDefault(require("../../../../../meta-comp/conf
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
+var _TextConfig = _interopRequireDefault(require("../../../../../meta-comp/config-panels/TextConfig"));
+
 var _locale = require("../../../../../locale");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -67,11 +69,9 @@ function (_super) {
   }
 
   SignBoardConfigContent.prototype.render = function () {
-    var _this = this;
-
     var panelProps = this.props.panelProps;
     var source = [{
-      key: 'search1',
+      key: 'logo',
       name: (0, _locale.i18n)('LOGO'),
       value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
         data: panelProps.logo
@@ -79,50 +79,12 @@ function (_super) {
       metaOption: panelProps.logo,
       toggleType: 'switch'
     }, {
-      key: 'search2',
-      name: (0, _locale.i18n)('SEARCH_BOX'),
-      value: /*#__PURE__*/_react["default"].createElement(_common.Field, {
-        style: {
-          marginTop: 20
-        },
-        title: (0, _locale.i18n)('COLOR')
-      }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
-        colorType: "rgba",
-        onChange: function onChange(v) {
-          if ((0, _coreUtil.isPc)()) {
-            panelProps.box.color.pc = v;
-          } else {
-            panelProps.box.color.mobile = v;
-          }
-
-          _this.selfRender();
-        },
-        value: (0, _coreUtil.isPc)() ? panelProps.box.color.pc : panelProps.box.color.mobile
-      })),
-      metaOption: panelProps.box,
-      toggleType: 'switch'
-    }, {
-      key: 'search3',
-      name: (0, _locale.i18n)('ICON'),
-      value: /*#__PURE__*/_react["default"].createElement(_common.Field, {
-        style: {
-          marginTop: 20
-        },
-        title: (0, _locale.i18n)('COLOR')
-      }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
-        colorType: "rgba",
-        onChange: function onChange(v) {
-          if ((0, _coreUtil.isPc)()) {
-            panelProps.icon.color.pc = v;
-          } else {
-            panelProps.icon.color.mobile = v;
-          }
-
-          _this.selfRender();
-        },
-        value: (0, _coreUtil.isPc)() ? panelProps.icon.color.pc : panelProps.icon.color.mobile
-      })),
-      metaOption: panelProps.icon,
+      key: 'title',
+      name: (0, _locale.i18n)('TITLE'),
+      value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
+        data: panelProps.title
+      }),
+      metaOption: panelProps.title,
       toggleType: 'switch'
     }];
     return /*#__PURE__*/_react["default"].createElement(_common.Collapse, {

package/es/composite-comp/dito/config-panels/SignBoardConfig/index.js

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _SignBoardConfigContent = _interopRequireDefault(require("./SignBoardConfigContent"));
+
 var _locale = require("../../../../locale");
 
 var _common = require("../../../../common");
@@ -57,8 +59,13 @@ function (_super) {
     return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
       divider: "bold",
       headerSize: "large",
-      source: [// { key: 'signBoard1', name: i18n('CONTENT'), value: <SignBoardConfigContent panelProps={data.content} /> },
-      {
+      source: [{
+        key: 'signBoard1',
+        name: (0, _locale.i18n)('CONTENT'),
+        value: /*#__PURE__*/_react["default"].createElement(_SignBoardConfigContent["default"], {
+          panelProps: data.content
+        })
+      }, {
         key: 'signBoard4',
         name: (0, _locale.i18n)('SPACING'),
         value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {

package/es/composite-comp/dito/second-config-panels/RecommendSecondConfig/AIRecommendation/index.js

@@ -228,8 +228,8 @@ function (_super) {
           this.setState({
             intelligentType: type,
             intelligentValue: []
-          });
-          this.getTypeData(type);
+          }); // this.getTypeData(type);
+
           this.props.onChange({
             intelligentType: type,
             intelligentValue: []
@@ -255,7 +255,7 @@ function (_super) {
               ];
               return [4
               /*yield*/
-              , (0, _commonUtil.commonFetch)("/designer/v1/" + window.magicDesign.MBaseUrl + "/offercatgs/list")];
+              , (0, _commonUtil.commonFetch)("/designer/v1/" + window.magicDesign.MBaseUrl + "/designer/resource/offercatgs/list")];
 
             case 1:
               res = _a.sent();

package/es/composite-comp/dito/second-config-panels/RecommendSecondConfig/index.js

@@ -81,6 +81,18 @@ function (_super) {
 
     _this.state = {};
 
+    _this.hasSource = function (type) {
+      if (!window.systemParams || !window.systemParams.recommendSource) {
+        return true;
+      }
+
+      if (window.systemParams.recommendSource && window.systemParams.recommendSource.includes(type)) {
+        return true;
+      }
+
+      return false;
+    };
+
     _this.getContentPanel = function () {
       var panelProps = _this.props.panelProps;
 
@@ -95,9 +107,9 @@ function (_super) {
           _this.selfRender();
         },
         value: panelProps.sourceType
-      }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+      }, _this.hasSource('P') && /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
         value: "select"
-      }, (0, _locale.i18n)('SELECT_PRODUCT')), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+      }, (0, _locale.i18n)('SELECT_PRODUCT')), _this.hasSource('A') && /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
         value: "recommend"
       }, (0, _locale.i18n)('AI_RECOMMENDATION')))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "greyBg"

package/es/core/Designer/LeftTitle/index.js

@@ -57,7 +57,7 @@ function (_super) {
   };
 
   LeftTitle.defaultProps = {
-    title: '邮件模板'
+    title: 'Email Template'
   };
   return LeftTitle;
 }(_react["default"].Component);

package/es/core/Designer/ToolBarModal/index.js

@@ -146,18 +146,30 @@ function (_super) {
         _this.props.quillRef.format('font', value);
       } else if (type == 'font-weight') {
         _this.props.quillRef.format('font-weight', value);
+      } else if (type == 'font-style') {
+        _this.props.quillRef.format('font-style', 'italic' === quillFormat['font-style'] ? '' : 'italic');
       } else if (type == 'font-family') {
         _this.props.quillRef.format('font-family', value);
       } else if (type == 'text-decoration-style') {
+        _this.props.quillRef.format('underline', true);
+
         _this.props.quillRef.format('text-decoration-style', value);
       } else if (type == 'bullet') {
         _this.props.quillRef.format('list-style-type', value);
 
-        _this.props.quillRef.format('list', 'bullet');
+        if (value === quillFormat['list-style-type']) {
+          _this.props.quillRef.format('list', '');
+        } else {
+          _this.props.quillRef.format('list', 'bullet');
+        }
       } else if (type == 'ordered') {
         _this.props.quillRef.format('list-style-type', value);
 
-        _this.props.quillRef.format('list', 'ordered');
+        if (value === quillFormat['list-style-type']) {
+          _this.props.quillRef.format('list', '');
+        } else {
+          _this.props.quillRef.format('list', 'ordered');
+        }
       } else if (type == 'text-decoration-color') {
         if (value) {
           _this.props.quillRef.format('underline', true);
@@ -269,9 +281,9 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "tool-item"
     }, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
-      active: quillFormat['italic'],
+      active: quillFormat['font-style'] === 'italic',
       onChange: function onChange() {
-        _this.onToolBtnClick('italic');
+        _this.onToolBtnClick('font-style');
       },
       type: "italic"
     })), /*#__PURE__*/_react["default"].createElement("div", {

package/es/core/Designer/index.js

@@ -510,6 +510,9 @@ function (_super) {
           break;
 
         case _constants.quickMenuCode.SAVE:
+          /** 如果保存则重置为mobile，同一移动端截图 #10504010 */
+          _this.onSwitchDevice(_constants.deviceTypeMap.PHONE);
+
           onSave(handleParams);
           break;
 

package/es/core/Renderer/index.js

@@ -78,18 +78,9 @@ var Renderer = function Renderer(props) {
   };
 
   (0, _react.useEffect)(function () {
-    // const data = await fishFetch('/h5/ga/mediaid', {}, 'GET');
-    (0, _commonUtil.importAsync)('https://www.googletagmanager.com/gtag/js?id=G-7B9GSSLVX3', 'js').then(function () {
-      window.dataLayer = window.dataLayer || [];
-
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-
-      gtag('js', new Date());
-      gtag('config', 'G-7B9GSSLVX3');
-      window.gtag = gtag;
-    });
+    console.log('----pageData change', pageData);
+  }, [pageData]);
+  (0, _react.useEffect)(function () {
     setTimeout(function () {
       var _a;
 
@@ -103,6 +94,7 @@ var Renderer = function Renderer(props) {
     className: "render_wrap",
     magic_design: "",
     style: {
+      height: '100%',
       background: pageBackground,
       overflow: 'auto'
     }

package/es/decorator/index.js

@@ -27,6 +27,7 @@ Object.defineProperty(exports, "metaDecorator", {
     return _metaDecorator["default"];
   }
 });
+exports.shouldUpdate = shouldUpdate;
 Object.defineProperty(exports, "updateConfigDecorator", {
   enumerable: true,
   get: function get() {
@@ -42,4 +43,26 @@ var _updateConfigDecorator = _interopRequireDefault(require("./updateConfigDecor
 
 var _lazyLoadDecorator = require("./lazyLoadDecorator");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+
+/** props 和 state 改变时才会render */
+function shouldUpdate() {
+  return function (target, name, descriptor) {
+    var fn = descriptor.value;
+
+    descriptor.value = function (nextProps, nextState) {
+      var nowPropsJson = JSON.stringify(nextProps);
+      var nowStateJson = JSON.stringify(nextState);
+      var should1 = nowPropsJson != this.preProps;
+      var should2 = nowStateJson != this.preState;
+      this.preProps = nowPropsJson;
+      this.preState = nowStateJson;
+      var result = should1 || should2;
+      return result && fn.apply(this, {
+        nextProps: nextProps
+      });
+    };
+  };
+}

package/es/locale/en/en.json

@@ -54,7 +54,7 @@
   "ADD_CLICKABLE_AREA": "Add Clickable Area",
   "ADD_AREA": "Add Area",
   "CLICKABLE_AREA": "Clickable Area",
-  "VOUCHER_SUCCESS": "Voucher received successfully!",
+  "VOUCHER_SUCCESS": "Coupon received successfully!",
   "NAVIGATION_NAME": "Navigation Name",
   "ADD_NAVIGATION": "Add Navigation",
   "SAVE": "Save",

package/es/locale/es/es.json

@@ -54,7 +54,7 @@
   "ADD_CLICKABLE_AREA": "Add Clickable Area",
   "ADD_AREA": "Add Area",
   "CLICKABLE_AREA": "Clickable Area",
-  "VOUCHER_SUCCESS": "Voucher received successfully!",
+  "VOUCHER_SUCCESS": "Coupon received successfully!",
   "NAVIGATION_NAME": "Navigation Name",
   "ADD_NAVIGATION": "Add Navigation",
   "SAVE": "Guardar",

package/es/locale/id/id.json

@@ -54,7 +54,7 @@
   "ADD_CLICKABLE_AREA": "Add Clickable Area",
   "ADD_AREA": "Add Area",
   "CLICKABLE_AREA": "Clickable Area",
-  "VOUCHER_SUCCESS": "Voucher received successfully!",
+  "VOUCHER_SUCCESS": "Coupon received successfully!",
   "NAVIGATION_NAME": "Navigation Name",
   "ADD_NAVIGATION": "Add Navigation",
   "SAVE": "Save",

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

@@ -93,6 +93,10 @@ function (_super) {
     return _this;
   }
 
+  Button.prototype.shouldComponentUpdate = function () {
+    return true;
+  };
+
   Button.prototype.render = function () {
     var _this = this;
 
@@ -168,6 +172,9 @@ function (_super) {
     className: '',
     readonly: false
   };
+
+  __decorate([(0, _decorator.shouldUpdate)()], Button.prototype, "shouldComponentUpdate", null);
+
   Button = __decorate([_decorator.metaDecorator], Button);
   return Button;
 }(_react.Component);

package/es/meta-comp/components/Text/formats/fontStyle.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FontStyleAttributor = exports.FontStyle = void 0;
+
+var _quill = _interopRequireDefault(require("quill"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var Parchment = _quill["default"]["import"]('parchment');
+
+var FontStyleAttributor =
+/** @class */
+function (_super) {
+  __extends(FontStyleAttributor, _super);
+
+  function FontStyleAttributor() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  return FontStyleAttributor;
+}(Parchment.Attributor.Style);
+
+exports.FontStyleAttributor = FontStyleAttributor;
+var FontStyle = new FontStyleAttributor('font-style', 'font-style', {
+  scope: Parchment.Scope.INLINE
+});
+exports.FontStyle = FontStyle;
+
+_quill["default"].register('formats/font-style', FontStyle, true);

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

@@ -17,6 +17,8 @@ require("./formats/fontFamily");
 
 require("./formats/textDecorationColor");
 
+require("./formats/fontStyle");
+
 require("./formats/listStyleTypeStyle");
 
 require("./formats/textDecorationStyle");
@@ -203,6 +205,10 @@ function (_super) {
     });
   };
 
+  Text.prototype.shouldComponentUpdate = function () {
+    return true;
+  };
+
   Text.prototype.render = function () {
     var _a = this.props,
         data = _a.data,
@@ -272,6 +278,9 @@ function (_super) {
     readonly: false,
     onTextInput: function onTextInput() {}
   };
+
+  __decorate([(0, _decorator.shouldUpdate)()], Text.prototype, "shouldComponentUpdate", null);
+
   Text = __decorate([_decorator.metaDecorator], Text);
   return Text;
 }(_react["default"].Component);

package/es/meta-comp/config-panels/ButtonConfig/index.js

@@ -11,6 +11,8 @@ var _antd = require("antd");
 
 require("./index.less");
 
+var _lodash = require("lodash");
+
 var _locale = require("../../../locale");
 
 var _SpacingConfig = _interopRequireDefault(require("../../../composite-comp/common/config-panels/SpacingConfig"));
@@ -104,11 +106,11 @@ function (_super) {
 
       _this.updateAttr(data, 'hover', {
         open: true,
-        buttonBorder: data.buttonBorder,
-        buttonIcon: data.buttonIcon,
-        buttonText: data.buttonText,
+        buttonBorder: (0, _lodash.cloneDeep)(data.buttonBorder),
+        buttonIcon: (0, _lodash.cloneDeep)(data.buttonIcon),
+        buttonText: (0, _lodash.cloneDeep)(data.buttonText),
         content: {
-          backgroundColor: data.content.backgroundColor
+          backgroundColor: (0, _lodash.cloneDeep)(data.content.backgroundColor)
         }
       }); // console.log('--ffd, button hover first click', data);
 
@@ -162,7 +164,7 @@ function (_super) {
 
     var fontSizeKey = window.magicDesign.device == 'pc' ? 'pcFontSize' : 'fontSize';
 
-    var ButtonTextSetting = function ButtonTextSetting(data) {
+    var ButtonTextSetting = function ButtonTextSetting(_data) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: (0, _locale.i18n)('FONT_STYLE')
       }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
@@ -171,24 +173,24 @@ function (_super) {
             return t.key == v;
           });
 
-          _extends(data, __assign(__assign({}, findOne), {
+          _extends(_data, __assign(__assign({}, findOne), {
             sizeType: findOne === null || findOne === void 0 ? void 0 : findOne.key
           }));
 
           _this.selfRender();
         },
-        value: data.sizeType
+        value: _data.sizeType
       }, _TextConfig.sizeTypeList.map(function (sizeType) {
         return /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
           value: sizeType.key
         }, sizeType.key);
-      }))), data.sizeType == 'Customize font styles' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      }))), _data.sizeType == 'Customize font styles' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: (0, _locale.i18n)('FONT_FAMILY')
       }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
         onChange: function onChange(v) {
-          _this.updateAttr(data, 'fontFamily', v);
+          _this.updateAttr(_data, 'fontFamily', v);
         },
-        value: data.fontFamily
+        value: _data.fontFamily
       }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
         value: "Montserrat"
       }, "Montserrat"), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
@@ -197,9 +199,9 @@ function (_super) {
         title: (0, _locale.i18n)('FONT_WEIGHT')
       }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
         onChange: function onChange(v) {
-          _this.updateAttr(data, 'fontWeight', v);
+          _this.updateAttr(_data, 'fontWeight', v);
         },
-        value: data.fontWeight
+        value: _data.fontWeight
       }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
         value: 400
       }, (0, _locale.i18n)('REGULAR')), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
@@ -210,34 +212,34 @@ function (_super) {
         onChange: function onChange(_a) {
           var count = _a.count;
 
-          _this.updateAttr(data, fontSizeKey, count);
+          _this.updateAttr(_data, fontSizeKey, count);
         },
         unit: "px",
         value: {
-          count: data[fontSizeKey]
+          count: _data[fontSizeKey]
         }
       }))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: ""
       }, /*#__PURE__*/_react["default"].createElement(_common.FontStyles, {
         onChange: function onChange(value) {
-          _extends(data, value);
+          _extends(_data, value);
 
           _this.selfRender();
         },
-        value: data
+        value: _data
       })));
     };
 
-    var ButtonBorderSetting = function ButtonBorderSetting(data) {
+    var ButtonBorderSetting = function ButtonBorderSetting(_data) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
         split: true,
         title: (0, _locale.i18n)('BORDER_COLOR')
       }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
         colorType: "rgba",
         onChange: function onChange(value) {
-          _this.updateAttr(data, 'borderColor', value);
+          _this.updateAttr(_data, 'borderColor', value);
         },
-        value: data.borderColor
+        value: _data.borderColor
       })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: (0, _locale.i18n)('BORDER_RADIUS')
       }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
@@ -245,15 +247,15 @@ function (_super) {
         onChange: function onChange(_a) {
           var count = _a.count;
 
-          _this.updateAttr(data, 'borderRadius', count);
+          _this.updateAttr(_data, 'borderRadius', count);
         },
         value: {
-          count: data.borderRadius
+          count: _data.borderRadius
         }
       })));
     };
 
-    var ButtonIconSetting = function ButtonIconSetting(data) {
+    var ButtonIconSetting = function ButtonIconSetting(_data) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: (0, _locale.i18n)('ICON')
       }, /*#__PURE__*/_react["default"].createElement(_common.IconPicker, {
@@ -262,18 +264,18 @@ function (_super) {
         },
         onClick: function onClick() {
           _this.setState({
-            isHover: data == _this.props.data.hover.buttonIcon
+            isHover: _data == _this.props._data.hover.buttonIcon
           });
         },
-        value: data.iconUrl
-      })), data.iconUrl && /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        value: _data.iconUrl
+      })), _data.iconUrl && /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: (0, _locale.i18n)('ICON_PLACEMENT')
       }, /*#__PURE__*/_react["default"].createElement(_common.ButtonIconLayout, {
-        icon: data.iconUrl,
+        icon: _data.iconUrl,
         onChange: function onChange(value) {
-          return _this.updateAttr(data, 'layout', value);
+          return _this.updateAttr(_data, 'layout', value);
         },
-        value: data.layout
+        value: _data.layout
       })));
     };
 

package/es/utils/commonUtil.js

@@ -7,7 +7,7 @@ exports.addZero = exports.addUrlQuery = void 0;
 exports.asyncDataURLtoImage = asyncDataURLtoImage;
 exports.checkFileName = exports.calcLastTime = exports.asyncNextTick = void 0;
 exports.commonFetch = commonFetch;
-exports.compatibleNewPageData = void 0;
+exports.convertCount = exports.compatibleNewPageData = void 0;
 exports.convertImageUrl = convertImageUrl;
 exports.convertToRem = void 0;
 exports.copy2ClipBoard = copy2ClipBoard;
@@ -776,7 +776,7 @@ var pxToRem = function pxToRem(styleObj) {
       if (typeof value === 'string' && value.endsWith('px')) {
         remObj[key] = convertToRem(value.split('px')[0]);
       } else if (typeof value === 'number') {
-        remObj[key] = ['opacity', 'lineHeight', 'zIndex'].includes(key) ? value : convertToRem(value);
+        remObj[key] = ['opacity', 'lineHeight', 'zIndex', 'fontWeight'].includes(key) ? value : convertToRem(value);
       } else if ((key === 'padding' || key === 'margin') && typeof value === 'string') {
         var paddingValues = value.split(' ');
         var remPaddingValues = paddingValues.map(function (paddingValue) {
@@ -884,4 +884,18 @@ var downloadBase64Image = function downloadBase64Image(base64String, filename) {
   link.click();
 };
 
-exports.downloadBase64Image = downloadBase64Image;
+exports.downloadBase64Image = downloadBase64Image;
+
+var convertCount = function convertCount(value) {
+  var newValue = value;
+
+  if (value >= 1000000) {
+    newValue = Number(value / 1000000).toFixed(1) + "M";
+  } else if (value >= 1000) {
+    newValue = Number(value / 1000).toFixed(1) + "K";
+  }
+
+  return newValue;
+};
+
+exports.convertCount = convertCount;