related-ui-components 2.6.1 → 2.6.3
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/lib/commonjs/app.d.ts +4 -0
- package/lib/commonjs/app.d.ts.map +1 -0
- package/lib/commonjs/components/Badges/Badge.d.ts +14 -0
- package/lib/commonjs/components/Badges/Badge.d.ts.map +1 -0
- package/lib/commonjs/components/Badges/index.d.ts +3 -0
- package/lib/commonjs/components/Badges/index.d.ts.map +1 -0
- package/lib/commonjs/components/Banner/Banner.d.ts +24 -0
- package/lib/commonjs/components/Banner/Banner.d.ts.map +1 -0
- package/lib/commonjs/components/Banner/BannerWithDetails.d.ts +16 -0
- package/lib/commonjs/components/Banner/BannerWithDetails.d.ts.map +1 -0
- package/lib/commonjs/components/Banner/index.d.ts +4 -0
- package/lib/commonjs/components/Banner/index.d.ts.map +1 -0
- package/lib/commonjs/components/BrandIcon/BrandIcon.d.ts +18 -0
- package/lib/commonjs/components/BrandIcon/BrandIcon.d.ts.map +1 -0
- package/lib/commonjs/components/BrandIcon/index.d.ts +3 -0
- package/lib/commonjs/components/BrandIcon/index.d.ts.map +1 -0
- package/lib/commonjs/components/Button/Button.d.ts +17 -0
- package/lib/commonjs/components/Button/Button.d.ts.map +1 -0
- package/lib/commonjs/components/Button/index.d.ts +3 -0
- package/lib/commonjs/components/Button/index.d.ts.map +1 -0
- package/lib/commonjs/components/Card/Card.d.ts +17 -0
- package/lib/commonjs/components/Card/Card.d.ts.map +1 -0
- package/lib/commonjs/components/Card/CardContent.d.ts +8 -0
- package/lib/commonjs/components/Card/CardContent.d.ts.map +1 -0
- package/lib/commonjs/components/Card/CardFooter.d.ts +9 -0
- package/lib/commonjs/components/Card/CardFooter.d.ts.map +1 -0
- package/lib/commonjs/components/Card/CardHeader.d.ts +14 -0
- package/lib/commonjs/components/Card/CardHeader.d.ts.map +1 -0
- package/lib/commonjs/components/Card/CardImage.d.ts +12 -0
- package/lib/commonjs/components/Card/CardImage.d.ts.map +1 -0
- package/lib/commonjs/components/Card/index.d.ts +10 -0
- package/lib/commonjs/components/Card/index.d.ts.map +1 -0
- package/lib/commonjs/components/Card/templates/DealCard.d.ts +30 -0
- package/lib/commonjs/components/Card/templates/DealCard.d.ts.map +1 -0
- package/lib/commonjs/components/Card/templates/DealCardWithBackgroundImage.d.ts +37 -0
- package/lib/commonjs/components/Card/templates/DealCardWithBackgroundImage.d.ts.map +1 -0
- package/lib/commonjs/components/Card/templates/SimpleTrendingCard.d.ts +12 -0
- package/lib/commonjs/components/Card/templates/SimpleTrendingCard.d.ts.map +1 -0
- package/lib/commonjs/components/Card/types.d.ts +2 -0
- package/lib/commonjs/components/Card/types.d.ts.map +1 -0
- package/lib/commonjs/components/CloseIcon/CloseIcon.d.ts +14 -0
- package/lib/commonjs/components/CloseIcon/CloseIcon.d.ts.map +1 -0
- package/lib/commonjs/components/CloseIcon/index.d.ts +3 -0
- package/lib/commonjs/components/CloseIcon/index.d.ts.map +1 -0
- package/lib/commonjs/components/DateRangePicker/DateRangePicker.d.ts +20 -0
- package/lib/commonjs/components/DateRangePicker/DateRangePicker.d.ts.map +1 -0
- package/lib/commonjs/components/DateRangePicker/index.d.ts +2 -0
- package/lib/commonjs/components/DateRangePicker/index.d.ts.map +1 -0
- package/lib/commonjs/components/Filters/Filters.d.ts +56 -0
- package/lib/commonjs/components/Filters/Filters.d.ts.map +1 -0
- package/lib/commonjs/components/Filters/PointsRangeSelector.d.ts +27 -0
- package/lib/commonjs/components/Filters/PointsRangeSelector.d.ts.map +1 -0
- package/lib/commonjs/components/Filters/index.d.ts +4 -0
- package/lib/commonjs/components/Filters/index.d.ts.map +1 -0
- package/lib/commonjs/components/Input/Input.d.ts +4 -0
- package/lib/commonjs/components/Input/Input.d.ts.map +1 -0
- package/lib/commonjs/components/Input/index.d.ts +3 -0
- package/lib/commonjs/components/Input/index.d.ts.map +1 -0
- package/lib/commonjs/components/LockOverlay/LockOverlay.d.ts +15 -0
- package/lib/commonjs/components/LockOverlay/LockOverlay.d.ts.map +1 -0
- package/lib/commonjs/components/LockOverlay/index.d.ts +3 -0
- package/lib/commonjs/components/LockOverlay/index.d.ts.map +1 -0
- package/lib/commonjs/components/Marquee/Marquee.d.ts +14 -0
- package/lib/commonjs/components/Marquee/Marquee.d.ts.map +1 -0
- package/lib/commonjs/components/Marquee/index.d.ts +3 -0
- package/lib/commonjs/components/Marquee/index.d.ts.map +1 -0
- package/lib/commonjs/components/NumericStepper/NumericStepper.d.ts +16 -0
- package/lib/commonjs/components/NumericStepper/NumericStepper.d.ts.map +1 -0
- package/lib/commonjs/components/NumericStepper/index.d.ts +3 -0
- package/lib/commonjs/components/NumericStepper/index.d.ts.map +1 -0
- package/lib/commonjs/components/Popup/Popup.d.ts +39 -0
- package/lib/commonjs/components/Popup/Popup.d.ts.map +1 -0
- package/lib/commonjs/components/Popup/index.d.ts +3 -0
- package/lib/commonjs/components/Popup/index.d.ts.map +1 -0
- package/lib/commonjs/components/ProgressBar/ProgressBar.d.ts +22 -0
- package/lib/commonjs/components/ProgressBar/ProgressBar.d.ts.map +1 -0
- package/lib/commonjs/components/ProgressBar/index.d.ts +3 -0
- package/lib/commonjs/components/ProgressBar/index.d.ts.map +1 -0
- package/lib/commonjs/components/RedeemedVoucher/RedeemedVoucherSheet.d.ts +4 -0
- package/lib/commonjs/components/RedeemedVoucher/RedeemedVoucherSheet.d.ts.map +1 -0
- package/lib/commonjs/components/RedeemedVoucher/index.d.ts +3 -0
- package/lib/commonjs/components/RedeemedVoucher/index.d.ts.map +1 -0
- package/lib/commonjs/components/RedemptionOption/RedemptionOption.d.ts +23 -0
- package/lib/commonjs/components/RedemptionOption/RedemptionOption.d.ts.map +1 -0
- package/lib/commonjs/components/RedemptionOption/index.d.ts +3 -0
- package/lib/commonjs/components/RedemptionOption/index.d.ts.map +1 -0
- package/lib/commonjs/components/ScratchCard/ScratchCard.d.ts +19 -0
- package/lib/commonjs/components/ScratchCard/ScratchCard.d.ts.map +1 -0
- package/lib/commonjs/components/ScratchCard/ScratchCardContent.d.ts +7 -0
- package/lib/commonjs/components/ScratchCard/ScratchCardContent.d.ts.map +1 -0
- package/lib/commonjs/components/ScratchCard/index.d.ts +4 -0
- package/lib/commonjs/components/ScratchCard/index.d.ts.map +1 -0
- package/lib/commonjs/components/SelectAmount/SelectAmount.d.ts +29 -0
- package/lib/commonjs/components/SelectAmount/SelectAmount.d.ts.map +1 -0
- package/lib/commonjs/components/SelectAmount/index.d.ts +2 -0
- package/lib/commonjs/components/SelectAmount/index.d.ts.map +1 -0
- package/lib/commonjs/components/Skeleton/Shimmer.d.ts +11 -0
- package/lib/commonjs/components/Skeleton/Shimmer.d.ts.map +1 -0
- package/lib/commonjs/components/Skeleton/SkeletonElement.d.ts +10 -0
- package/lib/commonjs/components/Skeleton/SkeletonElement.d.ts.map +1 -0
- package/lib/commonjs/components/Skeleton/index.d.ts +4 -0
- package/lib/commonjs/components/Skeleton/index.d.ts.map +1 -0
- package/lib/commonjs/components/Suggestions/SuggestionList.d.ts +12 -0
- package/lib/commonjs/components/Suggestions/SuggestionList.d.ts.map +1 -0
- package/lib/commonjs/components/TravelBooking/CarRentalForm.d.ts +52 -0
- package/lib/commonjs/components/TravelBooking/CarRentalForm.d.ts.map +1 -0
- package/lib/commonjs/components/TravelBooking/FlightForm.d.ts +47 -0
- package/lib/commonjs/components/TravelBooking/FlightForm.d.ts.map +1 -0
- package/lib/commonjs/components/TravelBooking/FlightSummary.d.ts +32 -0
- package/lib/commonjs/components/TravelBooking/FlightSummary.d.ts.map +1 -0
- package/lib/commonjs/components/TravelBooking/HotelForm.d.ts +45 -0
- package/lib/commonjs/components/TravelBooking/HotelForm.d.ts.map +1 -0
- package/lib/commonjs/components/TravelBooking/HotelSummary.d.ts +36 -0
- package/lib/commonjs/components/TravelBooking/HotelSummary.d.ts.map +1 -0
- package/lib/commonjs/components/TravelBooking/SummaryBar.d.ts +12 -0
- package/lib/commonjs/components/TravelBooking/SummaryBar.d.ts.map +1 -0
- package/lib/commonjs/components/TravelBooking/TabSelector.d.ts +15 -0
- package/lib/commonjs/components/TravelBooking/TabSelector.d.ts.map +1 -0
- package/lib/commonjs/components/TravelBooking/TravelBooking.d.ts +47 -0
- package/lib/commonjs/components/TravelBooking/TravelBooking.d.ts.map +1 -0
- package/lib/commonjs/components/TravelBooking/index.d.ts +2 -0
- package/lib/commonjs/components/TravelBooking/index.d.ts.map +1 -0
- package/lib/commonjs/components/TravelBooking/types.d.ts +3 -0
- package/lib/commonjs/components/TravelBooking/types.d.ts.map +1 -0
- package/lib/commonjs/components/UnlockRewards/RewardItem.d.ts +23 -0
- package/lib/commonjs/components/UnlockRewards/RewardItem.d.ts.map +1 -0
- package/lib/commonjs/components/UnlockRewards/UnlockRewards.d.ts +41 -0
- package/lib/commonjs/components/UnlockRewards/UnlockRewards.d.ts.map +1 -0
- package/lib/commonjs/components/UnlockRewards/index.d.ts +4 -0
- package/lib/commonjs/components/UnlockRewards/index.d.ts.map +1 -0
- package/lib/commonjs/components/Wheel/Wheel.d.ts +25 -0
- package/lib/commonjs/components/Wheel/Wheel.d.ts.map +1 -0
- package/lib/commonjs/components/Wheel/index.d.ts +3 -0
- package/lib/commonjs/components/Wheel/index.d.ts.map +1 -0
- package/lib/commonjs/components/index.d.ts +2 -0
- package/lib/commonjs/components/index.d.ts.map +1 -0
- package/lib/commonjs/constants/BRANDS.d.ts +14 -0
- package/lib/commonjs/constants/BRANDS.d.ts.map +1 -0
- package/lib/commonjs/index.d.ts +2 -0
- package/lib/commonjs/index.d.ts.map +1 -0
- package/lib/commonjs/theme/Colors.d.ts +110 -0
- package/lib/commonjs/theme/Colors.d.ts.map +1 -0
- package/lib/commonjs/theme/ThemeContext.d.ts +11 -0
- package/lib/commonjs/theme/ThemeContext.d.ts.map +1 -0
- package/lib/commonjs/theme/index.d.ts +2 -0
- package/lib/commonjs/theme/index.d.ts.map +1 -0
- package/lib/module/app.js +8 -8
- package/lib/module/app.js.map +1 -1
- package/lib/module/components/RangeSlider/RangeSlider.js +56 -95
- package/lib/module/components/RangeSlider/RangeSlider.js.map +1 -1
- package/lib/module/components/RangeSlider/SliderLabel.js +95 -0
- package/lib/module/components/RangeSlider/SliderLabel.js.map +1 -0
- package/lib/module/contexts/BottomSheetStackProvider.js +1 -1
- package/lib/module/contexts/BottomSheetStackProvider.js.map +1 -1
- package/lib/typescript/src/app.d.ts.map +1 -1
- package/lib/typescript/src/components/RangeSlider/RangeSlider.d.ts +3 -25
- package/lib/typescript/src/components/RangeSlider/RangeSlider.d.ts.map +1 -1
- package/lib/typescript/src/components/RangeSlider/SliderLabel.d.ts +15 -0
- package/lib/typescript/src/components/RangeSlider/SliderLabel.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/app.tsx +3 -1
- package/src/components/RangeSlider/RangeSlider.tsx +60 -117
- package/src/components/RangeSlider/SliderLabel.tsx +123 -0
- package/src/contexts/BottomSheetStackProvider.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useState","StyleSheet","View","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useState","StyleSheet","View","Gesture","GestureDetector","Animated","runOnJS","useAnimatedStyle","useSharedValue","SliderLabels","useTheme","jsx","_jsx","jsxs","_jsxs","THUMB_SIZE","RAIL_HEIGHT","LABEL_HEIGHT","RangeSlider","min","max","step","sliderWidth","initialMinValue","initialMaxValue","onValueChange","theme","defaultTheme","currTheme","styles","getStyles","leftLabel","setLeftLabel","toLocaleString","rightLabel","setRightLabel","valueToPosition","value","positionToValue","position","rawValue","Math","round","leftPosition","rightPosition","context","x","activeThumb","panGesture","Pan","onBegin","e","distToLeft","abs","distToRight","onUpdate","newPos","translationX","clampedPos","onEnd","finalLeftValue","finalRightValue","animatedLeftThumbStyle","transform","translateX","animatedRightThumbStyle","animatedActiveRailStyle","left","right","style","container","width","children","leftValue","rightValue","thumbSize","gesture","railContainer","rail","activeRail","thumbContainer","thumb","create","height","justifyContent","marginTop","borderRadius","backgroundColor","surface","primary","alignItems","background","borderColor","borderWidth"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RangeSlider/RangeSlider.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { StyleSheet, Text, View } from "react-native";
|
|
5
|
+
import Animated, { useAnimatedStyle, useDerivedValue, useSharedValue } from "react-native-reanimated";
|
|
6
|
+
import { useTheme } from "../../theme/index.js";
|
|
7
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
const LABEL_HEIGHT = 26;
|
|
9
|
+
const CenteredLabel = ({
|
|
10
|
+
value,
|
|
11
|
+
position,
|
|
12
|
+
sliderWidth,
|
|
13
|
+
thumbSize,
|
|
14
|
+
theme
|
|
15
|
+
}) => {
|
|
16
|
+
const labelWidth = useSharedValue(0);
|
|
17
|
+
const {
|
|
18
|
+
theme: defaultTheme
|
|
19
|
+
} = useTheme();
|
|
20
|
+
const currTheme = theme || defaultTheme;
|
|
21
|
+
const styles = getStyles(currTheme);
|
|
22
|
+
const animatedLabelStyle = useAnimatedStyle(() => {
|
|
23
|
+
const rawCenter = position.value + thumbSize / 2;
|
|
24
|
+
const shifted = rawCenter - labelWidth.value / 2;
|
|
25
|
+
const left = Math.min(Math.max(shifted, 0), sliderWidth - labelWidth.value);
|
|
26
|
+
return {
|
|
27
|
+
left: left
|
|
28
|
+
};
|
|
29
|
+
});
|
|
30
|
+
return /*#__PURE__*/_jsx(Animated.View, {
|
|
31
|
+
style: [styles.labelContainer, animatedLabelStyle],
|
|
32
|
+
onLayout: e => {
|
|
33
|
+
labelWidth.value = e.nativeEvent.layout.width;
|
|
34
|
+
},
|
|
35
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
36
|
+
style: styles.labelText,
|
|
37
|
+
children: value
|
|
38
|
+
})
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
export const SliderLabels = ({
|
|
42
|
+
leftValue,
|
|
43
|
+
rightValue,
|
|
44
|
+
leftPosition,
|
|
45
|
+
rightPosition,
|
|
46
|
+
sliderWidth,
|
|
47
|
+
thumbSize,
|
|
48
|
+
theme
|
|
49
|
+
}) => {
|
|
50
|
+
const {
|
|
51
|
+
theme: defaultTheme
|
|
52
|
+
} = useTheme();
|
|
53
|
+
const currTheme = theme || defaultTheme;
|
|
54
|
+
const styles = getStyles(currTheme);
|
|
55
|
+
const rightThumbLeftPosition = useDerivedValue(() => {
|
|
56
|
+
return rightPosition.value - thumbSize;
|
|
57
|
+
});
|
|
58
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
59
|
+
style: styles.wrapper,
|
|
60
|
+
pointerEvents: "none",
|
|
61
|
+
children: [/*#__PURE__*/_jsx(CenteredLabel, {
|
|
62
|
+
value: leftValue,
|
|
63
|
+
thumbSize: thumbSize,
|
|
64
|
+
position: leftPosition,
|
|
65
|
+
sliderWidth: sliderWidth
|
|
66
|
+
}), /*#__PURE__*/_jsx(CenteredLabel, {
|
|
67
|
+
value: rightValue,
|
|
68
|
+
thumbSize: thumbSize,
|
|
69
|
+
position: rightThumbLeftPosition,
|
|
70
|
+
sliderWidth: sliderWidth
|
|
71
|
+
})]
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
const getStyles = theme => StyleSheet.create({
|
|
75
|
+
wrapper: {
|
|
76
|
+
position: "absolute",
|
|
77
|
+
width: "100%",
|
|
78
|
+
height: "100%"
|
|
79
|
+
},
|
|
80
|
+
labelContainer: {
|
|
81
|
+
position: "absolute",
|
|
82
|
+
top: -LABEL_HEIGHT + 4,
|
|
83
|
+
alignItems: "center"
|
|
84
|
+
},
|
|
85
|
+
labelText: {
|
|
86
|
+
backgroundColor: theme.surface,
|
|
87
|
+
paddingHorizontal: 8,
|
|
88
|
+
paddingVertical: 4,
|
|
89
|
+
borderRadius: 4,
|
|
90
|
+
color: theme.onSurface,
|
|
91
|
+
fontSize: 14,
|
|
92
|
+
fontFamily: "DinBold"
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
//# sourceMappingURL=SliderLabel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","StyleSheet","Text","View","Animated","useAnimatedStyle","useDerivedValue","useSharedValue","useTheme","jsx","_jsx","jsxs","_jsxs","LABEL_HEIGHT","CenteredLabel","value","position","sliderWidth","thumbSize","theme","labelWidth","defaultTheme","currTheme","styles","getStyles","animatedLabelStyle","rawCenter","shifted","left","Math","min","max","style","labelContainer","onLayout","e","nativeEvent","layout","width","children","labelText","SliderLabels","leftValue","rightValue","leftPosition","rightPosition","rightThumbLeftPosition","wrapper","pointerEvents","create","height","top","alignItems","backgroundColor","surface","paddingHorizontal","paddingVertical","borderRadius","color","onSurface","fontSize","fontFamily"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RangeSlider/SliderLabel.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -30,7 +30,7 @@ export const BottomSheetStackProvider = ({
|
|
|
30
30
|
setStack(prev => prev.slice(0, -1));
|
|
31
31
|
}, [stack.length, clear]);
|
|
32
32
|
const replace = useCallback(item => {
|
|
33
|
-
setStack(
|
|
33
|
+
setStack([item]);
|
|
34
34
|
}, []);
|
|
35
35
|
const currentItem = useMemo(() => stack[stack.length - 1], [stack]);
|
|
36
36
|
const canGoBack = stack.length > 1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["BottomSheet","BottomSheetBackdrop","React","useCallback","useEffect","useMemo","useRef","useState","BackHandler","StyleSheet","Animated","FadeIn","FadeOut","useSafeAreaInsets","BottomSheetStackContext","jsx","_jsx","jsxs","_jsxs","BottomSheetStackProvider","children","stack","setStack","sheetRef","top","push","item","prev","clear","current","close","pop","length","slice","replace","currentItem","canGoBack","isOpen","snapToIndex","initialSnapIndex","backHandlerSubscription","addEventListener","remove","AnimatedView","View","enteringAnimation","duration","exitingAnimation","renderBackdrop","props","disappearsOnIndex","style","backgroundColor","appearsOnIndex","pressBehavior","Provider","value","bottomSheetProps","ref","index","snapPoints","enableDynamicSizing","dynamicSizing","enablePanDownToClose","android_keyboardInputMode","enableBlurKeyboardOnGesture","keyboardBlurBehavior","keyboardBehavior","onClose","backdropComponent","topInset","handleIndicatorStyle","styles","sheetContainer","entering","exiting","animatedView","component","create","flex"],"sourceRoot":"..\\..\\..\\src","sources":["contexts/BottomSheetStackProvider.tsx"],"mappings":";;AAAA,OAAOA,WAAW,IAChBC,mBAAmB,QAEd,sBAAsB;AAC7B,OAAOC,KAAK,IAEVC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,SAASC,WAAW,EAAEC,UAAU,QAAQ,cAAc;AACtD,OAAOC,QAAQ,IAAIC,MAAM,EAAEC,OAAO,QAAQ,yBAAyB;AACnE,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SACEC,uBAAuB,QAElB,8BAA2B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEnC,OAAO,MAAMC,wBAA2D,GAAGA,CAAC;EAC1EC;AACF,CAAC,KAAK;EACJ,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGf,QAAQ,CAAyB,EAAE,CAAC;EAC9D,MAAMgB,QAAQ,GAAGjB,MAAM,CAAc,IAAI,CAAC;EAC1C,MAAM;IAAEkB;EAAI,CAAC,GAAGX,iBAAiB,CAAC,CAAC;EAEnC,MAAMY,IAAI,GAAGtB,WAAW,CAAEuB,IAA0B,IAAK;IACvDJ,QAAQ,CAAEK,IAAI,IAAK,CAAC,GAAGA,IAAI,EAAED,IAAI,CAAC,CAAC;EACrC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,KAAK,GAAGzB,WAAW,CAAC,MAAM;IAC9BoB,QAAQ,CAACM,OAAO,EAAEC,KAAK,CAAC,CAAC;IACzBR,QAAQ,CAAC,EAAE,CAAC;EACd,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMS,GAAG,GAAG5B,WAAW,CAAC,MAAM;IAC5B,IAAIkB,KAAK,CAACW,MAAM,IAAI,CAAC,EAAE;MACrBJ,KAAK,CAAC,CAAC;MACP;IACF;IACAN,QAAQ,CAAEK,IAAI,IAAKA,IAAI,CAACM,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;EACvC,CAAC,EAAE,CAACZ,KAAK,CAACW,MAAM,EAAEJ,KAAK,CAAC,CAAC;EAEzB,MAAMM,OAAO,GAAG/B,WAAW,CAAEuB,IAA0B,IAAK;IAC1DJ,QAAQ,
|
|
1
|
+
{"version":3,"names":["BottomSheet","BottomSheetBackdrop","React","useCallback","useEffect","useMemo","useRef","useState","BackHandler","StyleSheet","Animated","FadeIn","FadeOut","useSafeAreaInsets","BottomSheetStackContext","jsx","_jsx","jsxs","_jsxs","BottomSheetStackProvider","children","stack","setStack","sheetRef","top","push","item","prev","clear","current","close","pop","length","slice","replace","currentItem","canGoBack","isOpen","snapToIndex","initialSnapIndex","backHandlerSubscription","addEventListener","remove","AnimatedView","View","enteringAnimation","duration","exitingAnimation","renderBackdrop","props","disappearsOnIndex","style","backgroundColor","appearsOnIndex","pressBehavior","Provider","value","bottomSheetProps","ref","index","snapPoints","enableDynamicSizing","dynamicSizing","enablePanDownToClose","android_keyboardInputMode","enableBlurKeyboardOnGesture","keyboardBlurBehavior","keyboardBehavior","onClose","backdropComponent","topInset","handleIndicatorStyle","styles","sheetContainer","entering","exiting","animatedView","component","create","flex"],"sourceRoot":"..\\..\\..\\src","sources":["contexts/BottomSheetStackProvider.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAsDxC,QAAA,MAAM,GAAG,yBA8ER,CAAC;AAUF,eAAe,GAAG,CAAC"}
|
|
@@ -1,39 +1,17 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
/** The minimum value of the slider. */
|
|
2
|
+
import { ThemeType } from "../../theme";
|
|
3
|
+
interface RangeSliderProps {
|
|
5
4
|
min: number;
|
|
6
|
-
/** The maximum value of the slider. */
|
|
7
5
|
max: number;
|
|
8
|
-
/** The increment value for each step of the slider. */
|
|
9
6
|
step?: number;
|
|
10
|
-
/** The total width of the slider component in pixels. */
|
|
11
7
|
sliderWidth: number;
|
|
12
|
-
/** The initial value for the left (minimum) thumb. */
|
|
13
8
|
initialMinValue: number;
|
|
14
|
-
/** The initial value for the right (maximum) thumb. */
|
|
15
9
|
initialMaxValue: number;
|
|
16
|
-
/** Callback function triggered when the user releases a thumb, returning the new min and max values. */
|
|
17
10
|
onValueChange: (values: {
|
|
18
11
|
min: number;
|
|
19
12
|
max: number;
|
|
20
13
|
}) => void;
|
|
21
|
-
|
|
22
|
-
thumbSize?: number;
|
|
23
|
-
/** The height of the slider rail. */
|
|
24
|
-
railHeight?: number;
|
|
25
|
-
/** Custom style for the main container. */
|
|
26
|
-
containerStyle?: StyleProp<ViewStyle>;
|
|
27
|
-
/** Custom style for the inactive part of the rail. */
|
|
28
|
-
railStyle?: StyleProp<ViewStyle>;
|
|
29
|
-
/** Custom style for the active (selected) part of the rail. */
|
|
30
|
-
activeRailStyle?: StyleProp<ViewStyle>;
|
|
31
|
-
/** Custom style for the thumbs. Overrides the default themed thumb. */
|
|
32
|
-
thumbStyle?: StyleProp<ViewStyle>;
|
|
33
|
-
/** Custom style for the container of the value labels. */
|
|
34
|
-
labelContainerStyle?: StyleProp<ViewStyle>;
|
|
35
|
-
/** Custom style for the text inside the labels. */
|
|
36
|
-
labelTextStyle?: StyleProp<TextStyle>;
|
|
14
|
+
theme?: ThemeType;
|
|
37
15
|
}
|
|
38
16
|
declare const RangeSlider: React.FC<RangeSliderProps>;
|
|
39
17
|
export default RangeSlider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AASrD,OAAO,EAAE,SAAS,EAAY,MAAM,aAAa,CAAC;AAMlD,UAAU,gBAAgB;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAE9D,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgI3C,CAAC;AAwCF,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { SharedValue } from "react-native-reanimated";
|
|
3
|
+
import { ThemeType } from "../../theme";
|
|
4
|
+
interface SliderLabelsProps {
|
|
5
|
+
leftValue: string;
|
|
6
|
+
rightValue: string;
|
|
7
|
+
leftPosition: SharedValue<number>;
|
|
8
|
+
rightPosition: SharedValue<number>;
|
|
9
|
+
sliderWidth: number;
|
|
10
|
+
thumbSize: number;
|
|
11
|
+
theme?: ThemeType;
|
|
12
|
+
}
|
|
13
|
+
export declare const SliderLabels: React.FC<SliderLabelsProps>;
|
|
14
|
+
export {};
|
|
15
|
+
//# sourceMappingURL=SliderLabel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SliderLabel.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeSlider/SliderLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAiB,EACf,WAAW,EAIZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAY,MAAM,aAAa,CAAC;AAIlD,UAAU,iBAAiB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAgDD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+BpD,CAAC"}
|
package/package.json
CHANGED
package/src/app.tsx
CHANGED
|
@@ -10,6 +10,7 @@ import {
|
|
|
10
10
|
HotelForm,
|
|
11
11
|
HotelSummary,
|
|
12
12
|
Filters,
|
|
13
|
+
RangeSlider,
|
|
13
14
|
} from "./components";
|
|
14
15
|
import { lightTheme, RelatedProvider, useTheme } from "./theme";
|
|
15
16
|
import CircularProgressBar from "./components/ProgressBar/CircularProgressBar";
|
|
@@ -119,7 +120,8 @@ const App = () => {
|
|
|
119
120
|
{/* <DateRangePicker onDatesChange={()=>{}} labelContainerStyle={{backgroundColor:"red"}}></DateRangePicker> */}
|
|
120
121
|
{/* <CarRentalForm onSelectionChange={console.log}></CarRentalForm> */}
|
|
121
122
|
{/* <CarouselCardStack data={DUMMY_DATA} /> */}
|
|
122
|
-
<CircularProgressBar variant="steps" totalSteps={4} currentStep={4} size={43} strokeWidth={2} progressColor="#9CA0A3"></CircularProgressBar>
|
|
123
|
+
{/* <CircularProgressBar variant="steps" totalSteps={4} currentStep={4} size={43} strokeWidth={2} progressColor="#9CA0A3"></CircularProgressBar> */}
|
|
124
|
+
<RangeSlider initialMinValue={0} initialMaxValue={100} min={0} max={500} sliderWidth={100} onValueChange={console.log}></RangeSlider>
|
|
123
125
|
{/* <PhoneInput value="" onChangeText={() => {}} inputContainerStyle={{height: 55}}></PhoneInput> */}
|
|
124
126
|
</SafeAreaView>
|
|
125
127
|
</BottomSheetStackProvider>
|
|
@@ -1,62 +1,31 @@
|
|
|
1
1
|
import React, { useCallback, useState } from "react";
|
|
2
|
-
import {
|
|
3
|
-
StyleSheet,
|
|
4
|
-
View,
|
|
5
|
-
Text,
|
|
6
|
-
StyleProp,
|
|
7
|
-
ViewStyle,
|
|
8
|
-
TextStyle,
|
|
9
|
-
} from "react-native";
|
|
2
|
+
import { StyleSheet, View } from "react-native";
|
|
10
3
|
import { Gesture, GestureDetector } from "react-native-gesture-handler";
|
|
11
4
|
import Animated, {
|
|
12
5
|
runOnJS,
|
|
13
6
|
useAnimatedStyle,
|
|
14
7
|
useSharedValue,
|
|
15
8
|
} from "react-native-reanimated";
|
|
9
|
+
import { SliderLabels } from "./SliderLabel";
|
|
16
10
|
import { ThemeType, useTheme } from "../../theme";
|
|
17
11
|
|
|
18
|
-
const
|
|
12
|
+
const THUMB_SIZE = 28;
|
|
13
|
+
const RAIL_HEIGHT = 6;
|
|
14
|
+
const LABEL_HEIGHT = 26;
|
|
19
15
|
|
|
20
|
-
|
|
21
|
-
// --- Core Functionality ---
|
|
22
|
-
/** The minimum value of the slider. */
|
|
16
|
+
interface RangeSliderProps {
|
|
23
17
|
min: number;
|
|
24
|
-
/** The maximum value of the slider. */
|
|
25
18
|
max: number;
|
|
26
|
-
/** The increment value for each step of the slider. */
|
|
27
19
|
step?: number;
|
|
28
|
-
/** The total width of the slider component in pixels. */
|
|
29
20
|
sliderWidth: number;
|
|
30
|
-
/** The initial value for the left (minimum) thumb. */
|
|
31
21
|
initialMinValue: number;
|
|
32
|
-
/** The initial value for the right (maximum) thumb. */
|
|
33
22
|
initialMaxValue: number;
|
|
34
|
-
/** Callback function triggered when the user releases a thumb, returning the new min and max values. */
|
|
35
23
|
onValueChange: (values: { min: number; max: number }) => void;
|
|
36
24
|
|
|
37
|
-
|
|
38
|
-
/** The diameter of the draggable thumb. */
|
|
39
|
-
thumbSize?: number;
|
|
40
|
-
/** The height of the slider rail. */
|
|
41
|
-
railHeight?: number;
|
|
42
|
-
|
|
43
|
-
// --- Styling ---
|
|
44
|
-
/** Custom style for the main container. */
|
|
45
|
-
containerStyle?: StyleProp<ViewStyle>;
|
|
46
|
-
/** Custom style for the inactive part of the rail. */
|
|
47
|
-
railStyle?: StyleProp<ViewStyle>;
|
|
48
|
-
/** Custom style for the active (selected) part of the rail. */
|
|
49
|
-
activeRailStyle?: StyleProp<ViewStyle>;
|
|
50
|
-
/** Custom style for the thumbs. Overrides the default themed thumb. */
|
|
51
|
-
thumbStyle?: StyleProp<ViewStyle>;
|
|
52
|
-
/** Custom style for the container of the value labels. */
|
|
53
|
-
labelContainerStyle?: StyleProp<ViewStyle>;
|
|
54
|
-
/** Custom style for the text inside the labels. */
|
|
55
|
-
labelTextStyle?: StyleProp<TextStyle>;
|
|
25
|
+
theme?: ThemeType
|
|
56
26
|
}
|
|
57
27
|
|
|
58
28
|
const RangeSlider: React.FC<RangeSliderProps> = ({
|
|
59
|
-
// Core props
|
|
60
29
|
min,
|
|
61
30
|
max,
|
|
62
31
|
step = 1,
|
|
@@ -64,27 +33,20 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
|
|
|
64
33
|
initialMinValue,
|
|
65
34
|
initialMaxValue,
|
|
66
35
|
onValueChange,
|
|
67
|
-
|
|
68
|
-
thumbSize = 28,
|
|
69
|
-
railHeight = 6,
|
|
70
|
-
// Styling props
|
|
71
|
-
containerStyle,
|
|
72
|
-
railStyle,
|
|
73
|
-
activeRailStyle,
|
|
74
|
-
thumbStyle,
|
|
75
|
-
labelContainerStyle,
|
|
76
|
-
labelTextStyle,
|
|
36
|
+
theme
|
|
77
37
|
}) => {
|
|
78
|
-
const { theme } = useTheme();
|
|
79
|
-
const styles = getStyles(theme, thumbSize, railHeight);
|
|
38
|
+
const { theme: defaultTheme} = useTheme();
|
|
80
39
|
|
|
81
|
-
|
|
40
|
+
const currTheme = theme || defaultTheme;
|
|
41
|
+
|
|
42
|
+
const styles = getStyles(currTheme);
|
|
43
|
+
|
|
44
|
+
// State for label text values, passed down to the SliderLabels component
|
|
82
45
|
const [leftLabel, setLeftLabel] = useState(initialMinValue.toLocaleString());
|
|
83
46
|
const [rightLabel, setRightLabel] = useState(
|
|
84
47
|
initialMaxValue.toLocaleString()
|
|
85
48
|
);
|
|
86
49
|
|
|
87
|
-
// --- Worklets for calculations ---
|
|
88
50
|
const valueToPosition = useCallback(
|
|
89
51
|
(value: number) => {
|
|
90
52
|
"worklet";
|
|
@@ -102,16 +64,13 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
|
|
|
102
64
|
[min, max, step, sliderWidth]
|
|
103
65
|
);
|
|
104
66
|
|
|
105
|
-
// --- Shared Values for Animation ---
|
|
106
67
|
const leftPosition = useSharedValue(valueToPosition(initialMinValue));
|
|
107
68
|
const rightPosition = useSharedValue(valueToPosition(initialMaxValue));
|
|
108
69
|
const context = useSharedValue({ x: 0 });
|
|
109
70
|
const activeThumb = useSharedValue<"left" | "right" | null>(null);
|
|
110
71
|
|
|
111
|
-
// --- Pan Gesture Handler ---
|
|
112
72
|
const panGesture = Gesture.Pan()
|
|
113
73
|
.onBegin((e) => {
|
|
114
|
-
// Determine which thumb is closer to the touch point
|
|
115
74
|
const distToLeft = Math.abs(e.x - leftPosition.value);
|
|
116
75
|
const distToRight = Math.abs(e.x - rightPosition.value);
|
|
117
76
|
if (distToLeft <= distToRight) {
|
|
@@ -126,15 +85,17 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
|
|
|
126
85
|
if (activeThumb.value === null) return;
|
|
127
86
|
const newPos = context.value.x + e.translationX;
|
|
128
87
|
|
|
129
|
-
// Update the correct thumb's position and label
|
|
130
88
|
if (activeThumb.value === "left") {
|
|
131
|
-
const clampedPos = Math.max(
|
|
89
|
+
const clampedPos = Math.max(
|
|
90
|
+
0,
|
|
91
|
+
Math.min(newPos, rightPosition.value - THUMB_SIZE)
|
|
92
|
+
);
|
|
132
93
|
leftPosition.value = clampedPos;
|
|
133
94
|
runOnJS(setLeftLabel)(positionToValue(clampedPos).toLocaleString());
|
|
134
95
|
} else {
|
|
135
96
|
const clampedPos = Math.min(
|
|
136
97
|
sliderWidth,
|
|
137
|
-
Math.max(newPos, leftPosition.value)
|
|
98
|
+
Math.max(newPos, leftPosition.value + THUMB_SIZE)
|
|
138
99
|
);
|
|
139
100
|
rightPosition.value = clampedPos;
|
|
140
101
|
runOnJS(setRightLabel)(positionToValue(clampedPos).toLocaleString());
|
|
@@ -142,21 +103,18 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
|
|
|
142
103
|
})
|
|
143
104
|
.onEnd(() => {
|
|
144
105
|
if (activeThumb.value === null) return;
|
|
145
|
-
// Finalize values and call the onValueChange callback
|
|
146
106
|
const finalLeftValue = positionToValue(leftPosition.value);
|
|
147
107
|
const finalRightValue = positionToValue(rightPosition.value);
|
|
148
108
|
runOnJS(onValueChange)({ min: finalLeftValue, max: finalRightValue });
|
|
149
109
|
activeThumb.value = null;
|
|
150
110
|
});
|
|
151
111
|
|
|
152
|
-
// --- Animated Styles ---
|
|
153
112
|
const animatedLeftThumbStyle = useAnimatedStyle(() => ({
|
|
154
113
|
transform: [{ translateX: leftPosition.value }],
|
|
155
114
|
}));
|
|
156
115
|
|
|
157
116
|
const animatedRightThumbStyle = useAnimatedStyle(() => ({
|
|
158
|
-
|
|
159
|
-
transform: [{ translateX: rightPosition.value - thumbSize }],
|
|
117
|
+
transform: [{ translateX: rightPosition.value - THUMB_SIZE }],
|
|
160
118
|
}));
|
|
161
119
|
|
|
162
120
|
const animatedActiveRailStyle = useAnimatedStyle(() => ({
|
|
@@ -165,85 +123,70 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
|
|
|
165
123
|
}));
|
|
166
124
|
|
|
167
125
|
return (
|
|
168
|
-
<
|
|
169
|
-
<
|
|
126
|
+
<View style={[styles.container, { width: sliderWidth }]}>
|
|
127
|
+
<SliderLabels
|
|
128
|
+
leftValue={leftLabel}
|
|
129
|
+
rightValue={rightLabel}
|
|
130
|
+
leftPosition={leftPosition}
|
|
131
|
+
rightPosition={rightPosition}
|
|
132
|
+
sliderWidth={sliderWidth}
|
|
133
|
+
thumbSize={THUMB_SIZE}
|
|
134
|
+
/>
|
|
135
|
+
|
|
136
|
+
<GestureDetector gesture={panGesture}>
|
|
170
137
|
<View style={styles.railContainer}>
|
|
171
|
-
<View style={
|
|
138
|
+
<View style={styles.rail} />
|
|
139
|
+
<Animated.View style={[styles.activeRail, animatedActiveRailStyle]} />
|
|
140
|
+
|
|
172
141
|
<Animated.View
|
|
173
|
-
style={[
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
]}
|
|
178
|
-
/>
|
|
179
|
-
</View>
|
|
142
|
+
style={[styles.thumbContainer, animatedLeftThumbStyle]}
|
|
143
|
+
>
|
|
144
|
+
<View style={styles.thumb} />
|
|
145
|
+
</Animated.View>
|
|
180
146
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
<
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
</Animated.View>
|
|
190
|
-
|
|
191
|
-
{/* Right Thumb */}
|
|
192
|
-
<Animated.View style={[styles.thumbContainer, animatedRightThumbStyle]}>
|
|
193
|
-
<View style={[styles.labelContainer, labelContainerStyle]}>
|
|
194
|
-
<Text style={[styles.labelText, labelTextStyle]} numberOfLines={1}>
|
|
195
|
-
{rightLabel}
|
|
196
|
-
</Text>
|
|
197
|
-
</View>
|
|
198
|
-
<View style={[styles.thumb, thumbStyle]} />
|
|
199
|
-
</Animated.View>
|
|
200
|
-
</View>
|
|
201
|
-
</GestureDetector>
|
|
147
|
+
<Animated.View
|
|
148
|
+
style={[styles.thumbContainer, animatedRightThumbStyle]}
|
|
149
|
+
>
|
|
150
|
+
<View style={styles.thumb} />
|
|
151
|
+
</Animated.View>
|
|
152
|
+
</View>
|
|
153
|
+
</GestureDetector>
|
|
154
|
+
</View>
|
|
202
155
|
);
|
|
203
156
|
};
|
|
204
157
|
|
|
205
|
-
const getStyles = (theme: ThemeType
|
|
158
|
+
const getStyles = (theme: ThemeType) =>
|
|
206
159
|
StyleSheet.create({
|
|
207
160
|
container: {
|
|
208
|
-
height: LABEL_HEIGHT +
|
|
161
|
+
height: LABEL_HEIGHT + THUMB_SIZE,
|
|
209
162
|
justifyContent: "center",
|
|
163
|
+
marginTop: LABEL_HEIGHT, // Add margin to prevent label cutoff
|
|
210
164
|
},
|
|
211
165
|
railContainer: {
|
|
212
166
|
justifyContent: "center",
|
|
167
|
+
height: THUMB_SIZE,
|
|
213
168
|
},
|
|
214
169
|
rail: {
|
|
215
|
-
height:
|
|
216
|
-
borderRadius:
|
|
217
|
-
backgroundColor: theme.
|
|
170
|
+
height: RAIL_HEIGHT,
|
|
171
|
+
borderRadius: RAIL_HEIGHT / 2,
|
|
172
|
+
backgroundColor: theme.surface,
|
|
218
173
|
},
|
|
219
174
|
activeRail: {
|
|
220
|
-
height:
|
|
175
|
+
height: RAIL_HEIGHT,
|
|
221
176
|
backgroundColor: theme.primary,
|
|
222
177
|
position: "absolute",
|
|
223
178
|
},
|
|
224
179
|
thumbContainer: {
|
|
225
180
|
position: "absolute",
|
|
181
|
+
width: THUMB_SIZE,
|
|
182
|
+
height: THUMB_SIZE,
|
|
183
|
+
justifyContent: "center",
|
|
226
184
|
alignItems: "center",
|
|
227
|
-
// Center the thumb visually on its value point
|
|
228
|
-
transform: [{ translateX: -thumbSize / 2 }],
|
|
229
|
-
},
|
|
230
|
-
labelContainer: {
|
|
231
|
-
position: "absolute",
|
|
232
|
-
bottom: thumbSize + 4,
|
|
233
|
-
backgroundColor: theme.onBackground,
|
|
234
|
-
paddingHorizontal: 10,
|
|
235
|
-
paddingVertical: 4,
|
|
236
|
-
borderRadius: 4,
|
|
237
|
-
},
|
|
238
|
-
labelText: {
|
|
239
|
-
color: theme.background,
|
|
240
|
-
fontSize: 14,
|
|
241
|
-
fontWeight: "bold",
|
|
242
185
|
},
|
|
243
186
|
thumb: {
|
|
244
|
-
width:
|
|
245
|
-
height:
|
|
246
|
-
borderRadius:
|
|
187
|
+
width: THUMB_SIZE,
|
|
188
|
+
height: THUMB_SIZE,
|
|
189
|
+
borderRadius: THUMB_SIZE / 2,
|
|
247
190
|
backgroundColor: theme.background,
|
|
248
191
|
borderColor: theme.primary,
|
|
249
192
|
borderWidth: 5,
|