@fountain-ui/lab 2.0.0-beta.9 → 3.0.0-alpha.1

package/src/ComicViewer/FastScrollProps.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import type { RefObject } from 'react';
+
+/**
+ * Position infos with display: 'position'.
+ */
+export type AbsolutePosition = {
+    top: number;
+    bottom: number;
+    right: number;
+    left: number;
+};
+
+/**
+ * Durations(millis) for show, hide animation.
+ */
+export type VisibleDurations = {
+    hideMillis: number;
+    showMillis: number;
+}
+
+export interface FastScrollInstance {
+    /**
+     * Handle content scroll event, not using fast scroll indicator.
+     * @param event Function onScroll event params.
+     */
+    onContentScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+
+    /**
+     * Set indicator visible state.
+     */
+    setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+
+    /**
+     * Return true, if pan gesture state is begin to finalize.
+     */
+    getIsIndicatorDragging: () => boolean,
+}
+
+export interface FastScrollOptions {
+    /**
+     * Ref for React.forwardRef.
+     */
+    ref: RefObject<FastScrollInstance>;
+
+    /**
+     * Range within which the indicator can move.
+     */
+    movementRange: number;
+
+    /**
+     * Scrollbar positions for 'display: position'.
+     */
+    absolutePosition?: Partial<AbsolutePosition>;
+
+    /**
+     * Durations(millis) for show, hide animation.
+     * @default { hide: 200, show: 350 }
+     */
+    visibleDurations?: VisibleDurations;
+
+    /**
+     * Additional height except contentLength.
+     * @default 0
+     */
+    additionalLength?: number;
+}
+
+interface FastScrollProps extends FastScrollOptions {
+    /**
+     * Total length of scrollable content.
+     */
+    contentLength: number;
+
+    /**
+     * Content initial scroll percentage.
+     */
+    initialScrollPercentage: number;
+
+    /**
+     * Scroll content to offset appropriate for the indicator location.
+     * @param offset Content offset.
+     */
+    scrollContentToOffset: (offset: number) => void;
+}
+
+export default FastScrollProps;

package/src/ComicViewer/ReloadButton.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View } from 'react-native';
+import { IconButton, IconButtonProps, StyleSheet } from '@fountain-ui/core';
+import { Restart } from '@fountain-ui/icons';
+
+interface ReloadButtonProps {
+    onPress: IconButtonProps['onPress'];
+}
+
+const styles = StyleSheet.create({
+    root: {
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        paddingTop: 80,
+    },
+    button: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        color: '#ffffff',
+        backgroundColor: '#767676',
+    },
+});
+
+export default function ReloadButton(props: ReloadButtonProps) {
+    return (
+        <View style={styles.root}>
+            <IconButton
+                {...props}
+                children={<Restart fill={'#ffffff'}/>}
+                style={styles.button}
+            />
+        </View>
+    );
+};

package/src/ComicViewer/ViewerItem.tsx

@@ -1,76 +1,118 @@
-import React, { useCallback, useRef, useState } from 'react';
-import { View } from 'react-native';
-import { Image, StyleSheet } from '@fountain-ui/core';
-import ComicViewerItemProps from './ComicViewerItemProps';
+import React from 'react';
+import { Image, TouchableWithoutFeedback, View } from 'react-native';
+import { css, Image as FuiImage, ImageProps } from '@fountain-ui/core';
+import ReloadButton from './ReloadButton';
+import EncodedTile from './EncodedTile';
 
-const styles = StyleSheet.create({
-    placeholder: {
-        backgroundColor: '#abcabc',
-    },
-});
+export interface ViewerItemProps {
+    /**
+     * Image width.
+     */
+    width: number;
 
-function ViewerItem<T>({ props }: { props: ComicViewerItemProps<T> }) {
-    const {
-        height,
-        id,
-        isViewable,
-        onError,
-        sourceUrl,
-        width,
-    } = props;
+    /**
+     * Image height.
+     */
+    height: number;
 
-    const [isLoaded, setIsLoaded] = useState(false);
+    /**
+     * Need invisible paddingTop viewer vertically expanded.
+     */
+    invisiblePaddingTop: number;
 
-    const errorCount = useRef<number>(0);
+    /**
+     * Image sourceUrl for displaying.
+     */
+    url?: string;
 
-    const onLoad = useCallback(() => {
-        errorCount.current = 0;
-        setIsLoaded(true);
-    }, []);
+    /**
+     * Error handler.
+     */
+    onError?: ImageProps['onError'];
 
-    const handleError = useCallback(() => {
-        errorCount.current = errorCount.current + 1;
+    /**
+     * Load handler.
+     */
+    onLoad?: ImageProps['onLoad'];
 
-        onError && onError({
-            id,
-            count: errorCount.current
-        });
-    }, [id]);
+    /**
+     * Handle Reload button press event.
+     */
+    onReloadPress?: ImageProps['onError'];
 
-    const viewStyle = { width, height };
+    /**
+     * Handle item press event.
+     */
+    onPress?: () => void;
 
-    const Placeholder = () => (
-        <View style={[
-            viewStyle,
-            styles.placeholder,
-        ]}/>
-    );
-
-    if (!isViewable && !isLoaded) {
-        return <Placeholder/>;
-    }
+    /**
+     * If true, reload button visible.
+     * @default false
+     */
+    reloadButtonVisible?: boolean;
 
-    return (
-        <Image
-            disableOutline={true}
-            key={sourceUrl}
-            onLoad={onLoad}
-            onError={handleError}
-            source={{ uri: sourceUrl }}
-            style={viewStyle}
-            square={true}
-        />
-    );
+    /**
+     * FuiImage key for trigger image rerender.
+     */
+    imageKey: string;
 }
 
-export default React.memo(ViewerItem, (prevProps, nextProps) => {
-    if (prevProps.props.isViewable !== nextProps.props.isViewable) {
-        return false;
-    }
+export default function ViewerItem(props: ViewerItemProps) {
+    const {
+        height,
+        url,
+        width,
+        imageKey,
+        invisiblePaddingTop,
+        onError,
+        onLoad,
+        onPress,
+        onReloadPress,
+        reloadButtonVisible = false,
+    } = props;
 
-    if (prevProps.props.sourceUrl !== nextProps.props.sourceUrl) {
-        return false;
-    }
+    const styles = {
+        view: {
+            height,
+            width: '100%',
+            paddingTop: invisiblePaddingTop,
+        },
+        image: {
+            height: height - invisiblePaddingTop,
+            width,
+        },
+    };
 
-    return true;
-});
+    const error = reloadButtonVisible ? <ReloadButton onPress={onReloadPress}/> : null;
+
+    const placeholder = <Image
+        source={{ uri: EncodedTile }}
+        resizeMode={'cover'}
+        style={styles.image}
+    />;
+
+    return (
+        <TouchableWithoutFeedback onPress={onPress}>
+            <View style={styles.view}>
+                <FuiImage
+                    key={imageKey}
+                    cache={'web'}
+                    disableDrag={true}
+                    disableLongClick={true}
+                    disableOutline={true}
+                    error={error}
+                    onError={onError}
+                    onLoad={onLoad}
+                    loading={'eager'}
+                    placeholder={placeholder}
+                    source={{ uri: url }}
+                    square={true}
+                    style={css([
+                        { alignSelf: 'center' },
+                        styles.image,
+                    ])}
+                />
+            </View>
+        </TouchableWithoutFeedback>
+    );
+};

package/src/ComicViewer/index.ts

@@ -1,3 +1,9 @@
 export { default } from './ComicViewer';
-export type { ComicViewerItemData, default as ComicViewerProps, ErrorInfo } from './ComicViewerProps';
-export type { default as ComicViewerItemProps } from './ComicViewerItemProps';
+export type { Dimension, IntrinsicImage, default as ComicViewerProps } from './ComicViewerProps';
+export type { ViewerItemProps } from './ViewerItem';
+export type {
+    AbsolutePosition,
+    FastScrollInstance,
+    FastScrollOptions,
+    VisibleDurations,
+} from './FastScrollProps';

package/src/ComicViewer/util.ts

@@ -0,0 +1,15 @@
+export const offsetToPercentage = (offset: number, total: number) => {
+    if (offset === 0 || total === 0) {
+        return 0;
+    }
+
+    return offset / total * 100;
+};
+
+export const percentageToOffset = (percentage: number, total: number) => {
+    if (percentage === 0 || total === 0) {
+        return 0;
+    }
+
+    return percentage / 100 * total;
+};

package/src/DateTimePicker/DateTimePicker.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { format } from 'date-fns';
 //@ts-ignore
 import { Calendar, LocaleConfig } from 'react-native-calendars';
-import { Button, Typography } from '@fountain-ui/core';
+import { Button, createFontStyle, Typography } from '@fountain-ui/core';
 import { useTheme } from '@fountain-ui/styles';
 import YearPicker from './YearPicker';
 import { DateTimePickerContext } from './DateTimePickerProvider';
@@ -26,12 +26,14 @@ export default function DateTimePicker(props: DateTimePickerProps) {
 
     const theme = useTheme();
 
+    const textDayFontStyle = createFontStyle(theme, { selector: (typo) => typo.body2 });
+
     const [yearPickerVisible, setYearPickerVisible] = React.useState(false);
     const { locales } = useDateTimePicker();
 
     //TODO: Need to update arrow components
-    const LeftArrow = <Typography children={'<'} color={'textPrimary'}/>;
-    const RightArrow = <Typography children={'>'} color={'textPrimary'}/>;
+    const LeftArrow = <Typography children={'<'} color={'strong'}/>;
+    const RightArrow = <Typography children={'>'} color={'strong'}/>;
 
     const onYearPress = (date: Date) => {
         setYearPickerVisible(false);
@@ -86,6 +88,12 @@ export default function DateTimePicker(props: DateTimePickerProps) {
                 calendarBackground: theme.palette.paper.default,
                 dayTextColor: theme.palette.text.primary,
                 textDisabledColor: theme.palette.text.hint,
+                textDayFontFamily: textDayFontStyle.fontFamily,
+                textDayFontSize: textDayFontStyle.fontSize,
+                textDayFontWeight: textDayFontStyle.fontWeight,
+                textDayHeaderFontFamily: textDayFontStyle.fontFamily,
+                textDayHeaderFontSize: textDayFontStyle.fontSize,
+                textDayHeaderFontWeight: textDayFontStyle.fontWeight,
             }}
         />
     );

package/src/DateTimePicker/YearPicker.tsx

@@ -61,8 +61,8 @@ const YearPicker = ({
         <Column>
             <Typography
                 children={formatDate(date, locale)}
-                color={'textPrimary'}
-                variant={'subtitle2'}
+                color={'strong'}
+                variant={'body3'}
             />
             <FlatList
                 data={years}

package/src/StatusBarProvider/Provider.ts

@@ -1,11 +1,25 @@
 import React from 'react';
 import type { StatusBarStyle } from 'react-native';
 
+export interface StatusBarProps {
+    barStyle?: StatusBarStyle;
+    animatedBarStyle?: boolean;
+    backgroundColor?: string;
+    hidden?: boolean;
+    translucent?: boolean;
+}
+
 export interface StatusBarProviderValue {
     setTranslucent: (value: boolean) => void;
     setBackgroundColor: (value: string) => void;
     setHidden: (value: boolean) => void;
     setBarStyle: (value: StatusBarStyle, animated?: boolean) => void;
+    restoreInitialStack: () => void;
+    clearStack: () => void;
+    pushStack: (statusBarProps: StatusBarProps) => void;
+    replaceStack: (statusBarProps: StatusBarProps) => void;
+    popStack: () => void;
+    getCurrentStatusBarProps: () => StatusBarProps | {};
 }
 
 export const StatusBarContext = React.createContext<StatusBarProviderValue | null>(null);

package/src/StatusBarProvider/StatusBarProvider.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import type { StatusBarStyle } from 'react-native';
 import { Platform, StatusBar as RNStatusBar, View } from 'react-native';
+import * as R from 'ramda';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '@fountain-ui/core';
 import { css } from '@fountain-ui/styles';
 import Provider from './Provider';
+import type { StatusBarProps } from './Provider';
 import type StatusBarProviderProps from './StatusBarProviderProps';
 
 const initialVisible = Platform.select({
@@ -15,6 +17,18 @@ const initialVisible = Platform.select({
 export default function StatusBarProvider(props: StatusBarProviderProps) {
     const { children } = props;
 
+    const currentStatusBarPropsRef = useRef<StatusBarProps | {}>({});
+
+    const initialStatusBarPropsStack = new Array<StatusBarProps>();
+    const statusBarPropsStackRef = useRef(initialStatusBarPropsStack);
+
+    const mergeStatusBarPropsRef = (props: StatusBarProps) => {
+        currentStatusBarPropsRef.current = {
+            ...currentStatusBarPropsRef.current,
+            ...props,
+        };
+    };
+
     const theme = useTheme();
     const defaultColor = theme.palette.background.default;
 
@@ -22,6 +36,8 @@ export default function StatusBarProvider(props: StatusBarProviderProps) {
     const [backgroundViewColor, setBackgroundViewColor] = React.useState(defaultColor);
 
     const setBackgroundColor = (value: string) => {
+        mergeStatusBarPropsRef({ backgroundColor: value });
+
         if (Platform.OS === 'android') {
             RNStatusBar.setBackgroundColor(value);
         }
@@ -32,10 +48,13 @@ export default function StatusBarProvider(props: StatusBarProviderProps) {
     };
 
     const setBarStyle = (value: StatusBarStyle, animated?: boolean) => {
+        mergeStatusBarPropsRef({ barStyle: value });
         RNStatusBar.setBarStyle(value, animated);
     };
 
     const setHidden = (value: boolean) => {
+        mergeStatusBarPropsRef({ hidden: value });
+
         if (Platform.OS === 'ios') {
             setVisible(!value);
         }
@@ -44,11 +63,88 @@ export default function StatusBarProvider(props: StatusBarProviderProps) {
     };
 
     const setTranslucent = (value: boolean) => {
+        mergeStatusBarPropsRef({ translucent: value });
+
         if (Platform.OS === 'android') {
             RNStatusBar.setTranslucent(value);
         }
     };
 
+    const updateStatusBarProps = (statusBarProps: StatusBarProps) => {
+        const {
+            barStyle,
+            animatedBarStyle,
+            backgroundColor,
+            hidden,
+            translucent,
+        } = statusBarProps;
+
+        if (!R.isNil(barStyle)) {
+            setBarStyle(barStyle, animatedBarStyle);
+        }
+
+        if (!R.isNil(backgroundColor)) {
+            setBackgroundColor(backgroundColor);
+        }
+
+        if (!R.isNil(hidden)) {
+            setHidden(hidden);
+        }
+
+        if (!R.isNil(translucent)) {
+            setTranslucent(translucent);
+        }
+    };
+
+    const restoreInitialStack = () => {
+        if (statusBarPropsStackRef.current.length === 0) {
+            return;
+        }
+
+        const initialStatusBar = statusBarPropsStackRef.current[0];
+        updateStatusBarProps(initialStatusBar);
+
+        statusBarPropsStackRef.current = [statusBarPropsStackRef.current[0]];
+    };
+
+    const clearStack = () => {
+        statusBarPropsStackRef.current = new Array<StatusBarProps>();
+    };
+
+    const pushStack = (statusBarProps: StatusBarProps) => {
+        updateStatusBarProps(statusBarProps);
+        statusBarPropsStackRef.current.push(currentStatusBarPropsRef.current);
+    };
+
+    const replaceStack = (statusBarProps: StatusBarProps) => {
+        if (statusBarPropsStackRef.current.length === 0) {
+            return;
+        }
+
+        updateStatusBarProps(statusBarProps);
+        statusBarPropsStackRef.current[statusBarPropsStackRef.current.length - 1] = currentStatusBarPropsRef.current;
+    };
+
+    const popStack = () => {
+        if (statusBarPropsStackRef.current.length === 0) {
+            return;
+        }
+
+        const prevStack = statusBarPropsStackRef.current.length >= 2
+            ? statusBarPropsStackRef.current[statusBarPropsStackRef.current.length - 2]
+            : undefined;
+
+        statusBarPropsStackRef.current.pop();
+
+        if (R.isNil(prevStack)) {
+            return;
+        }
+
+        updateStatusBarProps(prevStack);
+    };
+
+    const getCurrentStatusBarProps = () => currentStatusBarPropsRef.current;
+
     const shouldRenderBackgroundView = Platform.OS === 'ios' && visible;
 
     const inset = useSafeAreaInsets();
@@ -70,6 +166,12 @@ export default function StatusBarProvider(props: StatusBarProviderProps) {
             setBarStyle,
             setHidden,
             setTranslucent,
+            pushStack,
+            popStack,
+            replaceStack,
+            getCurrentStatusBarProps,
+            restoreInitialStack,
+            clearStack,
         }}>
             {shouldRenderBackgroundView ? (
                 <View style={backgroundViewStyle}/>

package/src/ViewPager/FluxContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import type { MonoStore } from '@fountain-ui/core';
+
+export type FluxStore<S> = MonoStore<S>;
+
+const FluxContext = createContext<FluxStore<any> | null>(null);
+
+export default FluxContext;

package/src/ViewPager/InternalContext.ts

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

package/src/ViewPager/PageStateContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+export interface PageState {
+    isActive: boolean;
+}
+
+const initialPageState: Readonly<PageState | null> = null;
+
+const PageStateContext = createContext<PageState | null>(initialPageState);
+
+export default PageStateContext;