1 | import React from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import classNames from 'classnames';
|
4 | import { mapToCssModules } from './utils';
|
5 |
|
6 | const CarouselControl = (props) => {
|
7 | const { direction, onClickHandler, cssModule, directionText, className } = props;
|
8 |
|
9 | const anchorClasses = mapToCssModules(classNames(
|
10 | className,
|
11 | `carousel-control-${direction}`
|
12 | ), cssModule);
|
13 |
|
14 | const iconClasses = mapToCssModules(classNames(
|
15 | `carousel-control-${direction}-icon`
|
16 | ), cssModule);
|
17 |
|
18 | const screenReaderClasses = mapToCssModules(classNames(
|
19 | 'sr-only'
|
20 | ), cssModule);
|
21 |
|
22 |
|
23 | return (
|
24 | <a
|
25 | className={anchorClasses}
|
26 | role="button"
|
27 | tabIndex="0"
|
28 | onClick={(e) => {
|
29 | e.preventDefault();
|
30 | onClickHandler();
|
31 | }}
|
32 | >
|
33 | <span className={iconClasses} aria-hidden="true" />
|
34 | <span className={screenReaderClasses}>{directionText || direction}</span>
|
35 | </a>
|
36 | );
|
37 | };
|
38 |
|
39 | CarouselControl.propTypes = {
|
40 | direction: PropTypes.oneOf(['prev', 'next']).isRequired,
|
41 | onClickHandler: PropTypes.func.isRequired,
|
42 | cssModule: PropTypes.object,
|
43 | directionText: PropTypes.string,
|
44 | className: PropTypes.string,
|
45 | };
|
46 |
|
47 | export default CarouselControl;
|