@fountain-ui/core 2.0.0-beta.7 → 2.0.0-beta.70

package/src/Tooltip/Tooltip.tsx

@@ -1,25 +1,29 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Text, View, ViewProps } from 'react-native';
-import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { rgb } from '@fountain-ui/utils';
+import ButtonBase from '../ButtonBase';
 import { createFontStyle, css, useTheme } from '../styles';
 import { Close as CloseIcon } from '../internal/icons';
 import type TooltipProps from './TooltipProps';
 import UpArrow from './UpArrow';
 
-const defaultOpacity = 0.8;
-const initialLayout = { width: 0, height: 0, x: 0, y: 0 };
+const DEFAULT_OPACITY = 0.8;
+const INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };
 
-const animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };
 
 export default function Tooltip(props: TooltipProps) {
     const {
+        arrowLayout,
         children,
+        initialLayout = INITIAL_LAYOUT,
         left,
         onClose,
         placement = 'top',
         right,
+        numberOfTitleLines = 1,
         style,
         title,
         tooltipStyle,
@@ -29,19 +33,23 @@ export default function Tooltip(props: TooltipProps) {
 
     const theme = useTheme();
 
-    const [layout, setLayout] = React.useState(initialLayout);
+    const [layout, setLayout] = useState(initialLayout);
 
-    const scale = Animated.useSharedValue(0);
+    const scale = useSharedValue(0);
 
-    const tooltipAnimatedStyle = Animated.useAnimatedStyle(() => ({
+    const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ scale: scale.value }],
-    }));
+    }), []);
 
     const [r, g, b] = rgb(theme.palette.primary.main);
 
     const totalVerticalOffset = -(layout.height + verticalOffset);
     const tooltipLayoutStyle: ViewProps['style'] = {
-        alignItems: 'center',
+        alignItems: arrowLayout?.placement === 'left'
+            ? 'flex-start'
+            : arrowLayout?.placement === 'right'
+                ? 'flex-end'
+                : 'center',
         bottom: placement === 'bottom' ? totalVerticalOffset : undefined,
         left,
         position: 'absolute',
@@ -52,18 +60,19 @@ export default function Tooltip(props: TooltipProps) {
         overflow: visible ? undefined : 'hidden',
     };
 
-    React.useEffect(() => {
-        const nextValue = visible ? 1 : 0;
+    useEffect(() => {
+        const nextScaleValue = visible ? 1 : 0;
 
-        scale.value = Animated.withTiming(nextValue, animationTimingConfig);
+        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);
     }, [visible]);
 
     const touchableStyle: ViewProps['style'] = {
         alignItems: 'center',
-        backgroundColor: `rgba(${r}, ${g}, ${b}, ${defaultOpacity})`,
+        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
         borderRadius: theme.shape.roundness,
         flexDirection: 'row',
         padding: theme.spacing(2),
+        width: '100%',
     };
 
     const fontStyle = createFontStyle(theme, {
@@ -73,19 +82,28 @@ export default function Tooltip(props: TooltipProps) {
 
     const textStyle = css([
         fontStyle,
-        { marginRight: theme.spacing(2) },
+        {
+            marginRight: theme.spacing(2),
+            flexShrink: 1,
+        },
     ]);
 
+    const arrowStyle = css({
+        ...(arrowLayout && {
+            [arrowLayout.placement]: arrowLayout.offset,
+        }),
+    });
+
     const buttonElem = (
-        <TouchableWithoutFeedback
-            disallowInterruption={true}
+        <ButtonBase
+            pressEffect={'none'}
             onPress={onClose}
         >
             <View style={css(touchableStyle)}>
                 <Text
                     children={title}
                     // TODO: Should we provide text prop customization?
-                    numberOfLines={1}
+                    numberOfLines={numberOfTitleLines}
                     style={textStyle}
                 />
                 <CloseIcon
@@ -94,15 +112,17 @@ export default function Tooltip(props: TooltipProps) {
                     height={20}
                 />
             </View>
-        </TouchableWithoutFeedback>
+        </ButtonBase>
     );
 
     const arrowElem = (
-        <UpArrow
-            upsideDown={placement === 'top'}
-            fill={theme.palette.primary.main}
-            opacity={defaultOpacity}
-        />
+        <View style={arrowStyle}>
+            <UpArrow
+                upsideDown={placement === 'top'}
+                fill={theme.palette.primary.main}
+                opacity={DEFAULT_OPACITY}
+            />
+        </View>
     );
 
     return (
@@ -110,9 +130,15 @@ export default function Tooltip(props: TooltipProps) {
             {children}
 
             <Animated.View
-                onLayout={(event) => setLayout(event.nativeEvent.layout)}
+                onLayout={(event) => {
+                    if (event.nativeEvent.layout.height === 0) {
+                        return;
+                    }
+
+                    setLayout(event.nativeEvent.layout);
+                }}
                 style={[
-                    tooltipAnimatedStyle,
+                    animatedStyle,
                     tooltipLayoutStyle,
                     tooltipStyle,
                 ]}

package/src/Tooltip/TooltipProps.ts

@@ -1,10 +1,14 @@
 import React from 'react';
-import type { ViewProps, ViewStyle } from 'react-native';
+import type { TextProps, ViewProps } from 'react-native';
 import type { ComponentProps } from '../types';
 import type { ButtonProps } from '../Button';
 
 export type TooltipPlacement = 'top' | 'bottom';
 
+export type TooltipArrowPlacement = 'left' | 'right';
+
+export type TooltipInitialLayout = { height: number, width: number, x: number, y: number };
+
 export default interface TooltipProps extends ComponentProps<{
     /**
      * Tooltip reference element.
@@ -53,4 +57,25 @@ export default interface TooltipProps extends ComponentProps<{
      * @default false
      */
     visible?: boolean;
+
+    /**
+     * Tooltip arrow layout.
+     * If 'undefined', the arrow will be centered on tooltip.
+     */
+    arrowLayout?: {
+        placement: TooltipArrowPlacement;
+        offset: number;
+    }
+
+    /**
+     * number of tooltip's title lines
+     * @default 1
+     */
+    numberOfTitleLines?: TextProps['numberOfLines'];
+
+    /**
+     * position of tooltip before onLayout call
+     * @default  { height: 0, width: 0 , x: 0, y: 0}
+     */
+    initialLayout: TooltipInitialLayout;
 }> {}

package/src/Typography/Typography.tsx

@@ -45,7 +45,10 @@ const styles = StyleSheet.create({
 
 const Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {
     const {
+        accessibilityRole,
         align = 'inherit',
+        ariaLevel,
+        disableFontScaling = false,
         children,
         color: colorProp = 'inherit',
         ellipsizeMode = 'tail',
@@ -55,6 +58,8 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
         selectable,
         style,
         variant = 'body1',
+        onLayout,
+        onTextLayout,
     } = props;
 
     const theme = useTheme();
@@ -76,13 +81,15 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
     ]);
 
     const accessibility = accessibilityMap[variant];
-    const accessibilityRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;
+    const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;
+    const variantLevel = accessibility?.['area-level'];
 
     return (
         <Text
             ref={ref}
-            accessibilityRole={accessibilityRole}
-            aria-level={accessibility?.['area-level']}
+            accessibilityRole={accessibilityRole || variantRole}
+            allowFontScaling={!disableFontScaling}
+            aria-level={ariaLevel || variantLevel}
             children={children}
             ellipsizeMode={ellipsizeMode}
             // @ts-ignore
@@ -91,6 +98,8 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
             onPress={onPress}
             selectable={selectable}
             style={textStyle}
+            onLayout={onLayout}
+            onTextLayout={onTextLayout}
         />
     );
 });

package/src/Typography/TypographyProps.ts

@@ -39,6 +39,11 @@ export interface AccessibilityMap extends Partial<{
 }> {}
 
 export default interface TypographyProps extends ComponentProps<{
+    /**
+     * Applies HTML tag at web and communicates purpose of component at app
+     */
+    accessibilityRole?: AccessibilityProps['accessibilityRole'];
+
     /**
      * Set the text-align on the component.
      * The value 'justify' is not supported on Android and fallbacks to left.
@@ -46,6 +51,17 @@ export default interface TypographyProps extends ComponentProps<{
      */
     align?: TypographyAlign;
 
+    /**
+     * Applies HTML heading level
+     */
+    ariaLevel?: number;
+
+    /**
+     * Specifies whether fonts should scale to respect Text Size accessibility settings.
+     * @default false
+     */
+    disableFontScaling?: boolean;
+
     /**
      * The content of the component.
      */
@@ -90,4 +106,15 @@ export default interface TypographyProps extends ComponentProps<{
      * @default 'body1'
      */
     variant?: TypographyVariant;
+
+
+    /**
+     * Callback that is called when the text layout has been calculated.
+     */
+    onTextLayout?: TextProps['onTextLayout'];
+
+    /**
+     * Callback that is called when the layout of the Text component changes.
+     */
+     onLayout?: TextProps['onLayout'];
 }> {}

package/src/animated/AnimatedPressable.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import Animated from 'react-native-reanimated';
+import { Animated } from 'react-native';
 import Pressable from '../Pressable';
 
-// @ts-ignore
 export default Animated.createAnimatedComponent(Pressable);

package/src/hooks/index.ts

@@ -1,7 +1,13 @@
+export { default as useAnimatedValue } from './useAnimatedValue';
 export { default as useBreakpointUp } from './useBreakpointUp';
 export { default as useCollapsibleAppBar } from './useCollapsibleAppBar';
 export { default as useContentContainerStyle } from './useContentContainerStyle';
 export { default as useElevationStyle } from './useElevationStyle';
 export { default as useFadeInAppBar } from './useFadeInAppBar';
+export { default as useImperativeState } from './useImperativeState';
+export { default as useSyncAnimatedValue } from './useSyncAnimatedValue';
 export { default as useThrottle } from './useThrottle';
+export { default as useDebounce } from './useDebounce';
 export { default as useValidWindowDimensions } from './useValidWindowDimensions';
+
+export type { CollapsibleAppBar } from './useCollapsibleAppBar'

package/src/hooks/useAnimatedValue.ts

@@ -0,0 +1,21 @@
+import { useMemo, useRef } from 'react';
+import { Animated } from 'react-native';
+
+function ensureFiniteNumber(value: any, fallback: number = 0): number {
+    return Number.isFinite(value) ? value : fallback;
+}
+
+export default function useAnimatedValue(initialValue: number = 0): Animated.Value {
+    if (__DEV__) {
+        if (!Number.isFinite(initialValue)) {
+            console.warn(`Initial value: ${initialValue} must be numeric.`);
+        }
+    }
+
+    const initialAnimatedValue = useMemo<Animated.Value>(
+        () => new Animated.Value(ensureFiniteNumber(initialValue)),
+        [],
+    );
+
+    return useRef<Animated.Value>(initialAnimatedValue).current;
+};

package/src/hooks/useCollapsibleAppBar.ts

@@ -1,9 +1,26 @@
-import React from 'react';
-import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { useCallback, useRef } from 'react';
+import {
+    Falsy,
+    Keyboard,
+    Platform,
+    RegisteredStyle,
+    ScrollViewProps,
+    StyleSheet,
+    ViewProps,
+    ViewStyle,
+} from 'react-native';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import {
+    runOnJS,
+    useAnimatedScrollHandler,
+    useAnimatedStyle,
+    useDerivedValue,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from '@fountain-ui/styles';
 import { useHeight } from '../internal/hooks';
-import useElevationStyle from './useElevationStyle';
 import useAppbarStyles from './useAppbarStyles';
 
 type WebOnlyStyle = { boxShadow: any };
@@ -23,6 +40,8 @@ export interface ContentInsets {
 
 export interface Options {
     keyboardDismissMode?: 'none' | 'on-drag';
+    dividerExposureMode?: 'always' | 'overlapped';
+    supportsReverseScroll?: boolean;
 }
 
 export interface CollapsibleAppBar {
@@ -36,14 +55,18 @@ export interface CollapsibleAppBar {
 
 const defaultOptions: Required<Options> = {
     keyboardDismissMode: 'none',
+    dividerExposureMode: 'overlapped',
+    supportsReverseScroll: true,
 };
 
-const ANIMATION_DURATION_MILLIS = 100;
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };
+const TRANSPARENT = '#FFFFFF00';
 
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
+const dismissKeyboard = () => Keyboard.dismiss();
 
 export default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
-    const { keyboardDismissMode }: Required<Options> = {
+    const { keyboardDismissMode, dividerExposureMode, supportsReverseScroll }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
@@ -55,32 +78,32 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
     const [appBarHeight, onAppBarLayout] = useHeight();
     const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
 
-    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);
-
-    const translateY = Animated.useSharedValue<number>(0);
-    const lastTranslateY = Animated.useSharedValue<number>(0);
-    const lastOffsetY = Animated.useSharedValue<number>(0);
-    const overlapped = Animated.useSharedValue<boolean>(false);
-
-    const elevationStyle = useElevationStyle(4);
-    const animatedStyle = Animated.useAnimatedStyle(() => {
-        return Platform.OS === 'web' ? ({
-            transform: [{ translateY: translateY.value }],
-            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
-        }) : ({
-            transform: [{ translateY: translateY.value }],
-            elevation: overlapped.value ? elevationStyle?.elevation : 0,
-            shadowColor: elevationStyle?.shadowColor,
-            shadowOffset: elevationStyle?.shadowOffset,
-            shadowRadius: elevationStyle?.shadowRadius,
-            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
-        });
-    });
-
-    const indexRef = React.useRef<number>(0);
-    const offsetsRef = React.useRef<Array<number>>([]);
-
-    const onScrollViewChanged = (nextIndex: number) => {
+    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
+
+    const translateY = useSharedValue<number>(0);
+    const lastTranslateY = useSharedValue<number>(0);
+    const lastOffsetY = useSharedValue<number>(0);
+    const overlapped = useSharedValue<boolean>(false);
+
+    const theme = useTheme();
+
+    const animatedStyle = useAnimatedStyle(() => {
+        const transform = [{ translateY: translateY.value }];
+
+        return {
+            transform,
+            borderColor: dividerExposureMode === 'always' || overlapped.value ? theme.palette.divider : TRANSPARENT,
+            borderBottomWidth: StyleSheet.hairlineWidth,
+        };
+    }, [
+        theme,
+        dividerExposureMode,
+    ]);
+
+    const indexRef = useRef<number>(0);
+    const offsetsRef = useRef<Array<number>>([]);
+
+    const onScrollViewChanged = useCallback((nextIndex: number) => {
         const prevIndex = indexRef.current;
         if (prevIndex === nextIndex) {
             return;
@@ -98,16 +121,14 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
         // If next ScrollView's offset is too short, expand app bar.
         if (translateY.value < 0 && savedOffsetY < appBarHeight) {
-            translateY.value = Animated.withTiming(0, {
-                duration: ANIMATION_DURATION_MILLIS,
-            });
+            translateY.value = withTiming(0, ANIMATION_CONFIG);
         }
-    };
+    }, [appBarHeight]);
 
-    const scrollHandler = Animated.useAnimatedScrollHandler({
+    const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
             if (keyboardDismissMode === 'on-drag') {
-                Animated.runOnJS(Keyboard.dismiss)();
+                runOnJS(dismissKeyboard)();
             }
             lastTranslateY.value = translateY.value;
         },
@@ -117,7 +138,6 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
         onScroll: (event) => {
             const offsetY = event.contentOffset.y;
 
-            const ty = translateY.value;
             const maxTy = maxTranslateY.value;
 
             if (SUPPORTS_DRAG_DETECTION) {
@@ -127,19 +147,25 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
                 overlapped.value = offsetY + translateY.value > 0;
             } else {
-                if (offsetY > -maxTy) {
-                    if (ty === 0) {
-                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
-                            duration: ANIMATION_DURATION_MILLIS,
-                        });
-                    }
-                } else {
-                    if (ty === maxTy) {
-                        translateY.value = Animated.withTiming(0, {
-                            duration: ANIMATION_DURATION_MILLIS,
-                        });
-                    }
-                }
+                const minOffsetY = -maxTy;
+                const maxOffsetY = event.contentSize.height - event.layoutMeasurement.height;
+
+                const safeOffsetY = Math.min(Math.max(offsetY, minOffsetY), maxOffsetY);
+                const safeLastOffsetY = Math.min(Math.max(lastOffsetY.value, minOffsetY), maxOffsetY);
+                const dy = safeOffsetY - safeLastOffsetY;
+
+                const newTranslateY = supportsReverseScroll
+                    ? dy === 0
+                        ? lastTranslateY.value
+                        : dy > 0
+                            ? maxTy
+                            : 0
+                    : safeLastOffsetY === minOffsetY
+                        ? 0
+                        : maxTy;
+
+                translateY.value = withTiming(newTranslateY, ANIMATION_CONFIG);
+                lastTranslateY.value = newTranslateY;
 
                 overlapped.value = offsetY > 0;
 
@@ -168,11 +194,9 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
             overlapped.value = offsetY + nextTranslateY > 0;
 
-            translateY.value = Animated.withTiming(nextTranslateY, {
-                duration: ANIMATION_DURATION_MILLIS,
-            });
+            translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);
         },
-    });
+    }, [keyboardDismissMode, appBarHeight]);
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 

package/src/hooks/useDebounce.ts

@@ -0,0 +1,23 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export default function useDebounce(callback: (args?: any) => void, debounceMillis: number) {
+    const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
+
+    useEffect(() => {
+        return () => {
+            debounceTimeout.current && clearTimeout(debounceTimeout.current);
+        };
+    }, []);
+
+    return useCallback((...args: any[]) => {
+        if (debounceTimeout.current) {
+            clearTimeout(debounceTimeout.current);
+        }
+
+        if (callback) {
+            debounceTimeout.current = setTimeout(() => {
+                callback(...args);
+            }, debounceMillis);
+        }
+    }, [debounceMillis, callback]);
+}