@livelike/react-native/src/hooks/useEmojiSlider.ts

LiveLike React Native package

import { useCallback, useEffect, useState } from 'react';

export type UseEmojiSliderArg = {
  thumbImages: { min: number; imageUrl: string }[];
  onSlidingComplete: (value: number) => void;
  onValueChange?: (value: number) => void;
  value: number;
  initialValue?: number;
};

/**
 * @description useEmojiSlider hook provides state logic and effects for LLEmojiSlider component
 */
export const useEmojiSlider = ({
  thumbImages,
  onValueChange,
  onSlidingComplete,
  initialValue,
  value,
}: UseEmojiSliderArg) => {
  const [sliderInput, setSliderInput] = useState(value);
  const [thumbImg, setThumbImg] = useState('');

  const onValueChangeHandler = useCallback(
    ([value]) => {
      for (let i = 0; i < thumbImages.length; i++) {
        const min = thumbImages[i].min;
        const max = thumbImages[i + 1]?.min ?? 1;
        if (
          value >= min &&
          value <= max &&
          thumbImages[i].imageUrl !== thumbImg
        ) {
          setThumbImg(thumbImages[i].imageUrl);
          return setSliderInput(value);
        }
      }
      onValueChange?.(value);
    },
    [thumbImages, thumbImg]
  );

  const onSlidingCompleteHandler = useCallback(([value]) => {
    setSliderInput(value);
    onSlidingComplete(value);
  }, []);

  useEffect(() => {
    if (!thumbImg && initialValue) {
      onValueChangeHandler([initialValue]);
    }
  }, [initialValue, thumbImg]);

  return {
    sliderInput,
    thumbImg,
    onSlidingCompleteHandler,
    onValueChangeHandler,
  };
};