related-ui-components 3.2.9 → 3.3.1

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,