@tamagui/slider 1.0.1-beta.151 → 1.0.1-beta.154
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 +330 -308
- package/dist/cjs/Slider.js.map +2 -2
- package/dist/cjs/SliderImpl.js +65 -59
- package/dist/cjs/SliderImpl.js.map +1 -1
- package/dist/cjs/constants.js.map +1 -1
- package/dist/cjs/helpers.js.map +1 -1
- package/dist/esm/Slider.js +326 -307
- package/dist/esm/Slider.js.map +2 -2
- package/dist/esm/SliderImpl.js +61 -58
- package/dist/esm/SliderImpl.js.map +1 -1
- package/dist/esm/constants.js.map +1 -1
- package/dist/esm/helpers.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/jsx/Slider.js +231 -216
- package/dist/jsx/Slider.js.map +2 -2
- package/dist/jsx/SliderImpl.js +45 -43
- package/dist/jsx/SliderImpl.js.map +1 -1
- package/dist/jsx/constants.js.map +1 -1
- package/dist/jsx/helpers.js.map +1 -1
- package/dist/jsx/index.js.map +1 -1
- package/package.json +8 -8
package/dist/esm/Slider.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Slider.tsx"],
|
|
4
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 },\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": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["value"]
|
|
7
7
|
}
|
package/dist/esm/SliderImpl.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
1
2
|
import { composeEventHandlers, getSize, getVariableValue, isWeb, styled } from "@tamagui/core";
|
|
2
3
|
import { YStack } from "@tamagui/stacks";
|
|
3
4
|
import * as React from "react";
|
|
@@ -31,66 +32,68 @@ const SliderFrame = styled(DirectionalYStack, {
|
|
|
31
32
|
}
|
|
32
33
|
}
|
|
33
34
|
});
|
|
34
|
-
const SliderImpl = React.forwardRef(
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
35
|
+
const SliderImpl = React.forwardRef(
|
|
36
|
+
(props, forwardedRef) => {
|
|
37
|
+
const {
|
|
38
|
+
__scopeSlider,
|
|
39
|
+
onSlideStart,
|
|
40
|
+
onSlideMove,
|
|
41
|
+
onSlideEnd,
|
|
42
|
+
onHomeKeyDown,
|
|
43
|
+
onEndKeyDown,
|
|
44
|
+
onStepKeyDown,
|
|
45
|
+
...sliderProps
|
|
46
|
+
} = props;
|
|
47
|
+
const context = useSliderContext(SLIDER_NAME, __scopeSlider);
|
|
48
|
+
return /* @__PURE__ */ jsx(SliderFrame, {
|
|
49
|
+
size: "$4",
|
|
50
|
+
...sliderProps,
|
|
51
|
+
"data-orientation": sliderProps.orientation,
|
|
52
|
+
ref: forwardedRef,
|
|
53
|
+
...isWeb && {
|
|
54
|
+
onKeyDown: (event) => {
|
|
55
|
+
if (event.key === "Home") {
|
|
56
|
+
onHomeKeyDown(event);
|
|
57
|
+
event.preventDefault();
|
|
58
|
+
} else if (event.key === "End") {
|
|
59
|
+
onEndKeyDown(event);
|
|
60
|
+
event.preventDefault();
|
|
61
|
+
} else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
|
|
62
|
+
onStepKeyDown(event);
|
|
63
|
+
event.preventDefault();
|
|
64
|
+
}
|
|
62
65
|
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
66
|
+
},
|
|
67
|
+
onMoveShouldSetResponderCapture: () => true,
|
|
68
|
+
onScrollShouldSetResponder: () => true,
|
|
69
|
+
onScrollShouldSetResponderCapture: () => true,
|
|
70
|
+
onMoveShouldSetResponder: () => true,
|
|
71
|
+
onStartShouldSetResponder: () => true,
|
|
72
|
+
onResponderTerminationRequest: () => {
|
|
73
|
+
return false;
|
|
74
|
+
},
|
|
75
|
+
onResponderGrant: composeEventHandlers(props.onResponderGrant, (event) => {
|
|
76
|
+
const target = event.target;
|
|
77
|
+
console.log("target", target, context.thumbs.has(target), context.thumbs);
|
|
78
|
+
const isStartingOnThumb = context.thumbs.has(target);
|
|
79
|
+
if (isWeb && target instanceof HTMLElement) {
|
|
80
|
+
if (context.thumbs.has(target)) {
|
|
81
|
+
target.focus();
|
|
82
|
+
}
|
|
80
83
|
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
})
|
|
92
|
-
}
|
|
93
|
-
|
|
84
|
+
onSlideStart(event, isStartingOnThumb ? "thumb" : "track");
|
|
85
|
+
}),
|
|
86
|
+
onResponderMove: composeEventHandlers(props.onResponderMove, (event) => {
|
|
87
|
+
event.preventDefault();
|
|
88
|
+
event.stopPropagation();
|
|
89
|
+
onSlideMove(event);
|
|
90
|
+
}),
|
|
91
|
+
onResponderRelease: composeEventHandlers(props.onResponderRelease, (event) => {
|
|
92
|
+
onSlideEnd(event);
|
|
93
|
+
})
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
);
|
|
94
97
|
export {
|
|
95
98
|
DirectionalYStack,
|
|
96
99
|
SliderFrame,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SliderImpl.tsx"],
|
|
4
4
|
"sourcesContent": ["/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\nimport { composeEventHandlers, getSize, getVariableValue, isWeb, styled } from '@tamagui/core'\nimport { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from './constants'\nimport { ScopedProps, SliderImplProps } from './types'\n\nexport const DirectionalYStack = styled(YStack, {\n variants: {\n orientation: {\n horizontal: {},\n vertical: {},\n },\n },\n})\n\nexport const SliderFrame = styled(DirectionalYStack, {\n position: 'relative',\n\n variants: {\n size: (val, extras) => {\n const orientation = extras.props.orientation\n const size = Math.round(getVariableValue(getSize(val)) / 6)\n if (orientation === 'horizontal') {\n return {\n height: size,\n borderRadius: size,\n justifyContent: 'center',\n }\n }\n return {\n width: size,\n borderRadius: size,\n alignItems: 'center',\n }\n },\n },\n})\n\nexport const SliderImpl = React.forwardRef<View, SliderImplProps>(\n (props: ScopedProps<SliderImplProps>, forwardedRef) => {\n const {\n __scopeSlider,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onHomeKeyDown,\n onEndKeyDown,\n onStepKeyDown,\n ...sliderProps\n } = props\n const context = useSliderContext(SLIDER_NAME, __scopeSlider)\n return (\n <SliderFrame\n size=\"$4\"\n {...sliderProps}\n data-orientation={sliderProps.orientation}\n ref={forwardedRef}\n {...(isWeb && {\n onKeyDown: (event) => {\n if (event.key === 'Home') {\n onHomeKeyDown(event)\n // Prevent scrolling to page start\n event.preventDefault()\n } else if (event.key === 'End') {\n onEndKeyDown(event)\n // Prevent scrolling to page end\n event.preventDefault()\n } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {\n onStepKeyDown(event)\n // Prevent scrolling for directional key presses\n event.preventDefault()\n }\n },\n })}\n onMoveShouldSetResponderCapture={() => true}\n onScrollShouldSetResponder={() => true}\n onScrollShouldSetResponderCapture={() => true}\n onMoveShouldSetResponder={() => true}\n onStartShouldSetResponder={() => true}\n // onStartShouldSetResponderCapture={() => true}\n onResponderTerminationRequest={() => {\n return false\n }}\n onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {\n const target = event.target as HTMLElement | number\n console.log('target', target, context.thumbs.has(target), context.thumbs)\n const isStartingOnThumb = context.thumbs.has(target)\n // // Prevent browser focus behaviour because we focus a thumb manually when values change.\n // Touch devices have a delay before focusing so won't focus if touch immediately moves\n // away from target (sliding). We want thumb to focus regardless.\n if (isWeb && target instanceof HTMLElement) {\n if (context.thumbs.has(target)) {\n target.focus()\n }\n }\n onSlideStart(event, isStartingOnThumb ? 'thumb' : 'track')\n })}\n onResponderMove={composeEventHandlers(props.onResponderMove, (event) => {\n event.preventDefault()\n event.stopPropagation()\n\n // const target = event.target as HTMLElement\n onSlideMove(event)\n })}\n onResponderRelease={composeEventHandlers(props.onResponderRelease, (event) => {\n // const target = event.target as HTMLElement\n onSlideEnd(event)\n })}\n />\n )\n }\n)\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AA0DM;AAtDN,SAAS,sBAAsB,SAAS,kBAAkB,OAAO,cAAc;AAC/E,SAAS,cAAc;AACvB,YAAY,WAAW;AAGvB,SAAS,YAAY,WAAW,aAAa,wBAAwB;AAG9D,MAAM,oBAAoB,OAAO,QAAQ;AAAA,EAC9C,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY,CAAC;AAAA,MACb,UAAU,CAAC;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAEM,MAAM,cAAc,OAAO,mBAAmB;AAAA,EACnD,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM,CAAC,KAAK,WAAW;AACrB,YAAM,cAAc,OAAO,MAAM;AACjC,YAAM,OAAO,KAAK,MAAM,iBAAiB,QAAQ,GAAG,CAAC,IAAI,CAAC;AAC1D,UAAI,gBAAgB,cAAc;AAChC,eAAO;AAAA,UACL,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,gBAAgB;AAAA,QAClB;AAAA,MACF;AACA,aAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,OAAqC,iBAAiB;AACrD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,SACG;AAAA,IACL,IAAI;AACJ,UAAM,UAAU,iBAAiB,aAAa,aAAa;AAC3D,WACE,oBAAC;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,oBAAkB,YAAY;AAAA,MAC9B,KAAK;AAAA,MACJ,GAAI,SAAS;AAAA,QACZ,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ,QAAQ;AACxB,0BAAc,KAAK;AAEnB,kBAAM,eAAe;AAAA,UACvB,WAAW,MAAM,QAAQ,OAAO;AAC9B,yBAAa,KAAK;AAElB,kBAAM,eAAe;AAAA,UACvB,WAAW,UAAU,OAAO,UAAU,EAAE,SAAS,MAAM,GAAG,GAAG;AAC3D,0BAAc,KAAK;AAEnB,kBAAM,eAAe;AAAA,UACvB;AAAA,QACF;AAAA,MACF;AAAA,MACA,iCAAiC,MAAM;AAAA,MACvC,4BAA4B,MAAM;AAAA,MAClC,mCAAmC,MAAM;AAAA,MACzC,0BAA0B,MAAM;AAAA,MAChC,2BAA2B,MAAM;AAAA,MAEjC,+BAA+B,MAAM;AACnC,eAAO;AAAA,MACT;AAAA,MACA,kBAAkB,qBAAqB,MAAM,kBAAkB,CAAC,UAAU;AACxE,cAAM,SAAS,MAAM;AACrB,gBAAQ,IAAI,UAAU,QAAQ,QAAQ,OAAO,IAAI,MAAM,GAAG,QAAQ,MAAM;AACxE,cAAM,oBAAoB,QAAQ,OAAO,IAAI,MAAM;AAInD,YAAI,SAAS,kBAAkB,aAAa;AAC1C,cAAI,QAAQ,OAAO,IAAI,MAAM,GAAG;AAC9B,mBAAO,MAAM;AAAA,UACf;AAAA,QACF;AACA,qBAAa,OAAO,oBAAoB,UAAU,OAAO;AAAA,MAC3D,CAAC;AAAA,MACD,iBAAiB,qBAAqB,MAAM,iBAAiB,CAAC,UAAU;AACtE,cAAM,eAAe;AACrB,cAAM,gBAAgB;AAGtB,oBAAY,KAAK;AAAA,MACnB,CAAC;AAAA,MACD,oBAAoB,qBAAqB,MAAM,oBAAoB,CAAC,UAAU;AAE5E,mBAAW,KAAK;AAAA,MAClB,CAAC;AAAA,KACH;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/constants.tsx"],
|
|
4
4
|
"sourcesContent": ["import { SizeTokens } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\n\nimport { Direction, SliderContextValue } from './types'\n\nexport const SLIDER_NAME = 'Slider'\n\nexport const [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME)\n\nexport const [SliderProvider, useSliderContext] =\n createSliderContext<SliderContextValue>(SLIDER_NAME)\n\nexport const [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext<{\n startEdge: 'bottom' | 'left' | 'right'\n endEdge: 'top' | 'right' | 'left'\n sizeProp: 'width' | 'height'\n size: number | SizeTokens\n direction: number\n}>(SLIDER_NAME, {\n startEdge: 'left',\n endEdge: 'right',\n sizeProp: 'width',\n size: 0,\n direction: 1,\n})\n\nexport const PAGE_KEYS = ['PageUp', 'PageDown']\nexport const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\nexport const BACK_KEYS: Record<Direction, string[]> = {\n ltr: ['ArrowDown', 'Home', 'ArrowLeft', 'PageDown'],\n rtl: ['ArrowDown', 'Home', 'ArrowRight', 'PageDown'],\n}\n"],
|
|
5
|
-
"mappings": "AACA;
|
|
5
|
+
"mappings": "AACA,SAAS,0BAA0B;AAI5B,MAAM,cAAc;AAEpB,MAAM,CAAC,qBAAqB,iBAAiB,IAAI,mBAAmB,WAAW;AAE/E,MAAM,CAAC,gBAAgB,gBAAgB,IAC5C,oBAAwC,WAAW;AAE9C,MAAM,CAAC,2BAA2B,2BAA2B,IAAI,oBAMrE,aAAa;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,WAAW;AACb,CAAC;AAEM,MAAM,YAAY,CAAC,UAAU,UAAU;AACvC,MAAM,aAAa,CAAC,WAAW,aAAa,aAAa,YAAY;AACrE,MAAM,YAAyC;AAAA,EACpD,KAAK,CAAC,aAAa,QAAQ,aAAa,UAAU;AAAA,EAClD,KAAK,CAAC,aAAa,QAAQ,cAAc,UAAU;AACrD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/helpers.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/helpers.tsx"],
|
|
4
4
|
"sourcesContent": ["export function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\n const nextValues = [...prevValues]\n nextValues[atIndex] = nextValue\n return nextValues.sort((a, b) => a - b)\n}\n\nexport function convertValueToPercentage(value: number, min: number, max: number) {\n const maxSteps = max - min\n const percentPerStep = 100 / maxSteps\n return percentPerStep * (value - min)\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nexport function getLabel(index: number, totalValues: number) {\n if (totalValues > 2) {\n return `Value ${index + 1} of ${totalValues}`\n } else if (totalValues === 2) {\n return ['Minimum', 'Maximum'][index]\n } else {\n return undefined\n }\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nexport function getClosestValueIndex(values: number[], nextValue: number) {\n if (values.length === 1) return 0\n const distances = values.map((value) => Math.abs(value - nextValue))\n const closestDistance = Math.min(...distances)\n return distances.indexOf(closestDistance)\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nexport function getThumbInBoundsOffset(width: number, left: number, direction: number) {\n const halfWidth = width / 2\n const halfPercent = 50\n const offset = linearScale([0, halfPercent], [0, halfWidth])\n return (halfWidth - offset(left) * direction) * direction\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nfunction getStepsBetweenValues(values: number[]) {\n return values.slice(0, -1).map((value, index) => values[index + 1] - value)\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nexport function hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {\n if (minStepsBetweenValues > 0) {\n const stepsBetweenValues = getStepsBetweenValues(values)\n const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues)\n return actualMinStepsBetweenValues >= minStepsBetweenValues\n }\n return true\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nexport function linearScale(input: readonly [number, number], output: readonly [number, number]) {\n return (value: number) => {\n if (input[0] === input[1] || output[0] === output[1]) return output[0]\n const ratio = (output[1] - output[0]) / (input[1] - input[0])\n return output[0] + ratio * (value - input[0])\n }\n}\n\nexport function getDecimalCount(value: number) {\n return (String(value).split('.')[1] || '').length\n}\n\nexport function roundValue(value: number, decimalCount: number) {\n const rounder = Math.pow(10, decimalCount)\n return Math.round(value * rounder) / rounder\n}\n"],
|
|
5
|
-
"mappings": "AAAO,
|
|
5
|
+
"mappings": "AAAO,SAAS,oBAAoB,aAAuB,CAAC,GAAG,WAAmB,SAAiB;AACjG,QAAM,aAAa,CAAC,GAAG,UAAU;AACjC,aAAW,WAAW;AACtB,SAAO,WAAW,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AACxC;AAEO,SAAS,yBAAyB,OAAe,KAAa,KAAa;AAChF,QAAM,WAAW,MAAM;AACvB,QAAM,iBAAiB,MAAM;AAC7B,SAAO,kBAAkB,QAAQ;AACnC;AAKO,SAAS,SAAS,OAAe,aAAqB;AAC3D,MAAI,cAAc,GAAG;AACnB,WAAO,SAAS,QAAQ,QAAQ;AAAA,EAClC,WAAW,gBAAgB,GAAG;AAC5B,WAAO,CAAC,WAAW,SAAS,EAAE;AAAA,EAChC,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAUO,SAAS,qBAAqB,QAAkB,WAAmB;AACxE,MAAI,OAAO,WAAW;AAAG,WAAO;AAChC,QAAM,YAAY,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,QAAQ,SAAS,CAAC;AACnE,QAAM,kBAAkB,KAAK,IAAI,GAAG,SAAS;AAC7C,SAAO,UAAU,QAAQ,eAAe;AAC1C;AAMO,SAAS,uBAAuB,OAAe,MAAc,WAAmB;AACrF,QAAM,YAAY,QAAQ;AAC1B,QAAM,cAAc;AACpB,QAAM,SAAS,YAAY,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,SAAS,CAAC;AAC3D,UAAQ,YAAY,OAAO,IAAI,IAAI,aAAa;AAClD;AASA,SAAS,sBAAsB,QAAkB;AAC/C,SAAO,OAAO,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,OAAO,UAAU,OAAO,QAAQ,KAAK,KAAK;AAC5E;AAcO,SAAS,yBAAyB,QAAkB,uBAA+B;AACxF,MAAI,wBAAwB,GAAG;AAC7B,UAAM,qBAAqB,sBAAsB,MAAM;AACvD,UAAM,8BAA8B,KAAK,IAAI,GAAG,kBAAkB;AAClE,WAAO,+BAA+B;AAAA,EACxC;AACA,SAAO;AACT;AAGO,SAAS,YAAY,OAAkC,QAAmC;AAC/F,SAAO,CAAC,UAAkB;AACxB,QAAI,MAAM,OAAO,MAAM,MAAM,OAAO,OAAO,OAAO;AAAI,aAAO,OAAO;AACpE,UAAM,SAAS,OAAO,KAAK,OAAO,OAAO,MAAM,KAAK,MAAM;AAC1D,WAAO,OAAO,KAAK,SAAS,QAAQ,MAAM;AAAA,EAC5C;AACF;AAEO,SAAS,gBAAgB,OAAe;AAC7C,UAAQ,OAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,IAAI;AAC7C;AAEO,SAAS,WAAW,OAAe,cAAsB;AAC9D,QAAM,UAAU,KAAK,IAAI,IAAI,YAAY;AACzC,SAAO,KAAK,MAAM,QAAQ,OAAO,IAAI;AACvC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts"],
|
|
4
4
|
"sourcesContent": ["export * from './Slider'\n// for static extract to find, must export\nexport { SliderFrame, DirectionalYStack } from './SliderImpl'\nexport type {\n SliderProps,\n SliderHorizontalProps,\n SliderVerticalProps,\n SliderTrackProps,\n} from './types'\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,cAAc;AAEd,SAAS,aAAa,yBAAyB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|