@momo-kits/slider 0.0.62-alpha.2 → 0.0.62-alpha.22

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.
Files changed (4) hide show
  1. package/DefaultLabel.js +5 -5
  2. package/DefaultMarker.js +55 -61
  3. package/Slider.js +133 -153
  4. package/package.json +2 -2
package/DefaultLabel.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { View, StyleSheet } from 'react-native';
4
- import { Text } from '@momo-kits/core';
4
+ import { Text } from '@momo-kits/core-v2';
5
5
 
6
6
  const sliderRadius = 3;
7
7
  const width = 50;
@@ -31,9 +31,9 @@ export default class DefaultLabel extends React.Component {
31
31
  },
32
32
  oneMarkerPressed && styles.markerPressed,
33
33
  ]}>
34
- <Text.SubTitle style={styles.sliderLabelText}>
34
+ <Text style={styles.sliderLabelText}>
35
35
  {oneMarkerValue}
36
- </Text.SubTitle>
36
+ </Text>
37
37
  </View>
38
38
  )}
39
39
 
@@ -50,9 +50,9 @@ export default class DefaultLabel extends React.Component {
50
50
  },
51
51
  twoMarkerPressed && styles.markerPressed,
52
52
  ]}>
53
- <Text.SubTitle style={styles.sliderLabelText}>
53
+ <Text style={styles.sliderLabelText}>
54
54
  {twoMarkerValue}
55
- </Text.SubTitle>
55
+ </Text>
56
56
  </View>
57
57
  )}
58
58
  </View>
package/DefaultMarker.js CHANGED
@@ -1,73 +1,67 @@
1
1
  import React from 'react';
2
- import {
3
- View,
4
- StyleSheet,
5
- Platform,
6
- TouchableHighlight,
7
- Text,
8
- } from 'react-native';
9
- import {Colors, Radius} from '@momo-kits/core';
2
+ import { Platform, StyleSheet, View } from 'react-native';
3
+ import { Colors, Shadow, TouchableOpacity } from '@momo-kits/core-v2';
4
+
10
5
  // import {Radius} from '../../core';
11
6
 
12
7
  class DefaultMarker extends React.Component {
13
- render() {
14
- const {
15
- enabled,
16
- markerStyle,
17
- pressed,
18
- pressedMarkerStyle,
19
- disabledMarkerStyle,
20
- } = this.props;
21
- return (
22
- <TouchableHighlight>
23
- <View
24
- style={
25
- enabled
26
- ? [
27
- styles.markerStyle,
28
- markerStyle,
29
- pressed && styles.pressedMarkerStyle,
30
- pressed && pressedMarkerStyle,
31
- ]
32
- : [styles.markerStyle, styles.disabled, disabledMarkerStyle]
33
- }
34
- />
35
- </TouchableHighlight>
36
- );
37
- }
8
+ render() {
9
+ const {
10
+ enabled,
11
+ markerStyle,
12
+ pressed,
13
+ pressedMarkerStyle,
14
+ disabledMarkerStyle,
15
+ activeColor,
16
+ } = this.props;
17
+ return (
18
+ <TouchableOpacity>
19
+ <View
20
+ style={
21
+ enabled
22
+ ? [
23
+ styles.markerStyle,
24
+ Shadow.Dark,
25
+ markerStyle,
26
+ pressed && styles.pressedMarkerStyle,
27
+ pressed && pressedMarkerStyle,
28
+ { backgroundColor: activeColor },
29
+ ]
30
+ : [
31
+ Shadow.Dark,
32
+ styles.markerStyle,
33
+ styles.disabled,
34
+ disabledMarkerStyle,
35
+ ]
36
+ }
37
+ />
38
+ </TouchableOpacity>
39
+ );
40
+ }
38
41
  }
39
42
 
40
43
  const styles = StyleSheet.create({
41
- markerStyle: {
42
- height: 24,
43
- width: 24,
44
- borderRadius: 12,
45
- borderWidth: 5,
46
- borderColor: Colors.white,
47
- backgroundColor: Colors.pink_05_b,
48
- shadowColor: '#000',
49
- shadowOffset: {
50
- width: 0,
51
- height: 4,
52
- },
53
- shadowOpacity: 0.3,
54
- shadowRadius: 4.65,
55
- elevation: 8,
56
- },
57
- pressedMarkerStyle: {
58
- ...Platform.select({
59
- web: {},
60
- ios: {},
61
- android: {
44
+ markerStyle: {
62
45
  height: 20,
63
46
  width: 20,
64
- borderRadius: 20,
65
- },
66
- }),
67
- },
68
- disabled: {
69
- backgroundColor: '#d3d3d3',
70
- },
47
+ borderRadius: 10,
48
+ borderWidth: 4,
49
+ borderColor: Colors.white,
50
+ },
51
+ pressedMarkerStyle: {
52
+ ...Platform.select({
53
+ web: {},
54
+ ios: {},
55
+ android: {
56
+ height: 20,
57
+ width: 20,
58
+ borderRadius: 20,
59
+ },
60
+ }),
61
+ },
62
+ disabled: {
63
+ backgroundColor: Colors.black_09,
64
+ },
71
65
  });
72
66
 
73
67
  export default DefaultMarker;
package/Slider.js CHANGED
@@ -1,18 +1,16 @@
1
- import React, { Component } from 'react';
2
- import PropTypes from 'prop-types';
3
1
  import {
4
- StyleSheet,
5
- PanResponder,
6
- View,
7
- I18nManager,
8
- ImageBackground,
2
+ Colors,
3
+ LocalizedStrings,
4
+ Shadow,
5
+ Spacing,
9
6
  Text,
10
- } from 'react-native';
7
+ } from '@momo-kits/core-v2';
11
8
  import { get } from 'lodash';
12
- import { Colors, Spacing, LocalizedStrings } from '@momo-kits/core';
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';
13
13
  import DefaultMarker from './DefaultMarker';
14
- import DefaultLabel from './DefaultLabel';
15
- import { createArray, valueToPosition, positionToValue } from './converters';
16
14
 
17
15
  const LANGUAGE = LocalizedStrings.getLanguage();
18
16
 
@@ -106,10 +104,8 @@ export default class Slider extends Component {
106
104
  moveOne = (gestureState) => {
107
105
  const {
108
106
  enabledOne,
109
- vertical,
110
107
  allowOverlap,
111
108
  minMarkerOverlapDistance,
112
- // sliderLength,
113
109
  touchDimensions,
114
110
  snapped,
115
111
  onChange,
@@ -124,10 +120,8 @@ export default class Slider extends Component {
124
120
  return;
125
121
  }
126
122
 
127
- const accumDistance = vertical ? -gestureState.dy : gestureState.dx;
128
- const accumDistanceDisplacement = vertical
129
- ? gestureState.dx
130
- : gestureState.dy;
123
+ const accumDistance = gestureState.dx;
124
+ const accumDistanceDisplacement = gestureState.dy;
131
125
 
132
126
  const unconfined = I18nManager.isRTL
133
127
  ? pastOne - accumDistance
@@ -155,10 +149,12 @@ export default class Slider extends Component {
155
149
  sliderLength,
156
150
  );
157
151
 
158
- if (allowRange?.length > 0 && value < get(allowRange, '[0]', min))
152
+ if (allowRange?.length > 0 && value < get(allowRange, '[0]', min)) {
159
153
  return;
160
- if (allowRange?.length > 1 && value > get(allowRange, '[1]', max))
154
+ }
155
+ if (allowRange?.length > 1 && value > get(allowRange, '[1]', max)) {
161
156
  return;
157
+ }
162
158
 
163
159
  const snappedValue = valueToPosition(
164
160
  value,
@@ -196,7 +192,6 @@ export default class Slider extends Component {
196
192
  moveTwo = (gestureState) => {
197
193
  const {
198
194
  enabledTwo,
199
- vertical,
200
195
  allowOverlap,
201
196
  minMarkerOverlapDistance,
202
197
  // sliderLength,
@@ -211,10 +206,8 @@ export default class Slider extends Component {
211
206
  return;
212
207
  }
213
208
 
214
- const accumDistance = vertical ? -gestureState.dy : gestureState.dx;
215
- const accumDistanceDisplacement = vertical
216
- ? gestureState.dx
217
- : gestureState.dy;
209
+ const accumDistance = gestureState.dx;
210
+ const accumDistanceDisplacement = gestureState.dy;
218
211
 
219
212
  const unconfined = I18nManager.isRTL
220
213
  ? pastTwo - accumDistance
@@ -384,11 +377,9 @@ export default class Slider extends Component {
384
377
  }
385
378
 
386
379
  onContentLayout(e) {
387
- const { vertical, length } = this.props;
380
+ const { length } = this.props;
388
381
  if (!length) {
389
- const layoutLength = vertical
390
- ? e.nativeEvent.layout.height
391
- : e.nativeEvent.layout.width;
382
+ const layoutLength = e.nativeEvent.layout.width;
392
383
  this.setState({
393
384
  sliderLength: layoutLength,
394
385
  });
@@ -404,9 +395,18 @@ export default class Slider extends Component {
404
395
  }
405
396
 
406
397
  const lookup = [
407
- { value: 1000000, symbol: LANGUAGE == 'en' ? 'M' : 'Tr' },
408
- { value: 1000, symbol: 'K' },
409
- { value: 1, symbol: '' },
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
410
  ];
411
411
 
412
412
  let item = lookup.slice().find((item) => {
@@ -435,51 +435,33 @@ export default class Slider extends Component {
435
435
  } = this.state;
436
436
  const {
437
437
  style,
438
- selectedStyle,
439
- unselectedStyle,
440
- // sliderLength,
441
438
  markerOffsetX,
442
439
  markerOffsetY,
443
440
  values,
444
- customMarker,
445
- customMarkerLeft,
446
- customMarkerRight,
447
441
  isMarkersSeparated = false,
448
- customLabel,
449
442
  touchDimensions,
450
443
  containerStyle,
451
- vertical,
452
- trackStyle,
453
444
  markerContainerStyle,
454
445
  enabledOne,
455
446
  enabledTwo,
456
- markerStyle,
457
- pressedMarkerStyle,
458
- disabledMarkerStyle,
459
447
  valuePrefix,
460
448
  valueSuffix,
461
449
  enableLabel = true,
462
- imageBackgroundSource,
450
+ activeColor,
451
+ inactiveColor,
463
452
  } = this.props;
464
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
465
454
 
466
455
  const trackOneLength = positionOne;
467
- const trackOneStyle = twoMarkers
468
- ? unselectedStyle
469
- : selectedStyle || styles.selectedTrack;
456
+ const trackOneStyle = styles.selectedTrack;
470
457
  const trackThreeLength = twoMarkers ? sliderLength - positionTwo : 0;
471
- const trackThreeStyle = unselectedStyle;
472
458
  const trackTwoLength = sliderLength - trackOneLength - trackThreeLength;
473
- const trackTwoStyle = twoMarkers
474
- ? selectedStyle || styles.selectedTrack
475
- : unselectedStyle;
476
- const Marker = customMarker;
477
-
478
- const MarkerLeft = customMarkerLeft;
479
- const MarkerRight = customMarkerRight;
459
+ const trackTwoStyle = styles.selectedTrack;
480
460
 
481
- const Label = customLabel;
461
+ const Marker = DefaultMarker;
482
462
 
463
+ const MarkerLeft = DefaultMarker;
464
+ const MarkerRight = DefaultMarker;
483
465
  const { borderRadius } = touchDimensions;
484
466
  const touchStyle = {
485
467
  borderRadius: borderRadius || 0,
@@ -497,12 +479,6 @@ export default class Slider extends Component {
497
479
 
498
480
  const newContainerStyle = [styles.container, containerStyle];
499
481
 
500
- if (vertical) {
501
- newContainerStyle.push({
502
- transform: [{ rotate: '-90deg' }],
503
- });
504
- }
505
-
506
482
  const markerLabel1 = this._nFormatter(valueOne);
507
483
  const markerLabel2 = this._nFormatter(valueTwo);
508
484
 
@@ -512,17 +488,27 @@ export default class Slider extends Component {
512
488
  <View
513
489
  style={[
514
490
  styles.track,
515
- trackStyle,
516
491
  trackOneStyle,
517
- { width: trackOneLength },
492
+ {
493
+ width: trackOneLength,
494
+ backgroundColor: twoMarkers
495
+ ? inactiveColor
496
+ : activeColor,
497
+ },
498
+ !enabledOne && !twoMarkers && styles.disabledTrack,
518
499
  ]}
519
500
  />
520
501
  <View
521
502
  style={[
522
503
  styles.track,
523
- trackStyle,
524
504
  trackTwoStyle,
525
- { width: trackTwoLength },
505
+ {
506
+ width: trackTwoLength,
507
+ backgroundColor: twoMarkers
508
+ ? activeColor
509
+ : inactiveColor,
510
+ },
511
+ !enabledOne && !enabledTwo && styles.disabledTrack,
526
512
  ]}
527
513
  {...(twoMarkers
528
514
  ? this._panResponderBetween.panHandlers
@@ -532,9 +518,10 @@ export default class Slider extends Component {
532
518
  <View
533
519
  style={[
534
520
  styles.track,
535
- trackStyle,
536
- trackThreeStyle,
537
- { width: trackThreeLength },
521
+ {
522
+ width: trackThreeLength,
523
+ backgroundColor: inactiveColor,
524
+ },
538
525
  ]}
539
526
  />
540
527
  )}
@@ -552,19 +539,23 @@ export default class Slider extends Component {
552
539
  {...this._panResponderOne.panHandlers}>
553
540
  {isMarkersSeparated === false ? (
554
541
  <>
555
- {onePressed && enableLabel && (
556
- <View style={styles.valueContainer}>
557
- <Text>{markerLabel1}</Text>
558
- </View>
559
- )}
542
+ {onePressed &&
543
+ enableLabel &&
544
+ enabledOne && (
545
+ <View
546
+ style={[
547
+ styles.valueContainer,
548
+ Shadow.Dark,
549
+ ]}>
550
+ <Text.Label3>
551
+ {markerLabel1}
552
+ </Text.Label3>
553
+ </View>
554
+ )}
560
555
  <Marker
556
+ activeColor={activeColor}
561
557
  enabled={enabledOne}
562
558
  pressed={onePressed}
563
- markerStyle={markerStyle}
564
- pressedMarkerStyle={pressedMarkerStyle}
565
- disabledMarkerStyle={
566
- disabledMarkerStyle
567
- }
568
559
  currentValue={valueOne}
569
560
  valuePrefix={valuePrefix}
570
561
  valueSuffix={valueSuffix}
@@ -572,19 +563,23 @@ export default class Slider extends Component {
572
563
  </>
573
564
  ) : (
574
565
  <>
575
- {onePressed && enableLabel && (
576
- <View style={styles.valueContainer}>
577
- <Text>{markerLabel2}</Text>
578
- </View>
579
- )}
566
+ {onePressed &&
567
+ enableLabel &&
568
+ enabledOne && (
569
+ <View
570
+ style={[
571
+ styles.valueContainer,
572
+ Shadow.Dark,
573
+ ]}>
574
+ <Text.Label3>
575
+ {markerLabel1}
576
+ </Text.Label3>
577
+ </View>
578
+ )}
580
579
  <MarkerLeft
580
+ activeColor={activeColor}
581
581
  enabled={enabledOne}
582
582
  pressed={onePressed}
583
- markerStyle={markerStyle}
584
- pressedMarkerStyle={pressedMarkerStyle}
585
- disabledMarkerStyle={
586
- disabledMarkerStyle
587
- }
588
583
  currentValue={valueOne}
589
584
  valuePrefix={valuePrefix}
590
585
  valueSuffix={valueSuffix}
@@ -608,20 +603,22 @@ export default class Slider extends Component {
608
603
  {...this._panResponderTwo.panHandlers}>
609
604
  {isMarkersSeparated === false ? (
610
605
  <>
611
- {twoPressed && enableLabel && (
612
- <View style={styles.valueContainer}>
613
- <Text>{markerLabel2}</Text>
614
- </View>
615
- )}
606
+ {twoPressed &&
607
+ enableLabel &&
608
+ enabledTwo && (
609
+ <View
610
+ style={[
611
+ styles.valueContainer,
612
+ Shadow.Dark,
613
+ ]}>
614
+ <Text.Label3>
615
+ {markerLabel2}
616
+ </Text.Label3>
617
+ </View>
618
+ )}
616
619
  <Marker
620
+ activeColor={activeColor}
617
621
  pressed={twoPressed}
618
- markerStyle={markerStyle}
619
- pressedMarkerStyle={
620
- pressedMarkerStyle
621
- }
622
- disabledMarkerStyle={
623
- disabledMarkerStyle
624
- }
625
622
  currentValue={valueTwo}
626
623
  enabled={enabledTwo}
627
624
  valuePrefix={valuePrefix}
@@ -630,20 +627,22 @@ export default class Slider extends Component {
630
627
  </>
631
628
  ) : (
632
629
  <>
633
- {twoPressed && enableLabel && (
634
- <View style={styles.valueContainer}>
635
- <Text>{markerLabel2}</Text>
636
- </View>
637
- )}
630
+ {twoPressed &&
631
+ enableLabel &&
632
+ enabledTwo && (
633
+ <View
634
+ style={[
635
+ styles.valueContainer,
636
+ Shadow.Dark,
637
+ ]}>
638
+ <Text.Label3>
639
+ {markerLabel2}
640
+ </Text.Label3>
641
+ </View>
642
+ )}
638
643
  <MarkerRight
644
+ activeColor={activeColor}
639
645
  pressed={twoPressed}
640
- markerStyle={markerStyle}
641
- pressedMarkerStyle={
642
- pressedMarkerStyle
643
- }
644
- disabledMarkerStyle={
645
- disabledMarkerStyle
646
- }
647
646
  currentValue={valueTwo}
648
647
  enabled={enabledTwo}
649
648
  valuePrefix={valuePrefix}
@@ -660,16 +659,7 @@ export default class Slider extends Component {
660
659
 
661
660
  return (
662
661
  <View style={style} onLayout={(e) => this.onContentLayout(e)}>
663
- {imageBackgroundSource && (
664
- <ImageBackground
665
- source={imageBackgroundSource}
666
- style={[styles.full, newContainerStyle]}>
667
- {body}
668
- </ImageBackground>
669
- )}
670
- {!imageBackgroundSource && (
671
- <View style={newContainerStyle}>{body}</View>
672
- )}
662
+ <View style={newContainerStyle}>{body}</View>
673
663
  </View>
674
664
  );
675
665
  }
@@ -678,24 +668,24 @@ export default class Slider extends Component {
678
668
  const styles = StyleSheet.create({
679
669
  container: {
680
670
  position: 'relative',
681
- height: 50,
682
671
  justifyContent: 'center',
672
+ minHeight: 48,
683
673
  },
684
674
  fullTrack: {
685
675
  flexDirection: 'row',
686
676
  },
687
677
  track: {
688
678
  height: 4,
689
- backgroundColor: Colors.black_03,
679
+ backgroundColor: Colors.background_default,
690
680
  borderRadius: 2,
691
681
  },
692
682
  selectedTrack: {
693
- backgroundColor: Colors.pink_05_b,
683
+ backgroundColor: Colors.pink_03,
694
684
  },
695
685
  markerContainer: {
696
686
  position: 'absolute',
697
687
  width: 64,
698
- height: 48,
688
+ height: 52,
699
689
  backgroundColor: 'transparent',
700
690
  justifyContent: 'center',
701
691
  alignItems: 'center',
@@ -709,24 +699,23 @@ const styles = StyleSheet.create({
709
699
  alignItems: 'center',
710
700
  alignSelf: 'stretch',
711
701
  },
712
- full: { width: '100%', height: '100%' },
702
+ full: {
703
+ width: '100%',
704
+ height: '100%',
705
+ },
713
706
  valueContainer: {
714
- height: 32,
715
- borderRadius: Spacing.S,
707
+ height: 24,
708
+ borderRadius: Spacing.XS,
716
709
  backgroundColor: Colors.white,
717
710
  justifyContent: 'center',
718
711
  alignItems: 'center',
719
712
  position: 'absolute',
720
- top: -36,
721
- shadowColor: '#000',
722
- shadowOffset: {
723
- width: 0,
724
- height: 4,
725
- },
726
- shadowOpacity: 0.24,
727
- shadowRadius: 6,
728
- elevation: 12,
729
- paddingHorizontal: 8,
713
+ top: -28,
714
+ paddingVertical: Spacing.XS,
715
+ paddingHorizontal: Spacing.S,
716
+ },
717
+ disabledTrack: {
718
+ backgroundColor: Colors.black_08,
730
719
  },
731
720
  });
732
721
 
@@ -745,10 +734,6 @@ Slider.defaultProps = {
745
734
  borderRadius: 15,
746
735
  slipDisplacement: 200,
747
736
  },
748
- customMarker: DefaultMarker,
749
- customMarkerLeft: DefaultMarker,
750
- customMarkerRight: DefaultMarker,
751
- customLabel: DefaultLabel,
752
737
  markerOffsetX: 0,
753
738
  markerOffsetY: 0,
754
739
  onToggleOne: undefined,
@@ -757,26 +742,22 @@ Slider.defaultProps = {
757
742
  enabledTwo: true,
758
743
  allowOverlap: false,
759
744
  snapped: false,
760
- vertical: false,
761
745
  minMarkerOverlapDistance: 0,
762
746
  length: 280,
747
+ activeColor: Colors.pink_03,
748
+ inactiveColor: Colors.black_03,
763
749
  };
764
750
 
765
751
  Slider.propTypes = {
752
+ activeColor: PropTypes.string,
753
+ inactiveColor: PropTypes.string,
766
754
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
767
- selectedStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
768
- unselectedStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
769
755
  markerOffsetX: PropTypes.number,
770
756
  markerOffsetY: PropTypes.number,
771
757
  values: PropTypes.arrayOf(PropTypes.number),
772
- customMarker: PropTypes.func,
773
- customMarkerLeft: PropTypes.func,
774
- customMarkerRight: PropTypes.func,
775
758
  isMarkersSeparated: PropTypes.bool,
776
759
  touchDimensions: PropTypes.object,
777
760
  containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
778
- vertical: PropTypes.bool,
779
- trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
780
761
  markerContainerStyle: PropTypes.oneOfType([
781
762
  PropTypes.object,
782
763
  PropTypes.array,
@@ -790,7 +771,6 @@ Slider.propTypes = {
790
771
  step: PropTypes.number,
791
772
  min: PropTypes.number,
792
773
  max: PropTypes.number,
793
- customLabel: PropTypes.any,
794
774
  onToggleOne: PropTypes.func,
795
775
  onToggleTwo: PropTypes.func,
796
776
  allowOverlap: PropTypes.bool,
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@momo-kits/slider",
3
- "version": "0.0.62-alpha.2",
3
+ "version": "0.0.62-alpha.22",
4
4
  "private": false,
5
5
  "main": "index.js",
6
6
  "dependencies": {},
7
7
  "peerDependencies": {
8
- "@momo-kits/core": ">=0.0.5-beta",
8
+ "@momo-kits/core-v2": ">=0.0.5-beta",
9
9
  "lodash": "^4.17.15",
10
10
  "prop-types": "^15.7.2",
11
11
  "react": "16.9.0",