react-native-a11y-slider
Version:
An accessible range slider that supports assistive devices like screen readers
181 lines • 8.44 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { useCallback, useRef, useEffect, useState } from "react";
import { View, StyleSheet, Animated, PanResponder, } from "react-native";
import { MarkerType, } from "./types";
import Label from "./Label";
import Marker from "./Marker";
import useA11yMarkerProps from "./useA11yMarkerProps";
export default React.memo(function (_a) {
var type = _a.type, sliderType = _a.sliderType, markerCount = _a.markerCount, minValue = _a.minValue, maxValue = _a.maxValue, position = _a.position, stops = _a.stops, _b = _a.showLabel, showLabel = _b === void 0 ? true : _b, markerColor = _a.markerColor, hitSlop = _a.hitSlop, panBoundariesProp = _a.panBoundaries, setIndexProp = _a.setIndex, labelStyle = _a.labelStyle, labelTextStyle = _a.labelTextStyle, _c = _a.labelComponent, LabelComponent = _c === void 0 ? Label : _c, _d = _a.markerComponent, MarkerComponent = _d === void 0 ? Marker : _d, onSlidingStart = _a.onSlidingStart, onSlidingComplete = _a.onSlidingComplete, setA11yMarkerProps = _a.setA11yMarkerProps, accessibilityProps = __rest(_a, ["type", "sliderType", "markerCount", "minValue", "maxValue", "position", "stops", "showLabel", "markerColor", "hitSlop", "panBoundaries", "setIndex", "labelStyle", "labelTextStyle", "labelComponent", "markerComponent", "onSlidingStart", "onSlidingComplete", "setA11yMarkerProps"]);
var startPosition = useRef();
var currentPosition = useRef();
var isPanningRef = useRef(false);
var panValue = useRef(new Animated.Value(0)).current;
var stopPositions = useRef([]);
var panBoundaries = useRef(panBoundariesProp);
var setIndex = useRef(setIndexProp);
var _e = useState(false), isPanning = _e[0], setPanning = _e[1];
var _f = useState(MarkerComponent.size), markerWidth = _f[0], setMarkerWidth = _f[1];
var a11yProps = useA11yMarkerProps(__assign({ type: type, sliderType: sliderType, position: position, minValue: minValue, maxValue: maxValue, setValue: setIndexProp, setA11yMarkerProps: setA11yMarkerProps }, accessibilityProps));
/**
* Return the correct pixel position for a stop.
* The markers are aligned in relative positions with the lower marker at the start of the scale and the upper marker at the end.
* This allows the container element to automatically size to the slider without hard-coded heights/widths.
* However, because of this, the pixel offsets for the upper marker is inverse to the lower marker.
*/
var getStopPx = useCallback(function (stop) {
return type === MarkerType.UPPER ? stop.pxInverse : stop.px;
}, [type]);
/**
* Get the closest stop position to this pixel value
*/
var getStopPosition = useCallback(function (px) {
var closest = Infinity;
var found = null;
// Find the stop that is the closest to px.
for (var i = 0; i < stopPositions.current.length; i++) {
var stop = stopPositions.current[i];
var stopPx = getStopPx(stop);
var distance = Math.abs(stopPx - px);
if (!found || distance < closest) {
found = stop;
closest = distance;
}
else if (distance > closest) {
// If this stop is further than the previous closest, we know we're done
break;
}
}
return found;
}, [getStopPx]);
var panResponder = useRef(PanResponder.create({
onStartShouldSetPanResponder: function () { return true; },
onPanResponderStart: function (_evt, _state) {
isPanningRef.current = true;
setPanning(true);
if (typeof onSlidingStart === "function") {
onSlidingStart(type);
}
},
onPanResponderMove: function (_evt, state) {
var _a, _b;
// Keep pan within boundaries
var initialPx = startPosition.current
? startPosition.current + state.dx
: state.dx;
var px = initialPx;
if (px > ((_a = panBoundaries === null || panBoundaries === void 0 ? void 0 : panBoundaries.current) === null || _a === void 0 ? void 0 : _a.max)) {
px = panBoundaries.current.max;
}
else if (px < ((_b = panBoundaries === null || panBoundaries === void 0 ? void 0 : panBoundaries.current) === null || _b === void 0 ? void 0 : _b.min)) {
px = panBoundaries.current.min;
}
var newPosition = getStopPosition(px);
if (newPosition) {
var newPx = getStopPx(newPosition);
setIndex.current(newPosition.index);
panValue.setValue(newPx);
currentPosition.current = newPx;
}
},
onPanResponderEnd: function () {
isPanningRef.current = false;
setPanning(false);
if (typeof onSlidingComplete === "function") {
onSlidingComplete(type);
}
if (typeof currentPosition.current === "number") {
startPosition.current = currentPosition.current;
panValue.setValue(currentPosition.current);
}
},
})).current;
/**
* Get the marker layout
*/
var onMarkerLayout = useCallback(function (event) {
var width = event.nativeEvent.layout.width;
if (width) {
setMarkerWidth(width);
}
}, []);
/**
* Update pan value and position from props to references
*/
useEffect(function () {
if (!isPanningRef.current && typeof (position === null || position === void 0 ? void 0 : position.px) !== "undefined") {
startPosition.current = getStopPx(position);
panValue.setValue(startPosition.current);
}
}, [panValue, position, getStopPx]);
/**
* Update stop positions reference
*/
useEffect(function () {
stopPositions.current = stops;
}, [stops]);
/**
* Update pan boundaries from props to the ref
*/
useEffect(function () {
panBoundaries.current = panBoundariesProp;
}, [panBoundariesProp]);
/**
* Update setValue from props to the ref
*/
useEffect(function () {
setIndex.current = setIndexProp;
}, [setIndexProp]);
var atMax = position === stops[stops.length - 1]; // marker is at the maximum step
return (<Animated.View {...a11yProps} style={[
styles.container,
atMax && styles.atMax,
isPanning && styles.selected,
{
width: markerWidth,
transform: [{ translateX: panValue }],
},
]}>
{showLabel && (<LabelComponent position={position} selected={isPanning} type={type} markerCount={markerCount} style={labelStyle} textStyle={labelTextStyle}/>)}
<View {...panResponder.panHandlers} onLayout={onMarkerLayout} hitSlop={hitSlop}>
<MarkerComponent position={position} selected={isPanning} type={type} markerCount={markerCount} color={markerColor}/>
</View>
</Animated.View>);
});
var styles = StyleSheet.create({
container: {
alignItems: "center",
flexDirection: "column",
},
selected: {
zIndex: 3,
},
// If the marker is at the max step of the scale, put it below the min maker so that the min marker can be moved.
// (in case the markers are overlapping)
atMax: {
zIndex: 2,
elevation: 0,
},
});
//# sourceMappingURL=GestureContainer.js.map