related-ui-components 4.2.2 → 4.2.4

package/src/components/RangeSlider/RangeSlider.tsx

@@ -6,10 +6,12 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
 } from "react-native-reanimated";
-import { SliderLabels } from "./SliderLabel";
 import { ThemeType, useTheme } from "../../theme";
+import { SliderLabels } from "./SliderLabel";
+import { Input } from "../Input";
 
 const THUMB_SIZE = 28;
+const THUMB_RADIUS = THUMB_SIZE / 2;
 const RAIL_HEIGHT = 6;
 const LABEL_HEIGHT = 26;
 
@@ -25,11 +27,17 @@ interface RangeSliderProps {
   onValueChange: (values: { min: number; max: number }) => void;
   theme?: ThemeType;
   scale?: ScaleType;
-  /**
-   * For percentile scale: array of all values in your dataset
-   * The slider will distribute positions based on data density
-   */
   dataPoints?: number[];
+  showCustomInputs?: boolean;
+  inputPlaceholders?: {
+    min?: string;
+    max?: string;
+  };
+  inputLabels?: {
+    min?: string;
+    max?: string;
+  };
+  isBottomSheet?: boolean;
 }
 
 /**
@@ -39,12 +47,10 @@ interface RangeSliderProps {
 function createPercentileBreakpoints(data: number[]): number[] {
   const sorted = [...new Set(data)].sort((a, b) => a - b);
 
-  // If small dataset, use all unique values
   if (sorted.length <= 100) {
     return sorted;
   }
 
-  // For larger datasets, sample at percentile intervals
   const breakpoints: number[] = [];
   const numBreakpoints = 100;
 
@@ -90,6 +96,10 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
   theme,
   scale = "linear",
   dataPoints,
+  showCustomInputs = false,
+  inputPlaceholders,
+  inputLabels,
+  isBottomSheet = false,
 }) => {
   const { theme: defaultTheme } = useTheme();
   const currTheme = theme || defaultTheme;
@@ -98,9 +108,20 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
 
   const [leftLabel, setLeftLabel] = useState(initialMinValue.toLocaleString());
   const [rightLabel, setRightLabel] = useState(
-    initialMaxValue.toLocaleString()
+    initialMaxValue.toLocaleString(),
+  );
+
+  // State for custom input fields
+  const [minInputValue, setMinInputValue] = useState(
+    initialMinValue.toString(),
+  );
+  const [maxInputValue, setMaxInputValue] = useState(
+    initialMaxValue.toString(),
   );
 
+  // The effective track width (where thumb CENTER can travel)
+  const effectiveWidth = sliderWidth - THUMB_SIZE;
+
   // Pre-compute breakpoints for percentile scale
   const breakpoints = useMemo(() => {
     if (scale === "percentile" && dataPoints?.length) {
@@ -117,7 +138,6 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
       let percentage: number;
 
       if (scale === "percentile" && breakpoints.length > 1) {
-        // Find where this value falls in the breakpoints
         const index = findBreakpointIndex(breakpoints, value);
 
         if (index === 0) {
@@ -125,7 +145,6 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
         } else if (index >= breakpoints.length - 1) {
           percentage = 1;
         } else {
-          // Interpolate between breakpoints
           const lowerVal = breakpoints[index - 1];
           const upperVal = breakpoints[index];
           const lowerPct = (index - 1) / (breakpoints.length - 1);
@@ -147,41 +166,52 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
         percentage = (value - min) / (max - min);
       }
 
-      return isRTL ? (1 - percentage) * sliderWidth : percentage * sliderWidth;
+      // Map to effective width, offset by thumb radius
+      const position = percentage * effectiveWidth + THUMB_RADIUS;
+      return isRTL ? sliderWidth - position : position;
     },
-    [min, max, safeMin, sliderWidth, isRTL, scale, breakpoints]
+    [min, max, safeMin, sliderWidth, effectiveWidth, isRTL, scale, breakpoints],
   );
 
   const positionToValue = useCallback(
     (position: number) => {
       "worklet";
-      const percentage = isRTL
-        ? 1 - position / sliderWidth
-        : position / sliderWidth;
+      // Convert position to percentage using effective width
+      const adjustedPosition = isRTL ? sliderWidth - position : position;
+      const percentage = (adjustedPosition - THUMB_RADIUS) / effectiveWidth;
+      const clampedPercentage = Math.max(0, Math.min(1, percentage));
 
       let rawValue: number;
 
       if (scale === "percentile" && breakpoints.length > 1) {
-        // Map percentage to breakpoint index
-        const exactIndex = percentage * (breakpoints.length - 1);
+        const exactIndex = clampedPercentage * (breakpoints.length - 1);
         const lowerIndex = Math.floor(exactIndex);
         const upperIndex = Math.min(lowerIndex + 1, breakpoints.length - 1);
         const ratio = exactIndex - lowerIndex;
-
         rawValue =
           breakpoints[lowerIndex] +
           ratio * (breakpoints[upperIndex] - breakpoints[lowerIndex]);
       } else if (scale === "logarithmic") {
         const logMin = Math.log(safeMin);
         const logMax = Math.log(max);
-        rawValue = Math.exp(logMin + percentage * (logMax - logMin));
+        rawValue = Math.exp(logMin + clampedPercentage * (logMax - logMin));
       } else {
-        rawValue = percentage * (max - min) + min;
+        rawValue = clampedPercentage * (max - min) + min;
       }
 
       return Math.round(rawValue / step) * step;
     },
-    [min, max, safeMin, step, sliderWidth, isRTL, scale, breakpoints]
+    [
+      min,
+      max,
+      safeMin,
+      step,
+      sliderWidth,
+      effectiveWidth,
+      isRTL,
+      scale,
+      breakpoints,
+    ],
   );
 
   const leftPosition = useSharedValue(valueToPosition(initialMinValue));
@@ -206,21 +236,29 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
       const newPos = context.value.x + e.translationX;
 
       if (activeThumb.value === "left") {
-        const lowerBound = isRTL ? rightPosition.value + THUMB_SIZE : 0;
+        const lowerBound = isRTL
+          ? rightPosition.value + THUMB_SIZE
+          : THUMB_RADIUS;
         const upperBound = isRTL
-          ? sliderWidth
+          ? sliderWidth - THUMB_RADIUS
           : rightPosition.value - THUMB_SIZE;
         const clampedPos = Math.max(Math.min(newPos, upperBound), lowerBound);
         leftPosition.value = clampedPos;
-        runOnJS(setLeftLabel)(positionToValue(clampedPos).toLocaleString());
+        const newValue = positionToValue(clampedPos);
+        runOnJS(setLeftLabel)(newValue.toLocaleString());
+        runOnJS(setMinInputValue)(newValue.toString());
       } else {
-        const lowerBound = isRTL ? 0 : leftPosition.value + THUMB_SIZE;
+        const lowerBound = isRTL
+          ? THUMB_RADIUS
+          : leftPosition.value + THUMB_SIZE;
         const upperBound = isRTL
           ? leftPosition.value - THUMB_SIZE
-          : sliderWidth;
+          : sliderWidth - THUMB_RADIUS;
         const clampedPos = Math.max(Math.min(newPos, upperBound), lowerBound);
         rightPosition.value = clampedPos;
-        runOnJS(setRightLabel)(positionToValue(clampedPos).toLocaleString());
+        const newValue = positionToValue(clampedPos);
+        runOnJS(setRightLabel)(newValue.toLocaleString());
+        runOnJS(setMaxInputValue)(newValue.toString());
       }
     })
     .onEnd(() => {
@@ -231,12 +269,99 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
       activeThumb.value = null;
     });
 
+  // Handlers for custom input fields
+  const handleMinInputChange = useCallback((text: string) => {
+    // Allow only numeric input (with optional decimal)
+    const sanitized = text.replace(/[^0-9.]/g, "");
+    setMinInputValue(sanitized);
+  }, []);
+
+  const handleMaxInputChange = useCallback((text: string) => {
+    const sanitized = text.replace(/[^0-9.]/g, "");
+    setMaxInputValue(sanitized);
+  }, []);
+
+  const handleMinInputSubmit = useCallback(() => {
+    const parsed = parseFloat(minInputValue);
+    if (isNaN(parsed)) {
+      // Reset to current slider value
+      const currentValue = positionToValue(leftPosition.value);
+      setMinInputValue(currentValue.toString());
+      return;
+    }
+
+    // Clamp value: must be >= min and <= current max value
+    const currentMaxValue = positionToValue(rightPosition.value);
+    const clampedValue = Math.max(
+      min,
+      Math.min(parsed, currentMaxValue - step),
+    );
+    const steppedValue = Math.round(clampedValue / step) * step;
+
+    // Update input display
+    setMinInputValue(steppedValue.toString());
+    setLeftLabel(steppedValue.toLocaleString());
+
+    // Update slider position
+    leftPosition.value = valueToPosition(steppedValue);
+
+    // Trigger callback
+    onValueChange({ min: steppedValue, max: currentMaxValue });
+  }, [
+    minInputValue,
+    min,
+    step,
+    leftPosition,
+    rightPosition,
+    positionToValue,
+    valueToPosition,
+    onValueChange,
+  ]);
+
+  const handleMaxInputSubmit = useCallback(() => {
+    const parsed = parseFloat(maxInputValue);
+    if (isNaN(parsed)) {
+      // Reset to current slider value
+      const currentValue = positionToValue(rightPosition.value);
+      setMaxInputValue(currentValue.toString());
+      return;
+    }
+
+    // Clamp value: must be <= max and >= current min value
+    const currentMinValue = positionToValue(leftPosition.value);
+    const clampedValue = Math.min(
+      max,
+      Math.max(parsed, currentMinValue + step),
+    );
+    const steppedValue = Math.round(clampedValue / step) * step;
+
+    // Update input display
+    setMaxInputValue(steppedValue.toString());
+    setRightLabel(steppedValue.toLocaleString());
+
+    // Update slider position
+    rightPosition.value = valueToPosition(steppedValue);
+
+    // Trigger callback
+    onValueChange({ min: currentMinValue, max: steppedValue });
+  }, [
+    maxInputValue,
+    max,
+    step,
+    leftPosition,
+    rightPosition,
+    positionToValue,
+    valueToPosition,
+    onValueChange,
+  ]);
+
+  // Thumb position = center of thumb, so offset by radius to get left edge
   const animatedLeftThumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: leftPosition.value - (isRTL ? THUMB_SIZE : 0) }],
+    transform: [{ translateX: leftPosition.value - THUMB_RADIUS }],
   }));
 
   const animatedRightThumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: rightPosition.value - (isRTL ? 0 : THUMB_SIZE) }],
+    transform: [{ translateX: rightPosition.value - THUMB_RADIUS }],
   }));
 
   const animatedActiveRailStyle = useAnimatedStyle(() => {
@@ -249,15 +374,53 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
   });
 
   return (
-    <View style={[styles.container, { width: sliderWidth }]}>
-      <SliderLabels
-        leftValue={leftLabel}
-        rightValue={rightLabel}
-        leftPosition={leftPosition}
-        rightPosition={rightPosition}
-        sliderWidth={sliderWidth}
-        thumbSize={THUMB_SIZE}
-      />
+    <View
+      style={[
+        showCustomInputs ? styles.containerWithInputs : styles.container,
+        { width: sliderWidth },
+      ]}
+    >
+      {showCustomInputs ? (
+        <View style={styles.inputsContainer}>
+          <View style={styles.inputWrapper}>
+            <Input
+              label={inputLabels?.min ?? "Min"}
+              value={minInputValue}
+              onChangeText={handleMinInputChange}
+              onBlur={handleMinInputSubmit}
+              onSubmitEditing={handleMinInputSubmit}
+              keyboardType="numeric"
+              placeholder={inputPlaceholders?.min}
+              placeholderTextColor={currTheme.surfaceVariant}
+              returnKeyType="done"
+              isBottomSheet={isBottomSheet}
+            />
+          </View>
+          <View style={styles.inputWrapper}>
+            <Input
+              label={inputLabels?.max ?? "Max"}
+              value={maxInputValue}
+              onChangeText={handleMaxInputChange}
+              onBlur={handleMaxInputSubmit}
+              onSubmitEditing={handleMaxInputSubmit}
+              keyboardType="numeric"
+              placeholder={inputPlaceholders?.max}
+              placeholderTextColor={currTheme.surfaceVariant}
+              returnKeyType="done"
+              isBottomSheet={isBottomSheet}
+            />
+          </View>
+        </View>
+      ) : (
+        <SliderLabels
+          leftValue={leftLabel}
+          rightValue={rightLabel}
+          leftPosition={leftPosition}
+          rightPosition={rightPosition}
+          sliderWidth={sliderWidth}
+          thumbSize={THUMB_SIZE}
+        />
+      )}
 
       <GestureDetector gesture={panGesture}>
         <View style={styles.railContainer}>
@@ -289,6 +452,9 @@ const getStyles = (theme: ThemeType) =>
       marginTop: LABEL_HEIGHT,
       direction: "ltr",
     },
+    containerWithInputs: {
+      direction: "ltr",
+    },
     railContainer: {
       justifyContent: "center",
       height: THUMB_SIZE,
@@ -318,6 +484,34 @@ const getStyles = (theme: ThemeType) =>
       borderColor: theme.primary,
       borderWidth: 5,
     },
+    inputsContainer: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      gap: 16,
+      marginBottom: 12,
+      direction: I18nManager.isRTL ? "rtl" : "ltr",
+    },
+    inputWrapper: {
+      flex: 1,
+    },
+    inputLabel: {
+      color: theme.onSurface,
+      fontSize: 13,
+      fontFamily: "DinMedium",
+      marginBottom: 6,
+    },
+    input: {
+      backgroundColor: theme.background,
+      paddingHorizontal: 16,
+      paddingVertical: 10,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: theme.surfaceVariant,
+      color: theme.onSurface,
+      fontSize: 15,
+      fontFamily: "DinBold",
+      textAlign: "center",
+    },
   });
 
-export default RangeSlider;
+export default RangeSlider;

package/src/components/RangeSlider/SliderLabel.tsx

@@ -1,14 +1,16 @@
 import React from "react";
 import { I18nManager, StyleSheet, Text, View } from "react-native";
 import Animated, {
-  SharedValue,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
+    SharedValue,
+    useAnimatedStyle,
+    useDerivedValue,
+    useSharedValue,
 } from "react-native-reanimated";
 import { ThemeType, useTheme } from "../../theme";
 
 const LABEL_HEIGHT = 26;
+const LABEL_PADDING = 8;
+const MIN_GAP = 4;
 
 interface SliderLabelsProps {
   leftValue: string;
@@ -17,51 +19,100 @@ interface SliderLabelsProps {
   rightPosition: SharedValue<number>;
   sliderWidth: number;
   thumbSize: number;
-  theme?: ThemeType
+  theme?: ThemeType;
 }
 
-interface CenteredLabelProps {
+interface SingleLabelProps {
   value: string;
   position: SharedValue<number>;
   sliderWidth: number;
-  thumbSize: number;
-  theme?: ThemeType
+  onWidthChange: (width: number) => void;
+  isVisible: SharedValue<boolean>;
+  theme: ThemeType;
+}
 
+interface MergedLabelProps {
+  leftValue: string;
+  rightValue: string;
+  leftPosition: SharedValue<number>;
+  rightPosition: SharedValue<number>;
+  sliderWidth: number;
+  isVisible: SharedValue<boolean>;
+  theme: ThemeType;
 }
 
-const CenteredLabel: React.FC<CenteredLabelProps> = ({
+const SingleLabel: React.FC<SingleLabelProps> = ({
   value,
   position,
   sliderWidth,
-  thumbSize,
-  theme
+  onWidthChange,
+  isVisible,
+  theme,
 }) => {
-  const labelWidth = useSharedValue(0);
-  const {theme: defaultTheme} = useTheme();
-  const currTheme = theme || defaultTheme;
-  const styles = getStyles(currTheme);
+  const styles = getStyles(theme);
+  const localWidth = useSharedValue(0);
 
-  const animatedLabelStyle = useAnimatedStyle(() => {
-    const rawCenter = position.value + thumbSize / 2;
-    const shifted = rawCenter - labelWidth.value / 2;
+  const animatedStyle = useAnimatedStyle(() => {
+    const halfLabel = localWidth.value / 2;
+    const rawCenter = position.value;
+    const shifted = rawCenter - halfLabel;
+    const left = Math.min(Math.max(shifted, 0), sliderWidth - localWidth.value);
 
+    return {
+      left,
+      opacity: isVisible.value ? 1 : 0,
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[styles.labelContainer, animatedStyle]}
+      onLayout={(e) => {
+        const width = e.nativeEvent.layout.width;
+        localWidth.value = width;
+        onWidthChange(width);
+      }}
+    >
+      <Text style={styles.labelText}>{value}</Text>
+    </Animated.View>
+  );
+};
+
+const MergedLabel: React.FC<MergedLabelProps> = ({
+  leftValue,
+  rightValue,
+  leftPosition,
+  rightPosition,
+  sliderWidth,
+  isVisible,
+  theme,
+}) => {
+  const styles = getStyles(theme);
+  const labelWidth = useSharedValue(0);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const centerPosition = (leftPosition.value + rightPosition.value) / 2;
+    const halfLabel = labelWidth.value / 2;
+    const shifted = centerPosition - halfLabel;
     const left = Math.min(Math.max(shifted, 0), sliderWidth - labelWidth.value);
 
     return {
-      left: left,
+      left,
+      opacity: isVisible.value ? 1 : 0,
     };
   });
 
+  const displayText =
+    leftValue === rightValue ? leftValue : `${leftValue} - ${rightValue}`;
+
   return (
     <Animated.View
-      style={[styles.labelContainer, animatedLabelStyle]}
+      style={[styles.labelContainer, animatedStyle]}
       onLayout={(e) => {
         labelWidth.value = e.nativeEvent.layout.width;
       }}
     >
-      <Text style={styles.labelText}>
-        {value}
-      </Text>
+      <Text style={styles.labelText}>{displayText}</Text>
     </Animated.View>
   );
 };
@@ -77,29 +128,62 @@ export const SliderLabels: React.FC<SliderLabelsProps> = ({
 }) => {
   const { theme: defaultTheme } = useTheme();
   const currTheme = theme || defaultTheme;
-  const styles = getStyles(currTheme);
-  const rightThumbLeftPosition = useDerivedValue(() => {
-    return rightPosition.value - thumbSize;
-  });
-  const leftThumbLeftPosition = useDerivedValue(() => {
-    return leftPosition.value - thumbSize;
+  const isRTL = I18nManager.isRTL;
+
+  // Track label widths in parent for overlap calculation
+  const leftLabelWidth = useSharedValue(0);
+  const rightLabelWidth = useSharedValue(0);
+
+  const shouldMerge = useDerivedValue(() => {
+    const leftCenter = leftPosition.value;
+    const rightCenter = rightPosition.value;
+
+    const leftEnd = leftCenter + leftLabelWidth.value / 2;
+    const rightStart = rightCenter - rightLabelWidth.value / 2;
+
+    if (isRTL) {
+      const rtlLeftEnd = rightCenter + rightLabelWidth.value / 2;
+      const rtlRightStart = leftCenter - leftLabelWidth.value / 2;
+      return rtlRightStart - rtlLeftEnd < MIN_GAP;
+    }
+
+    return rightStart - leftEnd < MIN_GAP;
   });
 
-  const isRTL = I18nManager.isRTL;
+  const showSeparate = useDerivedValue(() => !shouldMerge.value);
+  const showMerged = useDerivedValue(() => shouldMerge.value);
 
   return (
-    <View style={styles.wrapper} pointerEvents="none">
-      <CenteredLabel
+    <View style={getStyles(currTheme).wrapper} pointerEvents="none">
+      <SingleLabel
         value={leftValue}
-        thumbSize={thumbSize}
-        position={isRTL ? leftThumbLeftPosition : leftPosition}
+        position={leftPosition}
         sliderWidth={sliderWidth}
+        onWidthChange={(width) => {
+          leftLabelWidth.value = width;
+        }}
+        isVisible={showSeparate}
+        theme={currTheme}
       />
-      <CenteredLabel
+      <SingleLabel
         value={rightValue}
-        thumbSize={thumbSize}
-        position={isRTL ? rightPosition : rightThumbLeftPosition}
+        position={rightPosition}
+        sliderWidth={sliderWidth}
+        onWidthChange={(width) => {
+          rightLabelWidth.value = width;
+        }}
+        isVisible={showSeparate}
+        theme={currTheme}
+      />
+
+      <MergedLabel
+        leftValue={leftValue}
+        rightValue={rightValue}
+        leftPosition={leftPosition}
+        rightPosition={rightPosition}
         sliderWidth={sliderWidth}
+        isVisible={showMerged}
+        theme={currTheme}
       />
     </View>
   );
@@ -119,7 +203,7 @@ const getStyles = (theme: ThemeType) =>
     },
     labelText: {
       backgroundColor: theme.surface,
-      paddingHorizontal: 8,
+      paddingHorizontal: LABEL_PADDING,
       paddingVertical: 4,
       borderRadius: 4,
       color: theme.onSurface,

package/src/contexts/UniversalModalProvider.tsx

@@ -297,8 +297,8 @@ export const useModal = () => {
 
 const styles = StyleSheet.create({
   overlayWrapper: {
-    zIndex: 1000,
-    elevation: 1000,
+    // zIndex: 1000,
+    // elevation: 1000,
   },
   backdrop: {
     backgroundColor: "rgba(0, 0, 0, 0.6)",