@momo-kits/slider 0.0.61-rc.1 → 0.0.62-alpha.16

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 +88 -135
  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
@@ -196,7 +190,6 @@ export default class Slider extends Component {
196
190
  moveTwo = (gestureState) => {
197
191
  const {
198
192
  enabledTwo,
199
- vertical,
200
193
  allowOverlap,
201
194
  minMarkerOverlapDistance,
202
195
  // sliderLength,
@@ -211,10 +204,8 @@ export default class Slider extends Component {
211
204
  return;
212
205
  }
213
206
 
214
- const accumDistance = vertical ? -gestureState.dy : gestureState.dx;
215
- const accumDistanceDisplacement = vertical
216
- ? gestureState.dx
217
- : gestureState.dy;
207
+ const accumDistance = gestureState.dx;
208
+ const accumDistanceDisplacement = gestureState.dy;
218
209
 
219
210
  const unconfined = I18nManager.isRTL
220
211
  ? pastTwo - accumDistance
@@ -384,11 +375,9 @@ export default class Slider extends Component {
384
375
  }
385
376
 
386
377
  onContentLayout(e) {
387
- const { vertical, length } = this.props;
378
+ const { length } = this.props;
388
379
  if (!length) {
389
- const layoutLength = vertical
390
- ? e.nativeEvent.layout.height
391
- : e.nativeEvent.layout.width;
380
+ const layoutLength = e.nativeEvent.layout.width;
392
381
  this.setState({
393
382
  sliderLength: layoutLength,
394
383
  });
@@ -435,51 +424,33 @@ export default class Slider extends Component {
435
424
  } = this.state;
436
425
  const {
437
426
  style,
438
- selectedStyle,
439
- unselectedStyle,
440
- // sliderLength,
441
427
  markerOffsetX,
442
428
  markerOffsetY,
443
429
  values,
444
- customMarker,
445
- customMarkerLeft,
446
- customMarkerRight,
447
430
  isMarkersSeparated = false,
448
- customLabel,
449
431
  touchDimensions,
450
432
  containerStyle,
451
- vertical,
452
- trackStyle,
453
433
  markerContainerStyle,
454
434
  enabledOne,
455
435
  enabledTwo,
456
- markerStyle,
457
- pressedMarkerStyle,
458
- disabledMarkerStyle,
459
436
  valuePrefix,
460
437
  valueSuffix,
461
438
  enableLabel = true,
462
- imageBackgroundSource,
439
+ activeColor,
440
+ inactiveColor,
463
441
  } = this.props;
464
442
  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
443
 
466
444
  const trackOneLength = positionOne;
467
- const trackOneStyle = twoMarkers
468
- ? unselectedStyle
469
- : selectedStyle || styles.selectedTrack;
445
+ const trackOneStyle = styles.selectedTrack;
470
446
  const trackThreeLength = twoMarkers ? sliderLength - positionTwo : 0;
471
- const trackThreeStyle = unselectedStyle;
472
447
  const trackTwoLength = sliderLength - trackOneLength - trackThreeLength;
473
- const trackTwoStyle = twoMarkers
474
- ? selectedStyle || styles.selectedTrack
475
- : unselectedStyle;
476
- const Marker = customMarker;
448
+ const trackTwoStyle = styles.selectedTrack;
477
449
 
478
- const MarkerLeft = customMarkerLeft;
479
- const MarkerRight = customMarkerRight;
480
-
481
- const Label = customLabel;
450
+ const Marker = DefaultMarker;
482
451
 
452
+ const MarkerLeft = DefaultMarker;
453
+ const MarkerRight = DefaultMarker;
483
454
  const { borderRadius } = touchDimensions;
484
455
  const touchStyle = {
485
456
  borderRadius: borderRadius || 0,
@@ -497,12 +468,6 @@ export default class Slider extends Component {
497
468
 
498
469
  const newContainerStyle = [styles.container, containerStyle];
499
470
 
500
- if (vertical) {
501
- newContainerStyle.push({
502
- transform: [{ rotate: '-90deg' }],
503
- });
504
- }
505
-
506
471
  const markerLabel1 = this._nFormatter(valueOne);
507
472
  const markerLabel2 = this._nFormatter(valueTwo);
508
473
 
@@ -512,17 +477,25 @@ export default class Slider extends Component {
512
477
  <View
513
478
  style={[
514
479
  styles.track,
515
- trackStyle,
516
480
  trackOneStyle,
517
- { width: trackOneLength },
481
+ {
482
+ width: trackOneLength,
483
+ backgroundColor: twoMarkers
484
+ ? inactiveColor
485
+ : activeColor,
486
+ },
518
487
  ]}
519
488
  />
520
489
  <View
521
490
  style={[
522
491
  styles.track,
523
- trackStyle,
524
492
  trackTwoStyle,
525
- { width: trackTwoLength },
493
+ {
494
+ width: trackTwoLength,
495
+ backgroundColor: twoMarkers
496
+ ? activeColor
497
+ : inactiveColor,
498
+ },
526
499
  ]}
527
500
  {...(twoMarkers
528
501
  ? this._panResponderBetween.panHandlers
@@ -532,9 +505,10 @@ export default class Slider extends Component {
532
505
  <View
533
506
  style={[
534
507
  styles.track,
535
- trackStyle,
536
- trackThreeStyle,
537
- { width: trackThreeLength },
508
+ {
509
+ width: trackThreeLength,
510
+ backgroundColor: inactiveColor,
511
+ },
538
512
  ]}
539
513
  />
540
514
  )}
@@ -553,18 +527,20 @@ export default class Slider extends Component {
553
527
  {isMarkersSeparated === false ? (
554
528
  <>
555
529
  {onePressed && enableLabel && (
556
- <View style={styles.valueContainer}>
557
- <Text>{markerLabel1}</Text>
530
+ <View
531
+ style={[
532
+ styles.valueContainer,
533
+ Shadow.Dark,
534
+ ]}>
535
+ <Text.Label3>
536
+ {markerLabel1}
537
+ </Text.Label3>
558
538
  </View>
559
539
  )}
560
540
  <Marker
541
+ activeColor={activeColor}
561
542
  enabled={enabledOne}
562
543
  pressed={onePressed}
563
- markerStyle={markerStyle}
564
- pressedMarkerStyle={pressedMarkerStyle}
565
- disabledMarkerStyle={
566
- disabledMarkerStyle
567
- }
568
544
  currentValue={valueOne}
569
545
  valuePrefix={valuePrefix}
570
546
  valueSuffix={valueSuffix}
@@ -573,18 +549,20 @@ export default class Slider extends Component {
573
549
  ) : (
574
550
  <>
575
551
  {onePressed && enableLabel && (
576
- <View style={styles.valueContainer}>
577
- <Text>{markerLabel2}</Text>
552
+ <View
553
+ style={[
554
+ styles.valueContainer,
555
+ Shadow.Dark,
556
+ ]}>
557
+ <Text.Label3>
558
+ {markerLabel2}
559
+ </Text.Label3>
578
560
  </View>
579
561
  )}
580
562
  <MarkerLeft
563
+ activeColor={activeColor}
581
564
  enabled={enabledOne}
582
565
  pressed={onePressed}
583
- markerStyle={markerStyle}
584
- pressedMarkerStyle={pressedMarkerStyle}
585
- disabledMarkerStyle={
586
- disabledMarkerStyle
587
- }
588
566
  currentValue={valueOne}
589
567
  valuePrefix={valuePrefix}
590
568
  valueSuffix={valueSuffix}
@@ -609,19 +587,19 @@ export default class Slider extends Component {
609
587
  {isMarkersSeparated === false ? (
610
588
  <>
611
589
  {twoPressed && enableLabel && (
612
- <View style={styles.valueContainer}>
613
- <Text>{markerLabel2}</Text>
590
+ <View
591
+ style={[
592
+ styles.valueContainer,
593
+ Shadow.Dark,
594
+ ]}>
595
+ <Text.Label3>
596
+ {markerLabel2}
597
+ </Text.Label3>
614
598
  </View>
615
599
  )}
616
600
  <Marker
601
+ activeColor={activeColor}
617
602
  pressed={twoPressed}
618
- markerStyle={markerStyle}
619
- pressedMarkerStyle={
620
- pressedMarkerStyle
621
- }
622
- disabledMarkerStyle={
623
- disabledMarkerStyle
624
- }
625
603
  currentValue={valueTwo}
626
604
  enabled={enabledTwo}
627
605
  valuePrefix={valuePrefix}
@@ -631,19 +609,19 @@ export default class Slider extends Component {
631
609
  ) : (
632
610
  <>
633
611
  {twoPressed && enableLabel && (
634
- <View style={styles.valueContainer}>
635
- <Text>{markerLabel2}</Text>
612
+ <View
613
+ style={[
614
+ styles.valueContainer,
615
+ Shadow.Dark,
616
+ ]}>
617
+ <Text.Label3>
618
+ {markerLabel2}
619
+ </Text.Label3>
636
620
  </View>
637
621
  )}
638
622
  <MarkerRight
623
+ activeColor={activeColor}
639
624
  pressed={twoPressed}
640
- markerStyle={markerStyle}
641
- pressedMarkerStyle={
642
- pressedMarkerStyle
643
- }
644
- disabledMarkerStyle={
645
- disabledMarkerStyle
646
- }
647
625
  currentValue={valueTwo}
648
626
  enabled={enabledTwo}
649
627
  valuePrefix={valuePrefix}
@@ -660,16 +638,7 @@ export default class Slider extends Component {
660
638
 
661
639
  return (
662
640
  <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
- )}
641
+ <View style={newContainerStyle}>{body}</View>
673
642
  </View>
674
643
  );
675
644
  }
@@ -678,24 +647,24 @@ export default class Slider extends Component {
678
647
  const styles = StyleSheet.create({
679
648
  container: {
680
649
  position: 'relative',
681
- height: 50,
682
650
  justifyContent: 'center',
651
+ minHeight: 48,
683
652
  },
684
653
  fullTrack: {
685
654
  flexDirection: 'row',
686
655
  },
687
656
  track: {
688
657
  height: 4,
689
- backgroundColor: Colors.black_03,
658
+ backgroundColor: Colors.background_default,
690
659
  borderRadius: 2,
691
660
  },
692
661
  selectedTrack: {
693
- backgroundColor: Colors.pink_05_b,
662
+ backgroundColor: Colors.pink_03,
694
663
  },
695
664
  markerContainer: {
696
665
  position: 'absolute',
697
666
  width: 64,
698
- height: 48,
667
+ height: 52,
699
668
  backgroundColor: 'transparent',
700
669
  justifyContent: 'center',
701
670
  alignItems: 'center',
@@ -711,22 +680,15 @@ const styles = StyleSheet.create({
711
680
  },
712
681
  full: { width: '100%', height: '100%' },
713
682
  valueContainer: {
714
- height: 32,
715
- borderRadius: Spacing.S,
683
+ height: 24,
684
+ borderRadius: Spacing.XS,
716
685
  backgroundColor: Colors.white,
717
686
  justifyContent: 'center',
718
687
  alignItems: 'center',
719
688
  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,
689
+ top: -28,
690
+ paddingVertical: Spacing.XS,
691
+ paddingHorizontal: Spacing.S,
730
692
  },
731
693
  });
732
694
 
@@ -745,10 +707,6 @@ Slider.defaultProps = {
745
707
  borderRadius: 15,
746
708
  slipDisplacement: 200,
747
709
  },
748
- customMarker: DefaultMarker,
749
- customMarkerLeft: DefaultMarker,
750
- customMarkerRight: DefaultMarker,
751
- customLabel: DefaultLabel,
752
710
  markerOffsetX: 0,
753
711
  markerOffsetY: 0,
754
712
  onToggleOne: undefined,
@@ -757,26 +715,22 @@ Slider.defaultProps = {
757
715
  enabledTwo: true,
758
716
  allowOverlap: false,
759
717
  snapped: false,
760
- vertical: false,
761
718
  minMarkerOverlapDistance: 0,
762
719
  length: 280,
720
+ activeColor: Colors.pink_03,
721
+ inactiveColor: Colors.black_03,
763
722
  };
764
723
 
765
724
  Slider.propTypes = {
725
+ activeColor: PropTypes.string,
726
+ inactiveColor: PropTypes.string,
766
727
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
767
- selectedStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
768
- unselectedStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
769
728
  markerOffsetX: PropTypes.number,
770
729
  markerOffsetY: PropTypes.number,
771
730
  values: PropTypes.arrayOf(PropTypes.number),
772
- customMarker: PropTypes.func,
773
- customMarkerLeft: PropTypes.func,
774
- customMarkerRight: PropTypes.func,
775
731
  isMarkersSeparated: PropTypes.bool,
776
732
  touchDimensions: PropTypes.object,
777
733
  containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
778
- vertical: PropTypes.bool,
779
- trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
780
734
  markerContainerStyle: PropTypes.oneOfType([
781
735
  PropTypes.object,
782
736
  PropTypes.array,
@@ -790,7 +744,6 @@ Slider.propTypes = {
790
744
  step: PropTypes.number,
791
745
  min: PropTypes.number,
792
746
  max: PropTypes.number,
793
- customLabel: PropTypes.any,
794
747
  onToggleOne: PropTypes.func,
795
748
  onToggleTwo: PropTypes.func,
796
749
  allowOverlap: PropTypes.bool,
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@momo-kits/slider",
3
- "version": "0.0.61-rc.1",
3
+ "version": "0.0.62-alpha.16",
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",