@tamagui/slider 1.0.1-beta.72 → 1.0.1-beta.75
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 +4 -9
- package/dist/cjs/Slider.js.map +1 -1
- package/dist/cjs/helpers.js +0 -11
- package/dist/cjs/helpers.js.map +1 -1
- package/dist/esm/Slider.js +4 -10
- package/dist/esm/Slider.js.map +1 -1
- package/dist/esm/helpers.js +0 -12
- package/dist/esm/helpers.js.map +1 -1
- package/dist/jsx/Slider.js +4 -10
- package/dist/jsx/helpers.js +0 -12
- package/package.json +8 -8
package/dist/cjs/Slider.js
CHANGED
|
@@ -21,7 +21,6 @@ var __spreadValues = (a, b) => {
|
|
|
21
21
|
return a;
|
|
22
22
|
};
|
|
23
23
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
25
24
|
var __objRest = (source, exclude) => {
|
|
26
25
|
var target = {};
|
|
27
26
|
for (var prop in source)
|
|
@@ -87,7 +86,6 @@ const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
|
|
|
87
86
|
const value = (0, import_helpers2.linearScale)(input, output);
|
|
88
87
|
return value(pointerPosition);
|
|
89
88
|
}
|
|
90
|
-
__name(getValueFromPointer, "getValueFromPointer");
|
|
91
89
|
return /* @__PURE__ */ React.createElement(import_constants.SliderOrientationProvider, {
|
|
92
90
|
scope: props.__scopeSlider,
|
|
93
91
|
startEdge: isDirectionLTR ? "left" : "right",
|
|
@@ -138,7 +136,6 @@ const SliderVertical = React.forwardRef((props, forwardedRef) => {
|
|
|
138
136
|
const value = (0, import_helpers2.linearScale)(input, output);
|
|
139
137
|
return value(pointerPosition);
|
|
140
138
|
}
|
|
141
|
-
__name(getValueFromPointer, "getValueFromPointer");
|
|
142
139
|
return /* @__PURE__ */ React.createElement(import_constants.SliderOrientationProvider, {
|
|
143
140
|
scope: props.__scopeSlider,
|
|
144
141
|
startEdge: "bottom",
|
|
@@ -327,8 +324,8 @@ const Slider = (0, import_core.withStaticProperties)(React.forwardRef((props, fo
|
|
|
327
324
|
minStepsBetweenThumbs = 0,
|
|
328
325
|
defaultValue = [min],
|
|
329
326
|
value,
|
|
330
|
-
onValueChange =
|
|
331
|
-
},
|
|
327
|
+
onValueChange = () => {
|
|
328
|
+
},
|
|
332
329
|
size: sizeProp
|
|
333
330
|
} = _a, sliderProps = __objRest(_a, [
|
|
334
331
|
"name",
|
|
@@ -365,9 +362,9 @@ const Slider = (0, import_core.withStaticProperties)(React.forwardRef((props, fo
|
|
|
365
362
|
const node = sliderRef.current;
|
|
366
363
|
if (!node)
|
|
367
364
|
return;
|
|
368
|
-
const preventDefault =
|
|
365
|
+
const preventDefault = (e) => {
|
|
369
366
|
e.preventDefault();
|
|
370
|
-
}
|
|
367
|
+
};
|
|
371
368
|
node.addEventListener("touchstart", preventDefault);
|
|
372
369
|
return () => {
|
|
373
370
|
node.removeEventListener("touchstart", preventDefault);
|
|
@@ -377,7 +374,6 @@ const Slider = (0, import_core.withStaticProperties)(React.forwardRef((props, fo
|
|
|
377
374
|
function handleSlideMove(value2) {
|
|
378
375
|
updateValues(value2, valueIndexToChangeRef.current);
|
|
379
376
|
}
|
|
380
|
-
__name(handleSlideMove, "handleSlideMove");
|
|
381
377
|
function updateValues(value2, atIndex) {
|
|
382
378
|
const decimalCount = (0, import_helpers2.getDecimalCount)(step);
|
|
383
379
|
const snapToStep = (0, import_helpers2.roundValue)(Math.round((value2 - min) / step) * step + min, decimalCount);
|
|
@@ -392,7 +388,6 @@ const Slider = (0, import_core.withStaticProperties)(React.forwardRef((props, fo
|
|
|
392
388
|
}
|
|
393
389
|
});
|
|
394
390
|
}
|
|
395
|
-
__name(updateValues, "updateValues");
|
|
396
391
|
const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
|
|
397
392
|
return /* @__PURE__ */ React.createElement(import_constants.SliderProvider, {
|
|
398
393
|
scope: props.__scopeSlider,
|
package/dist/cjs/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 { useComposedRefs } from '@tamagui/compose-refs'\nimport { getSize, isWeb, styled, withStaticProperties } from '@tamagui/core'\nimport { clamp, composeEventHandlers } from '@tamagui/helpers'\nimport { SizableStackProps, ThemeableStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport * as React from 'react'\nimport { LayoutRectangle, 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 SliderImplElement,\n SliderProps,\n SliderTrackProps,\n SliderVerticalProps,\n} from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\ntype SliderHorizontalElement = SliderImplElement\n\nconst SliderHorizontal = React.forwardRef<SliderHorizontalElement, 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 layoutRef = React.useRef<LayoutRectangle | null>(null)\n const [size, setSize] = React.useState(0)\n\n function getValueFromPointer(pointerPosition: number) {\n const layout = layoutRef.current\n if (!layout) return\n const input: [number, number] = [0, layout.width]\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={size}\n >\n <SliderImpl\n ref={forwardedRef}\n dir={direction}\n {...sliderProps}\n orientation=\"horizontal\"\n onLayout={(e) => {\n const layout = e.nativeEvent.layout\n layoutRef.current = layout\n setSize(layout.height)\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.locationX)\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\ntype SliderVerticalElement = SliderImplElement\n\nconst SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalProps>(\n (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const layoutRef = React.useRef<LayoutRectangle | null>(null)\n const [size, setSize] = React.useState(0)\n\n function getValueFromPointer(pointerPosition: number) {\n const layout = layoutRef.current\n if (!layout) return\n const input: [number, number] = [0, layout.height]\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={size}\n direction={1}\n >\n <SliderImpl\n ref={forwardedRef}\n {...sliderProps}\n orientation=\"vertical\"\n onLayout={(e) => {\n const layout = e.nativeEvent.layout\n layoutRef.current = layout\n setSize(layout.height)\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.locationY)\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\ntype SliderTrackActiveElement = HTMLElement | View\ninterface SliderTrackActiveProps extends YStackProps {}\n\nexport const SliderTrackActiveFrame = styled(SliderFrame, {\n name: 'SliderTrackActive',\n backgroundColor: '$background',\n position: 'absolute',\n})\n\nconst SliderTrackActive = React.forwardRef<SliderTrackActiveElement, 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<HTMLSpanElement>(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\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': (val) => {\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 },\n },\n})\n\ntype SliderThumbElement = HTMLElement | View\ninterface SliderThumbProps extends SizableStackProps {\n index: number\n}\n\nconst SliderThumb = React.forwardRef<SliderThumbElement, 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(0)\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 // TODO\n // @ts-ignore\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 // temp fix to make slider work nicely on native\n // we just let the events propagate to the track\n {...(!isWeb && {\n pointerEvents: 'none',\n })}\n />\n )\n }\n)\n\nSliderThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\ntype SliderElement = SliderHorizontalElement | SliderVerticalElement\n\nconst Slider = withStaticProperties(\n React.forwardRef<SliderElement, 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<SliderImplElement>(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 // TODO\n // const isFormControl = slider ? Boolean(slider.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 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": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/helpers.js
CHANGED
|
@@ -2,7 +2,6 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
6
5
|
var __export = (target, all) => {
|
|
7
6
|
for (var name in all)
|
|
8
7
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -34,13 +33,11 @@ function getNextSortedValues(prevValues = [], nextValue, atIndex) {
|
|
|
34
33
|
nextValues[atIndex] = nextValue;
|
|
35
34
|
return nextValues.sort((a, b) => a - b);
|
|
36
35
|
}
|
|
37
|
-
__name(getNextSortedValues, "getNextSortedValues");
|
|
38
36
|
function convertValueToPercentage(value, min, max) {
|
|
39
37
|
const maxSteps = max - min;
|
|
40
38
|
const percentPerStep = 100 / maxSteps;
|
|
41
39
|
return percentPerStep * (value - min);
|
|
42
40
|
}
|
|
43
|
-
__name(convertValueToPercentage, "convertValueToPercentage");
|
|
44
41
|
function getLabel(index, totalValues) {
|
|
45
42
|
if (totalValues > 2) {
|
|
46
43
|
return `Value ${index + 1} of ${totalValues}`;
|
|
@@ -50,7 +47,6 @@ function getLabel(index, totalValues) {
|
|
|
50
47
|
return void 0;
|
|
51
48
|
}
|
|
52
49
|
}
|
|
53
|
-
__name(getLabel, "getLabel");
|
|
54
50
|
function getClosestValueIndex(values, nextValue) {
|
|
55
51
|
if (values.length === 1)
|
|
56
52
|
return 0;
|
|
@@ -58,18 +54,15 @@ function getClosestValueIndex(values, nextValue) {
|
|
|
58
54
|
const closestDistance = Math.min(...distances);
|
|
59
55
|
return distances.indexOf(closestDistance);
|
|
60
56
|
}
|
|
61
|
-
__name(getClosestValueIndex, "getClosestValueIndex");
|
|
62
57
|
function getThumbInBoundsOffset(width, left, direction) {
|
|
63
58
|
const halfWidth = width / 2;
|
|
64
59
|
const halfPercent = 50;
|
|
65
60
|
const offset = linearScale([0, halfPercent], [0, halfWidth]);
|
|
66
61
|
return (halfWidth - offset(left) * direction) * direction;
|
|
67
62
|
}
|
|
68
|
-
__name(getThumbInBoundsOffset, "getThumbInBoundsOffset");
|
|
69
63
|
function getStepsBetweenValues(values) {
|
|
70
64
|
return values.slice(0, -1).map((value, index) => values[index + 1] - value);
|
|
71
65
|
}
|
|
72
|
-
__name(getStepsBetweenValues, "getStepsBetweenValues");
|
|
73
66
|
function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
|
|
74
67
|
if (minStepsBetweenValues > 0) {
|
|
75
68
|
const stepsBetweenValues = getStepsBetweenValues(values);
|
|
@@ -78,7 +71,6 @@ function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
|
|
|
78
71
|
}
|
|
79
72
|
return true;
|
|
80
73
|
}
|
|
81
|
-
__name(hasMinStepsBetweenValues, "hasMinStepsBetweenValues");
|
|
82
74
|
function linearScale(input, output) {
|
|
83
75
|
return (value) => {
|
|
84
76
|
if (input[0] === input[1] || output[0] === output[1])
|
|
@@ -87,16 +79,13 @@ function linearScale(input, output) {
|
|
|
87
79
|
return output[0] + ratio * (value - input[0]);
|
|
88
80
|
};
|
|
89
81
|
}
|
|
90
|
-
__name(linearScale, "linearScale");
|
|
91
82
|
function getDecimalCount(value) {
|
|
92
83
|
return (String(value).split(".")[1] || "").length;
|
|
93
84
|
}
|
|
94
|
-
__name(getDecimalCount, "getDecimalCount");
|
|
95
85
|
function roundValue(value, decimalCount) {
|
|
96
86
|
const rounder = Math.pow(10, decimalCount);
|
|
97
87
|
return Math.round(value * rounder) / rounder;
|
|
98
88
|
}
|
|
99
|
-
__name(roundValue, "roundValue");
|
|
100
89
|
// Annotate the CommonJS export names for ESM import in node:
|
|
101
90
|
0 && (module.exports = {
|
|
102
91
|
convertValueToPercentage,
|
package/dist/cjs/helpers.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/helpers.tsx"],
|
|
4
4
|
"sourcesContent": ["import { SizeTokens, getTokens, getVariableValue } from '@tamagui/core'\n\nexport 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": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,6BAA6B,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,kCAAkC,OAAe,KAAa,KAAa;AAChF,QAAM,WAAW,MAAM;AACvB,QAAM,iBAAiB,MAAM;AAC7B,SAAO,iBAAkB,SAAQ;AACnC;AAKO,kBAAkB,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,8BAA8B,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,gCAAgC,OAAe,MAAc,WAAmB;AACrF,QAAM,YAAY,QAAQ;AAC1B,QAAM,cAAc;AACpB,QAAM,SAAS,YAAY,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,SAAS,CAAC;AAC3D,SAAQ,aAAY,OAAO,IAAI,IAAI,aAAa;AAClD;AASA,+BAA+B,QAAkB;AAC/C,SAAO,OAAO,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,OAAO,UAAU,OAAO,QAAQ,KAAK,KAAK;AAC5E;AAcO,kCAAkC,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,qBAAqB,OAAkC,QAAmC;AAC/F,SAAO,CAAC,UAAkB;AACxB,QAAI,MAAM,OAAO,MAAM,MAAM,OAAO,OAAO,OAAO;AAAI,aAAO,OAAO;AACpE,UAAM,QAAS,QAAO,KAAK,OAAO,MAAO,OAAM,KAAK,MAAM;AAC1D,WAAO,OAAO,KAAK,QAAS,SAAQ,MAAM;AAAA,EAC5C;AACF;AAEO,yBAAyB,OAAe;AAC7C,SAAQ,QAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,IAAI;AAC7C;AAEO,oBAAoB,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/Slider.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
1
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
4
2
|
import { getSize, isWeb, styled, withStaticProperties } from "@tamagui/core";
|
|
5
3
|
import { clamp, composeEventHandlers } from "@tamagui/helpers";
|
|
@@ -44,7 +42,6 @@ const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
|
|
|
44
42
|
const value = linearScale(input, output);
|
|
45
43
|
return value(pointerPosition);
|
|
46
44
|
}
|
|
47
|
-
__name(getValueFromPointer, "getValueFromPointer");
|
|
48
45
|
return /* @__PURE__ */ React.createElement(SliderOrientationProvider, {
|
|
49
46
|
scope: props.__scopeSlider,
|
|
50
47
|
startEdge: isDirectionLTR ? "left" : "right",
|
|
@@ -95,7 +92,6 @@ const SliderVertical = React.forwardRef((props, forwardedRef) => {
|
|
|
95
92
|
const value = linearScale(input, output);
|
|
96
93
|
return value(pointerPosition);
|
|
97
94
|
}
|
|
98
|
-
__name(getValueFromPointer, "getValueFromPointer");
|
|
99
95
|
return /* @__PURE__ */ React.createElement(SliderOrientationProvider, {
|
|
100
96
|
scope: props.__scopeSlider,
|
|
101
97
|
startEdge: "bottom",
|
|
@@ -291,8 +287,8 @@ const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
|
|
|
291
287
|
minStepsBetweenThumbs = 0,
|
|
292
288
|
defaultValue = [min],
|
|
293
289
|
value,
|
|
294
|
-
onValueChange =
|
|
295
|
-
},
|
|
290
|
+
onValueChange = () => {
|
|
291
|
+
},
|
|
296
292
|
size: sizeProp,
|
|
297
293
|
...sliderProps
|
|
298
294
|
} = props;
|
|
@@ -318,9 +314,9 @@ const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
|
|
|
318
314
|
const node = sliderRef.current;
|
|
319
315
|
if (!node)
|
|
320
316
|
return;
|
|
321
|
-
const preventDefault =
|
|
317
|
+
const preventDefault = (e) => {
|
|
322
318
|
e.preventDefault();
|
|
323
|
-
}
|
|
319
|
+
};
|
|
324
320
|
node.addEventListener("touchstart", preventDefault);
|
|
325
321
|
return () => {
|
|
326
322
|
node.removeEventListener("touchstart", preventDefault);
|
|
@@ -330,7 +326,6 @@ const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
|
|
|
330
326
|
function handleSlideMove(value2) {
|
|
331
327
|
updateValues(value2, valueIndexToChangeRef.current);
|
|
332
328
|
}
|
|
333
|
-
__name(handleSlideMove, "handleSlideMove");
|
|
334
329
|
function updateValues(value2, atIndex) {
|
|
335
330
|
const decimalCount = getDecimalCount(step);
|
|
336
331
|
const snapToStep = roundValue(Math.round((value2 - min) / step) * step + min, decimalCount);
|
|
@@ -345,7 +340,6 @@ const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
|
|
|
345
340
|
}
|
|
346
341
|
});
|
|
347
342
|
}
|
|
348
|
-
__name(updateValues, "updateValues");
|
|
349
343
|
const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
|
|
350
344
|
return /* @__PURE__ */ React.createElement(SliderProvider, {
|
|
351
345
|
scope: props.__scopeSlider,
|
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 { useComposedRefs } from '@tamagui/compose-refs'\nimport { getSize, isWeb, styled, withStaticProperties } from '@tamagui/core'\nimport { clamp, composeEventHandlers } from '@tamagui/helpers'\nimport { SizableStackProps, ThemeableStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport * as React from 'react'\nimport { LayoutRectangle, 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 SliderImplElement,\n SliderProps,\n SliderTrackProps,\n SliderVerticalProps,\n} from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\ntype SliderHorizontalElement = SliderImplElement\n\nconst SliderHorizontal = React.forwardRef<SliderHorizontalElement, 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 layoutRef = React.useRef<LayoutRectangle | null>(null)\n const [size, setSize] = React.useState(0)\n\n function getValueFromPointer(pointerPosition: number) {\n const layout = layoutRef.current\n if (!layout) return\n const input: [number, number] = [0, layout.width]\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={size}\n >\n <SliderImpl\n ref={forwardedRef}\n dir={direction}\n {...sliderProps}\n orientation=\"horizontal\"\n onLayout={(e) => {\n const layout = e.nativeEvent.layout\n layoutRef.current = layout\n setSize(layout.height)\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.locationX)\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\ntype SliderVerticalElement = SliderImplElement\n\nconst SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalProps>(\n (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props\n const layoutRef = React.useRef<LayoutRectangle | null>(null)\n const [size, setSize] = React.useState(0)\n\n function getValueFromPointer(pointerPosition: number) {\n const layout = layoutRef.current\n if (!layout) return\n const input: [number, number] = [0, layout.height]\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={size}\n direction={1}\n >\n <SliderImpl\n ref={forwardedRef}\n {...sliderProps}\n orientation=\"vertical\"\n onLayout={(e) => {\n const layout = e.nativeEvent.layout\n layoutRef.current = layout\n setSize(layout.height)\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.locationY)\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\ntype SliderTrackActiveElement = HTMLElement | View\ninterface SliderTrackActiveProps extends YStackProps {}\n\nexport const SliderTrackActiveFrame = styled(SliderFrame, {\n name: 'SliderTrackActive',\n backgroundColor: '$background',\n position: 'absolute',\n})\n\nconst SliderTrackActive = React.forwardRef<SliderTrackActiveElement, 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<HTMLSpanElement>(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\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': (val) => {\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 },\n },\n})\n\ntype SliderThumbElement = HTMLElement | View\ninterface SliderThumbProps extends SizableStackProps {\n index: number\n}\n\nconst SliderThumb = React.forwardRef<SliderThumbElement, 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(0)\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 // TODO\n // @ts-ignore\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 // temp fix to make slider work nicely on native\n // we just let the events propagate to the track\n {...(!isWeb && {\n pointerEvents: 'none',\n })}\n />\n )\n }\n)\n\nSliderThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\ntype SliderElement = SliderHorizontalElement | SliderVerticalElement\n\nconst Slider = withStaticProperties(\n React.forwardRef<SliderElement, 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<SliderImplElement>(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 // TODO\n // const isFormControl = slider ? Boolean(slider.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 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": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/helpers.js
CHANGED
|
@@ -1,17 +1,13 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
1
|
function getNextSortedValues(prevValues = [], nextValue, atIndex) {
|
|
4
2
|
const nextValues = [...prevValues];
|
|
5
3
|
nextValues[atIndex] = nextValue;
|
|
6
4
|
return nextValues.sort((a, b) => a - b);
|
|
7
5
|
}
|
|
8
|
-
__name(getNextSortedValues, "getNextSortedValues");
|
|
9
6
|
function convertValueToPercentage(value, min, max) {
|
|
10
7
|
const maxSteps = max - min;
|
|
11
8
|
const percentPerStep = 100 / maxSteps;
|
|
12
9
|
return percentPerStep * (value - min);
|
|
13
10
|
}
|
|
14
|
-
__name(convertValueToPercentage, "convertValueToPercentage");
|
|
15
11
|
function getLabel(index, totalValues) {
|
|
16
12
|
if (totalValues > 2) {
|
|
17
13
|
return `Value ${index + 1} of ${totalValues}`;
|
|
@@ -21,7 +17,6 @@ function getLabel(index, totalValues) {
|
|
|
21
17
|
return void 0;
|
|
22
18
|
}
|
|
23
19
|
}
|
|
24
|
-
__name(getLabel, "getLabel");
|
|
25
20
|
function getClosestValueIndex(values, nextValue) {
|
|
26
21
|
if (values.length === 1)
|
|
27
22
|
return 0;
|
|
@@ -29,18 +24,15 @@ function getClosestValueIndex(values, nextValue) {
|
|
|
29
24
|
const closestDistance = Math.min(...distances);
|
|
30
25
|
return distances.indexOf(closestDistance);
|
|
31
26
|
}
|
|
32
|
-
__name(getClosestValueIndex, "getClosestValueIndex");
|
|
33
27
|
function getThumbInBoundsOffset(width, left, direction) {
|
|
34
28
|
const halfWidth = width / 2;
|
|
35
29
|
const halfPercent = 50;
|
|
36
30
|
const offset = linearScale([0, halfPercent], [0, halfWidth]);
|
|
37
31
|
return (halfWidth - offset(left) * direction) * direction;
|
|
38
32
|
}
|
|
39
|
-
__name(getThumbInBoundsOffset, "getThumbInBoundsOffset");
|
|
40
33
|
function getStepsBetweenValues(values) {
|
|
41
34
|
return values.slice(0, -1).map((value, index) => values[index + 1] - value);
|
|
42
35
|
}
|
|
43
|
-
__name(getStepsBetweenValues, "getStepsBetweenValues");
|
|
44
36
|
function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
|
|
45
37
|
if (minStepsBetweenValues > 0) {
|
|
46
38
|
const stepsBetweenValues = getStepsBetweenValues(values);
|
|
@@ -49,7 +41,6 @@ function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
|
|
|
49
41
|
}
|
|
50
42
|
return true;
|
|
51
43
|
}
|
|
52
|
-
__name(hasMinStepsBetweenValues, "hasMinStepsBetweenValues");
|
|
53
44
|
function linearScale(input, output) {
|
|
54
45
|
return (value) => {
|
|
55
46
|
if (input[0] === input[1] || output[0] === output[1])
|
|
@@ -58,16 +49,13 @@ function linearScale(input, output) {
|
|
|
58
49
|
return output[0] + ratio * (value - input[0]);
|
|
59
50
|
};
|
|
60
51
|
}
|
|
61
|
-
__name(linearScale, "linearScale");
|
|
62
52
|
function getDecimalCount(value) {
|
|
63
53
|
return (String(value).split(".")[1] || "").length;
|
|
64
54
|
}
|
|
65
|
-
__name(getDecimalCount, "getDecimalCount");
|
|
66
55
|
function roundValue(value, decimalCount) {
|
|
67
56
|
const rounder = Math.pow(10, decimalCount);
|
|
68
57
|
return Math.round(value * rounder) / rounder;
|
|
69
58
|
}
|
|
70
|
-
__name(roundValue, "roundValue");
|
|
71
59
|
export {
|
|
72
60
|
convertValueToPercentage,
|
|
73
61
|
getClosestValueIndex,
|
package/dist/esm/helpers.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/helpers.tsx"],
|
|
4
4
|
"sourcesContent": ["import { SizeTokens, getTokens, getVariableValue } from '@tamagui/core'\n\nexport 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": "
|
|
5
|
+
"mappings": "AAEO,6BAA6B,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,kCAAkC,OAAe,KAAa,KAAa;AAChF,QAAM,WAAW,MAAM;AACvB,QAAM,iBAAiB,MAAM;AAC7B,SAAO,iBAAkB,SAAQ;AACnC;AAKO,kBAAkB,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,8BAA8B,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,gCAAgC,OAAe,MAAc,WAAmB;AACrF,QAAM,YAAY,QAAQ;AAC1B,QAAM,cAAc;AACpB,QAAM,SAAS,YAAY,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,SAAS,CAAC;AAC3D,SAAQ,aAAY,OAAO,IAAI,IAAI,aAAa;AAClD;AASA,+BAA+B,QAAkB;AAC/C,SAAO,OAAO,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,OAAO,UAAU,OAAO,QAAQ,KAAK,KAAK;AAC5E;AAcO,kCAAkC,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,qBAAqB,OAAkC,QAAmC;AAC/F,SAAO,CAAC,UAAkB;AACxB,QAAI,MAAM,OAAO,MAAM,MAAM,OAAO,OAAO,OAAO;AAAI,aAAO,OAAO;AACpE,UAAM,QAAS,QAAO,KAAK,OAAO,MAAO,OAAM,KAAK,MAAM;AAC1D,WAAO,OAAO,KAAK,QAAS,SAAQ,MAAM;AAAA,EAC5C;AACF;AAEO,yBAAyB,OAAe;AAC7C,SAAQ,QAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,IAAI;AAC7C;AAEO,oBAAoB,OAAe,cAAsB;AAC9D,QAAM,UAAU,KAAK,IAAI,IAAI,YAAY;AACzC,SAAO,KAAK,MAAM,QAAQ,OAAO,IAAI;AACvC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Slider.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
1
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
4
2
|
import { getSize, isWeb, styled, withStaticProperties } from "@tamagui/core";
|
|
5
3
|
import { clamp, composeEventHandlers } from "@tamagui/helpers";
|
|
@@ -44,7 +42,6 @@ const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
|
|
|
44
42
|
const value = linearScale(input, output);
|
|
45
43
|
return value(pointerPosition);
|
|
46
44
|
}
|
|
47
|
-
__name(getValueFromPointer, "getValueFromPointer");
|
|
48
45
|
return <SliderOrientationProvider scope={props.__scopeSlider} startEdge={isDirectionLTR ? "left" : "right"} endEdge={isDirectionLTR ? "right" : "left"} direction={isDirectionLTR ? 1 : -1} sizeProp="width" size={size}><SliderImpl ref={forwardedRef} dir={direction} {...sliderProps} orientation="horizontal" onLayout={(e) => {
|
|
49
46
|
const layout = e.nativeEvent.layout;
|
|
50
47
|
layoutRef.current = layout;
|
|
@@ -78,7 +75,6 @@ const SliderVertical = React.forwardRef((props, forwardedRef) => {
|
|
|
78
75
|
const value = linearScale(input, output);
|
|
79
76
|
return value(pointerPosition);
|
|
80
77
|
}
|
|
81
|
-
__name(getValueFromPointer, "getValueFromPointer");
|
|
82
78
|
return <SliderOrientationProvider scope={props.__scopeSlider} startEdge="bottom" endEdge="top" sizeProp="height" size={size} direction={1}><SliderImpl ref={forwardedRef} {...sliderProps} orientation="vertical" onLayout={(e) => {
|
|
83
79
|
const layout = e.nativeEvent.layout;
|
|
84
80
|
layoutRef.current = layout;
|
|
@@ -224,8 +220,8 @@ const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
|
|
|
224
220
|
minStepsBetweenThumbs = 0,
|
|
225
221
|
defaultValue = [min],
|
|
226
222
|
value,
|
|
227
|
-
onValueChange =
|
|
228
|
-
},
|
|
223
|
+
onValueChange = () => {
|
|
224
|
+
},
|
|
229
225
|
size: sizeProp,
|
|
230
226
|
...sliderProps
|
|
231
227
|
} = props;
|
|
@@ -251,9 +247,9 @@ const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
|
|
|
251
247
|
const node = sliderRef.current;
|
|
252
248
|
if (!node)
|
|
253
249
|
return;
|
|
254
|
-
const preventDefault =
|
|
250
|
+
const preventDefault = (e) => {
|
|
255
251
|
e.preventDefault();
|
|
256
|
-
}
|
|
252
|
+
};
|
|
257
253
|
node.addEventListener("touchstart", preventDefault);
|
|
258
254
|
return () => {
|
|
259
255
|
node.removeEventListener("touchstart", preventDefault);
|
|
@@ -263,7 +259,6 @@ const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
|
|
|
263
259
|
function handleSlideMove(value2) {
|
|
264
260
|
updateValues(value2, valueIndexToChangeRef.current);
|
|
265
261
|
}
|
|
266
|
-
__name(handleSlideMove, "handleSlideMove");
|
|
267
262
|
function updateValues(value2, atIndex) {
|
|
268
263
|
const decimalCount = getDecimalCount(step);
|
|
269
264
|
const snapToStep = roundValue(Math.round((value2 - min) / step) * step + min, decimalCount);
|
|
@@ -278,7 +273,6 @@ const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
|
|
|
278
273
|
}
|
|
279
274
|
});
|
|
280
275
|
}
|
|
281
|
-
__name(updateValues, "updateValues");
|
|
282
276
|
const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
|
|
283
277
|
return <SliderProvider scope={props.__scopeSlider} disabled={disabled} min={min} max={max} valueIndexToChangeRef={valueIndexToChangeRef} thumbs={thumbRefs.current} values={values} orientation={orientation} size={sizeProp}><SliderOriented aria-disabled={disabled} data-disabled={disabled ? "" : void 0} {...sliderProps} ref={composedRefs} min={min} max={max} onSlideStart={disabled ? void 0 : (value2, target) => {
|
|
284
278
|
if (target !== "thumb") {
|
package/dist/jsx/helpers.js
CHANGED
|
@@ -1,17 +1,13 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
1
|
function getNextSortedValues(prevValues = [], nextValue, atIndex) {
|
|
4
2
|
const nextValues = [...prevValues];
|
|
5
3
|
nextValues[atIndex] = nextValue;
|
|
6
4
|
return nextValues.sort((a, b) => a - b);
|
|
7
5
|
}
|
|
8
|
-
__name(getNextSortedValues, "getNextSortedValues");
|
|
9
6
|
function convertValueToPercentage(value, min, max) {
|
|
10
7
|
const maxSteps = max - min;
|
|
11
8
|
const percentPerStep = 100 / maxSteps;
|
|
12
9
|
return percentPerStep * (value - min);
|
|
13
10
|
}
|
|
14
|
-
__name(convertValueToPercentage, "convertValueToPercentage");
|
|
15
11
|
function getLabel(index, totalValues) {
|
|
16
12
|
if (totalValues > 2) {
|
|
17
13
|
return `Value ${index + 1} of ${totalValues}`;
|
|
@@ -21,7 +17,6 @@ function getLabel(index, totalValues) {
|
|
|
21
17
|
return void 0;
|
|
22
18
|
}
|
|
23
19
|
}
|
|
24
|
-
__name(getLabel, "getLabel");
|
|
25
20
|
function getClosestValueIndex(values, nextValue) {
|
|
26
21
|
if (values.length === 1)
|
|
27
22
|
return 0;
|
|
@@ -29,18 +24,15 @@ function getClosestValueIndex(values, nextValue) {
|
|
|
29
24
|
const closestDistance = Math.min(...distances);
|
|
30
25
|
return distances.indexOf(closestDistance);
|
|
31
26
|
}
|
|
32
|
-
__name(getClosestValueIndex, "getClosestValueIndex");
|
|
33
27
|
function getThumbInBoundsOffset(width, left, direction) {
|
|
34
28
|
const halfWidth = width / 2;
|
|
35
29
|
const halfPercent = 50;
|
|
36
30
|
const offset = linearScale([0, halfPercent], [0, halfWidth]);
|
|
37
31
|
return (halfWidth - offset(left) * direction) * direction;
|
|
38
32
|
}
|
|
39
|
-
__name(getThumbInBoundsOffset, "getThumbInBoundsOffset");
|
|
40
33
|
function getStepsBetweenValues(values) {
|
|
41
34
|
return values.slice(0, -1).map((value, index) => values[index + 1] - value);
|
|
42
35
|
}
|
|
43
|
-
__name(getStepsBetweenValues, "getStepsBetweenValues");
|
|
44
36
|
function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
|
|
45
37
|
if (minStepsBetweenValues > 0) {
|
|
46
38
|
const stepsBetweenValues = getStepsBetweenValues(values);
|
|
@@ -49,7 +41,6 @@ function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
|
|
|
49
41
|
}
|
|
50
42
|
return true;
|
|
51
43
|
}
|
|
52
|
-
__name(hasMinStepsBetweenValues, "hasMinStepsBetweenValues");
|
|
53
44
|
function linearScale(input, output) {
|
|
54
45
|
return (value) => {
|
|
55
46
|
if (input[0] === input[1] || output[0] === output[1])
|
|
@@ -58,16 +49,13 @@ function linearScale(input, output) {
|
|
|
58
49
|
return output[0] + ratio * (value - input[0]);
|
|
59
50
|
};
|
|
60
51
|
}
|
|
61
|
-
__name(linearScale, "linearScale");
|
|
62
52
|
function getDecimalCount(value) {
|
|
63
53
|
return (String(value).split(".")[1] || "").length;
|
|
64
54
|
}
|
|
65
|
-
__name(getDecimalCount, "getDecimalCount");
|
|
66
55
|
function roundValue(value, decimalCount) {
|
|
67
56
|
const rounder = Math.pow(10, decimalCount);
|
|
68
57
|
return Math.round(value * rounder) / rounder;
|
|
69
58
|
}
|
|
70
|
-
__name(roundValue, "roundValue");
|
|
71
59
|
export {
|
|
72
60
|
convertValueToPercentage,
|
|
73
61
|
getClosestValueIndex,
|
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.75",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"clean:build": "tamagui-build clean:build"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
25
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
26
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
27
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
28
|
-
"@tamagui/use-controllable-state": "^1.0.1-beta.
|
|
29
|
-
"@tamagui/use-direction": "^1.0.1-beta.
|
|
24
|
+
"@tamagui/compose-refs": "^1.0.1-beta.75",
|
|
25
|
+
"@tamagui/core": "^1.0.1-beta.75",
|
|
26
|
+
"@tamagui/create-context": "^1.0.1-beta.75",
|
|
27
|
+
"@tamagui/stacks": "^1.0.1-beta.75",
|
|
28
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.75",
|
|
29
|
+
"@tamagui/use-direction": "^1.0.1-beta.75"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": "*",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"react-native": "*"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
37
|
+
"@tamagui/build": "^1.0.1-beta.75",
|
|
38
38
|
"@types/react-native": "^0.67.3",
|
|
39
39
|
"react": "*",
|
|
40
40
|
"react-dom": "*",
|