|
- import React from 'react';
- import PropTypes from 'prop-types';
- import classNames from 'classnames';
- import { mapToCssModules } from './utils';
-
- var CarouselIndicators = function CarouselIndicators(props) {
- var items = props.items,
- activeIndex = props.activeIndex,
- cssModule = props.cssModule,
- onClickHandler = props.onClickHandler,
- className = props.className;
- var listClasses = mapToCssModules(classNames(className, 'carousel-indicators'), cssModule);
- var indicators = items.map(function (item, idx) {
- var indicatorClasses = mapToCssModules(classNames({
- active: activeIndex === idx
- }), cssModule);
- return React.createElement("li", {
- key: "" + (item.key || Object.values(item).join('')),
- onClick: function onClick(e) {
- e.preventDefault();
- onClickHandler(idx);
- },
- className: indicatorClasses
- });
- });
- return React.createElement("ol", {
- className: listClasses
- }, indicators);
- };
-
- CarouselIndicators.propTypes = {
- items: PropTypes.array.isRequired,
- activeIndex: PropTypes.number.isRequired,
- cssModule: PropTypes.object,
- onClickHandler: PropTypes.func.isRequired,
- className: PropTypes.string
- };
- export default CarouselIndicators;
|