Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 217x 17x 217x 16x 16x 217x 217x 78649x 78649x 78649x 78649x 78649x 16x 217x 17x 17x | import React from 'react';
import classnames from 'classnames';
import {
dotsDefaultProps,
dotsPropTypes
} from './types';
const getDotCount = (spec) => Math.ceil(spec.slideCount / spec.dotsScroll);
const Dots = ({
slideCount,
dotsScroll,
slidesToShow,
infinite,
activeIndex,
clickHandler,
onMouseEnter,
onMouseOver,
onMouseLeave,
customPaging,
appendDots,
dotsClass
}) => {
const ClickHandler = (options, e) => {
// In Autoplay the focus stays on clicked button even after transition
// to next slide. That only goes away by click somewhere outside
e.preventDefault();
clickHandler(options);
};
// Apply join & split to Array to pre-fill it for IE8
//
// Credit: http://stackoverflow.com/a/13735425/1849458
const dotCount = getDotCount({
slideCount,
dotsScroll,
slidesToShow,
infinite
});
const dots = Array.apply(
[],
Array(dotCount + 1)
.join('0')
.split('')
).map((x, i) => {
const leftBound = i * dotsScroll;
const rightBound = i * dotsScroll + (dotsScroll - 1);
const className = classnames({
'carousel-dots-active':
activeIndex >= leftBound && activeIndex <= rightBound
});
const dotOptions = {
message: 'dots',
index: i,
dotsScroll,
activeIndex
};
return (
<li className={`${className} carousel-dot-${i + 1}`} key={`${new Date().getTime() * i}`}>
{React.cloneElement(customPaging(i), {
onClick: (e) => ClickHandler(dotOptions, e)
})}
</li>
);
});
return React.cloneElement(appendDots(dots), {
className: dotsClass,
...{ onMouseEnter, onMouseOver, onMouseLeave }
});
};
Dots.defaultProps = dotsDefaultProps;
Dots.propTypes = dotsPropTypes;
export default Dots;
|