@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';
import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
const DEFAULT_HIGHLIGHT_SLIDER_COLORS = {
  backgroundColor: '#E0E0E0',
  fillColor: '#808080'
};
const HighlightSlider = ({
  count,
  colors = DEFAULT_HIGHLIGHT_SLIDER_COLORS,
  onIndexChange,
  currentIndex,
  duration = 10,
  shouldEnableKeyboardHighlighting
}) => {
  const colorScheme = useColorScheme();
  const isInteractive = typeof onIndexChange === 'function';
  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlightingEffective && isInteractive);
  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,
    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective,
    shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
    isInteractive: isInteractive
  })), [colors, count, currentIndex, duration, handleClick, handleFinish, shouldEnableKeyboardHighlightingEffective, shouldShowKeyboardHighlighting, isInteractive]);
  return /*#__PURE__*/React.createElement(StyledHighlightSlider, null, content);
};
HighlightSlider.displayName = 'HighlightSlider';
export default HighlightSlider;
//# sourceMappingURL=HighlightSlider.js.map