@fountain-ui/lab 2.0.0-beta.29 → 2.0.0-beta.30

package/build/module/ComicViewer/ComicViewer.js

@@ -3,6 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FlatList } from 'react-native';
 import * as R from 'ramda';
+import { STATE } from './ComicViewerProps';
 import ViewerItem from './ViewerItem';
 
 const getItemHeights = items => R.map(content => content.height)(items);
@@ -11,7 +12,7 @@ const appender = (left, right) => [left + right, left + right];
 
 const getHeightAccum = itemHeights => R.mapAccum(appender, 0, itemHeights);
 
-const keyExtractor = item => item.id;
+const keyExtractor = item => `${item.sortKey}`;
 
 export default function ComicViewer(props) {
   const {
@@ -22,21 +23,29 @@ export default function ComicViewer(props) {
     initialScrollPercentage = 0,
     itemVisiblePercentThreshold = 0,
     onError,
+    onScroll,
+    getNextPage,
     viewerWidth,
     windowSize = 3,
+    pageUnit,
+    ListFooterComponent,
     ...otherProps
   } = props;
   const flatListRef = useRef(null);
   const errors = useRef(new Map());
   const debounceTimeOut = useRef(null);
-  const resourceString = R.toString(R.map(itemData => itemData.sourceUrl)(data));
+  const resourceString = R.toString(R.map(itemData => itemData.url)(data));
   const initialItems = R.map(itemData => ({ ...itemData,
     isViewable: false,
     width: viewerWidth,
     height: itemData.height * viewerWidth / itemData.width
   }))(data);
   const [items, setItems] = useState(initialItems);
-  const itemHeights = getItemHeights(items);
+  const initialItemState = R.map(() => ({
+    state: STATE.UNLOAD
+  }))(data);
+  const itemStates = useRef(initialItemState);
+  const itemHeights = [...getItemHeights(items)];
   const itemHeightAccum = getHeightAccum(itemHeights);
   const viewabilityConfig = useMemo(() => ({
     itemVisiblePercentThreshold
@@ -54,67 +63,84 @@ export default function ComicViewer(props) {
       viewableItems
     } = _ref;
     setItems(prev => {
-      const viewableItemIds = R.map(viewableItem => viewableItem.item.id)(viewableItems);
-      return R.map(prevItem => ({ ...prevItem,
-        isViewable: R.includes(prevItem.id, viewableItemIds)
+      const viewableItemSortKeys = R.map(viewableItem => viewableItem.item.sortKey)(viewableItems);
+      const newItems = R.map(prevItem => ({ ...prevItem,
+        isViewable: R.includes(prevItem.sortKey, viewableItemSortKeys)
       }))([...prev]);
+      return newItems;
     });
   });
+  const itemLoadedHandler = useCallback(sortKey => {
+    const itemState = itemStates.current[sortKey - 1];
+    itemState.state = STATE.LOADED;
+    itemState.error = undefined;
+  }, [itemStates]);
+  const itemErrorHandler = useCallback(errorInfo => {
+    const {
+      sortKey,
+      count
+    } = errorInfo;
 
-  const onErrorHandler = errors => {
-    const isRetryLimited = R.any(error => error.count >= errorRetryCount)(errors);
-
-    if (isRetryLimited) {
+    if (count >= errorRetryCount) {
       return;
     }
 
-    onError && onError(errors);
-  };
-
-  const itemErrorHandler = useCallback(errorInfo => {
-    errors.current.set(errorInfo.id, errorInfo.count);
-
-    if (debounceTimeOut.current) {
-      clearTimeout(debounceTimeOut.current);
-    }
+    errors.current.set(sortKey, errorInfo);
+    const itemState = itemStates.current[sortKey - 1];
+    itemState.state = STATE.FAIL;
+    itemState.error = errorInfo;
 
-    debounceTimeOut.current = setTimeout(function () {
+    const handleError = () => {
       const errorsArray = Array.from(errors.current.entries());
       const errorsInfo = R.map(_ref2 => {
         let [key, value] = _ref2;
-        return {
-          id: key,
-          count: value
-        };
+        return value;
       })(errorsArray);
-      onErrorHandler([...errorsInfo]);
+      onError && onError([...errorsInfo]);
       errors.current.clear();
-    }, errorDebounceMillis);
-  }, [errorDebounceMillis, errors.current]);
+    };
+
+    if (debounceTimeOut.current) {
+      clearTimeout(debounceTimeOut.current);
+    }
+
+    if (errors.current.size === pageUnit) {
+      handleError();
+    } else {
+      debounceTimeOut.current = setTimeout(handleError, errorDebounceMillis);
+    }
+  }, [errors.current, itemStates]);
   const renderItem = useCallback(_ref3 => {
     let {
       item
     } = _ref3;
+    const itemState = itemStates.current[item.sortKey - 1];
     const props = { ...item,
-      onError: itemErrorHandler
+      itemState,
+      errorRetryCount,
+      onError: itemErrorHandler,
+      onLoaded: itemLoadedHandler,
+      getNextPage
     };
     return /*#__PURE__*/React.createElement(ViewerItem, {
       props: props
     });
-  }, []);
+  }, [resourceString, itemStates, itemErrorHandler, itemLoadedHandler]);
   useEffect(() => {
     setItems(prev => {
       return R.map(prevItem => {
-        const currentData = R.find(currentItemData => prevItem.id === currentItemData.id)(data);
+        const currentData = R.find(currentItemData => prevItem.sortKey === currentItemData.sortKey)(data);
 
-        if (currentData && currentData.sourceUrl !== prevItem.sourceUrl) {
+        if (currentData && itemStates.current[currentData.sortKey - 1].state !== STATE.LOADED && currentData.url !== prevItem.url) {
           return { ...prevItem,
-            sourceUrl: currentData.sourceUrl
+            url: currentData.url,
+            expiresAt: currentData.expiresAt
           };
         }
 
         return prevItem;
       })([...prev]);
+      ;
     });
   }, [resourceString]);
   useEffect(() => {
@@ -141,10 +167,12 @@ export default function ComicViewer(props) {
     initialNumToRender: initialNumToRender,
     keyExtractor: keyExtractor,
     onViewableItemsChanged: onViewableItemsChanged.current,
+    onScroll: onScroll,
     ref: flatListRef,
     renderItem: renderItem,
     viewabilityConfig: viewabilityConfig,
-    windowSize: windowSize
+    windowSize: windowSize,
+    ListFooterComponent: ListFooterComponent
   }, otherProps));
 }
 ;

package/build/module/ComicViewer/ComicViewer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","FlatList","R","ViewerItem","getItemHeights","items","map","content","height","appender","left","right","getHeightAccum","itemHeights","mapAccum","keyExtractor","item","id","ComicViewer","props","data","errorDebounceMillis","errorRetryCount","initialNumToRender","initialScrollPercentage","itemVisiblePercentThreshold","onError","viewerWidth","windowSize","otherProps","flatListRef","errors","Map","debounceTimeOut","resourceString","toString","itemData","sourceUrl","initialItems","isViewable","width","setItems","itemHeightAccum","viewabilityConfig","getItemLayout","index","offsets","prepend","length","offset","onViewableItemsChanged","viewableItems","prev","viewableItemIds","viewableItem","prevItem","includes","onErrorHandler","isRetryLimited","any","error","count","itemErrorHandler","errorInfo","current","set","clearTimeout","setTimeout","errorsArray","Array","from","entries","errorsInfo","key","value","clear","renderItem","currentData","find","currentItemData","newItems","totalHeight","Math","floor","scrollToOffset","animated"],"sources":["ComicViewer.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { FlatList, ListRenderItem, ViewToken } from 'react-native';\nimport * as R from 'ramda';\nimport { ComicViewerItemData, default as ComicViewerProps, ErrorInfo } from './ComicViewerProps';\nimport type ComicViewerItemProps from './ComicViewerItemProps';\nimport ViewerItem from './ViewerItem';\n\nconst getItemHeights = <T, >(items: ComicViewerItemProps<T>[]): number[] => R.map((content: ComicViewerItemProps<T>) => content.height)(items);\nconst appender = (left: number, right: number): [number, number] => [left + right, left + right];\nconst getHeightAccum = (itemHeights: number[]): [number, number[]] => R.mapAccum(appender, 0, itemHeights);\n\nconst keyExtractor = <T, >(item: ComicViewerItemProps<T>) => item.id;\n\nexport default function ComicViewer<T>(props: ComicViewerProps<T>) {\n    const {\n        data,\n        errorDebounceMillis = 500,\n        errorRetryCount = 3,\n        initialNumToRender = 1,\n        initialScrollPercentage = 0,\n        itemVisiblePercentThreshold = 0,\n        onError,\n        viewerWidth,\n        windowSize = 3,\n        ...otherProps\n    } = props;\n\n    const flatListRef = useRef<FlatList>(null);\n\n    const errors = useRef<Map<string, number>>(new Map());\n    const debounceTimeOut = useRef<NodeJS.Timeout | null>(null);\n\n    const resourceString = R.toString(R.map((itemData: ComicViewerItemData) => itemData.sourceUrl)(data));\n\n    const initialItems = R.map((itemData: ComicViewerItemData<T>) => ({\n        ...itemData,\n        isViewable: false,\n        width: viewerWidth,\n        height: (itemData.height * viewerWidth) / itemData.width,\n    }))(data);\n\n    const [items, setItems] = useState<ComicViewerItemProps<T>[]>(initialItems);\n\n    const itemHeights = getItemHeights(items);\n    const itemHeightAccum = getHeightAccum(itemHeights);\n\n    const viewabilityConfig = useMemo(() => ({\n        itemVisiblePercentThreshold,\n    }), [itemVisiblePercentThreshold]);\n\n    const getItemLayout = useCallback((data: any, index: number) => {\n        const offsets = R.prepend(0, itemHeightAccum[1]);\n\n        return {\n            length: itemHeights[index],\n            offset: offsets[index],\n            index,\n        };\n    }, [itemHeights]);\n\n    const onViewableItemsChanged = useRef(({ viewableItems }: {\n        viewableItems: Array<ViewToken>,\n    }) => {\n        setItems((prev: ComicViewerItemProps<T>[]) => {\n            const viewableItemIds = R.map((viewableItem: ViewToken) => viewableItem.item.id)(viewableItems);\n\n            return R.map((prevItem: ComicViewerItemProps<T>) => ({\n                ...prevItem,\n                isViewable: R.includes(prevItem.id, viewableItemIds),\n            }))([...prev]);\n        });\n    });\n\n    const onErrorHandler = (errors: ErrorInfo[]) => {\n        const isRetryLimited = R.any((error: ErrorInfo) => error.count >= errorRetryCount)(errors);\n\n        if (isRetryLimited) {\n            return;\n        }\n\n        onError && onError(errors);\n    };\n\n    const itemErrorHandler = useCallback((errorInfo: ErrorInfo) => {\n        errors.current.set(errorInfo.id, errorInfo.count);\n\n        if (debounceTimeOut.current) {\n            clearTimeout(debounceTimeOut.current);\n        }\n\n        debounceTimeOut.current = setTimeout(function () {\n            const errorsArray = Array.from(errors.current.entries());\n            const errorsInfo = R.map(([key, value]: [string, number]) => ({\n                id: key,\n                count: value,\n            }))(errorsArray);\n\n            onErrorHandler([...errorsInfo]);\n            errors.current.clear();\n        }, errorDebounceMillis);\n    }, [errorDebounceMillis, errors.current]);\n\n    const renderItem: ListRenderItem<ComicViewerItemProps<T>> = useCallback(({ item }) => {\n        const props = {\n            ...item,\n            onError: itemErrorHandler,\n        };\n\n        return <ViewerItem props={props}/>;\n    }, []);\n\n    useEffect(() => {\n        setItems((prev: ComicViewerItemProps<T>[]) => {\n            return R.map((prevItem: ComicViewerItemProps<T>) => {\n                const currentData = R.find((currentItemData: ComicViewerItemData<T>) => prevItem.id === currentItemData.id)(data);\n\n                if (currentData && (currentData.sourceUrl !== prevItem.sourceUrl)) {\n                    return {\n                        ...prevItem,\n                        sourceUrl: currentData.sourceUrl,\n                    };\n                }\n\n                return prevItem;\n            })([...prev]);\n        });\n    }, [resourceString]);\n\n    useEffect(() => {\n        const newItems = R.map((item: ComicViewerItemProps<T>) => ({\n            ...item,\n            width: viewerWidth,\n            height: (item.height * viewerWidth) / item.width,\n        }))(items);\n\n        setItems(newItems);\n    }, [viewerWidth]);\n\n    useEffect(() => {\n        const totalHeight = itemHeightAccum[0];\n        const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);\n\n        if (flatListRef.current) {\n            flatListRef.current.scrollToOffset({ offset, animated: false });\n        }\n    }, [flatListRef.current]);\n\n    return (\n        <FlatList\n            data={items}\n            getItemLayout={getItemLayout}\n            initialNumToRender={initialNumToRender}\n            keyExtractor={keyExtractor}\n            onViewableItemsChanged={onViewableItemsChanged.current}\n            ref={flatListRef}\n            renderItem={renderItem}\n            viewabilityConfig={viewabilityConfig}\n            windowSize={windowSize}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","FlatList","R","STATE","ViewerItem","getItemHeights","items","map","content","height","appender","left","right","getHeightAccum","itemHeights","mapAccum","keyExtractor","item","sortKey","ComicViewer","props","data","errorDebounceMillis","errorRetryCount","initialNumToRender","initialScrollPercentage","itemVisiblePercentThreshold","onError","onScroll","getNextPage","viewerWidth","windowSize","pageUnit","ListFooterComponent","otherProps","flatListRef","errors","Map","debounceTimeOut","resourceString","toString","itemData","url","initialItems","isViewable","width","setItems","initialItemState","state","UNLOAD","itemStates","itemHeightAccum","viewabilityConfig","getItemLayout","index","offsets","prepend","length","offset","onViewableItemsChanged","viewableItems","prev","viewableItemSortKeys","viewableItem","newItems","prevItem","includes","itemLoadedHandler","itemState","current","LOADED","error","undefined","itemErrorHandler","errorInfo","count","set","FAIL","handleError","errorsArray","Array","from","entries","errorsInfo","key","value","clear","clearTimeout","size","setTimeout","renderItem","onLoaded","currentData","find","currentItemData","expiresAt","totalHeight","Math","floor","scrollToOffset","animated"],"sources":["ComicViewer.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { FlatList, ListRenderItem, ViewToken } from 'react-native';\nimport * as R from 'ramda';\nimport {\n    ComicViewerItemData,\n    ComicViewerItemState,\n    default as ComicViewerProps,\n    ErrorInfo,\n    STATE,\n} from './ComicViewerProps';\nimport type ComicViewerItemProps from './ComicViewerItemProps';\nimport ViewerItem from './ViewerItem';\n\nconst getItemHeights = <T, >(items: ComicViewerItemProps<T>[]): number[] => R.map((content: ComicViewerItemProps<T>) => content.height)(items);\nconst appender = (left: number, right: number): [number, number] => [left + right, left + right];\nconst getHeightAccum = (itemHeights: number[]): [number, number[]] => R.mapAccum(appender, 0, itemHeights);\n\nconst keyExtractor = <T, >(item: ComicViewerItemProps<T>) => `${item.sortKey}`;\n\nexport default function ComicViewer<T>(props: ComicViewerProps<T>) {\n    const {\n        data,\n        errorDebounceMillis = 500,\n        errorRetryCount = 3,\n        initialNumToRender = 1,\n        initialScrollPercentage = 0,\n        itemVisiblePercentThreshold = 0,\n        onError,\n        onScroll,\n        getNextPage,\n        viewerWidth,\n        windowSize = 3,\n        pageUnit,\n        ListFooterComponent,\n        ...otherProps\n    } = props;\n\n    const flatListRef = useRef<FlatList>(null);\n\n    const errors = useRef<Map<number, ErrorInfo>>(new Map());\n\n    const debounceTimeOut = useRef<NodeJS.Timeout | null>(null);\n\n    const resourceString = R.toString(R.map((itemData: ComicViewerItemData) => itemData.url)(data));\n\n    const initialItems = R.map((itemData: ComicViewerItemData<T>) => ({\n        ...itemData,\n        isViewable: false,\n        width: viewerWidth,\n        height: (itemData.height * viewerWidth) / itemData.width,\n    }))(data);\n\n    const [items, setItems] = useState<ComicViewerItemProps<T>[]>(initialItems);\n\n    const initialItemState: ComicViewerItemState[] = R.map(() => ({\n        state: STATE.UNLOAD,\n    }))(data);\n\n    const itemStates = useRef<Array<ComicViewerItemState>>(initialItemState);\n\n    const itemHeights = [...getItemHeights(items)];\n    const itemHeightAccum = getHeightAccum(itemHeights);\n\n    const viewabilityConfig = useMemo(() => ({\n        itemVisiblePercentThreshold,\n    }), [itemVisiblePercentThreshold]);\n\n    const getItemLayout = useCallback((data: any, index: number) => {\n        const offsets = R.prepend(0, itemHeightAccum[1]);\n\n        return {\n            length: itemHeights[index],\n            offset: offsets[index],\n            index,\n        };\n    }, [itemHeights]);\n\n    const onViewableItemsChanged = useRef(({ viewableItems }: {\n        viewableItems: Array<ViewToken>,\n    }) => {\n        setItems((prev: ComicViewerItemProps<T>[]) => {\n            const viewableItemSortKeys = R.map((viewableItem: ViewToken) => viewableItem.item.sortKey)(viewableItems);\n\n            const newItems = R.map((prevItem: ComicViewerItemProps<T>) => ({\n                ...prevItem,\n                isViewable: R.includes(prevItem.sortKey, viewableItemSortKeys),\n            }))([...prev]);\n\n            return newItems;\n        });\n    });\n\n    const itemLoadedHandler = useCallback((sortKey: number) => {\n        const itemState = itemStates.current[sortKey - 1];\n        itemState.state = STATE.LOADED;\n        itemState.error = undefined;\n    }, [itemStates]);\n\n    const itemErrorHandler = useCallback((errorInfo: ErrorInfo) => {\n        const { sortKey, count } = errorInfo;\n\n        if (count >= errorRetryCount) {\n            return;\n        }\n\n        errors.current.set(sortKey, errorInfo);\n\n        const itemState = itemStates.current[sortKey - 1];\n        itemState.state = STATE.FAIL;\n        itemState.error = errorInfo;\n\n        const handleError = () => {\n            const errorsArray = Array.from(errors.current.entries());\n            const errorsInfo = R.map(([key, value]: [number, ErrorInfo]) => value)(errorsArray);\n\n            onError && onError([...errorsInfo]);\n            errors.current.clear();\n        };\n\n        if (debounceTimeOut.current) {\n            clearTimeout(debounceTimeOut.current);\n        }\n\n        if (errors.current.size === pageUnit) {\n            handleError();\n        } else {\n            debounceTimeOut.current = setTimeout(handleError, errorDebounceMillis);\n        }\n    }, [errors.current, itemStates]);\n\n    const renderItem: ListRenderItem<ComicViewerItemProps<T>> = useCallback(({ item }) => {\n        const itemState = itemStates.current[item.sortKey - 1];\n\n        const props = {\n            ...item,\n            itemState,\n            errorRetryCount,\n            onError: itemErrorHandler,\n            onLoaded: itemLoadedHandler,\n            getNextPage,\n        };\n\n        return <ViewerItem props={props}/>;\n    }, [resourceString, itemStates, itemErrorHandler, itemLoadedHandler]);\n\n    useEffect(() => {\n        setItems((prev: ComicViewerItemProps<T>[]) => {\n            return R.map((prevItem: ComicViewerItemProps<T>) => {\n                const currentData = R.find((currentItemData: ComicViewerItemData<T>) => prevItem.sortKey === currentItemData.sortKey)(data);\n\n                if (currentData\n                    && itemStates.current[currentData.sortKey - 1].state !== STATE.LOADED\n                    && (currentData.url !== prevItem.url)) {\n                    return {\n                        ...prevItem,\n                        url: currentData.url,\n                        expiresAt: currentData.expiresAt,\n                    };\n                }\n\n                return prevItem;\n            })([...prev]);\n            ;\n        });\n    }, [resourceString]);\n\n    useEffect(() => {\n        const newItems = R.map((item: ComicViewerItemProps<T>) => ({\n            ...item,\n            width: viewerWidth,\n            height: (item.height * viewerWidth) / item.width,\n        }))(items);\n\n        setItems(newItems);\n    }, [viewerWidth]);\n\n    useEffect(() => {\n        const totalHeight = itemHeightAccum[0];\n        const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);\n\n        if (flatListRef.current) {\n            flatListRef.current.scrollToOffset({ offset, animated: false });\n        }\n    }, [flatListRef.current]);\n\n    return (\n        <FlatList\n            data={items}\n            getItemLayout={getItemLayout}\n            initialNumToRender={initialNumToRender}\n            keyExtractor={keyExtractor}\n            onViewableItemsChanged={onViewableItemsChanged.current}\n            onScroll={onScroll}\n            ref={flatListRef}\n            renderItem={renderItem}\n            viewabilityConfig={viewabilityConfig}\n            windowSize={windowSize}\n            ListFooterComponent={ListFooterComponent}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":"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"}

package/build/module/ComicViewer/ComicViewerItemProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ComicViewerItemProps.ts"],"sourcesContent":["import { ComicViewerItemData, ErrorInfo } from './ComicViewerProps';\n\ntype ComicViewerItemProps<T> = ComicViewerItemData<T> & {\n    /**\n     * FlatListItem is viewable in screen.\n     */\n    isViewable: boolean;\n\n    /**\n     * Error handler\n     */\n    onError?: (errorInfo: ErrorInfo) => void;\n}\n\nexport default ComicViewerItemProps;"],"mappings":""}
+{"version":3,"names":[],"sources":["ComicViewerItemProps.ts"],"sourcesContent":["import { ComicViewerItemData, ErrorInfo, ComicViewerItemState } from './ComicViewerProps';\n\ntype ComicViewerItemProps<T> = ComicViewerItemData<T> & {\n    /**\n     * FlatListItem is viewable in screen.\n     */\n    isViewable: boolean;\n\n    /**\n     * How many times retry onError when same item error occur\n     * @default 3\n     */\n    errorRetryCount?: number;\n\n    /**\n     * Error handler\n     */\n    onError?: (errorInfo: ErrorInfo) => void;\n\n    /**\n     * Load handler\n     */\n    onLoaded?: (sortKey: number) => void;\n\n    getNextPage?: (sortKey: number) => void;\n\n    itemState?: ComicViewerItemState;\n}\n\nexport default ComicViewerItemProps;"],"mappings":""}

package/build/module/ComicViewer/ComicViewerProps.js

@@ -1,2 +1,7 @@
-
+export const STATE = {
+  UNLOAD: 'unload',
+  LOADING: 'loading',
+  LOADED: 'loaded',
+  FAIL: 'fail'
+};
 //# sourceMappingURL=ComicViewerProps.js.map

package/build/module/ComicViewer/ComicViewerProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ComicViewerProps.ts"],"sourcesContent":["import { ComponentProps } from '@fountain-ui/core';\n\nexport interface ErrorInfo {\n    /**\n     * ComicViewerItemData.id.\n     */\n    id: string;\n\n    /**\n     * Number of times an error occurred.\n     */\n    count: number;\n}\n\nexport type ComicViewerItemData<T = {}> = T & {\n    /**\n     * Image height.\n     */\n    height: number;\n\n    /**\n     * Unique value for identifying.\n     */\n    id: string;\n\n    /**\n     * Image sourceUrl for displaying.\n     */\n    sourceUrl: string;\n\n    /**\n     * Image width.\n     */\n    width: number;\n}\n\nexport default interface ComicViewerProps<T> extends ComponentProps <{\n    /**\n     * Data for render.\n     */\n    data: ComicViewerItemData<T>[];\n\n    /**\n     * Delay Time to call the error handler.\n     * @default 500\n     */\n    errorDebounceMillis?: number;\n\n    /**\n     * How many times retry onError when same item error occur\n     * @default 3\n     */\n    errorRetryCount?: number;\n\n     /**\n     * How many items to render in the initial batch.\n     * @default 1\n     */\n    initialNumToRender?: number;\n\n    /**\n     * Start at initialScrollPercentage.\n     * If over 100, scroll to end.\n     * @default 0\n     */\n    initialScrollPercentage?: number;\n\n    /**\n     * The value for FlatList viewabilityConfig.itemVisiblePercentThreshold.\n     * @default 0\n     */\n    itemVisiblePercentThreshold?: number;\n\n    /**\n     * Handling all viewerItem errors at once.\n     * @param errors Array of ViewerItems errorInfo.\n     */\n    onError?: (errors: ErrorInfo[]) => void;\n\n    /**\n     * Comic viewer width.\n     */\n    viewerWidth: number;\n\n    /**\n     * The value for FlatList windowSize.\n     * @default 3\n     */\n    windowSize?: number;\n}> {}"],"mappings":""}
+{"version":3,"names":["STATE","UNLOAD","LOADING","LOADED","FAIL"],"sources":["ComicViewerProps.ts"],"sourcesContent":["import React from 'react';\nimport { ComponentProps } from '@fountain-ui/core';\nimport { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';\n\nexport const STATE = {\n    UNLOAD: 'unload',\n    LOADING: 'loading',\n    LOADED: 'loaded',\n    FAIL: 'fail',\n} as const;\n\nexport type LoadingState = typeof STATE[keyof typeof STATE];\n\nexport interface ComicViewerItemState{\n    /**\n     * Content's loading state.\n     */\n    state: LoadingState,\n\n    /***\n     * Content's error Info.\n     */\n    error?: ErrorInfo,\n}\n\nexport interface ErrorInfo {\n    /**\n     * ComicViewerItemData.sortKey.\n     */\n    sortKey: number;\n\n    /**\n     * Number of times an error occurred.\n     */\n    count: number;\n\n    /**\n     * Content is Expired: true\n     */\n    expired: boolean;\n}\n\nexport type ComicViewerItemData<T = {}> = T & {\n    /**\n     * Image height.\n     */\n    height: number;\n\n    /**\n     * Unique value for identifying.\n     */\n    id: number | undefined;\n\n    /**\n     * Image sourceUrl for displaying.\n     */\n    url: string;\n\n    /**\n     * Image width.\n     */\n    width: number;\n\n    /**\n     * SortKey\n     */\n    sortKey: number;\n\n    /**\n     * Image expire date.\n     */\n    expiresAt: string;\n}\n\nexport default interface ComicViewerProps<T> extends ComponentProps <{\n    /**\n     * Data for render.\n     */\n    data: ComicViewerItemData<T>[];\n\n    /**\n     * Delay Time to call the error handler.\n     * @default 500\n     */\n    errorDebounceMillis?: number;\n\n    /**\n     * How many times retry onError when same item error occur\n     * @default 3\n     */\n    errorRetryCount?: number;\n\n    /**\n     * How many items to render in the initial batch.\n     * @default 1\n     */\n    initialNumToRender?: number;\n\n    /**\n     * Start at initialScrollPercentage.\n     * If over 100, scroll to end.\n     * @default 0\n     */\n    initialScrollPercentage?: number;\n\n    /**\n     * The value for FlatList viewabilityConfig.itemVisiblePercentThreshold.\n     * @default 0\n     */\n    itemVisiblePercentThreshold?: number;\n\n    /**\n     * Comic viewer width.\n     */\n    viewerWidth: number;\n\n    /**\n     * The value for FlatList windowSize.\n     * @default 3\n     */\n    windowSize?: number;\n\n    /**\n     * How many images in one page.\n     */\n    pageUnit: number;\n\n    /**\n     * Method for getting next page contents.\n     * @param sortKey\n     */\n    getNextPage?: (sortKey: number) => void;\n\n    /**\n     * Handling all viewerItem errors at once.\n     * @param errors Array of ViewerItems errorInfo.\n     */\n    onError?: (errors: ErrorInfo[]) => void;\n\n    /**\n     * Handle scroll event.\n     * @param event Scroll event.\n     */\n    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\n\n    /**\n     * Component for comic viewer footer.\n     */\n    ListFooterComponent?: React.ReactElement;\n}> {}"],"mappings":"AAIA,OAAO,MAAMA,KAAK,GAAG;EACjBC,MAAM,EAAE,QADS;EAEjBC,OAAO,EAAE,SAFQ;EAGjBC,MAAM,EAAE,QAHS;EAIjBC,IAAI,EAAE;AAJW,CAAd"}

package/build/module/ComicViewer/ViewerItem.js

@@ -1,60 +1,130 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
-import { Image, StyleSheet } from '@fountain-ui/core';
-const styles = StyleSheet.create({
-  placeholder: {
-    backgroundColor: '#abcabc'
-  }
-});
+import * as R from 'ramda';
+import { IconButton, Image, Spacer, useTheme } from '@fountain-ui/core';
+import { Restart } from '@fountain-ui/icons';
+
+const useStyles = function () {
+  const theme = useTheme();
+  return {
+    init: {
+      backgroundColor: theme.palette.paper.grey
+    },
+    failed: {
+      backgroundColor: theme.palette.paper.grey
+    },
+    reload: {
+      backgroundColor: theme.palette.paper.grey,
+      display: 'flex',
+      alignItems: 'center'
+    }
+  };
+};
 
 function ViewerItem(_ref) {
+  var _itemState$error;
+
   let {
     props
   } = _ref;
   const {
+    expiresAt,
+    errorRetryCount = 3,
     height,
-    id,
+    itemState,
     isViewable,
+    sortKey,
+    url,
+    width,
+    getNextPage,
     onError,
-    sourceUrl,
-    width
+    onLoaded
   } = props;
   const [isLoaded, setIsLoaded] = useState(false);
-  const errorCount = useRef(0);
+  const styles = useStyles();
+  const errorCount = useRef(R.defaultTo(0)(itemState === null || itemState === void 0 ? void 0 : (_itemState$error = itemState.error) === null || _itemState$error === void 0 ? void 0 : _itemState$error.count));
   const onLoad = useCallback(() => {
     errorCount.current = 0;
     setIsLoaded(true);
-  }, []);
+    onLoaded && onLoaded(sortKey);
+  }, [sortKey]);
   const handleError = useCallback(() => {
     errorCount.current = errorCount.current + 1;
+    const expired = expiresAt ? new Date(expiresAt) <= new Date() : false;
+    onError && onError({
+      sortKey,
+      count: errorCount.current,
+      expired
+    });
+  }, [errorCount.current]);
+  const onReloadPress = useCallback(() => {
+    errorCount.current = 1;
     onError && onError({
-      id,
-      count: errorCount.current
+      sortKey,
+      count: errorCount.current,
+      expired: false
     });
-  }, [id]);
+  }, [sortKey]);
   const viewStyle = {
     width,
     height
   };
+  const Placeholder = useCallback(props => {
+    const {
+      children,
+      failed
+    } = props;
 
-  const Placeholder = () => /*#__PURE__*/React.createElement(View, {
-    style: [viewStyle, styles.placeholder]
-  });
+    if (!isViewable && !isLoaded) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: [viewStyle, styles.init]
+      });
+    }
 
-  if (!isViewable && !isLoaded) {
-    return /*#__PURE__*/React.createElement(Placeholder, null);
-  }
+    if (errorCount.current >= errorRetryCount) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: [viewStyle, styles.reload]
+      }, /*#__PURE__*/React.createElement(Spacer, {
+        size: 20
+      }), /*#__PURE__*/React.createElement(IconButton, {
+        children: /*#__PURE__*/React.createElement(Restart, {
+          fill: '#ffffff'
+        }),
+        style: {
+          width: 48,
+          height: 48,
+          borderRadius: 24,
+          color: '#ffffff',
+          backgroundColor: '#767676'
+        },
+        onPress: onReloadPress
+      }));
+    }
+
+    if (failed) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: [viewStyle, styles.failed]
+      });
+    }
 
+    return children ? children : null;
+  }, [isViewable, isLoaded, errorCount.current, url]);
+  useEffect(() => {
+    if (url === '') {
+      getNextPage === null || getNextPage === void 0 ? void 0 : getNextPage(sortKey);
+    }
+  }, []);
   return /*#__PURE__*/React.createElement(Image, {
     disableOutline: true,
-    key: sourceUrl,
+    key: sortKey,
     onLoad: onLoad,
     onError: handleError,
     source: {
-      uri: sourceUrl
+      uri: url
     },
     style: viewStyle,
-    square: true
+    square: true,
+    Placeholder: Placeholder
   });
 }
 
@@ -63,7 +133,7 @@ export default /*#__PURE__*/React.memo(ViewerItem, (prevProps, nextProps) => {
     return false;
   }
 
-  if (prevProps.props.sourceUrl !== nextProps.props.sourceUrl) {
+  if (prevProps.props.url !== nextProps.props.url) {
     return false;
   }
 

package/build/module/ComicViewer/ViewerItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useRef","useState","View","Image","StyleSheet","styles","create","placeholder","backgroundColor","ViewerItem","props","height","id","isViewable","onError","sourceUrl","width","isLoaded","setIsLoaded","errorCount","onLoad","current","handleError","count","viewStyle","Placeholder","uri","memo","prevProps","nextProps"],"sources":["ViewerItem.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from 'react';\nimport { View } from 'react-native';\nimport { Image, StyleSheet } from '@fountain-ui/core';\nimport ComicViewerItemProps from './ComicViewerItemProps';\n\nconst styles = StyleSheet.create({\n    placeholder: {\n        backgroundColor: '#abcabc',\n    },\n});\n\nfunction ViewerItem<T>({ props }: { props: ComicViewerItemProps<T> }) {\n    const {\n        height,\n        id,\n        isViewable,\n        onError,\n        sourceUrl,\n        width,\n    } = props;\n\n    const [isLoaded, setIsLoaded] = useState(false);\n\n    const errorCount = useRef<number>(0);\n\n    const onLoad = useCallback(() => {\n        errorCount.current = 0;\n        setIsLoaded(true);\n    }, []);\n\n    const handleError = useCallback(() => {\n        errorCount.current = errorCount.current + 1;\n\n        onError && onError({\n            id,\n            count: errorCount.current\n        });\n    }, [id]);\n\n    const viewStyle = { width, height };\n\n    const Placeholder = () => (\n        <View style={[\n            viewStyle,\n            styles.placeholder,\n        ]}/>\n    );\n\n    if (!isViewable && !isLoaded) {\n        return <Placeholder/>;\n    }\n\n    return (\n        <Image\n            disableOutline={true}\n            key={sourceUrl}\n            onLoad={onLoad}\n            onError={handleError}\n            source={{ uri: sourceUrl }}\n            style={viewStyle}\n            square={true}\n        />\n    );\n}\n\nexport default React.memo(ViewerItem, (prevProps, nextProps) => {\n    if (prevProps.props.isViewable !== nextProps.props.isViewable) {\n        return false;\n    }\n\n    if (prevProps.props.sourceUrl !== nextProps.props.sourceUrl) {\n        return false;\n    }\n\n    return true;\n});\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,MAA7B,EAAqCC,QAArC,QAAqD,OAArD;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,KAAT,EAAgBC,UAAhB,QAAkC,mBAAlC;AAGA,MAAMC,MAAM,GAAGD,UAAU,CAACE,MAAX,CAAkB;EAC7BC,WAAW,EAAE;IACTC,eAAe,EAAE;EADR;AADgB,CAAlB,CAAf;;AAMA,SAASC,UAAT,OAAsE;EAAA,IAA/C;IAAEC;EAAF,CAA+C;EAClE,MAAM;IACFC,MADE;IAEFC,EAFE;IAGFC,UAHE;IAIFC,OAJE;IAKFC,SALE;IAMFC;EANE,IAOFN,KAPJ;EASA,MAAM,CAACO,QAAD,EAAWC,WAAX,IAA0BjB,QAAQ,CAAC,KAAD,CAAxC;EAEA,MAAMkB,UAAU,GAAGnB,MAAM,CAAS,CAAT,CAAzB;EAEA,MAAMoB,MAAM,GAAGrB,WAAW,CAAC,MAAM;IAC7BoB,UAAU,CAACE,OAAX,GAAqB,CAArB;IACAH,WAAW,CAAC,IAAD,CAAX;EACH,CAHyB,EAGvB,EAHuB,CAA1B;EAKA,MAAMI,WAAW,GAAGvB,WAAW,CAAC,MAAM;IAClCoB,UAAU,CAACE,OAAX,GAAqBF,UAAU,CAACE,OAAX,GAAqB,CAA1C;IAEAP,OAAO,IAAIA,OAAO,CAAC;MACfF,EADe;MAEfW,KAAK,EAAEJ,UAAU,CAACE;IAFH,CAAD,CAAlB;EAIH,CAP8B,EAO5B,CAACT,EAAD,CAP4B,CAA/B;EASA,MAAMY,SAAS,GAAG;IAAER,KAAF;IAASL;EAAT,CAAlB;;EAEA,MAAMc,WAAW,GAAG,mBAChB,oBAAC,IAAD;IAAM,KAAK,EAAE,CACTD,SADS,EAETnB,MAAM,CAACE,WAFE;EAAb,EADJ;;EAOA,IAAI,CAACM,UAAD,IAAe,CAACI,QAApB,EAA8B;IAC1B,oBAAO,oBAAC,WAAD,OAAP;EACH;;EAED,oBACI,oBAAC,KAAD;IACI,cAAc,EAAE,IADpB;IAEI,GAAG,EAAEF,SAFT;IAGI,MAAM,EAAEK,MAHZ;IAII,OAAO,EAAEE,WAJb;IAKI,MAAM,EAAE;MAAEI,GAAG,EAAEX;IAAP,CALZ;IAMI,KAAK,EAAES,SANX;IAOI,MAAM,EAAE;EAPZ,EADJ;AAWH;;AAED,4BAAe1B,KAAK,CAAC6B,IAAN,CAAWlB,UAAX,EAAuB,CAACmB,SAAD,EAAYC,SAAZ,KAA0B;EAC5D,IAAID,SAAS,CAAClB,KAAV,CAAgBG,UAAhB,KAA+BgB,SAAS,CAACnB,KAAV,CAAgBG,UAAnD,EAA+D;IAC3D,OAAO,KAAP;EACH;;EAED,IAAIe,SAAS,CAAClB,KAAV,CAAgBK,SAAhB,KAA8Bc,SAAS,CAACnB,KAAV,CAAgBK,SAAlD,EAA6D;IACzD,OAAO,KAAP;EACH;;EAED,OAAO,IAAP;AACH,CAVc,CAAf"}
+{"version":3,"names":["React","useCallback","useEffect","useRef","useState","View","R","IconButton","Image","Spacer","useTheme","Restart","useStyles","theme","init","backgroundColor","palette","paper","grey","failed","reload","display","alignItems","ViewerItem","props","expiresAt","errorRetryCount","height","itemState","isViewable","sortKey","url","width","getNextPage","onError","onLoaded","isLoaded","setIsLoaded","styles","errorCount","defaultTo","error","count","onLoad","current","handleError","expired","Date","onReloadPress","viewStyle","Placeholder","children","borderRadius","color","uri","memo","prevProps","nextProps"],"sources":["ViewerItem.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { View } from 'react-native';\nimport * as R from 'ramda';\nimport type { PlaceholderProps } from '@fountain-ui/core';\nimport { IconButton, Image, Spacer, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { Restart } from '@fountain-ui/icons';\nimport ComicViewerItemProps from './ComicViewerItemProps';\n\ntype PlaceholderStyles = NamedStylesStringUnion<'init' | 'failed' | 'reload'>;\n\nconst useStyles: UseStyles<PlaceholderStyles> = function (): PlaceholderStyles {\n    const theme = useTheme();\n\n    return {\n        init: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        failed: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        reload: {\n            backgroundColor: theme.palette.paper.grey,\n            display: 'flex',\n            alignItems: 'center',\n        },\n    };\n};\n\nfunction ViewerItem<T>({ props }: { props: ComicViewerItemProps<T> }) {\n    const {\n        expiresAt,\n        errorRetryCount = 3,\n        height,\n        itemState,\n        isViewable,\n        sortKey,\n        url,\n        width,\n        getNextPage,\n        onError,\n        onLoaded,\n    } = props;\n\n    const [isLoaded, setIsLoaded] = useState(false);\n\n    const styles = useStyles();\n\n    const errorCount = useRef<number>(R.defaultTo(0)(itemState?.error?.count));\n\n    const onLoad = useCallback(() => {\n        errorCount.current = 0;\n\n        setIsLoaded(true);\n\n        onLoaded && onLoaded(sortKey);\n    }, [sortKey]);\n\n    const handleError = useCallback(() => {\n        errorCount.current = errorCount.current + 1;\n\n        const expired = expiresAt ? new Date(expiresAt) <= new Date() : false;\n\n        onError && onError({\n            sortKey,\n            count: errorCount.current,\n            expired,\n        });\n    }, [errorCount.current]);\n\n    const onReloadPress = useCallback(() => {\n        errorCount.current = 1;\n\n        onError && onError({\n            sortKey,\n            count: errorCount.current,\n            expired: false,\n        });\n    }, [sortKey]);\n\n    const viewStyle = { width, height };\n\n    const Placeholder = useCallback((props: PlaceholderProps) => {\n        const { children, failed } = props;\n\n        if (!isViewable && !isLoaded) {\n            return <View style={[\n                viewStyle,\n                styles.init,\n            ]}/>;\n        }\n\n        if (errorCount.current >= errorRetryCount) {\n            return <View style={[\n                viewStyle,\n                styles.reload,\n            ]}>\n                <Spacer size={20}/>\n\n                <IconButton\n                    children={<Restart fill={'#ffffff'}/>}\n                    style={{\n                        width: 48,\n                        height: 48,\n                        borderRadius: 24,\n                        color: '#ffffff',\n                        backgroundColor: '#767676',\n                    }}\n                    onPress={onReloadPress}\n                />\n            </View>;\n        }\n\n        if (failed) {\n            return (\n                <View style={[\n                    viewStyle,\n                    styles.failed,\n                ]}/>\n            );\n        }\n\n        return children ? children : null;\n    }, [isViewable, isLoaded, errorCount.current, url]);\n\n    useEffect(() => {\n        if (url === '') {\n            getNextPage?.(sortKey);\n        }\n    }, []);\n\n    return (\n        <Image\n            disableOutline={true}\n            key={sortKey}\n            onLoad={onLoad}\n            onError={handleError}\n            source={{ uri: url }}\n            style={viewStyle}\n            square={true}\n            Placeholder={Placeholder}\n        />\n    );\n}\n\nexport default React.memo(ViewerItem, (prevProps, nextProps) => {\n    if (prevProps.props.isViewable !== nextProps.props.isViewable) {\n        return false;\n    }\n\n    if (prevProps.props.url !== nextProps.props.url) {\n        return false;\n    }\n\n    return true;\n});\n"],"mappings":"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"}

package/build/typescript/ComicViewer/ComicViewerItemProps.d.ts

@@ -1,12 +1,23 @@
-import { ComicViewerItemData, ErrorInfo } from './ComicViewerProps';
+import { ComicViewerItemData, ErrorInfo, ComicViewerItemState } from './ComicViewerProps';
 declare type ComicViewerItemProps<T> = ComicViewerItemData<T> & {
     /**
      * FlatListItem is viewable in screen.
      */
     isViewable: boolean;
+    /**
+     * How many times retry onError when same item error occur
+     * @default 3
+     */
+    errorRetryCount?: number;
     /**
      * Error handler
      */
     onError?: (errorInfo: ErrorInfo) => void;
+    /**
+     * Load handler
+     */
+    onLoaded?: (sortKey: number) => void;
+    getNextPage?: (sortKey: number) => void;
+    itemState?: ComicViewerItemState;
 };
 export default ComicViewerItemProps;

package/build/typescript/ComicViewer/ComicViewerProps.d.ts

@@ -1,13 +1,36 @@
+import React from 'react';
 import { ComponentProps } from '@fountain-ui/core';
+import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+export declare const STATE: {
+    readonly UNLOAD: "unload";
+    readonly LOADING: "loading";
+    readonly LOADED: "loaded";
+    readonly FAIL: "fail";
+};
+export declare type LoadingState = typeof STATE[keyof typeof STATE];
+export interface ComicViewerItemState {
+    /**
+     * Content's loading state.
+     */
+    state: LoadingState;
+    /***
+     * Content's error Info.
+     */
+    error?: ErrorInfo;
+}
 export interface ErrorInfo {
     /**
-     * ComicViewerItemData.id.
+     * ComicViewerItemData.sortKey.
      */
-    id: string;
+    sortKey: number;
     /**
      * Number of times an error occurred.
      */
     count: number;
+    /**
+     * Content is Expired: true
+     */
+    expired: boolean;
 }
 export declare type ComicViewerItemData<T = {}> = T & {
     /**
@@ -17,15 +40,23 @@ export declare type ComicViewerItemData<T = {}> = T & {
     /**
      * Unique value for identifying.
      */
-    id: string;
+    id: number | undefined;
     /**
      * Image sourceUrl for displaying.
      */
-    sourceUrl: string;
+    url: string;
     /**
      * Image width.
      */
     width: number;
+    /**
+     * SortKey
+     */
+    sortKey: number;
+    /**
+     * Image expire date.
+     */
+    expiresAt: string;
 };
 export default interface ComicViewerProps<T> extends ComponentProps<{
     /**
@@ -43,9 +74,9 @@ export default interface ComicViewerProps<T> extends ComponentProps<{
      */
     errorRetryCount?: number;
     /**
-    * How many items to render in the initial batch.
-    * @default 1
-    */
+     * How many items to render in the initial batch.
+     * @default 1
+     */
     initialNumToRender?: number;
     /**
      * Start at initialScrollPercentage.
@@ -58,11 +89,6 @@ export default interface ComicViewerProps<T> extends ComponentProps<{
      * @default 0
      */
     itemVisiblePercentThreshold?: number;
-    /**
-     * Handling all viewerItem errors at once.
-     * @param errors Array of ViewerItems errorInfo.
-     */
-    onError?: (errors: ErrorInfo[]) => void;
     /**
      * Comic viewer width.
      */
@@ -72,5 +98,28 @@ export default interface ComicViewerProps<T> extends ComponentProps<{
      * @default 3
      */
     windowSize?: number;
+    /**
+     * How many images in one page.
+     */
+    pageUnit: number;
+    /**
+     * Method for getting next page contents.
+     * @param sortKey
+     */
+    getNextPage?: (sortKey: number) => void;
+    /**
+     * Handling all viewerItem errors at once.
+     * @param errors Array of ViewerItems errorInfo.
+     */
+    onError?: (errors: ErrorInfo[]) => void;
+    /**
+     * Handle scroll event.
+     * @param event Scroll event.
+     */
+    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    /**
+     * Component for comic viewer footer.
+     */
+    ListFooterComponent?: React.ReactElement;
 }> {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.29",
+  "version": "2.0.0-beta.30",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "019b85d550c729ccca7f3877d6aebe3fa02bd2ec"
+  "gitHead": "0c9f01b22179356577219f06bc6a21f6eb3f554c"
 }