wix-style-react/src/Carousel/SliderArrow/SliderArrow.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import IconButton from '../../IconButton/IconButton';
import { classes } from '../Carousel.st.css';

const skinPriorityMap = {
  standard: 'secondary',
  inverted: 'primary',
  light: 'primary',
  transparent: 'primary',
  premium: 'primary',
};

const SliderArrow = ({
  dataHook,
  arrowSize,
  buttonSkin,
  icon,
  className,
  controlsStartEnd,
  ...remainingProps
}) => {
  const isControlOnEdge = className.includes('slick-disabled');

  return isControlOnEdge && controlsStartEnd === 'hidden' ? null : (
    <div {...remainingProps} data-hook={dataHook} className={className}>
      <IconButton
        className={classes.controls}
        skin={buttonSkin}
        size={arrowSize}
        disabled={isControlOnEdge}
        priority={skinPriorityMap[buttonSkin]}
      >
        {icon}
      </IconButton>
    </div>
  );
};

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;