GoScrobble/web/node_modules/reactstrap/es/CarouselControl.js

48 lines
1.7 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules } from './utils';
var CarouselControl = function CarouselControl(props) {
var direction = props.direction,
onClickHandler = props.onClickHandler,
cssModule = props.cssModule,
directionText = props.directionText,
className = props.className;
var anchorClasses = mapToCssModules(classNames(className, "carousel-control-" + direction), cssModule);
var iconClasses = mapToCssModules(classNames("carousel-control-" + direction + "-icon"), cssModule);
var screenReaderClasses = mapToCssModules(classNames('sr-only'), cssModule);
return (
/*#__PURE__*/
// We need to disable this linting rule to use an `<a>` instead of
// `<button>` because that's what the Bootstrap examples require:
// https://getbootstrap.com/docs/4.5/components/carousel/#with-controls
// eslint-disable-next-line jsx-a11y/anchor-is-valid
React.createElement("a", {
className: anchorClasses,
style: {
cursor: "pointer"
},
role: "button",
tabIndex: "0",
onClick: function onClick(e) {
e.preventDefault();
onClickHandler();
}
}, /*#__PURE__*/React.createElement("span", {
className: iconClasses,
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement("span", {
className: screenReaderClasses
}, directionText || direction))
);
};
CarouselControl.propTypes = {
direction: PropTypes.oneOf(['prev', 'next']).isRequired,
onClickHandler: PropTypes.func.isRequired,
cssModule: PropTypes.object,
directionText: PropTypes.string,
className: PropTypes.string
};
export default CarouselControl;