@storybook/addon-ondevice-controls/dist/types/Date.js

Display storybook controls on your device.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { styled, useTheme } from '@storybook/react-native-theming';
import { useMemo, useState } from 'react';
import { Platform, StyleSheet, View } from 'react-native';
import DateTimePicker from 'react-native-modal-datetime-picker';
import { inputStyle } from './common';
const Touchable = styled.TouchableOpacity(({ theme }) => ({
    ...inputStyle({ theme }),
}));
const Label = styled.Text(({ theme }) => ({
    fontSize: theme.typography.size.s1,
    color: theme.input.color,
}));
const DateType = ({ onChange, arg: { name, value } }) => {
    const [visiblePicker, setVisiblePicker] = useState('none');
    const theme = useTheme();
    const onDatePicked = (pickedDate) => {
        onChange(pickedDate);
        setVisiblePicker('none');
    };
    const date = useMemo(() => {
        const dateValue = new Date(value);
        if (isNaN(dateValue.valueOf())) {
            return new Date();
        }
        return dateValue;
    }, [value]);
    // https://stackoverflow.com/a/30272803
    const dateString = useMemo(() => [
        `0${date.getDate()}`.slice(-2),
        `0${date.getMonth() + 1}`.slice(-2),
        date.getFullYear(),
    ].join('-'), [date]);
    const timeString = useMemo(() => `${`0${date.getHours()}`.slice(-2)}:${`0${date.getMinutes()}`.slice(-2)}`, [date]);
    const webDateString = useMemo(() => `${date.getFullYear()}-${`${date.getMonth() + 1}`.padStart(2, '0')}-${`${date.getDate()}`.padStart(2, '0')}T${`${date.getHours()}`.padStart(2, '0')}:${`${date.getMinutes()}`.padStart(2, '0')}`, [date]);
    if (Platform.OS === 'web') {
        return (_jsx(View, { testID: name, children: _jsx("input", { type: "datetime-local", defaultValue: webDateString, onChange: (e) => {
                    const target = e.currentTarget;
                    const newDate = new Date(target.value);
                    onChange(newDate);
                }, 
                // @ts-ignore
                style: inputStyle({ theme }) }) }));
    }
    return (_jsxs(View, { testID: name, children: [_jsxs(View, { style: styles.row, children: [_jsx(Touchable, { onPress: () => setVisiblePicker('date'), children: _jsx(Label, { children: dateString }) }), _jsx(Touchable, { style: styles.timeTouchable, onPress: () => setVisiblePicker('time'), children: _jsx(Label, { children: timeString }) })] }), _jsx(DateTimePicker, { date: date, isVisible: visiblePicker !== 'none', mode: visiblePicker === 'none' ? 'date' : visiblePicker, onConfirm: onDatePicked, onCancel: () => setVisiblePicker('none') })] }));
};
const styles = StyleSheet.create({
    timeTouchable: {
        marginLeft: 5,
    },
    row: { flexDirection: 'row' },
});
DateType.serialize = (value) => String(value);
DateType.deserialize = (value) => parseFloat(value);
export default DateType;