mango-ui-v3/components/Slider.tsx

import { FunctionComponent, useEffect, useState } from 'react'
import tw from 'twin.macro'
import styled from '@emotion/styled'
import Slider from 'rc-slider'
import 'rc-slider/assets/index.css'

type StyledSliderProps = {
  enableTransition?: boolean
  disabled?: boolean
}

const StyledSlider = styled(Slider)<StyledSliderProps>`
  .rc-slider-rail {
    ${tw`bg-th-bkg-3 h-2.5 rounded-full`}
  }
  .rc-slider-track {
    ${tw`bg-th-primary h-2.5 rounded-full ring-1 ring-th-primary ring-inset`}
    ${({ enableTransition }) =>
      enableTransition && tw`transition-all duration-500`}
  }
  .rc-slider-step {
    ${tw`hidden`}
  }
  .rc-slider-handle {
    ${tw`border-4 border-th-primary h-4 w-4`}
    background: #fff;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
    margin-top: -3px;
    ${({ enableTransition }) =>
      enableTransition && tw`transition-all duration-500`}
    ${({ disabled }) => disabled && tw`bg-th-fgd-3 border-th-fgd-4`}
  }
  ${({ disabled }) => disabled && 'background-color: transparent'}
`

const StyledSliderButtonWrapper = styled.div`
  ${tw`absolute left-0 top-5 w-full`}
`

type StyledSliderButtonProps = {
  disabled: boolean
  styleValue: number
  sliderValue: number
}

const StyledSliderButton = styled.button<StyledSliderButtonProps>`
  ${tw`bg-none text-th-fgd-3 transition-all duration-300 hover:text-th-primary focus:outline-none`}
  font-size: 0.65rem;
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  left: 0%;
  :nth-of-type(2) {
    left: 23%;
    transform: translateX(-23%);
  }
  :nth-of-type(3) {
    left: 50%;
    transform: translateX(-50%);
  }
  :nth-of-type(4) {
    left: 76%;
    transform: translateX(-76%);
  }
  :nth-of-type(5) {
    left: 100%;
    transform: translateX(-100%);
  }
  ${({ styleValue, sliderValue }) => styleValue < sliderValue && tw`opacity-40`}
  ${({ styleValue, sliderValue }) =>
    styleValue === sliderValue && tw`text-th-primary`}
  ${({ disabled }) =>
    disabled && tw`cursor-not-allowed text-th-fgd-4 hover:text-th-fgd-4`}
`

type SliderProps = {
  onChange: (x) => void
  onAfterChange?: (x) => void
  step: number
  value: number
  disabled?: boolean
  max?: number
  maxButtonTransition?: boolean
}

const AmountSlider: FunctionComponent<SliderProps> = ({
  onChange,
  onAfterChange,
  step,
  value,
  disabled,
  max,
  maxButtonTransition,
}) => {
  const [enableTransition, setEnableTransition] = useState(false)

  useEffect(() => {
    if (maxButtonTransition) {
      setEnableTransition(true)
    }
  }, [maxButtonTransition])

  useEffect(() => {
    if (enableTransition) {
      const transitionTimer = setTimeout(() => {
        setEnableTransition(false)
      }, 500)
      return () => clearTimeout(transitionTimer)
    }
  }, [enableTransition])

  const handleSliderButtonClick = (value) => {
    onChange(value)
    setEnableTransition(true)
  }

  return (
    <div className="relative">
      <StyledSlider
        min={0}
        max={max}
        value={value || 0}
        onChange={onChange}
        onAfterChange={onAfterChange}
        step={step}
        enableTransition={enableTransition}
        disabled={disabled}
      />
      <StyledSliderButtonWrapper>
        <StyledSliderButton
          disabled={disabled}
          onClick={() => handleSliderButtonClick(0)}
          styleValue={0}
          sliderValue={value}
        >
          0%
        </StyledSliderButton>
        <StyledSliderButton
          disabled={disabled}
          onClick={() => handleSliderButtonClick(25)}
          styleValue={25}
          sliderValue={value}
        >
          25%
        </StyledSliderButton>
        <StyledSliderButton
          disabled={disabled}
          onClick={() => handleSliderButtonClick(50)}
          styleValue={50}
          sliderValue={value}
        >
          50%
        </StyledSliderButton>
        <StyledSliderButton
          disabled={disabled}
          onClick={() => handleSliderButtonClick(75)}
          styleValue={75}
          sliderValue={value}
        >
          75%
        </StyledSliderButton>
        <StyledSliderButton
          disabled={disabled}
          onClick={() => handleSliderButtonClick(100)}
          styleValue={100}
          sliderValue={value}
        >
          100%
        </StyledSliderButton>
      </StyledSliderButtonWrapper>
    </div>
  )
}

export default AmountSlider