@fonixtree/magic-design 0.0.78 → 0.0.80

package/lib/meta-comp/components/Button/editable.js

@@ -0,0 +1,114 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./editable.less");
+
+var _coreUtil = require("../../../utils/coreUtil");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+/**
+ *  编辑button名称，被动触发元组件的hover事件时会刷新组件，导致contenteditable的光标位置初始化
+ */
+
+
+var editable =
+/** @class */
+function (_super) {
+  __extends(editable, _super);
+
+  function editable() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.preData = '';
+    _this.preDevice = '';
+    return _this;
+  }
+
+  editable.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;
+  };
+
+  editable.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props,
+        data = _a.data,
+        readonly = _a.readonly;
+    this.preData = JSON.stringify(data);
+    this.preDevice = window.magicDesign.device;
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: "item",
+      contentEditable: (0, _coreUtil.isDesignMode)() && !readonly,
+      onInput: function onInput(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);
+  };
+
+  return editable;
+}(_react.Component);
+
+var _default = editable;
+exports["default"] = _default;

package/lib/meta-comp/components/Button/editable.less

@@ -0,0 +1,6 @@
+.item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -11,7 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.less");
 
-var _businessUtil = require("../../../utils/businessUtil");
+var _editable = _interopRequireDefault(require("./editable"));
 
 var _coreUtil = require("../../../utils/coreUtil");
 
@@ -88,19 +88,9 @@ function (_super) {
     _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;
 
@@ -108,8 +98,7 @@ function (_super) {
 
     var _b = this.props,
         data = _b.data,
-        className = _b.className,
-        readonly = _b.readonly;
+        className = _b.className;
     var hover = this.state.hover;
     this.preData = JSON.stringify(data);
     this.preDevice = window.magicDesign.device;
@@ -122,6 +111,14 @@ function (_super) {
       fontSize: window.magicDesign.device == 'pc' ? data.buttonText.pcFontSize : data.buttonText.fontSize
     });
 
+    if (data.spacing) {
+      if (window.magicDesign.device == 'pc') {
+        style = __assign(__assign({}, style), data.spacing.pc);
+      } else {
+        style = __assign(__assign({}, style), data.spacing.mobile);
+      }
+    }
+
     var iconUrl = data.buttonIcon.iconUrl;
     var iconLayout = data.buttonIcon.layout;
 
@@ -137,22 +134,6 @@ function (_super) {
       iconLayout = data.hover.buttonIcon.layout;
     }
 
-    var btnText = /*#__PURE__*/_react["default"].createElement("span", {
-      className: "item",
-      contentEditable: (0, _coreUtil.isDesignMode)() && !readonly,
-      onInput: function onInput(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 = (0, _businessUtil.computeStyle)(data, window.magicDesign.device);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('m-meta-button', className),
       onClick: function onClick() {
@@ -168,16 +149,16 @@ function (_super) {
           hover: false
         });
       },
-      style: __assign(__assign({}, style), wrapStyle)
+      style: __assign({}, style)
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('btnContent', {
         horizontal: iconLayout === 'left' || iconLayout === 'right'
       })
-    }, (iconLayout === 'right' || iconLayout === 'bottom') && btnText, iconUrl && /*#__PURE__*/_react["default"].createElement("img", {
+    }, (iconLayout === 'right' || iconLayout === 'bottom') && /*#__PURE__*/_react["default"].createElement(_editable["default"], this.props), iconUrl && /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
-      className: "item",
+      className: "icon",
       src: iconUrl
-    }), (iconLayout === 'left' || iconLayout === 'top') && btnText));
+    }), (iconLayout === 'left' || iconLayout === 'top') && /*#__PURE__*/_react["default"].createElement(_editable["default"], this.props)));
   };
 
   Button.defaultProps = {

package/lib/meta-comp/components/Button/index.less

@@ -2,8 +2,9 @@
   transition: all 0.25s;
 
   .btnContent {
+    width: 100%;
     cursor: pointer;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
@@ -14,7 +15,7 @@
 
     img {
       height: 20px;
-      margin-right: 5px;
+      margin: 0 5px;
     }
   }
 }

package/lib/meta-comp/components/Image/index.js

@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.less");
 
+var _defaultImg = _interopRequireDefault(require("./image/default-img.png"));
+
 var _coreUtil = require("../../../utils/coreUtil");
 
 var _decorator = require("../../../decorator");
@@ -63,9 +65,11 @@ function (_super) {
   function Image() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
+    _this.imgRef = /*#__PURE__*/_react["default"].createRef();
     _this.state = {
       // 当仅作为一个图片时，鼠标移上去，hover状态
-      hoverImgSrc: false
+      hoverImgSrc: false,
+      scale: 1
     };
 
     _this.getStyle = function () {
@@ -82,14 +86,14 @@ function (_super) {
 
       if (data.hover.open && data.hover.backgroundType === 'enlarge' && (hoverState || hoverImgSrc)) {
         // return { transform: `scale(${data.hover.magnification})` };
-        obj.transform = "scale(" + data.hover.magnification / 2 + ")";
+        obj.transform = "scale(" + data.hover.magnification + ")";
       }
 
       if (maxHeight) {
         obj.maxHeight = maxHeight;
       }
 
-      if (maxWidth) {
+      if (maxWidth || maxWidth === 0) {
         obj.maxWidth = maxWidth;
       }
 
@@ -144,6 +148,8 @@ function (_super) {
   }
 
   Image.prototype.render = function () {
+    var _this = this;
+
     var _a, _b;
 
     var _c = this.props,
@@ -161,10 +167,11 @@ function (_super) {
 
     if (window.magicDesign.isShop && (srcImg === null || srcImg === void 0 ? void 0 : srcImg.includes('ecommerce/static'))) {
       srcImg = srcImg.replace('ecommerce/static', 'static');
-    } // if (!srcImg) {
-    //   srcImg = defaultImg;
-    // }
+    }
 
+    if (!srcImg) {
+      srcImg = _defaultImg["default"];
+    }
 
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('m-meta-image', {
@@ -173,12 +180,36 @@ function (_super) {
       onClick: function onClick() {
         (0, _coreUtil.clickUrl)(data.content.clickUrl);
       }
-    }, srcImg && /*#__PURE__*/_react["default"].createElement("img", {
+    }, srcImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
+      ref: this.imgRef,
+      onLoad: function onLoad() {
+        var scale = _this.imgRef.current.clientWidth / 600;
+
+        _this.setState({
+          scale: scale
+        });
+      },
       onMouseEnter: this.mouseEnterImg,
       onMouseLeave: this.mouseLeaveImg,
       src: srcImg,
       style: this.getStyle()
-    }));
+    }), data.content.areas && data.content.areas.length > 0 && data.content.areas.map(function (v, i) {
+      var aStyle = {
+        position: 'absolute',
+        top: parseInt(v.y * _this.state.scale),
+        left: parseInt(v.x * _this.state.scale),
+        width: parseInt(v.width * _this.state.scale),
+        height: parseInt(v.height * _this.state.scale)
+      };
+      return /*#__PURE__*/_react["default"].createElement("a", {
+        key: i,
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          (0, _coreUtil.clickUrl)(v.inputVal);
+        },
+        style: aStyle
+      });
+    })));
   };
 
   Image.defaultProps = {

package/lib/meta-comp/components/Image/index.less

@@ -1,21 +1,24 @@
 .m-meta-image {
+  position: relative;
   width: 100%;
   height: 100%;
   display: flex;
-  align-items: center;
   justify-content: center;
-
+  overflow: hidden;
   &>img {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    // object-fit: contain;
     transition: all .2s linear;
     vertical-align: initial;
+    max-width: 100%;
   }
 
   &.backgroundImg {
     &>img {
-      object-fit: cover;
+      // object-fit: cover;
+      width: auto;
+      max-width: none;
     }
   }
 }

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

@@ -17,8 +17,6 @@ var _Iconfont = require("../../../common/Iconfont");
 
 var _decorator = require("../../../decorator");
 
-var _businessUtil = require("../../../utils/businessUtil");
-
 var _coreUtil = require("../../../utils/coreUtil");
 
 var _mobx = require("../../../mobx");
@@ -96,6 +94,7 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
 };
 
 var contentStyle = function contentStyle(content) {
+  var baseWidth = (window.magicDesign.device == 'pc' ? content.pcWidth : content.width) || 100;
   return {
     fontSize: window.magicDesign.device == 'pc' ? content.pcFontSize : content.fontSize,
     fontFamily: content.fontFamily,
@@ -104,7 +103,8 @@ var contentStyle = function contentStyle(content) {
     color: content.color,
     backgroundColor: content.backgroundColor,
     textAlign: content.textAlign,
-    width: window.magicDesign.device == 'mobile' ? '100%' : content.width || 'fit-content'
+    // width: (window.magicDesign.device == 'pc' ? content.pcWidth :  content.width) || 'fit-content',
+    width: Math.min(baseWidth, 100) + "%"
   };
 };
 /** 从父级数组中 分离出 片段数组 */
@@ -258,7 +258,8 @@ var initSelectionEvent = function initSelectionEvent() {
         }
 
         findSelectionTarget.refresh();
-      }
+      } // todo 不知道干什么用的
+
 
       triggerTextConfigRender();
     }, 500);
@@ -431,14 +432,30 @@ function (_super) {
         className = _a.className,
         readonly = _a.readonly,
         onTextInput = _a.onTextInput;
+    var style = contentStyle(data.content);
+
+    if (data.underline) {
+      style = __assign(__assign({}, style), {
+        textDecorationLine: data.underline.open ? 'underline' : 'none',
+        textDecorationColor: data.underline.textDecorationColor,
+        textDecorationStyle: data.underline.textDecorationStyle
+      });
+    }
+
+    if (data === null || data === void 0 ? void 0 : data.spacing) {
+      if ((0, _coreUtil.isPc)()) {
+        style = __assign(__assign({}, style), data.spacing.pc);
+      } else {
+        style = __assign(__assign({}, style), data.spacing.mobile);
+      }
+    } // const style: React.CSSProperties = {
+    //   ...contentStyle(data.content),
+    //   textDecorationLine: data?.underline.open ? 'underline' : 'none',
+    //   textDecorationColor: data?.underline.textDecorationColor,
+    //   textDecorationStyle: data?.underline.textDecorationStyle,
+    // };
 
-    var style = __assign(__assign({}, contentStyle(data.content)), {
-      textDecorationLine: data.underline.open ? 'underline' : 'none',
-      textDecorationColor: data.underline.textDecorationColor,
-      textDecorationStyle: data.underline.textDecorationStyle
-    });
 
-    var wrapStyle = (0, _businessUtil.computeStyle)(data, window.magicDesign.device);
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.textRef,
       className: (0, _classnames["default"])('m-meta-text', className),
@@ -461,7 +478,7 @@ function (_super) {
       onKeyDown: function onKeyDown(e) {
         e.stopPropagation();
       },
-      style: __assign(__assign({}, style), wrapStyle),
+      style: __assign({}, style),
       suppressContentEditableWarning: true
     });
   };

package/lib/meta-comp/config-panels/BaseConfig.js

@@ -48,14 +48,6 @@ function (_super) {
 
   function BaseConfig() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
-    /**
-     *重新渲染展示区域
-     */
-
-
-    _this.reRenderViewArea = function () {
-      (0, _coreUtil.renderPreview)();
-    };
     /**
      * 重新渲染一级配置面板
      */
@@ -67,10 +59,16 @@ function (_super) {
      */
 
 
-    _this.selfRender = function () {
+    _this.selfRender = function (data) {
+      var changeHistory = true;
+
+      if (data && data.type === 'text-render') {
+        changeHistory = false;
+      }
+
       _this.setState({});
 
-      _this.reRenderViewArea();
+      (0, _coreUtil.renderPreview)(changeHistory);
     };
 
     return _this;

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

@@ -157,7 +157,7 @@ function (_super) {
         return /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
           value: sizeType.key
         }, sizeType.key);
-      }))), /*#__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) {
@@ -191,7 +191,7 @@ function (_super) {
         value: {
           count: data[fontSizeKey]
         }
-      })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      }))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: ""
       }, /*#__PURE__*/_react["default"].createElement(_common.FontStyles, {
         onChange: function onChange(value) {
@@ -301,7 +301,6 @@ function (_super) {
       name: (0, _locale.i18n)('SPACING'),
       value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
         configCompSpace: false,
-        configPaddingLR: true,
         data: data.spacing
       })
     }];

package/lib/meta-comp/config-panels/ImageConfig/AreaConfigModal/index.js

@@ -0,0 +1,164 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+var _common = require("../../../../common");
+
+require("./index.less");
+
+var _locale = require("../../../../locale");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
+    s += arguments[i].length;
+  }
+
+  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
+    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
+      r[k] = a[j];
+    }
+  }
+
+  return r;
+};
+
+var AreaConfigModal =
+/** @class */
+function (_super) {
+  __extends(AreaConfigModal, _super);
+
+  function AreaConfigModal() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      drawCoordinates: _this.props.value || []
+    };
+
+    _this.setCoordinate = function (coordinate, index, coordinates) {
+      _this.setState({
+        drawCoordinates: coordinates
+      });
+    };
+
+    _this.addArea = function () {
+      var drawCoordinates = _this.state.drawCoordinates;
+
+      var newCoordinates = __spreadArrays(drawCoordinates, [{
+        height: 50,
+        id: "Hyp_dBIiD" + drawCoordinates.length,
+        inputVal: '',
+        width: 100,
+        x: 54 + drawCoordinates.length * 10,
+        y: 38 + drawCoordinates.length * 10
+      }]);
+
+      _this.setState({
+        drawCoordinates: newCoordinates
+      });
+    };
+
+    _this.onOkClick = function () {
+      var onOk = _this.props.onOk;
+      var drawCoordinates = _this.state.drawCoordinates;
+      onOk(drawCoordinates);
+    };
+
+    return _this;
+  }
+
+  AreaConfigModal.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props,
+        visible = _a.visible,
+        onCancel = _a.onCancel;
+    var drawCoordinates = this.state.drawCoordinates;
+    return /*#__PURE__*/_react["default"].createElement(_antd.Modal, {
+      centered: true,
+      draggable: false,
+      onCancel: onCancel,
+      onOk: this.onOkClick,
+      title: "clickable Area",
+      visible: visible,
+      width: "auto"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "body_wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_common.ImgArea, {
+      coordinates: drawCoordinates,
+      onChange: this.setCoordinate,
+      onDelete: this.setCoordinate,
+      onSave: this.setCoordinate,
+      src: this.props.imgUrl,
+      width: "100%"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "area_config_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "btn_wrap",
+      onClick: this.addArea
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      size: 20,
+      type: "icon-add"
+    }), /*#__PURE__*/_react["default"].createElement("span", null, (0, _locale.i18n)('ADD_CLICKABLE_AREA'))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "list_wrap"
+    }, drawCoordinates.map(function (v, i) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "add_item"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "title"
+      }, "Clickable Area ", i + 1), /*#__PURE__*/_react["default"].createElement(_common.UrlPicker, {
+        onChange: function onChange(data) {
+          v.inputVal = data;
+
+          _this.setState({
+            drawCoordinates: __spreadArrays(drawCoordinates)
+          });
+        },
+        value: v.inputVal
+      }));
+    })))));
+  };
+
+  return AreaConfigModal;
+}(_react.Component);
+
+var _default = AreaConfigModal;
+exports["default"] = _default;