kopia lustrzana https://github.com/Tldraw/Tldraw
63 wiersze
1.7 KiB
TypeScript
63 wiersze
1.7 KiB
TypeScript
import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'
|
|
import { useEditor } from '@tldraw/editor'
|
|
import { memo, useCallback } from 'react'
|
|
import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
|
|
import { useTranslation } from '../../hooks/useTranslation/useTranslation'
|
|
|
|
/** @internal */
|
|
export interface TLUiSliderProps {
|
|
steps: number
|
|
value: number | null
|
|
label: string
|
|
title: string
|
|
onValueChange: (value: number) => void
|
|
'data-testid'?: string
|
|
}
|
|
|
|
/** @internal */
|
|
export const TldrawUiSlider = memo(function Slider(props: TLUiSliderProps) {
|
|
const { title, steps, value, label, onValueChange } = props
|
|
const editor = useEditor()
|
|
const msg = useTranslation()
|
|
|
|
const handleValueChange = useCallback(
|
|
(value: number[]) => {
|
|
onValueChange(value[0])
|
|
},
|
|
[onValueChange]
|
|
)
|
|
|
|
const handlePointerDown = useCallback(() => {
|
|
editor.mark('click slider')
|
|
}, [editor])
|
|
|
|
const handlePointerUp = useCallback(() => {
|
|
if (!value) return
|
|
onValueChange(value)
|
|
}, [value, onValueChange])
|
|
|
|
return (
|
|
<div className="tlui-slider__container">
|
|
<Root
|
|
data-testid={props['data-testid']}
|
|
className="tlui-slider"
|
|
area-label="Opacity"
|
|
dir="ltr"
|
|
min={0}
|
|
max={steps}
|
|
step={1}
|
|
value={value ? [value] : undefined}
|
|
onPointerDown={handlePointerDown}
|
|
onValueChange={handleValueChange}
|
|
onPointerUp={handlePointerUp}
|
|
title={title + ' — ' + msg(label as TLUiTranslationKey)}
|
|
>
|
|
<Track className="tlui-slider__track" dir="ltr">
|
|
{value !== null && <Range className="tlui-slider__range" dir="ltr" />}
|
|
</Track>
|
|
{value !== null && <Thumb className="tlui-slider__thumb" dir="ltr" />}
|
|
</Root>
|
|
</div>
|
|
)
|
|
})
|