react-native-smart-date-picker 0.1.0

package/src/components/SmartDatePicker.tsx

@@ -0,0 +1,318 @@
+import React, { useState, useMemo } from "react";
+import {
+    View,
+    TouchableOpacity,
+    Text,
+    StyleSheet,
+} from "react-native";
+
+import PickerModal from "./PickerModal";
+
+import DateColumn from "./DateColumn";
+import MonthColumn from "./MonthColumn";
+import YearColumn from "./YearColumn";
+import HourColumn from "./HourColumn";
+import MinuteColumn from "./MinuteColumn";
+import SelectionOverlay from "./SelectionOverlay";
+
+import {
+    SmartDatePickerProps,
+} from "../types";
+
+import { useDatePicker } from "../hooks/useDatePicker";
+import { useTheme } from "../hooks/useTheme";
+
+import { buildDate, clampDate } from "../utils/dateUtils";
+
+export default function SmartDatePicker({
+    visible,
+    value = new Date(),
+    onConfirm,
+    onCancel,
+    mode = "datetime",
+    showSelectionOverlay = true,
+    minimumDate,
+    maximumDate,
+    primaryColor,
+    backgroundColor,
+    textColor,
+    buttonTextColor,
+    overlayBorderColor,
+    disabledTextColor,
+    selectionOverlayColor,
+    headerBackgroundColor,
+    wheelBackgroundColor,
+    theme,
+    customTheme,
+    minDateTheme,
+    maxDateTheme,
+    // style overrides
+    containerStyle,
+    wheelStyle,
+    overlayStyle,
+    textStyle,
+    selectedTextStyle,
+    itemHeight,
+}: SmartDatePickerProps) {
+    const boundedValue = useMemo(
+        () => clampDate(value, minimumDate, maximumDate),
+        [value, minimumDate, maximumDate]
+    );
+
+    const picker = useDatePicker(boundedValue);
+
+    // view toggles between 'date' and 'time' when mode is 'datetime'
+    const [view, setView] = useState<"date" | "time">(
+        mode === "time" ? "time" : "date"
+    );
+
+    React.useEffect(() => {
+        if (!visible) return;
+        setView(mode === "time" ? "time" : "date");
+    }, [visible, mode]);
+
+    const selectedDate = buildDate(
+        picker.day,
+        picker.month,
+        picker.year,
+        picker.hour,
+        picker.minute
+    );
+
+    const effectiveDate = clampDate(
+        selectedDate,
+        minimumDate,
+        maximumDate
+    );
+
+    const selectedBoundaryTheme = useMemo(() => {
+        if (
+            minimumDate &&
+            effectiveDate.getTime() === minimumDate.getTime()
+        ) {
+            return minDateTheme;
+        }
+
+        if (
+            maximumDate &&
+            effectiveDate.getTime() === maximumDate.getTime()
+        ) {
+            return maxDateTheme;
+        }
+
+        return undefined;
+    }, [effectiveDate, minimumDate, maximumDate, minDateTheme, maxDateTheme]);
+
+    const themeObj =
+        customTheme ?? (typeof theme === "object" ? theme : undefined);
+
+    const activeTheme = useTheme({
+        ...(themeObj as any),
+        ...selectedBoundaryTheme,
+        primaryColor,
+        backgroundColor,
+        textColor,
+        buttonTextColor,
+        overlayBorderColor,
+        disabledTextColor,
+        selectionOverlayColor,
+        headerBackgroundColor,
+        wheelBackgroundColor,
+    });
+
+    const handleDone = () => {
+        onConfirm(effectiveDate);
+    };
+
+    const handleNext = () => setView("time");
+
+    const renderDateColumns = () => (
+        <>
+            <DateColumn
+                selected={picker.day}
+                onChange={picker.setDay}
+                textColor={activeTheme.textColor}
+                selectedTextColor={activeTheme.primaryColor}
+                wheelBackgroundColor={activeTheme.wheelBackgroundColor}
+                wheelStyle={wheelStyle}
+                textStyle={textStyle}
+                selectedTextStyle={selectedTextStyle}
+            />
+            <MonthColumn
+                selected={picker.month}
+                onChange={picker.setMonth}
+                textColor={activeTheme.textColor}
+                selectedTextColor={activeTheme.primaryColor}
+                wheelBackgroundColor={activeTheme.wheelBackgroundColor}
+                wheelStyle={wheelStyle}
+                textStyle={textStyle}
+                selectedTextStyle={selectedTextStyle}
+            />
+            <YearColumn
+                selected={picker.year}
+                onChange={picker.setYear}
+                textColor={activeTheme.textColor}
+                selectedTextColor={activeTheme.primaryColor}
+                wheelBackgroundColor={activeTheme.wheelBackgroundColor}
+                wheelStyle={wheelStyle}
+                textStyle={textStyle}
+                selectedTextStyle={selectedTextStyle}
+            />
+        </>
+    );
+
+    const renderTimeColumns = () => (
+        <>
+            <HourColumn
+                selected={picker.hour}
+                onChange={picker.setHour}
+                textColor={activeTheme.textColor}
+                selectedTextColor={activeTheme.primaryColor}
+                wheelBackgroundColor={activeTheme.wheelBackgroundColor}
+                wheelStyle={wheelStyle}
+                textStyle={textStyle}
+                selectedTextStyle={selectedTextStyle}
+            />
+            <MinuteColumn
+                selected={picker.minute}
+                onChange={picker.setMinute}
+                textColor={activeTheme.textColor}
+                selectedTextColor={activeTheme.primaryColor}
+                wheelBackgroundColor={activeTheme.wheelBackgroundColor}
+                wheelStyle={wheelStyle}
+                textStyle={textStyle}
+                selectedTextStyle={selectedTextStyle}
+            />
+        </>
+    );
+
+    const selectedText = view === "time"
+        ? selectedDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+        : selectedDate.toLocaleDateString();
+
+    return (
+        <PickerModal
+            visible={visible}
+            backgroundColor={activeTheme.backgroundColor}
+            containerStyle={containerStyle}
+            overlayStyle={overlayStyle}
+        >
+            <View
+                style={[
+                    styles.header,
+                    {
+                        backgroundColor:
+                            activeTheme.headerBackgroundColor,
+                    },
+                ]}
+            >
+                <View>
+                    <TouchableOpacity onPress={onCancel}>
+                        <Text
+                            style={[
+                                styles.buttonText,
+                                {
+                                    color:
+                                        activeTheme.buttonTextColor ||
+                                        activeTheme.primaryColor,
+                                },
+                            ]}
+                        >
+                            Cancel
+                        </Text>
+                    </TouchableOpacity>
+                    <Text
+                        style={[
+                            styles.previewText,
+                            {
+                                color: activeTheme.textColor,
+                            },
+                        ]}
+                    >
+                        {selectedText}
+                    </Text>
+                </View>
+
+                {mode === "datetime" && view === "date" ? (
+                    <TouchableOpacity onPress={handleNext}>
+                        <Text
+                            style={[
+                                styles.buttonText,
+                                {
+                                    color:
+                                        activeTheme.buttonTextColor ||
+                                        activeTheme.primaryColor,
+                                },
+                            ]}
+                        >
+                            Next
+                        </Text>
+                    </TouchableOpacity>
+                ) : (
+                    <TouchableOpacity onPress={handleDone}>
+                        <Text
+                            style={[
+                                styles.buttonText,
+                                {
+                                    color:
+                                        activeTheme.buttonTextColor ||
+                                        activeTheme.primaryColor,
+                                },
+                            ]}
+                        >
+                            Done
+                        </Text>
+                    </TouchableOpacity>
+                )}
+            </View>
+
+            <View
+                style={[
+                    styles.row,
+                    {
+                        backgroundColor:
+                            activeTheme.wheelBackgroundColor,
+                    },
+                ]}
+            >
+                {view === "date" ? renderDateColumns() : renderTimeColumns()}
+                {showSelectionOverlay && (
+                    <SelectionOverlay
+                        itemHeight={itemHeight}
+                        borderColor={activeTheme.overlayBorderColor}
+                        selectionOverlayColor={activeTheme.selectionOverlayColor}
+                        overlayStyle={overlayStyle}
+                    />
+                )}
+            </View>
+        </PickerModal>
+    );
+}
+
+const styles = StyleSheet.create({
+    header: {
+        height: 50,
+        paddingHorizontal: 20,
+        justifyContent:
+            "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+    },
+
+    row: {
+        flex: 1,
+        flexDirection: "row",
+        position: "relative",
+    },
+
+    buttonText: {
+        fontSize: 16,
+        fontWeight: "600",
+    },
+
+    previewText: {
+        marginTop: 6,
+        fontSize: 12,
+        color: "#666",
+    },
+});

package/src/components/WheelColumn.tsx

@@ -0,0 +1,231 @@
+import React, { useEffect, useMemo, useRef } from "react";
+import {
+    FlatList,
+    Text,
+    TouchableOpacity,
+    StyleSheet,
+    NativeSyntheticEvent,
+    NativeScrollEvent,
+    TextStyle,
+    ViewStyle,
+} from "react-native";
+
+interface Props {
+    data: any[];
+    selected: any;
+    onChange: (v: any) => void;
+    textColor?: string;
+    selectedTextColor?: string;
+    wheelBackgroundColor?: string;
+    selectedFontSize?: number;
+    // additional style overrides
+    textStyle?: TextStyle;
+    selectedTextStyle?: TextStyle;
+    wheelStyle?: ViewStyle;
+}
+
+const ITEM_HEIGHT = 44;
+const VISIBLE_ROWS = 5;
+const WHEEL_HEIGHT = ITEM_HEIGHT * VISIBLE_ROWS;
+
+export default function WheelColumn({
+    data,
+    selected,
+    onChange,
+    textColor,
+    selectedTextColor,
+    wheelBackgroundColor,
+    selectedFontSize,
+    // forwarded style props
+    textStyle,
+    selectedTextStyle,
+    wheelStyle,
+}: Props) {
+    const listRef = useRef<FlatList>(null);
+
+    // Repeat data for infinite effect
+    const repeatedData = data;
+    // const repeatedData = useMemo(
+    //     () => [...data, ...data, ...data, ...data, ...data],
+    //     [data]
+    // );
+
+    const selectedIndex = data.findIndex(
+        (item) => item.value === selected
+    );
+
+    const middleIndex =
+        selectedIndex >= 0
+            ? selectedIndex
+            : 0;
+    // const middleIndex =
+    //     selectedIndex >= 0
+    //         ? selectedIndex + data.length * 2
+    //         : data.length * 2;
+
+    useEffect(() => {
+        setTimeout(() => {
+            listRef.current?.scrollToOffset({
+                offset:
+                    middleIndex * ITEM_HEIGHT,
+                animated: false,
+            });
+        }, 50);
+    }, []);
+
+
+    // const handleScrollEnd = (
+    //     e: NativeSyntheticEvent<NativeScrollEvent>
+    // ) => {
+    //     const offsetY =
+    //         e.nativeEvent.contentOffset.y;
+
+    //     const index = Math.round(
+    //         offsetY / ITEM_HEIGHT
+    //     );
+
+    //     const clampedIndex = Math.max(
+    //         0,
+    //         Math.min(index, data.length - 1)
+    //     );
+
+    //     listRef.current?.scrollToOffset({
+    //         offset:
+    //             clampedIndex * ITEM_HEIGHT,
+    //         animated: true,
+    //     });
+
+    //     const item = data[clampedIndex];
+
+    //     if (item) {
+    //         onChange(item.value);
+    //     }
+    // };
+
+
+    const handleScrollEnd = (
+        e: NativeSyntheticEvent<NativeScrollEvent>
+    ) => {
+        const offsetY = e.nativeEvent.contentOffset.y;
+
+        const index = Math.round(offsetY / ITEM_HEIGHT);
+
+        const clampedIndex = Math.max(
+            0,
+            Math.min(index, data.length - 1)
+        );
+
+        listRef.current?.scrollToOffset({
+            offset: clampedIndex * ITEM_HEIGHT,
+            animated: false,
+        });
+        const item = data[clampedIndex];
+
+        if (item) {
+            onChange(item.value);
+        }
+    };
+
+
+    return (
+        <FlatList
+            ref={listRef}
+            data={repeatedData}
+            keyExtractor={(_, index) =>
+                index.toString()
+            }
+            style={[
+                {
+                    height: WHEEL_HEIGHT,
+                    backgroundColor:
+                        wheelBackgroundColor || "transparent",
+                },
+                wheelStyle,
+            ]}
+            showsVerticalScrollIndicator={
+                false
+            }
+            bounces={false}
+            removeClippedSubviews={false}
+            disableIntervalMomentum={true}
+            snapToInterval={ITEM_HEIGHT}
+            snapToAlignment="center"
+            decelerationRate="fast"
+            onMomentumScrollEnd={handleScrollEnd}
+            getItemLayout={(_, index) => ({
+                length: ITEM_HEIGHT,
+                offset:
+                    ITEM_HEIGHT * index,
+                index,
+            })}
+            renderItem={({ item }) => (
+                <TouchableOpacity
+                    style={styles.item}
+                    onPress={() => {
+                        const index = data.findIndex(
+                            (d) => d.value === item.value
+                        );
+
+                        listRef.current?.scrollToOffset({
+                            offset: index * ITEM_HEIGHT,
+                            animated: true,
+                        });
+
+                        onChange(item.value);
+                    }}
+                // onPress={() => {
+                //     onChange(item.value);
+                // }}
+                >
+                    <Text
+                        style={[
+                            styles.text,
+                            textStyle,
+                            {
+                                color:
+                                    selectedTextColor ||
+                                    textColor ||
+                                    styles.text.color,
+                            },
+                            selected === item.value && [
+                                {
+                                    fontWeight: "700",
+                                    fontSize:
+                                        selectedFontSize || 20,
+                                    color:
+                                        selectedTextColor ||
+                                        textColor ||
+                                        styles.text.color,
+                                },
+                                selectedTextStyle,
+                            ],
+                        ]}
+                    >
+                        {item.label}
+                    </Text>
+                </TouchableOpacity>
+            )}
+            contentContainerStyle={{
+                paddingTop:
+                    ((VISIBLE_ROWS - 1) / 2) *
+                    ITEM_HEIGHT,
+                paddingBottom:
+                    ((VISIBLE_ROWS - 1) / 2) *
+                    ITEM_HEIGHT,
+            }}
+        />
+    );
+}
+
+const styles = StyleSheet.create({
+    item: {
+        height: ITEM_HEIGHT,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+
+    text: {
+        fontSize: 18,
+        color: "#111827",
+    },
+});

package/src/components/YearColumn.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import WheelColumn from "./WheelColumn";
+import { generateYears } from "../utils/generateData";
+
+export default function YearColumn(
+    props: any
+) {
+    return (
+        <WheelColumn
+            data={generateYears()}
+            {...props}
+        />
+    );
+}

package/src/hooks/useDatePicker.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+
+export const useDatePicker = (
+    date: Date
+) => {
+    const [day, setDay] = useState(
+        date.getDate()
+    );
+
+    const [month, setMonth] = useState(
+        date.getMonth() + 1
+    );
+
+    const [year, setYear] = useState(
+        date.getFullYear()
+    );
+
+    const [hour, setHour] = useState(
+        date.getHours()
+    );
+
+    const [minute, setMinute] = useState(
+        date.getMinutes()
+    );
+
+    useEffect(() => {
+        setDay(date.getDate());
+        setMonth(date.getMonth() + 1);
+        setYear(date.getFullYear());
+        setHour(date.getHours());
+        setMinute(date.getMinutes());
+    }, [date]);
+
+    return {
+        day,
+        month,
+        year,
+        hour,
+        minute,
+
+        setDay,
+        setMonth,
+        setYear,
+        setHour,
+        setMinute,
+    };
+};

package/src/hooks/useTheme.ts

@@ -0,0 +1,18 @@
+import { SmartDatePickerTheme } from "../types";
+
+export const useTheme = (
+    theme?: Partial<SmartDatePickerTheme>
+) => {
+    return {
+        primaryColor: "#4F46E5",
+        backgroundColor: "#FFFFFF",
+        textColor: "#111827",
+        buttonTextColor: "#4F46E5",
+        overlayBorderColor: "#D1D5DB",
+        disabledTextColor: "#9CA3AF",
+        selectionOverlayColor: "transparent",
+        headerBackgroundColor: "#FFFFFF",
+        wheelBackgroundColor: "#FFFFFF",
+        ...theme,
+    };
+};

package/src/hooks/useWheel.ts

@@ -0,0 +1,13 @@
+import { useState } from "react";
+
+export const useWheel = (
+    initialValue: number
+) => {
+    const [selected, setSelected] =
+        useState(initialValue);
+
+    return {
+        selected,
+        setSelected,
+    };
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as SmartDatePicker } from "./components/SmartDatePicker";
+
+export * from "./types";