related-ui-components 2.6.1 → 2.6.2

package/src/components/RangeSlider/SliderLabel.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import Animated, {
+  SharedValue,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+} from "react-native-reanimated";
+import { ThemeType, useTheme } from "../../theme";
+
+const LABEL_HEIGHT = 26;
+
+interface SliderLabelsProps {
+  leftValue: string;
+  rightValue: string;
+  leftPosition: SharedValue<number>;
+  rightPosition: SharedValue<number>;
+  sliderWidth: number;
+  thumbSize: number;
+  theme?: ThemeType
+}
+
+interface CenteredLabelProps {
+  value: string;
+  position: SharedValue<number>;
+  sliderWidth: number;
+  thumbSize: number;
+  theme?: ThemeType
+
+}
+
+const CenteredLabel: React.FC<CenteredLabelProps> = ({
+  value,
+  position,
+  sliderWidth,
+  thumbSize,
+  theme
+}) => {
+  const labelWidth = useSharedValue(0);
+  const {theme: defaultTheme} = useTheme();
+  const currTheme = theme || defaultTheme;
+  const styles = getStyles(currTheme);
+
+  const animatedLabelStyle = useAnimatedStyle(() => {
+    const rawCenter = position.value + thumbSize / 2;
+    const shifted = rawCenter - labelWidth.value / 2;
+
+    const left = Math.min(Math.max(shifted, 0), sliderWidth - labelWidth.value);
+
+    return {
+      left: left,
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[styles.labelContainer, animatedLabelStyle]}
+      onLayout={(e) => {
+        labelWidth.value = e.nativeEvent.layout.width;
+      }}
+    >
+      <Text style={styles.labelText}>
+        {value}
+      </Text>
+    </Animated.View>
+  );
+};
+
+export const SliderLabels: React.FC<SliderLabelsProps> = ({
+  leftValue,
+  rightValue,
+  leftPosition,
+  rightPosition,
+  sliderWidth,
+  thumbSize,
+  theme
+}) => {
+  const {theme: defaultTheme} = useTheme();
+  const currTheme = theme || defaultTheme;
+  const styles = getStyles(currTheme);
+  const rightThumbLeftPosition = useDerivedValue(() => {
+    return rightPosition.value - thumbSize;
+  });
+  return (
+    <View style={styles.wrapper} pointerEvents="none">
+      <CenteredLabel
+        value={leftValue}
+        thumbSize={thumbSize}
+        position={leftPosition}
+        sliderWidth={sliderWidth}
+      />
+      <CenteredLabel
+        value={rightValue}
+        thumbSize={thumbSize}
+        position={rightThumbLeftPosition}
+        sliderWidth={sliderWidth}
+      />
+    </View>
+  );
+};
+
+const getStyles = (theme: ThemeType) =>
+  StyleSheet.create({
+    wrapper: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+    },
+    labelContainer: {
+      position: "absolute",
+      top: -LABEL_HEIGHT + 4,
+      alignItems: "center",
+    },
+    labelText: {
+      backgroundColor: theme.surface,
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 4,
+      color: theme.onSurface,
+      fontSize: 14,
+      fontFamily: "DinBold",
+    },
+  });