@hi-ui/hiui 2.15.11 → 2.15.12

package/es/card/index.js

@@ -1,64 +1,51 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-require("./style/index");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+exports.Card = exports["default"] = void 0;
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+var _react = _interopRequireWildcard(require("react"));
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+var _classnames = _interopRequireDefault(require("classnames"));
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+require("./style/index");
 
-var Card = /*#__PURE__*/function (_Component) {
-  _inherits(Card, _Component);
+var _context = _interopRequireDefault(require("../context"));
 
-  var _super = _createSuper(Card);
+var Card =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Card, _Component);
 
   function Card(props) {
     var _this;
 
-    _classCallCheck(this, Card);
-
-    _this = _super.call(this, props);
+    (0, _classCallCheck2["default"])(this, Card);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Card).call(this, props));
     _this.state = {
-      extraShow: props.extraShow === 'stay'
+      extraShow: props.extraShow === 'stay' && props.extraType === 'default'
     };
     return _this;
   }
 
-  _createClass(Card, [{
+  (0, _createClass2["default"])(Card, [{
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -70,78 +57,88 @@ var Card = /*#__PURE__*/function (_Component) {
           title = _this$props.title,
           extra = _this$props.extra,
           cover = _this$props.cover,
+          coverUrl = _this$props.coverUrl,
           description = _this$props.description,
+          content = _this$props.content,
           children = _this$props.children,
           disabled = _this$props.disabled,
           extraShow = _this$props.extraShow,
-          type = _this$props.type;
-      var cls = (0, _classnames["default"])('hi-card', hoverable && 'hi-card--hover', size && "hi-card--".concat(size), disabled && 'hi-card--disabled', !cover && type !== 'simple' && 'hi-card--padding', type === 'simple' && "hi-card--simple-".concat(size));
+          extraType = _this$props.extraType,
+          type = _this$props.type,
+          theme = _this$props.theme;
+      var cls = (0, _classnames["default"])('hi-card', "theme__".concat(theme), hoverable && 'hi-card--hover', size && "hi-card--".concat(size === 'default' ? 'middle' : size), disabled && 'hi-card--disabled', !cover && !coverUrl && type !== 'simple' && 'hi-card--padding', type === 'simple' && "hi-card--simple-".concat(size === 'default' ? 'middle' : size));
       var headerCls = (0, _classnames["default"])('hi-card__header', !title && extra && 'hi-card__header--onlyextra');
-      var coverCls = (0, _classnames["default"])('hi-card__content', cover && 'hi-card__content--cover');
+      var coverCls = (0, _classnames["default"])('hi-card__content', (cover || coverUrl) && 'hi-card__content--cover');
       var extraCls = (0, _classnames["default"])('hi-card__extra', !this.state.extraShow && 'hi-card__extra--hide');
 
-      var header = (title || extra) && /*#__PURE__*/_react["default"].createElement("div", {
+      var header = (title || extra) && _react["default"].createElement("div", {
         className: headerCls
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+      }, _react["default"].createElement("div", {
         className: "hi-card__title"
-      }, title), extra && /*#__PURE__*/_react["default"].createElement("div", {
+      }, title), extra && _react["default"].createElement("div", {
         className: extraCls
       }, extra));
 
-      var body = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, header, /*#__PURE__*/_react["default"].createElement("div", {
+      var body = _react["default"].createElement(_react["default"].Fragment, null, header, _react["default"].createElement("div", {
         className: coverCls
       }, children));
 
       var coverDom = null;
 
-      if (cover) {
-        coverDom = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].cloneElement(cover, {
+      if (cover || coverUrl) {
+        coverDom = _react["default"].createElement(_react["default"].Fragment, null, cover && _react["default"].cloneElement(cover, {
           style: {
             width: '100%'
           }
-        }), /*#__PURE__*/_react["default"].createElement("div", {
+        }), coverUrl && _react["default"].createElement("img", {
+          src: coverUrl,
+          style: {
+            width: '100%'
+          }
+        }), _react["default"].createElement("div", {
           className: coverCls
-        }, header, description));
+        }, header, content || description));
       }
 
       if (type === 'simple') {
-        body = /*#__PURE__*/_react["default"].createElement("div", {
+        body = _react["default"].createElement("div", {
           className: "hi-card__content hi-card__content--simple"
         }, children);
         coverDom = null;
       }
 
-      return /*#__PURE__*/_react["default"].createElement("div", {
+      return _react["default"].createElement("div", {
         className: cls,
         style: style,
         onMouseEnter: function onMouseEnter() {
-          extraShow === 'hover' && _this2.setState({
+          (extraShow === 'hover' || extraType === 'hover') && _this2.setState({
             extraShow: true
           });
         },
         onMouseLeave: function onMouseLeave() {
-          extraShow === 'hover' && _this2.setState({
+          (extraShow === 'hover' || extraType === 'hover') && _this2.setState({
             extraShow: false
           });
         }
       }, coverDom || body);
     }
   }]);
-
   return Card;
 }(_react.Component);
 
+exports.Card = Card;
 Card.defaultProps = {
   hoverable: false,
   title: '',
   extra: '',
-  extraShow: 'hover'
+  extraShow: 'stay',
+  extraType: 'default'
 };
 Card.propTypes = {
   // 支持三种宽度预设值 small -> 276px    middle -> 376px  large -> 576px，如果传入 style 则忽略该值，如果缺省 style 及 size 则默认100%
-  size: _propTypes["default"].oneOf(['small', 'middle', 'large']),
+  size: _propTypes["default"].oneOf(['small', 'default', 'middle', 'large']),
   // 一种简单的小卡片
-  type: _propTypes["default"].oneOf(['simple']),
+  type: _propTypes["default"].oneOf(['simple', 'default']),
   style: _propTypes["default"].object,
   // 鼠标移入是否显示悬停态（浮起）
   hoverable: _propTypes["default"].bool,
@@ -153,9 +150,16 @@ Card.propTypes = {
   cover: _propTypes["default"].element,
   // 用于图片卡片，做为描述
   description: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
+  // TODO: 废弃，使用 content
+  content: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
   disabled: _propTypes["default"].bool,
+  // TODO: 废弃
   // 扩展按钮显示模式
-  extraShow: _propTypes["default"].oneOf(['stay', 'hover'])
+  extraShow: _propTypes["default"].oneOf(['stay', 'hover']),
+  // TODO: 废弃，使用 extraType
+  extraType: _propTypes["default"].oneOf(['default', 'hover'])
 };
-var _default = Card;
+
+var _default = (0, _context["default"])(Card);
+
 exports["default"] = _default;

package/es/card/style/index.css

@@ -1 +1 @@
-.hi-card{border-radius:2px;border:1px solid #e7e7e7;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-card--padding{padding:24px}.hi-card--hover:not(.hi-card--disabled):hover{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,0.08);box-shadow:0 2px 8px 0 rgba(0,0,0,0.08)}.hi-card--disabled{background:#f6f6f6;color:#ccc;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.hi-card__header{height:24px;line-height:24px;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:12px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.hi-card__header--onlyextra{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.hi-card__title{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hi-card__content--cover{padding:16px}.hi-card__content--simple{height:40px;line-height:40px;padding:0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hi-card__extra{cursor:pointer;color:#4284f5;font-size:14px}.hi-card__extra--hide{display:none}.hi-card--middle{width:376px}.hi-card--small{width:276px}.hi-card--large{width:576px}.hi-card--simple-small{width:136px}.hi-card--simple-middle{width:156px}.hi-card--simple-large{width:176px}
+.hi-card{border-radius:2px;border:1px solid #e7e7e7;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff}.hi-card--padding{padding:24px}.hi-card--hover:not(.hi-card--disabled):hover{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,0.08);box-shadow:0 2px 8px 0 rgba(0,0,0,0.08)}.hi-card--disabled{background:#f6f6f6;color:#ccc;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.hi-card__header{height:24px;line-height:24px;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:4px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.hi-card__header--onlyextra{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.hi-card__title{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hi-card__content--cover{padding:16px}.hi-card__content--simple{height:40px;line-height:40px;padding:0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hi-card__extra{cursor:pointer;color:#4284f5;font-size:14px}.hi-card__extra--hide{display:none}.hi-card--middle{width:376px}.hi-card--small{width:276px}.hi-card--large{width:576px}.hi-card--simple-small{width:136px}.hi-card--simple-middle{width:156px}.hi-card--simple-large{width:176px}.theme__hiui-blue.hi-card__extra{color:#4285f4}.theme__hiui-blue.hi-card .hi-icon{color:#4285f4}.theme__orange.hi-card__extra{color:#f63}.theme__orange.hi-card .hi-icon{color:#f63}.theme__cyan.hi-card__extra{color:#46bc99}.theme__cyan.hi-card .hi-icon{color:#46bc99}.theme__magenta.hi-card__extra{color:#ff5975}.theme__magenta.hi-card .hi-icon{color:#ff5975}.theme__lavender.hi-card__extra{color:#b450de}.theme__lavender.hi-card .hi-icon{color:#b450de}.theme__blue.hi-card__extra{color:#3da8f5}.theme__blue.hi-card .hi-icon{color:#3da8f5}.theme__purple.hi-card__extra{color:#8a8acb}.theme__purple.hi-card .hi-icon{color:#8a8acb}

package/es/carousel/__tests__/index.test.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _sinon = _interopRequireDefault(require("sinon"));
+
+var _index = _interopRequireDefault(require("../index"));
+
+describe("Carousel", function () {
+  var clock;
+  beforeEach(function () {
+    clock = _sinon["default"].useFakeTimers();
+  });
+  afterEach(function () {
+    clock.restore();
+  });
+  var data = [1, 2, 3, 4, 5, 6, 7];
+  describe('lifeCycle', function () {
+    it('componentDidmount', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        defaultActive: 0,
+        duration: 300
+      }, data.map(function (item, index) {
+        return _react["default"].createElement("div", {
+          key: index
+        }, item);
+      })));
+      expect(wrapper.find('.hi-carousel')).toHaveLength(1);
+      wrapper.find('.hi-carousel').simulate('mouseover');
+      clock.tick(310);
+      expect(wrapper.state("active")).toEqual(0);
+      expect(wrapper.state("showArrow")).toEqual(true);
+      wrapper.find('.hi-carousel').simulate('mouseout');
+      clock.tick(310);
+      expect(wrapper.state("active")).toEqual(1);
+      expect(wrapper.state("showArrow")).toEqual(false);
+    });
+    it('componentWillUnmount', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        defaultActive: 0,
+        duration: 300
+      }, data.map(function (item, index) {
+        return _react["default"].createElement("div", {
+          key: index
+        }, item);
+      })));
+      wrapper.instance().componentWillUnmount();
+      clock.tick(310);
+      expect(wrapper.state("active")).toEqual(0);
+    });
+  });
+  describe('props', function () {
+    it('duration', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        duration: 300
+      }, _react["default"].createElement("div", null, "1"), _react["default"].createElement("div", null, "2"), _react["default"].createElement("div", null, "3")));
+      clock.tick(310);
+      expect(wrapper.state("active")).toEqual(1);
+      clock.tick(300);
+      expect(wrapper.state("active")).toEqual(2);
+    });
+    it('showDots', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], null, _react["default"].createElement("div", null, "1"), _react["default"].createElement("div", null, "2"), _react["default"].createElement("div", null, "3"), _react["default"].createElement("div", null, "4")));
+      expect(wrapper.find('.hi-carousel__dots')).toHaveLength(1);
+      wrapper.find('.hi-carousel__dot').at(3).simulate('click');
+      expect(wrapper.state("active")).toEqual(3);
+      wrapper.setProps({
+        showDots: false
+      });
+      expect(wrapper.find('.hi-carousel__dots')).toHaveLength(0);
+    });
+    it('showArrows', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], null, _react["default"].createElement("div", null, "1"), _react["default"].createElement("div", null, "2"), _react["default"].createElement("div", null, "3")));
+      expect(wrapper.find('.hi-carousel__arrows')).toHaveLength(1);
+      wrapper.setProps({
+        showArrows: false
+      });
+      expect(wrapper.find('.hi-carousel__arrows')).toHaveLength(0);
+    });
+    it('defaultActive', function () {
+      var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+        defaultActive: 0
+      }, _react["default"].createElement("div", null, "1"), _react["default"].createElement("div", null, "2"), _react["default"].createElement("div", null, "3")));
+      expect(wrapper.find('.hi-carousel__arrows')).toHaveLength(1);
+      expect(wrapper.state("active")).toEqual(0);
+      wrapper.setProps({
+        defaultActive: -1
+      });
+      expect(wrapper.state("active")).toEqual(0);
+      wrapper.setProps({
+        defaultActive: 3
+      });
+      expect(wrapper.state("active")).toEqual(0);
+      wrapper.find('.hi-carousel__arrow').first().simulate('click');
+      expect(wrapper.state("active")).toEqual(2);
+      wrapper.find('.hi-carousel__arrow').last().simulate('click');
+      expect(wrapper.state("active")).toEqual(0);
+    });
+  });
+});

package/es/carousel/index.js

@@ -0,0 +1,219 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./style/index");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+// const url = 'http://i1.mifile.cn/f/i/hiui/docs/'
+var Carousel =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Carousel, _Component);
+
+  function Carousel(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Carousel);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Carousel).call(this, props));
+    _this.rootRef = _react["default"].createRef();
+    var defaultActive = props.defaultActive;
+    _this.state = {
+      rootWidth: 0,
+      showArrow: false,
+      active: defaultActive >= props.children.length || defaultActive < 0 ? 0 : defaultActive
+    };
+    _this.timer = null;
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Carousel, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      this.setState({
+        rootWidth: this.rootRef.current.clientWidth
+      }, function () {
+        if (_this2.props.duration) {
+          _this2.autoPage();
+        }
+      });
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.timer && window.clearInterval(this.timer);
+    }
+  }, {
+    key: "autoPage",
+    value: function autoPage() {
+      var _this3 = this;
+
+      this.timer = window.setInterval(function () {
+        _this3.preNextEvent(1);
+      }, this.props.duration);
+    }
+  }, {
+    key: "pageEvent",
+    value: function pageEvent(active) {
+      this.setState({
+        active: active
+      });
+    }
+  }, {
+    key: "preNextEvent",
+    value: function preNextEvent(val) {
+      var active = this.state.active + val;
+
+      if (active >= this.props.children.length) {
+        active = 0;
+      }
+
+      if (active < 0) {
+        active = this.props.children.length + active;
+      }
+
+      this.setState({
+        active: active
+      });
+    }
+  }, {
+    key: "mouseEvent",
+    value: function mouseEvent(type) {
+      var showArrow = true;
+
+      if (type === 'over') {
+        this.timer && window.clearInterval(this.timer);
+      } else {
+        showArrow = false;
+        this.props.duration && this.autoPage();
+      }
+
+      this.setState({
+        showArrow: showArrow
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+
+      var _this$state = this.state,
+          rootWidth = _this$state.rootWidth,
+          active = _this$state.active,
+          showArrow = _this$state.showArrow;
+      var _this$props = this.props,
+          showDots = _this$props.showDots,
+          showArrows = _this$props.showArrows,
+          showPages = _this$props.showPages;
+
+      var children = _react["default"].Children.toArray(this.props.children);
+
+      var len = children.length || 0;
+      var arrowCls = (0, _classnames["default"])('hi-carousel__arrows', showArrow && 'hi-carousel__arrows--show');
+      return _react["default"].createElement("div", {
+        className: "hi-carousel",
+        ref: this.rootRef,
+        onMouseOver: this.mouseEvent.bind(this, 'over'),
+        onMouseOut: this.mouseEvent.bind(this, 'out')
+      }, _react["default"].createElement("div", {
+        className: "hi-carousel__container",
+        style: {
+          width: rootWidth * children.length
+        }
+      }, children.map(function (child, index) {
+        return _react["default"].cloneElement(child, {
+          key: index,
+          style: _objectSpread({
+            position: 'relative',
+            zIndex: active === index ? 2 : 1,
+            opacity: active === index ? 1 : 0,
+            transition: 'opacity 300ms ease 0s',
+            left: -(rootWidth * index),
+            width: rootWidth,
+            display: 'inline-block',
+            fontSize: 24
+          }, child.props.style)
+        });
+      })), showArrows && _react["default"].createElement("ul", {
+        className: arrowCls
+      }, _react["default"].createElement("li", {
+        className: "hi-carousel__arrow",
+        onClick: this.preNextEvent.bind(this, -1)
+      }, _react["default"].createElement(_icon["default"], {
+        name: "left"
+      })), _react["default"].createElement("li", {
+        className: "hi-carousel__arrow",
+        onClick: this.preNextEvent.bind(this, 1)
+      }, _react["default"].createElement(_icon["default"], {
+        name: "right"
+      }))), showDots && _react["default"].createElement("ul", {
+        className: "hi-carousel__dots"
+      }, children.map(function (_, index) {
+        var cls = (0, _classnames["default"])('hi-carousel__dot', active === index && 'hi-carousel__dot--active');
+        return _react["default"].createElement("li", {
+          className: cls,
+          key: index,
+          onClick: _this4.pageEvent.bind(_this4, index)
+        });
+      })), showPages && _react["default"].createElement("div", {
+        className: "hi-carousel__pages"
+      }, _react["default"].createElement("span", null, active, " / ", len)));
+    }
+  }]);
+  return Carousel;
+}(_react.Component);
+
+Carousel.propTypes = {
+  duration: _propTypes["default"].number,
+  onClick: _propTypes["default"].func,
+  beforeChange: _propTypes["default"].func,
+  afterChange: _propTypes["default"].func,
+  showDots: _propTypes["default"].bool,
+  showArrows: _propTypes["default"].bool,
+  defaultActive: _propTypes["default"].number,
+  showPages: _propTypes["default"].bool
+};
+Carousel.defaultProps = {
+  duration: 0,
+  onClick: function onClick() {},
+  beforeChange: function beforeChange() {},
+  afterChange: function afterChange() {},
+  showDots: true,
+  showArrows: true,
+  defaultActive: 0,
+  showPages: false
+};
+var _default = Carousel;
+exports["default"] = _default;

package/es/carousel/style/index.css

@@ -0,0 +1 @@
+.hi-carousel{width:100%;color:#fff;overflow:hidden;position:relative}.hi-carousel__container{height:100%;-webkit-transition:all 500ms;transition:all 500ms}.hi-carousel__dots{position:absolute;bottom:24px;margin:0;padding:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);max-width:50%;display:-webkit-box;display:-ms-flexbox;display:flex;z-index:2}.hi-carousel__dot{width:24px;height:4px;background:rgba(255,255,255,0.4);border-radius:2px;display:inline-block;margin-left:4px;cursor:pointer;-webkit-transition:all 1s;transition:all 1s}.hi-carousel__dot--active:not(.hi-carousel__dot--sign){background:#fff;width:48px}.hi-carousel__dot--sign{width:24px}.hi-carousel__arrows{position:absolute;width:100%;list-style:none;margin:0;padding:0;top:50%;-webkit-transform:translateY(-28px);transform:translateY(-28px);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;visibility:hidden;height:0;z-index:2}.hi-carousel__arrows--show{visibility:visible}.hi-carousel__arrow{width:56px;height:56px;background:rgba(0,0,0,0.25);border-radius:50%;text-align:center;line-height:56px;color:#fff;font-size:32px;margin-left:24px;cursor:pointer}.hi-carousel__arrow:hover{background:rgba(0,0,0,0.45)}.hi-carousel__arrow:last-child{margin-right:24px}.hi-carousel__pages{width:46px;height:22px;border-radius:16px;position:absolute;bottom:24px;right:24px;background:rgba(0,0,0,0.5);line-height:22px;font-size:14px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.5;z-index:2}

package/es/carousel/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.css");