whey.party
https://tangled.org/jollywhoppers.com/witchsky.app/pulls/15#comment-1009
-1
package.json
-1
package.json
···
97
"@miblanchard/react-native-slider": "^2.6.0",
98
"@mozzius/expo-dynamic-app-icon": "^1.8.0",
99
"@react-native-async-storage/async-storage": "2.2.0",
100
-
"@react-native-community/slider": "^5.1.1",
101
"@react-navigation/bottom-tabs": "^7.3.13",
102
"@react-navigation/drawer": "^7.3.12",
103
"@react-navigation/native": "^7.1.9",
+38
-52
src/components/forms/Slider.tsx
+38
-52
src/components/forms/Slider.tsx
···
1
-
import {useCallback, useEffect, useMemo, useState} from 'react'
2
import {type ViewStyle} from 'react-native'
3
-
import RNSlider from '@react-native-community/slider'
4
-
import {throttle} from 'lodash'
5
6
import {useTheme} from '#/alf'
7
···
11
minimumValue?: number
12
maximumValue?: number
13
step?: number
14
-
sliderStyle?: ViewStyle
15
}
16
17
export function Slider({
···
20
minimumValue = 0,
21
maximumValue = 1,
22
step = 1,
23
-
sliderStyle,
24
}: SliderProps) {
25
const t = useTheme()
26
27
-
const [localValue, setLocalValue] = useState(value)
28
-
29
-
useEffect(() => {
30
-
setLocalValue(value)
31
-
}, [value])
32
-
33
-
const throttledOnValueChange = useMemo(
34
-
() =>
35
-
throttle(
36
-
(val: number) => {
37
-
onValueChange(val)
38
-
},
39
-
50,
40
-
{leading: true, trailing: true},
41
-
),
42
-
[onValueChange],
43
-
)
44
-
45
-
const handleValueChange = useCallback(
46
-
(val: number) => {
47
-
setLocalValue(val)
48
-
throttledOnValueChange(val)
49
-
},
50
-
[throttledOnValueChange],
51
-
)
52
-
53
-
const handleSlidingComplete = useCallback(
54
-
(val: number) => {
55
-
throttledOnValueChange.cancel()
56
-
onValueChange(val)
57
-
},
58
-
[throttledOnValueChange, onValueChange],
59
-
)
60
-
61
return (
62
<RNSlider
63
-
value={localValue}
64
-
onValueChange={handleValueChange}
65
-
onSlidingComplete={handleSlidingComplete}
66
minimumValue={minimumValue}
67
maximumValue={maximumValue}
68
step={step}
69
-
minimumTrackTintColor={t.palette.primary_500}
70
-
maximumTrackTintColor={t.atoms.bg_contrast_50.backgroundColor}
71
-
thumbTintColor={t.atoms.bg_contrast_500.backgroundColor}
72
-
thumbImage={undefined}
73
-
style={[
74
-
{
75
-
height: 40,
76
-
},
77
-
sliderStyle,
78
-
]}
79
/>
80
)
81
}
···
1
import {type ViewStyle} from 'react-native'
2
+
import {Slider as RNSlider} from '@miblanchard/react-native-slider'
3
4
import {useTheme} from '#/alf'
5
···
9
minimumValue?: number
10
maximumValue?: number
11
step?: number
12
+
trackStyle?: ViewStyle
13
+
minimumTrackStyle?: ViewStyle
14
+
thumbStyle?: ViewStyle
15
+
thumbTouchSize?: {width: number; height: number}
16
}
17
18
export function Slider({
···
21
minimumValue = 0,
22
maximumValue = 1,
23
step = 1,
24
+
trackStyle,
25
+
minimumTrackStyle,
26
+
thumbStyle,
27
+
thumbTouchSize = {width: 40, height: 40},
28
}: SliderProps) {
29
const t = useTheme()
30
31
return (
32
<RNSlider
33
+
value={[value]} // always an array
34
+
onValueChange={values => onValueChange(values[0])}
35
minimumValue={minimumValue}
36
maximumValue={maximumValue}
37
step={step}
38
+
trackStyle={{
39
+
height: 4,
40
+
borderRadius: 2,
41
+
backgroundColor: t.atoms.bg_contrast_50.backgroundColor,
42
+
...trackStyle,
43
+
}}
44
+
minimumTrackStyle={{
45
+
height: 4,
46
+
borderRadius: 2,
47
+
backgroundColor: t.palette.primary_500,
48
+
...minimumTrackStyle,
49
+
}}
50
+
thumbStyle={{
51
+
width: 24,
52
+
height: 24,
53
+
borderRadius: 12,
54
+
borderWidth: 1,
55
+
borderColor: t.atoms.border_contrast_low.borderColor,
56
+
backgroundColor: t.atoms.bg.backgroundColor,
57
+
shadowColor: '#000',
58
+
shadowOffset: {width: 0, height: 2},
59
+
shadowOpacity: 0.15,
60
+
shadowRadius: 4,
61
+
elevation: 3,
62
+
...thumbStyle,
63
+
}}
64
+
thumbTouchSize={thumbTouchSize}
65
/>
66
)
67
}
-5
yarn.lock
-5
yarn.lock
···
6185
dependencies:
6186
merge-options "^3.0.4"
6187
6188
-
"@react-native-community/slider@^5.1.1":
6189
-
version "5.1.1"
6190
-
resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-5.1.1.tgz#321c37da565b264fd8f96a4edcb55d3fe78f26aa"
6191
-
integrity sha512-W98If/LnTaziU3/0h5+G1LvJaRhMc6iLQBte6UWa4WBIHDMaDPglNBIFKcCXc9Dxp83W+f+5Wv22Olq9M2HJYA==
6192
-
6193
"@react-native/assets-registry@0.81.5":
6194
version "0.81.5"
6195
resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.81.5.tgz#d22c924fa6f6d4a463c5af34ce91f38756c0fa7d"