@tamagui/slider 1.0.1-beta.193 → 1.0.1-beta.195
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Slider.js +3 -1
- package/dist/cjs/Slider.js.map +2 -2
- package/dist/esm/Slider.js +3 -1
- package/dist/esm/Slider.js.map +2 -2
- package/dist/jsx/Slider.js +3 -1
- package/dist/jsx/Slider.js.map +2 -2
- package/package.json +8 -8
- package/src/Slider.tsx +3 -1
- package/types/Slider.d.ts +33 -33
- package/types/SliderImpl.d.ts +6 -6
package/dist/cjs/Slider.js
CHANGED
|
@@ -125,9 +125,10 @@ const SliderVertical = React.forwardRef(
|
|
|
125
125
|
ref: (0, import_compose_refs.composeRefs)(forwardedRef, sliderRef),
|
|
126
126
|
...sliderProps,
|
|
127
127
|
orientation: "vertical",
|
|
128
|
-
onLayout: () => {
|
|
128
|
+
onLayout: ({ nativeEvent: { layout } }) => {
|
|
129
129
|
var _a;
|
|
130
130
|
(_a = sliderRef.current) == null ? void 0 : _a.measure((_x, _y, _width, height, _pageX, pageY) => {
|
|
131
|
+
console.log("same?", layout, height, pageY);
|
|
131
132
|
setState({
|
|
132
133
|
size: height,
|
|
133
134
|
offset: pageY
|
|
@@ -300,6 +301,7 @@ const SliderThumb = React.forwardRef(
|
|
|
300
301
|
},
|
|
301
302
|
size: sizeProp ?? context.size ?? "$4",
|
|
302
303
|
onLayout: (e) => {
|
|
304
|
+
console.log("did layout");
|
|
303
305
|
setSize(e.nativeEvent.layout[orientation.sizeProp]);
|
|
304
306
|
},
|
|
305
307
|
...{
|
package/dist/cjs/Slider.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Slider.tsx"],
|
|
4
|
-
"sourcesContent": ["// forked from radix-ui\n\nimport { composeRefs, useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { clamp, composeEventHandlers } from '@tamagui/helpers'\nimport { SizableStackProps, ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport {\n ARROW_KEYS,\n BACK_KEYS,\n PAGE_KEYS,\n SLIDER_NAME,\n SliderOrientationProvider,\n SliderProvider,\n useSliderContext,\n useSliderOrientationContext,\n} from './constants'\nimport {\n convertValueToPercentage,\n getClosestValueIndex,\n getDecimalCount,\n getLabel,\n getNextSortedValues,\n getThumbInBoundsOffset,\n hasMinStepsBetweenValues,\n linearScale,\n roundValue,\n} from './helpers'\nimport { SliderFrame, SliderImpl } from './SliderImpl'\nimport {\n ScopedProps,\n SliderContextValue,\n SliderHorizontalProps,\n SliderProps,\n SliderTrackProps,\n SliderVerticalProps,\n} from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderHorizontal = React.forwardRef<View, SliderHorizontalProps>(\n (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {\n const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const direction = useDirection(dir)\n const isDirectionLTR = direction === 'ltr'\n const sliderRef = React.useRef<View>(null)\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = isDirectionLTR ? [min, max] : [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isDirectionLTR ? 'left' : 'right'}\n endEdge={isDirectionLTR ? 'right' : 'left'}\n direction={isDirectionLTR ? 1 : -1}\n sizeProp=\"width\"\n size={state.size}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n dir={direction}\n {...sliderProps}\n orientation=\"horizontal\"\n onLayout={() => {\n sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {\n setState({\n size: width,\n offset: pageX,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationX)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageX - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS[direction].includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderVertical\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderVertical = React.forwardRef<View, SliderVerticalProps>(\n (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n const sliderRef = React.useRef<View>(null)\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge=\"bottom\"\n endEdge=\"top\"\n sizeProp=\"height\"\n size={state.size}\n direction={1}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n {...sliderProps}\n orientation=\"vertical\"\n onLayout={() => {\n sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {\n setState({\n size: height,\n offset: pageY,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationY)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageY - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS.ltr.includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrack\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRACK_NAME = 'SliderTrack'\n\ntype SliderTrackElement = HTMLElement | View\n\nexport const SliderTrackFrame = styled(SliderFrame, {\n name: 'SliderTrack',\n height: '100%',\n width: '100%',\n backgroundColor: '$background',\n position: 'relative',\n borderRadius: 100_000,\n overflow: 'hidden',\n})\n\nconst SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(\n (props: ScopedProps<SliderTrackProps>, forwardedRef) => {\n const { __scopeSlider, ...trackProps } = props\n const context = useSliderContext(TRACK_NAME, __scopeSlider)\n return (\n <SliderTrackFrame\n data-disabled={context.disabled ? '' : undefined}\n data-orientation={context.orientation}\n orientation={context.orientation}\n size={context.size}\n {...trackProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSliderTrack.displayName = TRACK_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrackActive\n * -----------------------------------------------------------------------------------------------*/\n\nconst RANGE_NAME = 'SliderTrackActive'\n\nexport const SliderTrackActiveFrame = styled(SliderFrame, {\n name: 'SliderTrackActive',\n backgroundColor: '$background',\n position: 'absolute',\n})\n\ntype SliderTrackActiveProps = GetProps<typeof SliderTrackActiveFrame>\n\nconst SliderTrackActive = React.forwardRef<View, SliderTrackActiveProps>(\n (props: ScopedProps<SliderTrackActiveProps>, forwardedRef) => {\n const { __scopeSlider, ...rangeProps } = props\n const context = useSliderContext(RANGE_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider)\n const ref = React.useRef<View>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const valuesCount = context.values.length\n const percentages = context.values.map((value) =>\n convertValueToPercentage(value, context.min, context.max)\n )\n const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0\n const offsetEnd = 100 - Math.max(...percentages)\n\n return (\n <SliderTrackActiveFrame\n orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n size={context.size}\n {...rangeProps}\n ref={composedRefs}\n {...{\n [orientation.startEdge]: offsetStart + '%',\n [orientation.endEdge]: offsetEnd + '%',\n }}\n {...(orientation.sizeProp === 'width'\n ? {\n height: '100%',\n }\n : {\n left: 0,\n right: 0,\n })}\n />\n )\n }\n)\n\nSliderTrackActive.displayName = RANGE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SliderThumb'\n\n// TODO make this customizable through tamagui\n// so we can accurately use it for estimatedSize below\nconst getThumbSize = (val?: SizeTokens | number) => {\n const size = typeof val === 'number' ? val : getSize(val, -1)\n return {\n width: size,\n height: size,\n minWidth: size,\n minHeight: size,\n }\n}\n\nexport const SliderThumbFrame = styled(ThemeableStack, {\n name: 'SliderThumb',\n position: 'absolute',\n // TODO not taking up 2\n bordered: 2,\n // OR THIS\n borderWidth: 2,\n backgrounded: true,\n pressTheme: isWeb,\n focusTheme: isWeb,\n hoverTheme: isWeb,\n\n variants: {\n size: {\n '...size': getThumbSize,\n },\n } as const,\n})\n\ninterface SliderThumbProps extends SizableStackProps {\n index: number\n}\n\nconst SliderThumb = React.forwardRef<View, SliderThumbProps>(\n (props: ScopedProps<SliderThumbProps>, forwardedRef) => {\n const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props\n const context = useSliderContext(THUMB_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider)\n const [thumb, setThumb] = React.useState<View | HTMLElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node))\n\n // We cast because index could be `-1` which would return undefined\n const value = context.values[index] as number | undefined\n const percent =\n value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max)\n const label = getLabel(index, context.values.length)\n const [size, setSize] = React.useState(() => {\n // for SSR\n const estimatedSize = getVariableValue(getThumbSize(sizeProp).width)\n return estimatedSize\n })\n\n const thumbInBoundsOffset = size\n ? getThumbInBoundsOffset(size, percent, orientation.direction)\n : 0\n\n React.useEffect(() => {\n if (thumb) {\n context.thumbs.add(thumb)\n return () => {\n context.thumbs.delete(thumb)\n }\n }\n }, [thumb, context.thumbs])\n\n return (\n <SliderThumbFrame\n ref={composedRefs}\n // TODO\n // @ts-ignore\n role=\"slider\"\n aria-label={props['aria-label'] || label}\n aria-valuemin={context.min}\n aria-valuenow={value}\n aria-valuemax={context.max}\n aria-orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n tabIndex={context.disabled ? undefined : 0}\n {...thumbProps}\n {...(context.orientation === 'horizontal'\n ? {\n x: thumbInBoundsOffset - size / 2,\n y: -size / 2,\n top: '50%',\n ...(size === 0 && {\n top: 'auto',\n bottom: 'auto',\n }),\n }\n : {\n x: -size / 2,\n y: size / 2,\n left: '50%',\n ...(size === 0 && {\n left: 'auto',\n right: 'auto',\n }),\n })}\n size={sizeProp ?? context.size ?? '$4'}\n onLayout={(e) => {\n setSize(e.nativeEvent.layout[orientation.sizeProp])\n }}\n {...{\n [orientation.startEdge]: `${percent}%`,\n }}\n /**\n * There will be no value on initial render while we work out the index so we hide thumbs\n * without a value, otherwise SSR will render them in the wrong position before they\n * snap into the correct position during hydration which would be visually jarring for\n * slower connections.\n */\n // style={value === undefined ? { display: 'none' } : props.style}\n onFocus={composeEventHandlers(props.onFocus, () => {\n context.valueIndexToChangeRef.current = index\n })}\n />\n )\n }\n)\n\nSliderThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slider = withStaticProperties(\n React.forwardRef<View, SliderProps>((props: ScopedProps<SliderProps>, forwardedRef) => {\n const {\n name,\n min = 0,\n max = 100,\n step = 1,\n orientation = 'horizontal',\n disabled = false,\n minStepsBetweenThumbs = 0,\n defaultValue = [min],\n value,\n onValueChange = () => {},\n size: sizeProp,\n ...sliderProps\n } = props\n const sliderRef = React.useRef<View>(null)\n const composedRefs = useComposedRefs(sliderRef, forwardedRef)\n const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set())\n const valueIndexToChangeRef = React.useRef<number>(0)\n const isHorizontal = orientation === 'horizontal'\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl =\n // sliderRef.current instanceof HTMLElement ? Boolean(sliderRef.current.closest('form')) : true\n\n const [values = [], setValues] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange: (value) => {\n if (isWeb) {\n const thumbs = [...thumbRefs.current]\n thumbs[valueIndexToChangeRef.current]?.focus()\n }\n onValueChange(value)\n },\n })\n\n if (isWeb) {\n React.useEffect(() => {\n // @ts-ignore\n const node = sliderRef.current as HTMLElement\n if (!node) return\n const preventDefault = (e) => {\n e.preventDefault()\n }\n node.addEventListener('touchstart', preventDefault)\n return () => {\n node.removeEventListener('touchstart', preventDefault)\n }\n }, [])\n }\n\n function handleSlideMove(value: number) {\n updateValues(value, valueIndexToChangeRef.current)\n }\n\n function updateValues(value: number, atIndex: number) {\n const decimalCount = getDecimalCount(step)\n const snapToStep = roundValue(Math.round((value - min) / step) * step + min, decimalCount)\n const nextValue = clamp(snapToStep, [min, max])\n setValues((prevValues = []) => {\n const nextValues = getNextSortedValues(prevValues, nextValue, atIndex)\n if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {\n valueIndexToChangeRef.current = nextValues.indexOf(nextValue)\n return String(nextValues) === String(prevValues) ? prevValues : nextValues\n } else {\n return prevValues\n }\n })\n }\n\n const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical\n\n return (\n <SliderProvider\n scope={props.__scopeSlider}\n disabled={disabled}\n min={min}\n max={max}\n valueIndexToChangeRef={valueIndexToChangeRef}\n thumbs={thumbRefs.current}\n values={values}\n orientation={orientation}\n size={sizeProp}\n >\n <SliderOriented\n aria-disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...sliderProps}\n ref={composedRefs}\n min={min}\n max={max}\n onSlideStart={\n disabled\n ? undefined\n : (value: number, target) => {\n // when starting on the track, move it right away\n // when starting on thumb, dont jump until movemenet as it feels weird\n if (target !== 'thumb') {\n const closestIndex = getClosestValueIndex(values, value)\n updateValues(value, closestIndex)\n }\n }\n }\n onSlideMove={disabled ? undefined : handleSlideMove}\n onHomeKeyDown={() => !disabled && updateValues(min, 0)}\n onEndKeyDown={() => !disabled && updateValues(max, values.length - 1)}\n onStepKeyDown={({ event, direction: stepDirection }) => {\n if (!disabled) {\n const isPageKey = PAGE_KEYS.includes(event.key)\n const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key))\n const multiplier = isSkipKey ? 10 : 1\n const atIndex = valueIndexToChangeRef.current\n const value = values[atIndex]\n const stepInDirection = step * multiplier * stepDirection\n updateValues(value + stepInDirection, atIndex)\n }\n }}\n />\n {/* {isFormControl &&\n values.map((value, index) => (\n <BubbleInput\n key={index}\n name={name ? name + (values.length > 1 ? '[]' : '') : undefined}\n value={value}\n />\n ))} */}\n </SliderProvider>\n )\n }),\n {\n Track: SliderTrack,\n TrackActive: SliderTrackActive,\n Thumb: SliderThumb,\n }\n)\n\nSlider.displayName = SLIDER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\n// // TODO\n// const BubbleInput = (props: any) => {\n// const { value, ...inputProps } = props\n// const ref = React.useRef<HTMLInputElement>(null)\n// const prevValue = usePrevious(value)\n\n// // Bubble value change to parents (e.g form change event)\n// React.useEffect(() => {\n// const input = ref.current!\n// const inputProto = window.HTMLInputElement.prototype\n// const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor\n// const setValue = descriptor.set\n// if (prevValue !== value && setValue) {\n// const event = new Event('input', { bubbles: true })\n// setValue.call(input, value)\n// input.dispatchEvent(event)\n// }\n// }, [prevValue, value])\n\n// /**\n// * We purposefully do not use `type=\"hidden\"` here otherwise forms that\n// * wrap it will not be able to access its value via the FormData API.\n// *\n// * We purposefully do not add the `value` attribute here to allow the value\n// * to be set programatically and bubble to any parent form `onChange` event.\n// * Adding the `value` will cause React to consider the programatic\n// * dispatch a duplicate and it will get swallowed.\n// */\n// return <input style={{ display: 'none' }} {...inputProps} ref={ref} defaultValue={value} />\n// }\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Track = SliderTrack\nconst Range = SliderTrackActive\nconst Thumb = SliderThumb\n\nexport {\n Slider,\n SliderTrack,\n SliderTrackActive,\n SliderThumb,\n //\n Track,\n Range,\n Thumb,\n}\n\nexport type { SliderProps, SliderTrackProps, SliderTrackActiveProps, SliderThumbProps }\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["// forked from radix-ui\n\nimport { composeRefs, useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { clamp, composeEventHandlers } from '@tamagui/helpers'\nimport { SizableStackProps, ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport {\n ARROW_KEYS,\n BACK_KEYS,\n PAGE_KEYS,\n SLIDER_NAME,\n SliderOrientationProvider,\n SliderProvider,\n useSliderContext,\n useSliderOrientationContext,\n} from './constants'\nimport {\n convertValueToPercentage,\n getClosestValueIndex,\n getDecimalCount,\n getLabel,\n getNextSortedValues,\n getThumbInBoundsOffset,\n hasMinStepsBetweenValues,\n linearScale,\n roundValue,\n} from './helpers'\nimport { SliderFrame, SliderImpl } from './SliderImpl'\nimport {\n ScopedProps,\n SliderContextValue,\n SliderHorizontalProps,\n SliderProps,\n SliderTrackProps,\n SliderVerticalProps,\n} from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderHorizontal = React.forwardRef<View, SliderHorizontalProps>(\n (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {\n const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const direction = useDirection(dir)\n const isDirectionLTR = direction === 'ltr'\n const sliderRef = React.useRef<View>(null)\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = isDirectionLTR ? [min, max] : [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isDirectionLTR ? 'left' : 'right'}\n endEdge={isDirectionLTR ? 'right' : 'left'}\n direction={isDirectionLTR ? 1 : -1}\n sizeProp=\"width\"\n size={state.size}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n dir={direction}\n {...sliderProps}\n orientation=\"horizontal\"\n onLayout={() => {\n sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {\n setState({\n size: width,\n offset: pageX,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationX)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageX - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS[direction].includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderVertical\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderVertical = React.forwardRef<View, SliderVerticalProps>(\n (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n const sliderRef = React.useRef<View>(null)\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge=\"bottom\"\n endEdge=\"top\"\n sizeProp=\"height\"\n size={state.size}\n direction={1}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n {...sliderProps}\n orientation=\"vertical\"\n onLayout={({ nativeEvent: { layout } }) => {\n sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {\n console.log('same?', layout, height, pageY)\n setState({\n size: height,\n offset: pageY,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationY)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageY - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS.ltr.includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrack\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRACK_NAME = 'SliderTrack'\n\ntype SliderTrackElement = HTMLElement | View\n\nexport const SliderTrackFrame = styled(SliderFrame, {\n name: 'SliderTrack',\n height: '100%',\n width: '100%',\n backgroundColor: '$background',\n position: 'relative',\n borderRadius: 100_000,\n overflow: 'hidden',\n})\n\nconst SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(\n (props: ScopedProps<SliderTrackProps>, forwardedRef) => {\n const { __scopeSlider, ...trackProps } = props\n const context = useSliderContext(TRACK_NAME, __scopeSlider)\n return (\n <SliderTrackFrame\n data-disabled={context.disabled ? '' : undefined}\n data-orientation={context.orientation}\n orientation={context.orientation}\n size={context.size}\n {...trackProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSliderTrack.displayName = TRACK_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrackActive\n * -----------------------------------------------------------------------------------------------*/\n\nconst RANGE_NAME = 'SliderTrackActive'\n\nexport const SliderTrackActiveFrame = styled(SliderFrame, {\n name: 'SliderTrackActive',\n backgroundColor: '$background',\n position: 'absolute',\n})\n\ntype SliderTrackActiveProps = GetProps<typeof SliderTrackActiveFrame>\n\nconst SliderTrackActive = React.forwardRef<View, SliderTrackActiveProps>(\n (props: ScopedProps<SliderTrackActiveProps>, forwardedRef) => {\n const { __scopeSlider, ...rangeProps } = props\n const context = useSliderContext(RANGE_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider)\n const ref = React.useRef<View>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const valuesCount = context.values.length\n const percentages = context.values.map((value) =>\n convertValueToPercentage(value, context.min, context.max)\n )\n const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0\n const offsetEnd = 100 - Math.max(...percentages)\n\n return (\n <SliderTrackActiveFrame\n orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n size={context.size}\n {...rangeProps}\n ref={composedRefs}\n {...{\n [orientation.startEdge]: offsetStart + '%',\n [orientation.endEdge]: offsetEnd + '%',\n }}\n {...(orientation.sizeProp === 'width'\n ? {\n height: '100%',\n }\n : {\n left: 0,\n right: 0,\n })}\n />\n )\n }\n)\n\nSliderTrackActive.displayName = RANGE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SliderThumb'\n\n// TODO make this customizable through tamagui\n// so we can accurately use it for estimatedSize below\nconst getThumbSize = (val?: SizeTokens | number) => {\n const size = typeof val === 'number' ? val : getSize(val, -1)\n return {\n width: size,\n height: size,\n minWidth: size,\n minHeight: size,\n }\n}\n\nexport const SliderThumbFrame = styled(ThemeableStack, {\n name: 'SliderThumb',\n position: 'absolute',\n // TODO not taking up 2\n bordered: 2,\n // OR THIS\n borderWidth: 2,\n backgrounded: true,\n pressTheme: isWeb,\n focusTheme: isWeb,\n hoverTheme: isWeb,\n\n variants: {\n size: {\n '...size': getThumbSize,\n },\n } as const,\n})\n\ninterface SliderThumbProps extends SizableStackProps {\n index: number\n}\n\nconst SliderThumb = React.forwardRef<View, SliderThumbProps>(\n (props: ScopedProps<SliderThumbProps>, forwardedRef) => {\n const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props\n const context = useSliderContext(THUMB_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider)\n const [thumb, setThumb] = React.useState<View | HTMLElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node))\n\n // We cast because index could be `-1` which would return undefined\n const value = context.values[index] as number | undefined\n const percent =\n value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max)\n const label = getLabel(index, context.values.length)\n const [size, setSize] = React.useState(() => {\n // for SSR\n const estimatedSize = getVariableValue(getThumbSize(sizeProp).width)\n return estimatedSize\n })\n\n const thumbInBoundsOffset = size\n ? getThumbInBoundsOffset(size, percent, orientation.direction)\n : 0\n\n React.useEffect(() => {\n if (thumb) {\n context.thumbs.add(thumb)\n return () => {\n context.thumbs.delete(thumb)\n }\n }\n }, [thumb, context.thumbs])\n\n return (\n <SliderThumbFrame\n ref={composedRefs}\n // TODO\n // @ts-ignore\n role=\"slider\"\n aria-label={props['aria-label'] || label}\n aria-valuemin={context.min}\n aria-valuenow={value}\n aria-valuemax={context.max}\n aria-orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n tabIndex={context.disabled ? undefined : 0}\n {...thumbProps}\n {...(context.orientation === 'horizontal'\n ? {\n x: thumbInBoundsOffset - size / 2,\n y: -size / 2,\n top: '50%',\n ...(size === 0 && {\n top: 'auto',\n bottom: 'auto',\n }),\n }\n : {\n x: -size / 2,\n y: size / 2,\n left: '50%',\n ...(size === 0 && {\n left: 'auto',\n right: 'auto',\n }),\n })}\n size={sizeProp ?? context.size ?? '$4'}\n onLayout={(e) => {\n console.log('did layout')\n setSize(e.nativeEvent.layout[orientation.sizeProp])\n }}\n {...{\n [orientation.startEdge]: `${percent}%`,\n }}\n /**\n * There will be no value on initial render while we work out the index so we hide thumbs\n * without a value, otherwise SSR will render them in the wrong position before they\n * snap into the correct position during hydration which would be visually jarring for\n * slower connections.\n */\n // style={value === undefined ? { display: 'none' } : props.style}\n onFocus={composeEventHandlers(props.onFocus, () => {\n context.valueIndexToChangeRef.current = index\n })}\n />\n )\n }\n)\n\nSliderThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slider = withStaticProperties(\n React.forwardRef<View, SliderProps>((props: ScopedProps<SliderProps>, forwardedRef) => {\n const {\n name,\n min = 0,\n max = 100,\n step = 1,\n orientation = 'horizontal',\n disabled = false,\n minStepsBetweenThumbs = 0,\n defaultValue = [min],\n value,\n onValueChange = () => {},\n size: sizeProp,\n ...sliderProps\n } = props\n const sliderRef = React.useRef<View>(null)\n const composedRefs = useComposedRefs(sliderRef, forwardedRef)\n const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set())\n const valueIndexToChangeRef = React.useRef<number>(0)\n const isHorizontal = orientation === 'horizontal'\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl =\n // sliderRef.current instanceof HTMLElement ? Boolean(sliderRef.current.closest('form')) : true\n\n const [values = [], setValues] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange: (value) => {\n if (isWeb) {\n const thumbs = [...thumbRefs.current]\n thumbs[valueIndexToChangeRef.current]?.focus()\n }\n onValueChange(value)\n },\n })\n\n if (isWeb) {\n React.useEffect(() => {\n // @ts-ignore\n const node = sliderRef.current as HTMLElement\n if (!node) return\n const preventDefault = (e) => {\n e.preventDefault()\n }\n node.addEventListener('touchstart', preventDefault)\n return () => {\n node.removeEventListener('touchstart', preventDefault)\n }\n }, [])\n }\n\n function handleSlideMove(value: number) {\n updateValues(value, valueIndexToChangeRef.current)\n }\n\n function updateValues(value: number, atIndex: number) {\n const decimalCount = getDecimalCount(step)\n const snapToStep = roundValue(Math.round((value - min) / step) * step + min, decimalCount)\n const nextValue = clamp(snapToStep, [min, max])\n setValues((prevValues = []) => {\n const nextValues = getNextSortedValues(prevValues, nextValue, atIndex)\n if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {\n valueIndexToChangeRef.current = nextValues.indexOf(nextValue)\n return String(nextValues) === String(prevValues) ? prevValues : nextValues\n } else {\n return prevValues\n }\n })\n }\n\n const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical\n\n return (\n <SliderProvider\n scope={props.__scopeSlider}\n disabled={disabled}\n min={min}\n max={max}\n valueIndexToChangeRef={valueIndexToChangeRef}\n thumbs={thumbRefs.current}\n values={values}\n orientation={orientation}\n size={sizeProp}\n >\n <SliderOriented\n aria-disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...sliderProps}\n ref={composedRefs}\n min={min}\n max={max}\n onSlideStart={\n disabled\n ? undefined\n : (value: number, target) => {\n // when starting on the track, move it right away\n // when starting on thumb, dont jump until movemenet as it feels weird\n if (target !== 'thumb') {\n const closestIndex = getClosestValueIndex(values, value)\n updateValues(value, closestIndex)\n }\n }\n }\n onSlideMove={disabled ? undefined : handleSlideMove}\n onHomeKeyDown={() => !disabled && updateValues(min, 0)}\n onEndKeyDown={() => !disabled && updateValues(max, values.length - 1)}\n onStepKeyDown={({ event, direction: stepDirection }) => {\n if (!disabled) {\n const isPageKey = PAGE_KEYS.includes(event.key)\n const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key))\n const multiplier = isSkipKey ? 10 : 1\n const atIndex = valueIndexToChangeRef.current\n const value = values[atIndex]\n const stepInDirection = step * multiplier * stepDirection\n updateValues(value + stepInDirection, atIndex)\n }\n }}\n />\n {/* {isFormControl &&\n values.map((value, index) => (\n <BubbleInput\n key={index}\n name={name ? name + (values.length > 1 ? '[]' : '') : undefined}\n value={value}\n />\n ))} */}\n </SliderProvider>\n )\n }),\n {\n Track: SliderTrack,\n TrackActive: SliderTrackActive,\n Thumb: SliderThumb,\n }\n)\n\nSlider.displayName = SLIDER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\n// // TODO\n// const BubbleInput = (props: any) => {\n// const { value, ...inputProps } = props\n// const ref = React.useRef<HTMLInputElement>(null)\n// const prevValue = usePrevious(value)\n\n// // Bubble value change to parents (e.g form change event)\n// React.useEffect(() => {\n// const input = ref.current!\n// const inputProto = window.HTMLInputElement.prototype\n// const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor\n// const setValue = descriptor.set\n// if (prevValue !== value && setValue) {\n// const event = new Event('input', { bubbles: true })\n// setValue.call(input, value)\n// input.dispatchEvent(event)\n// }\n// }, [prevValue, value])\n\n// /**\n// * We purposefully do not use `type=\"hidden\"` here otherwise forms that\n// * wrap it will not be able to access its value via the FormData API.\n// *\n// * We purposefully do not add the `value` attribute here to allow the value\n// * to be set programatically and bubble to any parent form `onChange` event.\n// * Adding the `value` will cause React to consider the programatic\n// * dispatch a duplicate and it will get swallowed.\n// */\n// return <input style={{ display: 'none' }} {...inputProps} ref={ref} defaultValue={value} />\n// }\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Track = SliderTrack\nconst Range = SliderTrackActive\nconst Thumb = SliderThumb\n\nexport {\n Slider,\n SliderTrack,\n SliderTrackActive,\n SliderThumb,\n //\n Track,\n Range,\n Thumb,\n}\n\nexport type { SliderProps, SliderTrackProps, SliderTrackActiveProps, SliderThumbProps }\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8EQ;AA5ER,0BAA6C;AAC7C,kBAQO;AACP,qBAA4C;AAC5C,oBAAkD;AAClD,oCAAqC;AACrC,2BAA6B;AAC7B,YAAuB;AAGvB,uBASO;AACP,IAAAA,kBAUO;AACP,wBAAwC;AAcxC,MAAM,mBAAmB,MAAM;AAAA,EAC7B,CAAC,OAA2C,iBAAiB;AAC3D,UAAM,EAAE,KAAK,KAAK,KAAK,cAAc,aAAa,kBAAkB,YAAY,IAAI;AACpF,UAAM,gBAAY,mCAAa,GAAG;AAClC,UAAM,iBAAiB,cAAc;AACrC,UAAM,YAAY,MAAM,OAAa,IAAI;AACzC,UAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,OAAO,EAAE,MAAM,GAAG,QAAQ,EAAE,EAAE;AAEvE,aAAS,oBAAoB,iBAAyB;AACpD,YAAM,QAA0B,CAAC,GAAG,MAAM,IAAI;AAC9C,YAAM,SAA2B,iBAAiB,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG;AACxE,YAAM,YAAQ,6BAAY,OAAO,MAAM;AACvC,aAAO,MAAM,eAAe;AAAA,IAC9B;AAEA,WACE,4CAAC;AAAA,MACC,OAAO,MAAM;AAAA,MACb,WAAW,iBAAiB,SAAS;AAAA,MACrC,SAAS,iBAAiB,UAAU;AAAA,MACpC,WAAW,iBAAiB,IAAI;AAAA,MAChC,UAAS;AAAA,MACT,MAAM,MAAM;AAAA,MAEZ,sDAAC;AAAA,QACC,SAAK,iCAAY,cAAc,SAAS;AAAA,QACxC,KAAK;AAAA,QACJ,GAAG;AAAA,QACJ,aAAY;AAAA,QACZ,UAAU,MAAM;AAnF1B;AAoFY,0BAAU,YAAV,mBAAmB,QAAQ,CAAC,IAAI,IAAI,OAAO,SAAS,OAAO,WAAW;AACpE,qBAAS;AAAA,cACP,MAAM;AAAA,cACN,QAAQ;AAAA,YACV,CAAC;AAAA,UACH;AAAA,QACF;AAAA,QACA,cAAc,CAAC,OAAO,WAAW;AAC/B,gBAAM,QAAQ,oBAAoB,MAAM,YAAY,SAAS;AAC7D,cAAI,OAAO;AACT,yDAAe,OAAO;AAAA,UACxB;AAAA,QACF;AAAA,QACA,aAAa,CAAC,UAAU;AACtB,gBAAM,QAAQ,oBAAoB,MAAM,YAAY,QAAQ,MAAM,MAAM;AACxE,cAAI,OAAO;AACT,uDAAc;AAAA,UAChB;AAAA,QACF;AAAA,QACA,YAAY,MAAM;AAAA,QAAC;AAAA,QACnB,eAAe,CAAC,UAAU;AACxB,gBAAM,YAAY,2BAAU,WAAW,SAAS,MAAM,GAAG;AACzD,yDAAgB,EAAE,OAAO,WAAW,YAAY,KAAK,EAAE;AAAA,QACzD;AAAA,OACF;AAAA,KACF;AAAA,EAEJ;AACF;AAMA,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,OAAyC,iBAAiB;AACzD,UAAM,EAAE,KAAK,KAAK,cAAc,aAAa,kBAAkB,YAAY,IAAI;AAC/E,UAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,OAAO,EAAE,MAAM,GAAG,QAAQ,EAAE,EAAE;AACvE,UAAM,YAAY,MAAM,OAAa,IAAI;AAEzC,aAAS,oBAAoB,iBAAyB;AACpD,YAAM,QAA0B,CAAC,GAAG,MAAM,IAAI;AAC9C,YAAM,SAA2B,CAAC,KAAK,GAAG;AAC1C,YAAM,YAAQ,6BAAY,OAAO,MAAM;AACvC,aAAO,MAAM,eAAe;AAAA,IAC9B;AAEA,WACE,4CAAC;AAAA,MACC,OAAO,MAAM;AAAA,MACb,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,UAAS;AAAA,MACT,MAAM,MAAM;AAAA,MACZ,WAAW;AAAA,MAEX,sDAAC;AAAA,QACC,SAAK,iCAAY,cAAc,SAAS;AAAA,QACvC,GAAG;AAAA,QACJ,aAAY;AAAA,QACZ,UAAU,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM;AAhJrD;AAiJY,0BAAU,YAAV,mBAAmB,QAAQ,CAAC,IAAI,IAAI,QAAQ,QAAQ,QAAQ,UAAU;AACpE,oBAAQ,IAAI,SAAS,QAAQ,QAAQ,KAAK;AAC1C,qBAAS;AAAA,cACP,MAAM;AAAA,cACN,QAAQ;AAAA,YACV,CAAC;AAAA,UACH;AAAA,QACF;AAAA,QACA,cAAc,CAAC,OAAO,WAAW;AAC/B,gBAAM,QAAQ,oBAAoB,MAAM,YAAY,SAAS;AAC7D,cAAI,OAAO;AACT,yDAAe,OAAO;AAAA,UACxB;AAAA,QACF;AAAA,QACA,aAAa,CAAC,UAAU;AACtB,gBAAM,QAAQ,oBAAoB,MAAM,YAAY,QAAQ,MAAM,MAAM;AACxE,cAAI,OAAO;AACT,uDAAc;AAAA,UAChB;AAAA,QACF;AAAA,QACA,YAAY,MAAM;AAAA,QAAC;AAAA,QACnB,eAAe,CAAC,UAAU;AACxB,gBAAM,YAAY,2BAAU,IAAI,SAAS,MAAM,GAAG;AAClD,yDAAgB,EAAE,OAAO,WAAW,YAAY,KAAK,EAAE;AAAA,QACzD;AAAA,OACF;AAAA,KACF;AAAA,EAEJ;AACF;AAMA,MAAM,aAAa;AAIZ,MAAM,uBAAmB,oBAAO,+BAAa;AAAA,EAClD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,cAAc;AAAA,EACd,UAAU;AACZ,CAAC;AAED,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,OAAsC,iBAAiB;AACtD,UAAM,EAAE,kBAAkB,WAAW,IAAI;AACzC,UAAM,cAAU,mCAAiB,YAAY,aAAa;AAC1D,WACE,4CAAC;AAAA,MACC,iBAAe,QAAQ,WAAW,KAAK;AAAA,MACvC,oBAAkB,QAAQ;AAAA,MAC1B,aAAa,QAAQ;AAAA,MACrB,MAAM,QAAQ;AAAA,MACb,GAAG;AAAA,MACJ,KAAK;AAAA,KACP;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAM1B,MAAM,aAAa;AAEZ,MAAM,6BAAyB,oBAAO,+BAAa;AAAA,EACxD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,UAAU;AACZ,CAAC;AAID,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CAAC,OAA4C,iBAAiB;AAC5D,UAAM,EAAE,kBAAkB,WAAW,IAAI;AACzC,UAAM,cAAU,mCAAiB,YAAY,aAAa;AAC1D,UAAM,kBAAc,8CAA4B,YAAY,aAAa;AACzE,UAAM,MAAM,MAAM,OAAa,IAAI;AACnC,UAAM,mBAAe,qCAAgB,cAAc,GAAG;AACtD,UAAM,cAAc,QAAQ,OAAO;AACnC,UAAM,cAAc,QAAQ,OAAO;AAAA,MAAI,CAAC,cACtC,0CAAyB,OAAO,QAAQ,KAAK,QAAQ,GAAG;AAAA,IAC1D;AACA,UAAM,cAAc,cAAc,IAAI,KAAK,IAAI,GAAG,WAAW,IAAI;AACjE,UAAM,YAAY,MAAM,KAAK,IAAI,GAAG,WAAW;AAE/C,WACE,4CAAC;AAAA,MACC,aAAa,QAAQ;AAAA,MACrB,oBAAkB,QAAQ;AAAA,MAC1B,iBAAe,QAAQ,WAAW,KAAK;AAAA,MACvC,MAAM,QAAQ;AAAA,MACb,GAAG;AAAA,MACJ,KAAK;AAAA,MACJ,GAAG;AAAA,QACF,CAAC,YAAY,YAAY,cAAc;AAAA,QACvC,CAAC,YAAY,UAAU,YAAY;AAAA,MACrC;AAAA,MACC,GAAI,YAAY,aAAa,UAC1B;AAAA,QACE,QAAQ;AAAA,MACV,IACA;AAAA,QACE,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,KACN;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;AAMhC,MAAM,aAAa;AAInB,MAAM,eAAe,CAAC,QAA8B;AAClD,QAAM,OAAO,OAAO,QAAQ,WAAW,UAAM,qBAAQ,KAAK,EAAE;AAC5D,SAAO;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,EACb;AACF;AAEO,MAAM,uBAAmB,oBAAO,8BAAgB;AAAA,EACrD,MAAM;AAAA,EACN,UAAU;AAAA,EAEV,UAAU;AAAA,EAEV,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAMD,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,OAAsC,iBAAiB;AACtD,UAAM,EAAE,eAAe,OAAO,MAAM,aAAa,WAAW,IAAI;AAChE,UAAM,cAAU,mCAAiB,YAAY,aAAa;AAC1D,UAAM,kBAAc,8CAA4B,YAAY,aAAa;AACzE,UAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAoC,IAAI;AACxE,UAAM,mBAAe,qCAAgB,cAAc,CAAC,SAAS,SAAS,IAAI,CAAC;AAG3E,UAAM,QAAQ,QAAQ,OAAO;AAC7B,UAAM,UACJ,UAAU,SAAY,QAAI,0CAAyB,OAAO,QAAQ,KAAK,QAAQ,GAAG;AACpF,UAAM,YAAQ,0BAAS,OAAO,QAAQ,OAAO,MAAM;AACnD,UAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,MAAM;AAE3C,YAAM,oBAAgB,8BAAiB,aAAa,QAAQ,EAAE,KAAK;AACnE,aAAO;AAAA,IACT,CAAC;AAED,UAAM,sBAAsB,WACxB,wCAAuB,MAAM,SAAS,YAAY,SAAS,IAC3D;AAEJ,UAAM,UAAU,MAAM;AACpB,UAAI,OAAO;AACT,gBAAQ,OAAO,IAAI,KAAK;AACxB,eAAO,MAAM;AACX,kBAAQ,OAAO,OAAO,KAAK;AAAA,QAC7B;AAAA,MACF;AAAA,IACF,GAAG,CAAC,OAAO,QAAQ,MAAM,CAAC;AAE1B,WACE,4CAAC;AAAA,MACC,KAAK;AAAA,MAGL,MAAK;AAAA,MACL,cAAY,MAAM,iBAAiB;AAAA,MACnC,iBAAe,QAAQ;AAAA,MACvB,iBAAe;AAAA,MACf,iBAAe,QAAQ;AAAA,MACvB,oBAAkB,QAAQ;AAAA,MAC1B,oBAAkB,QAAQ;AAAA,MAC1B,iBAAe,QAAQ,WAAW,KAAK;AAAA,MACvC,UAAU,QAAQ,WAAW,SAAY;AAAA,MACxC,GAAG;AAAA,MACH,GAAI,QAAQ,gBAAgB,eACzB;AAAA,QACE,GAAG,sBAAsB,OAAO;AAAA,QAChC,GAAG,CAAC,OAAO;AAAA,QACX,KAAK;AAAA,QACL,GAAI,SAAS,KAAK;AAAA,UAChB,KAAK;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,MACF,IACA;AAAA,QACE,GAAG,CAAC,OAAO;AAAA,QACX,GAAG,OAAO;AAAA,QACV,MAAM;AAAA,QACN,GAAI,SAAS,KAAK;AAAA,UAChB,MAAM;AAAA,UACN,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MACJ,MAAM,YAAY,QAAQ,QAAQ;AAAA,MAClC,UAAU,CAAC,MAAM;AACf,gBAAQ,IAAI,YAAY;AACxB,gBAAQ,EAAE,YAAY,OAAO,YAAY,SAAS;AAAA,MACpD;AAAA,MACC,GAAG;AAAA,QACF,CAAC,YAAY,YAAY,GAAG;AAAA,MAC9B;AAAA,MAQA,aAAS,qCAAqB,MAAM,SAAS,MAAM;AACjD,gBAAQ,sBAAsB,UAAU;AAAA,MAC1C,CAAC;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAM1B,MAAM,aAAS;AAAA,EACb,MAAM,WAA8B,CAAC,OAAiC,iBAAiB;AACrF,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,cAAc;AAAA,MACd,WAAW;AAAA,MACX,wBAAwB;AAAA,MACxB,eAAe,CAAC,GAAG;AAAA,MACnB;AAAA,MACA,gBAAgB,MAAM;AAAA,MAAC;AAAA,MACvB,MAAM;AAAA,SACH;AAAA,IACL,IAAI;AACJ,UAAM,YAAY,MAAM,OAAa,IAAI;AACzC,UAAM,mBAAe,qCAAgB,WAAW,YAAY;AAC5D,UAAM,YAAY,MAAM,OAAqC,oBAAI,IAAI,CAAC;AACtE,UAAM,wBAAwB,MAAM,OAAe,CAAC;AACpD,UAAM,eAAe,gBAAgB;AAKrC,UAAM,CAAC,SAAS,CAAC,GAAG,SAAS,QAAI,oDAAqB;AAAA,MACpD,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU,CAACC,WAAU;AAhb3B;AAibQ,YAAI,mBAAO;AACT,gBAAM,SAAS,CAAC,GAAG,UAAU,OAAO;AACpC,uBAAO,sBAAsB,aAA7B,mBAAuC;AAAA,QACzC;AACA,sBAAcA,MAAK;AAAA,MACrB;AAAA,IACF,CAAC;AAED,QAAI,mBAAO;AACT,YAAM,UAAU,MAAM;AAEpB,cAAM,OAAO,UAAU;AACvB,YAAI,CAAC;AAAM;AACX,cAAM,iBAAiB,CAAC,MAAM;AAC5B,YAAE,eAAe;AAAA,QACnB;AACA,aAAK,iBAAiB,cAAc,cAAc;AAClD,eAAO,MAAM;AACX,eAAK,oBAAoB,cAAc,cAAc;AAAA,QACvD;AAAA,MACF,GAAG,CAAC,CAAC;AAAA,IACP;AAEA,aAAS,gBAAgBA,QAAe;AACtC,mBAAaA,QAAO,sBAAsB,OAAO;AAAA,IACnD;AAEA,aAAS,aAAaA,QAAe,SAAiB;AACpD,YAAM,mBAAe,iCAAgB,IAAI;AACzC,YAAM,iBAAa,4BAAW,KAAK,OAAOA,SAAQ,OAAO,IAAI,IAAI,OAAO,KAAK,YAAY;AACzF,YAAM,gBAAY,sBAAM,YAAY,CAAC,KAAK,GAAG,CAAC;AAC9C,gBAAU,CAAC,aAAa,CAAC,MAAM;AAC7B,cAAM,iBAAa,qCAAoB,YAAY,WAAW,OAAO;AACrE,gBAAI,0CAAyB,YAAY,wBAAwB,IAAI,GAAG;AACtE,gCAAsB,UAAU,WAAW,QAAQ,SAAS;AAC5D,iBAAO,OAAO,UAAU,MAAM,OAAO,UAAU,IAAI,aAAa;AAAA,QAClE,OAAO;AACL,iBAAO;AAAA,QACT;AAAA,MACF,CAAC;AAAA,IACH;AAEA,UAAM,iBAAiB,eAAe,mBAAmB;AAEzD,WACE,4CAAC;AAAA,MACC,OAAO,MAAM;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,UAAU;AAAA,MAClB;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MAEN,sDAAC;AAAA,QACC,iBAAe;AAAA,QACf,iBAAe,WAAW,KAAK;AAAA,QAC9B,GAAG;AAAA,QACJ,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,cACE,WACI,SACA,CAACA,QAAe,WAAW;AAGzB,cAAI,WAAW,SAAS;AACtB,kBAAM,mBAAe,sCAAqB,QAAQA,MAAK;AACvD,yBAAaA,QAAO,YAAY;AAAA,UAClC;AAAA,QACF;AAAA,QAEN,aAAa,WAAW,SAAY;AAAA,QACpC,eAAe,MAAM,CAAC,YAAY,aAAa,KAAK,CAAC;AAAA,QACrD,cAAc,MAAM,CAAC,YAAY,aAAa,KAAK,OAAO,SAAS,CAAC;AAAA,QACpE,eAAe,CAAC,EAAE,OAAO,WAAW,cAAc,MAAM;AACtD,cAAI,CAAC,UAAU;AACb,kBAAM,YAAY,2BAAU,SAAS,MAAM,GAAG;AAC9C,kBAAM,YAAY,aAAc,MAAM,YAAY,4BAAW,SAAS,MAAM,GAAG;AAC/E,kBAAM,aAAa,YAAY,KAAK;AACpC,kBAAM,UAAU,sBAAsB;AACtC,kBAAMA,SAAQ,OAAO;AACrB,kBAAM,kBAAkB,OAAO,aAAa;AAC5C,yBAAaA,SAAQ,iBAAiB,OAAO;AAAA,UAC/C;AAAA,QACF;AAAA,OACF;AAAA,KASF;AAAA,EAEJ,CAAC;AAAA,EACD;AAAA,IACE,OAAO;AAAA,IACP,aAAa;AAAA,IACb,OAAO;AAAA,EACT;AACF;AAEA,OAAO,cAAc;AAqCrB,MAAM,QAAQ;AACd,MAAM,QAAQ;AACd,MAAM,QAAQ;",
|
|
6
6
|
"names": ["import_helpers", "value"]
|
|
7
7
|
}
|
package/dist/esm/Slider.js
CHANGED
|
@@ -112,9 +112,10 @@ const SliderVertical = React.forwardRef(
|
|
|
112
112
|
ref: composeRefs(forwardedRef, sliderRef),
|
|
113
113
|
...sliderProps,
|
|
114
114
|
orientation: "vertical",
|
|
115
|
-
onLayout: () => {
|
|
115
|
+
onLayout: ({ nativeEvent: { layout } }) => {
|
|
116
116
|
var _a;
|
|
117
117
|
(_a = sliderRef.current) == null ? void 0 : _a.measure((_x, _y, _width, height, _pageX, pageY) => {
|
|
118
|
+
console.log("same?", layout, height, pageY);
|
|
118
119
|
setState({
|
|
119
120
|
size: height,
|
|
120
121
|
offset: pageY
|
|
@@ -287,6 +288,7 @@ const SliderThumb = React.forwardRef(
|
|
|
287
288
|
},
|
|
288
289
|
size: sizeProp ?? context.size ?? "$4",
|
|
289
290
|
onLayout: (e) => {
|
|
291
|
+
console.log("did layout");
|
|
290
292
|
setSize(e.nativeEvent.layout[orientation.sizeProp]);
|
|
291
293
|
},
|
|
292
294
|
...{
|
package/dist/esm/Slider.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Slider.tsx"],
|
|
4
|
-
"sourcesContent": ["// forked from radix-ui\n\nimport { composeRefs, useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { clamp, composeEventHandlers } from '@tamagui/helpers'\nimport { SizableStackProps, ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport {\n ARROW_KEYS,\n BACK_KEYS,\n PAGE_KEYS,\n SLIDER_NAME,\n SliderOrientationProvider,\n SliderProvider,\n useSliderContext,\n useSliderOrientationContext,\n} from './constants'\nimport {\n convertValueToPercentage,\n getClosestValueIndex,\n getDecimalCount,\n getLabel,\n getNextSortedValues,\n getThumbInBoundsOffset,\n hasMinStepsBetweenValues,\n linearScale,\n roundValue,\n} from './helpers'\nimport { SliderFrame, SliderImpl } from './SliderImpl'\nimport {\n ScopedProps,\n SliderContextValue,\n SliderHorizontalProps,\n SliderProps,\n SliderTrackProps,\n SliderVerticalProps,\n} from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderHorizontal = React.forwardRef<View, SliderHorizontalProps>(\n (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {\n const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const direction = useDirection(dir)\n const isDirectionLTR = direction === 'ltr'\n const sliderRef = React.useRef<View>(null)\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = isDirectionLTR ? [min, max] : [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isDirectionLTR ? 'left' : 'right'}\n endEdge={isDirectionLTR ? 'right' : 'left'}\n direction={isDirectionLTR ? 1 : -1}\n sizeProp=\"width\"\n size={state.size}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n dir={direction}\n {...sliderProps}\n orientation=\"horizontal\"\n onLayout={() => {\n sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {\n setState({\n size: width,\n offset: pageX,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationX)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageX - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS[direction].includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderVertical\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderVertical = React.forwardRef<View, SliderVerticalProps>(\n (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n const sliderRef = React.useRef<View>(null)\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge=\"bottom\"\n endEdge=\"top\"\n sizeProp=\"height\"\n size={state.size}\n direction={1}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n {...sliderProps}\n orientation=\"vertical\"\n onLayout={() => {\n sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {\n setState({\n size: height,\n offset: pageY,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationY)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageY - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS.ltr.includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrack\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRACK_NAME = 'SliderTrack'\n\ntype SliderTrackElement = HTMLElement | View\n\nexport const SliderTrackFrame = styled(SliderFrame, {\n name: 'SliderTrack',\n height: '100%',\n width: '100%',\n backgroundColor: '$background',\n position: 'relative',\n borderRadius: 100_000,\n overflow: 'hidden',\n})\n\nconst SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(\n (props: ScopedProps<SliderTrackProps>, forwardedRef) => {\n const { __scopeSlider, ...trackProps } = props\n const context = useSliderContext(TRACK_NAME, __scopeSlider)\n return (\n <SliderTrackFrame\n data-disabled={context.disabled ? '' : undefined}\n data-orientation={context.orientation}\n orientation={context.orientation}\n size={context.size}\n {...trackProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSliderTrack.displayName = TRACK_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrackActive\n * -----------------------------------------------------------------------------------------------*/\n\nconst RANGE_NAME = 'SliderTrackActive'\n\nexport const SliderTrackActiveFrame = styled(SliderFrame, {\n name: 'SliderTrackActive',\n backgroundColor: '$background',\n position: 'absolute',\n})\n\ntype SliderTrackActiveProps = GetProps<typeof SliderTrackActiveFrame>\n\nconst SliderTrackActive = React.forwardRef<View, SliderTrackActiveProps>(\n (props: ScopedProps<SliderTrackActiveProps>, forwardedRef) => {\n const { __scopeSlider, ...rangeProps } = props\n const context = useSliderContext(RANGE_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider)\n const ref = React.useRef<View>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const valuesCount = context.values.length\n const percentages = context.values.map((value) =>\n convertValueToPercentage(value, context.min, context.max)\n )\n const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0\n const offsetEnd = 100 - Math.max(...percentages)\n\n return (\n <SliderTrackActiveFrame\n orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n size={context.size}\n {...rangeProps}\n ref={composedRefs}\n {...{\n [orientation.startEdge]: offsetStart + '%',\n [orientation.endEdge]: offsetEnd + '%',\n }}\n {...(orientation.sizeProp === 'width'\n ? {\n height: '100%',\n }\n : {\n left: 0,\n right: 0,\n })}\n />\n )\n }\n)\n\nSliderTrackActive.displayName = RANGE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SliderThumb'\n\n// TODO make this customizable through tamagui\n// so we can accurately use it for estimatedSize below\nconst getThumbSize = (val?: SizeTokens | number) => {\n const size = typeof val === 'number' ? val : getSize(val, -1)\n return {\n width: size,\n height: size,\n minWidth: size,\n minHeight: size,\n }\n}\n\nexport const SliderThumbFrame = styled(ThemeableStack, {\n name: 'SliderThumb',\n position: 'absolute',\n // TODO not taking up 2\n bordered: 2,\n // OR THIS\n borderWidth: 2,\n backgrounded: true,\n pressTheme: isWeb,\n focusTheme: isWeb,\n hoverTheme: isWeb,\n\n variants: {\n size: {\n '...size': getThumbSize,\n },\n } as const,\n})\n\ninterface SliderThumbProps extends SizableStackProps {\n index: number\n}\n\nconst SliderThumb = React.forwardRef<View, SliderThumbProps>(\n (props: ScopedProps<SliderThumbProps>, forwardedRef) => {\n const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props\n const context = useSliderContext(THUMB_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider)\n const [thumb, setThumb] = React.useState<View | HTMLElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node))\n\n // We cast because index could be `-1` which would return undefined\n const value = context.values[index] as number | undefined\n const percent =\n value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max)\n const label = getLabel(index, context.values.length)\n const [size, setSize] = React.useState(() => {\n // for SSR\n const estimatedSize = getVariableValue(getThumbSize(sizeProp).width)\n return estimatedSize\n })\n\n const thumbInBoundsOffset = size\n ? getThumbInBoundsOffset(size, percent, orientation.direction)\n : 0\n\n React.useEffect(() => {\n if (thumb) {\n context.thumbs.add(thumb)\n return () => {\n context.thumbs.delete(thumb)\n }\n }\n }, [thumb, context.thumbs])\n\n return (\n <SliderThumbFrame\n ref={composedRefs}\n // TODO\n // @ts-ignore\n role=\"slider\"\n aria-label={props['aria-label'] || label}\n aria-valuemin={context.min}\n aria-valuenow={value}\n aria-valuemax={context.max}\n aria-orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n tabIndex={context.disabled ? undefined : 0}\n {...thumbProps}\n {...(context.orientation === 'horizontal'\n ? {\n x: thumbInBoundsOffset - size / 2,\n y: -size / 2,\n top: '50%',\n ...(size === 0 && {\n top: 'auto',\n bottom: 'auto',\n }),\n }\n : {\n x: -size / 2,\n y: size / 2,\n left: '50%',\n ...(size === 0 && {\n left: 'auto',\n right: 'auto',\n }),\n })}\n size={sizeProp ?? context.size ?? '$4'}\n onLayout={(e) => {\n setSize(e.nativeEvent.layout[orientation.sizeProp])\n }}\n {...{\n [orientation.startEdge]: `${percent}%`,\n }}\n /**\n * There will be no value on initial render while we work out the index so we hide thumbs\n * without a value, otherwise SSR will render them in the wrong position before they\n * snap into the correct position during hydration which would be visually jarring for\n * slower connections.\n */\n // style={value === undefined ? { display: 'none' } : props.style}\n onFocus={composeEventHandlers(props.onFocus, () => {\n context.valueIndexToChangeRef.current = index\n })}\n />\n )\n }\n)\n\nSliderThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slider = withStaticProperties(\n React.forwardRef<View, SliderProps>((props: ScopedProps<SliderProps>, forwardedRef) => {\n const {\n name,\n min = 0,\n max = 100,\n step = 1,\n orientation = 'horizontal',\n disabled = false,\n minStepsBetweenThumbs = 0,\n defaultValue = [min],\n value,\n onValueChange = () => {},\n size: sizeProp,\n ...sliderProps\n } = props\n const sliderRef = React.useRef<View>(null)\n const composedRefs = useComposedRefs(sliderRef, forwardedRef)\n const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set())\n const valueIndexToChangeRef = React.useRef<number>(0)\n const isHorizontal = orientation === 'horizontal'\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl =\n // sliderRef.current instanceof HTMLElement ? Boolean(sliderRef.current.closest('form')) : true\n\n const [values = [], setValues] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange: (value) => {\n if (isWeb) {\n const thumbs = [...thumbRefs.current]\n thumbs[valueIndexToChangeRef.current]?.focus()\n }\n onValueChange(value)\n },\n })\n\n if (isWeb) {\n React.useEffect(() => {\n // @ts-ignore\n const node = sliderRef.current as HTMLElement\n if (!node) return\n const preventDefault = (e) => {\n e.preventDefault()\n }\n node.addEventListener('touchstart', preventDefault)\n return () => {\n node.removeEventListener('touchstart', preventDefault)\n }\n }, [])\n }\n\n function handleSlideMove(value: number) {\n updateValues(value, valueIndexToChangeRef.current)\n }\n\n function updateValues(value: number, atIndex: number) {\n const decimalCount = getDecimalCount(step)\n const snapToStep = roundValue(Math.round((value - min) / step) * step + min, decimalCount)\n const nextValue = clamp(snapToStep, [min, max])\n setValues((prevValues = []) => {\n const nextValues = getNextSortedValues(prevValues, nextValue, atIndex)\n if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {\n valueIndexToChangeRef.current = nextValues.indexOf(nextValue)\n return String(nextValues) === String(prevValues) ? prevValues : nextValues\n } else {\n return prevValues\n }\n })\n }\n\n const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical\n\n return (\n <SliderProvider\n scope={props.__scopeSlider}\n disabled={disabled}\n min={min}\n max={max}\n valueIndexToChangeRef={valueIndexToChangeRef}\n thumbs={thumbRefs.current}\n values={values}\n orientation={orientation}\n size={sizeProp}\n >\n <SliderOriented\n aria-disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...sliderProps}\n ref={composedRefs}\n min={min}\n max={max}\n onSlideStart={\n disabled\n ? undefined\n : (value: number, target) => {\n // when starting on the track, move it right away\n // when starting on thumb, dont jump until movemenet as it feels weird\n if (target !== 'thumb') {\n const closestIndex = getClosestValueIndex(values, value)\n updateValues(value, closestIndex)\n }\n }\n }\n onSlideMove={disabled ? undefined : handleSlideMove}\n onHomeKeyDown={() => !disabled && updateValues(min, 0)}\n onEndKeyDown={() => !disabled && updateValues(max, values.length - 1)}\n onStepKeyDown={({ event, direction: stepDirection }) => {\n if (!disabled) {\n const isPageKey = PAGE_KEYS.includes(event.key)\n const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key))\n const multiplier = isSkipKey ? 10 : 1\n const atIndex = valueIndexToChangeRef.current\n const value = values[atIndex]\n const stepInDirection = step * multiplier * stepDirection\n updateValues(value + stepInDirection, atIndex)\n }\n }}\n />\n {/* {isFormControl &&\n values.map((value, index) => (\n <BubbleInput\n key={index}\n name={name ? name + (values.length > 1 ? '[]' : '') : undefined}\n value={value}\n />\n ))} */}\n </SliderProvider>\n )\n }),\n {\n Track: SliderTrack,\n TrackActive: SliderTrackActive,\n Thumb: SliderThumb,\n }\n)\n\nSlider.displayName = SLIDER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\n// // TODO\n// const BubbleInput = (props: any) => {\n// const { value, ...inputProps } = props\n// const ref = React.useRef<HTMLInputElement>(null)\n// const prevValue = usePrevious(value)\n\n// // Bubble value change to parents (e.g form change event)\n// React.useEffect(() => {\n// const input = ref.current!\n// const inputProto = window.HTMLInputElement.prototype\n// const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor\n// const setValue = descriptor.set\n// if (prevValue !== value && setValue) {\n// const event = new Event('input', { bubbles: true })\n// setValue.call(input, value)\n// input.dispatchEvent(event)\n// }\n// }, [prevValue, value])\n\n// /**\n// * We purposefully do not use `type=\"hidden\"` here otherwise forms that\n// * wrap it will not be able to access its value via the FormData API.\n// *\n// * We purposefully do not add the `value` attribute here to allow the value\n// * to be set programatically and bubble to any parent form `onChange` event.\n// * Adding the `value` will cause React to consider the programatic\n// * dispatch a duplicate and it will get swallowed.\n// */\n// return <input style={{ display: 'none' }} {...inputProps} ref={ref} defaultValue={value} />\n// }\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Track = SliderTrack\nconst Range = SliderTrackActive\nconst Thumb = SliderThumb\n\nexport {\n Slider,\n SliderTrack,\n SliderTrackActive,\n SliderThumb,\n //\n Track,\n Range,\n Thumb,\n}\n\nexport type { SliderProps, SliderTrackProps, SliderTrackActiveProps, SliderThumbProps }\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["// forked from radix-ui\n\nimport { composeRefs, useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { clamp, composeEventHandlers } from '@tamagui/helpers'\nimport { SizableStackProps, ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport {\n ARROW_KEYS,\n BACK_KEYS,\n PAGE_KEYS,\n SLIDER_NAME,\n SliderOrientationProvider,\n SliderProvider,\n useSliderContext,\n useSliderOrientationContext,\n} from './constants'\nimport {\n convertValueToPercentage,\n getClosestValueIndex,\n getDecimalCount,\n getLabel,\n getNextSortedValues,\n getThumbInBoundsOffset,\n hasMinStepsBetweenValues,\n linearScale,\n roundValue,\n} from './helpers'\nimport { SliderFrame, SliderImpl } from './SliderImpl'\nimport {\n ScopedProps,\n SliderContextValue,\n SliderHorizontalProps,\n SliderProps,\n SliderTrackProps,\n SliderVerticalProps,\n} from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderHorizontal = React.forwardRef<View, SliderHorizontalProps>(\n (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {\n const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const direction = useDirection(dir)\n const isDirectionLTR = direction === 'ltr'\n const sliderRef = React.useRef<View>(null)\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = isDirectionLTR ? [min, max] : [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isDirectionLTR ? 'left' : 'right'}\n endEdge={isDirectionLTR ? 'right' : 'left'}\n direction={isDirectionLTR ? 1 : -1}\n sizeProp=\"width\"\n size={state.size}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n dir={direction}\n {...sliderProps}\n orientation=\"horizontal\"\n onLayout={() => {\n sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {\n setState({\n size: width,\n offset: pageX,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationX)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageX - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS[direction].includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderVertical\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderVertical = React.forwardRef<View, SliderVerticalProps>(\n (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n const sliderRef = React.useRef<View>(null)\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge=\"bottom\"\n endEdge=\"top\"\n sizeProp=\"height\"\n size={state.size}\n direction={1}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n {...sliderProps}\n orientation=\"vertical\"\n onLayout={({ nativeEvent: { layout } }) => {\n sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {\n console.log('same?', layout, height, pageY)\n setState({\n size: height,\n offset: pageY,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationY)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageY - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS.ltr.includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrack\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRACK_NAME = 'SliderTrack'\n\ntype SliderTrackElement = HTMLElement | View\n\nexport const SliderTrackFrame = styled(SliderFrame, {\n name: 'SliderTrack',\n height: '100%',\n width: '100%',\n backgroundColor: '$background',\n position: 'relative',\n borderRadius: 100_000,\n overflow: 'hidden',\n})\n\nconst SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(\n (props: ScopedProps<SliderTrackProps>, forwardedRef) => {\n const { __scopeSlider, ...trackProps } = props\n const context = useSliderContext(TRACK_NAME, __scopeSlider)\n return (\n <SliderTrackFrame\n data-disabled={context.disabled ? '' : undefined}\n data-orientation={context.orientation}\n orientation={context.orientation}\n size={context.size}\n {...trackProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSliderTrack.displayName = TRACK_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrackActive\n * -----------------------------------------------------------------------------------------------*/\n\nconst RANGE_NAME = 'SliderTrackActive'\n\nexport const SliderTrackActiveFrame = styled(SliderFrame, {\n name: 'SliderTrackActive',\n backgroundColor: '$background',\n position: 'absolute',\n})\n\ntype SliderTrackActiveProps = GetProps<typeof SliderTrackActiveFrame>\n\nconst SliderTrackActive = React.forwardRef<View, SliderTrackActiveProps>(\n (props: ScopedProps<SliderTrackActiveProps>, forwardedRef) => {\n const { __scopeSlider, ...rangeProps } = props\n const context = useSliderContext(RANGE_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider)\n const ref = React.useRef<View>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const valuesCount = context.values.length\n const percentages = context.values.map((value) =>\n convertValueToPercentage(value, context.min, context.max)\n )\n const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0\n const offsetEnd = 100 - Math.max(...percentages)\n\n return (\n <SliderTrackActiveFrame\n orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n size={context.size}\n {...rangeProps}\n ref={composedRefs}\n {...{\n [orientation.startEdge]: offsetStart + '%',\n [orientation.endEdge]: offsetEnd + '%',\n }}\n {...(orientation.sizeProp === 'width'\n ? {\n height: '100%',\n }\n : {\n left: 0,\n right: 0,\n })}\n />\n )\n }\n)\n\nSliderTrackActive.displayName = RANGE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SliderThumb'\n\n// TODO make this customizable through tamagui\n// so we can accurately use it for estimatedSize below\nconst getThumbSize = (val?: SizeTokens | number) => {\n const size = typeof val === 'number' ? val : getSize(val, -1)\n return {\n width: size,\n height: size,\n minWidth: size,\n minHeight: size,\n }\n}\n\nexport const SliderThumbFrame = styled(ThemeableStack, {\n name: 'SliderThumb',\n position: 'absolute',\n // TODO not taking up 2\n bordered: 2,\n // OR THIS\n borderWidth: 2,\n backgrounded: true,\n pressTheme: isWeb,\n focusTheme: isWeb,\n hoverTheme: isWeb,\n\n variants: {\n size: {\n '...size': getThumbSize,\n },\n } as const,\n})\n\ninterface SliderThumbProps extends SizableStackProps {\n index: number\n}\n\nconst SliderThumb = React.forwardRef<View, SliderThumbProps>(\n (props: ScopedProps<SliderThumbProps>, forwardedRef) => {\n const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props\n const context = useSliderContext(THUMB_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider)\n const [thumb, setThumb] = React.useState<View | HTMLElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node))\n\n // We cast because index could be `-1` which would return undefined\n const value = context.values[index] as number | undefined\n const percent =\n value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max)\n const label = getLabel(index, context.values.length)\n const [size, setSize] = React.useState(() => {\n // for SSR\n const estimatedSize = getVariableValue(getThumbSize(sizeProp).width)\n return estimatedSize\n })\n\n const thumbInBoundsOffset = size\n ? getThumbInBoundsOffset(size, percent, orientation.direction)\n : 0\n\n React.useEffect(() => {\n if (thumb) {\n context.thumbs.add(thumb)\n return () => {\n context.thumbs.delete(thumb)\n }\n }\n }, [thumb, context.thumbs])\n\n return (\n <SliderThumbFrame\n ref={composedRefs}\n // TODO\n // @ts-ignore\n role=\"slider\"\n aria-label={props['aria-label'] || label}\n aria-valuemin={context.min}\n aria-valuenow={value}\n aria-valuemax={context.max}\n aria-orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n tabIndex={context.disabled ? undefined : 0}\n {...thumbProps}\n {...(context.orientation === 'horizontal'\n ? {\n x: thumbInBoundsOffset - size / 2,\n y: -size / 2,\n top: '50%',\n ...(size === 0 && {\n top: 'auto',\n bottom: 'auto',\n }),\n }\n : {\n x: -size / 2,\n y: size / 2,\n left: '50%',\n ...(size === 0 && {\n left: 'auto',\n right: 'auto',\n }),\n })}\n size={sizeProp ?? context.size ?? '$4'}\n onLayout={(e) => {\n console.log('did layout')\n setSize(e.nativeEvent.layout[orientation.sizeProp])\n }}\n {...{\n [orientation.startEdge]: `${percent}%`,\n }}\n /**\n * There will be no value on initial render while we work out the index so we hide thumbs\n * without a value, otherwise SSR will render them in the wrong position before they\n * snap into the correct position during hydration which would be visually jarring for\n * slower connections.\n */\n // style={value === undefined ? { display: 'none' } : props.style}\n onFocus={composeEventHandlers(props.onFocus, () => {\n context.valueIndexToChangeRef.current = index\n })}\n />\n )\n }\n)\n\nSliderThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slider = withStaticProperties(\n React.forwardRef<View, SliderProps>((props: ScopedProps<SliderProps>, forwardedRef) => {\n const {\n name,\n min = 0,\n max = 100,\n step = 1,\n orientation = 'horizontal',\n disabled = false,\n minStepsBetweenThumbs = 0,\n defaultValue = [min],\n value,\n onValueChange = () => {},\n size: sizeProp,\n ...sliderProps\n } = props\n const sliderRef = React.useRef<View>(null)\n const composedRefs = useComposedRefs(sliderRef, forwardedRef)\n const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set())\n const valueIndexToChangeRef = React.useRef<number>(0)\n const isHorizontal = orientation === 'horizontal'\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl =\n // sliderRef.current instanceof HTMLElement ? Boolean(sliderRef.current.closest('form')) : true\n\n const [values = [], setValues] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange: (value) => {\n if (isWeb) {\n const thumbs = [...thumbRefs.current]\n thumbs[valueIndexToChangeRef.current]?.focus()\n }\n onValueChange(value)\n },\n })\n\n if (isWeb) {\n React.useEffect(() => {\n // @ts-ignore\n const node = sliderRef.current as HTMLElement\n if (!node) return\n const preventDefault = (e) => {\n e.preventDefault()\n }\n node.addEventListener('touchstart', preventDefault)\n return () => {\n node.removeEventListener('touchstart', preventDefault)\n }\n }, [])\n }\n\n function handleSlideMove(value: number) {\n updateValues(value, valueIndexToChangeRef.current)\n }\n\n function updateValues(value: number, atIndex: number) {\n const decimalCount = getDecimalCount(step)\n const snapToStep = roundValue(Math.round((value - min) / step) * step + min, decimalCount)\n const nextValue = clamp(snapToStep, [min, max])\n setValues((prevValues = []) => {\n const nextValues = getNextSortedValues(prevValues, nextValue, atIndex)\n if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {\n valueIndexToChangeRef.current = nextValues.indexOf(nextValue)\n return String(nextValues) === String(prevValues) ? prevValues : nextValues\n } else {\n return prevValues\n }\n })\n }\n\n const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical\n\n return (\n <SliderProvider\n scope={props.__scopeSlider}\n disabled={disabled}\n min={min}\n max={max}\n valueIndexToChangeRef={valueIndexToChangeRef}\n thumbs={thumbRefs.current}\n values={values}\n orientation={orientation}\n size={sizeProp}\n >\n <SliderOriented\n aria-disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...sliderProps}\n ref={composedRefs}\n min={min}\n max={max}\n onSlideStart={\n disabled\n ? undefined\n : (value: number, target) => {\n // when starting on the track, move it right away\n // when starting on thumb, dont jump until movemenet as it feels weird\n if (target !== 'thumb') {\n const closestIndex = getClosestValueIndex(values, value)\n updateValues(value, closestIndex)\n }\n }\n }\n onSlideMove={disabled ? undefined : handleSlideMove}\n onHomeKeyDown={() => !disabled && updateValues(min, 0)}\n onEndKeyDown={() => !disabled && updateValues(max, values.length - 1)}\n onStepKeyDown={({ event, direction: stepDirection }) => {\n if (!disabled) {\n const isPageKey = PAGE_KEYS.includes(event.key)\n const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key))\n const multiplier = isSkipKey ? 10 : 1\n const atIndex = valueIndexToChangeRef.current\n const value = values[atIndex]\n const stepInDirection = step * multiplier * stepDirection\n updateValues(value + stepInDirection, atIndex)\n }\n }}\n />\n {/* {isFormControl &&\n values.map((value, index) => (\n <BubbleInput\n key={index}\n name={name ? name + (values.length > 1 ? '[]' : '') : undefined}\n value={value}\n />\n ))} */}\n </SliderProvider>\n )\n }),\n {\n Track: SliderTrack,\n TrackActive: SliderTrackActive,\n Thumb: SliderThumb,\n }\n)\n\nSlider.displayName = SLIDER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\n// // TODO\n// const BubbleInput = (props: any) => {\n// const { value, ...inputProps } = props\n// const ref = React.useRef<HTMLInputElement>(null)\n// const prevValue = usePrevious(value)\n\n// // Bubble value change to parents (e.g form change event)\n// React.useEffect(() => {\n// const input = ref.current!\n// const inputProto = window.HTMLInputElement.prototype\n// const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor\n// const setValue = descriptor.set\n// if (prevValue !== value && setValue) {\n// const event = new Event('input', { bubbles: true })\n// setValue.call(input, value)\n// input.dispatchEvent(event)\n// }\n// }, [prevValue, value])\n\n// /**\n// * We purposefully do not use `type=\"hidden\"` here otherwise forms that\n// * wrap it will not be able to access its value via the FormData API.\n// *\n// * We purposefully do not add the `value` attribute here to allow the value\n// * to be set programatically and bubble to any parent form `onChange` event.\n// * Adding the `value` will cause React to consider the programatic\n// * dispatch a duplicate and it will get swallowed.\n// */\n// return <input style={{ display: 'none' }} {...inputProps} ref={ref} defaultValue={value} />\n// }\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Track = SliderTrack\nconst Range = SliderTrackActive\nconst Thumb = SliderThumb\n\nexport {\n Slider,\n SliderTrack,\n SliderTrackActive,\n SliderThumb,\n //\n Track,\n Range,\n Thumb,\n}\n\nexport type { SliderProps, SliderTrackProps, SliderTrackActiveProps, SliderThumbProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["value"]
|
|
7
7
|
}
|
package/dist/jsx/Slider.js
CHANGED
|
@@ -81,8 +81,9 @@ const SliderVertical = React.forwardRef(
|
|
|
81
81
|
const value = linearScale(input, output);
|
|
82
82
|
return value(pointerPosition);
|
|
83
83
|
}
|
|
84
|
-
return <SliderOrientationProvider scope={props.__scopeSlider} startEdge="bottom" endEdge="top" sizeProp="height" size={state.size} direction={1}><SliderImpl ref={composeRefs(forwardedRef, sliderRef)} {...sliderProps} orientation="vertical" onLayout={() => {
|
|
84
|
+
return <SliderOrientationProvider scope={props.__scopeSlider} startEdge="bottom" endEdge="top" sizeProp="height" size={state.size} direction={1}><SliderImpl ref={composeRefs(forwardedRef, sliderRef)} {...sliderProps} orientation="vertical" onLayout={({ nativeEvent: { layout } }) => {
|
|
85
85
|
sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
|
|
86
|
+
console.log("same?", layout, height, pageY);
|
|
86
87
|
setState({
|
|
87
88
|
size: height,
|
|
88
89
|
offset: pageY
|
|
@@ -219,6 +220,7 @@ const SliderThumb = React.forwardRef(
|
|
|
219
220
|
right: "auto"
|
|
220
221
|
}
|
|
221
222
|
}} size={sizeProp ?? context.size ?? "$4"} onLayout={(e) => {
|
|
223
|
+
console.log("did layout");
|
|
222
224
|
setSize(e.nativeEvent.layout[orientation.sizeProp]);
|
|
223
225
|
}} {...{
|
|
224
226
|
[orientation.startEdge]: `${percent}%`
|
package/dist/jsx/Slider.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Slider.tsx"],
|
|
4
|
-
"sourcesContent": ["// forked from radix-ui\n\nimport { composeRefs, useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { clamp, composeEventHandlers } from '@tamagui/helpers'\nimport { SizableStackProps, ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport {\n ARROW_KEYS,\n BACK_KEYS,\n PAGE_KEYS,\n SLIDER_NAME,\n SliderOrientationProvider,\n SliderProvider,\n useSliderContext,\n useSliderOrientationContext,\n} from './constants'\nimport {\n convertValueToPercentage,\n getClosestValueIndex,\n getDecimalCount,\n getLabel,\n getNextSortedValues,\n getThumbInBoundsOffset,\n hasMinStepsBetweenValues,\n linearScale,\n roundValue,\n} from './helpers'\nimport { SliderFrame, SliderImpl } from './SliderImpl'\nimport {\n ScopedProps,\n SliderContextValue,\n SliderHorizontalProps,\n SliderProps,\n SliderTrackProps,\n SliderVerticalProps,\n} from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderHorizontal = React.forwardRef<View, SliderHorizontalProps>(\n (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {\n const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const direction = useDirection(dir)\n const isDirectionLTR = direction === 'ltr'\n const sliderRef = React.useRef<View>(null)\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = isDirectionLTR ? [min, max] : [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isDirectionLTR ? 'left' : 'right'}\n endEdge={isDirectionLTR ? 'right' : 'left'}\n direction={isDirectionLTR ? 1 : -1}\n sizeProp=\"width\"\n size={state.size}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n dir={direction}\n {...sliderProps}\n orientation=\"horizontal\"\n onLayout={() => {\n sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {\n setState({\n size: width,\n offset: pageX,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationX)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageX - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS[direction].includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderVertical\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderVertical = React.forwardRef<View, SliderVerticalProps>(\n (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n const sliderRef = React.useRef<View>(null)\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge=\"bottom\"\n endEdge=\"top\"\n sizeProp=\"height\"\n size={state.size}\n direction={1}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n {...sliderProps}\n orientation=\"vertical\"\n onLayout={() => {\n sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {\n setState({\n size: height,\n offset: pageY,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationY)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageY - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS.ltr.includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrack\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRACK_NAME = 'SliderTrack'\n\ntype SliderTrackElement = HTMLElement | View\n\nexport const SliderTrackFrame = styled(SliderFrame, {\n name: 'SliderTrack',\n height: '100%',\n width: '100%',\n backgroundColor: '$background',\n position: 'relative',\n borderRadius: 100_000,\n overflow: 'hidden',\n})\n\nconst SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(\n (props: ScopedProps<SliderTrackProps>, forwardedRef) => {\n const { __scopeSlider, ...trackProps } = props\n const context = useSliderContext(TRACK_NAME, __scopeSlider)\n return (\n <SliderTrackFrame\n data-disabled={context.disabled ? '' : undefined}\n data-orientation={context.orientation}\n orientation={context.orientation}\n size={context.size}\n {...trackProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSliderTrack.displayName = TRACK_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrackActive\n * -----------------------------------------------------------------------------------------------*/\n\nconst RANGE_NAME = 'SliderTrackActive'\n\nexport const SliderTrackActiveFrame = styled(SliderFrame, {\n name: 'SliderTrackActive',\n backgroundColor: '$background',\n position: 'absolute',\n})\n\ntype SliderTrackActiveProps = GetProps<typeof SliderTrackActiveFrame>\n\nconst SliderTrackActive = React.forwardRef<View, SliderTrackActiveProps>(\n (props: ScopedProps<SliderTrackActiveProps>, forwardedRef) => {\n const { __scopeSlider, ...rangeProps } = props\n const context = useSliderContext(RANGE_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider)\n const ref = React.useRef<View>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const valuesCount = context.values.length\n const percentages = context.values.map((value) =>\n convertValueToPercentage(value, context.min, context.max)\n )\n const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0\n const offsetEnd = 100 - Math.max(...percentages)\n\n return (\n <SliderTrackActiveFrame\n orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n size={context.size}\n {...rangeProps}\n ref={composedRefs}\n {...{\n [orientation.startEdge]: offsetStart + '%',\n [orientation.endEdge]: offsetEnd + '%',\n }}\n {...(orientation.sizeProp === 'width'\n ? {\n height: '100%',\n }\n : {\n left: 0,\n right: 0,\n })}\n />\n )\n }\n)\n\nSliderTrackActive.displayName = RANGE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SliderThumb'\n\n// TODO make this customizable through tamagui\n// so we can accurately use it for estimatedSize below\nconst getThumbSize = (val?: SizeTokens | number) => {\n const size = typeof val === 'number' ? val : getSize(val, -1)\n return {\n width: size,\n height: size,\n minWidth: size,\n minHeight: size,\n }\n}\n\nexport const SliderThumbFrame = styled(ThemeableStack, {\n name: 'SliderThumb',\n position: 'absolute',\n // TODO not taking up 2\n bordered: 2,\n // OR THIS\n borderWidth: 2,\n backgrounded: true,\n pressTheme: isWeb,\n focusTheme: isWeb,\n hoverTheme: isWeb,\n\n variants: {\n size: {\n '...size': getThumbSize,\n },\n } as const,\n})\n\ninterface SliderThumbProps extends SizableStackProps {\n index: number\n}\n\nconst SliderThumb = React.forwardRef<View, SliderThumbProps>(\n (props: ScopedProps<SliderThumbProps>, forwardedRef) => {\n const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props\n const context = useSliderContext(THUMB_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider)\n const [thumb, setThumb] = React.useState<View | HTMLElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node))\n\n // We cast because index could be `-1` which would return undefined\n const value = context.values[index] as number | undefined\n const percent =\n value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max)\n const label = getLabel(index, context.values.length)\n const [size, setSize] = React.useState(() => {\n // for SSR\n const estimatedSize = getVariableValue(getThumbSize(sizeProp).width)\n return estimatedSize\n })\n\n const thumbInBoundsOffset = size\n ? getThumbInBoundsOffset(size, percent, orientation.direction)\n : 0\n\n React.useEffect(() => {\n if (thumb) {\n context.thumbs.add(thumb)\n return () => {\n context.thumbs.delete(thumb)\n }\n }\n }, [thumb, context.thumbs])\n\n return (\n <SliderThumbFrame\n ref={composedRefs}\n // TODO\n // @ts-ignore\n role=\"slider\"\n aria-label={props['aria-label'] || label}\n aria-valuemin={context.min}\n aria-valuenow={value}\n aria-valuemax={context.max}\n aria-orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n tabIndex={context.disabled ? undefined : 0}\n {...thumbProps}\n {...(context.orientation === 'horizontal'\n ? {\n x: thumbInBoundsOffset - size / 2,\n y: -size / 2,\n top: '50%',\n ...(size === 0 && {\n top: 'auto',\n bottom: 'auto',\n }),\n }\n : {\n x: -size / 2,\n y: size / 2,\n left: '50%',\n ...(size === 0 && {\n left: 'auto',\n right: 'auto',\n }),\n })}\n size={sizeProp ?? context.size ?? '$4'}\n onLayout={(e) => {\n setSize(e.nativeEvent.layout[orientation.sizeProp])\n }}\n {...{\n [orientation.startEdge]: `${percent}%`,\n }}\n /**\n * There will be no value on initial render while we work out the index so we hide thumbs\n * without a value, otherwise SSR will render them in the wrong position before they\n * snap into the correct position during hydration which would be visually jarring for\n * slower connections.\n */\n // style={value === undefined ? { display: 'none' } : props.style}\n onFocus={composeEventHandlers(props.onFocus, () => {\n context.valueIndexToChangeRef.current = index\n })}\n />\n )\n }\n)\n\nSliderThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slider = withStaticProperties(\n React.forwardRef<View, SliderProps>((props: ScopedProps<SliderProps>, forwardedRef) => {\n const {\n name,\n min = 0,\n max = 100,\n step = 1,\n orientation = 'horizontal',\n disabled = false,\n minStepsBetweenThumbs = 0,\n defaultValue = [min],\n value,\n onValueChange = () => {},\n size: sizeProp,\n ...sliderProps\n } = props\n const sliderRef = React.useRef<View>(null)\n const composedRefs = useComposedRefs(sliderRef, forwardedRef)\n const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set())\n const valueIndexToChangeRef = React.useRef<number>(0)\n const isHorizontal = orientation === 'horizontal'\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl =\n // sliderRef.current instanceof HTMLElement ? Boolean(sliderRef.current.closest('form')) : true\n\n const [values = [], setValues] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange: (value) => {\n if (isWeb) {\n const thumbs = [...thumbRefs.current]\n thumbs[valueIndexToChangeRef.current]?.focus()\n }\n onValueChange(value)\n },\n })\n\n if (isWeb) {\n React.useEffect(() => {\n // @ts-ignore\n const node = sliderRef.current as HTMLElement\n if (!node) return\n const preventDefault = (e) => {\n e.preventDefault()\n }\n node.addEventListener('touchstart', preventDefault)\n return () => {\n node.removeEventListener('touchstart', preventDefault)\n }\n }, [])\n }\n\n function handleSlideMove(value: number) {\n updateValues(value, valueIndexToChangeRef.current)\n }\n\n function updateValues(value: number, atIndex: number) {\n const decimalCount = getDecimalCount(step)\n const snapToStep = roundValue(Math.round((value - min) / step) * step + min, decimalCount)\n const nextValue = clamp(snapToStep, [min, max])\n setValues((prevValues = []) => {\n const nextValues = getNextSortedValues(prevValues, nextValue, atIndex)\n if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {\n valueIndexToChangeRef.current = nextValues.indexOf(nextValue)\n return String(nextValues) === String(prevValues) ? prevValues : nextValues\n } else {\n return prevValues\n }\n })\n }\n\n const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical\n\n return (\n <SliderProvider\n scope={props.__scopeSlider}\n disabled={disabled}\n min={min}\n max={max}\n valueIndexToChangeRef={valueIndexToChangeRef}\n thumbs={thumbRefs.current}\n values={values}\n orientation={orientation}\n size={sizeProp}\n >\n <SliderOriented\n aria-disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...sliderProps}\n ref={composedRefs}\n min={min}\n max={max}\n onSlideStart={\n disabled\n ? undefined\n : (value: number, target) => {\n // when starting on the track, move it right away\n // when starting on thumb, dont jump until movemenet as it feels weird\n if (target !== 'thumb') {\n const closestIndex = getClosestValueIndex(values, value)\n updateValues(value, closestIndex)\n }\n }\n }\n onSlideMove={disabled ? undefined : handleSlideMove}\n onHomeKeyDown={() => !disabled && updateValues(min, 0)}\n onEndKeyDown={() => !disabled && updateValues(max, values.length - 1)}\n onStepKeyDown={({ event, direction: stepDirection }) => {\n if (!disabled) {\n const isPageKey = PAGE_KEYS.includes(event.key)\n const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key))\n const multiplier = isSkipKey ? 10 : 1\n const atIndex = valueIndexToChangeRef.current\n const value = values[atIndex]\n const stepInDirection = step * multiplier * stepDirection\n updateValues(value + stepInDirection, atIndex)\n }\n }}\n />\n {/* {isFormControl &&\n values.map((value, index) => (\n <BubbleInput\n key={index}\n name={name ? name + (values.length > 1 ? '[]' : '') : undefined}\n value={value}\n />\n ))} */}\n </SliderProvider>\n )\n }),\n {\n Track: SliderTrack,\n TrackActive: SliderTrackActive,\n Thumb: SliderThumb,\n }\n)\n\nSlider.displayName = SLIDER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\n// // TODO\n// const BubbleInput = (props: any) => {\n// const { value, ...inputProps } = props\n// const ref = React.useRef<HTMLInputElement>(null)\n// const prevValue = usePrevious(value)\n\n// // Bubble value change to parents (e.g form change event)\n// React.useEffect(() => {\n// const input = ref.current!\n// const inputProto = window.HTMLInputElement.prototype\n// const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor\n// const setValue = descriptor.set\n// if (prevValue !== value && setValue) {\n// const event = new Event('input', { bubbles: true })\n// setValue.call(input, value)\n// input.dispatchEvent(event)\n// }\n// }, [prevValue, value])\n\n// /**\n// * We purposefully do not use `type=\"hidden\"` here otherwise forms that\n// * wrap it will not be able to access its value via the FormData API.\n// *\n// * We purposefully do not add the `value` attribute here to allow the value\n// * to be set programatically and bubble to any parent form `onChange` event.\n// * Adding the `value` will cause React to consider the programatic\n// * dispatch a duplicate and it will get swallowed.\n// */\n// return <input style={{ display: 'none' }} {...inputProps} ref={ref} defaultValue={value} />\n// }\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Track = SliderTrack\nconst Range = SliderTrackActive\nconst Thumb = SliderThumb\n\nexport {\n Slider,\n SliderTrack,\n SliderTrackActive,\n SliderThumb,\n //\n Track,\n Range,\n Thumb,\n}\n\nexport type { SliderProps, SliderTrackProps, SliderTrackActiveProps, SliderThumbProps }\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["// forked from radix-ui\n\nimport { composeRefs, useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { clamp, composeEventHandlers } from '@tamagui/helpers'\nimport { SizableStackProps, ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport {\n ARROW_KEYS,\n BACK_KEYS,\n PAGE_KEYS,\n SLIDER_NAME,\n SliderOrientationProvider,\n SliderProvider,\n useSliderContext,\n useSliderOrientationContext,\n} from './constants'\nimport {\n convertValueToPercentage,\n getClosestValueIndex,\n getDecimalCount,\n getLabel,\n getNextSortedValues,\n getThumbInBoundsOffset,\n hasMinStepsBetweenValues,\n linearScale,\n roundValue,\n} from './helpers'\nimport { SliderFrame, SliderImpl } from './SliderImpl'\nimport {\n ScopedProps,\n SliderContextValue,\n SliderHorizontalProps,\n SliderProps,\n SliderTrackProps,\n SliderVerticalProps,\n} from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderHorizontal = React.forwardRef<View, SliderHorizontalProps>(\n (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {\n const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const direction = useDirection(dir)\n const isDirectionLTR = direction === 'ltr'\n const sliderRef = React.useRef<View>(null)\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = isDirectionLTR ? [min, max] : [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge={isDirectionLTR ? 'left' : 'right'}\n endEdge={isDirectionLTR ? 'right' : 'left'}\n direction={isDirectionLTR ? 1 : -1}\n sizeProp=\"width\"\n size={state.size}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n dir={direction}\n {...sliderProps}\n orientation=\"horizontal\"\n onLayout={() => {\n sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {\n setState({\n size: width,\n offset: pageX,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationX)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageX - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS[direction].includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderVertical\n * -----------------------------------------------------------------------------------------------*/\n\nconst SliderVertical = React.forwardRef<View, SliderVerticalProps>(\n (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))\n const sliderRef = React.useRef<View>(null)\n\n function getValueFromPointer(pointerPosition: number) {\n const input: [number, number] = [0, state.size]\n const output: [number, number] = [max, min]\n const value = linearScale(input, output)\n return value(pointerPosition)\n }\n\n return (\n <SliderOrientationProvider\n scope={props.__scopeSlider}\n startEdge=\"bottom\"\n endEdge=\"top\"\n sizeProp=\"height\"\n size={state.size}\n direction={1}\n >\n <SliderImpl\n ref={composeRefs(forwardedRef, sliderRef)}\n {...sliderProps}\n orientation=\"vertical\"\n onLayout={({ nativeEvent: { layout } }) => {\n sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {\n console.log('same?', layout, height, pageY)\n setState({\n size: height,\n offset: pageY,\n })\n })\n }}\n onSlideStart={(event, target) => {\n const value = getValueFromPointer(event.nativeEvent.locationY)\n if (value) {\n onSlideStart?.(value, target)\n }\n }}\n onSlideMove={(event) => {\n const value = getValueFromPointer(event.nativeEvent.pageY - state.offset)\n if (value) {\n onSlideMove?.(value)\n }\n }}\n onSlideEnd={() => {}}\n onStepKeyDown={(event) => {\n const isBackKey = BACK_KEYS.ltr.includes(event.key)\n onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 })\n }}\n />\n </SliderOrientationProvider>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrack\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRACK_NAME = 'SliderTrack'\n\ntype SliderTrackElement = HTMLElement | View\n\nexport const SliderTrackFrame = styled(SliderFrame, {\n name: 'SliderTrack',\n height: '100%',\n width: '100%',\n backgroundColor: '$background',\n position: 'relative',\n borderRadius: 100_000,\n overflow: 'hidden',\n})\n\nconst SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(\n (props: ScopedProps<SliderTrackProps>, forwardedRef) => {\n const { __scopeSlider, ...trackProps } = props\n const context = useSliderContext(TRACK_NAME, __scopeSlider)\n return (\n <SliderTrackFrame\n data-disabled={context.disabled ? '' : undefined}\n data-orientation={context.orientation}\n orientation={context.orientation}\n size={context.size}\n {...trackProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\nSliderTrack.displayName = TRACK_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrackActive\n * -----------------------------------------------------------------------------------------------*/\n\nconst RANGE_NAME = 'SliderTrackActive'\n\nexport const SliderTrackActiveFrame = styled(SliderFrame, {\n name: 'SliderTrackActive',\n backgroundColor: '$background',\n position: 'absolute',\n})\n\ntype SliderTrackActiveProps = GetProps<typeof SliderTrackActiveFrame>\n\nconst SliderTrackActive = React.forwardRef<View, SliderTrackActiveProps>(\n (props: ScopedProps<SliderTrackActiveProps>, forwardedRef) => {\n const { __scopeSlider, ...rangeProps } = props\n const context = useSliderContext(RANGE_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider)\n const ref = React.useRef<View>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const valuesCount = context.values.length\n const percentages = context.values.map((value) =>\n convertValueToPercentage(value, context.min, context.max)\n )\n const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0\n const offsetEnd = 100 - Math.max(...percentages)\n\n return (\n <SliderTrackActiveFrame\n orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n size={context.size}\n {...rangeProps}\n ref={composedRefs}\n {...{\n [orientation.startEdge]: offsetStart + '%',\n [orientation.endEdge]: offsetEnd + '%',\n }}\n {...(orientation.sizeProp === 'width'\n ? {\n height: '100%',\n }\n : {\n left: 0,\n right: 0,\n })}\n />\n )\n }\n)\n\nSliderTrackActive.displayName = RANGE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SliderThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SliderThumb'\n\n// TODO make this customizable through tamagui\n// so we can accurately use it for estimatedSize below\nconst getThumbSize = (val?: SizeTokens | number) => {\n const size = typeof val === 'number' ? val : getSize(val, -1)\n return {\n width: size,\n height: size,\n minWidth: size,\n minHeight: size,\n }\n}\n\nexport const SliderThumbFrame = styled(ThemeableStack, {\n name: 'SliderThumb',\n position: 'absolute',\n // TODO not taking up 2\n bordered: 2,\n // OR THIS\n borderWidth: 2,\n backgrounded: true,\n pressTheme: isWeb,\n focusTheme: isWeb,\n hoverTheme: isWeb,\n\n variants: {\n size: {\n '...size': getThumbSize,\n },\n } as const,\n})\n\ninterface SliderThumbProps extends SizableStackProps {\n index: number\n}\n\nconst SliderThumb = React.forwardRef<View, SliderThumbProps>(\n (props: ScopedProps<SliderThumbProps>, forwardedRef) => {\n const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props\n const context = useSliderContext(THUMB_NAME, __scopeSlider)\n const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider)\n const [thumb, setThumb] = React.useState<View | HTMLElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node))\n\n // We cast because index could be `-1` which would return undefined\n const value = context.values[index] as number | undefined\n const percent =\n value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max)\n const label = getLabel(index, context.values.length)\n const [size, setSize] = React.useState(() => {\n // for SSR\n const estimatedSize = getVariableValue(getThumbSize(sizeProp).width)\n return estimatedSize\n })\n\n const thumbInBoundsOffset = size\n ? getThumbInBoundsOffset(size, percent, orientation.direction)\n : 0\n\n React.useEffect(() => {\n if (thumb) {\n context.thumbs.add(thumb)\n return () => {\n context.thumbs.delete(thumb)\n }\n }\n }, [thumb, context.thumbs])\n\n return (\n <SliderThumbFrame\n ref={composedRefs}\n // TODO\n // @ts-ignore\n role=\"slider\"\n aria-label={props['aria-label'] || label}\n aria-valuemin={context.min}\n aria-valuenow={value}\n aria-valuemax={context.max}\n aria-orientation={context.orientation}\n data-orientation={context.orientation}\n data-disabled={context.disabled ? '' : undefined}\n tabIndex={context.disabled ? undefined : 0}\n {...thumbProps}\n {...(context.orientation === 'horizontal'\n ? {\n x: thumbInBoundsOffset - size / 2,\n y: -size / 2,\n top: '50%',\n ...(size === 0 && {\n top: 'auto',\n bottom: 'auto',\n }),\n }\n : {\n x: -size / 2,\n y: size / 2,\n left: '50%',\n ...(size === 0 && {\n left: 'auto',\n right: 'auto',\n }),\n })}\n size={sizeProp ?? context.size ?? '$4'}\n onLayout={(e) => {\n console.log('did layout')\n setSize(e.nativeEvent.layout[orientation.sizeProp])\n }}\n {...{\n [orientation.startEdge]: `${percent}%`,\n }}\n /**\n * There will be no value on initial render while we work out the index so we hide thumbs\n * without a value, otherwise SSR will render them in the wrong position before they\n * snap into the correct position during hydration which would be visually jarring for\n * slower connections.\n */\n // style={value === undefined ? { display: 'none' } : props.style}\n onFocus={composeEventHandlers(props.onFocus, () => {\n context.valueIndexToChangeRef.current = index\n })}\n />\n )\n }\n)\n\nSliderThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slider = withStaticProperties(\n React.forwardRef<View, SliderProps>((props: ScopedProps<SliderProps>, forwardedRef) => {\n const {\n name,\n min = 0,\n max = 100,\n step = 1,\n orientation = 'horizontal',\n disabled = false,\n minStepsBetweenThumbs = 0,\n defaultValue = [min],\n value,\n onValueChange = () => {},\n size: sizeProp,\n ...sliderProps\n } = props\n const sliderRef = React.useRef<View>(null)\n const composedRefs = useComposedRefs(sliderRef, forwardedRef)\n const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set())\n const valueIndexToChangeRef = React.useRef<number>(0)\n const isHorizontal = orientation === 'horizontal'\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl =\n // sliderRef.current instanceof HTMLElement ? Boolean(sliderRef.current.closest('form')) : true\n\n const [values = [], setValues] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange: (value) => {\n if (isWeb) {\n const thumbs = [...thumbRefs.current]\n thumbs[valueIndexToChangeRef.current]?.focus()\n }\n onValueChange(value)\n },\n })\n\n if (isWeb) {\n React.useEffect(() => {\n // @ts-ignore\n const node = sliderRef.current as HTMLElement\n if (!node) return\n const preventDefault = (e) => {\n e.preventDefault()\n }\n node.addEventListener('touchstart', preventDefault)\n return () => {\n node.removeEventListener('touchstart', preventDefault)\n }\n }, [])\n }\n\n function handleSlideMove(value: number) {\n updateValues(value, valueIndexToChangeRef.current)\n }\n\n function updateValues(value: number, atIndex: number) {\n const decimalCount = getDecimalCount(step)\n const snapToStep = roundValue(Math.round((value - min) / step) * step + min, decimalCount)\n const nextValue = clamp(snapToStep, [min, max])\n setValues((prevValues = []) => {\n const nextValues = getNextSortedValues(prevValues, nextValue, atIndex)\n if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {\n valueIndexToChangeRef.current = nextValues.indexOf(nextValue)\n return String(nextValues) === String(prevValues) ? prevValues : nextValues\n } else {\n return prevValues\n }\n })\n }\n\n const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical\n\n return (\n <SliderProvider\n scope={props.__scopeSlider}\n disabled={disabled}\n min={min}\n max={max}\n valueIndexToChangeRef={valueIndexToChangeRef}\n thumbs={thumbRefs.current}\n values={values}\n orientation={orientation}\n size={sizeProp}\n >\n <SliderOriented\n aria-disabled={disabled}\n data-disabled={disabled ? '' : undefined}\n {...sliderProps}\n ref={composedRefs}\n min={min}\n max={max}\n onSlideStart={\n disabled\n ? undefined\n : (value: number, target) => {\n // when starting on the track, move it right away\n // when starting on thumb, dont jump until movemenet as it feels weird\n if (target !== 'thumb') {\n const closestIndex = getClosestValueIndex(values, value)\n updateValues(value, closestIndex)\n }\n }\n }\n onSlideMove={disabled ? undefined : handleSlideMove}\n onHomeKeyDown={() => !disabled && updateValues(min, 0)}\n onEndKeyDown={() => !disabled && updateValues(max, values.length - 1)}\n onStepKeyDown={({ event, direction: stepDirection }) => {\n if (!disabled) {\n const isPageKey = PAGE_KEYS.includes(event.key)\n const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key))\n const multiplier = isSkipKey ? 10 : 1\n const atIndex = valueIndexToChangeRef.current\n const value = values[atIndex]\n const stepInDirection = step * multiplier * stepDirection\n updateValues(value + stepInDirection, atIndex)\n }\n }}\n />\n {/* {isFormControl &&\n values.map((value, index) => (\n <BubbleInput\n key={index}\n name={name ? name + (values.length > 1 ? '[]' : '') : undefined}\n value={value}\n />\n ))} */}\n </SliderProvider>\n )\n }),\n {\n Track: SliderTrack,\n TrackActive: SliderTrackActive,\n Thumb: SliderThumb,\n }\n)\n\nSlider.displayName = SLIDER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\n// // TODO\n// const BubbleInput = (props: any) => {\n// const { value, ...inputProps } = props\n// const ref = React.useRef<HTMLInputElement>(null)\n// const prevValue = usePrevious(value)\n\n// // Bubble value change to parents (e.g form change event)\n// React.useEffect(() => {\n// const input = ref.current!\n// const inputProto = window.HTMLInputElement.prototype\n// const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor\n// const setValue = descriptor.set\n// if (prevValue !== value && setValue) {\n// const event = new Event('input', { bubbles: true })\n// setValue.call(input, value)\n// input.dispatchEvent(event)\n// }\n// }, [prevValue, value])\n\n// /**\n// * We purposefully do not use `type=\"hidden\"` here otherwise forms that\n// * wrap it will not be able to access its value via the FormData API.\n// *\n// * We purposefully do not add the `value` attribute here to allow the value\n// * to be set programatically and bubble to any parent form `onChange` event.\n// * Adding the `value` will cause React to consider the programatic\n// * dispatch a duplicate and it will get swallowed.\n// */\n// return <input style={{ display: 'none' }} {...inputProps} ref={ref} defaultValue={value} />\n// }\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Track = SliderTrack\nconst Range = SliderTrackActive\nconst Thumb = SliderThumb\n\nexport {\n Slider,\n SliderTrack,\n SliderTrackActive,\n SliderThumb,\n //\n Track,\n Range,\n Thumb,\n}\n\nexport type { SliderProps, SliderTrackProps, SliderTrackActiveProps, SliderThumbProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["value"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/slider",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.195",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -23,12 +23,12 @@
|
|
|
23
23
|
"clean:build": "tamagui-build clean:build"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
27
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
28
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
29
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
30
|
-
"@tamagui/use-controllable-state": "^1.0.1-beta.
|
|
31
|
-
"@tamagui/use-direction": "^1.0.1-beta.
|
|
26
|
+
"@tamagui/compose-refs": "^1.0.1-beta.195",
|
|
27
|
+
"@tamagui/core": "^1.0.1-beta.195",
|
|
28
|
+
"@tamagui/create-context": "^1.0.1-beta.195",
|
|
29
|
+
"@tamagui/stacks": "^1.0.1-beta.195",
|
|
30
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.195",
|
|
31
|
+
"@tamagui/use-direction": "^1.0.1-beta.195"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": "*",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"react-native": "*"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
39
|
+
"@tamagui/build": "^1.0.1-beta.195",
|
|
40
40
|
"@types/react-native": "^0.69.2",
|
|
41
41
|
"react": "*",
|
|
42
42
|
"react-dom": "*",
|
package/src/Slider.tsx
CHANGED
|
@@ -142,8 +142,9 @@ const SliderVertical = React.forwardRef<View, SliderVerticalProps>(
|
|
|
142
142
|
ref={composeRefs(forwardedRef, sliderRef)}
|
|
143
143
|
{...sliderProps}
|
|
144
144
|
orientation="vertical"
|
|
145
|
-
onLayout={() => {
|
|
145
|
+
onLayout={({ nativeEvent: { layout } }) => {
|
|
146
146
|
sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
|
|
147
|
+
console.log('same?', layout, height, pageY)
|
|
147
148
|
setState({
|
|
148
149
|
size: height,
|
|
149
150
|
offset: pageY,
|
|
@@ -374,6 +375,7 @@ const SliderThumb = React.forwardRef<View, SliderThumbProps>(
|
|
|
374
375
|
})}
|
|
375
376
|
size={sizeProp ?? context.size ?? '$4'}
|
|
376
377
|
onLayout={(e) => {
|
|
378
|
+
console.log('did layout')
|
|
377
379
|
setSize(e.nativeEvent.layout[orientation.sizeProp])
|
|
378
380
|
}}
|
|
379
381
|
{...{
|
package/types/Slider.d.ts
CHANGED
|
@@ -4,28 +4,28 @@ import * as React from 'react';
|
|
|
4
4
|
import { View } from 'react-native';
|
|
5
5
|
import { SliderProps, SliderTrackProps } from './types';
|
|
6
6
|
declare type SliderTrackElement = HTMLElement | View;
|
|
7
|
-
export declare const SliderTrackFrame: import("@tamagui/core").TamaguiComponent<(Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
7
|
+
export declare const SliderTrackFrame: import("@tamagui/core").TamaguiComponent<(Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
8
8
|
readonly fullscreen?: boolean | undefined;
|
|
9
9
|
readonly elevation?: SizeTokens | undefined;
|
|
10
10
|
} & {
|
|
11
11
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
12
12
|
}, "size"> & {
|
|
13
13
|
readonly size?: any;
|
|
14
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
14
|
+
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
15
15
|
readonly fullscreen?: boolean | undefined;
|
|
16
16
|
readonly elevation?: SizeTokens | undefined;
|
|
17
17
|
} & {
|
|
18
18
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
19
19
|
}, "size"> & {
|
|
20
20
|
readonly size?: any;
|
|
21
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
21
|
+
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
22
22
|
readonly fullscreen?: boolean | undefined;
|
|
23
23
|
readonly elevation?: SizeTokens | undefined;
|
|
24
24
|
} & {
|
|
25
25
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
26
26
|
}, "size"> & {
|
|
27
27
|
readonly size?: any;
|
|
28
|
-
}>>) | (Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
28
|
+
}>>) | (Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
29
29
|
readonly fullscreen?: boolean | undefined;
|
|
30
30
|
readonly elevation?: SizeTokens | undefined;
|
|
31
31
|
} & {
|
|
@@ -34,7 +34,7 @@ export declare const SliderTrackFrame: import("@tamagui/core").TamaguiComponent<
|
|
|
34
34
|
readonly size?: any;
|
|
35
35
|
}, string | number> & {
|
|
36
36
|
[x: string]: undefined;
|
|
37
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
37
|
+
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
38
38
|
readonly fullscreen?: boolean | undefined;
|
|
39
39
|
readonly elevation?: SizeTokens | undefined;
|
|
40
40
|
} & {
|
|
@@ -43,7 +43,7 @@ export declare const SliderTrackFrame: import("@tamagui/core").TamaguiComponent<
|
|
|
43
43
|
readonly size?: any;
|
|
44
44
|
}, string | number> & {
|
|
45
45
|
[x: string]: undefined;
|
|
46
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
46
|
+
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
47
47
|
readonly fullscreen?: boolean | undefined;
|
|
48
48
|
readonly elevation?: SizeTokens | undefined;
|
|
49
49
|
} & {
|
|
@@ -63,28 +63,28 @@ export declare const SliderTrackFrame: import("@tamagui/core").TamaguiComponent<
|
|
|
63
63
|
[x: string]: undefined;
|
|
64
64
|
})>;
|
|
65
65
|
declare const SliderTrack: React.ForwardRefExoticComponent<SliderTrackProps & React.RefAttributes<SliderTrackElement>>;
|
|
66
|
-
export declare const SliderTrackActiveFrame: import("@tamagui/core").TamaguiComponent<(Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
66
|
+
export declare const SliderTrackActiveFrame: import("@tamagui/core").TamaguiComponent<(Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
67
67
|
readonly fullscreen?: boolean | undefined;
|
|
68
68
|
readonly elevation?: SizeTokens | undefined;
|
|
69
69
|
} & {
|
|
70
70
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
71
71
|
}, "size"> & {
|
|
72
72
|
readonly size?: any;
|
|
73
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
73
|
+
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
74
74
|
readonly fullscreen?: boolean | undefined;
|
|
75
75
|
readonly elevation?: SizeTokens | undefined;
|
|
76
76
|
} & {
|
|
77
77
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
78
78
|
}, "size"> & {
|
|
79
79
|
readonly size?: any;
|
|
80
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
80
|
+
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
81
81
|
readonly fullscreen?: boolean | undefined;
|
|
82
82
|
readonly elevation?: SizeTokens | undefined;
|
|
83
83
|
} & {
|
|
84
84
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
85
85
|
}, "size"> & {
|
|
86
86
|
readonly size?: any;
|
|
87
|
-
}>>) | (Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
87
|
+
}>>) | (Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
88
88
|
readonly fullscreen?: boolean | undefined;
|
|
89
89
|
readonly elevation?: SizeTokens | undefined;
|
|
90
90
|
} & {
|
|
@@ -93,7 +93,7 @@ export declare const SliderTrackActiveFrame: import("@tamagui/core").TamaguiComp
|
|
|
93
93
|
readonly size?: any;
|
|
94
94
|
}, string | number> & {
|
|
95
95
|
[x: string]: undefined;
|
|
96
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
96
|
+
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
97
97
|
readonly fullscreen?: boolean | undefined;
|
|
98
98
|
readonly elevation?: SizeTokens | undefined;
|
|
99
99
|
} & {
|
|
@@ -102,7 +102,7 @@ export declare const SliderTrackActiveFrame: import("@tamagui/core").TamaguiComp
|
|
|
102
102
|
readonly size?: any;
|
|
103
103
|
}, string | number> & {
|
|
104
104
|
[x: string]: undefined;
|
|
105
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
105
|
+
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
106
106
|
readonly fullscreen?: boolean | undefined;
|
|
107
107
|
readonly elevation?: SizeTokens | undefined;
|
|
108
108
|
} & {
|
|
@@ -122,28 +122,28 @@ export declare const SliderTrackActiveFrame: import("@tamagui/core").TamaguiComp
|
|
|
122
122
|
[x: string]: undefined;
|
|
123
123
|
})>;
|
|
124
124
|
declare type SliderTrackActiveProps = GetProps<typeof SliderTrackActiveFrame>;
|
|
125
|
-
declare const SliderTrackActive: React.ForwardRefExoticComponent<((Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
125
|
+
declare const SliderTrackActive: React.ForwardRefExoticComponent<((Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
126
126
|
readonly fullscreen?: boolean | undefined;
|
|
127
127
|
readonly elevation?: SizeTokens | undefined;
|
|
128
128
|
} & {
|
|
129
129
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
130
130
|
}, "size"> & {
|
|
131
131
|
readonly size?: any;
|
|
132
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
132
|
+
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
133
133
|
readonly fullscreen?: boolean | undefined;
|
|
134
134
|
readonly elevation?: SizeTokens | undefined;
|
|
135
135
|
} & {
|
|
136
136
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
137
137
|
}, "size"> & {
|
|
138
138
|
readonly size?: any;
|
|
139
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
139
|
+
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
140
140
|
readonly fullscreen?: boolean | undefined;
|
|
141
141
|
readonly elevation?: SizeTokens | undefined;
|
|
142
142
|
} & {
|
|
143
143
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
144
144
|
}, "size"> & {
|
|
145
145
|
readonly size?: any;
|
|
146
|
-
}>>) | Pick<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
146
|
+
}>>) | Pick<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
147
147
|
readonly fullscreen?: boolean | undefined;
|
|
148
148
|
readonly elevation?: SizeTokens | undefined;
|
|
149
149
|
} & {
|
|
@@ -152,7 +152,7 @@ declare const SliderTrackActive: React.ForwardRefExoticComponent<((Omit<import("
|
|
|
152
152
|
readonly size?: any;
|
|
153
153
|
}, string | number> & {
|
|
154
154
|
[x: string]: undefined;
|
|
155
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
155
|
+
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
156
156
|
readonly fullscreen?: boolean | undefined;
|
|
157
157
|
readonly elevation?: SizeTokens | undefined;
|
|
158
158
|
} & {
|
|
@@ -161,7 +161,7 @@ declare const SliderTrackActive: React.ForwardRefExoticComponent<((Omit<import("
|
|
|
161
161
|
readonly size?: any;
|
|
162
162
|
}, string | number> & {
|
|
163
163
|
[x: string]: undefined;
|
|
164
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
164
|
+
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
165
165
|
readonly fullscreen?: boolean | undefined;
|
|
166
166
|
readonly elevation?: SizeTokens | undefined;
|
|
167
167
|
} & {
|
|
@@ -171,7 +171,7 @@ declare const SliderTrackActive: React.ForwardRefExoticComponent<((Omit<import("
|
|
|
171
171
|
}, string | number> & {
|
|
172
172
|
[x: string]: undefined;
|
|
173
173
|
}>>, string | number>) & React.RefAttributes<View>>;
|
|
174
|
-
export declare const SliderThumbFrame: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
174
|
+
export declare const SliderThumbFrame: import("@tamagui/core").TamaguiComponent<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
175
175
|
readonly fullscreen?: boolean | undefined;
|
|
176
176
|
readonly elevation?: SizeTokens | undefined;
|
|
177
177
|
} & {
|
|
@@ -189,7 +189,7 @@ export declare const SliderThumbFrame: import("@tamagui/core").TamaguiComponent<
|
|
|
189
189
|
readonly chromeless?: boolean | "all" | undefined;
|
|
190
190
|
}, "size"> & {
|
|
191
191
|
readonly size?: SizeTokens | undefined;
|
|
192
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
192
|
+
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
193
193
|
readonly fullscreen?: boolean | undefined;
|
|
194
194
|
readonly elevation?: SizeTokens | undefined;
|
|
195
195
|
} & {
|
|
@@ -207,7 +207,7 @@ export declare const SliderThumbFrame: import("@tamagui/core").TamaguiComponent<
|
|
|
207
207
|
readonly chromeless?: boolean | "all" | undefined;
|
|
208
208
|
}, "size"> & {
|
|
209
209
|
readonly size?: SizeTokens | undefined;
|
|
210
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
210
|
+
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
211
211
|
readonly fullscreen?: boolean | undefined;
|
|
212
212
|
readonly elevation?: SizeTokens | undefined;
|
|
213
213
|
} & {
|
|
@@ -250,28 +250,28 @@ interface SliderThumbProps extends SizableStackProps {
|
|
|
250
250
|
declare const SliderThumb: React.ForwardRefExoticComponent<SliderThumbProps & React.RefAttributes<View>>;
|
|
251
251
|
declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<View>> & {
|
|
252
252
|
Track: React.ForwardRefExoticComponent<SliderTrackProps & React.RefAttributes<SliderTrackElement>>;
|
|
253
|
-
TrackActive: React.ForwardRefExoticComponent<((Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
253
|
+
TrackActive: React.ForwardRefExoticComponent<((Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
254
254
|
readonly fullscreen?: boolean | undefined;
|
|
255
255
|
readonly elevation?: SizeTokens | undefined;
|
|
256
256
|
} & {
|
|
257
257
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
258
258
|
}, "size"> & {
|
|
259
259
|
readonly size?: any;
|
|
260
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
260
|
+
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
261
261
|
readonly fullscreen?: boolean | undefined;
|
|
262
262
|
readonly elevation?: SizeTokens | undefined;
|
|
263
263
|
} & {
|
|
264
264
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
265
265
|
}, "size"> & {
|
|
266
266
|
readonly size?: any;
|
|
267
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
267
|
+
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
268
268
|
readonly fullscreen?: boolean | undefined;
|
|
269
269
|
readonly elevation?: SizeTokens | undefined;
|
|
270
270
|
} & {
|
|
271
271
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
272
272
|
}, "size"> & {
|
|
273
273
|
readonly size?: any;
|
|
274
|
-
}>>) | Pick<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
274
|
+
}>>) | Pick<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
275
275
|
readonly fullscreen?: boolean | undefined;
|
|
276
276
|
readonly elevation?: SizeTokens | undefined;
|
|
277
277
|
} & {
|
|
@@ -280,7 +280,7 @@ declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAtt
|
|
|
280
280
|
readonly size?: any;
|
|
281
281
|
}, string | number> & {
|
|
282
282
|
[x: string]: undefined;
|
|
283
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
283
|
+
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
284
284
|
readonly fullscreen?: boolean | undefined;
|
|
285
285
|
readonly elevation?: SizeTokens | undefined;
|
|
286
286
|
} & {
|
|
@@ -289,7 +289,7 @@ declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAtt
|
|
|
289
289
|
readonly size?: any;
|
|
290
290
|
}, string | number> & {
|
|
291
291
|
[x: string]: undefined;
|
|
292
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
292
|
+
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
293
293
|
readonly fullscreen?: boolean | undefined;
|
|
294
294
|
readonly elevation?: SizeTokens | undefined;
|
|
295
295
|
} & {
|
|
@@ -302,28 +302,28 @@ declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAtt
|
|
|
302
302
|
Thumb: React.ForwardRefExoticComponent<SliderThumbProps & React.RefAttributes<View>>;
|
|
303
303
|
};
|
|
304
304
|
declare const Track: React.ForwardRefExoticComponent<SliderTrackProps & React.RefAttributes<SliderTrackElement>>;
|
|
305
|
-
declare const Range: React.ForwardRefExoticComponent<((Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
305
|
+
declare const Range: React.ForwardRefExoticComponent<((Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
306
306
|
readonly fullscreen?: boolean | undefined;
|
|
307
307
|
readonly elevation?: SizeTokens | undefined;
|
|
308
308
|
} & {
|
|
309
309
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
310
310
|
}, "size"> & {
|
|
311
311
|
readonly size?: any;
|
|
312
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
312
|
+
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
313
313
|
readonly fullscreen?: boolean | undefined;
|
|
314
314
|
readonly elevation?: SizeTokens | undefined;
|
|
315
315
|
} & {
|
|
316
316
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
317
317
|
}, "size"> & {
|
|
318
318
|
readonly size?: any;
|
|
319
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
319
|
+
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
320
320
|
readonly fullscreen?: boolean | undefined;
|
|
321
321
|
readonly elevation?: SizeTokens | undefined;
|
|
322
322
|
} & {
|
|
323
323
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
324
324
|
}, "size"> & {
|
|
325
325
|
readonly size?: any;
|
|
326
|
-
}>>) | Pick<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
326
|
+
}>>) | Pick<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
327
327
|
readonly fullscreen?: boolean | undefined;
|
|
328
328
|
readonly elevation?: SizeTokens | undefined;
|
|
329
329
|
} & {
|
|
@@ -332,7 +332,7 @@ declare const Range: React.ForwardRefExoticComponent<((Omit<import("react-native
|
|
|
332
332
|
readonly size?: any;
|
|
333
333
|
}, string | number> & {
|
|
334
334
|
[x: string]: undefined;
|
|
335
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
335
|
+
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
336
336
|
readonly fullscreen?: boolean | undefined;
|
|
337
337
|
readonly elevation?: SizeTokens | undefined;
|
|
338
338
|
} & {
|
|
@@ -341,7 +341,7 @@ declare const Range: React.ForwardRefExoticComponent<((Omit<import("react-native
|
|
|
341
341
|
readonly size?: any;
|
|
342
342
|
}, string | number> & {
|
|
343
343
|
[x: string]: undefined;
|
|
344
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
344
|
+
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
345
345
|
readonly fullscreen?: boolean | undefined;
|
|
346
346
|
readonly elevation?: SizeTokens | undefined;
|
|
347
347
|
} & {
|
package/types/SliderImpl.d.ts
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { View } from 'react-native';
|
|
3
3
|
import { SliderImplProps } from './types';
|
|
4
|
-
export declare const DirectionalYStack: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
4
|
+
export declare const DirectionalYStack: import("@tamagui/core").TamaguiComponent<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
5
5
|
readonly fullscreen?: boolean | undefined;
|
|
6
6
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
7
7
|
}, "orientation"> & {
|
|
8
8
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
9
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
9
|
+
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
10
10
|
readonly fullscreen?: boolean | undefined;
|
|
11
11
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
12
12
|
}, "orientation"> & {
|
|
13
13
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
14
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
14
|
+
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
15
15
|
readonly fullscreen?: boolean | undefined;
|
|
16
16
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
17
17
|
}, "orientation"> & {
|
|
@@ -22,21 +22,21 @@ export declare const DirectionalYStack: import("@tamagui/core").TamaguiComponent
|
|
|
22
22
|
} & {
|
|
23
23
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
24
24
|
}>;
|
|
25
|
-
export declare const SliderFrame: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
25
|
+
export declare const SliderFrame: import("@tamagui/core").TamaguiComponent<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
26
26
|
readonly fullscreen?: boolean | undefined;
|
|
27
27
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
28
28
|
} & {
|
|
29
29
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
30
30
|
}, "size"> & {
|
|
31
31
|
readonly size?: any;
|
|
32
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
32
|
+
} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
33
33
|
readonly fullscreen?: boolean | undefined;
|
|
34
34
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
35
35
|
} & {
|
|
36
36
|
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
37
37
|
}, "size"> & {
|
|
38
38
|
readonly size?: any;
|
|
39
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
39
|
+
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
40
40
|
readonly fullscreen?: boolean | undefined;
|
|
41
41
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
42
42
|
} & {
|