UNPKG

tldraw

Version:

A tiny little drawing editor.

8 lines (7 loc) 3.06 kB
{ "version": 3, "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiSlider.tsx"], "sourcesContent": ["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport { memo, useCallback } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark(id: string): void\n\t'data-testid'?: string\n}\n\n/** @public @react */\nexport const TldrawUiSlider = memo(function Slider({\n\tonHistoryMark,\n\ttitle,\n\tsteps,\n\tvalue,\n\tlabel,\n\tonValueChange,\n\t['data-testid']: testId,\n}: TLUiSliderProps) {\n\tconst msg = useTranslation()\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\tonHistoryMark('click slider')\n\t}, [onHistoryMark])\n\n\tconst handlePointerUp = useCallback(() => {\n\t\tif (!value) return\n\t\tonValueChange(value)\n\t}, [value, onValueChange])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<Root\n\t\t\t\tdata-testid={testId}\n\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\tarea-label=\"Opacity\"\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tmin={0}\n\t\t\t\tmax={steps}\n\t\t\t\tstep={1}\n\t\t\t\tvalue={value ? [value] : undefined}\n\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonPointerUp={handlePointerUp}\n\t\t\t\ttitle={title + ' \u2014 ' + msg(label as TLUiTranslationKey)}\n\t\t\t>\n\t\t\t\t<Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t{value !== null && <Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t</Track>\n\t\t\t\t{value !== null && <Thumb className=\"tlui-slider__thumb\" dir=\"ltr\" />}\n\t\t\t</Root>\n\t\t</div>\n\t)\n})\n"], "mappings": "AA8CG,SAeqB,KAfrB;AA9CH,SAAS,OAAO,MAAM,OAAO,aAAa;AAC1C,SAAS,MAAM,mBAAmB;AAElC,SAAS,sBAAsB;AAcxB,MAAM,iBAAiB,KAAK,SAAS,OAAO;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAClB,GAAoB;AACnB,QAAM,MAAM,eAAe;AAE3B,QAAM,oBAAoB;AAAA,IACzB,CAACA,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,oBAAoB,YAAY,MAAM;AAC3C,kBAAc,cAAc;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,kBAAkB,YAAY,MAAM;AACzC,QAAI,CAAC,MAAO;AACZ,kBAAc,KAAK;AAAA,EACpB,GAAG,CAAC,OAAO,aAAa,CAAC;AAEzB,SACC,oBAAC,SAAI,WAAU,0BACd;AAAA,IAAC;AAAA;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,cAAW;AAAA,MACX,KAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,QAAQ,CAAC,KAAK,IAAI;AAAA,MACzB,eAAe;AAAA,MACf,eAAe;AAAA,MACf,aAAa;AAAA,MACb,OAAO,QAAQ,aAAQ,IAAI,KAA2B;AAAA,MAEtD;AAAA,4BAAC,SAAM,WAAU,sBAAqB,KAAI,OACxC,oBAAU,QAAQ,oBAAC,SAAM,WAAU,sBAAqB,KAAI,OAAM,GACpE;AAAA,QACC,UAAU,QAAQ,oBAAC,SAAM,WAAU,sBAAqB,KAAI,OAAM;AAAA;AAAA;AAAA,EACpE,GACD;AAEF,CAAC;", "names": ["value"] }