@fonixtree/magic-design 2.0.13 → 2.0.15

package/es/composite-comp/bol/components/Location/defaultJSON.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultJSON = void 0;
+
+var _uuid = require("uuid");
+
+var getDefaultJSON = function getDefaultJSON() {
+  return {
+    id: (0, _uuid.v4)(),
+    type: 'LOCATION',
+    content: {
+      logo: {
+        open: true,
+        color: '#fff'
+      },
+      address: {
+        open: true
+      },
+      icon: {
+        open: true,
+        color: '#fff'
+      }
+    },
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    customize: {
+      layout: {
+        pcLayout: 'top',
+        h5Layout: 'top'
+      }
+    },
+    background: {
+      opacity: 100,
+      color: '#fff',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+exports.getDefaultJSON = getDefaultJSON;

package/es/composite-comp/bol/components/Location/index.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultJSON = require("./defaultJSON");
+
+var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
+
+var _coreUtil = require("../../../../utils/coreUtil");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+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); }
+
+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 __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+  if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
+    if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  }
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+var CustomCode =
+/** @class */
+function (_super) {
+  __extends(CustomCode, _super);
+
+  function CustomCode() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.htmlTemp = ''; // createHtml = () => {
+    //   const { nodeData } = this.props;
+    //   const htmlCode = window.magicDesign.device === 'pc' ? nodeData.content.pcHtml : nodeData.content.h5Html;
+    //   this.htmlTemp = htmlCode;
+    //   if (document.getElementById('custom-wrap')) {
+    //     document.getElementById('custom-wrap').innerHTML = htmlCode;
+    //   }
+    // }
+
+    _this.handleClick = function (e) {
+      console.log(e.target.getAttribute('href'));
+      (0, _coreUtil.clickUrl)(e.target.getAttribute('href'));
+    };
+
+    return _this;
+  }
+
+  CustomCode.prototype.componentDidMount = function () {
+    var _this = this;
+
+    var aElements = document.querySelectorAll('#custom-wrap a');
+    aElements.forEach(function (element) {
+      element.addEventListener('click', _this.handleClick);
+    });
+  };
+
+  CustomCode.prototype.componentWillUnmount = function () {
+    var _this = this;
+
+    var aElements = document.querySelectorAll('#custom-wrap a');
+    aElements.forEach(function (element) {
+      element.removeEventListener('click', _this.handleClick);
+    });
+  }; // componentWillReceiveProps(prevProps) {
+  //   console.log('111111');
+  //   if (window.magicDesign.device === 'pc') {
+  //     console.log('22222222');
+  //     if (prevProps.nodeData.content.pcHtml != this.props.nodeData.content.pcHtml) {
+  //       console.log('4444444');
+  //       this.createHtml();
+  //     }
+  //   } else {
+  //     console.log('3333333333', this.htmlTemp, this.props.nodeData.content);
+  //     if (this.htmlTemp != this.props.nodeData.content.h5Html) {
+  //       console.log('5555555');
+  //       this.createHtml();
+  //     }
+  //   }
+  // }
+
+
+  CustomCode.prototype.render = function () {
+    var nodeData = this.props.nodeData;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      id: "custom-wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: window.magicDesign.device === 'pc' ? nodeData.content.pcHtml : nodeData.content.h5Html
+      }
+    }));
+  };
+
+  CustomCode.defaultProps = {};
+  CustomCode.type = 'LOCATION';
+  CustomCode.getDefaultJSON = _defaultJSON.getDefaultJSON;
+  CustomCode = __decorate([_compositeDecorator["default"]], CustomCode);
+  return CustomCode;
+}(_react.Component);
+
+var _default = CustomCode;
+exports["default"] = _default;

package/es/composite-comp/bol/config-panels/LocationConfig/MyEditor/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactAce = _interopRequireDefault(require("react-ace"));
+
+require("ace-builds/src-noconflict/mode-html");
+
+require("ace-builds/src-noconflict/mode-javascript");
+
+require("ace-builds/src-noconflict/theme-github");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// 可选的主题样式
+var MyEditor = function MyEditor(props) {
+  var value = props.value,
+      changeVal = props.changeVal,
+      blurArea = props.blurArea;
+  return /*#__PURE__*/_react["default"].createElement(_reactAce["default"], {
+    editorProps: {
+      $blockScrolling: true
+    },
+    mode: "html",
+    name: "editor",
+    onBlur: blurArea,
+    onChange: changeVal,
+    style: {
+      width: '100%'
+    },
+    theme: "github",
+    value: value
+  });
+};
+
+var _default = MyEditor;
+exports["default"] = _default;

package/es/composite-comp/bol/config-panels/LocationConfig/index.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _MyEditor = _interopRequireDefault(require("./MyEditor"));
+
+var _coreUtil = require("../../../../utils/coreUtil");
+
+var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
+
+var _BackgroundConfig = _interopRequireDefault(require("../../../common/config-panels/BackgroundConfig"));
+
+var _locale = require("../../../../locale");
+
+var _BaseConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/BaseConfig"));
+
+var _layout = require("../../../../constants/layout");
+
+var _CustomizeConfig = _interopRequireDefault(require("../../../common/config-panels/CustomizeConfig"));
+
+var _SpacingConfig = _interopRequireDefault(require("../../../common/config-panels/SpacingConfig"));
+
+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 CustomCodeConfig =
+/** @class */
+function (_super) {
+  __extends(CustomCodeConfig, _super);
+
+  function CustomCodeConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.changeVal = function (v) {
+      var data = _this.props.data;
+
+      if ((0, _coreUtil.isPc)()) {
+        data.content.pcHtml = v;
+      } else {
+        data.content.h5Html = v;
+      }
+    };
+
+    _this.blurArea = function () {
+      _this.selfRender();
+    };
+
+    return _this;
+  }
+
+  CustomCodeConfig.prototype.render = function () {
+    var data = this.props.data;
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
+      divider: "bold",
+      headerSize: "large",
+      source: [{
+        key: 'content',
+        name: (0, _locale.i18n)('CONTENT'),
+        value: /*#__PURE__*/_react["default"].createElement(_MyEditor["default"], {
+          blurArea: this.blurArea,
+          changeVal: this.changeVal,
+          value: (0, _coreUtil.isPc)() ? data.content.pcHtml : data.content.h5Html
+        })
+      }, {
+        key: 'spacing',
+        name: (0, _locale.i18n)('SPACING'),
+        value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
+          data: data.spacing
+        })
+      }, {
+        key: 'customize',
+        name: (0, _locale.i18n)('CUSTOMIZE'),
+        value: /*#__PURE__*/_react["default"].createElement(_CustomizeConfig["default"], {
+          data: data.customize,
+          layoutSource: _layout.locationLayout
+        })
+      }, {
+        key: 'background',
+        name: (0, _locale.i18n)('BACKGROUND'),
+        value: /*#__PURE__*/_react["default"].createElement(_BackgroundConfig["default"], {
+          data: data.background
+        })
+      }],
+      type: "triangle"
+    }));
+  };
+
+  return CustomCodeConfig;
+}(_BaseConfig["default"]);
+
+var _default = CustomCodeConfig;
+exports["default"] = _default;

package/es/composite-comp/dito/components/SearchBar/defaultJSON.js

@@ -45,6 +45,14 @@ var getDefaultJSON = function getDefaultJSON() {
         color: {
           pc: '#D92929',
           mobile: '#232F46'
+        },
+        cartIcon: {
+          pc: true,
+          mobile: true
+        },
+        messageIcon: {
+          pc: false,
+          mobile: true
         }
       }
     },

package/es/composite-comp/dito/components/SearchBar/mobile/index.js

@@ -197,7 +197,47 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      messageNum: ''
+      messageNum: '',
+      cartNum: ''
+    };
+
+    _this.getCartNum = function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var num;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              num = '';
+              if (!(localStorage.getItem('isLogin') === 'Y')) return [3
+              /*break*/
+              , 2];
+              return [4
+              /*yield*/
+              , (0, _commonUtil.commonFetch)('/designer/v1/h5/carts/num', {}, 'GET')];
+
+            case 1:
+              num = _a.sent();
+              return [3
+              /*break*/
+              , 3];
+
+            case 2:
+              num = (localStorage.getItem('TEMP_CART') || []).length;
+              _a.label = 3;
+
+            case 3:
+              if (num > 0) {
+                this.setState({
+                  cartNum: num
+                });
+              }
+
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
     };
 
     _this.getMessageNum = function () {
@@ -228,14 +268,19 @@ function (_super) {
   }
 
   SearchMobile.prototype.componentDidMount = function () {
+    // const { data } = this.props;
+    // console.log('---mobile ', data);
     this.getMessageNum();
+    this.getCartNum();
   };
 
   SearchMobile.prototype.render = function () {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
 
     var data = this.props.data;
-    var messageNum = this.state.messageNum; // let styleWrap = {};
+    var _q = this.state,
+        messageNum = _q.messageNum,
+        cartNum = _q.cartNum; // let styleWrap = {};
     // if (data.content.background.bgType === 'color') {
     //   styleWrap = {
     //     backgroundColor: data.content.background.color,
@@ -269,10 +314,24 @@ function (_super) {
         display: 'flex'
       },
       type: "icon-search2"
-    })), data.content && ((_f = data.content.icon) === null || _f === void 0 ? void 0 : _f.open) && /*#__PURE__*/_react["default"].createElement("div", {
+    })), data.content && ((_g = (_f = data.content.icon) === null || _f === void 0 ? void 0 : _f.cartIcon) === null || _g === void 0 ? void 0 : _g.mobile) && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "message-wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: (_j = (_h = data.content.icon) === null || _h === void 0 ? void 0 : _h.color) === null || _j === void 0 ? void 0 : _j.mobile,
+      onClick: function onClick() {
+        return (0, _coreUtil.clickUrl)('/main/cart');
+      },
+      size: (0, _commonUtil.convertToRem)(24),
+      style: {
+        display: 'flex'
+      },
+      type: "icon-ShoppingCartSimple1"
+    }), !!cartNum && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "num"
+    }, cartNum)), data.content && ((_l = (_k = data.content.icon) === null || _k === void 0 ? void 0 : _k.messageIcon) === null || _l === void 0 ? void 0 : _l.mobile) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "message-wrap"
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      color: (_h = (_g = data.content.icon) === null || _g === void 0 ? void 0 : _g.color) === null || _h === void 0 ? void 0 : _h.mobile,
+      color: (_o = (_m = data.content.icon) === null || _m === void 0 ? void 0 : _m.color) === null || _o === void 0 ? void 0 : _o.mobile,
       onClick: function onClick() {
         return (0, _coreUtil.clickUrl)('/message-center');
       },
@@ -280,10 +339,10 @@ function (_super) {
       style: {
         display: 'flex'
       },
-      type: "icon-ChatDots"
+      type: "icon-message"
     }), !!messageNum && /*#__PURE__*/_react["default"].createElement("span", {
       className: "num"
-    }, messageNum))), data.content && ((_j = data.content.logo) === null || _j === void 0 ? void 0 : _j.open) && /*#__PURE__*/_react["default"].createElement("div", {
+    }, messageNum))), data.content && ((_p = data.content.logo) === null || _p === void 0 ? void 0 : _p.open) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "logo"
     }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
       data: data.content.logo,

package/es/composite-comp/dito/components/SearchBar/pc/index.js

@@ -117,7 +117,7 @@ function (_super) {
         display: 'flex'
       },
       type: "icon-search2"
-    }))), data.content && data.content.icon.open && /*#__PURE__*/_react["default"].createElement("div", {
+    }))), data.content && data.content.icon.cartIcon.pc && /*#__PURE__*/_react["default"].createElement("div", {
       className: "shopping-wrap",
       onClick: function onClick() {
         return (0, _coreUtil.clickUrl)('/main/cart');
@@ -129,7 +129,7 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
       color: data.content.icon.color.pc,
       size: 16,
-      type: "icon-ShoppingCartSimple"
+      type: "icon-ShoppingCartSimple1"
     }), /*#__PURE__*/_react["default"].createElement("span", {
       className: "shopping-txt"
     }, (0, _locale.i18n)('SHOPPING_CART')))), data.content && data.content.logo.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {

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

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _antd = require("antd");
+
 var _common = require("../../../../../common");
 
 var _ImageConfig = _interopRequireDefault(require("../../../../../meta-comp/config-panels/ImageConfig"));
@@ -102,14 +104,14 @@ function (_super) {
       metaOption: panelProps.box,
       toggleType: 'switch'
     }, {
-      key: 'search3',
+      key: panelProps.icon.id,
       name: (0, _locale.i18n)('ICON'),
-      value: /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      toggleType: 'triangle',
+      value: /*#__PURE__*/_react["default"].createElement("div", {
         style: {
-          marginTop: 20
-        },
-        title: (0, _locale.i18n)('COLOR')
-      }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
+          marginTop: 10
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_common.Field, null, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
         colorType: "rgba",
         onChange: function onChange(v) {
           if ((0, _coreUtil.isPc)()) {
@@ -121,9 +123,37 @@ function (_super) {
           _this.selfRender();
         },
         value: (0, _coreUtil.isPc)() ? panelProps.icon.color.pc : panelProps.icon.color.mobile
-      })),
-      metaOption: panelProps.icon,
-      toggleType: 'switch'
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          background: '#F5F6F7',
+          padding: '14px 12px 1px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        layout: "horizontal",
+        title: (0, _locale.i18n)('CART_ICON')
+      }, /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
+        checked: (0, _coreUtil.isPc)() ? panelProps.icon.cartIcon.pc : panelProps.icon.cartIcon.mobile,
+        onChange: function onChange(e) {
+          if ((0, _coreUtil.isPc)()) {
+            panelProps.icon.cartIcon.pc = e.target.checked;
+          } else {
+            panelProps.icon.cartIcon.mobile = e.target.checked;
+          }
+
+          _this.selfRender();
+        }
+      })), !(0, _coreUtil.isPc)() && /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        layout: "horizontal",
+        title: (0, _locale.i18n)('MESSAGE_ICON')
+      }, /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
+        checked: panelProps.icon.messageIcon.mobile,
+        onChange: function onChange(e) {
+          panelProps.icon.messageIcon.mobile = e.target.checked;
+
+          _this.selfRender();
+        }
+      })))),
+      metaOption: panelProps.icon
     }];
     return /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
       headerSize: "middle",

package/es/core/Designer/TextEditModal/ToolBar/ToolBtn/components/AlignPicker/AlignSelectPicker/index.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _AlignLeftSVG = _interopRequireDefault(require("../images/AlignLeftSVG"));
+
+var _AlignCenterSVG = _interopRequireDefault(require("../images/AlignCenterSVG"));
+
+var _AlignRightSVG = _interopRequireDefault(require("../images/AlignRightSVG"));
+
+require("./index.less");
+
+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 AlignSelectPicker =
+/** @class */
+function (_super) {
+  __extends(AlignSelectPicker, _super);
+
+  function AlignSelectPicker() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  AlignSelectPicker.prototype.render = function () {
+    var _a = this.props,
+        visibility = _a.visibility,
+        value = _a.value,
+        _onChange = _a.onChange;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "align-select-picker-panel"
+    }, visibility && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "panel-bg"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "select-modal-content"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])('select-item', {
+        active: value == 'left'
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_AlignLeftSVG["default"], {
+      onChange: function onChange() {
+        return _onChange('');
+      }
+    })), /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])('select-item', {
+        active: value == 'center'
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_AlignCenterSVG["default"], {
+      onChange: function onChange() {
+        return _onChange('center');
+      }
+    })), /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])('select-item', {
+        active: value == 'right'
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_AlignRightSVG["default"], {
+      onChange: function onChange() {
+        return _onChange('right');
+      }
+    })))));
+  };
+
+  return AlignSelectPicker;
+}(_react["default"].Component);
+
+var _default = AlignSelectPicker;
+exports["default"] = _default;