@fountain-ui/lab 2.0.0-beta.34 → 2.0.0-beta.35

package/build/module/ComicViewer/ViewerItem.js

@@ -1,191 +1,57 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { ImageBackground, Platform, TouchableOpacity, View } from 'react-native';
-import * as R from 'ramda';
-import { IconButton, Image, Spacer } from '@fountain-ui/core';
-import { Restart } from '@fountain-ui/icons';
-import { STATE } from './ComicViewerProps';
-
-const useStyles = function () {
-  return {
-    root: {
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'center'
-    },
-    reload: {
-      display: 'flex',
-      alignItems: 'center'
-    }
-  };
-};
-
-function ViewerItem(_ref) {
-  var _itemState$error;
-
-  let {
-    props
-  } = _ref;
+import React, { useMemo } from 'react';
+import { Image, TouchableWithoutFeedback, View } from 'react-native';
+import { css, Image as FuiImage } from '@fountain-ui/core';
+import ReloadButton from './ReloadButton';
+export default function ViewerItem(props) {
   const {
-    expiresAt,
-    errorRetryCount = 3,
     height,
-    itemState,
-    isViewable,
-    sortKey,
-    responseTimestamp,
     url,
     width,
-    getNextPage,
     onError,
-    onLoaded,
-    onItemPress
+    onLoad,
+    onPress,
+    onReloadPress,
+    reloadButtonVisible = false
   } = props;
-  const [isLoaded, setIsLoaded] = useState(false);
-  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, onLoaded]);
-  const handleError = useCallback(() => {
-    errorCount.current = errorCount.current + 1;
-    const now = new Date();
-    const utcNow = now.getTime() + now.getTimezoneOffset() * 60 * 1000;
-    const expired = new Date(expiresAt).getTime() <= utcNow;
-    onError && onError({
-      sortKey,
-      count: errorCount.current,
-      expired
-    });
-  }, [errorCount.current, onError]);
-  const onReloadPress = useCallback(() => {
-    errorCount.current = 1;
-    onError && onError({
-      sortKey,
-      count: errorCount.current,
-      expired: false
-    });
-  }, [sortKey, onError]);
-  const viewStyle = {
-    width: '100%',
-    height,
-    ...Platform.select({
-      web: {
-        'cursor': 'default'
-      }
-    })
-  };
-  const imageStyle = {
-    width,
-    height
-  };
-  const Placeholder = useCallback(props => {
-    const {
-      children,
-      failed
-    } = props;
-
-    if (!(isViewable || isLoaded || failed) || (itemState === null || itemState === void 0 ? void 0 : itemState.state) === STATE.FAIL || (itemState === null || itemState === void 0 ? void 0 : itemState.state) === STATE.INIT) {
-      return /*#__PURE__*/React.createElement(ImageBackground, {
-        source: {
-          uri: 'https://ssl.pstatic.net/static/m/comic/im/2012/bg_viewbody.jpg'
-        },
-        resizeMode: "repeat",
-        style: viewStyle
-      });
-    }
-
-    if (errorCount.current >= errorRetryCount) {
-      return /*#__PURE__*/React.createElement(ImageBackground, {
-        source: {
-          uri: 'https://ssl.pstatic.net/static/m/comic/im/2012/bg_viewbody.jpg'
-        },
-        resizeMode: "repeat",
-        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
-      }));
-    }
-
-    return /*#__PURE__*/React.createElement(ImageBackground, {
-      source: {
-        uri: 'https://ssl.pstatic.net/static/m/comic/im/2012/bg_viewbody.jpg'
-      },
-      resizeMode: "repeat",
-      style: viewStyle
-    }, children);
-  }, [isViewable, isLoaded, errorCount.current, itemState === null || itemState === void 0 ? void 0 : itemState.state, responseTimestamp]);
-  useEffect(() => {
-    if ((itemState === null || itemState === void 0 ? void 0 : itemState.state) === STATE.INIT) {
-      getNextPage === null || getNextPage === void 0 ? void 0 : getNextPage(sortKey);
+  const styles = {
+    view: {
+      height,
+      width: '100%'
+    },
+    image: {
+      height,
+      width
     }
-  }, []);
-  return /*#__PURE__*/React.createElement(TouchableOpacity, {
-    activeOpacity: 1,
-    onPress: onItemPress
+  };
+  const error = reloadButtonVisible ? /*#__PURE__*/React.createElement(ReloadButton, {
+    onPress: onReloadPress
+  }) : null;
+  const placeholder = useMemo(() => /*#__PURE__*/React.createElement(Image, {
+    source: require('./checkered-loading.jpg'),
+    resizeMode: "repeat",
+    style: styles.image
+  }), [width]);
+  return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+    onPress: onPress
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles.root, viewStyle]
-  }, /*#__PURE__*/React.createElement(Image, {
-    failDependency: [url, expiresAt, responseTimestamp],
-    disableOutline: true,
-    key: sortKey,
-    disableLongClick: true,
+    style: styles.view
+  }, /*#__PURE__*/React.createElement(FuiImage, {
     disableDrag: true,
+    disableLongClick: true,
+    disableOutline: true,
+    error: error,
+    onError: onError,
     onLoad: onLoad,
-    onError: handleError,
     loading: 'eager',
+    placeholder: placeholder,
     source: {
       uri: url
     },
-    style: imageStyle,
     square: true,
-    Placeholder: Placeholder,
-    disablePlaceholder: true
+    style: css([{
+      alignSelf: 'center'
+    }, styles.image])
   })));
 }
-
-export default /*#__PURE__*/React.memo(ViewerItem, (prevProps, nextProps) => {
-  var _prevProps$props$item, _nextProps$props$item, _prevProps$props$item2;
-
-  if (prevProps.props.isViewable !== nextProps.props.isViewable) {
-    return false;
-  } // NO NEED ?
-
-
-  if (prevProps.props.url !== nextProps.props.url) {
-    return false;
-  } // NO NEED ?
-
-
-  if (prevProps.props.expiresAt !== nextProps.props.expiresAt) {
-    return false;
-  }
-
-  if (prevProps.props.width !== nextProps.props.width) {
-    return false;
-  }
-
-  if (((_prevProps$props$item = prevProps.props.itemState) === null || _prevProps$props$item === void 0 ? void 0 : _prevProps$props$item.state) !== ((_nextProps$props$item = nextProps.props.itemState) === null || _nextProps$props$item === void 0 ? void 0 : _nextProps$props$item.state)) {
-    return false;
-  }
-
-  if (((_prevProps$props$item2 = prevProps.props.itemState) === null || _prevProps$props$item2 === void 0 ? void 0 : _prevProps$props$item2.state) !== STATE.LOADED && prevProps.props.responseTimestamp !== nextProps.props.responseTimestamp) {
-    return false;
-  }
-
-  return true;
-});
+;
 //# sourceMappingURL=ViewerItem.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useRef","useState","ImageBackground","Platform","TouchableOpacity","View","R","IconButton","Image","Spacer","Restart","STATE","useStyles","root","display","flexDirection","justifyContent","reload","alignItems","ViewerItem","props","expiresAt","errorRetryCount","height","itemState","isViewable","sortKey","responseTimestamp","url","width","getNextPage","onError","onLoaded","onItemPress","isLoaded","setIsLoaded","styles","errorCount","defaultTo","error","count","onLoad","current","handleError","now","Date","utcNow","getTime","getTimezoneOffset","expired","onReloadPress","viewStyle","select","web","imageStyle","Placeholder","children","failed","state","FAIL","INIT","uri","borderRadius","color","backgroundColor","memo","prevProps","nextProps","LOADED"],"sources":["ViewerItem.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { ImageBackground, Platform, TouchableOpacity, View } from 'react-native';\nimport * as R from 'ramda';\nimport type { PlaceholderProps } from '@fountain-ui/core';\nimport { IconButton, Image, Spacer } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { Restart } from '@fountain-ui/icons';\nimport ComicViewerItemProps from './ComicViewerItemProps';\nimport { STATE } from './ComicViewerProps';\n\ntype PlaceholderStyles = NamedStylesStringUnion<'reload' | 'root'>;\n\nconst useStyles: UseStyles<PlaceholderStyles> = function (): PlaceholderStyles {\n    return {\n        root: {\n            display: 'flex',\n            flexDirection: 'row',\n            justifyContent: 'center',\n        },\n        reload: {\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        responseTimestamp,\n        url,\n        width,\n        getNextPage,\n        onError,\n        onLoaded,\n        onItemPress,\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, onLoaded]);\n\n    const handleError = useCallback(() => {\n        errorCount.current = errorCount.current + 1;\n\n        const now = new Date();\n        const utcNow = now.getTime() + (now.getTimezoneOffset() * 60 * 1000);\n        const expired = new Date(expiresAt).getTime() <= utcNow;\n\n        onError && onError({\n            sortKey,\n            count: errorCount.current,\n            expired,\n        });\n    }, [errorCount.current, onError]);\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, onError]);\n\n    const viewStyle = {\n        width: '100%',\n        height,\n        ...Platform.select({\n            web: { 'cursor': 'default' },\n        }),\n    };\n\n    const imageStyle = { width, height };\n\n    const Placeholder = useCallback((props: PlaceholderProps) => {\n        const { children, failed } = props;\n\n        if (!(isViewable || isLoaded || failed)\n            || (itemState?.state === STATE.FAIL)\n            || itemState?.state === STATE.INIT\n        ) {\n            return <ImageBackground\n                source={{ uri: 'https://ssl.pstatic.net/static/m/comic/im/2012/bg_viewbody.jpg' }}\n                resizeMode=\"repeat\"\n                style={viewStyle}\n            />;\n        }\n\n        if (errorCount.current >= errorRetryCount) {\n            return <ImageBackground\n                source={{ uri: 'https://ssl.pstatic.net/static/m/comic/im/2012/bg_viewbody.jpg' }}\n                resizeMode=\"repeat\"\n                style={[\n                    viewStyle,\n                    styles.reload,\n                ]}\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            </ImageBackground>;\n        }\n\n        return <ImageBackground\n            source={{ uri: 'https://ssl.pstatic.net/static/m/comic/im/2012/bg_viewbody.jpg' }}\n            resizeMode=\"repeat\"\n            style={viewStyle}\n        >\n            {children}\n        </ImageBackground>;\n    }, [isViewable, isLoaded, errorCount.current, itemState?.state, responseTimestamp]);\n\n    useEffect(() => {\n        if (itemState?.state === STATE.INIT) {\n            getNextPage?.(sortKey);\n        }\n    }, []);\n\n    return (\n        <TouchableOpacity\n            activeOpacity={1}\n            onPress={onItemPress}\n        >\n            <View\n                style={[\n                    styles.root,\n                    viewStyle,\n                ]}\n            >\n                <Image\n                    failDependency={[url, expiresAt, responseTimestamp]}\n                    disableOutline={true}\n                    key={sortKey}\n                    disableLongClick={true}\n                    disableDrag={true}\n                    onLoad={onLoad}\n                    onError={handleError}\n                    loading={'eager'}\n                    source={{ uri: url }}\n                    style={imageStyle}\n                    square={true}\n                    Placeholder={Placeholder}\n                    disablePlaceholder={true}\n                />\n            </View>\n        </TouchableOpacity>\n    );\n}\n\nexport default React.memo(ViewerItem, (prevProps, nextProps) => {\n    if (prevProps.props.isViewable !== nextProps.props.isViewable) {\n        return false;\n    }\n\n    // NO NEED ?\n    if (prevProps.props.url !== nextProps.props.url) {\n        return false;\n    }\n\n    // NO NEED ?\n    if (prevProps.props.expiresAt !== nextProps.props.expiresAt) {\n        return false;\n    }\n\n    if (prevProps.props.width !== nextProps.props.width) {\n        return false;\n    }\n\n    if (prevProps.props.itemState?.state !== nextProps.props.itemState?.state) {\n        return false;\n    }\n\n    if (prevProps.props.itemState?.state !== STATE.LOADED && prevProps.props.responseTimestamp !== nextProps.props.responseTimestamp) {\n        return false;\n    }\n\n    return true;\n});"],"mappings":"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"}
+{"version":3,"names":["React","useMemo","Image","TouchableWithoutFeedback","View","css","FuiImage","ReloadButton","ViewerItem","props","height","url","width","onError","onLoad","onPress","onReloadPress","reloadButtonVisible","styles","view","image","error","placeholder","require","uri","alignSelf"],"sources":["ViewerItem.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Image, TouchableWithoutFeedback, View } from 'react-native';\nimport { css, Image as FuiImage, ImageProps } from '@fountain-ui/core';\nimport ReloadButton from './ReloadButton';\n\nexport interface ViewerItemProps {\n    /**\n     * Image width.\n     */\n    width: number;\n\n    /**\n     * Image height.\n     */\n    height: number;\n\n    /**\n     * Image sourceUrl for displaying.\n     */\n    url?: string;\n\n    /**\n     * Error handler.\n     */\n    onError?: ImageProps['onError'];\n\n    /**\n     * Load handler.\n     */\n    onLoad?: ImageProps['onLoad'];\n\n    /**\n     * Handle Reload button press event.\n     */\n    onReloadPress?: ImageProps['onError'];\n\n    /**\n     * Handle item press event.\n     */\n    onPress?: () => void;\n\n    /**\n     * If true, reload button visible.\n     * @default false\n     */\n    reloadButtonVisible?: boolean;\n}\n\nexport default function ViewerItem(props: ViewerItemProps) {\n    const {\n        height,\n        url,\n        width,\n        onError,\n        onLoad,\n        onPress,\n        onReloadPress,\n        reloadButtonVisible = false,\n    } = props;\n\n    const styles = {\n        view: {\n            height,\n            width: '100%',\n        },\n        image: {\n            height,\n            width,\n        },\n    };\n\n    const error = reloadButtonVisible ? <ReloadButton onPress={onReloadPress}/> : null;\n\n    const placeholder = useMemo(() => <Image\n        source={require('./checkered-loading.jpg')}\n        resizeMode=\"repeat\"\n        style={styles.image}\n    />, [width]);\n\n    return (\n        <TouchableWithoutFeedback onPress={onPress}>\n            <View style={styles.view}>\n                <FuiImage\n                    disableDrag={true}\n                    disableLongClick={true}\n                    disableOutline={true}\n                    error={error}\n                    onError={onError}\n                    onLoad={onLoad}\n                    loading={'eager'}\n                    placeholder={placeholder}\n                    source={{ uri: url }}\n                    square={true}\n                    style={css([\n                        { alignSelf: 'center' },\n                        styles.image,\n                    ])}\n                />\n            </View>\n        </TouchableWithoutFeedback>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,OAAhB,QAA+B,OAA/B;AACA,SAASC,KAAT,EAAgBC,wBAAhB,EAA0CC,IAA1C,QAAsD,cAAtD;AACA,SAASC,GAAT,EAAcH,KAAK,IAAII,QAAvB,QAAmD,mBAAnD;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AA6CA,eAAe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,MADE;IAEFC,GAFE;IAGFC,KAHE;IAIFC,OAJE;IAKFC,MALE;IAMFC,OANE;IAOFC,aAPE;IAQFC,mBAAmB,GAAG;EARpB,IASFR,KATJ;EAWA,MAAMS,MAAM,GAAG;IACXC,IAAI,EAAE;MACFT,MADE;MAEFE,KAAK,EAAE;IAFL,CADK;IAKXQ,KAAK,EAAE;MACHV,MADG;MAEHE;IAFG;EALI,CAAf;EAWA,MAAMS,KAAK,GAAGJ,mBAAmB,gBAAG,oBAAC,YAAD;IAAc,OAAO,EAAED;EAAvB,EAAH,GAA6C,IAA9E;EAEA,MAAMM,WAAW,GAAGrB,OAAO,CAAC,mBAAM,oBAAC,KAAD;IAC9B,MAAM,EAAEsB,OAAO,CAAC,yBAAD,CADe;IAE9B,UAAU,EAAC,QAFmB;IAG9B,KAAK,EAAEL,MAAM,CAACE;EAHgB,EAAP,EAIvB,CAACR,KAAD,CAJuB,CAA3B;EAMA,oBACI,oBAAC,wBAAD;IAA0B,OAAO,EAAEG;EAAnC,gBACI,oBAAC,IAAD;IAAM,KAAK,EAAEG,MAAM,CAACC;EAApB,gBACI,oBAAC,QAAD;IACI,WAAW,EAAE,IADjB;IAEI,gBAAgB,EAAE,IAFtB;IAGI,cAAc,EAAE,IAHpB;IAII,KAAK,EAAEE,KAJX;IAKI,OAAO,EAAER,OALb;IAMI,MAAM,EAAEC,MANZ;IAOI,OAAO,EAAE,OAPb;IAQI,WAAW,EAAEQ,WARjB;IASI,MAAM,EAAE;MAAEE,GAAG,EAAEb;IAAP,CATZ;IAUI,MAAM,EAAE,IAVZ;IAWI,KAAK,EAAEN,GAAG,CAAC,CACP;MAAEoB,SAAS,EAAE;IAAb,CADO,EAEPP,MAAM,CAACE,KAFA,CAAD;EAXd,EADJ,CADJ,CADJ;AAsBH;AAAA"}

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

@@ -1 +1 @@
-{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './ComicViewer';\nexport type { ComicViewerItemData, default as ComicViewerProps, ErrorInfo } from './ComicViewerProps';\nexport type { default as ComicViewerItemProps } from './ComicViewerItemProps';"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB"}
+{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './ComicViewer';\nexport type { Dimension, default as ComicViewerProps } from './ComicViewerProps';\nexport type { ViewerItemProps } from './ViewerItem';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB"}

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

@@ -1,2 +1,2 @@
 import { default as ComicViewerProps } from './ComicViewerProps';
-export default function ComicViewer<T>(props: ComicViewerProps<T>): JSX.Element;
+export default function ComicViewer(props: ComicViewerProps): JSX.Element;

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

@@ -1,86 +1,21 @@
 import React from 'react';
 import { ComponentProps } from '@fountain-ui/core';
 import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
-export declare const STATE: {
-    readonly INIT: "init";
-    readonly URL_LOADED: "url_loaded";
-    readonly LOADED: "loaded";
-    readonly FAIL: "fail";
-};
-export declare type LoadingState = typeof STATE[keyof typeof STATE];
-export interface ComicViewerItemState {
-    /**
-     * Comic viewer item sortKey.
-     */
-    sortKey: number;
-    /**
-     * Content's loading state.
-     */
-    state: LoadingState;
-    /***
-     * Content's error Info.
-     */
-    error?: ErrorInfo;
-}
-export interface ErrorInfo {
-    /**
-     * ComicViewerItemData.sortKey.
-     */
-    sortKey: number;
-    /**
-     * Number of times an error occurred.
-     */
-    count: number;
-    /**
-     * Content is Expired: true
-     */
-    expired: boolean;
-}
-export declare type ComicViewerItemData<T = {}> = T & {
-    /**
-     * Image height.
-     */
-    height: number;
-    /**
-     * Unique value for identifying.
-     */
-    id: number | undefined;
-    /**
-     * Image sourceUrl for displaying.
-     */
-    url: string;
-    /**
-     * Image width.
-     */
+export interface Dimension {
     width: number;
-    /**
-     * SortKey
-     */
-    sortKey: number;
-    /**
-     * Image expire date.
-     */
-    expiresAt: string;
-    /***
-     * Timestamp when get content response
-     */
-    responseTimestamp: number;
-};
-export default interface ComicViewerProps<T> extends ComponentProps<{
-    /**
-     * Data for render.
-     */
-    data: ComicViewerItemData<T>[];
+    height: number;
+}
+export default interface ComicViewerProps extends ComponentProps<{
     /**
      * Delay Time to call the error handler.
      * @default 500
      */
-    errorDebounceMillis?: number;
+    debounceMillis?: number;
     /**
-     * How many times retry onError when same item error occur
+     * How many times handle onError directly when item error occur
      * @default 3
      */
-    errorRetryCount?: number;
+    autoHandleErrorCount?: number;
     /**
      * How many items to render in the initial batch.
      * @default 1
@@ -97,33 +32,23 @@ export default interface ComicViewerProps<T> extends ComponentProps<{
      * @default 0
      */
     itemVisiblePercentThreshold?: number;
-    /***
-     * Timestamp when get content response
+    /**
+     * Dimensions of each Image considering viewport.
      */
-    responseTimestamp: number;
+    intrinsicDimensions: Array<Dimension>;
     /**
-     * Comic viewer width.
+     * TBD
      */
-    viewerWidth: number;
+    viewportWidth: number;
     /**
      * The value for FlatList windowSize.
      * @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.
+     * TBD
      */
-    onError?: (errors: ErrorInfo[]) => void;
+    getUrlByIndex: (indexes: Array<number>) => Promise<Map<number, string> | undefined>;
     /**
      * Handle scroll event.
      * @param event Scroll event.

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

@@ -0,0 +1,6 @@
+import { IconButtonProps } from '@fountain-ui/core';
+interface ReloadButtonProps {
+    onPress: IconButtonProps['onPress'];
+}
+export default function ReloadButton(props: ReloadButtonProps): JSX.Element;
+export {};

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

@@ -1,7 +1,37 @@
-import React from 'react';
-import ComicViewerItemProps from './ComicViewerItemProps';
-declare function ViewerItem<T>({ props }: {
-    props: ComicViewerItemProps<T>;
-}): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof ViewerItem>;
-export default _default;
+import { ImageProps } from '@fountain-ui/core';
+export interface ViewerItemProps {
+    /**
+     * Image width.
+     */
+    width: number;
+    /**
+     * Image height.
+     */
+    height: number;
+    /**
+     * Image sourceUrl for displaying.
+     */
+    url?: string;
+    /**
+     * Error handler.
+     */
+    onError?: ImageProps['onError'];
+    /**
+     * Load handler.
+     */
+    onLoad?: ImageProps['onLoad'];
+    /**
+     * Handle Reload button press event.
+     */
+    onReloadPress?: ImageProps['onError'];
+    /**
+     * Handle item press event.
+     */
+    onPress?: () => void;
+    /**
+     * If true, reload button visible.
+     * @default false
+     */
+    reloadButtonVisible?: boolean;
+}
+export default function ViewerItem(props: ViewerItemProps): JSX.Element;

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

@@ -1,3 +1,3 @@
 export { default } from './ComicViewer';
-export type { ComicViewerItemData, default as ComicViewerProps, ErrorInfo } from './ComicViewerProps';
-export type { default as ComicViewerItemProps } from './ComicViewerItemProps';
+export type { Dimension, default as ComicViewerProps } from './ComicViewerProps';
+export type { ViewerItemProps } from './ViewerItem';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.34",
+  "version": "2.0.0-beta.35",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "44aa49c39c8a9f0986b9d12e06a8a2cfc3766ed9"
+  "gitHead": "9c4883b57705f114ca21d0796caa0d460024241f"
 }