react-native-molecules 0.5.0-beta.0

package/components/TextInputWithMask/index.tsx

@@ -0,0 +1,11 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import TextInputWithMaskDefault from './TextInputMask';
+
+registerMoleculesComponents({
+    TextInputWithMask: TextInputWithMaskDefault,
+});
+
+export const TextInputWithMask = getRegisteredComponentWithFallback(
+    'TextInputWithMask',
+    TextInputWithMaskDefault,
+);

package/components/TextInputWithMask/utils.ts

@@ -0,0 +1,56 @@
+const splitCharacters = ['-', '/', '.', '年', ' '];
+
+export function detectCharacter(mask: string): string {
+    const c = splitCharacters.find(ch => mask.includes(ch));
+    return c || '';
+}
+
+// TODO - make it more universal
+export function enhanceTextWithMask(text: string, mask: string, previousValue: string): string {
+    const isBackSpace = previousValue.length > text.length;
+    const splitCharacter = detectCharacter(mask);
+
+    const maskParts = mask.split(splitCharacter);
+    const textParts = text.split(splitCharacter);
+
+    const finalString: string[] = [];
+    for (let maskPartIndex = 0; maskPartIndex < mask.length; maskPartIndex++) {
+        const partString: string[] = [];
+
+        const maskPart = maskParts[maskPartIndex];
+        const textPart = textParts[maskPartIndex];
+        if (!textPart) {
+            continue;
+        }
+
+        for (let maskDigitIndex = 0; maskDigitIndex < maskPart.length; maskDigitIndex++) {
+            const currentCharacter = textPart[maskDigitIndex];
+
+            if (isBackSpace && currentCharacter === undefined) {
+                continue;
+            }
+
+            const character = textPart[maskDigitIndex];
+
+            if (character !== undefined) {
+                partString.push(character);
+            }
+        }
+
+        finalString.push(partString.join(''));
+    }
+
+    const lastPart = finalString[finalString.length - 1];
+    const lastMaskPart = maskParts[finalString.length - 1];
+    if (
+        // if mask is completed
+        finalString.length !== maskParts.length &&
+        // or ...
+        lastPart &&
+        lastMaskPart &&
+        lastPart.length === lastMaskPart.length
+    ) {
+        return finalString.join(splitCharacter) + (isBackSpace ? '' : splitCharacter);
+    }
+    return finalString.join(splitCharacter);
+}

package/components/TimePicker/AmPmSwitcher.tsx

@@ -0,0 +1,99 @@
+import { useCallback, useContext, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { resolveStateVariant } from '../../utils';
+import { Text } from '../Text';
+import { TouchableRipple } from '../TouchableRipple';
+import { DisplayModeContext } from './DisplayModeContext';
+import { timePickerAmPmSwitcherStyles } from './utils';
+
+export default function AmPmSwitcher({
+    onChange,
+    hours,
+}: {
+    hours: number;
+    onChange: (newHours: number) => any;
+}) {
+    const { setMode, mode } = useContext(DisplayModeContext);
+
+    const { containerStyle, switchSeparatorStyle, isAM } = useMemo(() => {
+        return {
+            containerStyle: timePickerAmPmSwitcherStyles.container,
+            switchSeparatorStyle: timePickerAmPmSwitcherStyles.switchSeparator,
+            isAM: mode === 'AM',
+        };
+    }, [mode]);
+
+    const onSwitchButtonPress = useCallback(
+        (period: 'AM' | 'PM') => {
+            setMode(period);
+
+            if (period === 'AM' && hours - 12 >= 0) {
+                onChange(hours - 12);
+                return;
+            }
+
+            if (period === 'PM' && hours + 12 <= 23) {
+                onChange(hours + 12);
+            }
+        },
+        [hours, onChange, setMode],
+    );
+
+    return (
+        <View style={containerStyle}>
+            <SwitchButton
+                label="AM"
+                onPress={() => onSwitchButtonPress('AM')}
+                selected={isAM}
+                disabled={isAM}
+            />
+            <View style={switchSeparatorStyle} />
+            <SwitchButton
+                label="PM"
+                onPress={() => onSwitchButtonPress('PM')}
+                selected={!isAM}
+                disabled={!isAM}
+            />
+        </View>
+    );
+}
+
+function SwitchButton({
+    label,
+    onPress,
+    selected,
+    disabled,
+}: {
+    label: string;
+    onPress: (() => any) | undefined;
+    selected: boolean;
+    disabled: boolean;
+}) {
+    timePickerAmPmSwitcherStyles.useVariants({
+        // TODO - fix ts issues
+        state: resolveStateVariant({
+            selected,
+        }),
+    });
+
+    return (
+        <TouchableRipple
+            onPress={onPress}
+            style={timePickerAmPmSwitcherStyles.switchButton}
+            accessibilityLabel={label}
+            // @ts-ignore old React Native versions
+            accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
+            // @ts-ignore old React Native versions
+            accessibilityComponentType="button"
+            accessibilityRole="button"
+            accessibilityState={{ disabled }}
+            disabled={disabled}>
+            <View style={timePickerAmPmSwitcherStyles.switchButtonInner}>
+                <Text selectable={false} style={timePickerAmPmSwitcherStyles.text}>
+                    {label}
+                </Text>
+            </View>
+        </TouchableRipple>
+    );
+}

package/components/TimePicker/AnalogClock.tsx

@@ -0,0 +1,165 @@
+import { memo, useCallback, useMemo, useRef } from 'react';
+import {
+    type GestureResponderEvent,
+    PanResponder,
+    StyleSheet,
+    View,
+    type ViewProps,
+} from 'react-native';
+
+import { useLatest } from '../../hooks';
+import AnalogClockHours from './AnalogClockHours';
+import AnalogClockMinutes from './AnalogClockMinutes';
+import AnimatedClockSwitcher from './AnimatedClockSwitcher';
+import {
+    circleSize,
+    clockTypes,
+    getAngle,
+    getHours,
+    getHourType,
+    getHourTypeFromOffset,
+    getMinutes,
+    hourTypes,
+    type PossibleClockTypes,
+} from './timeUtils';
+import { timePickerClockStyles } from './utils';
+
+type Props = {
+    hours: number;
+    minutes: number;
+    focused: PossibleClockTypes;
+    is24Hour: boolean;
+    onChange: (hoursMinutesAndFocused: {
+        hours: number;
+        minutes: number;
+        focused?: undefined | PossibleClockTypes;
+    }) => any;
+};
+
+function AnalogClock({ hours, minutes, focused, is24Hour, onChange }: Props) {
+    // const { mode } = useContext(DisplayModeContext);
+    // used to make pointer shorter if hours are selected and above 12
+    const shortPointer = (hours === 0 || hours > 12) && is24Hour;
+    const clockRef = useRef<ViewProps | null>(null);
+    // Hooks are nice, sometimes... :-)..
+    // We need the latest values, since the onPointerMove uses a closure to the function
+    const hoursRef = useLatest(hours);
+    const onChangeRef = useLatest(onChange);
+    const minutesRef = useLatest(minutes);
+    const focusedRef = useLatest(focused);
+    const is24HourRef = useLatest(is24Hour);
+    // const modeRef = useLatest(mode);
+
+    const onPointerMove = useCallback(
+        (e: GestureResponderEvent, final: boolean) => {
+            const x = e.nativeEvent.locationX;
+            const y = e.nativeEvent.locationY;
+            const angle = getAngle(x, y, circleSize);
+
+            if (focusedRef.current === clockTypes.hours) {
+                const hours24 = is24HourRef.current;
+                const previousHourType = getHourType(hoursRef.current);
+                let pickedHours = getHours(angle, previousHourType);
+
+                if (hours24) {
+                    const hourTypeFromOffset = getHourTypeFromOffset(x, y, circleSize);
+                    const hours24AndPM = hours24 && hourTypeFromOffset === hourTypes.pm;
+
+                    // Avoiding the "24h"
+                    // Should be 12h for 12 hours and PM mode
+
+                    if (hours24AndPM) {
+                        pickedHours += 12;
+                    }
+
+                    if (pickedHours === 24) {
+                        pickedHours = 0;
+                    }
+                }
+
+                if (hoursRef.current !== pickedHours || final) {
+                    onChangeRef.current({
+                        hours: pickedHours,
+                        minutes: minutesRef.current,
+                        focused: final ? clockTypes.minutes : undefined,
+                    });
+                }
+            } else if (focusedRef.current === clockTypes.minutes) {
+                const pickedMinutes = getMinutes(angle);
+                if (minutesRef.current !== pickedMinutes) {
+                    onChangeRef.current({
+                        hours: hoursRef.current,
+                        minutes: pickedMinutes,
+                    });
+                }
+            }
+        },
+        [focusedRef, is24HourRef, hoursRef, onChangeRef, minutesRef],
+    );
+    const panResponder = useRef(
+        PanResponder.create({
+            onPanResponderGrant: e => onPointerMove(e, false),
+            onPanResponderMove: e => onPointerMove(e, false),
+            onPanResponderRelease: e => onPointerMove(e, true),
+            onStartShouldSetPanResponder: returnTrue,
+            onStartShouldSetPanResponderCapture: () => false,
+            onMoveShouldSetPanResponder: returnTrue,
+            onMoveShouldSetPanResponderCapture: returnTrue,
+            onPanResponderTerminationRequest: returnTrue,
+            onShouldBlockNativeResponder: returnTrue,
+        }),
+    ).current;
+
+    const { clockStyle, lineStyle, endPointStyle, middlePointContainerStyle, middlePointStyle } =
+        useMemo(() => {
+            const { clock, endPoint, center, line, middlePoint } = timePickerClockStyles;
+            const dynamicSize = focused === clockTypes.hours && shortPointer ? 33 : 0;
+            const pointerNumber = focused === clockTypes.hours ? hours : minutes;
+            const degreesPerNumber = focused === clockTypes.hours ? 30 : 6;
+
+            return {
+                clockStyle: clock,
+                lineStyle: [
+                    line,
+                    {
+                        transform: [
+                            { rotate: -90 + pointerNumber * degreesPerNumber + 'deg' },
+                            {
+                                translateX: circleSize / 4 - 4 - dynamicSize / 2,
+                            },
+                        ],
+                        width: circleSize / 2 - 4 - dynamicSize,
+                    },
+                ],
+                endPointStyle: endPoint,
+                middlePointContainerStyle: [StyleSheet.absoluteFill, center],
+                middlePointStyle: middlePoint,
+            };
+        }, [focused, hours, minutes, shortPointer]);
+
+    return (
+        <View
+            {...{ ref: clockRef }}
+            {...panResponder.panHandlers}
+            style={clockStyle}
+            // @ts-ignore -> https://github.com/necolas/react-native-web/issues/506
+            cursor={'pointer'}>
+            <View style={lineStyle} pointerEvents="none">
+                <View style={endPointStyle} />
+            </View>
+            <View style={middlePointContainerStyle} pointerEvents="none">
+                <View style={middlePointStyle} />
+            </View>
+            <AnimatedClockSwitcher
+                focused={focused}
+                hours={<AnalogClockHours is24Hour={is24Hour} hours={hours} />}
+                minutes={<AnalogClockMinutes minutes={minutes} />}
+            />
+        </View>
+    );
+}
+
+function returnTrue() {
+    return true;
+}
+export default memo(AnalogClock);

package/components/TimePicker/AnalogClockHours.tsx

@@ -0,0 +1,163 @@
+import { memo, useContext, useMemo } from 'react';
+import { type TextProps, View, type ViewProps } from 'react-native';
+
+import { Text } from '../Text';
+import { DisplayModeContext } from './DisplayModeContext';
+import { circleSize } from './timeUtils';
+import { timePickerClockHoursStyles } from './utils';
+
+const outerRange = getHourNumbers(false, circleSize, 12, 12, 1);
+const innerRange = getHourNumbers(true, circleSize, 12, 12, 13);
+
+function AnalogClockHours({ is24Hour, hours }: { is24Hour: boolean; hours: number }) {
+    const { mode } = useContext(DisplayModeContext);
+
+    const {
+        activeTextColor,
+        outerHourRootStyle,
+        innerHourRootStyle,
+        innerHourTextStyle,
+        innerHourInner,
+        outerHourInner,
+    } = useMemo(() => {
+        const {
+            outerHourRoot,
+            outerHourInner: _outerHourInner,
+            innerHourRoot,
+            innerHourInner: _innerHourInner,
+            innerHourText,
+        } = timePickerClockHoursStyles;
+
+        return {
+            activeTextColor: timePickerClockHoursStyles.root?._activeTextColor,
+            outerHourRootStyle: outerHourRoot,
+            innerHourRootStyle: innerHourRoot,
+            innerHourTextStyle: innerHourText,
+            outerHourInner: _outerHourInner,
+            innerHourInner: _innerHourInner,
+        };
+    }, []);
+
+    return (
+        <>
+            {outerRange.map((a, i) => (
+                <HourWrapper key={i} pointerEvents="none" style={outerHourRootStyle} position={a}>
+                    <View style={outerHourInner}>
+                        {/* Display 00 instead of 12 for AM hours */}
+                        <HourText
+                            hours={hours}
+                            is24Hour={is24Hour}
+                            activeTextColor={activeTextColor}
+                            type="outer"
+                            index={i}>
+                            {mode === 'AM' && !is24Hour && a.hourValue === 12 ? '00' : a.hourValue}
+                        </HourText>
+                    </View>
+                </HourWrapper>
+            ))}
+            <>
+                {is24Hour
+                    ? innerRange.map((a, i) => (
+                          <HourWrapper
+                              key={i}
+                              pointerEvents="none"
+                              style={innerHourRootStyle}
+                              position={a}>
+                              <View style={innerHourInner}>
+                                  <HourText
+                                      hours={hours}
+                                      is24Hour={is24Hour}
+                                      activeTextColor={activeTextColor}
+                                      type="inner"
+                                      index={i}
+                                      style={innerHourTextStyle}>
+                                      {a.hourValue === 24 ? '00' : a.hourValue}
+                                  </HourText>
+                              </View>
+                          </HourWrapper>
+                      ))
+                    : null}
+            </>
+        </>
+    );
+}
+
+const HourWrapper = memo(
+    ({
+        style,
+        position,
+        ...rest
+    }: ViewProps & {
+        position: { x: number; y: number };
+    }) => {
+        const componentStyles = useMemo(() => {
+            return [
+                style,
+                {
+                    top: position.y || 0,
+                    left: position.x || 0,
+                },
+            ];
+        }, [position.x, position.y, style]);
+
+        return <View pointerEvents="none" style={componentStyles} {...rest} />;
+    },
+);
+
+const HourText = memo(
+    ({
+        style,
+        children,
+        type,
+        index: i,
+        hours,
+        activeTextColor,
+        is24Hour,
+        ...rest
+    }: TextProps & {
+        type: 'outer' | 'inner';
+        index: number;
+        hours: number;
+        activeTextColor: string;
+        is24Hour: boolean;
+    }) => {
+        const componentStyles = useMemo(() => {
+            const isOuterActive = (!is24Hour && hours === 0 && hours === i - 11) || hours === i + 1;
+            const isInnerActive = i + 13 === hours || (i + 13 === 24 && hours === 0);
+            const isActive = type === 'outer' ? isOuterActive : isInnerActive;
+
+            return [style, isActive ? { color: activeTextColor } : null];
+        }, [activeTextColor, hours, i, is24Hour, style, type]);
+
+        return (
+            <Text style={componentStyles} selectable={false} {...rest}>
+                {children}
+            </Text>
+        );
+    },
+);
+
+function getHourNumbers(
+    is24Hour: boolean,
+    size: number,
+    count: number,
+    arrayLength: number,
+    startsAt: number,
+) {
+    let angle = 0;
+    const step = (2 * Math.PI) / count;
+    const radius = size / (is24Hour ? 4 : 2.5);
+
+    angle = (-90 * Math.PI) / 180 + Math.PI / 6;
+
+    return Array(arrayLength)
+        .fill(true)
+        .map(() => {
+            const x = Math.round(size / 2 + radius * Math.cos(angle));
+            const y = Math.round(size / 2 + radius * Math.sin(angle));
+            angle += step;
+            return { x, y, hourValue: startsAt++ };
+        });
+}
+
+export default memo(AnalogClockHours);

package/components/TimePicker/AnalogClockMinutes.tsx

@@ -0,0 +1,68 @@
+import { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Text } from '../Text';
+import { circleSize } from './timeUtils';
+import { timePickerClockMinutesStyles } from './utils';
+function AnalogClockMinutes({ minutes }: { minutes: number }) {
+    const range = getMinuteNumbers(circleSize, 12);
+
+    const { activeTextColor, outerHourRootStyle, outerHourInnerStyle } = useMemo(() => {
+        const { outerHourRoot, outerHourInner } = timePickerClockMinutesStyles;
+
+        return {
+            activeTextColor: timePickerClockMinutesStyles.root?._activeTextColor,
+            outerHourRootStyle: (a: number[]) => [
+                outerHourRoot,
+                {
+                    top: a[1] || 0,
+                    left: a[0] || 0,
+                },
+            ],
+            outerHourInnerStyle: outerHourInner,
+        };
+    }, []);
+
+    return (
+        <>
+            {range.map((a, i) => {
+                const currentMinutes = i * 5;
+                const isZero = currentMinutes === 0;
+                let isCurrent = currentMinutes - 1 <= minutes && currentMinutes + 1 >= minutes;
+                if (isZero) {
+                    isCurrent = minutes >= 59 || currentMinutes + 1 >= minutes;
+                }
+                return (
+                    <View key={i} pointerEvents="none" style={outerHourRootStyle(a)}>
+                        <View style={outerHourInnerStyle}>
+                            <Text
+                                style={isCurrent ? { color: activeTextColor } : undefined}
+                                selectable={false}>
+                                {isZero ? '00' : currentMinutes}
+                            </Text>
+                        </View>
+                    </View>
+                );
+            })}
+        </>
+    );
+}
+
+function getMinuteNumbers(size: number, count: number) {
+    let angle = 0;
+    const step = (2 * Math.PI) / count;
+    const radius = size / 2.5;
+
+    angle = angle = (-90 * Math.PI) / 180;
+
+    return Array(12)
+        .fill(true)
+        .map(() => {
+            const x = Math.round(size / 2 + radius * Math.cos(angle));
+            const y = Math.round(size / 2 + radius * Math.sin(angle));
+            angle += step;
+            return [x, y];
+        });
+}
+
+export default memo(AnalogClockMinutes);

package/components/TimePicker/AnimatedClockSwitcher.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+
+import { clockTypes, type PossibleClockTypes } from './timeUtils';
+
+export default function AnimatedClockSwitcher({
+    focused,
+    hours,
+    minutes,
+}: {
+    focused: PossibleClockTypes;
+    hours: any;
+    minutes: any;
+}) {
+    const collapsed = focused === clockTypes.hours;
+    const animatedCollapsed = useRef<Animated.Value>(new Animated.Value(collapsed ? 1 : 0));
+
+    useEffect(() => {
+        Animated.timing(animatedCollapsed.current, {
+            toValue: collapsed ? 1 : 0,
+            duration: 250,
+            useNativeDriver: true,
+        }).start();
+    }, [collapsed]);
+
+    const { containerStyle, innerContainerStyle } = useMemo(() => {
+        return {
+            containerStyle: [
+                StyleSheet.absoluteFill,
+                {
+                    opacity: animatedCollapsed.current,
+                    transform: [
+                        {
+                            scale: animatedCollapsed.current.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [0.95, 1],
+                            }),
+                        },
+                    ],
+                },
+            ],
+            innerContainerStyle: [
+                StyleSheet.absoluteFill,
+                {
+                    opacity: animatedCollapsed.current.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [1, 0],
+                    }),
+                    transform: [
+                        {
+                            scale: animatedCollapsed.current.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [1, 0.95],
+                            }),
+                        },
+                    ],
+                },
+            ],
+        };
+    }, []);
+
+    return (
+        <View style={StyleSheet.absoluteFill}>
+            <Animated.View pointerEvents={collapsed ? 'auto' : 'none'} style={containerStyle}>
+                {hours}
+            </Animated.View>
+            <Animated.View pointerEvents={collapsed ? 'none' : 'auto'} style={innerContainerStyle}>
+                {minutes}
+            </Animated.View>
+        </View>
+    );
+}

package/components/TimePicker/DisplayModeContext.tsx

@@ -0,0 +1,6 @@
+import { createContext, type Dispatch, type SetStateAction } from 'react';
+
+export const DisplayModeContext = createContext<{
+    mode: 'AM' | 'PM' | undefined;
+    setMode: Dispatch<SetStateAction<'AM' | 'PM' | undefined>>;
+}>({ mode: 'AM', setMode: () => {} });