@fountain-ui/core 2.0.0-beta.5 → 2.0.0-beta.50

package/src/Image/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Image';
-export type { default as ImageProps } from './ImageProps';
+export type { default as ImageProps, ImageQuality } from './ImageProps';

package/src/ImageCore/ImageCoreNative.tsx

@@ -1,15 +1,21 @@
-import React from 'react';
-import Animated from 'react-native-reanimated';
+import React, { useCallback, useContext } from 'react';
+import { Animated } from 'react-native';
 import FastImage from 'react-native-fast-image';
+import { useAnimatedValue } from '../hooks';
 import type ImageCoreProps from './ImageCoreProps';
+import ImageFileExtensionContext from './ImageFileExtensionContext';
 
 // @ts-ignore
 const AnimatedFastImage = Animated.createAnimatedComponent(FastImage);
 
-const animationConfig: Animated.WithTimingConfig = { duration: 150 };
+const INITIAL_OPACITY = 0;
+const LOADED_OPACITY = 1;
+
+const ANIMATION_DURATION = 200;
 
 export default function ImageCore(props: ImageCoreProps) {
     const {
+        cache,
         height,
         onError,
         onLoad,
@@ -18,31 +24,35 @@ export default function ImageCore(props: ImageCoreProps) {
         width,
     } = props;
 
-    const style = { width, height };
-
-    const opacity = Animated.useSharedValue(0);
+    const opacity = useAnimatedValue(INITIAL_OPACITY);
 
-    const animatedStyle = Animated.useAnimatedStyle(() => ({
-        opacity: opacity.value,
-    }));
+    const acceptHeader = useContext(ImageFileExtensionContext);
 
-    const handleLoad = () => {
-        opacity.value = Animated.withTiming(1, animationConfig);
+    const handleLoad = useCallback(() => {
+        Animated.timing(opacity, {
+            toValue: LOADED_OPACITY,
+            duration: ANIMATION_DURATION,
+            useNativeDriver: true,
+        }).start();
 
-        if (onLoad) {
-            onLoad();
-        }
-    };
+        onLoad?.();
+    }, [onLoad]);
 
     return (
         <AnimatedFastImage
             onError={onError}
             onLoad={handleLoad}
             resizeMode={resizeMode}
-            source={{ uri: source.uri }}
+            source={{
+                cache,
+                uri: source.uri,
+                headers: {
+                    'Accept': acceptHeader,
+                },
+            }}
             style={[
-                animatedStyle,
-                style,
+                { opacity },
+                { width, height },
             ]}
         />
     );

package/src/ImageCore/ImageCoreProps.ts

@@ -1,13 +1,18 @@
 export interface ImageSource {
-    uri: string;
+    uri?: string;
 }
 
 export type ResizeMode = 'cover' | 'contain';
 
 export type Loading = 'lazy' | 'eager';
 
+export type CacheControl = 'immutable' | 'web' | 'cacheOnly';
+
 export default interface ImageCoreProps extends Readonly<{
     alt?: string;
+    cache?: CacheControl;
+    disableDrag?: boolean,
+    disableLongClick?: boolean,
     height?: number | string;
     loading: Loading;
     onError?: () => void;

package/src/ImageCore/ImageCoreWeb.tsx

@@ -1,9 +1,24 @@
-import React from 'react';
+import React, { DragEventHandler, MouseEventHandler } from 'react';
 import type ImageCoreProps from './ImageCoreProps';
 
+const longClickDisabledStyle = {
+    '-webkit-user-select': 'none',
+    '-webkit-touch-callout': 'none',
+};
+
+const preventDragging: DragEventHandler<HTMLImageElement> = () => false;
+
+const preventMouseDown: MouseEventHandler<HTMLImageElement> = (event) => {
+    if (event.preventDefault) {
+        event.preventDefault();
+    }
+};
+
 export default function ImageCore(props: ImageCoreProps) {
     const {
         alt,
+        disableDrag = false,
+        disableLongClick = false,
         height,
         loading,
         onError,
@@ -13,13 +28,18 @@ export default function ImageCore(props: ImageCoreProps) {
         width,
     } = props;
 
-    const style = { objectFit: resizeMode };
+    const style = {
+        objectFit: resizeMode,
+        ...(disableLongClick ? longClickDisabledStyle : {}),
+    };
 
     return (
         <img
             alt={alt}
             height={height}
             loading={loading}
+            onDragStart={disableDrag ? preventDragging : undefined}
+            onMouseDown={disableDrag ? preventMouseDown : undefined}
             onError={onError}
             onLoad={onLoad}
             src={source.uri}

package/src/ImageCore/ImageFileExtensionContext.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const DEFAULT_ACCEPT_HEADER = 'image/jpg,image/png,image/*,*/*;';
+
+const ImageFileExtensionContext = createContext<string>(DEFAULT_ACCEPT_HEADER);
+
+export default ImageFileExtensionContext;

package/src/ImageCore/ImageFileExtensionProvider.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import * as R from 'ramda';
+import ImageFileExtensionContext from './ImageFileExtensionContext';
+
+export enum ImageFileExtension {
+    AVIF = 'avif',
+    WEBP = 'webp',
+    JPG = 'jpg',
+    PNG = 'png',
+}
+
+interface ImageFileExtensionProviderProps {
+    children: React.ReactNode;
+    extensions: ImageFileExtension[];
+}
+
+export default function ImageFileExtensionProvider(props: ImageFileExtensionProviderProps) {
+    const { children, extensions } = props;
+
+    const supportedMediaTypes = [
+        ...(R.map(extension => `image/${extension}`, extensions)),
+        'image/*',
+        '*/*',
+    ];
+
+    const acceptHeader = `${R.join(',', supportedMediaTypes)};`;
+
+    return (
+        <ImageFileExtensionContext.Provider value={acceptHeader}>
+            {children}
+        </ImageFileExtensionContext.Provider>
+    );
+}

package/src/ImageCore/index.native.ts

@@ -1 +1,3 @@
-export { default } from './ImageCoreNative';
+export { default } from './ImageCoreNative';
+export { default as ImageFileExtensionProvider } from './ImageFileExtensionProvider';
+export * from './ImageFileExtensionProvider';

package/src/ImageCore/index.ts

@@ -1,2 +1,5 @@
 export { default } from './ImageCoreWeb';
-export * from './ImageCoreProps';
+export type { default as ImageCoreProps, ImageSource, Loading, ResizeMode, CacheControl } from './ImageCoreProps';
+
+export { default as ImageFileExtensionProvider } from './ImageFileExtensionProvider';
+export * from './ImageFileExtensionProvider';

package/src/Radio/Radio.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
 import { Radio as RadioIcon, RadioChecked as RadioCheckedIcon } from '../internal';
-import { css, useTheme } from '../styles';
+import { css } from '../styles';
 import { RadioContext } from '../RadioGroup/RadioContextProvider';
 import type RadioProps from './RadioProps';
 
@@ -32,8 +32,6 @@ export default function Radio(props: RadioProps) {
 
     const styles = useStyles();
 
-    const theme = useTheme();
-
     const context = React.useContext(RadioContext);
 
     const handlePress = () => {

package/src/Slide/Slide.tsx

@@ -1,11 +1,14 @@
-import React from 'react';
-import { useWindowDimensions } from 'react-native';
-import Animated, { Easing } from 'react-native-reanimated';
+import React, { useEffect } from 'react';
+import { Dimensions } from 'react-native';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import type SlideProps from './SlideProps';
 
 const defaultEnterDuration = 300;
 const defaultExitDuration = 300;
 
+const getDisappearingOffsetY = (): number => Dimensions.get('window').height;
+
 export default function Slide(props: SlideProps) {
     const {
         animatedY: animatedYProp,
@@ -20,40 +23,40 @@ export default function Slide(props: SlideProps) {
         ...otherProps
     } = props;
 
-    const window = useWindowDimensions();
-
-    const y = Animated.useSharedValue(window.height);
+    const y = useSharedValue(getDisappearingOffsetY());
     const animatedY = animatedYProp || y;
 
-    const animatedStyle = Animated.useAnimatedStyle(() => ({
+    const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ translateY: animatedY.value }],
-    }));
+    }), []);
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (appear) {
-            const enterConfig: Animated.WithTimingConfig = {
+            onEnter?.();
+
+            const toValue = 0;
+            const enterConfig: Readonly<WithTimingConfig> = {
                 duration: enterDuration,
                 easing: Easing.out(Easing.exp),
             };
 
-            onEnter?.();
-
-            animatedY.value = Animated.withTiming(0, enterConfig, isFinished => {
+            animatedY.value = withTiming(toValue, enterConfig, isFinished => {
                 if (isFinished && onEntered) {
-                    Animated.runOnJS(onEntered)();
+                    runOnJS(onEntered)();
                 }
             });
         } else {
-            const exitConfig: Animated.WithTimingConfig = {
+            onExit?.();
+
+            const toValue = getDisappearingOffsetY();
+            const exitConfig: Readonly<WithTimingConfig> = {
                 duration: exitDuration,
                 easing: Easing.in(Easing.ease),
             };
 
-            onExit?.();
-
-            animatedY.value = Animated.withTiming(window.height, exitConfig, isFinished => {
+            animatedY.value = withTiming(toValue, exitConfig, isFinished => {
                 if (isFinished && onExited) {
-                    Animated.runOnJS(onExited)();
+                    runOnJS(onExited)();
                 }
             });
         }
@@ -61,6 +64,7 @@ export default function Slide(props: SlideProps) {
 
     return (
         <Animated.View
+            pointerEvents={'box-none'}
             style={[
                 animatedStyle,
                 style,

package/src/Tab/Tab.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { cloneElement } from 'react';
 import { Platform, Text } from 'react-native';
 import Badge from '../Badge';
 import TabBase from '../TabBase';
@@ -12,10 +12,10 @@ const styles = StyleSheet.create({
         ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),
     },
     primary: {
-        minHeight: 48,
+        minHeight: 40,
     },
     secondary: {
-        minHeight: 48,
+        minHeight: 40,
     },
     bottomNavigation: {
         minHeight: 56,
@@ -26,9 +26,10 @@ export default function Tab(props: TabProps) {
     const {
         badgeVisible = false,
         children,
-        enableIndicator,
+        enableIndicator = false,
         icon: defaultIcon,
-        selected,
+        indicatorColor = 'primary',
+        selected = false,
         selectedIcon,
         variant = 'primary',
         style,
@@ -59,7 +60,7 @@ export default function Tab(props: TabProps) {
     const pressEffect = selected ? 'none' : 'opacity';
 
     const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;
-    const iconElement = icon ? React.cloneElement(icon, { fill: color }) : null;
+    const iconElement = icon ? cloneElement(icon, { fill: color }) : null;
 
     return (
         <TabBase
@@ -78,7 +79,7 @@ export default function Tab(props: TabProps) {
                 style={css(fontStyle)}
             />
 
-            {enableIndicator ? <TabIndicator/> : null}
+            {(enableIndicator && selected) ? <TabIndicator color={indicatorColor}/> : null}
         </TabBase>
     );
 };

package/src/Tab/TabIndicator.tsx

@@ -1,27 +1,29 @@
 import React from 'react';
 import { View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { NamedStylesStringUnion } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
+import type { TabIndicatorColor } from './TabProps';
 
 type TabIndicatorStyles = NamedStylesStringUnion<'root'>;
 
-const useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {
-    const theme = useTheme();
+const useStyles: (color: TabIndicatorColor) => TabIndicatorStyles =
+    function (color: TabIndicatorColor): TabIndicatorStyles {
+        const theme = useTheme();
 
-    return {
-        root: {
-            backgroundColor: theme.palette.secondary.main,
-            bottom: 0,
-            height: 4,
-            left: 12,
-            right: 12,
-            position: 'absolute',
-        },
+        return {
+            root: {
+                backgroundColor: theme.palette[color].main,
+                bottom: 0,
+                height: 2,
+                left: 12,
+                right: 12,
+                position: 'absolute',
+            },
+        };
     };
-};
 
-const TabIndicator = function TabIndicator() {
-    const styles = useStyles();
+const TabIndicator = function TabIndicator({ color }: { color: TabIndicatorColor }) {
+    const styles = useStyles(color);
 
     return (
         <View

package/src/Tab/TabProps.ts

@@ -3,6 +3,7 @@ import type { TabBaseProps } from '../TabBase';
 import type { OverridableComponentProps } from '../types';
 
 export type TabVariant = 'primary' | 'secondary' | 'bottom-navigation';
+export type TabIndicatorColor = 'primary' | 'secondary'
 
 export default interface TabProps extends OverridableComponentProps<TabBaseProps, {
     /**
@@ -33,6 +34,12 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      */
     icon?: React.ReactElement;
 
+    /**
+     * Tab indicator color
+     * @default 'primary'
+     */
+    indicatorColor?: TabIndicatorColor;
+
     /**
      * If supplied, use this icon on selected state.
      */

package/src/Tabs/IndexAwareTab.tsx

@@ -0,0 +1,29 @@
+import type { ReactElement } from 'react';
+import React, { cloneElement, useContext, useEffect, useState } from 'react';
+import InternalContext from './InternalContext';
+
+export interface IndexAwareTabProps {
+    children: ReactElement;
+    index: number;
+    initialIndex: number;
+}
+
+export default function IndexAwareTab(props: IndexAwareTabProps) {
+    const {
+        children,
+        index,
+        initialIndex,
+    } = props;
+
+    const [selected, setSelected] = useState(initialIndex === index);
+
+    const { indexStore } = useContext(InternalContext);
+
+    useEffect(() => {
+        return indexStore.subscribe((currentIndex) => {
+            setSelected(currentIndex === index);
+        });
+    }, [indexStore, index]);
+
+    return cloneElement(children, { selected });
+};

package/src/Tabs/InternalContext.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import type { MonoStore } from '../store';
+import { MockStore } from '../store';
+
+export interface InternalContextValue {
+    indexStore: MonoStore<number>;
+}
+
+const InternalContext = createContext<InternalContextValue>({
+    indexStore: new MockStore(),
+});
+
+export default InternalContext;

package/src/Tabs/ScrollableTabsView.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { ScrollViewProps } from 'react-native';
+import { ScrollView } from 'react-native';
+import TabCoordinate from './TabCoordinate';
+import useScrollViewReaction from './useScrollViewReaction';
+
+export interface ScrollableTabsViewProps extends ScrollViewProps {
+    initialIndex: number;
+    coordinates: TabCoordinate[];
+}
+
+export default function ScrollableTabsView(props: ScrollableTabsViewProps) {
+    const {
+        coordinates,
+        initialIndex,
+        ...scrollViewProps
+    } = props;
+
+    const { scrollViewRef, onLayout } = useScrollViewReaction(initialIndex, coordinates);
+
+    return (
+        <ScrollView
+            ref={scrollViewRef}
+            onLayout={onLayout}
+            {...scrollViewProps}
+        />
+    );
+};

package/src/Tabs/TabIndicator.tsx

@@ -1,71 +1,107 @@
-import React from 'react';
-import Animated from 'react-native-reanimated';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import React, { useCallback, useContext, useEffect } from 'react';
+import { Animated, Easing } from 'react-native';
+import { NamedStylesStringUnion } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
+import { useAnimatedValue } from '../hooks';
 import type TabIndicatorProps from './TabIndicatorProps';
+import type { TabIndicatorColor } from './TabIndicatorProps';
 import { defaultCoordinate } from './TabCoordinate';
+import InternalContext from './InternalContext';
 
 type TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;
 
-const useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {
-    const theme = useTheme();
-
-    return {
-        root: {
-            backgroundColor: theme.palette.secondary.main,
-            bottom: 0,
-            height: 4,
-            position: 'absolute',
-        },
-        disabled: {
-            height: 0,
-        },
+const INDICATOR_WIDTH = 10;
+const INDICATOR_HEIGHT = 2;
+
+const SCROLLABLE_TABS_INSET = 12 * 2;
+
+const useStyles: (color: TabIndicatorColor) => TabIndicatorStyles =
+    function (color: TabIndicatorColor): TabIndicatorStyles {
+        const theme = useTheme();
+
+        return {
+            root: {
+                backgroundColor: theme.palette[color].main,
+                left: 0,
+                bottom: 0,
+                width: INDICATOR_WIDTH,
+                height: INDICATOR_HEIGHT,
+                position: 'absolute',
+            },
+            disabled: {
+                height: 0,
+            },
+        };
     };
+
+const startAnimation = (value: Animated.Value, toValue: number) => {
+    Animated.timing(value, {
+        toValue: toValue,
+        duration: 300,
+        easing: Easing.bezier(0.25, 1, 0.5, 1),
+        useNativeDriver: true,
+    }).start();
 };
 
 export default function TabIndicator(props: TabIndicatorProps) {
     const {
+        color = 'primary',
         coordinates,
         disabled,
+        initialIndex,
         scrollable,
-        scrollValue,
         style,
         ...otherProps
     } = props;
 
-    const styles = useStyles();
+    const styles = useStyles(color);
 
-    const layout = Animated.useDerivedValue(() => {
-        const rawScrollValue = scrollValue.value;
-        const index = Math.floor(rawScrollValue);
-        const offset = rawScrollValue % 1;
+    const computeAnimationValues = useCallback((currentIndex: number) => {
+        const { x1, x2 } = coordinates[currentIndex] ?? defaultCoordinate;
 
-        const coordinate = coordinates[index] ?? defaultCoordinate;
-        const nextCoordinate = coordinates[index + 1] ?? defaultCoordinate;
+        const tabWidth = x2 - x1;
 
-        const x1 = (offset * nextCoordinate.x1 + (1 - offset) * coordinate.x1);
-        const x2 = (offset * nextCoordinate.x2 + (1 - offset) * coordinate.x2);
+        const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;
 
-        const leftInset = scrollable ? 12 : 0;
-        const rightInset = scrollable ? 24 : 0;
+        const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;
+        const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;
 
-        return {
-            left: x1 + leftInset,
-            width: Math.max(x2 - x1 - rightInset, 0),
+        return { tx: nextTranslateX, sx: nextScaleX };
+    }, [coordinates, scrollable]);
+
+    const {
+        tx: initialTx,
+        sx: initialSx,
+    } = computeAnimationValues(initialIndex);
+
+    const translateX = useAnimatedValue(initialTx);
+    const scaleX = useAnimatedValue(initialSx);
+
+    const { indexStore } = useContext(InternalContext);
+
+    useEffect(() => {
+        const scrollToIndex = (index: number) => {
+            const { tx, sx } = computeAnimationValues(index);
+
+            startAnimation(translateX, tx);
+            startAnimation(scaleX, sx);
         };
-    });
 
-    const animatedStyle = Animated.useAnimatedStyle(() => ({
-        left: layout.value.left,
-        width: layout.value.width,
-    }));
+        scrollToIndex(indexStore.getState());
+
+        return indexStore.subscribe(scrollToIndex);
+    }, [
+        computeAnimationValues,
+        coordinates,
+        indexStore,
+    ]);
 
     return (
         <Animated.View
             style={[
                 styles.root,
                 disabled ? styles.disabled : undefined,
-                animatedStyle,
+                { transform: [{ translateX }, { scaleX }] },
                 style,
             ]}
             {...otherProps}