Skip to content

Commit 94a5ea0

Browse files
ptomasroosptomasroos
committed
Removed prop-types
1 parent 1892256 commit 94a5ea0

File tree

1 file changed

+111
-116
lines changed

1 file changed

+111
-116
lines changed

‎MultiSlider.js

Lines changed: 111 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
View,
88
TouchableHighlight,
99
Platform,
10-
I18nManager
10+
I18nManager,
1111
} from 'react-native';
1212

1313
import DefaultMarker from './DefaultMarker';
@@ -16,70 +16,21 @@ import { createArray, valueToPosition, positionToValue } from './converters';
1616
const ViewPropTypes = require('react-native').ViewPropTypes || View.propTypes;
1717

1818
export default class MultiSlider extends React.Component {
19-
static propTypes = {
20-
values: PropTypes.arrayOf(PropTypes.number),
21-
22-
onValuesChangeStart: PropTypes.func,
23-
onValuesChange: PropTypes.func,
24-
onValuesChangeFinish: PropTypes.func,
25-
26-
sliderLength: PropTypes.number,
27-
touchDimensions: PropTypes.object,
28-
29-
customMarker: PropTypes.func,
30-
31-
customMarkerLeft: PropTypes.func,
32-
customMarkerRight: PropTypes.func,
33-
isMarkersSeparated: PropTypes.bool,
34-
35-
min: PropTypes.number,
36-
max: PropTypes.number,
37-
step: PropTypes.number,
38-
39-
optionsArray: PropTypes.array,
40-
41-
containerStyle: ViewPropTypes.style,
42-
trackStyle: ViewPropTypes.style,
43-
selectedStyle: ViewPropTypes.style,
44-
unselectedStyle: ViewPropTypes.style,
45-
markerContainerStyle: ViewPropTypes.style,
46-
markerStyle: ViewPropTypes.style,
47-
pressedMarkerStyle: ViewPropTypes.style,
48-
valuePrefix: PropTypes.string,
49-
valueSuffix: PropTypes.string,
50-
enabledOne: PropTypes.bool,
51-
enabledTwo: PropTypes.bool,
52-
onToggleOne: PropTypes.func,
53-
onToggleTwo: PropTypes.func,
54-
allowOverlap: PropTypes.bool,
55-
snapped: PropTypes.bool,
56-
markerOffsetX: PropTypes.number,
57-
markerOffsetY: PropTypes.number,
58-
vertical: PropTypes.bool,
59-
};
60-
6119
static defaultProps = {
6220
values: [0],
63-
onValuesChangeStart: () => {
64-
},
65-
onValuesChange: values => {
66-
},
67-
onValuesChangeFinish: values => {
68-
},
21+
onValuesChangeStart: () => {},
22+
onValuesChange: values => {},
23+
onValuesChangeFinish: values => {},
6924
step: 1,
7025
min: 0,
7126
max: 10,
7227
touchDimensions: {
73-
height: 50,
74-
width: 50,
7528
borderRadius: 15,
7629
slipDisplacement: 200,
7730
},
7831
customMarker: DefaultMarker,
79-
8032
customMarkerLeft: DefaultMarker,
8133
customMarkerRight: DefaultMarker,
82-
8334
markerOffsetX: 0,
8435
markerOffsetY: 0,
8536
sliderLength: 280,
@@ -95,12 +46,14 @@ export default class MultiSlider extends React.Component {
9546
constructor(props) {
9647
super(props);
9748

98-
this.optionsArray = this.props.optionsArray ||
49+
this.optionsArray =
50+
this.props.optionsArray ||
9951
createArray(this.props.min, this.props.max, this.props.step);
10052
this.stepLength = this.props.sliderLength / this.optionsArray.length;
10153

10254
var initialValues = this.props.values.map(value =>
103-
valueToPosition(value, this.optionsArray, this.props.sliderLength));
55+
valueToPosition(value, this.optionsArray, this.props.sliderLength),
56+
);
10457

10558
this.state = {
10659
pressedOne: true,
@@ -147,15 +100,17 @@ export default class MultiSlider extends React.Component {
147100
}
148101

149102
let nextState = {};
150-
if (nextProps.min !== this.props.min ||
103+
if (
104+
nextProps.min !== this.props.min ||
151105
nextProps.max !== this.props.max ||
152106
nextProps.values[0] !== this.state.valueOne ||
153107
nextProps.sliderLength !== this.props.sliderLength ||
154108
nextProps.values[1] !== this.state.valueTwo ||
155109
(nextProps.sliderLength !== this.props.sliderLength &&
156110
nextProps.values[1])
157111
) {
158-
this.optionsArray = this.props.optionsArray ||
112+
this.optionsArray =
113+
this.props.optionsArray ||
159114
createArray(nextProps.min, nextProps.max, nextProps.step);
160115

161116
this.stepLength = this.props.sliderLength / this.optionsArray.length;
@@ -202,24 +157,33 @@ export default class MultiSlider extends React.Component {
202157
}
203158
};
204159

205-
moveOne = (gestureState) => {
160+
moveOne = gestureState => {
206161
if (!this.props.enabledOne) {
207162
return;
208163
}
209164

210-
const accumDistance = this.props.vertical ? -gestureState.dy : gestureState.dx;
211-
const accumDistanceDisplacement = this.props.vertical ? gestureState.dx : gestureState.dy;
165+
const accumDistance = this.props.vertical
166+
? -gestureState.dy
167+
: gestureState.dx;
168+
const accumDistanceDisplacement = this.props.vertical
169+
? gestureState.dx
170+
: gestureState.dy;
212171

213-
const unconfined = I18nManager.isRTL ? this.state.pastOne - accumDistance : accumDistance + this.state.pastOne;
172+
const unconfined = I18nManager.isRTL
173+
? this.state.pastOne - accumDistance
174+
: accumDistance + this.state.pastOne;
214175
var bottom = 0;
215-
var trueTop = this.state.positionTwo - (this.props.allowOverlap ? 0 : this.stepLength);
176+
var trueTop =
177+
this.state.positionTwo - (this.props.allowOverlap ? 0 : this.stepLength);
216178
var top = trueTop === 0 ? 0 : trueTop || this.props.sliderLength;
217-
var confined = unconfined < bottom
218-
? bottom
219-
: unconfined > top ? top : unconfined;
179+
var confined =
180+
unconfined < bottom ? bottom : unconfined > top ? top : unconfined;
220181
var slipDisplacement = this.props.touchDimensions.slipDisplacement;
221182

222-
if (Math.abs(accumDistanceDisplacement) < slipDisplacement || !slipDisplacement) {
183+
if (
184+
Math.abs(accumDistanceDisplacement) < slipDisplacement ||
185+
!slipDisplacement
186+
) {
223187
var value = positionToValue(
224188
confined,
225189
this.optionsArray,
@@ -256,18 +220,27 @@ export default class MultiSlider extends React.Component {
256220
return;
257221
}
258222

259-
const accumDistance = this.props.vertical ? -gestureState.dy : gestureState.dx;
260-
const accumDistanceDisplacement = this.props.vertical ? gestureState.dx : gestureState.dy;
261-
262-
const unconfined = I18nManager.isRTL ? this.state.pastTwo - accumDistance : accumDistance + this.state.pastTwo;
263-
var bottom = this.state.positionOne + (this.props.allowOverlap ? 0 : this.stepLength);
223+
const accumDistance = this.props.vertical
224+
? -gestureState.dy
225+
: gestureState.dx;
226+
const accumDistanceDisplacement = this.props.vertical
227+
? gestureState.dx
228+
: gestureState.dy;
229+
230+
const unconfined = I18nManager.isRTL
231+
? this.state.pastTwo - accumDistance
232+
: accumDistance + this.state.pastTwo;
233+
var bottom =
234+
this.state.positionOne + (this.props.allowOverlap ? 0 : this.stepLength);
264235
var top = this.props.sliderLength;
265-
var confined = unconfined < bottom
266-
? bottom
267-
: unconfined > top ? top : unconfined;
236+
var confined =
237+
unconfined < bottom ? bottom : unconfined > top ? top : unconfined;
268238
var slipDisplacement = this.props.touchDimensions.slipDisplacement;
269239

270-
if (Math.abs(accumDistanceDisplacement) < slipDisplacement || !slipDisplacement) {
240+
if (
241+
Math.abs(accumDistanceDisplacement) < slipDisplacement ||
242+
!slipDisplacement
243+
) {
271244
var value = positionToValue(
272245
confined,
273246
this.optionsArray,
@@ -289,7 +262,10 @@ export default class MultiSlider extends React.Component {
289262
valueTwo: value,
290263
},
291264
() => {
292-
this.props.onValuesChange([this.state.valueOne, this.state.valueTwo]);
265+
this.props.onValuesChange([
266+
this.state.valueOne,
267+
this.state.valueTwo,
268+
]);
293269
},
294270
);
295271
}
@@ -339,8 +315,14 @@ export default class MultiSlider extends React.Component {
339315

340316
render() {
341317
const { positionOne, positionTwo } = this.state;
342-
const { selectedStyle, unselectedStyle, sliderLength, markerOffsetX, markerOffsetY } = this.props;
343-
const twoMarkers = this.props.values.length == 2; // when allowOverlap, positionTwo could be 0, identified as string '0' and throwing 'RawText 0 needs to be wrapped in <Text>' error
318+
const {
319+
selectedStyle,
320+
unselectedStyle,
321+
sliderLength,
322+
markerOffsetX,
323+
markerOffsetY,
324+
} = this.props;
325+
const twoMarkers = this.props.values.length == 2; // when allowOverlap, positionTwo could be 0, identified as string '0' and throwing 'RawText 0 needs to be wrapped in <Text>' error
344326

345327
const trackOneLength = positionOne;
346328
const trackOneStyle = twoMarkers
@@ -368,16 +350,22 @@ export default class MultiSlider extends React.Component {
368350
borderRadius: borderRadius || 0,
369351
};
370352

371-
const markerContainerOne = { top: markerOffsetY - 24, left: trackOneLength + markerOffsetX - 24 }
353+
const markerContainerOne = {
354+
top: markerOffsetY - 24,
355+
left: trackOneLength + markerOffsetX - 24,
356+
};
372357

373-
const markerContainerTwo = { top: markerOffsetY - 24, right: trackThreeLength + markerOffsetX - 24 };
358+
const markerContainerTwo = {
359+
top: markerOffsetY - 24,
360+
right: trackThreeLength + markerOffsetX - 24,
361+
};
374362

375363
const containerStyle = [styles.container, this.props.containerStyle];
376364

377365
if (this.props.vertical) {
378366
containerStyle.push({
379367
transform: [{ rotate: '-90deg' }],
380-
})
368+
});
381369
}
382370

383371
return (
@@ -399,15 +387,16 @@ export default class MultiSlider extends React.Component {
399387
{ width: trackTwoLength },
400388
]}
401389
/>
402-
{twoMarkers &&
390+
{twoMarkers && (
403391
<View
404392
style={[
405393
styles.track,
406394
this.props.trackStyle,
407395
trackThreeStyle,
408396
{ width: trackThreeLength },
409397
]}
410-
/>}
398+
/>
399+
)}
411400
<View
412401
style={[
413402
styles.markerContainer,
@@ -418,10 +407,10 @@ export default class MultiSlider extends React.Component {
418407
>
419408
<View
420409
style={[styles.touch, touchStyle]}
421-
ref={component => this._markerOne = component}
410+
ref={component => (this._markerOne = component)}
422411
{...this._panResponderOne.panHandlers}
423412
>
424-
{isMarkersSeparated === false ?
413+
{isMarkersSeparated === false ? (
425414
<Marker
426415
enabled={this.props.enabledOne}
427416
pressed={this.state.onePressed}
@@ -431,7 +420,7 @@ export default class MultiSlider extends React.Component {
431420
valuePrefix={this.props.valuePrefix}
432421
valueSuffix={this.props.valueSuffix}
433422
/>
434-
:
423+
) : (
435424
<MarkerLeft
436425
enabled={this.props.enabledOne}
437426
pressed={this.state.onePressed}
@@ -441,41 +430,47 @@ export default class MultiSlider extends React.Component {
441430
valuePrefix={this.props.valuePrefix}
442431
valueSuffix={this.props.valueSuffix}
443432
/>
444-
}
445-
433+
)}
446434
</View>
447435
</View>
448436
{twoMarkers &&
449-
positionOne !== this.props.sliderLength &&
450-
<View style={[styles.markerContainer, markerContainerTwo, this.props.markerContainerStyle]}>
437+
positionOne !== this.props.sliderLength && (
451438
<View
452-
style={[styles.touch, touchStyle]}
453-
ref={component => this._markerTwo = component}
454-
{...this._panResponderTwo.panHandlers}
439+
style={[
440+
styles.markerContainer,
441+
markerContainerTwo,
442+
this.props.markerContainerStyle,
443+
]}
455444
>
456-
{isMarkersSeparated === false ?
457-
<Marker
458-
pressed={this.state.twoPressed}
459-
markerStyle={this.props.markerStyle}
460-
pressedMarkerStyle={this.props.pressedMarkerStyle}
461-
currentValue={this.state.valueTwo}
462-
enabled={this.props.enabledTwo}
463-
valuePrefix={this.props.valuePrefix}
464-
valueSuffix={this.props.valueSuffix}
465-
/>
466-
:
467-
<MarkerRight
468-
pressed={this.state.twoPressed}
469-
markerStyle={this.props.markerStyle}
470-
pressedMarkerStyle={this.props.pressedMarkerStyle}
471-
currentValue={this.state.valueTwo}
472-
enabled={this.props.enabledTwo}
473-
valuePrefix={this.props.valuePrefix}
474-
valueSuffix={this.props.valueSuffix}
475-
/>
476-
}
445+
<View
446+
style={[styles.touch, touchStyle]}
447+
ref={component => (this._markerTwo = component)}
448+
{...this._panResponderTwo.panHandlers}
449+
>
450+
{isMarkersSeparated === false ? (
451+
<Marker
452+
pressed={this.state.twoPressed}
453+
markerStyle={this.props.markerStyle}
454+
pressedMarkerStyle={this.props.pressedMarkerStyle}
455+
currentValue={this.state.valueTwo}
456+
enabled={this.props.enabledTwo}
457+
valuePrefix={this.props.valuePrefix}
458+
valueSuffix={this.props.valueSuffix}
459+
/>
460+
) : (
461+
<MarkerRight
462+
pressed={this.state.twoPressed}
463+
markerStyle={this.props.markerStyle}
464+
pressedMarkerStyle={this.props.pressedMarkerStyle}
465+
currentValue={this.state.valueTwo}
466+
enabled={this.props.enabledTwo}
467+
valuePrefix={this.props.valuePrefix}
468+
valueSuffix={this.props.valueSuffix}
469+
/>
470+
)}
471+
</View>
477472
</View>
478-
</View>}
473+
)}
479474
</View>
480475
</View>
481476
);
@@ -486,7 +481,7 @@ const styles = StyleSheet.create({
486481
container: {
487482
position: 'relative',
488483
height: 50,
489-
justifyContent: 'center'
484+
justifyContent: 'center',
490485
},
491486
fullTrack: {
492487
flexDirection: 'row',

0 commit comments

Comments
 (0)