react-native-molecules 0.5.0-beta.0

package/components/TimePicker/TimeInput.tsx

@@ -0,0 +1,112 @@
+import { forwardRef, memo, useCallback, useMemo, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../../hooks';
+import { resolveStateVariant } from '../../utils';
+import { TextInput, type TextInputProps } from '../TextInput';
+import { TouchableRipple } from '../TouchableRipple';
+import { inputTypes, type PossibleClockTypes, type PossibleInputTypes } from './timeUtils';
+import { timePickerInputStyles } from './utils';
+
+interface TimeInputProps
+    extends Omit<
+        Omit<TextInputProps, 'value' | 'variant' | 'onChangeText' | 'onPress'>,
+        'onFocus'
+    > {
+    value: number;
+    clockType: PossibleClockTypes;
+    onPress?: (type: PossibleClockTypes) => any;
+    pressed: boolean;
+    onChanged: (n: number) => any;
+    inputType: PossibleInputTypes;
+}
+
+function TimeInput(
+    {
+        value,
+        clockType,
+        pressed,
+        onPress,
+        onChanged,
+        inputType,
+        inputStyle,
+        style,
+        ...rest
+    }: TimeInputProps,
+    ref: any,
+) {
+    const onInnerChange = (text: string) => {
+        onChanged(Number(text));
+    };
+
+    const theme = useTheme();
+    const [inputFocused, setInputFocused] = useState<boolean>(false);
+
+    const highlighted = inputType === inputTypes.picker ? pressed : inputFocused;
+
+    const state = resolveStateVariant({
+        highlighted,
+    });
+    timePickerInputStyles.useVariants({
+        state: state as any,
+    });
+
+    const formattedValue = useMemo(() => {
+        let _formattedValue = `${value}`;
+
+        if (!inputFocused) {
+            _formattedValue = `${value}`.length === 1 ? `0${value}` : `${value}`;
+        }
+
+        return _formattedValue;
+    }, [value, inputFocused]);
+
+    const { rippleColor, containerStyle, textInputContainerStyle, textInputStyle, buttonStyle } =
+        useMemo(() => {
+            const { container, input, button } = timePickerInputStyles;
+
+            return {
+                rippleColor: timePickerInputStyles.root?._rippleColor,
+                containerStyle: container,
+                textInputContainerStyle: [{ paddingHorizontal: 0 }, style],
+                textInputStyle: [input, inputStyle],
+                buttonStyle: [StyleSheet.absoluteFill, button],
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [inputStyle, style, state]);
+
+    const onFocus = useCallback(() => setInputFocused(true), []);
+    const onBlur = useCallback(() => setInputFocused(false), []);
+    const onPressInput = useCallback(() => onPress?.(clockType), [clockType, onPress]);
+
+    return (
+        <View style={containerStyle}>
+            <TextInput
+                variant="plain"
+                ref={ref}
+                inputStyle={textInputStyle}
+                style={textInputContainerStyle}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                keyboardAppearance={theme.dark ? 'dark' : 'default'}
+                value={formattedValue}
+                maxLength={2}
+                onChangeText={onInnerChange}
+                {...rest}
+            />
+            <>
+                {onPress && inputType === inputTypes.picker ? (
+                    <TouchableRipple
+                        style={buttonStyle}
+                        rippleColor={rippleColor}
+                        onPress={onPressInput}
+                        borderless={true}>
+                        <View />
+                    </TouchableRipple>
+                ) : null}
+            </>
+        </View>
+    );
+}
+
+export default memo(forwardRef(TimeInput));

package/components/TimePicker/TimeInputs.tsx

@@ -0,0 +1,148 @@
+// @typescript-eslint/no-unused-vars
+// WORK IN PROGRESS
+
+import { memo, useCallback, useRef } from 'react';
+import { TextInput as TextInputNative, useWindowDimensions, View } from 'react-native';
+
+import { useLatest } from '../../hooks';
+import { resolveStateVariant } from '../../utils';
+import AmPmSwitcher from './AmPmSwitcher';
+import TimeInput from './TimeInput';
+import {
+    clockTypes,
+    type PossibleClockTypes,
+    type PossibleInputTypes,
+    toHourInputFormat,
+} from './timeUtils';
+import { timePickerInputsStyles } from './utils';
+
+type Props = {
+    inputType: PossibleInputTypes;
+    focused: PossibleClockTypes;
+    hours: number;
+    minutes: number;
+    onFocusInput: (type: PossibleClockTypes) => any;
+    onChange: (hoursMinutesAndFocused: {
+        hours: number;
+        minutes: number;
+        focused?: undefined | PossibleClockTypes;
+    }) => any;
+    is24Hour: boolean;
+};
+
+function TimeInputs({
+    hours,
+    minutes,
+    onFocusInput,
+    focused,
+    inputType,
+    onChange,
+    is24Hour,
+}: Props) {
+    const dimensions = useWindowDimensions();
+    const isLandscape = dimensions.width > dimensions.height;
+
+    timePickerInputsStyles.useVariants({
+        state: resolveStateVariant({
+            landScape: isLandscape,
+        }) as any,
+    });
+    const startInput = useRef<TextInputNative | null>(null);
+    const endInput = useRef<TextInputNative | null>(null);
+
+    const onSubmitStartInput = useCallback(() => {
+        if (endInput.current) {
+            endInput.current.focus();
+        }
+    }, [endInput]);
+
+    const onSubmitEndInput = useCallback(() => {
+        // TODO: close modal and persist time
+    }, []);
+
+    const minutesRef = useLatest(minutes);
+    const onChangeHours = useCallback(
+        (newHours: number) => {
+            onChange({
+                hours: newHours,
+                minutes: minutesRef.current,
+                focused: clockTypes.hours,
+            });
+        },
+        [onChange, minutesRef],
+    );
+
+    const onHourChange = useCallback(
+        (newHoursFromInput: number) => {
+            let newHours = newHoursFromInput;
+            if (newHoursFromInput >= 24) {
+                newHours = 0;
+            }
+            onChange({
+                hours: newHours,
+                minutes,
+            });
+        },
+        [minutes, onChange],
+    );
+
+    const onMinuteChange = useCallback(
+        (newMinutesFromInput: number) => {
+            let newMinutes = newMinutesFromInput;
+
+            if (newMinutesFromInput > 59) {
+                newMinutes = 0;
+            }
+            onChange({
+                hours: hours,
+                minutes: newMinutes,
+            });
+        },
+        [hours, onChange],
+    );
+
+    return (
+        <View style={timePickerInputsStyles.inputContainer}>
+            <TimeInput
+                ref={startInput}
+                placeholder={'00'}
+                value={toHourInputFormat(hours, is24Hour)}
+                clockType={clockTypes.hours}
+                pressed={focused === clockTypes.hours}
+                onPress={onFocusInput}
+                inputType={inputType}
+                returnKeyType={'next'}
+                onSubmitEditing={onSubmitStartInput}
+                blurOnSubmit={false}
+                onChanged={onHourChange}
+                // onChangeText={onChangeStartInput}
+            />
+            <View style={timePickerInputsStyles.hoursAndMinutesSeparator}>
+                <View style={timePickerInputsStyles.spaceDot} />
+                <View style={timePickerInputsStyles.dot} />
+                <View style={timePickerInputsStyles.betweenDot} />
+                <View style={timePickerInputsStyles.dot} />
+                <View style={timePickerInputsStyles.spaceDot} />
+            </View>
+            <TimeInput
+                ref={endInput}
+                placeholder={'00'}
+                value={minutes}
+                clockType={clockTypes.minutes}
+                pressed={focused === clockTypes.minutes}
+                onPress={onFocusInput}
+                inputType={inputType}
+                onSubmitEditing={onSubmitEndInput}
+                onChanged={onMinuteChange}
+            />
+            {!is24Hour && (
+                <>
+                    <View style={timePickerInputsStyles.spaceBetweenInputsAndSwitcher} />
+                    <AmPmSwitcher hours={hours} onChange={onChangeHours} />
+                </>
+            )}
+        </View>
+    );
+}
+
+export default memo(TimeInputs);

package/components/TimePicker/TimePicker.tsx

@@ -0,0 +1,130 @@
+import { memo, useCallback, useMemo, useState } from 'react';
+import { type StyleProp, View, type ViewStyle } from 'react-native';
+
+import { useControlledValue } from '../../hooks';
+import { format, parse } from '../../utils/date-fns';
+import AnalogClock from './AnalogClock';
+import { DisplayModeContext } from './DisplayModeContext';
+import TimeInputs from './TimeInputs';
+import {
+    inputTypes,
+    type PossibleClockTypes,
+    type PossibleInputTypes,
+    toHourInputFormat,
+} from './timeUtils';
+import { timePickerStyles } from './utils';
+
+type onChangeFunc = ({
+    hours,
+    minutes,
+    focused,
+}: {
+    hours: number;
+    minutes: number;
+    focused?: undefined | PossibleClockTypes;
+}) => any;
+
+export type Props = {
+    /**
+     * hh:mm format
+     * */
+    time: string;
+    onTimeChange: (params: { time: string; focused?: undefined | PossibleClockTypes }) => any;
+
+    is24Hour?: boolean;
+    inputType?: PossibleInputTypes;
+    focused?: PossibleClockTypes;
+
+    onFocusInput?: (type: PossibleClockTypes) => any;
+    isLandscape?: boolean;
+    style?: StyleProp<ViewStyle>;
+};
+
+function TimePicker({
+    is24Hour = false,
+    time,
+    focused: focusedProp,
+    onFocusInput: onFocusInputProp,
+    inputType = 'keyboard',
+    onTimeChange,
+    isLandscape = false,
+    style,
+}: Props) {
+    const { hours, minutes } = useMemo(() => {
+        const date = time ? parse(time, 'HH:mm', new Date()) : new Date();
+
+        return { hours: +format(date, 'HH'), minutes: +format(date, 'mm') };
+    }, [time]);
+
+    const [focused, onFocusInput] = useControlledValue({
+        value: focusedProp,
+        defaultValue: 'hours',
+        onChange: onFocusInputProp,
+    });
+
+    // Initialize display Mode according the hours value
+    const [displayMode, setDisplayMode] = useState<'AM' | 'PM' | undefined>(() =>
+        !is24Hour ? (hours >= 12 ? 'PM' : 'AM') : undefined,
+    );
+
+    timePickerStyles.useVariants({
+        variant: (isLandscape
+            ? inputType === 'keyboard'
+                ? 'landScapeWithoutClock'
+                : 'landScape'
+            : 'default') as any,
+    });
+
+    const onChange = useCallback<onChangeFunc>(
+        params => {
+            const newDisplayMode = params.hours >= 12 ? 'PM' : 'AM';
+
+            if (newDisplayMode !== displayMode) setDisplayMode(newDisplayMode);
+
+            onTimeChange?.({
+                time: `${`${params.hours}`.padStart(2, '0')}:${`${params.minutes}`.padStart(
+                    2,
+                    '0',
+                )}`,
+                focused: params.focused,
+            });
+        },
+        [displayMode, onTimeChange],
+    );
+
+    const memoizedValue = useMemo(
+        () => ({ mode: displayMode, setMode: setDisplayMode }),
+        [displayMode],
+    );
+
+    return (
+        <DisplayModeContext.Provider value={memoizedValue}>
+            <View style={[timePickerStyles.container, style]}>
+                <TimeInputs
+                    inputType={inputType}
+                    hours={hours}
+                    minutes={minutes}
+                    is24Hour={is24Hour}
+                    onChange={onChange}
+                    onFocusInput={onFocusInput}
+                    focused={focused}
+                />
+                <>
+                    {inputType === inputTypes.picker ? (
+                        <View style={timePickerStyles.clockContainer}>
+                            <AnalogClock
+                                hours={toHourInputFormat(hours, is24Hour)}
+                                minutes={minutes}
+                                focused={focused}
+                                is24Hour={is24Hour}
+                                onChange={onChange}
+                            />
+                        </View>
+                    ) : null}
+                </>
+            </View>
+        </DisplayModeContext.Provider>
+    );
+}
+
+export default memo(TimePicker);

package/components/TimePicker/index.tsx

@@ -0,0 +1,19 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import TimePickerDefault from './TimePicker';
+
+registerMoleculesComponents({
+    TimePicker: TimePickerDefault,
+});
+
+export const TimePicker = getRegisteredComponentWithFallback('TimePicker', TimePickerDefault);
+
+export type { Props as TimePickerProps } from './TimePicker';
+export {
+    timePickerAmPmSwitcherStyles,
+    timePickerClockHoursStyles,
+    timePickerClockMinutesStyles,
+    timePickerClockStyles,
+    timePickerInputsStyles,
+    timePickerInputStyles,
+    timePickerStyles,
+} from './utils';

package/components/TimePicker/timeUtils.ts

@@ -0,0 +1,159 @@
+// 250? when bigger?
+export const circleSize = 215;
+
+export type PossibleHourTypes = 'am' | 'pm';
+export type HourTypeMap = {
+    [hourType in PossibleHourTypes]: PossibleHourTypes;
+};
+export const hourTypes: HourTypeMap = {
+    am: 'am',
+    pm: 'pm',
+};
+
+export function getHourType(hours: number): PossibleHourTypes | undefined {
+    if (hours >= 0 && hours <= 12) {
+        return hourTypes.am;
+    }
+    if (hours > 12 && hours <= 24) {
+        return hourTypes.pm;
+    }
+    return undefined;
+}
+
+export type PossibleInputTypes = 'keyboard' | 'picker';
+export type InputTypeMap = {
+    [inputType in PossibleInputTypes]: PossibleInputTypes;
+};
+export const inputTypes: InputTypeMap = {
+    keyboard: 'keyboard',
+    picker: 'picker',
+};
+
+export const reverseInputTypes: InputTypeMap = {
+    keyboard: 'picker',
+    picker: 'keyboard',
+};
+type InputIconMap = {
+    [inputType in PossibleInputTypes]: string;
+};
+export const inputTypeIcons: InputIconMap = {
+    keyboard: 'keyboard-outline',
+    picker: 'clock-outline',
+};
+
+export const getTimeInputTypeIcon = (
+    inputType: PossibleInputTypes,
+    inputIconMap?: InputIconMap,
+) => {
+    return (
+        inputIconMap?.[reverseInputTypes[inputType]] ||
+        inputTypeIcons?.[reverseInputTypes[inputType]]
+    );
+};
+
+export type PossibleClockTypes = 'hours' | 'minutes';
+export type ClockTypeMap = {
+    [clockType in PossibleClockTypes]: PossibleClockTypes;
+};
+export const clockTypes: ClockTypeMap = {
+    minutes: 'minutes',
+    hours: 'hours',
+};
+
+// Code inspiration and copied from: https://github.com/ShaneGH/analogue-time-picker/blob/master/src/utils/angle.ts
+
+const outerHeight = 34;
+const _30 = Math.PI / 6;
+const _12 = Math.PI / 30;
+const _360 = Math.PI * 2;
+const _90 = Math.PI / 2;
+
+/** Snap an angle to a given step. E.g. if angle = 22° and step = 10°, round down to 20° */
+export function snap(angle: number, step: number) {
+    let a = angle;
+    while (a < 0) a += _360;
+    const diff = a % step;
+
+    if (diff <= step / 2) {
+        return angle - diff;
+    }
+
+    return angle - diff + step;
+}
+
+// detect am / pm based on offset
+export function getHourTypeFromOffset(left: number, top: number, size: number): PossibleHourTypes {
+    const w = size / 2;
+    const x = w - left;
+    const y = size / 2 - top;
+
+    const distance = Math.sqrt(x * x + y * y);
+    const maxPm = w - outerHeight;
+
+    return distance > maxPm ? hourTypes.am : hourTypes.pm;
+}
+
+// Calculate the minute from the hand angle
+export function getMinutes(handAngle: number) {
+    handAngle = snap(handAngle, _12);
+
+    let minute = parseInt((((handAngle - _90) % _360) / _12).toFixed(), 10);
+    while (minute < 0) minute += 60;
+    while (minute >= 60) minute -= 60;
+
+    return minute;
+}
+
+// Calculate the hour from the hand angle
+export function getHours(handAngle: number, hourType: PossibleHourTypes | undefined) {
+    handAngle = snap(handAngle, _30);
+
+    let hour = parseInt((((handAngle - _90) % _360) / _30).toFixed(), 10);
+    if (hour < 0) hour += 12;
+    if (hour >= 12) hour -= 12;
+
+    if (hourType === hourTypes.am) {
+        if (hour <= 0) {
+            hour += 12;
+        } else if (hour >= 12) {
+            hour -= 12;
+        }
+    }
+    if (hourType === hourTypes.pm) {
+        if (hour <= 0) {
+            hour += 12;
+        } else if (hour > 12) {
+            hour -= 12;
+        }
+    }
+
+    return hour;
+}
+
+/** Get the angle of the left/top co-ordinate from the center of the width.height box */
+export function getAngle(left: number, top: number, size: number) {
+    const x = size / 2 - left;
+    const y = size / 2 - top;
+
+    // tan O = y / x
+    let angle = x ? Math.atan(y / x) : y < 0 ? -_90 : _90;
+    if (x < 0) {
+        // reflect along vertical axis
+        angle = -angle + 2 * (_90 + angle);
+    }
+
+    return angle;
+}
+
+export function toHourInputFormat(hours: number, is24Hour: boolean): number {
+    if (hours === 24) {
+        return 0;
+    }
+    if (is24Hour) {
+        return hours;
+    }
+    if (hours > 12) {
+        return hours - 12;
+    }
+    return hours;
+}