@momo-kits/slider 0.0.74-beta → 0.73.1-beta.2
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/DefaultLabel.js +63 -66
- package/DefaultLabel.web.js +62 -65
- package/DefaultMarker.js +58 -63
- package/DefaultMarker.web.js +66 -63
- package/Slider.js +298 -258
- package/Slider.web.js +719 -699
- package/converters.js +56 -55
- package/package.json +14 -14
- package/publish.sh +2 -2
package/Slider.js
CHANGED
|
@@ -1,35 +1,29 @@
|
|
|
1
|
-
import React, { Component } from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
1
|
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
} from '
|
|
2
|
+
Colors,
|
|
3
|
+
LocalizedStrings,
|
|
4
|
+
Shadow,
|
|
5
|
+
Spacing,
|
|
6
|
+
Text,
|
|
7
|
+
} from '@momo-kits/core-v2';
|
|
10
8
|
import { get } from 'lodash';
|
|
11
|
-
import
|
|
9
|
+
import PropTypes from 'prop-types';
|
|
10
|
+
import React, { Component } from 'react';
|
|
11
|
+
import { I18nManager, PanResponder, StyleSheet, View } from 'react-native';
|
|
12
|
+
import { createArray, positionToValue, valueToPosition } from './converters';
|
|
12
13
|
import DefaultMarker from './DefaultMarker';
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
|
|
15
|
+
const LANGUAGE = LocalizedStrings.getLanguage();
|
|
15
16
|
|
|
16
17
|
export default class Slider extends Component {
|
|
17
18
|
constructor(props) {
|
|
18
19
|
super(props);
|
|
19
|
-
const {
|
|
20
|
-
|
|
21
|
-
min,
|
|
22
|
-
max,
|
|
23
|
-
step,
|
|
24
|
-
length,
|
|
25
|
-
values
|
|
26
|
-
} = this.props;
|
|
27
|
-
this.optionsArray = optionsArray
|
|
28
|
-
|| createArray(min, max, step);
|
|
20
|
+
const { optionsArray, min, max, step, length, values } = this.props;
|
|
21
|
+
this.optionsArray = optionsArray || createArray(min, max, step);
|
|
29
22
|
const defaultSliderLength = length;
|
|
30
23
|
this.stepLength = defaultSliderLength / this.optionsArray.length;
|
|
31
|
-
const initialValues = values.map((value) =>
|
|
32
|
-
|
|
24
|
+
const initialValues = values.map((value) =>
|
|
25
|
+
valueToPosition(value, this.optionsArray, defaultSliderLength),
|
|
26
|
+
);
|
|
33
27
|
this.state = {
|
|
34
28
|
valueOne: values[0],
|
|
35
29
|
valueTwo: values[1],
|
|
@@ -37,24 +31,26 @@ export default class Slider extends Component {
|
|
|
37
31
|
pastTwo: initialValues[1],
|
|
38
32
|
positionOne: initialValues[0],
|
|
39
33
|
positionTwo: initialValues[1],
|
|
40
|
-
sliderLength: defaultSliderLength
|
|
34
|
+
sliderLength: defaultSliderLength,
|
|
41
35
|
};
|
|
42
36
|
this.subscribePanResponder();
|
|
43
37
|
}
|
|
44
38
|
|
|
45
39
|
subscribePanResponder = () => {
|
|
46
|
-
const customPanResponder = (start, move, end) =>
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
40
|
+
const customPanResponder = (start, move, end) =>
|
|
41
|
+
PanResponder.create({
|
|
42
|
+
onStartShouldSetPanResponder: () => true,
|
|
43
|
+
onStartShouldSetPanResponderCapture: () => true,
|
|
44
|
+
onMoveShouldSetPanResponder: () => true,
|
|
45
|
+
onMoveShouldSetPanResponderCapture: () => true,
|
|
46
|
+
onPanResponderGrant: () => start(),
|
|
47
|
+
onPanResponderMove: (evt, gestureState) => move(gestureState),
|
|
48
|
+
onPanResponderTerminationRequest: () => false,
|
|
49
|
+
onPanResponderRelease: (evt, gestureState) => end(gestureState),
|
|
50
|
+
onPanResponderTerminate: (evt, gestureState) =>
|
|
51
|
+
end(gestureState),
|
|
52
|
+
onShouldBlockNativeResponder: () => true,
|
|
53
|
+
});
|
|
58
54
|
|
|
59
55
|
this._panResponderBetween = customPanResponder(
|
|
60
56
|
(gestureState) => {
|
|
@@ -108,53 +104,44 @@ export default class Slider extends Component {
|
|
|
108
104
|
moveOne = (gestureState) => {
|
|
109
105
|
const {
|
|
110
106
|
enabledOne,
|
|
111
|
-
vertical,
|
|
112
107
|
allowOverlap,
|
|
113
108
|
minMarkerOverlapDistance,
|
|
114
|
-
// sliderLength,
|
|
115
109
|
touchDimensions,
|
|
116
110
|
snapped,
|
|
117
111
|
onChange,
|
|
118
112
|
onMarkersPosition,
|
|
119
113
|
allowRange = [],
|
|
120
114
|
min,
|
|
121
|
-
max
|
|
115
|
+
max,
|
|
122
116
|
} = this.props;
|
|
123
|
-
const {
|
|
124
|
-
|
|
125
|
-
positionTwo,
|
|
126
|
-
valueOne,
|
|
127
|
-
valueTwo,
|
|
128
|
-
sliderLength
|
|
129
|
-
} = this.state;
|
|
117
|
+
const { pastOne, positionTwo, valueOne, valueTwo, sliderLength } =
|
|
118
|
+
this.state;
|
|
130
119
|
if (!enabledOne) {
|
|
131
120
|
return;
|
|
132
121
|
}
|
|
133
122
|
|
|
134
|
-
const accumDistance =
|
|
135
|
-
|
|
136
|
-
: gestureState.dx;
|
|
137
|
-
const accumDistanceDisplacement = vertical
|
|
138
|
-
? gestureState.dx
|
|
139
|
-
: gestureState.dy;
|
|
123
|
+
const accumDistance = gestureState.dx;
|
|
124
|
+
const accumDistanceDisplacement = gestureState.dy;
|
|
140
125
|
|
|
141
126
|
const unconfined = I18nManager.isRTL
|
|
142
127
|
? pastOne - accumDistance
|
|
143
128
|
: accumDistance + pastOne;
|
|
144
129
|
const bottom = 0;
|
|
145
|
-
const trueTop =
|
|
146
|
-
-
|
|
130
|
+
const trueTop =
|
|
131
|
+
positionTwo -
|
|
132
|
+
(allowOverlap
|
|
147
133
|
? 0
|
|
148
134
|
: minMarkerOverlapDistance > 0
|
|
149
|
-
|
|
150
|
-
|
|
135
|
+
? minMarkerOverlapDistance
|
|
136
|
+
: this.stepLength);
|
|
151
137
|
const top = trueTop === 0 ? 0 : trueTop || sliderLength;
|
|
152
|
-
const confined =
|
|
138
|
+
const confined =
|
|
139
|
+
unconfined < bottom ? bottom : unconfined > top ? top : unconfined;
|
|
153
140
|
const { slipDisplacement } = touchDimensions;
|
|
154
141
|
|
|
155
142
|
if (
|
|
156
|
-
Math.abs(accumDistanceDisplacement) < slipDisplacement
|
|
157
|
-
|
|
143
|
+
Math.abs(accumDistanceDisplacement) < slipDisplacement ||
|
|
144
|
+
!slipDisplacement
|
|
158
145
|
) {
|
|
159
146
|
const value = positionToValue(
|
|
160
147
|
confined,
|
|
@@ -162,8 +149,12 @@ export default class Slider extends Component {
|
|
|
162
149
|
sliderLength,
|
|
163
150
|
);
|
|
164
151
|
|
|
165
|
-
if (allowRange?.length > 0 && value < get(allowRange, '[0]', min))
|
|
166
|
-
|
|
152
|
+
if (allowRange?.length > 0 && value < get(allowRange, '[0]', min)) {
|
|
153
|
+
return;
|
|
154
|
+
}
|
|
155
|
+
if (allowRange?.length > 1 && value > get(allowRange, '[1]', max)) {
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
167
158
|
|
|
168
159
|
const snappedValue = valueToPosition(
|
|
169
160
|
value,
|
|
@@ -183,7 +174,7 @@ export default class Slider extends Component {
|
|
|
183
174
|
() => {
|
|
184
175
|
const {
|
|
185
176
|
valueOne: newValueOne,
|
|
186
|
-
positionOne: newPositionOne
|
|
177
|
+
positionOne: newPositionOne,
|
|
187
178
|
} = this.state;
|
|
188
179
|
const change = [newValueOne];
|
|
189
180
|
if (valueTwo) {
|
|
@@ -191,10 +182,7 @@ export default class Slider extends Component {
|
|
|
191
182
|
}
|
|
192
183
|
onChange(change);
|
|
193
184
|
|
|
194
|
-
onMarkersPosition([
|
|
195
|
-
newPositionOne,
|
|
196
|
-
positionTwo,
|
|
197
|
-
]);
|
|
185
|
+
onMarkersPosition([newPositionOne, positionTwo]);
|
|
198
186
|
},
|
|
199
187
|
);
|
|
200
188
|
}
|
|
@@ -204,49 +192,41 @@ export default class Slider extends Component {
|
|
|
204
192
|
moveTwo = (gestureState) => {
|
|
205
193
|
const {
|
|
206
194
|
enabledTwo,
|
|
207
|
-
vertical,
|
|
208
195
|
allowOverlap,
|
|
209
196
|
minMarkerOverlapDistance,
|
|
210
197
|
// sliderLength,
|
|
211
198
|
touchDimensions,
|
|
212
199
|
snapped,
|
|
213
200
|
onChange,
|
|
214
|
-
onMarkersPosition
|
|
201
|
+
onMarkersPosition,
|
|
215
202
|
} = this.props;
|
|
216
|
-
const {
|
|
217
|
-
|
|
218
|
-
positionOne,
|
|
219
|
-
sliderLength,
|
|
220
|
-
valueTwo,
|
|
221
|
-
valueOne,
|
|
222
|
-
} = this.state;
|
|
203
|
+
const { pastTwo, positionOne, sliderLength, valueTwo, valueOne } =
|
|
204
|
+
this.state;
|
|
223
205
|
if (!enabledTwo) {
|
|
224
206
|
return;
|
|
225
207
|
}
|
|
226
208
|
|
|
227
|
-
const accumDistance =
|
|
228
|
-
|
|
229
|
-
: gestureState.dx;
|
|
230
|
-
const accumDistanceDisplacement = vertical
|
|
231
|
-
? gestureState.dx
|
|
232
|
-
: gestureState.dy;
|
|
209
|
+
const accumDistance = gestureState.dx;
|
|
210
|
+
const accumDistanceDisplacement = gestureState.dy;
|
|
233
211
|
|
|
234
212
|
const unconfined = I18nManager.isRTL
|
|
235
213
|
? pastTwo - accumDistance
|
|
236
214
|
: accumDistance + pastTwo;
|
|
237
|
-
const bottom =
|
|
238
|
-
+
|
|
215
|
+
const bottom =
|
|
216
|
+
positionOne +
|
|
217
|
+
(allowOverlap
|
|
239
218
|
? 0
|
|
240
219
|
: minMarkerOverlapDistance > 0
|
|
241
|
-
|
|
242
|
-
|
|
220
|
+
? minMarkerOverlapDistance
|
|
221
|
+
: this.stepLength);
|
|
243
222
|
const top = sliderLength;
|
|
244
|
-
const confined =
|
|
223
|
+
const confined =
|
|
224
|
+
unconfined < bottom ? bottom : unconfined > top ? top : unconfined;
|
|
245
225
|
const { slipDisplacement } = touchDimensions;
|
|
246
226
|
|
|
247
227
|
if (
|
|
248
|
-
Math.abs(accumDistanceDisplacement) < slipDisplacement
|
|
249
|
-
|
|
228
|
+
Math.abs(accumDistanceDisplacement) < slipDisplacement ||
|
|
229
|
+
!slipDisplacement
|
|
250
230
|
) {
|
|
251
231
|
const value = positionToValue(
|
|
252
232
|
confined,
|
|
@@ -270,20 +250,13 @@ export default class Slider extends Component {
|
|
|
270
250
|
valueTwo: value,
|
|
271
251
|
},
|
|
272
252
|
() => {
|
|
273
|
-
console.log(valueOne);
|
|
274
253
|
const {
|
|
275
254
|
valueTwo: newValueTwo,
|
|
276
|
-
positionTwo: newPositionTwo
|
|
255
|
+
positionTwo: newPositionTwo,
|
|
277
256
|
} = this.state;
|
|
278
|
-
onChange([
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
]);
|
|
282
|
-
|
|
283
|
-
onMarkersPosition([
|
|
284
|
-
positionOne,
|
|
285
|
-
newPositionTwo,
|
|
286
|
-
]);
|
|
257
|
+
onChange([valueOne, newValueTwo]);
|
|
258
|
+
|
|
259
|
+
onMarkersPosition([positionOne, newPositionTwo]);
|
|
287
260
|
},
|
|
288
261
|
);
|
|
289
262
|
}
|
|
@@ -292,9 +265,7 @@ export default class Slider extends Component {
|
|
|
292
265
|
|
|
293
266
|
endOne = (gestureState) => {
|
|
294
267
|
const { onToggleOne, onChangeFinish } = this.props;
|
|
295
|
-
const {
|
|
296
|
-
positionOne, onePressed, valueOne, valueTwo
|
|
297
|
-
} = this.state;
|
|
268
|
+
const { positionOne, onePressed, valueOne, valueTwo } = this.state;
|
|
298
269
|
if (gestureState.moveX === 0 && onToggleOne) {
|
|
299
270
|
onToggleOne();
|
|
300
271
|
return;
|
|
@@ -317,9 +288,7 @@ export default class Slider extends Component {
|
|
|
317
288
|
|
|
318
289
|
endTwo = (gestureState) => {
|
|
319
290
|
const { onToggleTwo, onChangeFinish } = this.props;
|
|
320
|
-
const {
|
|
321
|
-
twoPressed, positionTwo, valueOne, valueTwo
|
|
322
|
-
} = this.state;
|
|
291
|
+
const { twoPressed, positionTwo, valueOne, valueTwo } = this.state;
|
|
323
292
|
if (gestureState.moveX === 0 && onToggleTwo) {
|
|
324
293
|
onToggleTwo();
|
|
325
294
|
return;
|
|
@@ -331,35 +300,36 @@ export default class Slider extends Component {
|
|
|
331
300
|
pastTwo: positionTwo,
|
|
332
301
|
},
|
|
333
302
|
() => {
|
|
334
|
-
onChangeFinish([
|
|
335
|
-
valueOne,
|
|
336
|
-
valueTwo,
|
|
337
|
-
]);
|
|
303
|
+
onChangeFinish([valueOne, valueTwo]);
|
|
338
304
|
},
|
|
339
305
|
);
|
|
340
306
|
};
|
|
341
307
|
|
|
342
308
|
componentDidUpdate(prevProps, prevState) {
|
|
343
|
-
const {
|
|
344
|
-
|
|
345
|
-
positionTwo: prevPositionTwo,
|
|
346
|
-
} = prevState;
|
|
309
|
+
const { positionOne: prevPositionOne, positionTwo: prevPositionTwo } =
|
|
310
|
+
prevState;
|
|
347
311
|
|
|
348
312
|
const {
|
|
349
|
-
positionOne,
|
|
313
|
+
positionOne,
|
|
314
|
+
positionTwo,
|
|
315
|
+
onePressed,
|
|
316
|
+
twoPressed,
|
|
317
|
+
sliderLength,
|
|
350
318
|
} = this.state;
|
|
351
|
-
const {
|
|
352
|
-
|
|
353
|
-
} = this.props;
|
|
319
|
+
const { onMarkersPosition, min, max, step, values, optionsArray } =
|
|
320
|
+
this.props;
|
|
354
321
|
|
|
355
322
|
if (
|
|
356
|
-
typeof positionOne === 'undefined'
|
|
357
|
-
|
|
323
|
+
typeof positionOne === 'undefined' &&
|
|
324
|
+
typeof positionTwo !== 'undefined'
|
|
358
325
|
) {
|
|
359
326
|
return;
|
|
360
327
|
}
|
|
361
328
|
|
|
362
|
-
if (
|
|
329
|
+
if (
|
|
330
|
+
positionOne !== prevPositionOne ||
|
|
331
|
+
positionTwo !== prevPositionTwo
|
|
332
|
+
) {
|
|
363
333
|
onMarkersPosition([positionOne, positionTwo]);
|
|
364
334
|
}
|
|
365
335
|
|
|
@@ -369,17 +339,15 @@ export default class Slider extends Component {
|
|
|
369
339
|
|
|
370
340
|
const nextState = {};
|
|
371
341
|
if (
|
|
372
|
-
prevProps.min !== min
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
&& prevProps.values[1])
|
|
342
|
+
prevProps.min !== min ||
|
|
343
|
+
prevProps.max !== max ||
|
|
344
|
+
prevProps.step !== step ||
|
|
345
|
+
prevProps.values[0] !== values[0] ||
|
|
346
|
+
prevState.sliderLength !== sliderLength ||
|
|
347
|
+
prevProps.values[1] !== values[1] ||
|
|
348
|
+
(prevState.sliderLength !== sliderLength && prevProps.values[1])
|
|
380
349
|
) {
|
|
381
|
-
this.optionsArray = optionsArray
|
|
382
|
-
|| createArray(min, max, step);
|
|
350
|
+
this.optionsArray = optionsArray || createArray(min, max, step);
|
|
383
351
|
|
|
384
352
|
this.stepLength = sliderLength / this.optionsArray.length;
|
|
385
353
|
|
|
@@ -409,92 +377,110 @@ export default class Slider extends Component {
|
|
|
409
377
|
}
|
|
410
378
|
|
|
411
379
|
onContentLayout(e) {
|
|
412
|
-
const {
|
|
380
|
+
const { length } = this.props;
|
|
413
381
|
if (!length) {
|
|
414
|
-
const layoutLength =
|
|
415
|
-
? e.nativeEvent.layout.height
|
|
416
|
-
: e.nativeEvent.layout.width;
|
|
382
|
+
const layoutLength = e.nativeEvent.layout.width;
|
|
417
383
|
this.setState({
|
|
418
|
-
sliderLength: layoutLength
|
|
384
|
+
sliderLength: layoutLength,
|
|
419
385
|
});
|
|
420
386
|
}
|
|
421
387
|
}
|
|
422
388
|
|
|
389
|
+
_nFormatter(num) {
|
|
390
|
+
let markerLabel = num;
|
|
391
|
+
let digits = 0;
|
|
392
|
+
|
|
393
|
+
if (markerLabel >= 1000000) {
|
|
394
|
+
digits = 1;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
const lookup = [
|
|
398
|
+
{
|
|
399
|
+
value: 1000000,
|
|
400
|
+
symbol: LANGUAGE == 'en' ? 'M' : 'Tr',
|
|
401
|
+
},
|
|
402
|
+
{
|
|
403
|
+
value: 1000,
|
|
404
|
+
symbol: 'K',
|
|
405
|
+
},
|
|
406
|
+
{
|
|
407
|
+
value: 1,
|
|
408
|
+
symbol: '',
|
|
409
|
+
},
|
|
410
|
+
];
|
|
411
|
+
|
|
412
|
+
let item = lookup.slice().find((item) => {
|
|
413
|
+
return markerLabel >= item.value;
|
|
414
|
+
});
|
|
415
|
+
|
|
416
|
+
if (item) {
|
|
417
|
+
markerLabel =
|
|
418
|
+
(markerLabel / item.value).toFixed(digits) + item.symbol;
|
|
419
|
+
} else {
|
|
420
|
+
markerLabel = '0';
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
return markerLabel;
|
|
424
|
+
}
|
|
425
|
+
|
|
423
426
|
render() {
|
|
424
427
|
const {
|
|
425
|
-
positionOne,
|
|
428
|
+
positionOne,
|
|
429
|
+
positionTwo,
|
|
430
|
+
onePressed,
|
|
431
|
+
valueOne,
|
|
432
|
+
twoPressed,
|
|
433
|
+
valueTwo,
|
|
434
|
+
sliderLength,
|
|
426
435
|
} = this.state;
|
|
427
436
|
const {
|
|
428
437
|
style,
|
|
429
|
-
selectedStyle,
|
|
430
|
-
unselectedStyle,
|
|
431
|
-
// sliderLength,
|
|
432
438
|
markerOffsetX,
|
|
433
439
|
markerOffsetY,
|
|
434
440
|
values,
|
|
435
|
-
customMarker,
|
|
436
|
-
customMarkerLeft,
|
|
437
|
-
customMarkerRight,
|
|
438
441
|
isMarkersSeparated = false,
|
|
439
|
-
customLabel,
|
|
440
442
|
touchDimensions,
|
|
441
443
|
containerStyle,
|
|
442
|
-
vertical,
|
|
443
|
-
trackStyle,
|
|
444
444
|
markerContainerStyle,
|
|
445
445
|
enabledOne,
|
|
446
446
|
enabledTwo,
|
|
447
|
-
markerStyle,
|
|
448
|
-
pressedMarkerStyle,
|
|
449
|
-
disabledMarkerStyle,
|
|
450
447
|
valuePrefix,
|
|
451
448
|
valueSuffix,
|
|
452
|
-
enableLabel,
|
|
453
|
-
|
|
449
|
+
enableLabel = true,
|
|
450
|
+
activeColor,
|
|
451
|
+
inactiveColor,
|
|
454
452
|
} = this.props;
|
|
455
453
|
const twoMarkers = values.length === 2; // when allowOverlap, positionTwo could be 0, identified as string '0' and throwing 'RawText 0 needs to be wrapped in <Text>' error
|
|
456
454
|
|
|
457
455
|
const trackOneLength = positionOne;
|
|
458
|
-
const trackOneStyle =
|
|
459
|
-
? unselectedStyle
|
|
460
|
-
: selectedStyle || styles.selectedTrack;
|
|
456
|
+
const trackOneStyle = styles.selectedTrack;
|
|
461
457
|
const trackThreeLength = twoMarkers ? sliderLength - positionTwo : 0;
|
|
462
|
-
const trackThreeStyle = unselectedStyle;
|
|
463
458
|
const trackTwoLength = sliderLength - trackOneLength - trackThreeLength;
|
|
464
|
-
const trackTwoStyle =
|
|
465
|
-
? selectedStyle || styles.selectedTrack
|
|
466
|
-
: unselectedStyle;
|
|
467
|
-
const Marker = customMarker;
|
|
468
|
-
|
|
469
|
-
const MarkerLeft = customMarkerLeft;
|
|
470
|
-
const MarkerRight = customMarkerRight;
|
|
459
|
+
const trackTwoStyle = styles.selectedTrack;
|
|
471
460
|
|
|
472
|
-
const
|
|
461
|
+
const Marker = DefaultMarker;
|
|
473
462
|
|
|
474
|
-
const
|
|
475
|
-
|
|
476
|
-
} = touchDimensions;
|
|
463
|
+
const MarkerLeft = DefaultMarker;
|
|
464
|
+
const MarkerRight = DefaultMarker;
|
|
465
|
+
const { borderRadius } = touchDimensions;
|
|
477
466
|
const touchStyle = {
|
|
478
467
|
borderRadius: borderRadius || 0,
|
|
479
468
|
};
|
|
480
469
|
|
|
481
470
|
const markerContainerOne = {
|
|
482
471
|
top: markerOffsetY - 24,
|
|
483
|
-
left: trackOneLength + markerOffsetX -
|
|
472
|
+
left: trackOneLength + markerOffsetX - 32,
|
|
484
473
|
};
|
|
485
474
|
|
|
486
475
|
const markerContainerTwo = {
|
|
487
476
|
top: markerOffsetY - 24,
|
|
488
|
-
right: trackThreeLength - markerOffsetX -
|
|
477
|
+
right: trackThreeLength - markerOffsetX - 32,
|
|
489
478
|
};
|
|
490
479
|
|
|
491
480
|
const newContainerStyle = [styles.container, containerStyle];
|
|
492
481
|
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
transform: [{ rotate: '-90deg' }],
|
|
496
|
-
});
|
|
497
|
-
}
|
|
482
|
+
const markerLabel1 = this._nFormatter(valueOne);
|
|
483
|
+
const markerLabel2 = this._nFormatter(valueTwo);
|
|
498
484
|
|
|
499
485
|
const body = (
|
|
500
486
|
<View style={{ alignItems: 'center' }}>
|
|
@@ -502,27 +488,40 @@ export default class Slider extends Component {
|
|
|
502
488
|
<View
|
|
503
489
|
style={[
|
|
504
490
|
styles.track,
|
|
505
|
-
trackStyle,
|
|
506
491
|
trackOneStyle,
|
|
507
|
-
{
|
|
492
|
+
{
|
|
493
|
+
width: trackOneLength,
|
|
494
|
+
backgroundColor: twoMarkers
|
|
495
|
+
? inactiveColor
|
|
496
|
+
: activeColor,
|
|
497
|
+
},
|
|
498
|
+
!enabledOne && !twoMarkers && styles.disabledTrack,
|
|
508
499
|
]}
|
|
509
500
|
/>
|
|
510
501
|
<View
|
|
511
502
|
style={[
|
|
512
503
|
styles.track,
|
|
513
|
-
trackStyle,
|
|
514
504
|
trackTwoStyle,
|
|
515
|
-
{
|
|
505
|
+
{
|
|
506
|
+
width: trackTwoLength,
|
|
507
|
+
backgroundColor: twoMarkers
|
|
508
|
+
? activeColor
|
|
509
|
+
: inactiveColor,
|
|
510
|
+
},
|
|
511
|
+
!enabledOne && !enabledTwo && styles.disabledTrack,
|
|
516
512
|
]}
|
|
517
|
-
{...(twoMarkers
|
|
513
|
+
{...(twoMarkers
|
|
514
|
+
? this._panResponderBetween.panHandlers
|
|
515
|
+
: {})}
|
|
518
516
|
/>
|
|
519
517
|
{twoMarkers && (
|
|
520
518
|
<View
|
|
521
519
|
style={[
|
|
522
520
|
styles.track,
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
521
|
+
{
|
|
522
|
+
width: trackThreeLength,
|
|
523
|
+
backgroundColor: inactiveColor,
|
|
524
|
+
},
|
|
526
525
|
]}
|
|
527
526
|
/>
|
|
528
527
|
)}
|
|
@@ -531,38 +530,62 @@ export default class Slider extends Component {
|
|
|
531
530
|
styles.markerContainer,
|
|
532
531
|
markerContainerOne,
|
|
533
532
|
markerContainerStyle,
|
|
534
|
-
positionOne > sliderLength / 2 &&
|
|
535
|
-
|
|
536
|
-
|
|
533
|
+
positionOne > sliderLength / 2 &&
|
|
534
|
+
styles.topMarkerContainer,
|
|
535
|
+
]}>
|
|
537
536
|
<View
|
|
538
537
|
style={[styles.touch, touchStyle]}
|
|
539
538
|
ref={(component) => (this._markerOne = component)}
|
|
540
|
-
{...this._panResponderOne.panHandlers}
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
539
|
+
{...this._panResponderOne.panHandlers}>
|
|
540
|
+
{isMarkersSeparated === false ? (
|
|
541
|
+
<>
|
|
542
|
+
{onePressed &&
|
|
543
|
+
enableLabel &&
|
|
544
|
+
enabledOne && (
|
|
545
|
+
<View
|
|
546
|
+
style={[
|
|
547
|
+
styles.valueContainer,
|
|
548
|
+
Shadow.Light,
|
|
549
|
+
]}>
|
|
550
|
+
<Text.Label3>
|
|
551
|
+
{markerLabel1}
|
|
552
|
+
</Text.Label3>
|
|
553
|
+
</View>
|
|
554
|
+
)}
|
|
544
555
|
<Marker
|
|
556
|
+
activeColor={activeColor}
|
|
545
557
|
enabled={enabledOne}
|
|
546
558
|
pressed={onePressed}
|
|
547
|
-
markerStyle={markerStyle}
|
|
548
|
-
pressedMarkerStyle={pressedMarkerStyle}
|
|
549
|
-
disabledMarkerStyle={disabledMarkerStyle}
|
|
550
559
|
currentValue={valueOne}
|
|
551
560
|
valuePrefix={valuePrefix}
|
|
552
561
|
valueSuffix={valueSuffix}
|
|
553
562
|
/>
|
|
554
|
-
|
|
563
|
+
</>
|
|
564
|
+
) : (
|
|
565
|
+
<>
|
|
566
|
+
{onePressed &&
|
|
567
|
+
enableLabel &&
|
|
568
|
+
enabledOne && (
|
|
569
|
+
<View
|
|
570
|
+
style={[
|
|
571
|
+
styles.valueContainer,
|
|
572
|
+
Shadow.Light,
|
|
573
|
+
]}>
|
|
574
|
+
<Text.Label3>
|
|
575
|
+
{markerLabel1}
|
|
576
|
+
</Text.Label3>
|
|
577
|
+
</View>
|
|
578
|
+
)}
|
|
555
579
|
<MarkerLeft
|
|
580
|
+
activeColor={activeColor}
|
|
556
581
|
enabled={enabledOne}
|
|
557
582
|
pressed={onePressed}
|
|
558
|
-
markerStyle={markerStyle}
|
|
559
|
-
pressedMarkerStyle={pressedMarkerStyle}
|
|
560
|
-
disabledMarkerStyle={disabledMarkerStyle}
|
|
561
583
|
currentValue={valueOne}
|
|
562
584
|
valuePrefix={valuePrefix}
|
|
563
585
|
valueSuffix={valueSuffix}
|
|
564
586
|
/>
|
|
565
|
-
|
|
587
|
+
</>
|
|
588
|
+
)}
|
|
566
589
|
</View>
|
|
567
590
|
</View>
|
|
568
591
|
{twoMarkers && positionOne !== sliderLength && (
|
|
@@ -571,37 +594,62 @@ export default class Slider extends Component {
|
|
|
571
594
|
styles.markerContainer,
|
|
572
595
|
markerContainerTwo,
|
|
573
596
|
markerContainerStyle,
|
|
574
|
-
]}
|
|
575
|
-
>
|
|
597
|
+
]}>
|
|
576
598
|
<View
|
|
577
599
|
style={[styles.touch, touchStyle]}
|
|
578
|
-
ref={(component) =>
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
{
|
|
582
|
-
|
|
600
|
+
ref={(component) =>
|
|
601
|
+
(this._markerTwo = component)
|
|
602
|
+
}
|
|
603
|
+
{...this._panResponderTwo.panHandlers}>
|
|
604
|
+
{isMarkersSeparated === false ? (
|
|
605
|
+
<>
|
|
606
|
+
{twoPressed &&
|
|
607
|
+
enableLabel &&
|
|
608
|
+
enabledTwo && (
|
|
609
|
+
<View
|
|
610
|
+
style={[
|
|
611
|
+
styles.valueContainer,
|
|
612
|
+
Shadow.Light,
|
|
613
|
+
]}>
|
|
614
|
+
<Text.Label3>
|
|
615
|
+
{markerLabel2}
|
|
616
|
+
</Text.Label3>
|
|
617
|
+
</View>
|
|
618
|
+
)}
|
|
583
619
|
<Marker
|
|
620
|
+
activeColor={activeColor}
|
|
584
621
|
pressed={twoPressed}
|
|
585
|
-
markerStyle={markerStyle}
|
|
586
|
-
pressedMarkerStyle={pressedMarkerStyle}
|
|
587
|
-
disabledMarkerStyle={disabledMarkerStyle}
|
|
588
622
|
currentValue={valueTwo}
|
|
589
623
|
enabled={enabledTwo}
|
|
590
624
|
valuePrefix={valuePrefix}
|
|
591
625
|
valueSuffix={valueSuffix}
|
|
592
626
|
/>
|
|
593
|
-
|
|
627
|
+
</>
|
|
628
|
+
) : (
|
|
629
|
+
<>
|
|
630
|
+
{twoPressed &&
|
|
631
|
+
enableLabel &&
|
|
632
|
+
enabledTwo && (
|
|
633
|
+
<View
|
|
634
|
+
style={[
|
|
635
|
+
styles.valueContainer,
|
|
636
|
+
Shadow.Light,
|
|
637
|
+
]}>
|
|
638
|
+
<Text.Label3>
|
|
639
|
+
{markerLabel2}
|
|
640
|
+
</Text.Label3>
|
|
641
|
+
</View>
|
|
642
|
+
)}
|
|
594
643
|
<MarkerRight
|
|
644
|
+
activeColor={activeColor}
|
|
595
645
|
pressed={twoPressed}
|
|
596
|
-
markerStyle={markerStyle}
|
|
597
|
-
pressedMarkerStyle={pressedMarkerStyle}
|
|
598
|
-
disabledMarkerStyle={disabledMarkerStyle}
|
|
599
646
|
currentValue={valueTwo}
|
|
600
647
|
enabled={enabledTwo}
|
|
601
648
|
valuePrefix={valuePrefix}
|
|
602
649
|
valueSuffix={valueSuffix}
|
|
603
650
|
/>
|
|
604
|
-
|
|
651
|
+
</>
|
|
652
|
+
)}
|
|
605
653
|
</View>
|
|
606
654
|
</View>
|
|
607
655
|
)}
|
|
@@ -611,27 +659,7 @@ export default class Slider extends Component {
|
|
|
611
659
|
|
|
612
660
|
return (
|
|
613
661
|
<View style={style} onLayout={(e) => this.onContentLayout(e)}>
|
|
614
|
-
{
|
|
615
|
-
<Label
|
|
616
|
-
oneMarkerValue={valueOne}
|
|
617
|
-
twoMarkerValue={valueTwo}
|
|
618
|
-
oneMarkerLeftPosition={positionOne}
|
|
619
|
-
twoMarkerLeftPosition={positionTwo}
|
|
620
|
-
oneMarkerPressed={onePressed}
|
|
621
|
-
twoMarkerPressed={twoPressed}
|
|
622
|
-
/>
|
|
623
|
-
)}
|
|
624
|
-
{imageBackgroundSource && (
|
|
625
|
-
<ImageBackground
|
|
626
|
-
source={imageBackgroundSource}
|
|
627
|
-
style={[styles.full, newContainerStyle]}
|
|
628
|
-
>
|
|
629
|
-
{body}
|
|
630
|
-
</ImageBackground>
|
|
631
|
-
)}
|
|
632
|
-
{!imageBackgroundSource && (
|
|
633
|
-
<View style={newContainerStyle}>{body}</View>
|
|
634
|
-
)}
|
|
662
|
+
<View style={newContainerStyle}>{body}</View>
|
|
635
663
|
</View>
|
|
636
664
|
);
|
|
637
665
|
}
|
|
@@ -640,23 +668,24 @@ export default class Slider extends Component {
|
|
|
640
668
|
const styles = StyleSheet.create({
|
|
641
669
|
container: {
|
|
642
670
|
position: 'relative',
|
|
643
|
-
|
|
644
|
-
|
|
671
|
+
justifyContent: 'center',
|
|
672
|
+
minHeight: 48,
|
|
645
673
|
},
|
|
646
674
|
fullTrack: {
|
|
647
675
|
flexDirection: 'row',
|
|
648
676
|
},
|
|
649
677
|
track: {
|
|
650
678
|
height: 4,
|
|
651
|
-
backgroundColor:
|
|
679
|
+
backgroundColor: Colors.background_default,
|
|
680
|
+
borderRadius: 2,
|
|
652
681
|
},
|
|
653
682
|
selectedTrack: {
|
|
654
|
-
backgroundColor: Colors.
|
|
683
|
+
backgroundColor: Colors.pink_03,
|
|
655
684
|
},
|
|
656
685
|
markerContainer: {
|
|
657
686
|
position: 'absolute',
|
|
658
|
-
width:
|
|
659
|
-
height:
|
|
687
|
+
width: 64,
|
|
688
|
+
height: 52,
|
|
660
689
|
backgroundColor: 'transparent',
|
|
661
690
|
justifyContent: 'center',
|
|
662
691
|
alignItems: 'center',
|
|
@@ -670,15 +699,32 @@ const styles = StyleSheet.create({
|
|
|
670
699
|
alignItems: 'center',
|
|
671
700
|
alignSelf: 'stretch',
|
|
672
701
|
},
|
|
673
|
-
full: {
|
|
702
|
+
full: {
|
|
703
|
+
width: '100%',
|
|
704
|
+
height: '100%',
|
|
705
|
+
},
|
|
706
|
+
valueContainer: {
|
|
707
|
+
height: 24,
|
|
708
|
+
borderRadius: Spacing.XS,
|
|
709
|
+
backgroundColor: Colors.white,
|
|
710
|
+
justifyContent: 'center',
|
|
711
|
+
alignItems: 'center',
|
|
712
|
+
position: 'absolute',
|
|
713
|
+
top: -28,
|
|
714
|
+
paddingVertical: Spacing.XS,
|
|
715
|
+
paddingHorizontal: Spacing.S,
|
|
716
|
+
},
|
|
717
|
+
disabledTrack: {
|
|
718
|
+
backgroundColor: Colors.black_08,
|
|
719
|
+
},
|
|
674
720
|
});
|
|
675
721
|
|
|
676
722
|
Slider.defaultProps = {
|
|
677
723
|
values: [0],
|
|
678
|
-
onChangeStart: () => {
|
|
679
|
-
onChange: () => {
|
|
680
|
-
onChangeFinish: () => {
|
|
681
|
-
onMarkersPosition: () => {
|
|
724
|
+
onChangeStart: () => {},
|
|
725
|
+
onChange: () => {},
|
|
726
|
+
onChangeFinish: () => {},
|
|
727
|
+
onMarkersPosition: () => {},
|
|
682
728
|
step: 1,
|
|
683
729
|
min: 0,
|
|
684
730
|
max: 10,
|
|
@@ -688,10 +734,6 @@ Slider.defaultProps = {
|
|
|
688
734
|
borderRadius: 15,
|
|
689
735
|
slipDisplacement: 200,
|
|
690
736
|
},
|
|
691
|
-
customMarker: DefaultMarker,
|
|
692
|
-
customMarkerLeft: DefaultMarker,
|
|
693
|
-
customMarkerRight: DefaultMarker,
|
|
694
|
-
customLabel: DefaultLabel,
|
|
695
737
|
markerOffsetX: 0,
|
|
696
738
|
markerOffsetY: 0,
|
|
697
739
|
onToggleOne: undefined,
|
|
@@ -700,27 +742,26 @@ Slider.defaultProps = {
|
|
|
700
742
|
enabledTwo: true,
|
|
701
743
|
allowOverlap: false,
|
|
702
744
|
snapped: false,
|
|
703
|
-
vertical: false,
|
|
704
745
|
minMarkerOverlapDistance: 0,
|
|
705
|
-
length: 280
|
|
746
|
+
length: 280,
|
|
747
|
+
activeColor: Colors.pink_03,
|
|
748
|
+
inactiveColor: Colors.black_03,
|
|
706
749
|
};
|
|
707
750
|
|
|
708
751
|
Slider.propTypes = {
|
|
752
|
+
activeColor: PropTypes.string,
|
|
753
|
+
inactiveColor: PropTypes.string,
|
|
709
754
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
710
|
-
selectedStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
711
|
-
unselectedStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
712
755
|
markerOffsetX: PropTypes.number,
|
|
713
756
|
markerOffsetY: PropTypes.number,
|
|
714
757
|
values: PropTypes.arrayOf(PropTypes.number),
|
|
715
|
-
customMarker: PropTypes.func,
|
|
716
|
-
customMarkerLeft: PropTypes.func,
|
|
717
|
-
customMarkerRight: PropTypes.func,
|
|
718
758
|
isMarkersSeparated: PropTypes.bool,
|
|
719
759
|
touchDimensions: PropTypes.object,
|
|
720
760
|
containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
761
|
+
markerContainerStyle: PropTypes.oneOfType([
|
|
762
|
+
PropTypes.object,
|
|
763
|
+
PropTypes.array,
|
|
764
|
+
]),
|
|
724
765
|
enabledOne: PropTypes.bool,
|
|
725
766
|
enabledTwo: PropTypes.bool,
|
|
726
767
|
onChangeStart: PropTypes.func,
|
|
@@ -730,12 +771,11 @@ Slider.propTypes = {
|
|
|
730
771
|
step: PropTypes.number,
|
|
731
772
|
min: PropTypes.number,
|
|
732
773
|
max: PropTypes.number,
|
|
733
|
-
customLabel: PropTypes.any,
|
|
734
774
|
onToggleOne: PropTypes.func,
|
|
735
775
|
onToggleTwo: PropTypes.func,
|
|
736
776
|
allowOverlap: PropTypes.bool,
|
|
737
777
|
snapped: PropTypes.bool,
|
|
738
778
|
minMarkerOverlapDistance: PropTypes.number,
|
|
739
779
|
length: PropTypes.number,
|
|
740
|
-
allowRange: PropTypes.arrayOf(PropTypes.number)
|
|
780
|
+
allowRange: PropTypes.arrayOf(PropTypes.number),
|
|
741
781
|
};
|