@zohodesk/dot/es/Onboarding/CarouselDots/CarouselDot/CarouselDot.js

In this Library, we Provide Some Basic Components to Build Your Application

import React from 'react';
/* Props */

import { propTypes } from "./props/propTypes.js";
import { defaultProps } from "./props/defaultProps.js";
/* Style */

import style from "./css/CarouselDot.module.css";

function CarouselDot(props) {
  const {
    onClick,
    isActive,
    index,
    isAnimationPaused,
    testId,
    customId
  } = props;

  function handleClick() {
    typeof onClick === "function" && onClick(index);
  }

  return /*#__PURE__*/React.createElement("div", {
    className: `${style.bullet} ${isAnimationPaused ? style.animationPaused : ''} ${isActive ? style.bulletActive : style.bulletNormal}`,
    onClick: handleClick,
    "data-id": customId,
    "data-test-id": testId
  });
}

CarouselDot.propTypes = propTypes;
CarouselDot.defaultProps = defaultProps;
export default CarouselDot;