@fonixtree/magic-design 0.0.6 → 0.0.9

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

@@ -0,0 +1,93 @@
+import { __assign } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import uuid_1 from '../../../../../../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/src/components/composite-comp/bol/components/Button/index.js

@@ -0,0 +1,48 @@
+import { __extends, __decorate } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import classNames from 'classnames';
+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/src/components/composite-comp/bol/components/Button/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../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);

package/src/components/composite-comp/bol/components/Carousel/defaultJSON.js

@@ -0,0 +1,286 @@
+import uuid_1 from '../../../../../../node_modules/uuid/index.js';
+import img from './imgs/defaultImg.png.js';
+
+var imagesGroupSourceJSON = function (compId) {
+  var groupId = uuid_1.v4();
+  return {
+    compId: compId,
+    id: groupId,
+    image: {
+      parentId: groupId,
+      id: uuid_1.v4(),
+      open: true,
+      type: 'IMAGE',
+      content: {
+        h5Name: 'h5Name',
+        pcName: 'pcName',
+        h5ImgSrc: img,
+        pcImgSrc: img,
+        clickUrl: ''
+      },
+      hover: {
+        open: false,
+        backgroundType: 'enlarge',
+        magnification: 1.5,
+        pcImgHoverUrl: '',
+        h5ImgHoverUrl: ''
+      }
+    },
+    title: {
+      parentId: groupId,
+      id: uuid_1.v4(),
+      open: true,
+      type: 'TEXT',
+      specialContent: [],
+      text: 'Title of this group',
+      content: {
+        sizeType: 'Headline 1',
+        fontFamily: 'Open Sans',
+        fontWeight: 600,
+        fontSize: 16,
+        color: '#232F46',
+        // width: 200,
+        textAlign: 'center'
+      },
+      underline: {
+        open: false,
+        textDecorationColor: '',
+        textDecorationStyle: 'solid'
+      },
+      vertical: {}
+    },
+    text: {
+      parentId: groupId,
+      id: uuid_1.v4(),
+      open: true,
+      type: 'TEXT',
+      specialContent: [],
+      text: 'Please enter a description',
+      content: {
+        sizeType: 'Headline 1',
+        fontFamily: 'Open Sans',
+        fontWeight: 400,
+        fontSize: 14,
+        color: '##232F46',
+        // width: 230,
+        textAlign: 'center'
+      },
+      underline: {},
+      vertical: {}
+    },
+    imageTag: {
+      parentId: groupId,
+      id: uuid_1.v4(),
+      open: true,
+      type: 'IMAGE',
+      content: {
+        h5Name: '',
+        pcName: '',
+        h5ImgSrc: img,
+        pcImgSrc: img,
+        clickUrl: ''
+      },
+      hover: {
+        open: false,
+        backgroundType: 'enlarge',
+        magnification: 1.5,
+        pcImgHoverUrl: '',
+        h5ImgHoverUrl: ''
+      }
+    },
+    buttonTag: {
+      parentId: groupId,
+      id: uuid_1.v4(),
+      open: true,
+      type: 'BUTTON',
+      text: 'Button Tag',
+      content: {
+        url: '',
+        backgroundColor: '#E6EAF0'
+      },
+      buttonText: {
+        // sizeType: 'Headline 1',
+        fontFamily: 'Open Sans',
+        fontWeight: 600,
+        fontSize: 14,
+        fontStyle: 'normal',
+        color: '#8493AF'
+      },
+      buttonBorder: {
+        open: true,
+        borderColor: '',
+        borderRadius: 4
+      },
+      buttonIcon: {
+        iconUrl: '',
+        layout: 'right'
+      },
+      spacing: {
+        pc: {
+          paddingTop: 4,
+          paddingBottom: 4,
+          paddingLeft: 10,
+          paddingRight: 10
+        },
+        mobile: {
+          paddingTop: 2,
+          paddingBottom: 2,
+          paddingLeft: 8,
+          paddingRight: 8
+        }
+      },
+      hover: {
+        open: false,
+        content: {
+          backgroundColor: '#E6EAF0'
+        },
+        buttonText: {
+          // sizeType: 'Headline 1',
+          fontFamily: 'Open Sans',
+          fontWeight: 600,
+          fontSize: 14,
+          fontStyle: 'normal',
+          color: '#8493AF'
+        },
+        buttonBorder: {
+          open: true,
+          borderColor: '',
+          borderRadius: 4
+        },
+        buttonIcon: {
+          iconUrl: '',
+          layout: 'right'
+        }
+      }
+    },
+    secondButtonTag: {
+      parentId: groupId,
+      id: uuid_1.v4(),
+      open: true,
+      type: 'BUTTON',
+      text: 'Button Tag',
+      content: {
+        url: '',
+        backgroundColor: '#E6EAF0'
+      },
+      buttonText: {
+        // sizeType: 'Headline 1',
+        fontFamily: 'Open Sans',
+        fontWeight: 600,
+        fontSize: 14,
+        fontStyle: 'normal',
+        color: '#8493AF'
+      },
+      buttonBorder: {
+        open: true,
+        borderColor: '',
+        borderRadius: 4
+      },
+      buttonIcon: {
+        iconUrl: '',
+        layout: 'right'
+      },
+      spacing: {
+        pc: {
+          paddingTop: 4,
+          paddingBottom: 4,
+          paddingLeft: 10,
+          paddingRight: 10
+        },
+        mobile: {
+          paddingTop: 2,
+          paddingBottom: 2,
+          paddingLeft: 8,
+          paddingRight: 8
+        }
+      },
+      hover: {
+        open: false,
+        content: {
+          backgroundColor: '#E6EAF0'
+        },
+        buttonText: {
+          // sizeType: 'Headline 1',
+          fontFamily: 'Open Sans',
+          fontWeight: 600,
+          fontSize: 14,
+          fontStyle: 'normal',
+          color: '#8493AF'
+        },
+        buttonBorder: {
+          open: true,
+          borderColor: '',
+          borderRadius: 4
+        },
+        buttonIcon: {
+          iconUrl: '',
+          layout: 'right'
+        }
+      }
+    }
+  };
+};
+var getDefaultJSON = function () {
+  var compId = uuid_1.v4();
+  return {
+    id: compId,
+    type: 'CAROUSEL',
+    groupSource: [imagesGroupSourceJSON(compId) // imagesGroupSourceJSON(),
+    // imagesGroupSourceJSON(),
+    ],
+    setting: {
+      // 自动轮播
+      autoplay: {
+        open: true,
+        interval: 4 // 滚动事件
+
+      },
+      // 切换按钮
+      navigation: {
+        open: true,
+        size: 16,
+        hoverSize: 16,
+        color: '#8493AF',
+        hoverColor: '#2F54EB' // 悬浮颜色
+
+      },
+      // 面板指示点
+      dots: {
+        open: true,
+        color: '#8c9ff4',
+        hoverColor: '#2F54EB',
+        size: 8,
+        hoverSize: 8 // 悬浮大小
+
+      }
+    },
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    customize: {
+      layout: 'layout1',
+      align: 'left',
+      rowNum: 1,
+      pcRowNum: 1,
+      mobileMaxRowNum: 5,
+      pcMaxRowNum: 6
+    },
+    background: {
+      opacity: 100,
+      color: '#F2F2F2',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+export { getDefaultJSON, imagesGroupSourceJSON };

package/src/components/composite-comp/bol/components/Carousel/imgs/defaultImg.png.js

@@ -0,0 +1,3 @@
+var img = "data:image/png;base64,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";
+
+export { img as default };

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

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

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

@@ -0,0 +1,217 @@
+import { extends as _extends } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { __extends, __assign, __decorate } from '../../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import './index.less.js';
+import Slider from '../../../../../../../node_modules/react-slick/lib/index.js';
+import classNames from 'classnames';
+import { inject } from '../../../../../../../node_modules/mobx-react/dist/mobxreact.esm.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 '../../../../../../../node_modules/slick-carousel/slick/slick.css.js';
+import '../../../../../../../node_modules/slick-carousel/slick/slick-theme.css.js';
+import { store } from '../../../../../mobx/index.js';
+
+var MOBILE_IMG_SIZE = [{
+  w: 282,
+  h: 212
+}, {
+  w: 125,
+  h: 102
+}, {
+  w: 82,
+  h: 64.5
+}, {
+  w: 60,
+  h: 45
+}, {
+  w: 50,
+  h: 50
+}];
+
+var CarouselMobile =
+/** @class */
+function (_super) {
+  __extends(CarouselMobile, _super);
+
+  function CarouselMobile() {
+    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;
+  }
+
+  CarouselMobile.prototype.componentDidMount = function () {
+    var _a;
+
+    var data = this.props.data;
+    this.props.store.setState({
+      CarouselStore: __assign(__assign({}, store.CarouselStore), (_a = {}, _a[data.id] = data.customize.layout, _a))
+    });
+  };
+
+  CarouselMobile.prototype.componentWillReceiveProps = function (nextProps) {
+    if (nextProps.data.setting.autoplay.open) {
+      this.sliderRef.slickPlay();
+    } else {
+      this.sliderRef.slickPause();
+    }
+  };
+
+  CarouselMobile.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.rowNum, 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-mobile",
+      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: MOBILE_IMG_SIZE[colNum - 1].h,
+        maxWidth: MOBILE_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"
+    }));
+  };
+
+  CarouselMobile.defaultProps = {
+    data: {
+      setting: {},
+      groupSource: []
+    }
+  };
+  CarouselMobile = __decorate([inject('store')], CarouselMobile);
+  return CarouselMobile;
+}(React__default.Component);
+
+export { CarouselMobile as default };