@momo-kits/slider 0.77.5 → 0.77.7

package/Label.tsx

@@ -1,6 +1,7 @@
 import React, {PureComponent} from 'react';
 import {View} from 'react-native';
-import {Shadow, Text, Colors, Spacing, Radius} from '@momo-kits/foundation';
+import {Shadow, Text} from '@momo-kits/foundation';
+import styles from './styles';
 
 class Label extends PureComponent {
   state = {
@@ -16,18 +17,8 @@ class Label extends PureComponent {
     const {value} = this.state;
 
     return (
-      <View
-        {...props}
-        style={[
-          {
-            backgroundColor: Colors.black_01,
-            paddingVertical: Spacing.XS,
-            paddingHorizontal: Spacing.S,
-            borderRadius: Radius.XS,
-          },
-          Shadow.Light,
-        ]}>
-        <Text typography={'description_xs'}>{value}</Text>
+      <View {...props} style={[styles.label, Shadow.Light]}>
+        <Text typography={'label_s'}>{value}</Text>
       </View>
     );
   }

package/hooks.tsx

@@ -1,16 +1,15 @@
 import React, {
+  MutableRefObject,
   useCallback,
-  useState,
-  useRef,
   useMemo,
-  MutableRefObject,
-  ReactNode,
+  useRef,
+  useState,
 } from 'react';
-import {Animated, I18nManager, View} from 'react-native';
+import {Animated, I18nManager} from 'react-native';
 import {clamp} from './helpers';
 import styles from './styles';
 import FollowerContainer from './Label';
-import {Text} from '@momo-kits/foundation';
+import {Spacing} from '@momo-kits/foundation';
 
 /**
  * low and high state variables are fallbacks for props (props are not required).
@@ -95,13 +94,21 @@ export const useWidthLayout = (
  * @param gestureStateRef
  * @param isPressed
  * @param allowOverflow
+ * @param disabledLow
+ * @param disabledHigh
  * @returns {[JSX.Element, function(*, *=): void]|*[]}
  */
 export const useThumbFollower = (
   containerWidthRef: MutableRefObject<number>,
-  gestureStateRef: MutableRefObject<{lastValue: number; lastPosition: number}>,
+  gestureStateRef: MutableRefObject<{
+    isLow: boolean;
+    lastValue: number;
+    lastPosition: number;
+  }>,
   isPressed: boolean,
   allowOverflow: boolean,
+  disabledLow: boolean,
+  disabledHigh: boolean,
 ) => {
   const xRef = useRef(new Animated.Value(0));
   const widthRef = useRef(0);
@@ -111,6 +118,13 @@ export const useThumbFollower = (
 
   const update = useCallback(
     (thumbPositionInView, value) => {
+      if (
+        (gestureStateRef.current.isLow && disabledLow) ||
+        (!gestureStateRef.current.isLow && disabledHigh)
+      ) {
+        return;
+      }
+
       const {current: width} = widthRef;
       const {current: containerWidth} = containerWidthRef;
       const position = thumbPositionInView - width / 2;
@@ -119,7 +133,7 @@ export const useThumbFollower = (
       );
       contentContainerRef.current?.setValue(value);
     },
-    [widthRef, containerWidthRef, allowOverflow],
+    [widthRef, containerWidthRef, allowOverflow, disabledLow, disabledHigh], // Include dependencies here.
   );
 
   const handleLayout = useWidthLayout(widthRef, () => {
@@ -130,8 +144,14 @@ export const useThumbFollower = (
   });
 
   const transform = {transform: [{translateX: x}]};
+
+  const shouldDisplayLabel =
+    isPressed &&
+    ((gestureStateRef.current.isLow && !disabledLow) ||
+      (!gestureStateRef.current.isLow && !disabledHigh));
+
   const follower = (
-    <Animated.View style={[transform, {opacity: isPressed ? 1 : 0}]}>
+    <Animated.View style={[transform, {opacity: shouldDisplayLabel ? 1 : 0}]}>
       <FollowerContainer onLayout={handleLayout} ref={contentContainerRef} />
     </Animated.View>
   );
@@ -189,7 +209,7 @@ export const useLabelContainerProps = (floating: boolean) => {
     setLabelContainerHeight(height);
   }, []);
 
-  const top = floating ? -labelContainerHeight : 0;
+  const top = floating ? -(labelContainerHeight + Spacing.XS) : Spacing.XS;
   const style = [
     floating ? styles.labelFloatingContainer : styles.labelFixedContainer,
     {top},

package/index.tsx

@@ -32,20 +32,86 @@ const trueFunc = () => true;
 const falseFunc = () => false;
 
 export interface SliderProps extends ViewProps {
+  /**
+   * Specifies the minimum value permitted for selection in the slider. This value sets the lower
+   * bound for the component.
+   */
   min: number;
+
+  /**
+   * Specifies the maximum value allowed for selection. This value sets the upper bound for the component.
+   */
   max: number;
+
+  /**
+   * Optional. Defines the minimum permitted range between the low and high values of the slider.
+   * Particularly useful when 'low' and 'high' values both exist, ensuring a certain spread between them.
+   */
   minRange?: number;
+
+  /**
+   * Specifies the interval between individual step values. The slider's handle will move only in these increments.
+   */
   step: number;
+
+  /**
+   * Optional. Represents the initial lower value of the range when the component is used as a range slider.
+   * This value is part of the selected range, between 'min' and 'high'.
+   */
   low?: number;
+
+  /**
+   * Optional. Represents the initial upper value of the range when used as a range slider.
+   * This value is part of the selected range, between 'low' and 'max'.
+   */
   high?: number;
+
+  /**
+   * Optional. If `true`, allows the label to extend beyond the width of the Slider component itself,
+   * rather than being clipped at the component boundaries. Defaults to `false` if not provided.
+   */
   allowLabelOverflow?: boolean;
+
+  /**
+   * Optional. If `true`, disables the range functionality of the slider, turning it into a regular
+   * single-value slider. Defaults to `false` if not provided.
+   */
   disableRange?: boolean;
-  disabled?: boolean;
+
+  /**
+   * Optional. If `true`, the 'high' handle of the slider will be disabled and cannot be moved.
+   * Useful for setting a maximum limit that users cannot increase. Defaults to `false` if not provided.
+   */
+  disabledHigh?: boolean;
+
+  /**
+   * Optional. If `true`, the 'low' handle of the slider will be disabled and cannot be moved.
+   * Useful for setting a minimum limit that users cannot decrease. Defaults to `false` if not provided.
+   */
+  disabledLow?: boolean;
+
+  /**
+   * Optional. If `true`, labels will be displayed in a floating manner above the slider handles,
+   * typically used to display the current value. Defaults to `false` if not provided.
+   */
   floatingLabel?: boolean;
-  renderRail: () => ReactNode;
-  renderRailSelected: () => ReactNode;
+
+  /**
+   * Optional. A callback function triggered when the slider value changes, either by the user or programmatically.
+   * It receives the new low and high values of the slider, as well as a boolean indicating if the change was made by the user.
+   */
   onValueChanged?: (low: number, high: number, byUser: boolean) => void;
+
+  /**
+   * Optional. A callback function triggered when the user starts touching the slider's draggable area.
+   * It receives the current low and high values of the slider.
+   */
   onSliderTouchStart?: (low: number, high: number) => void;
+
+  /**
+   * Optional. A callback function triggered when the user releases the slider's draggable area.
+   * It receives the current low and high values of the slider.
+   */
   onSliderTouchEnd?: (low: number, high: number) => void;
 }
 
@@ -59,12 +125,11 @@ const Slider: React.FC<SliderProps> = ({
   floatingLabel = false,
   allowLabelOverflow = false,
   disableRange = false,
-  disabled = false,
+  disabledHigh = false,
+  disabledLow = false,
   onValueChanged,
   onSliderTouchStart,
   onSliderTouchEnd,
-  renderRail,
-  renderRailSelected,
   ...restProps
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -169,9 +234,18 @@ const Slider: React.FC<SliderProps> = ({
     gestureStateRef,
     isPressed,
     allowLabelOverflow,
+    disabledLow,
+    disabledHigh,
   );
 
   const renderThumb = (name: string) => {
+    const isDisabled =
+      (name === 'low' && disabledLow) || (name === 'high' && disabledHigh);
+
+    const thumbColor = isDisabled
+      ? theme.colors.text.disable
+      : theme.colors.primary;
+
     return (
       <View
         style={[
@@ -182,7 +256,7 @@ const Slider: React.FC<SliderProps> = ({
             borderRadius: Radius.M,
             borderWidth: 4,
             borderColor: theme.colors.background.surface,
-            backgroundColor: theme.colors.primary,
+            backgroundColor: thumbColor,
           },
         ]}
       />
@@ -209,9 +283,6 @@ const Slider: React.FC<SliderProps> = ({
         ) => Math.abs(gestureState.dx) > 2 * Math.abs(gestureState.dy),
 
         onPanResponderGrant: ({nativeEvent}, gestureState) => {
-          if (disabled) {
-            return;
-          }
           const {numberActiveTouches} = gestureState;
           if (numberActiveTouches > 1) {
             return;
@@ -237,6 +308,10 @@ const Slider: React.FC<SliderProps> = ({
             disableRange || isLowCloser(downX, lowPosition, highPosition);
           gestureStateRef.current.isLow = isLow;
 
+          if ((isLow && disabledLow) || (!isLow && disabledHigh)) {
+            return;
+          }
+
           const handlePositionChange = (positionInView: number) => {
             const {low, high, min, max, step} = inPropsRef.current;
             const minValue = isLow ? min : low + minRange;
@@ -278,13 +353,25 @@ const Slider: React.FC<SliderProps> = ({
           });
         },
 
-        onPanResponderMove: disabled
-          ? undefined
-          : Animated.event([null, {moveX: pointerX}], {useNativeDriver: false}),
+        onPanResponderMove: (evt, gestureState) => {
+          if (gestureStateRef.current.isLow ? disabledLow : disabledHigh) {
+            return;
+          }
+
+          Animated.event([null, {moveX: pointerX}], {
+            useNativeDriver: false,
+          })(evt, gestureState);
+        },
 
         onPanResponderRelease: () => {
           setPressed(false);
           const {low, high} = inPropsRef.current;
+          if (
+            (gestureStateRef.current.isLow && disabledLow) ||
+            (!gestureStateRef.current.isLow && disabledHigh)
+          ) {
+            return;
+          }
           onSliderTouchEnd?.(low, high);
         },
       }),
@@ -293,8 +380,9 @@ const Slider: React.FC<SliderProps> = ({
       inPropsRef,
       thumbWidth,
       disableRange,
-      disabled,
       onValueChanged,
+      disabledHigh,
+      disabledLow,
       setLow,
       setHigh,
       labelUpdate,
@@ -315,6 +403,11 @@ const Slider: React.FC<SliderProps> = ({
     );
   };
 
+  const trackColor =
+    disabledHigh && disabledLow
+      ? theme.colors.text.disable
+      : theme.colors.primary;
+
   return (
     <View {...restProps}>
       <View {...labelContainerProps}>{labelView}</View>
@@ -322,7 +415,7 @@ const Slider: React.FC<SliderProps> = ({
         <View style={railContainerStyles}>
           {renderTrack(theme.colors.background.default)}
           <Animated.View style={selectedRailStyle}>
-            {renderTrack(theme.colors.primary)}
+            {renderTrack(trackColor)}
           </Animated.View>
         </View>
         <Animated.View style={lowStyles} onLayout={handleThumbLayout}>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/slider",
-    "version": "0.77.5",
+    "version": "0.77.7",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},

package/styles.ts

@@ -1,4 +1,5 @@
 import {I18nManager, StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '@momo-kits/foundation';
 
 export default StyleSheet.create({
   controlsContainer: {
@@ -26,4 +27,10 @@ export default StyleSheet.create({
   touchableArea: {
     ...StyleSheet.absoluteFillObject,
   },
+  label: {
+    backgroundColor: Colors.black_01,
+    paddingVertical: Spacing.XXS,
+    paddingHorizontal: Spacing.XS,
+    borderRadius: Radius.XS,
+  },
 });