Skip to content

Commit 50ab70c

Browse files
phomeaphomea
committed
Start development of FluidSlider and Insetslider
1 parent d0dd881 commit 50ab70c

File tree

3 files changed

+327
-17
lines changed

3 files changed

+327
-17
lines changed

‎src/BasicSlider.js

+29-17
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import {View, PanResponder, Animated, ViewPropTypes} from 'react-native';
33
import PropTypes from 'prop-types';
44
import themes from './themes';
55

6+
7+
68
class BasicSlider extends React.Component {
79
animatedX = new Animated.Value(0);
810

@@ -56,31 +58,40 @@ class BasicSlider extends React.Component {
5658

5759
this.props.onChangeValue(value);
5860
}
61+
panResponderStart(event, gesture) {
62+
this.animatedX.setValue(event.nativeEvent.locationX);
63+
this.setState({
64+
x: event.nativeEvent.locationX,
65+
originalX: event.nativeEvent.locationX,
66+
value: this.calculateValue(event.nativeEvent.locationX),
67+
});
68+
}
69+
panResponderEnd() {
70+
this.shouldRecalculateValue();
71+
}
72+
panResponderMove(event, gesture) {
73+
let x = this.state.originalX + gesture.dx;
74+
x = x > 0 ? x : 0;
75+
x = x <= this.state.maxValuePosition ? x : this.state.maxValuePosition;
76+
77+
this.animatedX.setValue(x);
78+
this.setState({
79+
x,
80+
value: this.calculateValue(x),
81+
});
82+
}
5983
constructor(props) {
6084
super(props);
6185
this.panResponder = PanResponder.create({
6286
onStartShouldSetPanResponder: () => true,
6387
onPanResponderEnd: () => {
64-
this.shouldRecalculateValue();
88+
this.panResponderEnd();
6589
},
6690
onPanResponderStart: (event, gesture) => {
67-
this.animatedX.setValue(event.nativeEvent.locationX);
68-
this.setState({
69-
x: event.nativeEvent.locationX,
70-
originalX: event.nativeEvent.locationX,
71-
value: this.calculateValue(event.nativeEvent.locationX),
72-
});
91+
this.panResponderStart(event, gesture);
7392
},
7493
onPanResponderMove: (event, gesture) => {
75-
let x = this.state.originalX + gesture.dx;
76-
x = x > 0 ? x : 0;
77-
x = x <= this.state.maxValuePosition ? x : this.state.maxValuePosition;
78-
79-
this.animatedX.setValue(x);
80-
this.setState({
81-
x,
82-
value: this.calculateValue(x),
83-
});
94+
this.panResponderMove(event, gesture);
8495
},
8596
});
8697
}
@@ -92,7 +103,8 @@ class BasicSlider extends React.Component {
92103
};
93104
const completeStyle = {
94105
...this.completeStyle,
95-
width: this.state.x,
106+
marginHorizontal: this.handlerStyle.width / 2,
107+
width: this.state.x ,
96108
};
97109

98110
return (

‎src/FluidSlider.js

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import React from 'react';
2+
import {View, Text, Animated, Easing} from 'react-native';
3+
import {colors} from './style';
4+
import BasicSlider from './BasicSlider';
5+
import PropTypes from 'prop-types';
6+
import themes from './themes';
7+
8+
class FluidSlider extends BasicSlider {
9+
handlerY = new Animated.Value(0);
10+
moving = false;
11+
12+
panResponderMove(event, gesture) {
13+
if (!this.moving) {
14+
this.moving = true;
15+
Animated.timing(this.handlerY, {
16+
toValue: -40,
17+
duration: 200,
18+
easing: Easing.elastic(1.2),
19+
useNativeDriver: true,
20+
}).start();
21+
}
22+
super.panResponderMove(event, gesture);
23+
}
24+
panResponderStart(event, gesture) {
25+
super.panResponderStart(event, gesture);
26+
}
27+
panResponderEnd() {
28+
this.moving = false;
29+
this.forceUpdate();
30+
super.panResponderEnd();
31+
Animated.timing(this.handlerY, {
32+
toValue: 0,
33+
duration: 200,
34+
easing: Easing.elastic(1.2),
35+
useNativeDriver: true,
36+
}).start(() => {
37+
this.moving = false;
38+
});
39+
}
40+
41+
updateTheme(themeName) {
42+
this.handlerStyle = {
43+
...themes.big.handlerStyle,
44+
...this.props.handlerStyle,
45+
backgroundColor: '#fff',
46+
elevation: 0,
47+
borderColor: colors.primaryColor,
48+
borderWidth: 3,
49+
};
50+
this.sliderStyle = {
51+
...themes.big.sliderStyle,
52+
...this.props.sliderStyle,
53+
height: 30,
54+
borderRadius: 30,
55+
};
56+
this.completeStyle = {
57+
...themes.big.completeStyle,
58+
...this.props.completeStyle,
59+
height: 30,
60+
borderRadius: 30,
61+
borderTopRightRadius: 0,
62+
borderBottomRightRadius: 0,
63+
};
64+
this.forceUpdate();
65+
}
66+
67+
renderHandler() {
68+
const handlerStyle = {
69+
position: 'absolute',
70+
transform: [
71+
{
72+
translateX: this.animatedX,
73+
},
74+
{
75+
translateY: this.handlerY,
76+
},
77+
{
78+
scale: this.moving ? 1.3 : 1,
79+
},
80+
],
81+
...this.handlerStyle,
82+
};
83+
return (
84+
<Animated.View
85+
pointerEvents="none"
86+
style={{
87+
...handlerStyle,
88+
justifyContent: 'center',
89+
}}>
90+
<Text
91+
style={{
92+
textAlign: 'center',
93+
fontSize: 12,
94+
fontWeight: 'bold',
95+
}}>
96+
{this.moving ? this.state.value : ''}
97+
</Text>
98+
</Animated.View>
99+
);
100+
}
101+
}
102+
103+
FluidSlider.propTypes = {
104+
...BasicSlider.propTypes,
105+
steps: PropTypes.arrayOf(
106+
PropTypes.shape({
107+
value: PropTypes.number.isRequired,
108+
label: PropTypes.string,
109+
}),
110+
),
111+
};
112+
FluidSlider.defaultProps = {
113+
...BasicSlider.defaultProps,
114+
steps: [],
115+
};
116+
117+
export default FluidSlider;

‎src/InsetSlider.js

+181
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
import React from 'react';
2+
import {View, Text, Animated, Easing} from 'react-native';
3+
import {colors} from './style';
4+
import BasicSlider from './BasicSlider';
5+
import PropTypes from 'prop-types';
6+
import themes from './themes';
7+
8+
const pSBC = (p, c0, c1, l) => {
9+
let r,
10+
g,
11+
b,
12+
P,
13+
f,
14+
t,
15+
h,
16+
i = parseInt,
17+
m = Math.round,
18+
a = typeof c1 == 'string';
19+
if (
20+
typeof p != 'number' ||
21+
p < -1 ||
22+
p > 1 ||
23+
typeof c0 != 'string' ||
24+
(c0[0] != 'r' && c0[0] != '#') ||
25+
(c1 && !a)
26+
)
27+
return null;
28+
if (!this.pSBCr)
29+
this.pSBCr = d => {
30+
let n = d.length,
31+
x = {};
32+
if (n > 9) {
33+
([r, g, b, a] = d = d.split(',')), (n = d.length);
34+
if (n < 3 || n > 4) return null;
35+
(x.r = i(r[3] == 'a' ? r.slice(5) : r.slice(4))),
36+
(x.g = i(g)),
37+
(x.b = i(b)),
38+
(x.a = a ? parseFloat(a) : -1);
39+
} else {
40+
if (n == 8 || n == 6 || n < 4) return null;
41+
if (n < 6)
42+
d =
43+
'#' +
44+
d[1] +
45+
d[1] +
46+
d[2] +
47+
d[2] +
48+
d[3] +
49+
d[3] +
50+
(n > 4 ? d[4] + d[4] : '');
51+
d = i(d.slice(1), 16);
52+
if (n == 9 || n == 5)
53+
(x.r = (d >> 24) & 255),
54+
(x.g = (d >> 16) & 255),
55+
(x.b = (d >> 8) & 255),
56+
(x.a = m((d & 255) / 0.255) / 1000);
57+
else
58+
(x.r = d >> 16), (x.g = (d >> 8) & 255), (x.b = d & 255), (x.a = -1);
59+
}
60+
return x;
61+
};
62+
(h = c0.length > 9),
63+
(h = a ? (c1.length > 9 ? true : c1 == 'c' ? !h : false) : h),
64+
(f = pSBCr(c0)),
65+
(P = p < 0),
66+
(t =
67+
c1 && c1 != 'c'
68+
? pSBCr(c1)
69+
: P
70+
? {r: 0, g: 0, b: 0, a: -1}
71+
: {r: 255, g: 255, b: 255, a: -1}),
72+
(p = P ? p * -1 : p),
73+
(P = 1 - p);
74+
if (!f || !t) return null;
75+
if (l)
76+
(r = m(P * f.r + p * t.r)),
77+
(g = m(P * f.g + p * t.g)),
78+
(b = m(P * f.b + p * t.b));
79+
else
80+
(r = m((P * f.r ** 2 + p * t.r ** 2) ** 0.5)),
81+
(g = m((P * f.g ** 2 + p * t.g ** 2) ** 0.5)),
82+
(b = m((P * f.b ** 2 + p * t.b ** 2) ** 0.5));
83+
(a = f.a),
84+
(t = t.a),
85+
(f = a >= 0 || t >= 0),
86+
(a = f ? (a < 0 ? t : t < 0 ? a : a * P + t * p) : 0);
87+
if (h)
88+
return (
89+
'rgb' +
90+
(f ? 'a(' : '(') +
91+
r +
92+
',' +
93+
g +
94+
',' +
95+
b +
96+
(f ? ',' + m(a * 1000) / 1000 : '') +
97+
')'
98+
);
99+
else
100+
return (
101+
'#' +
102+
(4294967296 + r * 16777216 + g * 65536 + b * 256 + (f ? m(a * 255) : 0))
103+
.toString(16)
104+
.slice(1, f ? undefined : -2)
105+
);
106+
};
107+
108+
//backgroundColor : pSBC(this.state.value / 100,this.completeStyle.backgroundColor,"#000000",true)
109+
110+
class InsetSlider extends BasicSlider {
111+
handlerY = new Animated.Value(0);
112+
moving = false;
113+
114+
updateTheme(themeName) {
115+
this.handlerStyle = {
116+
...themes.big.handlerStyle,
117+
...this.props.handlerStyle,
118+
backgroundColor: '#fff',
119+
elevation: 0,
120+
width: 10,
121+
height: 10,
122+
};
123+
this.sliderStyle = {
124+
...themes.big.sliderStyle,
125+
...this.props.sliderStyle,
126+
height: 30,
127+
borderRadius: 30,
128+
padding: 0,
129+
left: 0,
130+
margin: 0,
131+
};
132+
this.completeStyle = {
133+
...themes.big.completeStyle,
134+
...this.props.completeStyle,
135+
height: 30,
136+
borderRadius: 30,
137+
};
138+
this.forceUpdate();
139+
}
140+
141+
renderSlider() {
142+
const sliderStyle = {
143+
...this.sliderStyle,
144+
marginHorizontal: this.handlerStyle.width / 2,
145+
};
146+
const completeStyle = {
147+
...this.completeStyle,
148+
width: this.state.x + this.handlerStyle.width / 2,
149+
};
150+
151+
return (
152+
<View>
153+
<View style={sliderStyle} />
154+
<View
155+
style={{
156+
...completeStyle,
157+
justifyContent: 'center',
158+
alignItems: 'center',
159+
}}>
160+
<Text>{this.state.value} </Text>
161+
</View>
162+
</View>
163+
);
164+
}
165+
}
166+
167+
InsetSlider.propTypes = {
168+
...BasicSlider.propTypes,
169+
steps: PropTypes.arrayOf(
170+
PropTypes.shape({
171+
value: PropTypes.number.isRequired,
172+
label: PropTypes.string,
173+
}),
174+
),
175+
};
176+
InsetSlider.defaultProps = {
177+
...BasicSlider.defaultProps,
178+
steps: [],
179+
};
180+
181+
export default InsetSlider;

0 commit comments

Comments
 (0)