@momo-kits/slider 0.0.62-alpha.18 → 0.0.62-alpha.19

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 (2) hide show
  1. package/Slider.js +77 -50
  2. package/package.json +2 -2
package/Slider.js CHANGED
@@ -149,10 +149,12 @@ export default class Slider extends Component {
149
149
  sliderLength,
150
150
  );
151
151
 
152
- if (allowRange?.length > 0 && value < get(allowRange, '[0]', min))
152
+ if (allowRange?.length > 0 && value < get(allowRange, '[0]', min)) {
153
153
  return;
154
- if (allowRange?.length > 1 && value > get(allowRange, '[1]', max))
154
+ }
155
+ if (allowRange?.length > 1 && value > get(allowRange, '[1]', max)) {
155
156
  return;
157
+ }
156
158
 
157
159
  const snappedValue = valueToPosition(
158
160
  value,
@@ -393,9 +395,18 @@ export default class Slider extends Component {
393
395
  }
394
396
 
395
397
  const lookup = [
396
- { value: 1000000, symbol: LANGUAGE == 'en' ? 'M' : 'Tr' },
397
- { value: 1000, symbol: 'K' },
398
- { 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
+ },
399
410
  ];
400
411
 
401
412
  let item = lookup.slice().find((item) => {
@@ -484,6 +495,7 @@ export default class Slider extends Component {
484
495
  ? inactiveColor
485
496
  : activeColor,
486
497
  },
498
+ !enabledOne && !twoMarkers && styles.disabledTrack,
487
499
  ]}
488
500
  />
489
501
  <View
@@ -496,6 +508,7 @@ export default class Slider extends Component {
496
508
  ? activeColor
497
509
  : inactiveColor,
498
510
  },
511
+ !enabledOne && !enabledTwo && styles.disabledTrack,
499
512
  ]}
500
513
  {...(twoMarkers
501
514
  ? this._panResponderBetween.panHandlers
@@ -526,17 +539,19 @@ export default class Slider extends Component {
526
539
  {...this._panResponderOne.panHandlers}>
527
540
  {isMarkersSeparated === false ? (
528
541
  <>
529
- {onePressed && enableLabel && (
530
- <View
531
- style={[
532
- styles.valueContainer,
533
- Shadow.Dark,
534
- ]}>
535
- <Text.Label3>
536
- {markerLabel1}
537
- </Text.Label3>
538
- </View>
539
- )}
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
+ )}
540
555
  <Marker
541
556
  activeColor={activeColor}
542
557
  enabled={enabledOne}
@@ -548,17 +563,19 @@ export default class Slider extends Component {
548
563
  </>
549
564
  ) : (
550
565
  <>
551
- {onePressed && enableLabel && (
552
- <View
553
- style={[
554
- styles.valueContainer,
555
- Shadow.Dark,
556
- ]}>
557
- <Text.Label3>
558
- {markerLabel2}
559
- </Text.Label3>
560
- </View>
561
- )}
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
+ )}
562
579
  <MarkerLeft
563
580
  activeColor={activeColor}
564
581
  enabled={enabledOne}
@@ -586,17 +603,19 @@ export default class Slider extends Component {
586
603
  {...this._panResponderTwo.panHandlers}>
587
604
  {isMarkersSeparated === false ? (
588
605
  <>
589
- {twoPressed && enableLabel && (
590
- <View
591
- style={[
592
- styles.valueContainer,
593
- Shadow.Dark,
594
- ]}>
595
- <Text.Label3>
596
- {markerLabel2}
597
- </Text.Label3>
598
- </View>
599
- )}
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
+ )}
600
619
  <Marker
601
620
  activeColor={activeColor}
602
621
  pressed={twoPressed}
@@ -608,17 +627,19 @@ export default class Slider extends Component {
608
627
  </>
609
628
  ) : (
610
629
  <>
611
- {twoPressed && enableLabel && (
612
- <View
613
- style={[
614
- styles.valueContainer,
615
- Shadow.Dark,
616
- ]}>
617
- <Text.Label3>
618
- {markerLabel2}
619
- </Text.Label3>
620
- </View>
621
- )}
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
+ )}
622
643
  <MarkerRight
623
644
  activeColor={activeColor}
624
645
  pressed={twoPressed}
@@ -678,7 +699,10 @@ const styles = StyleSheet.create({
678
699
  alignItems: 'center',
679
700
  alignSelf: 'stretch',
680
701
  },
681
- full: { width: '100%', height: '100%' },
702
+ full: {
703
+ width: '100%',
704
+ height: '100%',
705
+ },
682
706
  valueContainer: {
683
707
  height: 24,
684
708
  borderRadius: Spacing.XS,
@@ -690,6 +714,9 @@ const styles = StyleSheet.create({
690
714
  paddingVertical: Spacing.XS,
691
715
  paddingHorizontal: Spacing.S,
692
716
  },
717
+ disabledTrack: {
718
+ backgroundColor: Colors.black_08,
719
+ },
693
720
  });
694
721
 
695
722
  Slider.defaultProps = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/slider",
3
- "version": "0.0.62-alpha.18",
3
+ "version": "0.0.62-alpha.19",
4
4
  "private": false,
5
5
  "main": "index.js",
6
6
  "dependencies": {},
@@ -13,4 +13,4 @@
13
13
  },
14
14
  "devDependencies": {},
15
15
  "license": "MoMo"
16
- }
16
+ }