@tamagui/slider 2.7.7 → 3.0.0-beta.637.1

package/dist/cjs/Slider.native.cjs

@@ -0,0 +1,469 @@
+"use strict";
+
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Slider_exports = {};
+__export(Slider_exports, {
+	Range: () => Range,
+	Slider: () => Slider,
+	SliderActive: () => SliderActive,
+	SliderActiveFrame: () => SliderActiveFrame,
+	SliderThumb: () => SliderThumb,
+	SliderThumbFrame: () => SliderThumbFrame,
+	SliderTrack: () => SliderTrack,
+	SliderTrackFrame: () => SliderTrackFrame,
+	Thumb: () => Thumb,
+	Track: () => Track
+});
+module.exports = __toCommonJS(Slider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
+var import_core = require("@tamagui/core");
+var import_helpers = require("@tamagui/helpers");
+var import_stacks = require("@tamagui/stacks");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var import_use_direction = require("@tamagui/use-direction");
+var React = __toESM(require("react"), 1);
+var import_constants2 = require("./constants.native.js");
+var import_helpers2 = require("./helpers.native.js");
+var import_SliderImpl = require("./SliderImpl.native.js");
+var SliderHorizontal = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, onSlideEnd, ...sliderProps } = props;
+	var direction = (0, import_use_direction.useDirection)(dir);
+	var isDirectionLTR = direction === "ltr";
+	var sliderRef = React.useRef(null);
+	var [state, setState_] = React.useState(function() {
+		return {
+			size: 0,
+			offset: 0
+		};
+	});
+	var setState = (0, import_core.useCreateShallowSetState)(setState_);
+	function getValueFromPointer(pointerPosition) {
+		var input = [0, state.size];
+		var output = isDirectionLTR ? [min, max] : [max, min];
+		return (0, import_helpers2.linearScale)(input, output)(pointerPosition);
+	}
+	var measure = function() {
+		var _sliderRef_current;
+		(_sliderRef_current = sliderRef.current) === null || _sliderRef_current === void 0 || _sliderRef_current.measure(function(_x, _y, width, _height, pageX, _pageY) {
+			setState({
+				size: width,
+				offset: pageX
+			});
+		});
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_constants2.SliderOrientationProvider, {
+		scope: props.__scopeSlider,
+		startEdge: isDirectionLTR ? "left" : "right",
+		endEdge: isDirectionLTR ? "right" : "left",
+		direction: isDirectionLTR ? 1 : -1,
+		sizeProp: "width",
+		size: state.size,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SliderImpl.SliderImpl, {
+			ref: (0, import_compose_refs.composeRefs)(forwardedRef, sliderRef),
+			dir: direction,
+			...sliderProps,
+			orientation: "horizontal",
+			onLayout: measure,
+			onSlideStart: function(event, target) {
+				var value = getValueFromPointer(event.nativeEvent.locationX);
+				if (value) onSlideStart === null || onSlideStart === void 0 || onSlideStart(value, target, event);
+			},
+			onSlideMove: function(event) {
+				var value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
+				if (value) onSlideMove === null || onSlideMove === void 0 || onSlideMove(value, event);
+			},
+			onSlideEnd: function(event) {
+				var value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
+				if (value) onSlideEnd === null || onSlideEnd === void 0 || onSlideEnd(event, value);
+			},
+			onStepKeyDown: function(event) {
+				var isBackKey = import_constants2.BACK_KEYS[direction].includes(event.key);
+				onStepKeyDown === null || onStepKeyDown === void 0 || onStepKeyDown({
+					event,
+					direction: isBackKey ? -1 : 1
+				});
+			}
+		})
+	});
+});
+var SliderVertical = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { min, max, onSlideStart, onSlideMove, onStepKeyDown, onSlideEnd, ...sliderProps } = props;
+	var [state, setState_] = React.useState(function() {
+		return {
+			size: 0,
+			offset: 0
+		};
+	});
+	var setState = (0, import_core.useCreateShallowSetState)(setState_);
+	var sliderRef = React.useRef(null);
+	var configuration = (0, import_core.useConfiguration)();
+	var insets = import_constants.isIos && configuration.insets ? configuration.insets : {
+		top: 0,
+		bottom: 0
+	};
+	function getValueFromPointer(pointerPosition) {
+		var input = [0, state.size];
+		var output = [max, min];
+		return (0, import_helpers2.linearScale)(input, output)(pointerPosition);
+	}
+	var measure = function() {
+		var _sliderRef_current;
+		(_sliderRef_current = sliderRef.current) === null || _sliderRef_current === void 0 || _sliderRef_current.measure(function(_x, _y, _width, height, _pageX, pageY) {
+			setState({
+				size: height,
+				offset: pageY + (import_constants.isIos ? insets.top : 0)
+			});
+		});
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_constants2.SliderOrientationProvider, {
+		scope: props.__scopeSlider,
+		startEdge: "bottom",
+		endEdge: "top",
+		sizeProp: "height",
+		size: state.size,
+		direction: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SliderImpl.SliderImpl, {
+			ref: (0, import_compose_refs.composeRefs)(forwardedRef, sliderRef),
+			...sliderProps,
+			orientation: "vertical",
+			onLayout: measure,
+			onSlideStart: function(event, target) {
+				var value = getValueFromPointer(event.nativeEvent.locationY);
+				if (value) onSlideStart === null || onSlideStart === void 0 || onSlideStart(value, target, event);
+			},
+			onSlideMove: function(event) {
+				var value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
+				if (value) onSlideMove === null || onSlideMove === void 0 || onSlideMove(value, event);
+			},
+			onSlideEnd: function(event) {
+				var value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
+				onSlideEnd === null || onSlideEnd === void 0 || onSlideEnd(event, value);
+			},
+			onStepKeyDown: function(event) {
+				var isBackKey = import_constants2.BACK_KEYS.ltr.includes(event.key);
+				onStepKeyDown === null || onStepKeyDown === void 0 || onStepKeyDown({
+					event,
+					direction: isBackKey ? -1 : 1
+				});
+			}
+		})
+	});
+});
+var SliderTrackFrame = (0, import_core.styled)(import_SliderImpl.SliderFrame, {
+	displayName: "Slider",
+	height: "100%",
+	width: "100%",
+	position: "relative",
+	overflow: "hidden"
+});
+var SliderTrack = (0, import_core.createStyledHOC)(SliderTrackFrame, function SliderTrack2(props, forwardedRef) {
+	var { __scopeSlider, ...trackProps } = props;
+	var context = (0, import_constants2.useSliderContext)(__scopeSlider);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderTrackFrame, {
+		"data-disabled": context.disabled ? "" : void 0,
+		"data-orientation": context.orientation,
+		orientation: context.orientation,
+		size: context.size,
+		...trackProps,
+		ref: forwardedRef
+	});
+});
+var SliderActiveFrame = (0, import_core.styled)(import_SliderImpl.SliderFrame, {
+	displayName: "SliderActive",
+	position: "absolute",
+	pointerEvents: "box-none"
+});
+var SliderActive = (0, import_core.createStyledHOC)(SliderActiveFrame, function SliderActive2(props, forwardedRef) {
+	var { __scopeSlider, ...rangeProps } = props;
+	var context = (0, import_constants2.useSliderContext)(__scopeSlider);
+	var orientation = (0, import_constants2.useSliderOrientationContext)(__scopeSlider);
+	var ref = React.useRef(null);
+	var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
+	var valuesCount = context.values.length;
+	var percentages = context.values.map(function(value) {
+		return (0, import_helpers2.convertValueToPercentage)(value, context.min, context.max);
+	});
+	var offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
+	var offsetEnd = 100 - Math.max(...percentages);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderActiveFrame, {
+		orientation: context.orientation,
+		"data-orientation": context.orientation,
+		"data-disabled": context.disabled ? "" : void 0,
+		size: context.size,
+		animateOnly: [
+			"left",
+			"top",
+			"right",
+			"bottom"
+		],
+		...rangeProps,
+		ref: composedRefs,
+		[orientation.startEdge]: `${offsetStart}%`,
+		[orientation.endEdge]: `${offsetEnd}%`,
+		...orientation.sizeProp === "width" ? { height: "100%" } : {
+			left: 0,
+			right: 0
+		}
+	});
+});
+var getThumbSize = function(val) {
+	var tokens = (0, import_core.getTokens)();
+	var sizeToken = (0, import_core.resolveSizeToken)(val !== null && val !== void 0 ? val : true, "size");
+	var resolved = typeof sizeToken === "number" ? sizeToken : tokens.size[sizeToken];
+	var size = typeof val === "number" ? val : (0, import_core.getVariableValue)(resolved) * .86;
+	return {
+		width: size,
+		height: size,
+		minWidth: size,
+		minHeight: size
+	};
+};
+var SliderThumbFrame = (0, import_core.styled)(import_stacks.YStack, {
+	displayName: "SliderThumb",
+	position: "absolute",
+	variants: {
+		size: {
+			number: getThumbSize,
+			Size: getThumbSize
+		},
+		circular: { true: {
+			borderRadius: 1e5,
+			padding: 0
+		} },
+		elevate: { true: {
+			shadowColor: "shadow-color",
+			shadowRadius: 4,
+			shadowOffset: {
+				width: 0,
+				height: 2
+			}
+		} }
+	}
+});
+var SliderThumb = (0, import_core.createStyledHOC)(SliderThumbFrame, function SliderThumb2(props, forwardedRef) {
+	var { __scopeSlider, index = 0, circular, size: sizeProp, ...thumbProps } = props;
+	var context = (0, import_constants2.useSliderContext)(__scopeSlider);
+	var orientation = (0, import_constants2.useSliderOrientationContext)(__scopeSlider);
+	var [thumb, setThumb] = React.useState(null);
+	var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setThumb);
+	var value = context.values[index];
+	var percent = value === void 0 ? 0 : (0, import_helpers2.convertValueToPercentage)(value, context.min, context.max);
+	var label = (0, import_helpers2.getLabel)(index, context.values.length);
+	var _ref;
+	var sizeIn = (_ref = sizeProp !== null && sizeProp !== void 0 ? sizeProp : context.size) !== null && _ref !== void 0 ? _ref : true;
+	var [size, setSize] = React.useState(function() {
+		return (0, import_core.getVariableValue)(getThumbSize(sizeIn).width);
+	});
+	var thumbInBoundsOffset = size ? (0, import_helpers2.getThumbInBoundsOffset)(size, percent, orientation.direction) : 0;
+	React.useEffect(function() {
+		if (thumb) {
+			context.thumbs.set(thumb, index);
+			return function() {
+				context.thumbs.delete(thumb);
+			};
+		}
+	}, [
+		thumb,
+		context.thumbs,
+		index
+	]);
+	var positionalStyles = context.orientation === "horizontal" ? {
+		x: (thumbInBoundsOffset - size / 2) * orientation.direction,
+		y: -size / 2,
+		top: "50%",
+		...size === 0 && {
+			top: "auto",
+			bottom: "auto"
+		}
+	} : {
+		x: -size / 2,
+		y: size / 2,
+		left: "50%",
+		...size === 0 && {
+			left: "auto",
+			right: "auto"
+		}
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderThumbFrame, {
+		ref: composedRefs,
+		role: "slider",
+		"aria-label": props["aria-label"] || label,
+		"aria-valuemin": context.min,
+		"aria-valuenow": value,
+		"aria-valuemax": context.max,
+		"aria-orientation": context.orientation,
+		"data-orientation": context.orientation,
+		"data-disabled": context.disabled ? "" : void 0,
+		tabIndex: context.disabled ? void 0 : 0,
+		animateOnly: [
+			"transform",
+			"left",
+			"top",
+			"right",
+			"bottom"
+		],
+		...positionalStyles,
+		[orientation.startEdge]: `${percent}%`,
+		size: sizeIn,
+		circular,
+		...thumbProps,
+		onLayout: function(e) {
+			setSize(e.nativeEvent.layout[orientation.sizeProp]);
+		},
+		onFocus: (0, import_helpers.composeEventHandlers)(props.onFocus, function() {
+			context.valueIndexToChangeRef.current = index;
+		})
+	});
+}, { staticConfig: { memo: true } });
+var SliderComponent = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { name, min = 0, max = 100, step = 1, orientation = "horizontal", disabled = false, minStepsBetweenThumbs = 0, defaultValue = [min], value, onValueChange = function() {}, size: sizeProp, onSlideEnd, onSlideMove, onSlideStart, ...sliderProps } = props;
+	var sliderRef = React.useRef(null);
+	var composedRefs = (0, import_compose_refs.useComposedRefs)(sliderRef, forwardedRef);
+	var thumbRefs = React.useRef(/* @__PURE__ */ new Map());
+	var valueIndexToChangeRef = React.useRef(0);
+	var isHorizontal = orientation === "horizontal";
+	var [values = [], setValues] = (0, import_use_controllable_state.useControllableState)({
+		prop: value,
+		defaultProp: defaultValue,
+		transition: true,
+		onChange: function(value2) {
+			updateThumbFocus(valueIndexToChangeRef.current);
+			onValueChange(value2);
+		}
+	});
+	if (import_constants.isWeb) React.useEffect(function() {
+		var node = sliderRef.current;
+		if (!node) return;
+		var preventDefault = function(e) {
+			e.preventDefault();
+		};
+		node.addEventListener("touchstart", preventDefault);
+		return function() {
+			node.removeEventListener("touchstart", preventDefault);
+		};
+	}, []);
+	function updateThumbFocus(focusIndex) {
+		if (!import_constants.isWeb) return;
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = thumbRefs.current.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var [node, index] = _step.value;
+				if (index === focusIndex) {
+					node.focus();
+					return;
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+			} finally {
+				if (_didIteratorError) throw _iteratorError;
+			}
+		}
+	}
+	function handleSlideMove(value2, event) {
+		updateValues(value2, valueIndexToChangeRef.current);
+		onSlideMove === null || onSlideMove === void 0 || onSlideMove(event, value2);
+	}
+	function updateValues(value2, atIndex) {
+		var decimalCount = (0, import_helpers2.getDecimalCount)(step);
+		var snapToStep = (0, import_helpers2.roundValue)(Math.round((value2 - min) / step) * step + min, decimalCount);
+		var nextValue = (0, import_helpers.clamp)(snapToStep, [min, max]);
+		setValues(function() {
+			var prevValues = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+			var nextValues = (0, import_helpers2.getNextSortedValues)(prevValues, nextValue, atIndex);
+			if ((0, import_helpers2.hasMinStepsBetweenValues)(nextValues, minStepsBetweenThumbs * step)) {
+				valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
+				return String(nextValues) === String(prevValues) ? prevValues : nextValues;
+			}
+			return prevValues;
+		});
+	}
+	var SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_constants2.SliderProvider, {
+		scope: props.__scopeSlider,
+		disabled,
+		min,
+		max,
+		valueIndexToChangeRef,
+		thumbs: thumbRefs.current,
+		values,
+		orientation,
+		size: sizeProp,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderOriented, {
+			"aria-disabled": disabled,
+			"data-disabled": disabled ? "" : void 0,
+			...sliderProps,
+			ref: composedRefs,
+			min,
+			max,
+			onSlideEnd,
+			onSlideStart: disabled ? void 0 : function(value2, target, event) {
+				if (target !== "thumb") updateValues(value2, (0, import_helpers2.getClosestValueIndex)(values, value2));
+				onSlideStart === null || onSlideStart === void 0 || onSlideStart(event, value2, target);
+			},
+			onSlideMove: disabled ? void 0 : handleSlideMove,
+			onHomeKeyDown: function() {
+				return !disabled && updateValues(min, 0);
+			},
+			onEndKeyDown: function() {
+				return !disabled && updateValues(max, values.length - 1);
+			},
+			onStepKeyDown: function(param) {
+				var { event, direction: stepDirection } = param;
+				if (!disabled) {
+					var multiplier = import_constants2.PAGE_KEYS.includes(event.key) || event.shiftKey && import_constants2.ARROW_KEYS.includes(event.key) ? 10 : 1;
+					var atIndex = valueIndexToChangeRef.current;
+					var value2 = values[atIndex];
+					updateValues(value2 + step * multiplier * stepDirection, atIndex);
+				}
+			}
+		}), import_constants.isWeb && name && values.map(function(value2, index) {
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+				type: "hidden",
+				name,
+				value: value2
+			}, index);
+		})]
+	});
+});
+var Slider = (0, import_helpers.withStaticProperties)(SliderComponent, {
+	Track: SliderTrack,
+	TrackActive: SliderActive,
+	Thumb: SliderThumb
+});
+Slider.displayName = import_constants2.SLIDER_NAME;
+var Track = SliderTrack;
+var Range = SliderActive;
+var Thumb = SliderThumb;