@fonixtree/magic-design 0.0.16 → 0.0.17

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

@@ -0,0 +1,208 @@
+import { extends as _extends } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { __extends } from '../../../../../../../my_my_node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import './index.less.js';
+import Slider from 'react-slick';
+import classNames from '../../../../../../../my_my_node_modules/classnames/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 { getColorRgba } from '../../../../../utils/commonUtil.js';
+import Iconfont from '../../../../../common/Iconfont/index.js';
+import '../../../../../../../my_my_node_modules/slick-carousel/slick/slick.css.js';
+import '../../../../../../../my_my_node_modules/slick-carousel/slick/slick-theme.css.js';
+
+var PC_IMG_SIZE = [{
+  w: 1072,
+  h: 662
+}, {
+  w: 500,
+  h: 393
+}, {
+  w: 330,
+  h: 256
+}, {
+  w: 240,
+  h: 188
+}, {
+  w: 190,
+  h: 147
+}, {
+  w: 158,
+  h: 126
+}];
+
+var CarouselPc =
+/** @class */
+function (_super) {
+  __extends(CarouselPc, _super);
+
+  function CarouselPc() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      sliderIndex: 0
+    };
+    _this.sliderRef = /*#__PURE__*/React__default.createRef();
+
+    _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;
+      }
+    };
+
+    return _this;
+  }
+
+  CarouselPc.prototype.componentWillReceiveProps = function (nextProps) {
+    if (nextProps.data.setting.autoplay.open) {
+      this.sliderRef.slickPlay();
+    } else {
+      this.sliderRef.slickPause();
+    }
+  };
+
+  CarouselPc.prototype.render = function () {
+    var _this = this;
+
+    var data = this.props.data;
+    var sliderIndex = this.state.sliderIndex;
+    var showText = data.customize.layout === 'layout2';
+    var colNum = showText ? 1 : Math.min(data.customize.pcRowNum, data.groupSource.length);
+    var bgStyle = {};
+
+    if (data.background.bgType === 'color') {
+      bgStyle = {
+        backgroundColor: getColorRgba(data.background.color || '#fff', data.background.opacity / 100 || 1)
+      };
+    } else {
+      bgStyle = {
+        background: "url(".concat(data.background.image, ") no-repeat center"),
+        backgroundSize: '100%'
+      };
+    }
+
+    var settings = {
+      className: 'slider-wrap',
+      arrows: false,
+      dots: false,
+      autoplay: data.setting.autoplay.open,
+      autoplaySpeed: data.setting.autoplay.interval * 1000,
+      speed: 500,
+      slidesToShow: colNum,
+      slidesToScroll: colNum,
+      beforeChange: function (oldIndex, newIndex) {
+        _this.setState({
+          sliderIndex: newIndex
+        });
+      }
+    };
+    var navStyle = {
+      fontSize: data.setting.navigation.size,
+      color: data.setting.navigation.color
+    };
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "m-carousel-pc",
+      style: bgStyle
+    }, data.setting.navigation.open && /*#__PURE__*/React__default.createElement(Iconfont, {
+      className: "carousel-icon-left",
+      onClick: function () {
+        return _this.sliderRef.slickPrev();
+      },
+      onMouseEnter: this.mouseEnterBtn,
+      onMouseLeave: this.mouseLeaveBtn,
+      style: navStyle,
+      type: "icon-left"
+    }), /*#__PURE__*/React__default.createElement(Slider, _extends({
+      ref: function (slider) {
+        return _this.sliderRef = slider;
+      }
+    }, settings), data.groupSource.map(function (item) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: item.id,
+        className: "img-wrap"
+      }, item.image.open && /*#__PURE__*/React__default.createElement("div", {
+        className: "image"
+      }, /*#__PURE__*/React__default.createElement(Image, {
+        data: item.image,
+        isBackground: true,
+        maxHeight: PC_IMG_SIZE[colNum - 1].h,
+        maxWidth: PC_IMG_SIZE[colNum - 1].w
+      })), showText && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.title.open && /*#__PURE__*/React__default.createElement("div", {
+        className: "title"
+      }, /*#__PURE__*/React__default.createElement(Text, {
+        data: item.title
+      })), item.text.open && /*#__PURE__*/React__default.createElement("div", {
+        className: "text"
+      }, /*#__PURE__*/React__default.createElement(Text, {
+        data: item.text
+      })), /*#__PURE__*/React__default.createElement("div", {
+        className: "tags"
+      }, item.imageTag.open && /*#__PURE__*/React__default.createElement(Image, {
+        data: item.imageTag,
+        maxHeight: 20
+      }), item.buttonTag.open && /*#__PURE__*/React__default.createElement(Button, {
+        data: item.buttonTag
+      }), item.secondButtonTag.open && /*#__PURE__*/React__default.createElement(Button, {
+        data: item.secondButtonTag
+      }))));
+    })), 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 == sliderIndex
+        }),
+        onClick: function () {
+          return _this.sliderRef.slickGoTo(i);
+        },
+        style: {
+          backgroundColor: i == sliderIndex ? data.setting.dots.hoverColor : data.setting.dots.color,
+          fontSize: i == sliderIndex ? data.setting.dots.hoverSize : data.setting.dots.size
+        }
+      });
+    })), data.setting.navigation.open && /*#__PURE__*/React__default.createElement(Iconfont, {
+      className: "carousel-icon-right",
+      onClick: function () {
+        return _this.sliderRef.slickNext();
+      },
+      onMouseEnter: this.mouseEnterBtn,
+      onMouseLeave: this.mouseLeaveBtn,
+      style: navStyle,
+      type: "icon-right"
+    }));
+  };
+
+  CarouselPc.defaultProps = {
+    data: {
+      setting: {},
+      groupSource: []
+    }
+  };
+  return CarouselPc;
+}(React__default.Component);
+
+export { CarouselPc as default };

package/dist/src/components/composite-comp/bol/components/Carousel/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-carousel-pc__PHuCj {\n  display: flex;\n  position: relative;\n}\n.index_m-carousel-pc__PHuCj .index_carousel-icon-left__ZXiMS {\n  float: left;\n  margin-left: 50px;\n}\n.index_m-carousel-pc__PHuCj .index_carousel-icon-right__fnGGD {\n  float: right;\n  margin-right: 50px;\n}\n.index_m-carousel-pc__PHuCj .index_slider-wrap__XDJPE {\n  width: calc(100% - 200px);\n  padding: 30px 0;\n  margin: 0 auto;\n}\n.index_m-carousel-pc__PHuCj .index_slider-wrap__XDJPE .index_img-wrap__p-3KN .index_title__8vegF {\n  display: flex;\n  justify-content: center;\n  margin-top: 12px;\n}\n.index_m-carousel-pc__PHuCj .index_slider-wrap__XDJPE .index_img-wrap__p-3KN .index_text__dGdhG {\n  display: flex;\n  justify-content: center;\n  margin-top: 2px;\n}\n.index_m-carousel-pc__PHuCj .index_slider-wrap__XDJPE .index_img-wrap__p-3KN .index_tags__s4RLJ {\n  margin-top: 8px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n.index_m-carousel-pc__PHuCj .index_slider-wrap__XDJPE .index_img-wrap__p-3KN .index_tags__s4RLJ > div {\n  margin-right: 8px;\n}\n.index_m-carousel-pc__PHuCj .index_slider-wrap__XDJPE .index_img-wrap__p-3KN .index_tags__s4RLJ > div:last-child {\n  margin-right: 0;\n}\n.index_m-carousel-pc__PHuCj .index_slider-wrap__XDJPE .index_slick-track__E-1zD {\n  display: flex;\n  align-items: center;\n}\n.index_m-carousel-pc__PHuCj .index_swiper-ban__TkjvC {\n  position: absolute;\n  width: 100%;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.index_m-carousel-pc__PHuCj .index_swiper-ban__TkjvC .index_ban__W7CFY {\n  font-size: 8px;\n  width: 1.25em;\n  height: 1.25em;\n  border-radius: 50%;\n  background: #FFF;\n  cursor: inherit;\n  margin-right: 1.25em;\n  transition: all 0.5s;\n}\n.index_m-carousel-pc__PHuCj .index_swiper-ban__TkjvC .index_ban__W7CFY.index_active__hDX-- {\n  width: 2.5em;\n  border-radius: 100px;\n  opacity: 1;\n}\n";
+styleInject(css_248z);

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

@@ -0,0 +1,40 @@
+import uuid_1 from '../../../../../../my_my_node_modules/uuid/index.js';
+
+var getDefaultJSON = function () {
+  return {
+    id: uuid_1.v4(),
+    type: 'DIVIDER',
+    content: {
+      open: true,
+      color: '#D2D9E5',
+      opacity: 100,
+      height: 1,
+      style: 'solid',
+      width: 90
+    },
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    customize: {
+      layout: 'layout1',
+      align: 'center'
+    },
+    background: {
+      opacity: 100,
+      color: '#fff',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+export { getDefaultJSON };

package/dist/src/components/composite-comp/bol/components/Divider/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 { 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;
+    var content = nodeData.content,
+        spacing = nodeData.spacing,
+        customize = nodeData.customize,
+        background = nodeData.background;
+    var style = {
+      display: 'flex',
+      justifyContent: customize.align,
+      background: background.bgType === 'color' ? background.color : "url(".concat(background.image, ")"),
+      padding: "".concat(spacing.lineSpacing, "px 0")
+    };
+    var lineStyle = content.open ? {
+      borderBottomColor: content.color,
+      borderBottomStyle: content.style,
+      borderBottomWidth: content.style === 'double' && content.height < 2 ? 2 : content.height,
+      opacity: "".concat(content.opacity, "%"),
+      width: "".concat(content.width, "%")
+    } : {};
+    return /*#__PURE__*/React__default.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React__default.createElement("div", {
+      style: lineStyle
+    }));
+  };
+
+  Banner.defaultProps = {};
+  Banner.type = 'DIVIDER';
+  Banner.getDefaultJSON = getDefaultJSON;
+  Banner = __decorate([compositeDecorator], Banner);
+  return Banner;
+}(Component);
+
+export { Banner as default };

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

@@ -0,0 +1,64 @@
+import uuid_1 from '../../../../../../my_my_node_modules/uuid/index.js';
+
+var imagesGroupSourceJSON = function () {
+  var groupId = uuid_1.v4();
+  return {
+    id: groupId,
+    groupName: {
+      parentId: groupId,
+      id: uuid_1.v4(),
+      text: 'Image Name'
+    },
+    image: {
+      parentId: groupId,
+      id: uuid_1.v4(),
+      open: true,
+      type: 'IMAGE',
+      content: {
+        h5Name: 'name2',
+        pcName: 'name2',
+        h5ImgSrc: '',
+        pcImgSrc: '',
+        clickUrl: ''
+      },
+      hover: {
+        open: false,
+        backgroundType: 'enlarge',
+        magnification: 1.5,
+        pcImgHoverUrl: '',
+        h5ImgHoverUrl: ''
+      }
+    }
+  };
+};
+var getDefaultJSON = function () {
+  return {
+    id: uuid_1.v4(),
+    type: 'IMAGE_GALLERY',
+    groupSource: [imagesGroupSourceJSON()],
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    customize: {
+      layout: 'layout1',
+      align: 'left'
+    },
+    background: {
+      opacity: 100,
+      color: '#F2F2F2',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+export { getDefaultJSON, imagesGroupSourceJSON };

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

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

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

@@ -0,0 +1,47 @@
+import { __extends } from '../../../../../../../my_my_node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import './index.less.js';
+import '../../../../../mobx/index.js';
+import { autorun } from 'mobx';
+
+var ImageGalleryMobile =
+/** @class */
+function (_super) {
+  __extends(ImageGalleryMobile, _super);
+
+  function ImageGalleryMobile() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+    _this.carouselRef = /*#__PURE__*/React__default.createRef();
+    _this.destroy = null;
+    return _this;
+  }
+
+  ImageGalleryMobile.prototype.componentDidMount = function () {
+    this.destroy = autorun(function () {// this.init(this.props.data.groupSource);
+    });
+  };
+
+  ImageGalleryMobile.prototype.componentWillReceiveProps = function (nextProps) {// this.init(nextProps.data.groupSource);
+  };
+
+  ImageGalleryMobile.prototype.componentWillUnmount = function () {// this.destroy();
+  };
+
+  ImageGalleryMobile.prototype.render = function () {
+    this.props.data;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "m-image-gallery-mobile"
+    }, "image gallery");
+  };
+
+  ImageGalleryMobile.defaultProps = {
+    data: {
+      groupSource: []
+    }
+  };
+  return ImageGalleryMobile;
+}(React__default.Component);
+
+export { ImageGalleryMobile as default };

package/dist/src/components/composite-comp/bol/components/ImageGallery/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__mrph5 {\n  position: relative;\n}\n.index_m-banner-mobile__mrph5 .index_carouselItem__QoGq6 {\n  height: 386px;\n  position: relative;\n  display: flex;\n}\n.index_m-banner-mobile__mrph5 .index_carouselItem__QoGq6 .index_carouseContent__0UOf9 {\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__mrph5 .index_carouselItem__QoGq6 .index_title__6VWeI {\n  margin-bottom: 8px;\n}\n.index_m-banner-mobile__mrph5 .index_carouselItem__QoGq6 .index_sub-title__9k3E1 {\n  margin-bottom: 20px;\n}\n.index_m-banner-mobile__mrph5 .index_carouselItem__QoGq6 .index_btn-wrap__Um0AK {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n.index_m-banner-mobile__mrph5 .index_carouselItem__QoGq6 .index_btn-wrap__Um0AK .index_btn__l2NLu {\n  margin-right: 12px;\n}\n.index_m-banner-mobile__mrph5 .index_swiper-ban__fDilV {\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__mrph5 .index_swiper-ban__fDilV .index_ban__tyaDx {\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__mrph5 .index_swiper-ban__fDilV .index_ban__tyaDx.index_active__kMYzB {\n  width: 1.5em;\n  opacity: 1;\n}\n";
+styleInject(css_248z);