related-ui-components 1.3.3 → 1.3.5

package/src/components/SelectAmount/SelectAmount.tsx

@@ -0,0 +1,217 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import { ThemeType, useTheme } from "../../theme";
+import {
+  View,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from "react-native";
+import Slider from "@react-native-community/slider";
+import NumericStepper from "../NumericStepper/NumericStepper";
+
+interface SelectAmountProps {
+  isRTL?: boolean;
+  pointsValue?: number;
+  minValue?: number;
+  maxValue?: number;
+  step?: number;
+  conversionRate?: number;
+  pointsLabel?: string;
+  currencyLabel?: string;
+  buttonText?: string;
+  title?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  rowStyle?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  currencyValueTextStyle?: StyleProp<TextStyle>;
+  stepperButtonStyle?: StyleProp<ViewStyle>;
+  stepperButtonTextStyle?: StyleProp<TextStyle>;
+  stepperValueTextStyle?: StyleProp<TextStyle>;
+  sliderContainerStyle?: StyleProp<ViewStyle>;
+  actionButtonStyle?: StyleProp<ViewStyle>;
+  actionButtonTextStyle?: StyleProp<TextStyle>;
+
+  onValueChange?: (value: number) => void;
+  onClick?: (value: number) => void;
+}
+
+const SelectAmount: React.FC<SelectAmountProps> = ({
+  isRTL,
+  conversionRate = 20,
+  minValue = 1,
+  maxValue = 1000,
+  pointsValue = 1,
+  step = 20,
+  title,
+  buttonText = "Redeem",
+  currencyLabel = "SAR",
+  pointsLabel = "points",
+  rowStyle,
+  labelStyle,
+  titleStyle,
+  containerStyle,
+  actionButtonStyle,
+  actionButtonTextStyle,
+  sliderContainerStyle,
+  stepperButtonStyle,
+  stepperButtonTextStyle,
+  stepperValueTextStyle,
+  currencyValueTextStyle,
+  onValueChange,
+  onClick,
+}) => {
+  const { theme, isRTL: rtl } = useTheme();
+  isRTL = isRTL || rtl;
+
+  const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);
+
+  const sliding = useRef<boolean>(false);
+
+  const clampedInitialValue = Math.max(
+    minValue,
+    Math.min(maxValue, pointsValue)
+  );
+  const [currentValue, setCurrentValue] = useState(clampedInitialValue);
+
+  const currencyValue = useMemo(() => {
+    return conversionRate > 0 ? Math.ceil(currentValue / conversionRate) : 0;
+  }, [currentValue, conversionRate]);
+
+  const handleValueChange = useCallback(
+    (newValue: number) => {
+      let clampedValue = Math.max(minValue, Math.min(maxValue, newValue));
+
+      if (clampedValue !== currentValue && sliding.current) {
+        setCurrentValue(Math.round(clampedValue));
+        onValueChange?.(clampedValue);
+      }
+    },
+    [minValue, maxValue, step, currentValue]
+  );
+
+  const handleIncrement = () => {
+    setCurrentValue((prev) => prev + step);
+  };
+
+  const handleDecrement = () => {
+    setCurrentValue((prev) => prev - step);
+  };
+
+  return (
+    <View style={[styles.mainContainer, containerStyle]}>
+      {title && <Text style={[styles.title, titleStyle]}>{title}</Text>}
+      <View>
+        <View style={[styles.row, rowStyle]}>
+          <Text style={[styles.label, labelStyle]}>{pointsLabel}</Text>
+          <NumericStepper
+            value={currentValue}
+            minValue={minValue}
+            maxValue={maxValue}
+            onIncrement={handleIncrement}
+            onDecrement={handleDecrement}
+            isRTL={isRTL}
+            buttonStyle={stepperButtonStyle}
+            buttonTextStyle={stepperButtonTextStyle} 
+            valueTextStyle={stepperValueTextStyle} 
+          />
+        </View>
+        <View style={[styles.row, rowStyle]}>
+          <Text style={[styles.label, labelStyle]}>{currencyLabel}</Text>
+          <View style={{ flexDirection: "row" }}>
+            <View style={[styles.controlButton, { opacity: 0 }]} />
+            <Text style={[styles.currencyValueText, currencyValueTextStyle]}>
+              {currencyValue}
+            </Text>
+            <View style={[styles.controlButton, { opacity: 0 }]} />
+          </View>
+        </View>
+        <Slider
+          step={step}
+          minimumValue={minValue}
+          maximumValue={maxValue}
+          onValueChange={handleValueChange}
+          onSlidingStart={() => (sliding.current = true)}
+          onSlidingComplete={() => (sliding.current = false)}
+          minimumTrackTintColor={theme.primary}
+          maximumTrackTintColor={theme.primary}
+          thumbTintColor={theme.primary}
+          inverted={isRTL}
+          style={sliderContainerStyle}
+        />
+      </View>
+      <TouchableOpacity
+        style={[styles.actionButton, actionButtonStyle]}
+        onPress={() => onClick?.(currentValue)}
+      >
+        <Text style={[styles.actionButtonText, actionButtonTextStyle]}>
+          {buttonText}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const themedStyles = (theme: ThemeType, isRTL: boolean) =>
+  StyleSheet.create({
+    mainContainer: {
+      width: "100%",
+      backgroundColor: theme.surface,
+      padding: 16,
+    },
+    row: {
+      flexDirection: isRTL ? "row-reverse" : "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: 12,
+    },
+    title: {
+      fontSize: 18,
+      fontWeight: "bold",
+      color: theme.onSurface,
+      marginBottom: 16,
+      textAlign: isRTL ? "right" : "left",
+    },
+    label: {
+      fontSize: 14,
+      color: theme.onSurface,
+    },
+    controlButton: {
+      backgroundColor: theme.secondary,
+      width: 36,
+      height: 36,
+      borderRadius: 18,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    actionButton: {
+      backgroundColor: theme.primary,
+      paddingVertical: 12,
+      paddingHorizontal: 20,
+      borderRadius: 6,
+      alignItems: "center",
+      marginTop: 16,
+    },
+    valueText: {
+      fontSize: 16,
+      color: theme.onSurface,
+      minWidth: 50,
+      textAlign: "center",
+      marginHorizontal: 8,
+    },
+    currencyValueText: {
+      fontSize: 16,
+      color: theme.primary,
+      minWidth: 50,
+      textAlign: "center",
+      marginHorizontal: 8,
+    },
+    actionButtonText: {
+      color: theme.onPrimary,
+    },
+  });
+
+export default SelectAmount;

package/src/components/SelectAmount/index.ts

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

package/src/components/Suggestions/SuggestionList.tsx

@@ -0,0 +1,106 @@
+import React from "react"; // Ensure React is imported
+import {
+  View,
+  Text,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  ListRenderItemInfo, // Import this type
+} from "react-native";
+import { ThemeType, useTheme } from "@/theme"; // Adjust import path
+
+interface SuggestionListProps<T> {
+  data: T[];
+  visible: boolean;
+  renderItemContent: (item: T) => React.ReactNode; // Function to render item content
+  containerStyle?: StyleProp<ViewStyle>;
+  itemStyle?: StyleProp<ViewStyle>;
+  itemTextStyle?: StyleProp<TextStyle>; // Default text style
+  listStyle?: StyleProp<ViewStyle>;
+}
+
+const SuggestionList = <T extends unknown>({
+  data,
+  visible,
+  renderItemContent,
+  containerStyle,
+  itemStyle, // Style for the default wrapper
+  itemTextStyle, // Style for the default text
+  listStyle,
+}: SuggestionListProps<T>) => {
+  const { theme } = useTheme();
+  const styles = suggestionStyles(theme);
+
+  if (!visible || data.length === 0) {
+    return null;
+  }
+
+  const renderListItem = ({ item }: ListRenderItemInfo<T>) => {
+    const content = renderItemContent(item);
+    if (React.isValidElement(content)) {
+      return content;
+    }
+
+    if (content === null || content === undefined) {
+        return null;
+    }
+
+    return (
+      <View style={[styles.suggestionItem, itemStyle]}>
+        <Text style={[styles.suggestionText, itemTextStyle]}>{String(content)}</Text>
+      </View>
+    );
+  };
+
+  return (
+    <View style={[styles.suggestionContainer, containerStyle]}>
+      <FlatList
+        data={data}
+        showsVerticalScrollIndicator={false}
+        keyExtractor={(_, index) => index.toString()}
+        renderItem={renderListItem} // Use the robust render function
+        style={[styles.list, listStyle]}
+        keyboardShouldPersistTaps="handled"
+      />
+    </View>
+  );
+};
+
+const suggestionStyles = (theme: ThemeType) =>
+  StyleSheet.create({
+    suggestionContainer: {
+      // ... (keep as before)
+      position: "absolute",
+      left: 0,
+      right: 0,
+      backgroundColor: theme.surface,
+      borderColor: theme.border,
+      top:"100%",
+      borderWidth: 1,
+      borderBottomRightRadius: 5,
+      borderBottomLeftRadius: 5,
+      padding: 12,
+      zIndex: 10,
+      maxHeight: 150,
+    },
+    list: {
+      flexGrow: 0,
+    //   padding: 12
+    },
+    // Default wrapper style (used if renderItemContent returns primitive)
+    suggestionItem: {
+      padding: 12,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: theme.border,
+    },
+    // Default text style (used if renderItemContent returns primitive)
+    suggestionText: {
+      fontSize: 14,
+      color: theme.onSurface,
+    },
+  });
+
+export default SuggestionList;