@douyinfe/semi-ui 2.9.0-beta.1 → 2.10.0-beta.0

package/lib/cjs/toast/toast.d.ts

@@ -41,7 +41,7 @@ declare class Toast extends BaseComponent<ToastReactProps, ToastState> {
     close(e: React.MouseEvent): void;
     clearCloseTimer: () => void;
     startCloseTimer: () => void;
-    renderIcon(): true | React.ReactChild | React.ReactFragment;
+    renderIcon(): string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment;
     render(): JSX.Element;
 }
 export default Toast;

package/lib/cjs/tooltip/index.js

@@ -258,7 +258,7 @@ class Tooltip extends _baseComponent.default {
       }, portalEventSet, {
         "x-placement": placement,
         style: (0, _assign.default)({
-          visibility: motion ? undefined : 'visible'
+          visibility: motion ? 'hidden' : 'visible'
         }, style)
       }), contentNode, icon);
       return /*#__PURE__*/_react.default.createElement(_index.default, {

package/lib/cjs/transfer/index.d.ts

@@ -39,6 +39,7 @@ export interface SourcePanelProps {
     noMatch: boolean;
     filterData: Array<DataItem>;
     sourceData: Array<DataItem>;
+    propsDataSource: DataSource;
     allChecked: boolean;
     showNumber: number;
     inputValue: string;

package/lib/cjs/transfer/index.js

@@ -296,7 +296,8 @@ class Transfer extends _baseComponent.default {
       loading,
       type,
       emptyContent,
-      renderSourcePanel
+      renderSourcePanel,
+      dataSource
     } = this.props;
     const totalToken = locale.total;
     const inSearchMode = inputValue !== '';
@@ -356,6 +357,7 @@ class Transfer extends _baseComponent.default {
       noMatch,
       filterData,
       sourceData: data,
+      propsDataSource: dataSource,
       allChecked: !leftContainesNotInSelected,
       showNumber,
       inputValue,

package/lib/es/banner/index.js

@@ -67,7 +67,9 @@ export default class Banner extends BaseComponent {
     const closer = /*#__PURE__*/React.createElement(Button, {
       className: "".concat(prefixCls, "-close"),
       onClick: this.remove,
-      icon: closeIcon || /*#__PURE__*/React.createElement(IconClose, null),
+      icon: closeIcon || /*#__PURE__*/React.createElement(IconClose, {
+        "aria-hidden": true
+      }),
       theme: "borderless",
       size: "small",
       type: "tertiary",
@@ -83,16 +85,20 @@ export default class Banner extends BaseComponent {
     } = this.props;
     const iconMap = {
       warning: /*#__PURE__*/React.createElement(IconAlertTriangle, {
-        size: "large"
+        size: "large",
+        "aria-label": 'warning'
       }),
       success: /*#__PURE__*/React.createElement(IconTickCircle, {
-        size: "large"
+        size: "large",
+        "aria-label": 'success'
       }),
       info: /*#__PURE__*/React.createElement(IconInfoCircle, {
-        size: "large"
+        size: "large",
+        "aria-label": 'info'
       }),
       danger: /*#__PURE__*/React.createElement(IconAlertCircle, {
-        size: "large"
+        size: "large",
+        "aria-label": 'danger'
       })
     };
     let iconType = iconMap[type];

package/lib/es/carousel/CarouselArrow.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from "react";
+import { CarouselArrowProps } from "./interface";
+declare class CarouselArrow extends React.PureComponent<CarouselArrowProps> {
+    renderLeftIcon: () => any;
+    renderRightIcon: () => any;
+    render(): ReactNode;
+}
+export default CarouselArrow;

package/lib/es/carousel/CarouselArrow.js

@@ -0,0 +1,72 @@
+import _throttle from "lodash/throttle";
+import _get from "lodash/get";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React from "react";
+import cls from 'classnames';
+import { cssClasses } from '@douyinfe/semi-foundation/lib/es/carousel/constants';
+import { IconChevronLeft, IconChevronRight } from "@douyinfe/semi-icons";
+
+class CarouselArrow extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+
+    this.renderLeftIcon = () => {
+      return _get(this.props, 'arrowProps.leftArrow.children', /*#__PURE__*/React.createElement(IconChevronLeft, {
+        "aria-label": "Previous index",
+        size: "inherit"
+      }));
+    };
+
+    this.renderRightIcon = () => {
+      return _get(this.props, 'arrowProps.rightArrow.children', /*#__PURE__*/React.createElement(IconChevronRight, {
+        "aria-label": "Next index",
+        size: "inherit"
+      }));
+    };
+  }
+
+  render() {
+    var _context, _context2, _context3;
+
+    const {
+      type,
+      theme,
+      prev,
+      next,
+      timing
+    } = this.props;
+    const classNames = cls({
+      [cssClasses.CAROUSEL_ARROW]: true,
+      [_concatInstanceProperty(_context = "".concat(cssClasses.CAROUSEL_ARROW, "-")).call(_context, theme)]: theme,
+      ["".concat(cssClasses.CAROUSEL_ARROW, "-hover")]: type === 'hover'
+    });
+    const leftClassNames = cls({
+      ["".concat(cssClasses.CAROUSEL_ARROW, "-prev")]: true,
+      [_concatInstanceProperty(_context2 = "".concat(cssClasses.CAROUSEL_ARROW, "-")).call(_context2, theme)]: theme
+    });
+    const rightClassNames = cls({
+      ["".concat(cssClasses.CAROUSEL_ARROW, "-next")]: true,
+      [_concatInstanceProperty(_context3 = "".concat(cssClasses.CAROUSEL_ARROW, "-")).call(_context3, theme)]: theme
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames
+    }, /*#__PURE__*/React.createElement("div", _Object$assign({
+      // role='button'
+      className: leftClassNames,
+      onClick: _throttle(prev, timing)
+    }, _get(this.props, 'arrowProps.leftArrow.props')), this.renderLeftIcon()), /*#__PURE__*/React.createElement("div", _Object$assign({
+      // role='button'
+      // tabIndex={0} 
+      className: rightClassNames,
+      onClick: _throttle(next, timing)
+    }, _get(this.props, 'arrowProps.rightArrow.props')), this.renderRightIcon()));
+  }
+
+}
+
+export default CarouselArrow;

package/lib/es/carousel/CarouselIndicator.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode } from "react";
+import PropTypes from 'prop-types';
+import { CarouselIndicatorProps } from "./interface";
+declare class CarouselIndicator extends React.PureComponent<CarouselIndicatorProps> {
+    static propTypes: {
+        activeKey: PropTypes.Requireable<number>;
+        className: PropTypes.Requireable<string>;
+        position: PropTypes.Requireable<"left" | "right" | "center">;
+        size: PropTypes.Requireable<"small" | "medium">;
+        style: PropTypes.Requireable<object>;
+        theme: PropTypes.Requireable<"primary" | "dark" | "light">;
+        total: PropTypes.Requireable<number>;
+        onIndicatorChange: PropTypes.Requireable<(...args: any[]) => any>;
+        type: PropTypes.Requireable<"line" | "dot" | "columnar">;
+        trigger: PropTypes.Requireable<"hover" | "click">;
+    };
+    onIndicatorChange: (activeIndex: number) => void;
+    handleIndicatorClick: (activeIndex: number) => void;
+    handleIndicatorHover: (activeIndex: number) => void;
+    renderIndicatorContent(): ReactNode;
+    render(): ReactNode;
+}
+export default CarouselIndicator;

package/lib/es/carousel/CarouselIndicator.js

@@ -0,0 +1,125 @@
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && _indexOfInstanceProperty(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
+    if (_indexOfInstanceProperty(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+
+import React from "react";
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/carousel/constants';
+import getDataAttr from '@douyinfe/semi-foundation/lib/es/utils/getDataAttr';
+
+class CarouselIndicator extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+
+    this.onIndicatorChange = activeIndex => {
+      this.props.onIndicatorChange(activeIndex);
+    };
+
+    this.handleIndicatorClick = activeIndex => {
+      const {
+        trigger
+      } = this.props;
+
+      if (trigger === 'click') {
+        this.onIndicatorChange(activeIndex);
+      }
+    };
+
+    this.handleIndicatorHover = activeIndex => {
+      const {
+        trigger
+      } = this.props;
+
+      if (trigger === 'hover') {
+        this.onIndicatorChange(activeIndex);
+      }
+    };
+  }
+
+  renderIndicatorContent() {
+    const {
+      total,
+      theme,
+      size,
+      activeIndex
+    } = this.props;
+    const indicatorContent = [];
+
+    for (let i = 0; i < total; i++) {
+      var _context, _context2;
+
+      indicatorContent.push( /*#__PURE__*/React.createElement("span", {
+        // role='none' 
+        key: i,
+        "data-index": i,
+        className: cls(["".concat(cssClasses.CAROUSEL_INDICATOR, "-item")], {
+          ["".concat(cssClasses.CAROUSEL_INDICATOR, "-item-active")]: i === activeIndex,
+          [_concatInstanceProperty(_context = "".concat(cssClasses.CAROUSEL_INDICATOR, "-item-")).call(_context, theme)]: theme,
+          [_concatInstanceProperty(_context2 = "".concat(cssClasses.CAROUSEL_INDICATOR, "-item-")).call(_context2, size)]: size
+        }),
+        onClick: () => this.handleIndicatorClick(i),
+        onMouseEnter: () => this.handleIndicatorHover(i)
+      }));
+    }
+
+    return indicatorContent;
+  }
+
+  render() {
+    var _context3, _context4;
+
+    const _a = this.props,
+          {
+      type,
+      size,
+      theme,
+      style,
+      className,
+      position
+    } = _a,
+          restProps = __rest(_a, ["type", "size", "theme", "style", "className", "position"]);
+
+    const classNames = cls(className, {
+      [cssClasses.CAROUSEL_INDICATOR]: true,
+      [_concatInstanceProperty(_context3 = "".concat(cssClasses.CAROUSEL_INDICATOR, "-")).call(_context3, type)]: type,
+      [_concatInstanceProperty(_context4 = "".concat(cssClasses.CAROUSEL_INDICATOR, "-")).call(_context4, position)]: position
+    });
+    const indicatorContent = this.renderIndicatorContent();
+    return /*#__PURE__*/React.createElement("div", _Object$assign({
+      className: classNames,
+      style: style
+    }, getDataAttr(restProps)), indicatorContent);
+  }
+
+}
+
+CarouselIndicator.propTypes = {
+  activeKey: PropTypes.number,
+  className: PropTypes.string,
+  position: PropTypes.oneOf(strings.POSITION_MAP),
+  size: PropTypes.oneOf(strings.SIZE),
+  style: PropTypes.object,
+  theme: PropTypes.oneOf(strings.THEME_MAP),
+  total: PropTypes.number,
+  onIndicatorChange: PropTypes.func,
+  type: PropTypes.oneOf(strings.TYPE_MAP),
+  trigger: PropTypes.oneOf(strings.TRIGGER)
+};
+export default CarouselIndicator;

package/lib/es/carousel/index.d.ts

@@ -0,0 +1,58 @@
+import { ReactNode, ReactChild, ReactFragment, ReactPortal } from 'react';
+import PropTypes from 'prop-types';
+import BaseComponent from "../_base/baseComponent";
+import { CarouselProps } from './interface';
+import CarouselFoundation, { CarouselAdapter } from '@douyinfe/semi-foundation/lib/es/carousel/foundation';
+import '@douyinfe/semi-foundation/lib/es/carousel/carousel.css';
+export interface CarouselState {
+    activeIndex: number;
+    children: (ReactChild | ReactFragment | ReactPortal)[];
+    preIndex: number;
+    isReverse: boolean;
+    isInit: boolean;
+}
+declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
+    static propTypes: {
+        activeIndex: PropTypes.Requireable<number>;
+        animation: PropTypes.Requireable<"slide" | "fade">;
+        arrowProps: PropTypes.Requireable<object>;
+        autoPlay: PropTypes.Requireable<boolean | object>;
+        className: PropTypes.Requireable<string>;
+        defaultActiveIndex: PropTypes.Requireable<number>;
+        indicatorPosition: PropTypes.Requireable<"left" | "right" | "center">;
+        indicatorSize: PropTypes.Requireable<"small" | "medium">;
+        indicatorType: PropTypes.Requireable<"line" | "dot" | "columnar">;
+        theme: PropTypes.Requireable<"primary" | "dark" | "light">;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        arrowType: PropTypes.Requireable<"hover" | "always">;
+        showArrow: PropTypes.Requireable<boolean>;
+        showIndicator: PropTypes.Requireable<boolean>;
+        slideDirection: PropTypes.Requireable<"left" | "right">;
+        speed: PropTypes.Requireable<number>;
+        style: PropTypes.Requireable<object>;
+        trigger: PropTypes.Requireable<"hover" | "click">;
+    };
+    static defaultProps: CarouselProps;
+    foundation: CarouselFoundation;
+    constructor(props: CarouselProps);
+    get adapter(): CarouselAdapter<CarouselProps, CarouselState>;
+    static getDerivedStateFromProps(props: CarouselProps, state: CarouselState): Partial<CarouselState>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    play: () => void;
+    stop: () => void;
+    goTo: (targetIndex: number) => void;
+    prev: () => void;
+    next: () => void;
+    handleAutoPlay: () => void;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    onIndicatorChange: (activeIndex: number) => void;
+    getChildren: () => (ReactChild | ReactFragment | ReactPortal)[];
+    getValidIndex: (activeIndex: number) => number;
+    renderChildren: () => JSX.Element;
+    renderIndicator: () => JSX.Element;
+    renderArrow: () => JSX.Element;
+    render(): ReactNode;
+}
+export default Carousel;

package/lib/es/carousel/index.js

@@ -0,0 +1,311 @@
+import _debounce from "lodash/debounce";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { Children } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import BaseComponent from "../_base/baseComponent";
+import { cssClasses, numbers, strings } from '@douyinfe/semi-foundation/lib/es/carousel/constants';
+import CarouselFoundation from '@douyinfe/semi-foundation/lib/es/carousel/foundation';
+import CarouselIndicator from './CarouselIndicator';
+import CarouselArrow from './CarouselArrow';
+import '@douyinfe/semi-foundation/lib/es/carousel/carousel.css';
+import isNullOrUndefined from '@douyinfe/semi-foundation/lib/es/utils/isNullOrUndefined';
+
+class Carousel extends BaseComponent {
+  constructor(props) {
+    super(props);
+
+    this.play = () => {
+      return this.foundation.handleAutoPlay();
+    };
+
+    this.stop = () => {
+      return this.foundation.stop();
+    };
+
+    this.goTo = targetIndex => {
+      return this.foundation.goTo(targetIndex);
+    };
+
+    this.prev = () => {
+      return this.foundation.prev();
+    };
+
+    this.next = () => {
+      return this.foundation.next();
+    };
+
+    this.handleAutoPlay = () => {
+      if (!this.foundation.getIsControledComponent()) {
+        this.foundation.handleAutoPlay();
+      }
+    };
+
+    this.handleMouseEnter = () => {
+      const {
+        autoPlay
+      } = this.props;
+
+      if (typeof autoPlay !== 'object' || autoPlay.hoverToPause) {
+        this.foundation.stop();
+      }
+    };
+
+    this.handleMouseLeave = () => {
+      const {
+        autoPlay
+      } = this.props;
+
+      if ((typeof autoPlay !== 'object' || autoPlay.hoverToPause) && !this.foundation.getIsControledComponent()) {
+        this.foundation.handleAutoPlay();
+      }
+    };
+
+    this.onIndicatorChange = activeIndex => {
+      return this.foundation.throttleChange(activeIndex);
+    };
+
+    this.getChildren = () => {
+      var _context;
+
+      const {
+        children: originChildren
+      } = this.props;
+      return _filterInstanceProperty(_context = Children.toArray(originChildren)).call(_context, child => {
+        return /*#__PURE__*/React.isValidElement(child);
+      });
+    };
+
+    this.getValidIndex = activeIndex => {
+      return this.foundation.getValidIndex(activeIndex);
+    };
+
+    this.renderChildren = () => {
+      const {
+        speed,
+        animation
+      } = this.props;
+      const {
+        activeIndex,
+        children,
+        preIndex,
+        isInit
+      } = this.state;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, _mapInstanceProperty(children).call(children, (child, index) => {
+        const isCurrent = index === activeIndex;
+        const isPrev = index === this.getValidIndex(activeIndex - 1);
+        const isNext = index === this.getValidIndex(activeIndex + 1);
+        const animateStyle = {
+          transitionTimingFunction: 'ease',
+          transitionDuration: "".concat(speed, "ms"),
+          animationTimingFunction: 'ease',
+          animationDuration: "".concat(speed, "ms")
+        };
+        return /*#__PURE__*/React.cloneElement(child, {
+          style: _Object$assign(_Object$assign({}, child.props.style), animateStyle),
+          className: cls(child.props.className, {
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-prev")]: isPrev,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-next")]: isNext,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-current")]: isCurrent,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item")]: true,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-active")]: isCurrent,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-slide-in")]: animation === 'slide' && !isInit && isCurrent,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-slide-out")]: animation === 'slide' && !isInit && index === preIndex
+          })
+        });
+      }));
+    };
+
+    this.renderIndicator = () => {
+      const {
+        children,
+        activeIndex
+      } = this.state;
+      const {
+        showIndicator,
+        indicatorType,
+        theme,
+        indicatorPosition,
+        indicatorSize,
+        trigger
+      } = this.props;
+      const carouselIndicatorCls = cls({
+        [cssClasses.CAROUSEL_INDICATOR]: true
+      });
+
+      if (showIndicator && children.length > 1) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: carouselIndicatorCls
+        }, /*#__PURE__*/React.createElement(CarouselIndicator, {
+          type: indicatorType,
+          total: children.length,
+          activeIndex: activeIndex,
+          position: indicatorPosition,
+          trigger: trigger,
+          size: indicatorSize,
+          theme: theme,
+          onIndicatorChange: this.onIndicatorChange
+        }));
+      }
+
+      return null;
+    };
+
+    this.renderArrow = () => {
+      const {
+        children
+      } = this.state;
+      const {
+        showArrow,
+        arrowType,
+        theme,
+        arrowProps
+      } = this.props;
+      const timing = this.foundation.getSwitchingTime();
+
+      if (showArrow && children.length > 1) {
+        return /*#__PURE__*/React.createElement(CarouselArrow, {
+          type: arrowType,
+          theme: theme,
+          prev: this.prev,
+          next: this.next,
+          timing: timing,
+          arrowProps: arrowProps
+        });
+      }
+
+      return null;
+    };
+
+    this.foundation = new CarouselFoundation(this.adapter);
+    const defaultActiveIndex = this.foundation.getDefaultActiveIndex();
+    this.state = {
+      activeIndex: defaultActiveIndex,
+      children: this.getChildren(),
+      preIndex: defaultActiveIndex,
+      isReverse: false,
+      isInit: true
+    };
+  }
+
+  get adapter() {
+    return _Object$assign(_Object$assign({}, super.adapter), {
+      notifyChange: (activeIndex, preIndex) => {
+        this.props.onChange(activeIndex, preIndex);
+      },
+      setNewActiveIndex: activeIndex => {
+        this.setState({
+          activeIndex
+        });
+      },
+      setPreActiveIndex: preIndex => {
+        this.setState({
+          preIndex
+        });
+      },
+      setIsReverse: isReverse => {
+        this.setState({
+          isReverse
+        });
+      },
+      setIsInit: isInit => {
+        this.setState({
+          isInit
+        });
+      }
+    });
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const states = {};
+
+    if (!isNullOrUndefined(props.activeIndex) && props.activeIndex !== state.activeIndex) {
+      states.activeIndex = props.activeIndex;
+    }
+
+    return states;
+  }
+
+  componentDidMount() {
+    this.handleAutoPlay();
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  render() {
+    var _context2;
+
+    const {
+      animation,
+      className,
+      style,
+      slideDirection
+    } = this.props;
+    const {
+      isReverse
+    } = this.state;
+    const carouselWrapperCls = cls(className, {
+      [cssClasses.CAROUSEL]: true
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      // role='listbox'
+      // tabIndex={0}
+      className: carouselWrapperCls,
+      style: style,
+      onMouseEnter: _debounce(this.handleMouseEnter, 400),
+      onMouseLeave: _debounce(this.handleMouseLeave, 400)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cls([_concatInstanceProperty(_context2 = "".concat(cssClasses.CAROUSEL_CONTENT, "-")).call(_context2, animation)], {
+        ["".concat(cssClasses.CAROUSEL_CONTENT)]: true,
+        ["".concat(cssClasses.CAROUSEL_CONTENT, "-reverse")]: slideDirection === 'left' ? isReverse : !isReverse
+      })
+    }, this.renderChildren()), this.renderIndicator(), this.renderArrow());
+  }
+
+}
+
+Carousel.propTypes = {
+  activeIndex: PropTypes.number,
+  animation: PropTypes.oneOf(strings.ANIMATION_MAP),
+  arrowProps: PropTypes.object,
+  autoPlay: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  className: PropTypes.string,
+  defaultActiveIndex: PropTypes.number,
+  indicatorPosition: PropTypes.oneOf(strings.POSITION_MAP),
+  indicatorSize: PropTypes.oneOf(strings.SIZE),
+  indicatorType: PropTypes.oneOf(strings.TYPE_MAP),
+  theme: PropTypes.oneOf(strings.THEME_MAP),
+  onChange: PropTypes.func,
+  arrowType: PropTypes.oneOf(strings.ARROW_MAP),
+  showArrow: PropTypes.bool,
+  showIndicator: PropTypes.bool,
+  slideDirection: PropTypes.oneOf(strings.DIRECTION),
+  speed: PropTypes.number,
+  style: PropTypes.object,
+  trigger: PropTypes.oneOf(strings.TRIGGER)
+};
+Carousel.defaultProps = {
+  children: [],
+  animation: 'slide',
+  autoPlay: true,
+  arrowType: 'always',
+  defaultActiveIndex: numbers.DEFAULT_ACTIVE_INDEX,
+  indicatorPosition: 'center',
+  indicatorSize: 'small',
+  indicatorType: 'dot',
+  theme: 'light',
+  onChange: () => undefined,
+  showArrow: true,
+  showIndicator: true,
+  slideDirection: 'left',
+  speed: numbers.DEFAULT_SPEED,
+  trigger: 'click'
+};
+export default Carousel;