crazycharge-app/component/global/birthday_select.tsx

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import DropdownSelect from './dropdown_select';

type BirthdaySelectProps = {
    onSelect: (year: string, month: string, day: string) => void;
};
const BirthdaySelect: React.FC<BirthdaySelectProps> = ({ onSelect }) => {
    const [selectedYear, setSelectedYear] = useState('');
    const [selectedMonth, setSelectedMonth] = useState('');
    const [selectedDay, setSelectedDay] = useState('');

    const birthYearOptions = Array.from({ length: 100 }, (_, i) => {
        const year = new Date().getFullYear() - i;
        return { label: year.toString(), value: year.toString() };
    });

    const birthMonthOptions = Array.from({ length: 12 }, (_, i) => {
        const month = i + 1;
        return { label: month.toString(), value: month.toString() };
    });

    const birthDayOptions = Array.from({ length: 31 }, (_, i) => {
        const day = i + 1;
        return { label: day.toString(), value: day.toString() };
    });

    const handleSelect = (type: string, value: string) => {
        if (type === 'year') {
            setSelectedYear(value);
        } else if (type === 'month') {
            setSelectedMonth(value);
        } else if (type === 'day') {
            setSelectedDay(value);
        }

        if (selectedYear && selectedMonth && selectedDay) {
            onSelect(selectedYear, selectedMonth, selectedDay);
        }
    };

    return (
        <View style={styles.container}>
            <DropdownSelect
                onSelect={(value) => handleSelect('year', value)}
                dropdownOptions={birthYearOptions}
                placeholder={'年份'}
                extendedStyle={{ paddingLeft: 10 }}
            />
            <DropdownSelect
                onSelect={(value) => handleSelect('month', value)}
                dropdownOptions={birthMonthOptions}
                placeholder={'月份'}
                extendedStyle={{ paddingLeft: 10 }}
            />
            <DropdownSelect
                onSelect={(value) => handleSelect('day', value)}
                dropdownOptions={birthDayOptions}
                placeholder={'日期'}
                extendedStyle={{ paddingLeft: 10 }}
            />
        </View>
    );
};
const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flexDirection: 'row',
        gap: 10
    }
});
export default BirthdaySelect;