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

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

import React, { memo } from 'react';
import { Flex } from '@zohodesk/layout';
import { propTypes } from "./props/propTypes";
import { defaultProps } from "./props/defaultProps";
import CarouselDot from "./CarouselDot/CarouselDot";
import style from "./css/CarouselDots.module.css";

const CarouselDots = _ref => {
  let {
    sliderDetails,
    currentSliderIndex,
    isAnimationPaused,
    onClick,
    onMouseEnter,
    onMouseLeave,
    testId,
    customId
  } = _ref;
  return /*#__PURE__*/React.createElement(Flex, {
    $ui_displayMode: "flex",
    $ui_alignItems: "center",
    $ui_className: style.btnCnt,
    $ui_justifyContent: "center",
    $tagAttributes_container: {
      onMouseEnter: onMouseEnter,
      onMouseLeave: onMouseLeave
    },
    customId: customId,
    testId: testId
  }, sliderDetails.map((data, index) => /*#__PURE__*/React.createElement(CarouselDot, {
    key: data.tabName,
    isActive: index === currentSliderIndex,
    isAnimationPaused: isAnimationPaused,
    onClick: onClick,
    index: index,
    customId: customId + '_' + index,
    testId: testId + '_' + index
  })));
};

CarouselDots.propTypes = propTypes;
CarouselDots.defaultProps = defaultProps;
export default /*#__PURE__*/memo(CarouselDots);