@fonixtree/magic-design 0.0.16 → 0.0.17

package/dist/src/components/composite-comp/bol/components/Banner/index.js

@@ -0,0 +1,34 @@
+import { __extends, __decorate } from '../../../../../../my_my_node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import BannerPc from './pc/index.js';
+import BannerMobile from './mobile/index.js';
+import { getDefaultJSON } from './defaultJSON.js';
+import compositeDecorator from '../../../../decorator/compositeDecorator.js';
+
+var Banner =
+/** @class */
+function (_super) {
+  __extends(Banner, _super);
+
+  function Banner() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  Banner.prototype.render = function () {
+    var nodeData = this.props.nodeData; // console.log('---banner', nodeData);
+
+    return /*#__PURE__*/React__default.createElement("div", null, window.magicDesign.device === 'pc' ? /*#__PURE__*/React__default.createElement(BannerPc, {
+      data: nodeData
+    }) : /*#__PURE__*/React__default.createElement(BannerMobile, {
+      data: nodeData
+    }));
+  };
+
+  Banner.defaultProps = {};
+  Banner.type = 'BANNER';
+  Banner.getDefaultJSON = getDefaultJSON;
+  Banner = __decorate([compositeDecorator], Banner);
+  return Banner;
+}(Component);
+
+export { Banner as default };

package/dist/src/components/composite-comp/bol/components/Banner/mobile/index.js

@@ -0,0 +1,176 @@
+import { __extends } from '../../../../../../../my_my_node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import classNames from '../../../../../../../my_my_node_modules/classnames/index.js';
+import { Carousel } from 'antd';
+import './index.less.js';
+import { store } from '../../../../../mobx/index.js';
+import { isDesignMode } from '../../../../../utils/coreUtil.js';
+import { alignItemMap } from '../../../../../common/AlignSelector/index.js';
+import Text from '../../../../../meta-comp/components/Text/index.js';
+import Button from '../../../../../meta-comp/components/Button/index.js';
+import Image from '../../../../../meta-comp/components/Image/index.js';
+import { computeStyle } from '../../../../../utils/businessUtil.js';
+import { autorun } from 'mobx';
+
+var BannerMobile =
+/** @class */
+function (_super) {
+  __extends(BannerMobile, _super);
+
+  function BannerMobile() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      carouseIndex: 0,
+      hoverState: false,
+      clickedGroup: ''
+    };
+    _this.carouselRef = /*#__PURE__*/React__default.createRef();
+    _this.destroy = null;
+
+    _this.bannerGoto = function (groupSource) {
+      var nextIndex = groupSource.findIndex(function (item) {
+        return item.id === store.clickedGroup;
+      });
+
+      if (nextIndex != -1 && nextIndex != _this.state.carouseIndex) {
+        _this.carouselRef.current.goTo(nextIndex);
+      }
+    };
+
+    _this.getItemStyle = function (item) {
+      var data = _this.props.data;
+      return {
+        justifyContent: alignItemMap[item.customize.layout],
+        height: data.setting.mobileHeight
+      };
+    };
+
+    _this.mouseEnterWrap = function () {
+      _this.setState({
+        hoverState: true
+      });
+    };
+
+    _this.mouseLeaveWrap = function () {
+      _this.setState({
+        hoverState: false
+      });
+    };
+
+    return _this;
+  }
+
+  BannerMobile.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.destroy = autorun(function () {
+      _this.bannerGoto(_this.props.data.groupSource);
+    });
+  };
+
+  BannerMobile.prototype.componentWillReceiveProps = function (nextProps) {
+    this.bannerGoto(nextProps.data.groupSource);
+  };
+
+  BannerMobile.prototype.componentWillUnmount = function () {
+    this.destroy();
+  };
+
+  BannerMobile.prototype.render = function () {
+    var _this = this;
+
+    var data = this.props.data;
+    var _a = this.state,
+        carouseIndex = _a.carouseIndex,
+        hoverState = _a.hoverState,
+        clickedGroup = _a.clickedGroup;
+    var autoplay = data.setting.autoplay.open;
+    /** 设计器模式下 如果选中特定group 自动播放关闭 */
+
+    if (isDesignMode() && clickedGroup) {
+      autoplay = false;
+    }
+
+    var wrapStyle = computeStyle(data, window.magicDesign.device);
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "m-banner-mobile",
+      style: wrapStyle
+    }, /*#__PURE__*/React__default.createElement(Carousel, {
+      ref: this.carouselRef,
+      afterChange: function (n) {
+        return _this.setState({
+          carouseIndex: n
+        });
+      },
+      autoplay: autoplay,
+      autoplaySpeed: data.setting.autoplay.interval * 1000,
+      dots: false
+    }, data.groupSource.map(function (item, index) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: item.id
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "carouselItem",
+        onMouseEnter: _this.mouseEnterWrap,
+        onMouseLeave: _this.mouseLeaveWrap,
+        style: _this.getItemStyle(item)
+      }, item.image.open && /*#__PURE__*/React__default.createElement(Image, {
+        data: item.image,
+        hoverState: hoverState && carouseIndex === index,
+        isBackground: true,
+        style: {
+          position: 'absolute',
+          ZIndex: 1,
+          inset: '0px',
+          height: '100%'
+        }
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "carouseContent",
+        style: {
+          alignItems: alignItemMap[item.customize.align]
+        }
+      }, item.title.open && /*#__PURE__*/React__default.createElement(Text, {
+        className: "title",
+        data: item.title
+      }), item.text.open && /*#__PURE__*/React__default.createElement(Text, {
+        className: "sub-title",
+        data: item.text
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "btn-wrap"
+      }, item.button.open && /*#__PURE__*/React__default.createElement(Button, {
+        className: "btn",
+        data: item.button
+      }), item.secondButton.open && /*#__PURE__*/React__default.createElement(Button, {
+        className: "btn",
+        data: item.secondButton
+      })))));
+    })), data.setting.dots.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "swiper-ban"
+    }, data.groupSource.length > 1 && data.groupSource.map(function (item, i) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: classNames('ban', {
+          active: i == carouseIndex
+        }),
+        onClick: function () {
+          var _a;
+
+          return (_a = _this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.goTo(i);
+        },
+        style: {
+          backgroundColor: i == carouseIndex ? data.setting.dots.hoverColor : data.setting.dots.color,
+          fontSize: i == carouseIndex ? data.setting.dots.hoverSize : data.setting.dots.size
+        }
+      });
+    })));
+  };
+
+  BannerMobile.defaultProps = {
+    data: {
+      setting: {},
+      groupSource: []
+    }
+  };
+  return BannerMobile;
+}(React__default.Component);
+
+export { BannerMobile as default };

package/dist/src/components/composite-comp/bol/components/Banner/mobile/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../../my_my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_m-banner-mobile__-pLQc {\n  position: relative;\n}\n.index_m-banner-mobile__-pLQc .index_carouselItem__60C1U {\n  height: 386px;\n  position: relative;\n  display: flex;\n}\n.index_m-banner-mobile__-pLQc .index_carouselItem__60C1U .index_carouseContent__QROKR {\n  padding: 80px 28px 0;\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: auto;\n}\n.index_m-banner-mobile__-pLQc .index_carouselItem__60C1U .index_title__9gBzo {\n  margin-bottom: 8px;\n}\n.index_m-banner-mobile__-pLQc .index_carouselItem__60C1U .index_sub-title__IzStK {\n  margin-bottom: 20px;\n}\n.index_m-banner-mobile__-pLQc .index_carouselItem__60C1U .index_btn-wrap__zgVTO {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n.index_m-banner-mobile__-pLQc .index_carouselItem__60C1U .index_btn-wrap__zgVTO .index_btn__jkzPm {\n  margin-right: 12px;\n}\n.index_m-banner-mobile__-pLQc .index_swiper-ban__cckJN {\n  position: absolute;\n  width: 100%;\n  bottom: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.index_m-banner-mobile__-pLQc .index_swiper-ban__cckJN .index_ban__3LkkJ {\n  font-size: 16px;\n  width: 1.5em;\n  height: 0.3em;\n  background: #FFF;\n  cursor: inherit;\n  margin-right: 0.3em;\n  transition: all 0.5s;\n}\n.index_m-banner-mobile__-pLQc .index_swiper-ban__cckJN .index_ban__3LkkJ.index_active__Nn5EX {\n  width: 1.5em;\n  opacity: 1;\n}\n";
+styleInject(css_248z);

package/dist/src/components/composite-comp/bol/components/Banner/pc/index.js

@@ -0,0 +1,254 @@
+import { __extends } from '../../../../../../../my_my_node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import classNames from '../../../../../../../my_my_node_modules/classnames/index.js';
+import { Carousel } from 'antd';
+import './index.less.js';
+import Text from '../../../../../meta-comp/components/Text/index.js';
+import Button from '../../../../../meta-comp/components/Button/index.js';
+import Image from '../../../../../meta-comp/components/Image/index.js';
+import { isDesignMode } from '../../../../../utils/coreUtil.js';
+import { store } from '../../../../../mobx/index.js';
+import { alignItemMap } from '../../../../../common/AlignSelector/index.js';
+import '../../../../../common/LayoutSelector/index.js';
+import '../../../../../common/Field/index.js';
+import '../../../../../common/UrlPicker/index.js';
+import Iconfont from '../../../../../common/Iconfont/index.js';
+import '../../../../../common/Button/index.js';
+import '../../../../../common/Collapse/index.js';
+import '../../../../../common/ColorPickerInput/index.js';
+import '../../../../../common/ImagePicker/index.js';
+import '../../../../../common/IconPicker/index.js';
+import '../../../../../common/SwitchCollapse/index.js';
+import '../../../../../common/Slider/index.js';
+import '../../../../../common/FontStyles/index.js';
+import '../../../../../common/ButtonIconLayout/index.js';
+import 'axios';
+import '../../../../../../../my_my_node_modules/qs/lib/stringify.js';
+import '../../../../../../../my_my_node_modules/qs/lib/utils.js';
+import '../../../../../common/ProductModal/index.js';
+import '../../../../../common/ProductSource/index.less.js';
+import { computeStyle } from '../../../../../utils/businessUtil.js';
+import { autorun } from 'mobx';
+
+// @observer
+
+var BannerPc =
+/** @class */
+function (_super) {
+  __extends(BannerPc, _super);
+
+  function BannerPc() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      carouseIndex: 0,
+      hoverState: false
+    };
+    _this.carouselRef = /*#__PURE__*/React__default.createRef();
+    _this.destroy = null;
+
+    _this.bannerGoto = function (groupSource) {
+      var nextIndex = groupSource.findIndex(function (item) {
+        return item.id === store.clickedGroup;
+      });
+
+      if (nextIndex != -1 && nextIndex != _this.state.carouseIndex) {
+        _this.carouselRef.current.goTo(nextIndex);
+      }
+    };
+
+    _this.mouseEnterWrap = function () {
+      _this.setState({
+        hoverState: true
+      });
+    };
+
+    _this.mouseLeaveWrap = function () {
+      _this.setState({
+        hoverState: false
+      });
+    };
+
+    _this.mouseEnterBtn = function (e) {
+      var _a, _b;
+
+      var data = _this.props.data;
+
+      if ((_a = data.setting.navigation) === null || _a === void 0 ? void 0 : _a.hoverColor) {
+        e.target.style.color = data.setting.navigation.hoverColor;
+      }
+
+      if ((_b = data.setting.navigation) === null || _b === void 0 ? void 0 : _b.hoverSize) {
+        e.target.style.fontSize = data.setting.navigation.hoverSize;
+      }
+    };
+
+    _this.mouseLeaveBtn = function (e) {
+      var _a, _b;
+
+      var data = _this.props.data;
+
+      if ((_a = data.setting.navigation) === null || _a === void 0 ? void 0 : _a.color) {
+        e.target.style.color = data.setting.navigation.color;
+      }
+
+      if ((_b = data.setting.navigation) === null || _b === void 0 ? void 0 : _b.size) {
+        e.target.style.fontSize = data.setting.navigation.size;
+      }
+    };
+
+    _this.getBgStyle = function (item) {
+      var data = _this.props.data;
+      var bgStyle = {
+        justifyContent: alignItemMap[item.customize.layout]
+      };
+
+      if (item.background.bgType === 'color') {
+        bgStyle.opacity = item.background.opacity ? item.background.opacity / 100 : 1;
+        bgStyle.backgroundColor = item.background.color;
+      } else {
+        bgStyle.backgroundImage = "url(".concat(item.background.image, ")");
+      }
+
+      if (data.setting.pcHeight) bgStyle.height = data.setting.pcHeight;
+      return bgStyle;
+    };
+
+    return _this;
+  }
+
+  BannerPc.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.destroy = autorun(function () {
+      _this.bannerGoto(_this.props.data.groupSource);
+    });
+  };
+
+  BannerPc.prototype.componentWillReceiveProps = function (nextProps) {
+    this.bannerGoto(nextProps.data.groupSource);
+  };
+
+  BannerPc.prototype.componentWillUnmount = function () {
+    this.destroy();
+  };
+
+  BannerPc.prototype.render = function () {
+    var _this = this;
+
+    var data = this.props.data;
+    var _a = this.state,
+        carouseIndex = _a.carouseIndex,
+        hoverState = _a.hoverState;
+    var navStyle = {
+      fontSize: data.setting.navigation.size,
+      color: data.setting.navigation.color
+    };
+    var autoplay = data.setting.autoplay.open;
+    /** 设计器模式下 如果选中特定group 自动播放关闭 */
+
+    if (isDesignMode() && store.clickedGroup) {
+      autoplay = false;
+    }
+
+    var wrapStyle = computeStyle(data, window.magicDesign.device);
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "m-banner-pc",
+      style: wrapStyle
+    }, data.setting.navigation.open && /*#__PURE__*/React__default.createElement(Iconfont, {
+      className: "turnPage leftBtn",
+      onClick: function () {
+        _this.carouselRef.current.prev();
+      },
+      onMouseEnter: this.mouseEnterBtn,
+      onMouseLeave: this.mouseLeaveBtn,
+      style: navStyle,
+      type: "icon-outlined-left"
+    }), /*#__PURE__*/React__default.createElement(Carousel, {
+      ref: this.carouselRef,
+      afterChange: function (n) {
+        return _this.setState({
+          carouseIndex: n
+        });
+      },
+      autoplay: autoplay,
+      autoplaySpeed: data.setting.autoplay.interval * 1000,
+      dots: false
+    }, data.groupSource.map(function (item, index) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: item.id
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "carouselItem",
+        onMouseEnter: _this.mouseEnterWrap,
+        onMouseLeave: _this.mouseLeaveWrap,
+        style: _this.getBgStyle(item)
+      }, item.image.open && /*#__PURE__*/React__default.createElement(Image, {
+        data: item.image,
+        hoverState: hoverState && carouseIndex === index,
+        isBackground: true,
+        style: {
+          position: 'absolute',
+          zIndex: 1,
+          inset: '0px',
+          height: '100%'
+        }
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "carouseContent",
+        style: {
+          alignItems: alignItemMap[item.customize.align]
+        }
+      }, item.title.open && /*#__PURE__*/React__default.createElement(Text, {
+        className: "title",
+        data: item.title
+      }), item.text.open && /*#__PURE__*/React__default.createElement(Text, {
+        className: "sub-title",
+        data: item.text
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "btn-wrap"
+      }, item.button.open && /*#__PURE__*/React__default.createElement(Button, {
+        className: "btn",
+        data: item.button
+      }), item.secondButton.open && /*#__PURE__*/React__default.createElement(Button, {
+        className: "btn",
+        data: item.secondButton
+      })))));
+    })), data.setting.dots.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "swiper-ban"
+    }, data.groupSource.length > 1 && data.groupSource.map(function (item, i) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: i,
+        className: classNames('ban', {
+          active: i == carouseIndex
+        }),
+        onClick: function () {
+          var _a;
+
+          return (_a = _this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.goTo(i);
+        },
+        style: {
+          backgroundColor: i == carouseIndex ? data.setting.dots.hoverColor : data.setting.dots.color,
+          fontSize: i == carouseIndex ? data.setting.dots.hoverSize : data.setting.dots.size
+        }
+      });
+    })), data.setting.navigation.open && /*#__PURE__*/React__default.createElement(Iconfont, {
+      className: "turnPage rightBtn",
+      onClick: function () {
+        _this.carouselRef.current.next();
+      },
+      onMouseEnter: this.mouseEnterBtn,
+      onMouseLeave: this.mouseLeaveBtn,
+      style: navStyle,
+      type: "icon-outlined-right"
+    }));
+  };
+
+  BannerPc.defaultProps = {
+    data: {
+      setting: {},
+      groupSource: []
+    }
+  };
+  return BannerPc;
+}(React__default.Component);
+
+export { BannerPc as default };

package/dist/src/components/composite-comp/bol/components/Banner/pc/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../../my_my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_m-banner-pc__2B6sk {\n  position: relative;\n}\n.index_m-banner-pc__2B6sk .index_swiper-ban__Qin-o {\n  position: absolute;\n  width: 100%;\n  bottom: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.index_m-banner-pc__2B6sk .index_swiper-ban__Qin-o .index_ban__QUyn5 {\n  font-size: 16px;\n  width: 1em;\n  height: 0.3em;\n  background: #FFF;\n  cursor: inherit;\n  margin-right: 0.3em;\n  transition: all 0.5s;\n}\n.index_m-banner-pc__2B6sk .index_swiper-ban__Qin-o .index_ban__QUyn5.index_active__BQfgr {\n  width: 1.5em;\n  opacity: 1;\n}\n.index_m-banner-pc__2B6sk .index_turnPage__E56Ka {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 3;\n  cursor: pointer;\n}\n.index_m-banner-pc__2B6sk .index_leftBtn__vz0jN {\n  left: 20px;\n}\n.index_m-banner-pc__2B6sk .index_rightBtn__8I75P {\n  right: 20px;\n}\n.index_m-banner-pc__2B6sk .index_carouselItem__6x9q3 {\n  height: 360px;\n  display: flex;\n  position: relative;\n}\n.index_m-banner-pc__2B6sk .index_carouselItem__6x9q3 .index_carouseContent__UdT6C {\n  padding: 100px 80px 0;\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: auto;\n}\n.index_m-banner-pc__2B6sk .index_carouselItem__6x9q3 .index_title__effje {\n  margin-bottom: 8px;\n}\n.index_m-banner-pc__2B6sk .index_carouselItem__6x9q3 .index_sub-title__nykUG {\n  margin-bottom: 20px;\n}\n.index_m-banner-pc__2B6sk .index_carouselItem__6x9q3 .index_btn-wrap__Ya144 {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n.index_m-banner-pc__2B6sk .index_carouselItem__6x9q3 .index_btn-wrap__Ya144 .index_btn__scvxl {\n  margin-right: 12px;\n  cursor: pointer;\n}\n";
+styleInject(css_248z);

package/dist/src/components/composite-comp/bol/components/Button/defaultJSON.js

@@ -0,0 +1,93 @@
+import { __assign } from '../../../../../../my_my_node_modules/tslib/tslib.es6.js';
+import uuid_1 from '../../../../../../my_my_node_modules/uuid/index.js';
+
+/**
+ * 获取 text 元组件json
+ */
+
+var getDefaultMetaButtonJson = function () {
+  return {
+    id: uuid_1.v4(),
+    open: true,
+    content: {
+      backgroundColor: '#2F54EB'
+    },
+    buttonText: {
+      sizeType: 'Customize font styles',
+      fontFamily: 'Open Sans',
+      fontWeight: 400,
+      fontSize: 14,
+      fontStyle: 'normal',
+      color: '#fff',
+      padding: '10px 26px'
+    },
+    buttonBorder: {
+      open: true,
+      borderColor: '',
+      borderRadius: 6
+    },
+    buttonIcon: {
+      iconUrl: '',
+      layout: 'right'
+    },
+    spacing: {
+      pc: {},
+      mobile: {}
+    },
+    text: 'Button',
+    hover: null
+  };
+};
+
+var getDefaultJSON = function () {
+  return {
+    id: uuid_1.v4(),
+    type: 'BUTTON',
+    content: {
+      button: __assign({}, getDefaultMetaButtonJson()),
+      secondaryButton: __assign(__assign({}, getDefaultMetaButtonJson()), {
+        content: {
+          backgroundColor: '#fff'
+        },
+        buttonText: {
+          sizeType: 'Customize font styles',
+          fontFamily: 'Open Sans',
+          fontWeight: 400,
+          fontSize: 14,
+          fontStyle: 'normal',
+          color: '#2F54EB',
+          padding: '10px 26px'
+        },
+        buttonBorder: {
+          open: true,
+          borderColor: '#2F54EB',
+          borderRadius: 6
+        }
+      })
+    },
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    customize: {
+      layout: 'layout1',
+      align: 'center'
+    },
+    background: {
+      opacity: 100,
+      color: '#F2F2F2',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+export { getDefaultJSON };

package/dist/src/components/composite-comp/bol/components/Button/index.js

@@ -0,0 +1,48 @@
+import { __extends, __decorate } from '../../../../../../my_my_node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import classNames from '../../../../../../my_my_node_modules/classnames/index.js';
+import { getDefaultJSON } from './defaultJSON.js';
+import '../../../../meta-comp/components/Text/index.js';
+import Button$1 from '../../../../meta-comp/components/Button/index.js';
+import '../../../../meta-comp/components/Image/index.js';
+import compositeDecorator from '../../../../decorator/compositeDecorator.js';
+import { computeStyle } from '../../../../utils/businessUtil.js';
+import './index.less.js';
+
+var Button =
+/** @class */
+function (_super) {
+  __extends(Button, _super);
+
+  function Button() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  Button.prototype.render = function () {
+    var _a;
+
+    var nodeData = this.props.nodeData;
+    var wrapStyle = computeStyle(nodeData, window.magicDesign.device);
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('button-comp-wrap', (_a = {}, _a[nodeData.customize.layout] = true, _a[nodeData.customize.align] = true, _a)),
+      onClick: this.onComponentClick,
+      style: wrapStyle
+    }, nodeData.content.button.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "first-button"
+    }, /*#__PURE__*/React__default.createElement(Button$1, {
+      data: nodeData.content.button
+    })), nodeData.content.secondaryButton.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "secondary-button"
+    }, /*#__PURE__*/React__default.createElement(Button$1, {
+      data: nodeData.content.secondaryButton
+    })));
+  };
+
+  Button.defaultProps = {};
+  Button.type = 'BUTTON';
+  Button.getDefaultJSON = getDefaultJSON;
+  Button = __decorate([compositeDecorator], Button);
+  return Button;
+}(Component);
+
+export { Button as default };

package/dist/src/components/composite-comp/bol/components/Button/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../my_my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_button-comp-wrap__xD8m3 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.index_button-comp-wrap__xD8m3 .index_first-button__mKq1h {\n  margin: 5px;\n}\n.index_button-comp-wrap__xD8m3 .index_secondary-button__4fb2s {\n  margin: 5px;\n}\n.index_button-comp-wrap__xD8m3.index_layout1__G8bpJ {\n  flex-direction: column;\n}\n.index_button-comp-wrap__xD8m3.index_layout1__G8bpJ.index_left__X0dHK {\n  align-items: flex-start;\n}\n.index_button-comp-wrap__xD8m3.index_layout1__G8bpJ.index_center__Q7uzv {\n  align-items: center;\n}\n.index_button-comp-wrap__xD8m3.index_layout1__G8bpJ.index_right__e6uHf {\n  align-items: flex-end;\n}\n.index_button-comp-wrap__xD8m3.index_layout2__p4CKS {\n  flex-direction: row;\n}\n.index_button-comp-wrap__xD8m3.index_layout2__p4CKS.index_left__X0dHK {\n  justify-content: flex-start;\n}\n.index_button-comp-wrap__xD8m3.index_layout2__p4CKS.index_center__Q7uzv {\n  justify-content: center;\n}\n.index_button-comp-wrap__xD8m3.index_layout2__p4CKS.index_right__e6uHf {\n  justify-content: flex-end;\n}\n";
+styleInject(css_248z);