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

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