@wix/design-system
Version:
@wix/design-system
28 lines • 1.44 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import IconButton from '../../IconButton/IconButton';
import { st, classes } from '../Carousel.st.css.js';
const skinPriorityMap = {
standard: 'secondary',
inverted: 'primary',
light: 'primary',
transparent: 'primary',
premium: 'primary',
};
const SliderArrow = ({ dataHook, arrowSize, buttonSkin, icon, className, // do not pass - this is overrided by react-slick slider
gradientClassName, controlsStartEnd, ...remainingProps }) => {
const isControlOnEdge = className.includes('slick-disabled');
if (isControlOnEdge && controlsStartEnd === 'hidden') {
return null;
}
const arrow = (React.createElement(IconButton, { dataHook: `${dataHook}-element`, className: st(classes.controls), skin: buttonSkin, size: arrowSize, disabled: isControlOnEdge, priority: skinPriorityMap[buttonSkin] }, icon));
return (React.createElement("div", { ...remainingProps, className: className, "data-hook": dataHook, style: { height: '100%' } }, !!gradientClassName ? (React.createElement("div", { className: gradientClassName }, arrow)) : (arrow)));
};
SliderArrow.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** Icon to be rendered within the icon button */
icon: PropTypes.element.isRequired,
};
export default SliderArrow;
//# sourceMappingURL=SliderArrow.js.map