related-ui-components 2.7.1 → 2.7.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/module/components/Input/CountryPickerView.js +11 -5
- package/lib/module/components/Input/CountryPickerView.js.map +1 -1
- package/lib/module/components/RangeSlider/RangeSlider.js +23 -27
- package/lib/module/components/RangeSlider/RangeSlider.js.map +1 -1
- package/lib/module/components/RangeSlider/SliderLabel.js +12 -5
- package/lib/module/components/RangeSlider/SliderLabel.js.map +1 -1
- package/lib/typescript/src/components/Input/CountryPickerView.d.ts.map +1 -1
- package/lib/typescript/src/components/RangeSlider/RangeSlider.d.ts.map +1 -1
- package/lib/typescript/src/components/RangeSlider/SliderLabel.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/Input/CountryPickerView.tsx +7 -3
- package/src/components/RangeSlider/RangeSlider.tsx +37 -39
- package/src/components/RangeSlider/SliderLabel.tsx +21 -9
|
@@ -80,11 +80,17 @@ const CountryPickerView = ({
|
|
|
80
80
|
}), [onSelectCountry, memoizedNameStyle, memoizedCodeStyle]);
|
|
81
81
|
return /*#__PURE__*/_jsxs(View, {
|
|
82
82
|
style: styles.popup,
|
|
83
|
-
children: [/*#__PURE__*/_jsx(
|
|
84
|
-
style:
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
83
|
+
children: [/*#__PURE__*/_jsx(View, {
|
|
84
|
+
style: {
|
|
85
|
+
flexDirection: "row",
|
|
86
|
+
alignItems: "flex-start"
|
|
87
|
+
},
|
|
88
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
89
|
+
style: [styles.popupTitle, {
|
|
90
|
+
color: theme.text
|
|
91
|
+
}, listTitleStyle],
|
|
92
|
+
children: listTitle
|
|
93
|
+
})
|
|
88
94
|
}), /*#__PURE__*/_jsx(CustomInput, {
|
|
89
95
|
placeholder: searchPlaceholder,
|
|
90
96
|
value: searchQuery,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","useEffect","useCallback","useMemo","Text","View","TouchableOpacity","StyleSheet","Keyboard","BottomSheetFlatList","useTheme","iso2ToFlagEmoji","allCountries","CustomInput","jsxs","_jsxs","jsx","_jsx","DEFAULT_COUNTRIES","map","c","code","dialCode","iso2","name","CountryRow","memo","item","onSelectCountry","nameStyle","codeStyle","handlePress","dismiss","style","styles","countryRow","onPress","children","flag","countryText","CountryPickerView","countries","listTitle","listTitleStyle","countryNameStyle","countryCodeStyle","searchPlaceholder","theme","searchQuery","setSearchQuery","filteredCountries","setFilteredCountries","lowercasedQuery","toLowerCase","trim","newFilteredData","filter","country","includes","memoizedNameStyle","countryName","color","text","memoizedCodeStyle","countryCode","helper","renderCountry","popup","popupTitle","placeholder","value","isBottomSheet","onChangeText","containerStyle","searchInputContainer","data","keyExtractor","renderItem","contentContainerStyle","paddingBottom","initialNumToRender","maxToRenderPerBatch","keyboardShouldPersistTaps","ListEmptyComponent","emptyListContainer","emptyListText","create","flex","width","paddingHorizontal","fontSize","fontWeight","marginBottom","paddingTop","
|
|
1
|
+
{"version":3,"names":["React","useState","useEffect","useCallback","useMemo","Text","View","TouchableOpacity","StyleSheet","Keyboard","BottomSheetFlatList","useTheme","iso2ToFlagEmoji","allCountries","CustomInput","jsxs","_jsxs","jsx","_jsx","DEFAULT_COUNTRIES","map","c","code","dialCode","iso2","name","CountryRow","memo","item","onSelectCountry","nameStyle","codeStyle","handlePress","dismiss","style","styles","countryRow","onPress","children","flag","countryText","CountryPickerView","countries","listTitle","listTitleStyle","countryNameStyle","countryCodeStyle","searchPlaceholder","theme","searchQuery","setSearchQuery","filteredCountries","setFilteredCountries","lowercasedQuery","toLowerCase","trim","newFilteredData","filter","country","includes","memoizedNameStyle","countryName","color","text","memoizedCodeStyle","countryCode","helper","renderCountry","popup","flexDirection","alignItems","popupTitle","placeholder","value","isBottomSheet","onChangeText","containerStyle","searchInputContainer","data","keyExtractor","renderItem","contentContainerStyle","paddingBottom","initialNumToRender","maxToRenderPerBatch","keyboardShouldPersistTaps","ListEmptyComponent","emptyListContainer","emptyListText","create","flex","width","paddingHorizontal","fontSize","fontWeight","marginBottom","paddingTop","paddingVertical","marginLeft"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Input/CountryPickerView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,EAAEC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACxE,SACEC,IAAI,EACJC,IAAI,EACJC,gBAAgB,EAChBC,UAAU,EAGVC,QAAQ,QACH,cAAc;AACrB,SAASC,mBAAmB,QAAQ,sBAAsB;AAC1D,SAASC,QAAQ,QAAQ,sBAAa;AACtC,SAASC,eAAe,QAAQ,sBAAmB;AAEnD,SAASC,YAAY,QAAQ,wBAAwB;AACrD,OAAOC,WAAW,MAAM,YAAS,CAAC,CAAC;AAAA,SAAAC,IAAA,IAAAC,KAAA,EAAAC,GAAA,IAAAC,IAAA;AAYnC,MAAMC,iBAA4B,GAAGN,YAAY,CAACO,GAAG,CAAEC,CAAC,KAAM;EAC5DC,IAAI,EAAE,IAAID,CAAC,CAACE,QAAQ,EAAE;EACtBC,IAAI,EAAEH,CAAC,CAACG,IAAI;EACZC,IAAI,EAAEJ,CAAC,CAACI;AACV,CAAC,CAAC,CAAC;AAEH,MAAMC,UAAU,gBAAG1B,KAAK,CAAC2B,IAAI,CAC3B,CAAC;EACCC,IAAI;EACJC,eAAe;EACfC,SAAS;EACTC;AAMF,CAAC,KAAK;EACJ,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACxBvB,QAAQ,CAACwB,OAAO,CAAC,CAAC,CAAC,CAAC;IACpBJ,eAAe,CAACD,IAAI,CAAC;EACvB,CAAC;EAED,oBACEZ,KAAA,CAACT,gBAAgB;IAAC2B,KAAK,EAAEC,MAAM,CAACC,UAAW;IAACC,OAAO,EAAEL,WAAY;IAAAM,QAAA,gBAC/DtB,KAAA,CAACX,IAAI;MAAC6B,KAAK,EAAEC,MAAM,CAACI,IAAK;MAAAD,QAAA,GAAC,GAAC,EAAC1B,eAAe,CAACgB,IAAI,CAACJ,IAAI,CAAC;IAAA,CAAO,CAAC,eAC9DR,KAAA,CAACV,IAAI;MAAC4B,KAAK,EAAEC,MAAM,CAACK,WAAY;MAAAF,QAAA,gBAC9BpB,IAAA,CAACb,IAAI;QAAC6B,KAAK,EAAEJ,SAAU;QAAAQ,QAAA,EAAEV,IAAI,CAACH;MAAI,CAAO,CAAC,eAC1CP,IAAA,CAACb,IAAI;QAAC6B,KAAK,EAAEH,SAAU;QAAAO,QAAA,EAAEV,IAAI,CAACN;MAAI,CAAO,CAAC;IAAA,CACtC,CAAC;EAAA,CACS,CAAC;AAEvB,CACF,CAAC;AAED,MAAMmB,iBAAiB,GAAGA,CAAC;EACzBC,SAAS,GAAGvB,iBAAiB;EAC7BU,eAAe;EACfc,SAAS;EACTC,cAAc;EACdC,gBAAgB;EAChBC,gBAAgB;EAChBC,iBAAiB,GAAG;AACE,CAAC,KAAK;EAC5B,MAAM;IAAEC;EAAM,CAAC,GAAGrC,QAAQ,CAAC,CAAC;EAE5B,MAAM,CAACsC,WAAW,EAAEC,cAAc,CAAC,GAAGjD,QAAQ,CAAC,EAAE,CAAC;EAClD,MAAM,CAACkD,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGnD,QAAQ,CAACyC,SAAS,CAAC;EAErExC,SAAS,CAAC,MAAM;IACd,MAAMmD,eAAe,GAAGJ,WAAW,CAACK,WAAW,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;IACxD,IAAIF,eAAe,KAAK,EAAE,EAAE;MAC1BD,oBAAoB,CAACV,SAAS,CAAC;IACjC,CAAC,MAAM;MACL,MAAMc,eAAe,GAAGd,SAAS,CAACe,MAAM,CACrCC,OAAO,IACNA,OAAO,CAACjC,IAAI,CAAC6B,WAAW,CAAC,CAAC,CAACK,QAAQ,CAACN,eAAe,CAAC,IACpDK,OAAO,CAACpC,IAAI,CAACqC,QAAQ,CAACN,eAAe,CACzC,CAAC;MACDD,oBAAoB,CAACI,eAAe,CAAC;IACvC;EACF,CAAC,EAAE,CAACP,WAAW,EAAEP,SAAS,CAAC,CAAC;EAE5B,MAAMkB,iBAAiB,GAAGxD,OAAO,CAC/B,MAAM,CAAC+B,MAAM,CAAC0B,WAAW,EAAE;IAAEC,KAAK,EAAEd,KAAK,CAACe;EAAK,CAAC,EAAElB,gBAAgB,CAAC,EACnE,CAACG,KAAK,CAACe,IAAI,EAAElB,gBAAgB,CAC/B,CAAC;EAED,MAAMmB,iBAAiB,GAAG5D,OAAO,CAC/B,MAAM,CAAC+B,MAAM,CAAC8B,WAAW,EAAE;IAAEH,KAAK,EAAEd,KAAK,CAACkB;EAAO,CAAC,EAAEpB,gBAAgB,CAAC,EACrE,CAACE,KAAK,CAACkB,MAAM,EAAEpB,gBAAgB,CACjC,CAAC;EAED,MAAMqB,aAAa,GAAGhE,WAAW,CAC/B,CAAC;IAAEyB;EAAwB,CAAC,kBAC1BV,IAAA,CAACQ,UAAU;IACTE,IAAI,EAAEA,IAAK;IACXC,eAAe,EAAEA,eAAgB;IACjCC,SAAS,EAAE8B,iBAAkB;IAC7B7B,SAAS,EAAEiC;EAAkB,CAC9B,CACF,EACD,CAACnC,eAAe,EAAE+B,iBAAiB,EAAEI,iBAAiB,CACxD,CAAC;EAED,oBACEhD,KAAA,CAACV,IAAI;IAAC4B,KAAK,EAAEC,MAAM,CAACiC,KAAM;IAAA9B,QAAA,gBACxBpB,IAAA,CAACZ,IAAI;MAAC4B,KAAK,EAAE;QAAEmC,aAAa,EAAE,KAAK;QAAEC,UAAU,EAAE;MAAa,CAAE;MAAAhC,QAAA,eAC9DpB,IAAA,CAACb,IAAI;QACH6B,KAAK,EAAE,CAACC,MAAM,CAACoC,UAAU,EAAE;UAAET,KAAK,EAAEd,KAAK,CAACe;QAAK,CAAC,EAAEnB,cAAc,CAAE;QAAAN,QAAA,EAEjEK;MAAS,CACN;IAAC,CACH,CAAC,eACPzB,IAAA,CAACJ,WAAW;MACV0D,WAAW,EAAEzB,iBAAkB;MAC/B0B,KAAK,EAAExB,WAAY;MACnByB,aAAa;MACbC,YAAY,EAAEzB,cAAe;MAC7B0B,cAAc,EAAEzC,MAAM,CAAC0C;IAAqB,CAC7C,CAAC,eACF3D,IAAA,CAACR,mBAAmB;MAClBoE,IAAI,EAAE3B,iBAAkB;MACxB4B,YAAY,EAAG1D,CAAC,IAAKA,CAAC,CAACG,IAAK;MAC5BwD,UAAU,EAAEb,aAAc;MAC1Bc,qBAAqB,EAAE;QAAEC,aAAa,EAAE;MAAG,CAAE;MAC7CC,kBAAkB,EAAE,EAAG;MACvBC,mBAAmB,EAAE,EAAG;MACxBC,yBAAyB,EAAC,SAAS;MACnCC,kBAAkB,eAChBpE,IAAA,CAACZ,IAAI;QAAC4B,KAAK,EAAEC,MAAM,CAACoD,kBAAmB;QAAAjD,QAAA,eACrCpB,IAAA,CAACb,IAAI;UAAC6B,KAAK,EAAE,CAACC,MAAM,CAACqD,aAAa,EAAE;YAAE1B,KAAK,EAAEd,KAAK,CAACkB;UAAO,CAAC,CAAE;UAAA5B,QAAA,EAAC;QAE9D,CAAM;MAAC,CACH;IACP,CACF,CAAC;EAAA,CACE,CAAC;AAEX,CAAC;AAED,MAAMH,MAAM,GAAG3B,UAAU,CAACiF,MAAM,CAAC;EAC/BrB,KAAK,EAAE;IACLsB,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,MAAM;IACbC,iBAAiB,EAAE;EACrB,CAAC;EACDrB,UAAU,EAAE;IACVsB,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,KAAK;IACjBC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE;EACd,CAAC;EACDnB,oBAAoB,EAAE;IACpBkB,YAAY,EAAE;EAChB,CAAC;EACD3D,UAAU,EAAE;IACViC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpB2B,eAAe,EAAE;IACjB;EACF,CAAC;EACD1D,IAAI,EAAE;IACJsD,QAAQ,EAAE;EACZ,CAAC;EACDrD,WAAW,EAAE;IACX0D,UAAU,EAAE,EAAE;IACdR,IAAI,EAAE;EACR,CAAC;EACD7B,WAAW,EAAE;IACXgC,QAAQ,EAAE;EACZ,CAAC;EACD5B,WAAW,EAAE;IACX4B,QAAQ,EAAE;EACZ,CAAC;EACDN,kBAAkB,EAAE;IAClBU,eAAe,EAAE,EAAE;IACnB3B,UAAU,EAAE;EACd,CAAC;EACDkB,aAAa,EAAE;IACbK,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF,eAAepD,iBAAiB","ignoreList":[]}
|
|
@@ -30,23 +30,21 @@ const RangeSlider = ({
|
|
|
30
30
|
// State for label text values, passed down to the SliderLabels component
|
|
31
31
|
const [leftLabel, setLeftLabel] = useState(initialMinValue.toLocaleString());
|
|
32
32
|
const [rightLabel, setRightLabel] = useState(initialMaxValue.toLocaleString());
|
|
33
|
-
|
|
34
|
-
// These functions correctly map a value to its thumb's CENTER position for both LTR and RTL.
|
|
35
33
|
const valueToPosition = useCallback(value => {
|
|
36
34
|
"worklet";
|
|
37
35
|
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
// 3. Invert position calculation for RTL
|
|
37
|
+
const percentage = (value - min) / (max - min);
|
|
38
|
+
return isRTL ? (1 - percentage) * sliderWidth : percentage * sliderWidth;
|
|
40
39
|
}, [min, max, sliderWidth, isRTL]);
|
|
41
40
|
const positionToValue = useCallback(position => {
|
|
42
41
|
"worklet";
|
|
43
42
|
|
|
44
|
-
|
|
45
|
-
const
|
|
43
|
+
// 4. Invert value calculation for RTL
|
|
44
|
+
const percentage = position / sliderWidth;
|
|
45
|
+
const rawValue = isRTL ? (1 - percentage) * (max - min) + min : percentage * (max - min) + min;
|
|
46
46
|
return Math.round(rawValue / step) * step;
|
|
47
47
|
}, [min, max, step, sliderWidth, isRTL]);
|
|
48
|
-
|
|
49
|
-
// 'leftPosition' is for the min value, 'rightPosition' is for the max value.
|
|
50
48
|
const leftPosition = useSharedValue(valueToPosition(initialMinValue));
|
|
51
49
|
const rightPosition = useSharedValue(valueToPosition(initialMaxValue));
|
|
52
50
|
const context = useSharedValue({
|
|
@@ -69,17 +67,19 @@ const RangeSlider = ({
|
|
|
69
67
|
}
|
|
70
68
|
}).onUpdate(e => {
|
|
71
69
|
if (activeThumb.value === null) return;
|
|
72
|
-
|
|
73
|
-
// Invert translation for RTL
|
|
74
70
|
const newPos = context.value.x + e.translationX;
|
|
71
|
+
|
|
72
|
+
// 5. Adjust clamping logic for RTL
|
|
75
73
|
if (activeThumb.value === "left") {
|
|
76
|
-
|
|
77
|
-
const
|
|
74
|
+
const lowerBound = isRTL ? rightPosition.value + THUMB_SIZE : 0;
|
|
75
|
+
const upperBound = isRTL ? sliderWidth : rightPosition.value - THUMB_SIZE;
|
|
76
|
+
const clampedPos = Math.max(Math.min(newPos, upperBound), lowerBound);
|
|
78
77
|
leftPosition.value = clampedPos;
|
|
79
78
|
runOnJS(setLeftLabel)(positionToValue(clampedPos).toLocaleString());
|
|
80
79
|
} else {
|
|
81
|
-
|
|
82
|
-
const
|
|
80
|
+
const lowerBound = isRTL ? 0 : leftPosition.value + THUMB_SIZE;
|
|
81
|
+
const upperBound = isRTL ? leftPosition.value - THUMB_SIZE : sliderWidth;
|
|
82
|
+
const clampedPos = Math.max(Math.min(newPos, upperBound), lowerBound);
|
|
83
83
|
rightPosition.value = clampedPos;
|
|
84
84
|
runOnJS(setRightLabel)(positionToValue(clampedPos).toLocaleString());
|
|
85
85
|
}
|
|
@@ -93,35 +93,30 @@ const RangeSlider = ({
|
|
|
93
93
|
});
|
|
94
94
|
activeThumb.value = null;
|
|
95
95
|
});
|
|
96
|
-
|
|
97
|
-
// These styles center the thumb on its position value
|
|
98
96
|
const animatedLeftThumbStyle = useAnimatedStyle(() => ({
|
|
99
97
|
transform: [{
|
|
100
|
-
translateX: leftPosition.value - THUMB_SIZE
|
|
98
|
+
translateX: leftPosition.value - (isRTL ? THUMB_SIZE : 0)
|
|
101
99
|
}]
|
|
102
100
|
}));
|
|
103
101
|
const animatedRightThumbStyle = useAnimatedStyle(() => ({
|
|
104
102
|
transform: [{
|
|
105
|
-
translateX: rightPosition.value -
|
|
103
|
+
translateX: rightPosition.value - (isRTL ? 0 : THUMB_SIZE)
|
|
106
104
|
}]
|
|
107
105
|
}));
|
|
108
|
-
|
|
109
|
-
// This style correctly draws the active rail between the two thumb centers in both LTR and RTL.
|
|
110
106
|
const animatedActiveRailStyle = useAnimatedStyle(() => {
|
|
111
|
-
|
|
112
|
-
const
|
|
107
|
+
// 6. Use Math.min and Math.max to correctly draw the active rail in both LTR and RTL
|
|
108
|
+
const start = Math.min(leftPosition.value, rightPosition.value);
|
|
109
|
+
const end = Math.max(leftPosition.value, rightPosition.value);
|
|
113
110
|
return {
|
|
114
111
|
left: start,
|
|
115
|
-
|
|
112
|
+
right: sliderWidth - end
|
|
116
113
|
};
|
|
117
114
|
});
|
|
118
115
|
return /*#__PURE__*/_jsxs(View, {
|
|
119
116
|
style: [styles.container, {
|
|
120
117
|
width: sliderWidth
|
|
121
118
|
}],
|
|
122
|
-
children: [/*#__PURE__*/_jsx(SliderLabels
|
|
123
|
-
// isRtl={isRTL} // Pass isRTL to SliderLabels so it can adjust accordingly
|
|
124
|
-
, {
|
|
119
|
+
children: [/*#__PURE__*/_jsx(SliderLabels, {
|
|
125
120
|
leftValue: leftLabel,
|
|
126
121
|
rightValue: rightLabel,
|
|
127
122
|
leftPosition: leftPosition,
|
|
@@ -155,7 +150,8 @@ const getStyles = theme => StyleSheet.create({
|
|
|
155
150
|
container: {
|
|
156
151
|
height: LABEL_HEIGHT + THUMB_SIZE,
|
|
157
152
|
justifyContent: "center",
|
|
158
|
-
marginTop: LABEL_HEIGHT
|
|
153
|
+
marginTop: LABEL_HEIGHT,
|
|
154
|
+
direction: "ltr"
|
|
159
155
|
},
|
|
160
156
|
railContainer: {
|
|
161
157
|
justifyContent: "center",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useState","I18nManager","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","isRTL","leftLabel","setLeftLabel","toLocaleString","rightLabel","setRightLabel","valueToPosition","value","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useState","I18nManager","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","isRTL","leftLabel","setLeftLabel","toLocaleString","rightLabel","setRightLabel","valueToPosition","value","percentage","positionToValue","position","rawValue","Math","round","leftPosition","rightPosition","context","x","activeThumb","panGesture","Pan","onBegin","e","distToLeft","abs","distToRight","onUpdate","newPos","translationX","lowerBound","upperBound","clampedPos","onEnd","finalLeftValue","finalRightValue","animatedLeftThumbStyle","transform","translateX","animatedRightThumbStyle","animatedActiveRailStyle","start","end","left","right","style","container","width","children","leftValue","rightValue","thumbSize","gesture","railContainer","rail","activeRail","thumbContainer","thumb","create","height","justifyContent","marginTop","direction","borderRadius","backgroundColor","surface","primary","alignItems","background","borderColor","borderWidth"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RangeSlider/RangeSlider.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,WAAW,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC5D,SAASC,OAAO,EAAEC,eAAe,QAAQ,8BAA8B;AACvE,OAAOC,QAAQ,IACbC,OAAO,EACPC,gBAAgB,EAChBC,cAAc,QACT,yBAAyB;AAChC,SAASC,YAAY,QAAQ,kBAAe;AAC5C,SAAoBC,QAAQ,QAAQ,sBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAElD,MAAMC,UAAU,GAAG,EAAE;AACrB,MAAMC,WAAW,GAAG,CAAC;AACrB,MAAMC,YAAY,GAAG,EAAE;AAcvB,MAAMC,WAAuC,GAAGA,CAAC;EAC/CC,GAAG;EACHC,GAAG;EACHC,IAAI,GAAG,CAAC;EACRC,WAAW;EACXC,eAAe;EACfC,eAAe;EACfC,aAAa;EACbC;AACF,CAAC,KAAK;EACJ,MAAM;IAAEA,KAAK,EAAEC;EAAY,CAAC,GAAGjB,QAAQ,CAAC,CAAC;EAEzC,MAAMkB,SAAS,GAAGF,KAAK,IAAIC,YAAY;EAEvC,MAAME,MAAM,GAAGC,SAAS,CAACF,SAAS,CAAC;EAEnC,MAAMG,KAAK,GAAG/B,WAAW,CAAC+B,KAAK;;EAE/B;EACA,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGlC,QAAQ,CAACwB,eAAe,CAACW,cAAc,CAAC,CAAC,CAAC;EAC5E,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGrC,QAAQ,CAC1CyB,eAAe,CAACU,cAAc,CAAC,CACjC,CAAC;EAED,MAAMG,eAAe,GAAGvC,WAAW,CAChCwC,KAAa,IAAK;IACjB,SAAS;;IACT;IACA,MAAMC,UAAU,GAAG,CAACD,KAAK,GAAGnB,GAAG,KAAKC,GAAG,GAAGD,GAAG,CAAC;IAC9C,OAAOY,KAAK,GACR,CAAC,CAAC,GAAGQ,UAAU,IAAIjB,WAAW,GAC9BiB,UAAU,GAAGjB,WAAW;EAC9B,CAAC,EACD,CAACH,GAAG,EAAEC,GAAG,EAAEE,WAAW,EAAES,KAAK,CAC/B,CAAC;EAED,MAAMS,eAAe,GAAG1C,WAAW,CAChC2C,QAAgB,IAAK;IACpB,SAAS;;IACT;IACA,MAAMF,UAAU,GAAGE,QAAQ,GAAGnB,WAAW;IACzC,MAAMoB,QAAQ,GAAGX,KAAK,GAClB,CAAC,CAAC,GAAGQ,UAAU,KAAKnB,GAAG,GAAGD,GAAG,CAAC,GAAGA,GAAG,GACpCoB,UAAU,IAAInB,GAAG,GAAGD,GAAG,CAAC,GAAGA,GAAG;IAClC,OAAOwB,IAAI,CAACC,KAAK,CAACF,QAAQ,GAAGrB,IAAI,CAAC,GAAGA,IAAI;EAC3C,CAAC,EACD,CAACF,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAEC,WAAW,EAAES,KAAK,CACrC,CAAC;EAED,MAAMc,YAAY,GAAGrC,cAAc,CAAC6B,eAAe,CAACd,eAAe,CAAC,CAAC;EACrE,MAAMuB,aAAa,GAAGtC,cAAc,CAAC6B,eAAe,CAACb,eAAe,CAAC,CAAC;EACtE,MAAMuB,OAAO,GAAGvC,cAAc,CAAC;IAAEwC,CAAC,EAAE;EAAE,CAAC,CAAC;EACxC,MAAMC,WAAW,GAAGzC,cAAc,CAA0B,IAAI,CAAC;EAEjE,MAAM0C,UAAU,GAAG/C,OAAO,CAACgD,GAAG,CAAC,CAAC,CAC7BC,OAAO,CAAEC,CAAC,IAAK;IACd,MAAMC,UAAU,GAAGX,IAAI,CAACY,GAAG,CAACF,CAAC,CAACL,CAAC,GAAGH,YAAY,CAACP,KAAK,CAAC;IACrD,MAAMkB,WAAW,GAAGb,IAAI,CAACY,GAAG,CAACF,CAAC,CAACL,CAAC,GAAGF,aAAa,CAACR,KAAK,CAAC;IACvD,IAAIgB,UAAU,IAAIE,WAAW,EAAE;MAC7BP,WAAW,CAACX,KAAK,GAAG,MAAM;MAC1BS,OAAO,CAACT,KAAK,GAAG;QAAEU,CAAC,EAAEH,YAAY,CAACP;MAAM,CAAC;IAC3C,CAAC,MAAM;MACLW,WAAW,CAACX,KAAK,GAAG,OAAO;MAC3BS,OAAO,CAACT,KAAK,GAAG;QAAEU,CAAC,EAAEF,aAAa,CAACR;MAAM,CAAC;IAC5C;EACF,CAAC,CAAC,CACDmB,QAAQ,CAAEJ,CAAC,IAAK;IACf,IAAIJ,WAAW,CAACX,KAAK,KAAK,IAAI,EAAE;IAChC,MAAMoB,MAAM,GAAGX,OAAO,CAACT,KAAK,CAACU,CAAC,GAAGK,CAAC,CAACM,YAAY;;IAE/C;IACA,IAAIV,WAAW,CAACX,KAAK,KAAK,MAAM,EAAE;MAChC,MAAMsB,UAAU,GAAG7B,KAAK,GAAGe,aAAa,CAACR,KAAK,GAAGvB,UAAU,GAAG,CAAC;MAC/D,MAAM8C,UAAU,GAAG9B,KAAK,GAAGT,WAAW,GAAGwB,aAAa,CAACR,KAAK,GAAGvB,UAAU;MACzE,MAAM+C,UAAU,GAAGnB,IAAI,CAACvB,GAAG,CACzBuB,IAAI,CAACxB,GAAG,CAACuC,MAAM,EAAEG,UAAU,CAAC,EAC5BD,UACF,CAAC;MACDf,YAAY,CAACP,KAAK,GAAGwB,UAAU;MAC/BxD,OAAO,CAAC2B,YAAY,CAAC,CAACO,eAAe,CAACsB,UAAU,CAAC,CAAC5B,cAAc,CAAC,CAAC,CAAC;IACrE,CAAC,MAAM;MACL,MAAM0B,UAAU,GAAG7B,KAAK,GAAG,CAAC,GAAGc,YAAY,CAACP,KAAK,GAAGvB,UAAU;MAC9D,MAAM8C,UAAU,GAAG9B,KAAK,GAAGc,YAAY,CAACP,KAAK,GAAGvB,UAAU,GAAGO,WAAW;MACxE,MAAMwC,UAAU,GAAGnB,IAAI,CAACvB,GAAG,CACzBuB,IAAI,CAACxB,GAAG,CAACuC,MAAM,EAAEG,UAAU,CAAC,EAC5BD,UACF,CAAC;MACDd,aAAa,CAACR,KAAK,GAAGwB,UAAU;MAChCxD,OAAO,CAAC8B,aAAa,CAAC,CAACI,eAAe,CAACsB,UAAU,CAAC,CAAC5B,cAAc,CAAC,CAAC,CAAC;IACtE;EACF,CAAC,CAAC,CACD6B,KAAK,CAAC,MAAM;IACX,IAAId,WAAW,CAACX,KAAK,KAAK,IAAI,EAAE;IAChC,MAAM0B,cAAc,GAAGxB,eAAe,CAACK,YAAY,CAACP,KAAK,CAAC;IAC1D,MAAM2B,eAAe,GAAGzB,eAAe,CAACM,aAAa,CAACR,KAAK,CAAC;IAC5DhC,OAAO,CAACmB,aAAa,CAAC,CAAC;MAAEN,GAAG,EAAE6C,cAAc;MAAE5C,GAAG,EAAE6C;IAAgB,CAAC,CAAC;IACrEhB,WAAW,CAACX,KAAK,GAAG,IAAI;EAC1B,CAAC,CAAC;EAGJ,MAAM4B,sBAAsB,GAAG3D,gBAAgB,CAAC,OAAO;IACrD4D,SAAS,EAAE,CAAC;MAAEC,UAAU,EAAEvB,YAAY,CAACP,KAAK,IAAIP,KAAK,GAAGhB,UAAU,GAAG,CAAC;IAAC,CAAC;EAC1E,CAAC,CAAC,CAAC;EAEH,MAAMsD,uBAAuB,GAAG9D,gBAAgB,CAAC,OAAO;IACtD4D,SAAS,EAAE,CAAC;MAAEC,UAAU,EAAEtB,aAAa,CAACR,KAAK,IAAIP,KAAK,GAAG,CAAC,GAAGhB,UAAU;IAAE,CAAC;EAC5E,CAAC,CAAC,CAAC;EAEH,MAAMuD,uBAAuB,GAAG/D,gBAAgB,CAAC,MAAM;IACrD;IACA,MAAMgE,KAAK,GAAG5B,IAAI,CAACxB,GAAG,CAAC0B,YAAY,CAACP,KAAK,EAAEQ,aAAa,CAACR,KAAK,CAAC;IAC/D,MAAMkC,GAAG,GAAG7B,IAAI,CAACvB,GAAG,CAACyB,YAAY,CAACP,KAAK,EAAEQ,aAAa,CAACR,KAAK,CAAC;IAC7D,OAAO;MACLmC,IAAI,EAAEF,KAAK;MACXG,KAAK,EAAEpD,WAAW,GAAGkD;IACvB,CAAC;EACH,CAAC,CAAC;EAEF,oBACE1D,KAAA,CAACZ,IAAI;IAACyE,KAAK,EAAE,CAAC9C,MAAM,CAAC+C,SAAS,EAAE;MAAEC,KAAK,EAAEvD;IAAY,CAAC,CAAE;IAAAwD,QAAA,gBACtDlE,IAAA,CAACH,YAAY;MACXsE,SAAS,EAAE/C,SAAU;MACrBgD,UAAU,EAAE7C,UAAW;MACvBU,YAAY,EAAEA,YAAa;MAC3BC,aAAa,EAAEA,aAAc;MAC7BxB,WAAW,EAAEA,WAAY;MACzB2D,SAAS,EAAElE;IAAW,CACvB,CAAC,eAEFH,IAAA,CAACR,eAAe;MAAC8E,OAAO,EAAEhC,UAAW;MAAA4B,QAAA,eACnChE,KAAA,CAACZ,IAAI;QAACyE,KAAK,EAAE9C,MAAM,CAACsD,aAAc;QAAAL,QAAA,gBAChClE,IAAA,CAACV,IAAI;UAACyE,KAAK,EAAE9C,MAAM,CAACuD;QAAK,CAAE,CAAC,eAC5BxE,IAAA,CAACP,QAAQ,CAACH,IAAI;UAACyE,KAAK,EAAE,CAAC9C,MAAM,CAACwD,UAAU,EAAEf,uBAAuB;QAAE,CAAE,CAAC,eAEtE1D,IAAA,CAACP,QAAQ,CAACH,IAAI;UACZyE,KAAK,EAAE,CAAC9C,MAAM,CAACyD,cAAc,EAAEpB,sBAAsB,CAAE;UAAAY,QAAA,eAEvDlE,IAAA,CAACV,IAAI;YAACyE,KAAK,EAAE9C,MAAM,CAAC0D;UAAM,CAAE;QAAC,CAChB,CAAC,eAEhB3E,IAAA,CAACP,QAAQ,CAACH,IAAI;UACZyE,KAAK,EAAE,CAAC9C,MAAM,CAACyD,cAAc,EAAEjB,uBAAuB,CAAE;UAAAS,QAAA,eAExDlE,IAAA,CAACV,IAAI;YAACyE,KAAK,EAAE9C,MAAM,CAAC0D;UAAM,CAAE;QAAC,CAChB,CAAC;MAAA,CACZ;IAAC,CACQ,CAAC;EAAA,CACd,CAAC;AAEX,CAAC;AAED,MAAMzD,SAAS,GAAIJ,KAAgB,IACjCzB,UAAU,CAACuF,MAAM,CAAC;EAChBZ,SAAS,EAAE;IACTa,MAAM,EAAExE,YAAY,GAAGF,UAAU;IACjC2E,cAAc,EAAE,QAAQ;IACxBC,SAAS,EAAE1E,YAAY;IACvB2E,SAAS,EAAE;EACb,CAAC;EACDT,aAAa,EAAE;IACbO,cAAc,EAAE,QAAQ;IACxBD,MAAM,EAAE1E;EACV,CAAC;EACDqE,IAAI,EAAE;IACJK,MAAM,EAAEzE,WAAW;IACnB6E,YAAY,EAAE7E,WAAW,GAAG,CAAC;IAC7B8E,eAAe,EAAEpE,KAAK,CAACqE;EACzB,CAAC;EACDV,UAAU,EAAE;IACVI,MAAM,EAAEzE,WAAW;IACnB8E,eAAe,EAAEpE,KAAK,CAACsE,OAAO;IAC9BvD,QAAQ,EAAE;EACZ,CAAC;EACD6C,cAAc,EAAE;IACd7C,QAAQ,EAAE,UAAU;IACpBoC,KAAK,EAAE9D,UAAU;IACjB0E,MAAM,EAAE1E,UAAU;IAClB2E,cAAc,EAAE,QAAQ;IACxBO,UAAU,EAAE;EACd,CAAC;EACDV,KAAK,EAAE;IACLV,KAAK,EAAE9D,UAAU;IACjB0E,MAAM,EAAE1E,UAAU;IAClB8E,YAAY,EAAE9E,UAAU,GAAG,CAAC;IAC5B+E,eAAe,EAAEpE,KAAK,CAACwE,UAAU;IACjCC,WAAW,EAAEzE,KAAK,CAACsE,OAAO;IAC1BI,WAAW,EAAE;EACf;AACF,CAAC,CAAC;AAEJ,eAAelF,WAAW","ignoreList":[]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
|
-
import { StyleSheet, Text, View } from "react-native";
|
|
5
|
-
import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
|
|
4
|
+
import { I18nManager, StyleSheet, Text, View } from "react-native";
|
|
5
|
+
import Animated, { useAnimatedStyle, useDerivedValue, useSharedValue } from "react-native-reanimated";
|
|
6
6
|
import { useTheme } from "../../theme/index.js";
|
|
7
7
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
8
|
const LABEL_HEIGHT = 26;
|
|
@@ -20,7 +20,7 @@ const CenteredLabel = ({
|
|
|
20
20
|
const currTheme = theme || defaultTheme;
|
|
21
21
|
const styles = getStyles(currTheme);
|
|
22
22
|
const animatedLabelStyle = useAnimatedStyle(() => {
|
|
23
|
-
const rawCenter = position.value;
|
|
23
|
+
const rawCenter = position.value + thumbSize / 2;
|
|
24
24
|
const shifted = rawCenter - labelWidth.value / 2;
|
|
25
25
|
const left = Math.min(Math.max(shifted, 0), sliderWidth - labelWidth.value);
|
|
26
26
|
return {
|
|
@@ -52,18 +52,25 @@ export const SliderLabels = ({
|
|
|
52
52
|
} = useTheme();
|
|
53
53
|
const currTheme = theme || defaultTheme;
|
|
54
54
|
const styles = getStyles(currTheme);
|
|
55
|
+
const rightThumbLeftPosition = useDerivedValue(() => {
|
|
56
|
+
return rightPosition.value - thumbSize;
|
|
57
|
+
});
|
|
58
|
+
const leftThumbLeftPosition = useDerivedValue(() => {
|
|
59
|
+
return leftPosition.value - thumbSize;
|
|
60
|
+
});
|
|
61
|
+
const isRTL = I18nManager.isRTL;
|
|
55
62
|
return /*#__PURE__*/_jsxs(View, {
|
|
56
63
|
style: styles.wrapper,
|
|
57
64
|
pointerEvents: "none",
|
|
58
65
|
children: [/*#__PURE__*/_jsx(CenteredLabel, {
|
|
59
66
|
value: leftValue,
|
|
60
67
|
thumbSize: thumbSize,
|
|
61
|
-
position: leftPosition,
|
|
68
|
+
position: isRTL ? leftThumbLeftPosition : leftPosition,
|
|
62
69
|
sliderWidth: sliderWidth
|
|
63
70
|
}), /*#__PURE__*/_jsx(CenteredLabel, {
|
|
64
71
|
value: rightValue,
|
|
65
72
|
thumbSize: thumbSize,
|
|
66
|
-
position: rightPosition,
|
|
73
|
+
position: isRTL ? rightPosition : rightThumbLeftPosition,
|
|
67
74
|
sliderWidth: sliderWidth
|
|
68
75
|
})]
|
|
69
76
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","StyleSheet","Text","View","Animated","useAnimatedStyle","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","wrapper","pointerEvents","create","height","top","alignItems","backgroundColor","surface","paddingHorizontal","paddingVertical","borderRadius","color","onSurface","fontSize","fontFamily"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RangeSlider/SliderLabel.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;
|
|
1
|
+
{"version":3,"names":["React","I18nManager","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","leftThumbLeftPosition","isRTL","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":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CountryPickerView.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/CountryPickerView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,EAKL,SAAS,EACT,SAAS,EAEV,MAAM,cAAc,CAAC;AAItB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAIvC,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;IACtB,eAAe,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAqCD,QAAA,MAAM,iBAAiB,GAAI,mHAQxB,sBAAsB,
|
|
1
|
+
{"version":3,"file":"CountryPickerView.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/CountryPickerView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,EAKL,SAAS,EACT,SAAS,EAEV,MAAM,cAAc,CAAC;AAItB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAIvC,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;IACtB,eAAe,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAqCD,QAAA,MAAM,iBAAiB,GAAI,mHAQxB,sBAAsB,sBA4ExB,CAAC;AA6CF,eAAe,iBAAiB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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,CAqJ3C,CAAC;AAyCF,eAAe,WAAW,CAAC"}
|
|
@@ -1 +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,
|
|
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,CAqCpD,CAAC"}
|
package/package.json
CHANGED
|
@@ -112,9 +112,13 @@ const CountryPickerView = ({
|
|
|
112
112
|
|
|
113
113
|
return (
|
|
114
114
|
<View style={styles.popup}>
|
|
115
|
-
<
|
|
116
|
-
|
|
117
|
-
|
|
115
|
+
<View style={{ flexDirection: "row", alignItems: "flex-start" }}>
|
|
116
|
+
<Text
|
|
117
|
+
style={[styles.popupTitle, { color: theme.text }, listTitleStyle]}
|
|
118
|
+
>
|
|
119
|
+
{listTitle}
|
|
120
|
+
</Text>
|
|
121
|
+
</View>
|
|
118
122
|
<CustomInput
|
|
119
123
|
placeholder={searchPlaceholder}
|
|
120
124
|
value={searchQuery}
|
|
@@ -21,7 +21,8 @@ interface RangeSliderProps {
|
|
|
21
21
|
initialMinValue: number;
|
|
22
22
|
initialMaxValue: number;
|
|
23
23
|
onValueChange: (values: { min: number; max: number }) => void;
|
|
24
|
-
|
|
24
|
+
|
|
25
|
+
theme?: ThemeType
|
|
25
26
|
}
|
|
26
27
|
|
|
27
28
|
const RangeSlider: React.FC<RangeSliderProps> = ({
|
|
@@ -32,10 +33,12 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
|
|
|
32
33
|
initialMinValue,
|
|
33
34
|
initialMaxValue,
|
|
34
35
|
onValueChange,
|
|
35
|
-
theme
|
|
36
|
+
theme
|
|
36
37
|
}) => {
|
|
37
|
-
const { theme: defaultTheme
|
|
38
|
+
const { theme: defaultTheme} = useTheme();
|
|
39
|
+
|
|
38
40
|
const currTheme = theme || defaultTheme;
|
|
41
|
+
|
|
39
42
|
const styles = getStyles(currTheme);
|
|
40
43
|
|
|
41
44
|
const isRTL = I18nManager.isRTL;
|
|
@@ -46,12 +49,14 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
|
|
|
46
49
|
initialMaxValue.toLocaleString()
|
|
47
50
|
);
|
|
48
51
|
|
|
49
|
-
// These functions correctly map a value to its thumb's CENTER position for both LTR and RTL.
|
|
50
52
|
const valueToPosition = useCallback(
|
|
51
53
|
(value: number) => {
|
|
52
54
|
"worklet";
|
|
53
|
-
|
|
54
|
-
|
|
55
|
+
// 3. Invert position calculation for RTL
|
|
56
|
+
const percentage = (value - min) / (max - min);
|
|
57
|
+
return isRTL
|
|
58
|
+
? (1 - percentage) * sliderWidth
|
|
59
|
+
: percentage * sliderWidth;
|
|
55
60
|
},
|
|
56
61
|
[min, max, sliderWidth, isRTL]
|
|
57
62
|
);
|
|
@@ -59,14 +64,16 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
|
|
|
59
64
|
const positionToValue = useCallback(
|
|
60
65
|
(position: number) => {
|
|
61
66
|
"worklet";
|
|
62
|
-
|
|
63
|
-
const
|
|
67
|
+
// 4. Invert value calculation for RTL
|
|
68
|
+
const percentage = position / sliderWidth;
|
|
69
|
+
const rawValue = isRTL
|
|
70
|
+
? (1 - percentage) * (max - min) + min
|
|
71
|
+
: percentage * (max - min) + min;
|
|
64
72
|
return Math.round(rawValue / step) * step;
|
|
65
73
|
},
|
|
66
74
|
[min, max, step, sliderWidth, isRTL]
|
|
67
75
|
);
|
|
68
76
|
|
|
69
|
-
// 'leftPosition' is for the min value, 'rightPosition' is for the max value.
|
|
70
77
|
const leftPosition = useSharedValue(valueToPosition(initialMinValue));
|
|
71
78
|
const rightPosition = useSharedValue(valueToPosition(initialMaxValue));
|
|
72
79
|
const context = useSharedValue({ x: 0 });
|
|
@@ -86,34 +93,25 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
|
|
|
86
93
|
})
|
|
87
94
|
.onUpdate((e) => {
|
|
88
95
|
if (activeThumb.value === null) return;
|
|
89
|
-
|
|
90
|
-
// Invert translation for RTL
|
|
91
96
|
const newPos = context.value.x + e.translationX;
|
|
92
97
|
|
|
98
|
+
// 5. Adjust clamping logic for RTL
|
|
93
99
|
if (activeThumb.value === "left") {
|
|
94
|
-
|
|
95
|
-
const
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
: Math.max(
|
|
101
|
-
THUMB_SIZE / 2,
|
|
102
|
-
Math.min(newPos, rightPosition.value - THUMB_SIZE)
|
|
103
|
-
);
|
|
100
|
+
const lowerBound = isRTL ? rightPosition.value + THUMB_SIZE : 0;
|
|
101
|
+
const upperBound = isRTL ? sliderWidth : rightPosition.value - THUMB_SIZE;
|
|
102
|
+
const clampedPos = Math.max(
|
|
103
|
+
Math.min(newPos, upperBound),
|
|
104
|
+
lowerBound
|
|
105
|
+
);
|
|
104
106
|
leftPosition.value = clampedPos;
|
|
105
107
|
runOnJS(setLeftLabel)(positionToValue(clampedPos).toLocaleString());
|
|
106
108
|
} else {
|
|
107
|
-
|
|
108
|
-
const
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
: Math.min(
|
|
114
|
-
sliderWidth - THUMB_SIZE / 2,
|
|
115
|
-
Math.max(newPos, leftPosition.value + THUMB_SIZE)
|
|
116
|
-
);
|
|
109
|
+
const lowerBound = isRTL ? 0 : leftPosition.value + THUMB_SIZE;
|
|
110
|
+
const upperBound = isRTL ? leftPosition.value - THUMB_SIZE : sliderWidth;
|
|
111
|
+
const clampedPos = Math.max(
|
|
112
|
+
Math.min(newPos, upperBound),
|
|
113
|
+
lowerBound
|
|
114
|
+
);
|
|
117
115
|
rightPosition.value = clampedPos;
|
|
118
116
|
runOnJS(setRightLabel)(positionToValue(clampedPos).toLocaleString());
|
|
119
117
|
}
|
|
@@ -126,29 +124,28 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
|
|
|
126
124
|
activeThumb.value = null;
|
|
127
125
|
});
|
|
128
126
|
|
|
129
|
-
|
|
127
|
+
|
|
130
128
|
const animatedLeftThumbStyle = useAnimatedStyle(() => ({
|
|
131
|
-
transform: [{ translateX: leftPosition.value - THUMB_SIZE
|
|
129
|
+
transform: [{ translateX: leftPosition.value - (isRTL ? THUMB_SIZE : 0)}],
|
|
132
130
|
}));
|
|
133
131
|
|
|
134
132
|
const animatedRightThumbStyle = useAnimatedStyle(() => ({
|
|
135
|
-
transform: [{ translateX: rightPosition.value -
|
|
133
|
+
transform: [{ translateX: rightPosition.value - (isRTL ? 0 : THUMB_SIZE) }],
|
|
136
134
|
}));
|
|
137
135
|
|
|
138
|
-
// This style correctly draws the active rail between the two thumb centers in both LTR and RTL.
|
|
139
136
|
const animatedActiveRailStyle = useAnimatedStyle(() => {
|
|
140
|
-
|
|
141
|
-
const
|
|
137
|
+
// 6. Use Math.min and Math.max to correctly draw the active rail in both LTR and RTL
|
|
138
|
+
const start = Math.min(leftPosition.value, rightPosition.value);
|
|
139
|
+
const end = Math.max(leftPosition.value, rightPosition.value);
|
|
142
140
|
return {
|
|
143
141
|
left: start,
|
|
144
|
-
|
|
142
|
+
right: sliderWidth - end,
|
|
145
143
|
};
|
|
146
144
|
});
|
|
147
145
|
|
|
148
146
|
return (
|
|
149
147
|
<View style={[styles.container, { width: sliderWidth }]}>
|
|
150
148
|
<SliderLabels
|
|
151
|
-
// isRtl={isRTL} // Pass isRTL to SliderLabels so it can adjust accordingly
|
|
152
149
|
leftValue={leftLabel}
|
|
153
150
|
rightValue={rightLabel}
|
|
154
151
|
leftPosition={leftPosition}
|
|
@@ -185,6 +182,7 @@ const getStyles = (theme: ThemeType) =>
|
|
|
185
182
|
height: LABEL_HEIGHT + THUMB_SIZE,
|
|
186
183
|
justifyContent: "center",
|
|
187
184
|
marginTop: LABEL_HEIGHT,
|
|
185
|
+
direction: "ltr"
|
|
188
186
|
},
|
|
189
187
|
railContainer: {
|
|
190
188
|
justifyContent: "center",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { StyleSheet, Text, View } from "react-native";
|
|
2
|
+
import { I18nManager, StyleSheet, Text, View } from "react-native";
|
|
3
3
|
import Animated, {
|
|
4
4
|
SharedValue,
|
|
5
5
|
useAnimatedStyle,
|
|
@@ -17,7 +17,7 @@ interface SliderLabelsProps {
|
|
|
17
17
|
rightPosition: SharedValue<number>;
|
|
18
18
|
sliderWidth: number;
|
|
19
19
|
thumbSize: number;
|
|
20
|
-
theme?: ThemeType
|
|
20
|
+
theme?: ThemeType
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
interface CenteredLabelProps {
|
|
@@ -25,7 +25,8 @@ interface CenteredLabelProps {
|
|
|
25
25
|
position: SharedValue<number>;
|
|
26
26
|
sliderWidth: number;
|
|
27
27
|
thumbSize: number;
|
|
28
|
-
theme?: ThemeType
|
|
28
|
+
theme?: ThemeType
|
|
29
|
+
|
|
29
30
|
}
|
|
30
31
|
|
|
31
32
|
const CenteredLabel: React.FC<CenteredLabelProps> = ({
|
|
@@ -33,15 +34,15 @@ const CenteredLabel: React.FC<CenteredLabelProps> = ({
|
|
|
33
34
|
position,
|
|
34
35
|
sliderWidth,
|
|
35
36
|
thumbSize,
|
|
36
|
-
theme
|
|
37
|
+
theme
|
|
37
38
|
}) => {
|
|
38
39
|
const labelWidth = useSharedValue(0);
|
|
39
|
-
const {
|
|
40
|
+
const {theme: defaultTheme} = useTheme();
|
|
40
41
|
const currTheme = theme || defaultTheme;
|
|
41
42
|
const styles = getStyles(currTheme);
|
|
42
43
|
|
|
43
44
|
const animatedLabelStyle = useAnimatedStyle(() => {
|
|
44
|
-
const rawCenter = position.value;
|
|
45
|
+
const rawCenter = position.value + thumbSize / 2;
|
|
45
46
|
const shifted = rawCenter - labelWidth.value / 2;
|
|
46
47
|
|
|
47
48
|
const left = Math.min(Math.max(shifted, 0), sliderWidth - labelWidth.value);
|
|
@@ -58,7 +59,9 @@ const CenteredLabel: React.FC<CenteredLabelProps> = ({
|
|
|
58
59
|
labelWidth.value = e.nativeEvent.layout.width;
|
|
59
60
|
}}
|
|
60
61
|
>
|
|
61
|
-
<Text style={styles.labelText}>
|
|
62
|
+
<Text style={styles.labelText}>
|
|
63
|
+
{value}
|
|
64
|
+
</Text>
|
|
62
65
|
</Animated.View>
|
|
63
66
|
);
|
|
64
67
|
};
|
|
@@ -75,18 +78,27 @@ export const SliderLabels: React.FC<SliderLabelsProps> = ({
|
|
|
75
78
|
const { theme: defaultTheme } = useTheme();
|
|
76
79
|
const currTheme = theme || defaultTheme;
|
|
77
80
|
const styles = getStyles(currTheme);
|
|
81
|
+
const rightThumbLeftPosition = useDerivedValue(() => {
|
|
82
|
+
return rightPosition.value - thumbSize;
|
|
83
|
+
});
|
|
84
|
+
const leftThumbLeftPosition = useDerivedValue(() => {
|
|
85
|
+
return leftPosition.value - thumbSize;
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
const isRTL = I18nManager.isRTL;
|
|
89
|
+
|
|
78
90
|
return (
|
|
79
91
|
<View style={styles.wrapper} pointerEvents="none">
|
|
80
92
|
<CenteredLabel
|
|
81
93
|
value={leftValue}
|
|
82
94
|
thumbSize={thumbSize}
|
|
83
|
-
position={leftPosition}
|
|
95
|
+
position={isRTL ? leftThumbLeftPosition : leftPosition}
|
|
84
96
|
sliderWidth={sliderWidth}
|
|
85
97
|
/>
|
|
86
98
|
<CenteredLabel
|
|
87
99
|
value={rightValue}
|
|
88
100
|
thumbSize={thumbSize}
|
|
89
|
-
position={rightPosition}
|
|
101
|
+
position={isRTL ? rightPosition : rightThumbLeftPosition}
|
|
90
102
|
sliderWidth={sliderWidth}
|
|
91
103
|
/>
|
|
92
104
|
</View>
|