related-ui-components 2.6.0 → 2.6.2

package/lib/module/components/index.js

@@ -22,4 +22,5 @@ export * from "./CustomIcon/index.js";
 export * from "./CarouselCardStack/index.js";
 export * from "./TravelBooking/index.js";
 export * from "./DateRangePicker/index.js";
+export * from "./RangeSlider/index.js";
 //# sourceMappingURL=index.js.map

package/lib/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAe,mBAAU;AACzB,cAAc,mBAAU;AACxB,cAAc,sBAAa;AAC3B,cAAc,oBAAW;AACzB,cAAc,kBAAS;AACvB,cAAc,wBAAe;AAC7B,cAAc,kBAAS;AACvB,cAAc,6BAAoB;AAClC,cAAc,wBAAe;AAC7B,cAAc,0BAAiB;AAC/B,cAAc,kBAAS;AACvB,cAAc,sBAAa;AAC3B,cAAc,oBAAW;AACzB,cAAc,4BAAmB;AACjC,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,uBAAc;AAC5B,cAAc,8BAAqB;AACnC,cAAc,0BAAiB;AAC/B,cAAc,4BAAmB","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAe,mBAAU;AACzB,cAAc,mBAAU;AACxB,cAAc,sBAAa;AAC3B,cAAc,oBAAW;AACzB,cAAc,kBAAS;AACvB,cAAc,wBAAe;AAC7B,cAAc,kBAAS;AACvB,cAAc,6BAAoB;AAClC,cAAc,wBAAe;AAC7B,cAAc,0BAAiB;AAC/B,cAAc,kBAAS;AACvB,cAAc,sBAAa;AAC3B,cAAc,oBAAW;AACzB,cAAc,4BAAmB;AACjC,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,uBAAc;AAC5B,cAAc,8BAAqB;AACnC,cAAc,0BAAiB;AAC/B,cAAc,4BAAmB;AACjC,cAAc,wBAAe","ignoreList":[]}

package/lib/typescript/src/app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAqDxC,QAAA,MAAM,GAAG,yBA6ER,CAAC;AAUF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAsDxC,QAAA,MAAM,GAAG,yBA8ER,CAAC;AAUF,eAAe,GAAG,CAAC"}

package/lib/typescript/src/components/RangeSlider/RangeSlider.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { ThemeType } from "../../theme";
+interface RangeSliderProps {
+    min: number;
+    max: number;
+    step?: number;
+    sliderWidth: number;
+    initialMinValue: number;
+    initialMaxValue: number;
+    onValueChange: (values: {
+        min: number;
+        max: number;
+    }) => void;
+    theme?: ThemeType;
+}
+declare const RangeSlider: React.FC<RangeSliderProps>;
+export default RangeSlider;
+//# sourceMappingURL=RangeSlider.d.ts.map

package/lib/typescript/src/components/RangeSlider/RangeSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AASrD,OAAO,EAAE,SAAS,EAAY,MAAM,aAAa,CAAC;AAMlD,UAAU,gBAAgB;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAE9D,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgI3C,CAAC;AAwCF,eAAe,WAAW,CAAC"}

package/lib/typescript/src/components/RangeSlider/SliderLabel.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { SharedValue } from "react-native-reanimated";
+import { ThemeType } from "../../theme";
+interface SliderLabelsProps {
+    leftValue: string;
+    rightValue: string;
+    leftPosition: SharedValue<number>;
+    rightPosition: SharedValue<number>;
+    sliderWidth: number;
+    thumbSize: number;
+    theme?: ThemeType;
+}
+export declare const SliderLabels: React.FC<SliderLabelsProps>;
+export {};
+//# sourceMappingURL=SliderLabel.d.ts.map

package/lib/typescript/src/components/RangeSlider/SliderLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderLabel.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeSlider/SliderLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAiB,EACf,WAAW,EAIZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAY,MAAM,aAAa,CAAC;AAIlD,UAAU,iBAAiB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAgDD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+BpD,CAAC"}

package/lib/typescript/src/components/RangeSlider/index.d.ts

@@ -0,0 +1,3 @@
+export { default as RangeSlider } from "./RangeSlider";
+export * from "./RangeSlider";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/RangeSlider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeSlider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,cAAc,eAAe,CAAC"}

package/lib/typescript/src/components/index.d.ts

@@ -20,4 +20,5 @@ export * from "./CustomIcon";
 export * from "./CarouselCardStack";
 export * from "./TravelBooking";
 export * from "./DateRangePicker";
+export * from "./RangeSlider";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAe,UAAU,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAe,UAAU,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "related-ui-components",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "main": "./src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/app.tsx

@@ -10,6 +10,7 @@ import {
   HotelForm,
   HotelSummary,
   Filters,
+  RangeSlider,
 } from "./components";
 import { lightTheme, RelatedProvider, useTheme } from "./theme";
 import CircularProgressBar from "./components/ProgressBar/CircularProgressBar";
@@ -119,7 +120,8 @@ const App = () => {
               {/* <DateRangePicker onDatesChange={()=>{}} labelContainerStyle={{backgroundColor:"red"}}></DateRangePicker> */}
               {/* <CarRentalForm onSelectionChange={console.log}></CarRentalForm> */}
               {/* <CarouselCardStack data={DUMMY_DATA} /> */}
-              <CircularProgressBar variant="steps" totalSteps={4} currentStep={4} size={43}  strokeWidth={2} progressColor="#9CA0A3"></CircularProgressBar>
+              {/* <CircularProgressBar variant="steps" totalSteps={4} currentStep={4} size={43}  strokeWidth={2} progressColor="#9CA0A3"></CircularProgressBar> */}
+              <RangeSlider initialMinValue={0} initialMaxValue={100} min={0} max={500} sliderWidth={100} onValueChange={console.log}></RangeSlider>
               {/* <PhoneInput value="" onChangeText={() => {}} inputContainerStyle={{height: 55}}></PhoneInput> */}
             </SafeAreaView>
           </BottomSheetStackProvider>

package/src/components/RangeSlider/RangeSlider.tsx

@@ -0,0 +1,196 @@
+import React, { useCallback, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+} from "react-native-reanimated";
+import { SliderLabels } from "./SliderLabel";
+import { ThemeType, useTheme } from "../../theme";
+
+const THUMB_SIZE = 28;
+const RAIL_HEIGHT = 6;
+const LABEL_HEIGHT = 26;
+
+interface RangeSliderProps {
+  min: number;
+  max: number;
+  step?: number;
+  sliderWidth: number;
+  initialMinValue: number;
+  initialMaxValue: number;
+  onValueChange: (values: { min: number; max: number }) => void;
+
+  theme?: ThemeType
+}
+
+const RangeSlider: React.FC<RangeSliderProps> = ({
+  min,
+  max,
+  step = 1,
+  sliderWidth,
+  initialMinValue,
+  initialMaxValue,
+  onValueChange,
+  theme
+}) => {
+  const { theme: defaultTheme} = useTheme();
+
+  const currTheme = theme || defaultTheme;
+
+  const styles = getStyles(currTheme);
+
+  // State for label text values, passed down to the SliderLabels component
+  const [leftLabel, setLeftLabel] = useState(initialMinValue.toLocaleString());
+  const [rightLabel, setRightLabel] = useState(
+    initialMaxValue.toLocaleString()
+  );
+
+  const valueToPosition = useCallback(
+    (value: number) => {
+      "worklet";
+      return ((value - min) / (max - min)) * sliderWidth;
+    },
+    [min, max, sliderWidth]
+  );
+
+  const positionToValue = useCallback(
+    (position: number) => {
+      "worklet";
+      const rawValue = (position / sliderWidth) * (max - min) + min;
+      return Math.round(rawValue / step) * step;
+    },
+    [min, max, step, sliderWidth]
+  );
+
+  const leftPosition = useSharedValue(valueToPosition(initialMinValue));
+  const rightPosition = useSharedValue(valueToPosition(initialMaxValue));
+  const context = useSharedValue({ x: 0 });
+  const activeThumb = useSharedValue<"left" | "right" | null>(null);
+
+  const panGesture = Gesture.Pan()
+    .onBegin((e) => {
+      const distToLeft = Math.abs(e.x - leftPosition.value);
+      const distToRight = Math.abs(e.x - rightPosition.value);
+      if (distToLeft <= distToRight) {
+        activeThumb.value = "left";
+        context.value = { x: leftPosition.value };
+      } else {
+        activeThumb.value = "right";
+        context.value = { x: rightPosition.value };
+      }
+    })
+    .onUpdate((e) => {
+      if (activeThumb.value === null) return;
+      const newPos = context.value.x + e.translationX;
+
+      if (activeThumb.value === "left") {
+        const clampedPos = Math.max(
+          0,
+          Math.min(newPos, rightPosition.value - THUMB_SIZE)
+        );
+        leftPosition.value = clampedPos;
+        runOnJS(setLeftLabel)(positionToValue(clampedPos).toLocaleString());
+      } else {
+        const clampedPos = Math.min(
+          sliderWidth,
+          Math.max(newPos, leftPosition.value + THUMB_SIZE)
+        );
+        rightPosition.value = clampedPos;
+        runOnJS(setRightLabel)(positionToValue(clampedPos).toLocaleString());
+      }
+    })
+    .onEnd(() => {
+      if (activeThumb.value === null) return;
+      const finalLeftValue = positionToValue(leftPosition.value);
+      const finalRightValue = positionToValue(rightPosition.value);
+      runOnJS(onValueChange)({ min: finalLeftValue, max: finalRightValue });
+      activeThumb.value = null;
+    });
+
+  const animatedLeftThumbStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: leftPosition.value }],
+  }));
+
+  const animatedRightThumbStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: rightPosition.value - THUMB_SIZE }],
+  }));
+
+  const animatedActiveRailStyle = useAnimatedStyle(() => ({
+    left: leftPosition.value,
+    right: sliderWidth - rightPosition.value,
+  }));
+
+  return (
+    <View style={[styles.container, { width: sliderWidth }]}>
+      <SliderLabels
+        leftValue={leftLabel}
+        rightValue={rightLabel}
+        leftPosition={leftPosition}
+        rightPosition={rightPosition}
+        sliderWidth={sliderWidth}
+        thumbSize={THUMB_SIZE}
+      />
+
+      <GestureDetector gesture={panGesture}>
+        <View style={styles.railContainer}>
+          <View style={styles.rail} />
+          <Animated.View style={[styles.activeRail, animatedActiveRailStyle]} />
+
+          <Animated.View
+            style={[styles.thumbContainer, animatedLeftThumbStyle]}
+          >
+            <View style={styles.thumb} />
+          </Animated.View>
+
+          <Animated.View
+            style={[styles.thumbContainer, animatedRightThumbStyle]}
+          >
+            <View style={styles.thumb} />
+          </Animated.View>
+        </View>
+      </GestureDetector>
+    </View>
+  );
+};
+
+const getStyles = (theme: ThemeType) =>
+  StyleSheet.create({
+    container: {
+      height: LABEL_HEIGHT + THUMB_SIZE,
+      justifyContent: "center",
+      marginTop: LABEL_HEIGHT, // Add margin to prevent label cutoff
+    },
+    railContainer: {
+      justifyContent: "center",
+      height: THUMB_SIZE,
+    },
+    rail: {
+      height: RAIL_HEIGHT,
+      borderRadius: RAIL_HEIGHT / 2,
+      backgroundColor: theme.surface,
+    },
+    activeRail: {
+      height: RAIL_HEIGHT,
+      backgroundColor: theme.primary,
+      position: "absolute",
+    },
+    thumbContainer: {
+      position: "absolute",
+      width: THUMB_SIZE,
+      height: THUMB_SIZE,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    thumb: {
+      width: THUMB_SIZE,
+      height: THUMB_SIZE,
+      borderRadius: THUMB_SIZE / 2,
+      backgroundColor: theme.background,
+      borderColor: theme.primary,
+      borderWidth: 5,
+    },
+  });
+
+export default RangeSlider;

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",
+    },
+  });

package/src/components/RangeSlider/index.ts

@@ -0,0 +1,2 @@
+export { default as RangeSlider } from "./RangeSlider";
+export * from "./RangeSlider";

package/src/components/index.ts

@@ -19,4 +19,5 @@ export * from "./Skeleton";
 export * from "./CustomIcon"
 export * from "./CarouselCardStack";
 export * from "./TravelBooking";
-export * from "./DateRangePicker";
+export * from "./DateRangePicker";
+export * from "./RangeSlider";