@chayns-components/core/lib/esm/components/highlight-slider/HighlightSlider.js

A set of beautiful React components for developing your own applications with chayns.

import React, { useCallback, useMemo } from 'react';
import { StyledHighlightSlider } from './HighlightSlider.styles';
import HighlightSliderItem from './highlight-slider-item/HighlightSliderItem';
const DEFAULT_HIGHLIGHT_SLIDER_COLORS = {
  backgroundColor: '#E0E0E0',
  fillColor: '#808080'
};
const HighlightSlider = _ref => {
  let {
    count,
    colors = DEFAULT_HIGHLIGHT_SLIDER_COLORS,
    onIndexChange,
    currentIndex,
    duration = 10
  } = _ref;
  const handleFinish = useCallback(index => {
    if (typeof onIndexChange === 'function') {
      onIndexChange(index >= count - 1 ? 0 : index + 1);
    }
  }, [count, onIndexChange]);
  const handleClick = useCallback(index => {
    if (typeof onIndexChange === 'function') {
      onIndexChange(index);
    }
  }, [onIndexChange]);
  const content = useMemo(() => Array.from({
    length: count
  }).map((value, index) => /*#__PURE__*/React.createElement(HighlightSliderItem, {
    key: `highlight-slider-item--${value}`,
    index: index,
    duration: duration,
    colors: colors,
    isActive: currentIndex === index,
    isFinished: currentIndex > index,
    onClick: handleClick,
    onFinish: handleFinish
  })), [colors, count, currentIndex, duration, handleClick, handleFinish]);
  return /*#__PURE__*/React.createElement(StyledHighlightSlider, null, content);
};
HighlightSlider.displayName = 'HighlightSlider';
export default HighlightSlider;
//# sourceMappingURL=HighlightSlider.js.map