react-native-molecules 0.5.0-beta.0

package/components/TimePickerModal/TimePickerModal.tsx

@@ -0,0 +1,115 @@
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { KeyboardAvoidingView, Platform, View } from 'react-native';
+
+import { format } from '../../utils/date-fns';
+import { Button } from '../Button';
+import { IconButton } from '../IconButton';
+import { Modal, type ModalProps } from '../Modal';
+import { Portal } from '../Portal';
+import { Text } from '../Text';
+import TimePicker from '../TimePicker/TimePicker';
+import {
+    clockTypes,
+    getTimeInputTypeIcon,
+    inputTypes,
+    type PossibleClockTypes,
+    type PossibleInputTypes,
+    reverseInputTypes,
+} from '../TimePicker/timeUtils';
+import { styles } from './utils';
+
+export type Props = Omit<ModalProps, 'children'> & {
+    is24Hour?: boolean;
+    label?: string;
+    uppercase?: boolean;
+    cancelLabel?: string;
+    confirmLabel?: string;
+    time?: string;
+    onConfirm: (time: string) => any;
+    keyboardIcon?: string;
+    clockIcon?: string;
+    isLandscape?: boolean;
+};
+
+export function TimePickerModal({
+    isOpen,
+    onClose,
+    onConfirm: onConfirmProp,
+    time: timeProp,
+    label = 'Select time',
+    uppercase = false,
+    cancelLabel = 'Cancel',
+    confirmLabel = 'Ok',
+    is24Hour,
+    keyboardIcon = 'keyboard-outline',
+    clockIcon = 'clock-outline',
+    isLandscape = false,
+    style,
+    ...rest
+}: Props) {
+    const [inputType, setInputType] = useState<PossibleInputTypes>(inputTypes.picker);
+    const [focused, setFocused] = useState<PossibleClockTypes>(clockTypes.hours);
+    const [time, setTime] = useState(() => timeProp || format(new Date(), 'HH:mm'));
+
+    const modelStyle = useMemo(() => [styles.modalContent, style], [style]);
+
+    const onFocusInput = useCallback((type: PossibleClockTypes) => setFocused(type), []);
+
+    const onChange = useCallback(
+        (params: { focused?: PossibleClockTypes | undefined; time: string }) => {
+            if (params.focused) {
+                setFocused(params.focused);
+            }
+
+            setTime(params.time);
+        },
+        [setFocused, setTime],
+    );
+
+    const onConfirm = useCallback(() => onConfirmProp(time), [onConfirmProp, time]);
+
+    useEffect(() => {
+        setTime(timeProp || format(new Date(), 'HH:mm'));
+    }, [timeProp]);
+
+    return (
+        <Portal>
+            <Modal {...rest} isOpen={isOpen} style={modelStyle} onClose={onClose}>
+                <KeyboardAvoidingView
+                    style={styles.keyboardView}
+                    behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+                    <View style={styles.labelContainer}>
+                        <Text style={styles.label}>{uppercase ? label.toUpperCase() : label}</Text>
+                    </View>
+                    <View style={styles.timePickerContainer}>
+                        <TimePicker
+                            is24Hour={is24Hour}
+                            inputType={inputType}
+                            focused={focused}
+                            time={time}
+                            onTimeChange={onChange}
+                            onFocusInput={onFocusInput}
+                            isLandscape={isLandscape}
+                        />
+                    </View>
+                    <View style={styles.footer}>
+                        <IconButton
+                            name={getTimeInputTypeIcon(inputType, {
+                                keyboard: keyboardIcon,
+                                picker: clockIcon,
+                            })}
+                            onPress={() => setInputType(reverseInputTypes[inputType])}
+                            style={styles.inputTypeToggle}
+                            accessibilityLabel="toggle keyboard"
+                        />
+                        <View style={styles.fill} />
+                        <Button onPress={onClose}>{cancelLabel}</Button>
+                        <Button onPress={onConfirm}>{confirmLabel}</Button>
+                    </View>
+                </KeyboardAvoidingView>
+            </Modal>
+        </Portal>
+    );
+}
+
+export default memo(TimePickerModal);

package/components/TimePickerModal/index.tsx

@@ -0,0 +1,14 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import TimePickerModalDefault from './TimePickerModal';
+
+registerMoleculesComponents({
+    TimePickerModal: TimePickerModalDefault,
+});
+
+export const TimePickerModal = getRegisteredComponentWithFallback(
+    'TimePickerModal',
+    TimePickerModalDefault,
+);
+
+export type { Props as TimePickerModalProps } from './TimePickerModal';
+export { styles } from './utils';

package/components/TimePickerModal/utils.ts

@@ -0,0 +1,48 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const timepickerModalStylesDefault = StyleSheet.create(theme => ({
+    keyboardView: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        flex: 1,
+    },
+    modalContent: {
+        minWidth: 287,
+        width: undefined,
+        maxWidth: undefined,
+        flex: undefined,
+        borderRadius: theme.shapes.corner.extraLarge,
+    },
+    labelContainer: {
+        height: 28,
+        justifyContent: 'flex-end',
+        paddingLeft: theme.spacings['6'],
+        paddingRight: theme.spacings['6'],
+        alignSelf: 'flex-start',
+    },
+    label: {
+        letterSpacing: 1,
+        fontSize: theme.typescale.labelLarge.fontSize,
+        color: theme.colors.onSurface,
+        fontWeight: theme.typescale.labelLarge.fontWeight,
+    },
+    timePickerContainer: {
+        padding: theme.spacings['6'],
+    },
+    footer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: theme.spacings['2'],
+        width: '100%',
+    },
+    inputTypeToggle: { margin: theme.spacings['1'] },
+    fill: { flex: 1 },
+}));
+
+registerComponentsStyles({
+    TimePickerModal: timepickerModalStylesDefault,
+});
+
+export const styles = getRegisteredMoleculesComponentStyles('TimePickerModal');

package/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,137 @@
+import {
+    createContext,
+    memo,
+    type ReactElement,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+} from 'react';
+import { Text, type ViewProps, type ViewStyle } from 'react-native';
+
+import { useSubcomponents, useToggle } from '../../hooks';
+import { Popover, type PopoverProps } from '../Popover';
+import { tooltipStyles } from './utils';
+
+export type Props = Omit<PopoverProps, 'isOpen' | 'triggerRef'> & {
+    fadeInDelay?: number;
+    fadeOutDelay?: number;
+    showArrow?: boolean;
+    style?: ViewStyle;
+    children: ReactElement | ReactElement[];
+    hoverableContent?: boolean;
+};
+
+const Tooltip = ({
+    style,
+    children,
+    fadeInDelay = 100,
+    fadeOutDelay = 300,
+    showArrow = false,
+    hoverableContent = false,
+    ...rest
+}: Props) => {
+    const { state: isOpen, setState: setIsOpen } = useToggle(false);
+    const triggerRef = useRef(null);
+    const timeOutRef = useRef<NodeJS.Timeout>(undefined);
+    const popoverTimeoutRef = useRef<NodeJS.Timeout>(undefined);
+    const preventCloseRef = useRef(false);
+
+    const onClose = useCallback(() => {
+        if (preventCloseRef.current) return;
+        clearTimeout(timeOutRef.current);
+        timeOutRef.current = setTimeout(() => setIsOpen(false), fadeOutDelay);
+    }, [fadeOutDelay, setIsOpen]);
+
+    const onOpen = useCallback(() => {
+        clearTimeout(timeOutRef.current);
+        timeOutRef.current = setTimeout(() => setIsOpen(true), fadeInDelay);
+    }, [fadeInDelay, setIsOpen]);
+
+    // const setPopoverOpen = useCallback(
+    //     (_isOpen: boolean) => {
+    //         clearTimeout(popoverTimeoutRef.current);
+    //         popoverTimeoutRef.current = setTimeout(
+    //             () => setIsOpen(_isOpen),
+    //             isOpen ? fadeInDelay : fadeOutDelay,
+    //         );
+    //     },
+    //     [fadeInDelay, fadeOutDelay, isOpen, setIsOpen],
+    // );
+
+    const { Tooltip_Trigger, Tooltip_Content } = useSubcomponents({
+        children,
+        allowedChildren: ['Tooltip_Trigger', 'Tooltip_Content'],
+    });
+
+    const contextValue = useMemo(
+        () => ({
+            triggerRef,
+            onOpen,
+            onClose,
+        }),
+        [onClose, onOpen],
+    );
+
+    const { popoverContentProps, popoverStyle } = useMemo(
+        () => ({
+            popoverContentProps: (hoverableContent
+                ? {
+                      onMouseEnter: () => {
+                          preventCloseRef.current = true;
+                          clearTimeout(timeOutRef.current);
+                          setIsOpen(true);
+                      },
+                      onMouseLeave: () => {
+                          preventCloseRef.current = false;
+                          clearTimeout(timeOutRef.current);
+                          setIsOpen(false);
+                      },
+                  }
+                : {}) as ViewProps,
+            popoverStyle: [tooltipStyles.content, style],
+        }),
+        [hoverableContent, setIsOpen, style],
+    );
+
+    useEffect(() => {
+        const popoverTimeout = popoverTimeoutRef;
+
+        return () => {
+            clearTimeout(timeOutRef.current);
+            clearTimeout(popoverTimeout.current);
+        };
+    }, []);
+
+    return (
+        <TooltipContext.Provider value={contextValue}>
+            {Tooltip_Trigger[0]}
+            {isOpen && (
+                <Popover
+                    isOpen={isOpen}
+                    inverted
+                    // placement={placement}
+                    showArrow={showArrow}
+                    // backdropStyles={styles.backdrop}
+                    triggerRef={triggerRef}
+                    // setIsOpen={setPopoverOpen}
+                    {...popoverContentProps}
+                    {...rest}
+                    style={popoverStyle}
+                    // contentTextStyles={contentTextStyles}
+                    // popoverContentProps={popoverContentProps}
+                    onClose={onClose}>
+                    <Text style={tooltipStyles.contentText}>{Tooltip_Content[0]}</Text>
+                </Popover>
+            )}
+        </TooltipContext.Provider>
+    );
+};
+
+export const TooltipContext = createContext({
+    onOpen: () => {},
+    onClose: () => {},
+    triggerRef: null as any,
+});
+
+export default memo(Tooltip);

package/components/Tooltip/TooltipContent.tsx

@@ -0,0 +1,12 @@
+import { memo, type ReactElement, type ReactNode } from 'react';
+
+export type Props = {
+    children: ReactElement | ReactNode;
+};
+
+const TooltipContent = memo(({ children }: Props) => {
+    return <>{children}</>;
+});
+
+TooltipContent.displayName = 'Tooltip_Content';
+export default TooltipContent;

package/components/Tooltip/TooltipTrigger.tsx

@@ -0,0 +1,94 @@
+import {
+    cloneElement,
+    memo,
+    type ReactElement,
+    type RefAttributes,
+    useCallback,
+    useContext,
+    useEffect,
+    useImperativeHandle,
+    useMemo,
+} from 'react';
+import { Platform } from 'react-native';
+
+import { useActionState } from '../../hooks';
+import { TooltipContext } from './Tooltip';
+
+export type Props = {
+    children: ReactElement;
+};
+
+const TooltipTrigger = memo(({ children }: { children: ReactElement }) => {
+    const isWeb = Platform.OS === 'web';
+    const { onOpen, onClose, triggerRef } = useContext(TooltipContext);
+    const { hovered, actionsRef } = useActionState({ ref: triggerRef, actionsToListen: ['hover'] });
+
+    // this will make sure children's ref is not overwritten by the triggerRef
+    useImperativeHandle(
+        // @ts-ignore
+        (children as ReactElement & RefAttributes<any>)?.ref,
+        () => triggerRef?.current,
+    );
+
+    const onPress = useCallback(() => {
+        // @ts-ignore
+        children?.props?.onPress?.();
+    }, [children?.props]);
+
+    const onLongPress = useCallback(() => {
+        // @ts-ignore
+        children?.props?.onLongPress?.();
+
+        if (isWeb) return;
+        onOpen();
+    }, [children?.props, isWeb, onOpen]);
+
+    const onPressOut = useCallback(() => {
+        // @ts-ignore
+
+        children?.props?.onPressOut?.();
+
+        if (isWeb) return;
+        onClose();
+    }, [children?.props, isWeb, onClose]);
+
+    const onHoverIn = useCallback(() => {
+        // @ts-ignore
+        children?.props?.onHoverIn?.();
+
+        onOpen();
+    }, [children?.props, onOpen]);
+
+    const onHoverOut = useCallback(() => {
+        // @ts-ignore
+        children?.props?.onHoverOut?.();
+
+        onClose();
+    }, [onClose, children?.props]);
+
+    useEffect(() => {
+        if (!isWeb) return;
+
+        if (hovered) {
+            onHoverIn();
+            return;
+        }
+
+        onHoverOut();
+    }, [hovered, isWeb, onHoverIn, onHoverOut]);
+
+    return useMemo(
+        () =>
+            cloneElement(children, {
+                // @ts-ignore
+                ref: actionsRef,
+                onLongPress,
+                onPressOut,
+                onPress,
+            }),
+        [children, onLongPress, onPress, onPressOut, actionsRef],
+    );
+});
+
+TooltipTrigger.displayName = 'Tooltip_Trigger';
+export default TooltipTrigger;

package/components/Tooltip/index.tsx

@@ -0,0 +1,20 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import TooltipComponent from './Tooltip';
+import TooltipTrigger from './TooltipTrigger';
+import TooltipContent from './TooltipContent';
+
+export const TooltipDefault = Object.assign(TooltipComponent, {
+    Trigger: TooltipTrigger,
+    Content: TooltipContent,
+});
+
+registerMoleculesComponents({
+    Tooltip: TooltipDefault,
+});
+
+export const Tooltip = getRegisteredComponentWithFallback('Tooltip', TooltipDefault);
+
+export { Props as TooltipProps } from './Tooltip';
+export { Props as TooltipTriggerProps } from './TooltipTrigger';
+export { Props as TooltipContentProps } from './TooltipContent';
+export { tooltipStyles } from './utils';

package/components/Tooltip/utils.ts

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const tooltipStylesDefault = StyleSheet.create(theme => ({
+    content: {
+        backgroundColor: theme.colors.surfaceVariant,
+        borderRadius: theme.shapes.corner.extraSmall,
+        padding: theme.spacings['2'],
+    },
+    contentText: {
+        color: theme.colors.onSurface,
+        ...theme.typescale.bodySmall,
+    },
+}));
+
+registerComponentsStyles({
+    Tooltip: tooltipStylesDefault,
+});
+
+export const tooltipStyles = getRegisteredMoleculesComponentStyles('Tooltip');

package/components/TouchableRipple/TouchableRipple.native.tsx

@@ -0,0 +1,105 @@
+import React, { forwardRef, memo, useMemo } from 'react';
+import {
+    type BackgroundPropType,
+    Platform,
+    Pressable,
+    type StyleProp,
+    StyleSheet,
+    TouchableNativeFeedback,
+    TouchableWithoutFeedback,
+    View,
+    type ViewStyle,
+} from 'react-native';
+import { withUnistyles } from 'react-native-unistyles';
+
+import { touchableRippleStyles } from './utils';
+
+const ANDROID_VERSION_LOLLIPOP = 21;
+const ANDROID_VERSION_PIE = 28;
+
+type Props = React.ComponentProps<typeof TouchableWithoutFeedback> & {
+    borderless?: boolean;
+    background?: BackgroundPropType;
+    disabled?: boolean;
+    onPress?: () => void | null;
+    rippleColor?: string;
+    underlayColor?: string;
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+};
+
+const TouchableRipple = (
+    {
+        style,
+        background,
+        borderless = false,
+        disabled: disabledProp,
+        rippleColor: rippleColorProp,
+        underlayColor: underlayColorProp,
+        children,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const disabled = disabledProp || !rest.onPress;
+
+    const componentStyles = touchableRippleStyles;
+
+    const { rippleColor, underlayColor, containerStyle } = useMemo(() => {
+        return {
+            rippleColor: rippleColorProp,
+            underlayColor: underlayColorProp || rippleColorProp,
+            containerStyle: [borderless && styles.borderless, componentStyles.root, style],
+        };
+    }, [borderless, componentStyles.root, rippleColorProp, style, underlayColorProp]);
+
+    // A workaround for ripple on Android P is to use useForeground + overflow: 'hidden'
+    // https://github.com/facebook/react-native/issues/6480
+    const useForeground =
+        Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_PIE && borderless;
+
+    if (TouchableRipple.supported) {
+        return (
+            <TouchableNativeFeedback
+                {...rest}
+                ref={ref}
+                disabled={disabled}
+                useForeground={useForeground}
+                background={
+                    background != null
+                        ? background
+                        : TouchableNativeFeedback.Ripple(rippleColor!, borderless)
+                }>
+                <View style={containerStyle}>{React.Children.only(children)}</View>
+            </TouchableNativeFeedback>
+        );
+    }
+
+    return (
+        <Pressable
+            {...rest}
+            ref={ref}
+            disabled={disabled}
+            style={({ pressed }) => [
+                containerStyle,
+                pressed && { backgroundColor: underlayColor },
+            ]}>
+            {React.Children.only(children)}
+        </Pressable>
+    );
+};
+
+const styles = StyleSheet.create({
+    borderless: {
+        overflow: 'hidden',
+    },
+});
+
+TouchableRipple.supported =
+    Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP;
+
+export default memo(
+    withUnistyles(forwardRef(TouchableRipple), theme => ({
+        rippleColor: theme.colors.onSurfaceRipple,
+    })),
+);