179 lines
4.8 KiB
TypeScript
179 lines
4.8 KiB
TypeScript
export {}
|
|
|
|
// 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
|