@arpitbhalla/rneui-base-dev
Version:
Cross Platform React Native UI Toolkit
415 lines (414 loc) • 19.9 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Slider = void 0;
var react_1 = __importStar(require("react"));
var react_native_1 = require("react-native");
var Rect_1 = require("./components/Rect");
var SliderThumb_1 = require("./components/SliderThumb");
var TRACK_SIZE = 4;
var THUMB_SIZE = 40;
var TRACK_STYLE = react_native_1.Platform.select({ web: 0, default: -1 });
var DEFAULT_ANIMATION_CONFIGS = {
spring: {
friction: 7,
tension: 100,
useNativeDriver: true,
},
timing: {
duration: 150,
easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
delay: 0,
useNativeDriver: true,
},
};
var getBoundedValue = function (value, maximumValue, minimumValue) { return Math.max(Math.min(value, maximumValue), minimumValue); };
var handlePanResponderRequestEnd = function () { return false; };
var handleMoveShouldSetPanResponder = function () { return !TRACK_STYLE; };
var SizableVars;
(function (SizableVars) {
SizableVars["containerSize"] = "containerSize";
SizableVars["thumbSize"] = "thumbSize";
SizableVars["trackSize"] = "trackSize";
})(SizableVars || (SizableVars = {}));
var EventTypes;
(function (EventTypes) {
EventTypes["onSlidingStart"] = "onSlidingStart";
EventTypes["onValueChange"] = "onValueChange";
EventTypes["onSlidingComplete"] = "onSlidingComplete";
})(EventTypes || (EventTypes = {}));
var Slider = function (_a) {
var _b = _a.allowTouchTrack, allowTouchTrack = _b === void 0 ? false : _b, animateTransitions = _a.animateTransitions, animationConfig = _a.animationConfig, _c = _a.animationType, animationType = _c === void 0 ? 'timing' : _c, containerStyle = _a.containerStyle, _d = _a.debugTouchArea, debugTouchArea = _d === void 0 ? false : _d, disabled = _a.disabled, _e = _a.maximumTrackTintColor, maximumTrackTintColor = _e === void 0 ? '#b3b3b3' : _e, _f = _a.maximumValue, maximumValue = _f === void 0 ? 1 : _f, _g = _a.minimumTrackTintColor, minimumTrackTintColor = _g === void 0 ? '#3f3f3f' : _g, _h = _a.minimumValue, minimumValue = _h === void 0 ? 0 : _h, onSlidingComplete = _a.onSlidingComplete, onSlidingStart = _a.onSlidingStart, onValueChange = _a.onValueChange, _j = _a.orientation, orientation = _j === void 0 ? 'horizontal' : _j, _k = _a.step, step = _k === void 0 ? 0 : _k, style = _a.style, thumbProps = _a.thumbProps, thumbStyle = _a.thumbStyle, _l = _a.thumbTintColor, thumbTintColor = _l === void 0 ? 'red' : _l, _m = _a.thumbTouchSize, thumbTouchSize = _m === void 0 ? { height: THUMB_SIZE, width: THUMB_SIZE } : _m, trackStyle = _a.trackStyle, _o = _a.value, _propValue = _o === void 0 ? 0 : _o, other = __rest(_a, ["allowTouchTrack", "animateTransitions", "animationConfig", "animationType", "containerStyle", "debugTouchArea", "disabled", "maximumTrackTintColor", "maximumValue", "minimumTrackTintColor", "minimumValue", "onSlidingComplete", "onSlidingStart", "onValueChange", "orientation", "step", "style", "thumbProps", "thumbStyle", "thumbTintColor", "thumbTouchSize", "trackStyle", "value"]);
var propValue = getBoundedValue(_propValue, maximumValue, minimumValue);
var prevPropValue = (0, react_1.useRef)(propValue);
var animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(propValue));
var _previousLeft = (0, react_1.useRef)(0);
var gestureStartPosition = (0, react_1.useRef)(0);
var _p = (0, react_1.useState)(false), allMeasured = _p[0], setAllMeasured = _p[1];
var _q = (0, react_1.useState)({
width: 0,
height: 0,
}), containerSize = _q[0], setContainerSize = _q[1];
var _r = (0, react_1.useState)({ width: 0, height: 0 }), trackSize = _r[0], setTrackSize = _r[1];
var _s = (0, react_1.useState)({ width: 0, height: 0 }), thumbSize = _s[0], setThumbSize = _s[1];
var isVertical = orientation === 'vertical';
var handleMeasure = (0, react_1.useCallback)(function (name, event) {
var _a, _b;
var varInfo = {
containerSize: { size: containerSize, setSize: setContainerSize },
thumbSize: { size: thumbSize, setSize: setThumbSize },
trackSize: { size: trackSize, setSize: setTrackSize },
};
var _c = varInfo[name], size = _c.size, setSize = _c.setSize;
var rect = event.nativeEvent.layout;
var rectWidth = (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : size.width;
var rectHeight = (_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : size.height;
var newSize = {
height: isVertical ? rectWidth : rectHeight,
width: isVertical ? rectHeight : rectWidth,
};
setSize(newSize);
}, [containerSize, isVertical, thumbSize, trackSize]);
(0, react_1.useEffect)(function () {
return setAllMeasured(!!(containerSize.height &&
containerSize.width &&
thumbSize.height &&
thumbSize.width &&
trackSize.height &&
trackSize.width));
}, [
containerSize.height,
containerSize.width,
thumbSize.height,
thumbSize.width,
trackSize.height,
trackSize.width,
]);
var measureContainer = (0, react_1.useCallback)(function (event) { return handleMeasure(SizableVars.containerSize, event); }, [handleMeasure]);
var measureTrack = (0, react_1.useCallback)(function (event) { return handleMeasure(SizableVars.trackSize, event); }, [handleMeasure]);
var measureThumb = (0, react_1.useCallback)(function (event) { return handleMeasure(SizableVars.thumbSize, event); }, [handleMeasure]);
var setCurrentValue = (0, react_1.useCallback)(function (v) { return animatedValue.current.setValue(v); }, [animatedValue]);
var setCurrentValueAnimated = (0, react_1.useCallback)(function (v) {
return react_native_1.Animated[animationType](animatedValue.current, __assign(__assign(__assign({}, DEFAULT_ANIMATION_CONFIGS[animationType]), animationConfig), { toValue: v })).start();
}, [animationConfig, animationType]);
(0, react_1.useEffect)(function () {
if (prevPropValue.current !== propValue) {
prevPropValue.current = propValue;
if (animateTransitions) {
setCurrentValueAnimated(propValue);
}
else {
setCurrentValue(propValue);
}
}
}, [
animateTransitions,
maximumValue,
minimumValue,
setCurrentValue,
setCurrentValueAnimated,
propValue,
]);
var getValueForTouch = (0, react_1.useCallback)(function (location) {
var length = containerSize.width - thumbSize.width;
var ratio = location / length;
var newValue = ratio * (maximumValue - minimumValue);
if (step) {
newValue = Math.round(newValue / step) * step;
}
return getBoundedValue(newValue + minimumValue, maximumValue, minimumValue);
}, [containerSize.width, maximumValue, minimumValue, step, thumbSize.width]);
var getOnTouchValue = (0, react_1.useCallback)(function (_a) {
var nativeEvent = _a.nativeEvent;
var location = isVertical
? nativeEvent.locationY
: nativeEvent.locationX;
return getValueForTouch(location);
}, [getValueForTouch, isVertical]);
var getThumbLeft = (0, react_1.useCallback)(function (v) {
var ratio = (v - minimumValue) / (maximumValue - minimumValue);
return ratio * (containerSize.width - thumbSize.width);
}, [containerSize.width, maximumValue, minimumValue, thumbSize.width]);
var getTouchOverflowSize = (0, react_1.useCallback)(function () {
return allMeasured
? {
height: Math.max(0, thumbTouchSize.height - containerSize.height),
width: Math.max(0, thumbTouchSize.width - thumbSize.width),
}
: { height: 0, width: 0 };
}, [
allMeasured,
containerSize.height,
thumbSize.width,
thumbTouchSize.height,
thumbTouchSize.width,
]);
var getCurrentValue = (0, react_1.useCallback)(function () { return animatedValue.current.__getValue(); }, []);
var getThumbTouchRect = (0, react_1.useCallback)(function () {
var touchOverflowSize = getTouchOverflowSize();
var height = touchOverflowSize.height / 2 +
(containerSize.height - thumbTouchSize.height) / 2;
var width = touchOverflowSize.width / 2 +
getThumbLeft(getCurrentValue()) +
(thumbSize.width - thumbTouchSize.width) / 2;
return isVertical
? new Rect_1.Rect(height, width, thumbTouchSize.width, thumbTouchSize.height)
: new Rect_1.Rect(width, height, thumbTouchSize.width, thumbTouchSize.height);
}, [
containerSize.height,
getCurrentValue,
getThumbLeft,
getTouchOverflowSize,
isVertical,
thumbSize.width,
thumbTouchSize.height,
thumbTouchSize.width,
]);
var getValue = (0, react_1.useCallback)(function (gestureState) {
var delta = (isVertical ? gestureState.moveY : gestureState.moveX) -
gestureStartPosition.current;
var location = _previousLeft.current + delta;
return getValueForTouch(location);
}, [getValueForTouch, isVertical]);
var fireChangeEvent = (0, react_1.useCallback)(function (event) {
var v = getCurrentValue();
if (event === EventTypes.onSlidingStart) {
onSlidingStart === null || onSlidingStart === void 0 ? void 0 : onSlidingStart(v);
}
else if (event === EventTypes.onSlidingComplete) {
onSlidingComplete === null || onSlidingComplete === void 0 ? void 0 : onSlidingComplete(v);
}
else if (event === EventTypes.onValueChange) {
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(v);
}
}, [getCurrentValue, onSlidingComplete, onSlidingStart, onValueChange]);
var handlePanResponderGrant = (0, react_1.useCallback)(function (e, gestureState) {
_previousLeft.current = getThumbLeft(getCurrentValue());
gestureStartPosition.current = isVertical
? gestureState.y0
: gestureState.x0;
fireChangeEvent(EventTypes.onSlidingStart);
}, [fireChangeEvent, getCurrentValue, getThumbLeft, isVertical]);
var handlePanResponderMove = (0, react_1.useCallback)(function (_, gestureState) {
if (!disabled) {
setCurrentValue(getValue(gestureState));
fireChangeEvent(EventTypes.onValueChange);
}
}, [disabled, fireChangeEvent, getValue, setCurrentValue]);
var handlePanResponderEnd = (0, react_1.useCallback)(function () {
if (!disabled) {
fireChangeEvent(EventTypes.onSlidingComplete);
}
}, [disabled, fireChangeEvent]);
var thumbHitTest = (0, react_1.useCallback)(function (_a) {
var nativeEvent = _a.nativeEvent;
var thumbTouchRect = getThumbTouchRect();
return thumbTouchRect.containsPoint(nativeEvent.locationX, nativeEvent.locationY);
}, [getThumbTouchRect]);
var handleStartShouldSetPanResponder = (0, react_1.useCallback)(function (e) {
if (!allowTouchTrack) {
return thumbHitTest(e);
}
setCurrentValue(getOnTouchValue(e));
fireChangeEvent(EventTypes.onValueChange);
return true;
}, [
allowTouchTrack,
fireChangeEvent,
getOnTouchValue,
setCurrentValue,
thumbHitTest,
]);
var getTouchOverflowStyle = (0, react_1.useCallback)(function () {
var _a = getTouchOverflowSize(), width = _a.width, height = _a.height;
var touchOverflowStyle = {};
var verticalMargin = -height / 2;
touchOverflowStyle.marginTop = verticalMargin;
touchOverflowStyle.marginBottom = verticalMargin;
var horizontalMargin = -width / 2;
touchOverflowStyle.marginLeft = horizontalMargin;
touchOverflowStyle.marginRight = horizontalMargin;
if (debugTouchArea === true) {
touchOverflowStyle.backgroundColor = 'orange';
touchOverflowStyle.opacity = 0.5;
}
return touchOverflowStyle;
}, [debugTouchArea, getTouchOverflowSize]);
var renderDebugThumbTouchRect = (0, react_1.useCallback)(function (thumbLeft) {
var thumbTouchRect = getThumbTouchRect();
var positionStyle = {
left: thumbLeft,
top: thumbTouchRect.y,
width: thumbTouchRect.width,
height: thumbTouchRect.height,
};
return react_1.default.createElement(react_native_1.Animated.View, { style: positionStyle, pointerEvents: "none" });
}, [getThumbTouchRect]);
var getMinimumTrackStyles = (0, react_1.useCallback)(function (thumbStart) {
var minimumTrackStyle = {
position: 'absolute',
};
if (!allMeasured) {
minimumTrackStyle.height = 0;
minimumTrackStyle.width = 0;
}
else if (isVertical) {
minimumTrackStyle.height = react_native_1.Animated.add(thumbStart, thumbSize.height / 2);
minimumTrackStyle.marginLeft = trackSize.width * TRACK_STYLE;
}
else {
minimumTrackStyle.width = react_native_1.Animated.add(thumbStart, thumbSize.width / 2);
minimumTrackStyle.marginTop = trackSize.height * TRACK_STYLE;
}
return minimumTrackStyle;
}, [
allMeasured,
isVertical,
thumbSize.height,
thumbSize.width,
trackSize.height,
trackSize.width,
]);
var panResponder = (0, react_1.useMemo)(function () {
return react_native_1.PanResponder.create({
onStartShouldSetPanResponder: handleStartShouldSetPanResponder,
onMoveShouldSetPanResponder: handleMoveShouldSetPanResponder,
onPanResponderGrant: handlePanResponderGrant,
onPanResponderMove: handlePanResponderMove,
onPanResponderRelease: handlePanResponderEnd,
onPanResponderTerminationRequest: handlePanResponderRequestEnd,
onPanResponderTerminate: handlePanResponderEnd,
});
}, [
handleStartShouldSetPanResponder,
handlePanResponderGrant,
handlePanResponderMove,
handlePanResponderEnd,
]);
var mainStyles = containerStyle !== null && containerStyle !== void 0 ? containerStyle : styles;
var appliedTrackStyle = react_native_1.StyleSheet.flatten([styles.track, trackStyle]);
var thumbStart = animatedValue.current.interpolate({
inputRange: [minimumValue, maximumValue],
outputRange: [0, containerSize.width - thumbSize.width],
});
var minimumTrackStyle = __assign(__assign({}, getMinimumTrackStyles(thumbStart)), { backgroundColor: minimumTrackTintColor });
var touchOverflowStyle = getTouchOverflowStyle();
return (react_1.default.createElement(react_native_1.View, __assign({ testID: "RNE__Slider_Container" }, other, { style: react_native_1.StyleSheet.flatten([
isVertical
? mainStyles.containerVertical
: mainStyles.containerHorizontal,
style,
]), onLayout: measureContainer, accessibilityRole: "adjustable", accessibilityValue: {
min: minimumValue,
max: maximumValue,
now: getCurrentValue(),
} }),
react_1.default.createElement(react_native_1.View, { testID: "RNE__Slider_Track_maximum", style: react_native_1.StyleSheet.flatten([
mainStyles.track,
isVertical ? mainStyles.trackVertical : mainStyles.trackHorizontal,
appliedTrackStyle,
{ backgroundColor: maximumTrackTintColor },
]), onLayout: measureTrack }),
react_1.default.createElement(react_native_1.Animated.View, { testID: "RNE__Slider_Track_minimum", style: react_native_1.StyleSheet.flatten([
mainStyles.track,
isVertical ? mainStyles.trackVertical : mainStyles.trackHorizontal,
appliedTrackStyle,
minimumTrackStyle,
]) }),
react_1.default.createElement(SliderThumb_1.SliderThumb, __assign({ isVisible: allMeasured, onLayout: measureThumb, style: thumbStyle, color: thumbTintColor, start: thumbStart, vertical: isVertical }, thumbProps)),
react_1.default.createElement(react_native_1.View, __assign({ testID: "RNE__Slider_TouchArea", style: react_native_1.StyleSheet.flatten([styles.touchArea, touchOverflowStyle]) }, panResponder.panHandlers), debugTouchArea === true && renderDebugThumbTouchRect(thumbStart))));
};
exports.Slider = Slider;
exports.Slider.defaultProps = {
value: 0,
minimumValue: 0,
maximumValue: 1,
step: 0,
minimumTrackTintColor: '#3f3f3f',
maximumTrackTintColor: '#b3b3b3',
allowTouchTrack: false,
thumbTintColor: 'red',
thumbTouchSize: { width: THUMB_SIZE, height: THUMB_SIZE },
debugTouchArea: false,
animationType: 'timing',
orientation: 'horizontal',
};
var styles = react_native_1.StyleSheet.create({
containerHorizontal: {
height: 40,
justifyContent: 'center',
},
containerVertical: {
width: 40,
flexDirection: 'column',
alignItems: 'center',
},
track: {
borderRadius: TRACK_SIZE / 2,
},
trackHorizontal: {
height: TRACK_SIZE,
},
trackVertical: {
flex: 1,
width: TRACK_SIZE,
},
touchArea: {
position: 'absolute',
backgroundColor: 'transparent',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
debugThumbTouchArea: {
position: 'absolute',
backgroundColor: 'green',
opacity: 0.5,
},
});
exports.Slider.displayName = 'Slider';