@fountain-ui/lab 1.21.1 → 2.0.0-beta.4

package/build/module/ComicViewer/ComicViewer.js

@@ -0,0 +1,146 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FlatList } from 'react-native';
+import * as R from 'ramda';
+import ViewerItem from './ViewerItem';
+
+const getItemHeights = items => R.map(content => content.height)(items);
+
+const appender = (left, right) => [left + right, left + right];
+
+const getHeightAccum = itemHeights => R.mapAccum(appender, 0, itemHeights);
+
+const keyExtractor = item => item.id;
+
+export default function ComicViewer(props) {
+  const {
+    data,
+    errorDebounceMillis = 500,
+    errorRetryCount = 3,
+    initialNumToRender = 1,
+    initialScrollPercentage = 0,
+    itemVisiblePercentThreshold = 0,
+    onError,
+    viewerWidth,
+    windowSize = 3,
+    ...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 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 itemHeightAccum = getHeightAccum(itemHeights);
+  const viewabilityConfig = useMemo(() => ({
+    itemVisiblePercentThreshold
+  }), [itemVisiblePercentThreshold]);
+  const getItemLayout = useCallback((data, index) => {
+    const offsets = R.prepend(0, itemHeightAccum[1]);
+    return {
+      length: itemHeights[index],
+      offset: offsets[index],
+      index
+    };
+  }, [itemHeights]);
+  const onViewableItemsChanged = useRef(({
+    viewableItems
+  }) => {
+    setItems(prev => {
+      const viewableItemIds = R.map(viewableItem => viewableItem.item.id)(viewableItems);
+      return R.map(prevItem => ({ ...prevItem,
+        isViewable: R.includes(prevItem.id, viewableItemIds)
+      }))([...prev]);
+    });
+  });
+
+  const onErrorHandler = errors => {
+    const isRetryLimited = R.any(error => error.count >= errorRetryCount)(errors);
+
+    if (isRetryLimited) {
+      return;
+    }
+
+    onError && onError(errors);
+  };
+
+  const itemErrorHandler = useCallback(errorInfo => {
+    errors.current.set(errorInfo.id, errorInfo.count);
+
+    if (debounceTimeOut.current) {
+      clearTimeout(debounceTimeOut.current);
+    }
+
+    debounceTimeOut.current = setTimeout(function () {
+      const errorsArray = Array.from(errors.current.entries());
+      const errorsInfo = R.map(([key, value]) => ({
+        id: key,
+        count: value
+      }))(errorsArray);
+      onErrorHandler([...errorsInfo]);
+      errors.current.clear();
+    }, errorDebounceMillis);
+  }, [errorDebounceMillis, errors.current]);
+  const renderItem = useCallback(({
+    item
+  }) => {
+    const props = { ...item,
+      onError: itemErrorHandler
+    };
+    return /*#__PURE__*/React.createElement(ViewerItem, {
+      props: props
+    });
+  }, []);
+  useEffect(() => {
+    setItems(prev => {
+      return R.map(prevItem => {
+        const currentData = R.find(currentItemData => prevItem.id === currentItemData.id)(data);
+
+        if (currentData && currentData.sourceUrl !== prevItem.sourceUrl) {
+          return { ...prevItem,
+            sourceUrl: currentData.sourceUrl
+          };
+        }
+
+        return prevItem;
+      })([...prev]);
+    });
+  }, [resourceString]);
+  useEffect(() => {
+    const newItems = R.map(item => ({ ...item,
+      width: viewerWidth,
+      height: item.height * viewerWidth / item.width
+    }))(items);
+    setItems(newItems);
+  }, [viewerWidth]);
+  useEffect(() => {
+    const totalHeight = itemHeightAccum[0];
+    const offset = Math.floor(initialScrollPercentage / 100 * totalHeight);
+
+    if (flatListRef.current) {
+      flatListRef.current.scrollToOffset({
+        offset,
+        animated: false
+      });
+    }
+  }, [flatListRef.current]);
+  return /*#__PURE__*/React.createElement(FlatList, _extends({
+    data: items,
+    getItemLayout: getItemLayout,
+    initialNumToRender: initialNumToRender,
+    keyExtractor: keyExtractor,
+    onViewableItemsChanged: onViewableItemsChanged.current,
+    ref: flatListRef,
+    renderItem: renderItem,
+    viewabilityConfig: viewabilityConfig,
+    windowSize: windowSize
+  }, otherProps));
+}
+;
+//# sourceMappingURL=ComicViewer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ComicViewer.tsx"],"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"],"mappings":"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","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"]}

package/build/module/ComicViewer/ComicViewerItemProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ComicViewerItemProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build/module/ComicViewer/ComicViewerProps.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=ComicViewerProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build/module/ComicViewer/ViewerItem.js

@@ -0,0 +1,71 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { Image, StyleSheet } from '@fountain-ui/core';
+const styles = StyleSheet.create({
+  placeholder: {
+    backgroundColor: '#abcabc'
+  }
+});
+
+function ViewerItem({
+  props
+}) {
+  const {
+    height,
+    id,
+    isViewable,
+    onError,
+    sourceUrl,
+    width
+  } = props;
+  const [isLoaded, setIsLoaded] = useState(false);
+  const errorCount = useRef(0);
+  const onLoad = useCallback(() => {
+    errorCount.current = 0;
+    setIsLoaded(true);
+  }, []);
+  const handleError = useCallback(() => {
+    errorCount.current = errorCount.current + 1;
+    onError && onError({
+      id,
+      count: errorCount.current
+    });
+  }, [id]);
+  const viewStyle = {
+    width,
+    height
+  };
+
+  const Placeholder = () => /*#__PURE__*/React.createElement(View, {
+    style: [viewStyle, styles.placeholder]
+  });
+
+  if (!isViewable && !isLoaded) {
+    return /*#__PURE__*/React.createElement(Placeholder, null);
+  }
+
+  return /*#__PURE__*/React.createElement(Image, {
+    disableOutline: true,
+    key: sourceUrl,
+    onLoad: onLoad,
+    onError: handleError,
+    source: {
+      uri: sourceUrl
+    },
+    style: viewStyle,
+    square: true
+  });
+}
+
+export default /*#__PURE__*/React.memo(ViewerItem, (prevProps, nextProps) => {
+  if (prevProps.props.isViewable !== nextProps.props.isViewable) {
+    return false;
+  }
+
+  if (prevProps.props.sourceUrl !== nextProps.props.sourceUrl) {
+    return false;
+  }
+
+  return true;
+});
+//# sourceMappingURL=ViewerItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ViewerItem.tsx"],"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"],"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;AAC7BC,EAAAA,WAAW,EAAE;AACTC,IAAAA,eAAe,EAAE;AADR;AADgB,CAAlB,CAAf;;AAMA,SAASC,UAAT,CAAuB;AAAEC,EAAAA;AAAF,CAAvB,EAAsE;AAClE,QAAM;AACFC,IAAAA,MADE;AAEFC,IAAAA,EAFE;AAGFC,IAAAA,UAHE;AAIFC,IAAAA,OAJE;AAKFC,IAAAA,SALE;AAMFC,IAAAA;AANE,MAOFN,KAPJ;AASA,QAAM,CAACO,QAAD,EAAWC,WAAX,IAA0BjB,QAAQ,CAAC,KAAD,CAAxC;AAEA,QAAMkB,UAAU,GAAGnB,MAAM,CAAS,CAAT,CAAzB;AAEA,QAAMoB,MAAM,GAAGrB,WAAW,CAAC,MAAM;AAC7BoB,IAAAA,UAAU,CAACE,OAAX,GAAqB,CAArB;AACAH,IAAAA,WAAW,CAAC,IAAD,CAAX;AACH,GAHyB,EAGvB,EAHuB,CAA1B;AAKA,QAAMI,WAAW,GAAGvB,WAAW,CAAC,MAAM;AAClCoB,IAAAA,UAAU,CAACE,OAAX,GAAqBF,UAAU,CAACE,OAAX,GAAqB,CAA1C;AAEAP,IAAAA,OAAO,IAAIA,OAAO,CAAC;AACfF,MAAAA,EADe;AAEfW,MAAAA,KAAK,EAAEJ,UAAU,CAACE;AAFH,KAAD,CAAlB;AAIH,GAP8B,EAO5B,CAACT,EAAD,CAP4B,CAA/B;AASA,QAAMY,SAAS,GAAG;AAAER,IAAAA,KAAF;AAASL,IAAAA;AAAT,GAAlB;;AAEA,QAAMc,WAAW,GAAG,mBAChB,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CACTD,SADS,EAETnB,MAAM,CAACE,WAFE;AAAb,IADJ;;AAOA,MAAI,CAACM,UAAD,IAAe,CAACI,QAApB,EAA8B;AAC1B,wBAAO,oBAAC,WAAD,OAAP;AACH;;AAED,sBACI,oBAAC,KAAD;AACI,IAAA,cAAc,EAAE,IADpB;AAEI,IAAA,GAAG,EAAEF,SAFT;AAGI,IAAA,MAAM,EAAEK,MAHZ;AAII,IAAA,OAAO,EAAEE,WAJb;AAKI,IAAA,MAAM,EAAE;AAAEI,MAAAA,GAAG,EAAEX;AAAP,KALZ;AAMI,IAAA,KAAK,EAAES,SANX;AAOI,IAAA,MAAM,EAAE;AAPZ,IADJ;AAWH;;AAED,4BAAe1B,KAAK,CAAC6B,IAAN,CAAWlB,UAAX,EAAuB,CAACmB,SAAD,EAAYC,SAAZ,KAA0B;AAC5D,MAAID,SAAS,CAAClB,KAAV,CAAgBG,UAAhB,KAA+BgB,SAAS,CAACnB,KAAV,CAAgBG,UAAnD,EAA+D;AAC3D,WAAO,KAAP;AACH;;AAED,MAAIe,SAAS,CAAClB,KAAV,CAAgBK,SAAhB,KAA8Bc,SAAS,CAACnB,KAAV,CAAgBK,SAAlD,EAA6D;AACzD,WAAO,KAAP;AACH;;AAED,SAAO,IAAP;AACH,CAVc,CAAf","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"]}

package/build/module/ComicViewer/index.js

@@ -0,0 +1,2 @@
+export { default } from './ComicViewer';
+//# sourceMappingURL=index.js.map

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

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

package/build/module/DateTimePicker/DateTimePicker.js

@@ -79,7 +79,13 @@ export default function DateTimePicker(props) {
       variant: 'text',
       size: 'small',
       onPress: () => setYearPickerVisible(true)
-    })
+    }),
+    theme: {
+      backgroundColor: theme.palette.background.default,
+      calendarBackground: theme.palette.background.default,
+      dayTextColor: theme.palette.text.primary,
+      textDisabledColor: theme.palette.text.hint
+    }
   });
 }
 ;

package/build/module/DateTimePicker/DateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DateTimePicker.tsx"],"names":["React","format","Calendar","LocaleConfig","Button","Typography","useTheme","YearPicker","DateTimePickerContext","formatDate","useDateTimePicker","useContext","DateTimePicker","props","currentMonth","Date","locale","markedDate","markedDateProp","maxDate","minDate","onDayPress","onYearPress","onYearPressProp","theme","yearPickerVisible","setYearPickerVisible","useState","locales","LeftArrow","RightArrow","date","defaultLocale","direction","selected","disableTouchEvent","selectedColor","palette","primary","main","selectedTextColor","contrastTextColor","toDate"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { format } from 'date-fns';\n//@ts-ignore\nimport { Calendar, LocaleConfig } from 'react-native-calendars';\nimport { Button, Typography } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport YearPicker from './YearPicker';\nimport { DateTimePickerContext } from './DateTimePickerProvider';\nimport type DateTimePickerProps from './DateTimePickerProps';\nimport { formatDate } from './utils';\n\nconst useDateTimePicker = () => {\n    return React.useContext(DateTimePickerContext);\n};\n\nexport default function DateTimePicker(props: DateTimePickerProps) {\n    const {\n        currentMonth = new Date(),\n        locale,\n        markedDate: markedDateProp,\n        maxDate,\n        minDate,\n        onDayPress,\n        onYearPress: onYearPressProp,\n    } = props;\n\n    const theme = useTheme();\n\n    const [yearPickerVisible, setYearPickerVisible] = React.useState(false);\n    const { locales } = useDateTimePicker();\n\n    //TODO: Need to update arrow components\n    const LeftArrow = <Typography children={'<'} color={'textPrimary'}/>;\n    const RightArrow = <Typography children={'>'} color={'textPrimary'}/>;\n\n    const onYearPress = (date: Date) => {\n        setYearPickerVisible(false);\n        onYearPressProp && onYearPressProp(date);\n    };\n\n    if (locale) {\n        LocaleConfig.locales = locales;\n        LocaleConfig.defaultLocale = locale;\n    }\n\n    const markedDate = markedDateProp ? format(markedDateProp, 'yyyy-MM-dd') : '';\n\n    if (yearPickerVisible) {\n        return (\n            <YearPicker\n                date={currentMonth}\n                locale={locale}\n                maxDate={maxDate}\n                minDate={minDate}\n                onYearPress={onYearPress}\n            />\n        );\n    }\n\n    return (\n        <Calendar\n            current={currentMonth}\n            onDayPress={onDayPress}\n            maxDate={maxDate}\n            minDate={minDate}\n            renderArrow={(direction: string) => direction === 'left' ? LeftArrow : RightArrow}\n            markedDates={{\n                [markedDate]: {\n                    selected: true,\n                    disableTouchEvent: true,\n                    selectedColor: theme.palette.primary.main,\n                    selectedTextColor: theme.palette.primary.contrastTextColor,\n                },\n            }}\n            // @ts-ignore\n            renderHeader={(date) => (\n                <Button\n                    children={formatDate(date.toDate(), locale)}\n                    variant={'text'}\n                    size={'small'}\n                    onPress={() => setYearPickerVisible(true)}\n                />\n            )}\n        />\n    );\n};\n"]}
+{"version":3,"sources":["DateTimePicker.tsx"],"names":["React","format","Calendar","LocaleConfig","Button","Typography","useTheme","YearPicker","DateTimePickerContext","formatDate","useDateTimePicker","useContext","DateTimePicker","props","currentMonth","Date","locale","markedDate","markedDateProp","maxDate","minDate","onDayPress","onYearPress","onYearPressProp","theme","yearPickerVisible","setYearPickerVisible","useState","locales","LeftArrow","RightArrow","date","defaultLocale","direction","selected","disableTouchEvent","selectedColor","palette","primary","main","selectedTextColor","contrastTextColor","toDate","backgroundColor","background","default","calendarBackground","dayTextColor","text","textDisabledColor","hint"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { format } from 'date-fns';\n//@ts-ignore\nimport { Calendar, LocaleConfig } from 'react-native-calendars';\nimport { Button, Typography } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport YearPicker from './YearPicker';\nimport { DateTimePickerContext } from './DateTimePickerProvider';\nimport type DateTimePickerProps from './DateTimePickerProps';\nimport { formatDate } from './utils';\n\nconst useDateTimePicker = () => {\n    return React.useContext(DateTimePickerContext);\n};\n\nexport default function DateTimePicker(props: DateTimePickerProps) {\n    const {\n        currentMonth = new Date(),\n        locale,\n        markedDate: markedDateProp,\n        maxDate,\n        minDate,\n        onDayPress,\n        onYearPress: onYearPressProp,\n    } = props;\n\n    const theme = useTheme();\n\n    const [yearPickerVisible, setYearPickerVisible] = React.useState(false);\n    const { locales } = useDateTimePicker();\n\n    //TODO: Need to update arrow components\n    const LeftArrow = <Typography children={'<'} color={'textPrimary'}/>;\n    const RightArrow = <Typography children={'>'} color={'textPrimary'}/>;\n\n    const onYearPress = (date: Date) => {\n        setYearPickerVisible(false);\n        onYearPressProp && onYearPressProp(date);\n    };\n\n    if (locale) {\n        LocaleConfig.locales = locales;\n        LocaleConfig.defaultLocale = locale;\n    }\n\n    const markedDate = markedDateProp ? format(markedDateProp, 'yyyy-MM-dd') : '';\n\n    if (yearPickerVisible) {\n        return (\n            <YearPicker\n                date={currentMonth}\n                locale={locale}\n                maxDate={maxDate}\n                minDate={minDate}\n                onYearPress={onYearPress}\n            />\n        );\n    }\n\n    return (\n        <Calendar\n            current={currentMonth}\n            onDayPress={onDayPress}\n            maxDate={maxDate}\n            minDate={minDate}\n            renderArrow={(direction: string) => direction === 'left' ? LeftArrow : RightArrow}\n            markedDates={{\n                [markedDate]: {\n                    selected: true,\n                    disableTouchEvent: true,\n                    selectedColor: theme.palette.primary.main,\n                    selectedTextColor: theme.palette.primary.contrastTextColor,\n                },\n            }}\n            // @ts-ignore\n            renderHeader={(date) => (\n                <Button\n                    children={formatDate(date.toDate(), locale)}\n                    variant={'text'}\n                    size={'small'}\n                    onPress={() => setYearPickerVisible(true)}\n                />\n            )}\n            theme={{\n                backgroundColor: theme.palette.background.default,\n                calendarBackground: theme.palette.background.default,\n                dayTextColor: theme.palette.text.primary,\n                textDisabledColor: theme.palette.text.hint,\n            }}\n        />\n    );\n};\n"]}

package/build/module/DateTimePicker/YearPicker.js

@@ -45,6 +45,7 @@ const YearPicker = ({
 
   return /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Typography, {
     children: formatDate(date, locale),
+    color: 'textPrimary',
     variant: 'subtitle2'
   }), /*#__PURE__*/React.createElement(FlatList, {
     data: years,

package/build/module/DateTimePicker/YearPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["YearPicker.tsx"],"names":["React","FlatList","getYear","setYear","Button","Column","Typography","useTheme","formatDate","initYear","itemHeight","useStyles","theme","list","marginTop","spacing","maxHeight","YearPicker","date","locale","maxDate","minDate","onYearPress","styles","ref","useRef","minYear","maxYear","Date","years","Array","fill","map","v","i","useEffect","current","scrollToItem","animated","item","getItemLayout","data","index","length","offset","toString","newDate"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,OAAT,EAAkBC,OAAlB,QAAiC,UAAjC;AAEA,SAASC,MAAT,EAAiBC,MAAjB,EAAyBC,UAAzB,EAAqCC,QAArC,QAAqD,mBAArD;AACA,SAASC,UAAT,QAA2B,SAA3B;AAEA,MAAMC,QAAQ,GAAG,IAAjB;AACA,MAAMC,UAAU,GAAG,EAAnB;;AAYA,MAAMC,SAAsC,GAAG,YAA8B;AACzE,QAAMC,KAAK,GAAGL,QAAQ,EAAtB;AAEA,SAAO;AACHM,IAAAA,IAAI,EAAE;AACFC,MAAAA,SAAS,EAAEF,KAAK,CAACG,OAAN,CAAc,CAAd,CADT;AAEFC,MAAAA,SAAS,EAAE;AAFT;AADH,GAAP;AAMH,CATD;;AAWA,MAAMC,UAAU,GAAG,CAAC;AAChBC,EAAAA,IADgB;AAEhBC,EAAAA,MAFgB;AAGhBC,EAAAA,OAHgB;AAIhBC,EAAAA,OAJgB;AAKhBC,EAAAA;AALgB,CAAD,KAMI;AACnB,QAAMC,MAAM,GAAGZ,SAAS,EAAxB;AAEA,QAAMa,GAAG,GAAGxB,KAAK,CAACyB,MAAN,CAA8B,IAA9B,CAAZ;AAEA,QAAMC,OAAO,GAAGL,OAAO,GAAGnB,OAAO,CAACmB,OAAD,CAAV,GAAsBZ,QAA7C;AACA,QAAMkB,OAAO,GAAGP,OAAO,GAAGlB,OAAO,CAACkB,OAAD,CAAV,GAAsBlB,OAAO,CAAC,IAAI0B,IAAJ,EAAD,CAApD;AACA,QAAMC,KAAK,GAAGC,KAAK,CAACH,OAAO,GAAGD,OAAV,GAAoB,CAArB,CAAL,CAA6BK,IAA7B,CAAkCL,OAAlC,EAA2CM,GAA3C,CAA+C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA7D,CAAd;AAEAlC,EAAAA,KAAK,CAACmC,SAAN,CAAgB,MAAM;AAAA;;AAClB,oBAAAX,GAAG,CAACY,OAAJ,8DAAaC,YAAb,CAA0B;AACtBC,MAAAA,QAAQ,EAAE,KADY;AAEtBC,MAAAA,IAAI,EAAErC,OAAO,CAACgB,IAAD;AAFS,KAA1B;AAIH,GALD,EAKG,CAACA,IAAD,CALH;;AAOA,QAAMsB,aAAa,GAAG,CAACC,IAAD,EAAyCC,KAAzC,MAA4D;AAC9EC,IAAAA,MAAM,EAAEjC,UADsE;AAE9EkC,IAAAA,MAAM,EAAElC,UAAU,GAAGgC,KAFyD;AAG9EA,IAAAA;AAH8E,GAA5D,CAAtB;;AAMA,sBACI,oBAAC,MAAD,qBACI,oBAAC,UAAD;AACI,IAAA,QAAQ,EAAElC,UAAU,CAACU,IAAD,EAAOC,MAAP,CADxB;AAEI,IAAA,OAAO,EAAE;AAFb,IADJ,eAKI,oBAAC,QAAD;AACI,IAAA,IAAI,EAAEU,KADV;AAEI,IAAA,YAAY,EAAEU,IAAI,IAAIA,IAAI,CAACM,QAAL,EAF1B;AAGI,IAAA,UAAU,EAAE,CAAC;AAAEN,MAAAA;AAAF,KAAD,kBACR,oBAAC,MAAD;AACI,MAAA,QAAQ,EAAEA,IAAI,CAACM,QAAL,EADd;AAEI,MAAA,OAAO,EAAE,MAFb;AAGI,MAAA,OAAO,EAAE,MAAM;AACX,cAAMC,OAAO,GAAG3C,OAAO,CAACe,IAAD,EAAOqB,IAAP,CAAvB;AACAjB,QAAAA,WAAW,CAACwB,OAAD,CAAX;AACH;AANL,MAJR;AAaI,IAAA,aAAa,EAAEN,aAbnB;AAcI,IAAA,KAAK,EAAEjB,MAAM,CAACV,IAdlB;AAeI,IAAA,GAAG,EAAEW;AAfT,IALJ,CADJ;AAyBH,CArDD;;AAuDA,eAAeP,UAAf","sourcesContent":["import React from 'react';\nimport { FlatList } from 'react-native';\nimport { getYear, setYear } from 'date-fns';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { Button, Column, Typography, useTheme } from '@fountain-ui/core';\nimport { formatDate } from './utils';\n\nconst initYear = 1901;\nconst itemHeight = 40;\n\ninterface YearPickerProps {\n    date: Date;\n    locale?: string,\n    maxDate?: Date;\n    minDate?: Date;\n    onYearPress: (date: Date) => void;\n}\n\ntype YearPickerStyles = NamedStylesStringUnion<'list'>;\n\nconst useStyles: UseStyles<YearPickerStyles> = function (): YearPickerStyles {\n    const theme = useTheme();\n\n    return {\n        list: {\n            marginTop: theme.spacing(1),\n            maxHeight: 270,\n        },\n    };\n};\n\nconst YearPicker = ({\n    date,\n    locale,\n    maxDate,\n    minDate,\n    onYearPress,\n}: YearPickerProps) => {\n    const styles = useStyles();\n\n    const ref = React.useRef<FlatList | null>(null);\n\n    const minYear = minDate ? getYear(minDate) : initYear;\n    const maxYear = maxDate ? getYear(maxDate) : getYear(new Date());\n    const years = Array(maxYear - minYear + 1).fill(minYear).map((v, i) => v + i);\n\n    React.useEffect(() => {\n        ref.current?.scrollToItem({\n            animated: false,\n            item: getYear(date),\n        });\n    }, [date]);\n\n    const getItemLayout = (data: Array<number> | null | undefined, index: number) => ({\n        length: itemHeight,\n        offset: itemHeight * index,\n        index,\n    });\n\n    return (\n        <Column>\n            <Typography\n                children={formatDate(date, locale)}\n                variant={'subtitle2'}\n            />\n            <FlatList\n                data={years}\n                keyExtractor={item => item.toString()}\n                renderItem={({ item }) => (\n                    <Button\n                        children={item.toString()}\n                        variant={'text'}\n                        onPress={() => {\n                            const newDate = setYear(date, item);\n                            onYearPress(newDate);\n                        }}\n                    />\n                )}\n                getItemLayout={getItemLayout}\n                style={styles.list}\n                ref={ref}\n            />\n        </Column>\n    );\n};\n\nexport default YearPicker;"]}
+{"version":3,"sources":["YearPicker.tsx"],"names":["React","FlatList","getYear","setYear","Button","Column","Typography","useTheme","formatDate","initYear","itemHeight","useStyles","theme","list","marginTop","spacing","maxHeight","YearPicker","date","locale","maxDate","minDate","onYearPress","styles","ref","useRef","minYear","maxYear","Date","years","Array","fill","map","v","i","useEffect","current","scrollToItem","animated","item","getItemLayout","data","index","length","offset","toString","newDate"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,OAAT,EAAkBC,OAAlB,QAAiC,UAAjC;AAEA,SAASC,MAAT,EAAiBC,MAAjB,EAAyBC,UAAzB,EAAqCC,QAArC,QAAqD,mBAArD;AACA,SAASC,UAAT,QAA2B,SAA3B;AAEA,MAAMC,QAAQ,GAAG,IAAjB;AACA,MAAMC,UAAU,GAAG,EAAnB;;AAYA,MAAMC,SAAsC,GAAG,YAA8B;AACzE,QAAMC,KAAK,GAAGL,QAAQ,EAAtB;AAEA,SAAO;AACHM,IAAAA,IAAI,EAAE;AACFC,MAAAA,SAAS,EAAEF,KAAK,CAACG,OAAN,CAAc,CAAd,CADT;AAEFC,MAAAA,SAAS,EAAE;AAFT;AADH,GAAP;AAMH,CATD;;AAWA,MAAMC,UAAU,GAAG,CAAC;AAChBC,EAAAA,IADgB;AAEhBC,EAAAA,MAFgB;AAGhBC,EAAAA,OAHgB;AAIhBC,EAAAA,OAJgB;AAKhBC,EAAAA;AALgB,CAAD,KAMI;AACnB,QAAMC,MAAM,GAAGZ,SAAS,EAAxB;AAEA,QAAMa,GAAG,GAAGxB,KAAK,CAACyB,MAAN,CAA8B,IAA9B,CAAZ;AAEA,QAAMC,OAAO,GAAGL,OAAO,GAAGnB,OAAO,CAACmB,OAAD,CAAV,GAAsBZ,QAA7C;AACA,QAAMkB,OAAO,GAAGP,OAAO,GAAGlB,OAAO,CAACkB,OAAD,CAAV,GAAsBlB,OAAO,CAAC,IAAI0B,IAAJ,EAAD,CAApD;AACA,QAAMC,KAAK,GAAGC,KAAK,CAACH,OAAO,GAAGD,OAAV,GAAoB,CAArB,CAAL,CAA6BK,IAA7B,CAAkCL,OAAlC,EAA2CM,GAA3C,CAA+C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA7D,CAAd;AAEAlC,EAAAA,KAAK,CAACmC,SAAN,CAAgB,MAAM;AAAA;;AAClB,oBAAAX,GAAG,CAACY,OAAJ,8DAAaC,YAAb,CAA0B;AACtBC,MAAAA,QAAQ,EAAE,KADY;AAEtBC,MAAAA,IAAI,EAAErC,OAAO,CAACgB,IAAD;AAFS,KAA1B;AAIH,GALD,EAKG,CAACA,IAAD,CALH;;AAOA,QAAMsB,aAAa,GAAG,CAACC,IAAD,EAAyCC,KAAzC,MAA4D;AAC9EC,IAAAA,MAAM,EAAEjC,UADsE;AAE9EkC,IAAAA,MAAM,EAAElC,UAAU,GAAGgC,KAFyD;AAG9EA,IAAAA;AAH8E,GAA5D,CAAtB;;AAMA,sBACI,oBAAC,MAAD,qBACI,oBAAC,UAAD;AACI,IAAA,QAAQ,EAAElC,UAAU,CAACU,IAAD,EAAOC,MAAP,CADxB;AAEI,IAAA,KAAK,EAAE,aAFX;AAGI,IAAA,OAAO,EAAE;AAHb,IADJ,eAMI,oBAAC,QAAD;AACI,IAAA,IAAI,EAAEU,KADV;AAEI,IAAA,YAAY,EAAEU,IAAI,IAAIA,IAAI,CAACM,QAAL,EAF1B;AAGI,IAAA,UAAU,EAAE,CAAC;AAAEN,MAAAA;AAAF,KAAD,kBACR,oBAAC,MAAD;AACI,MAAA,QAAQ,EAAEA,IAAI,CAACM,QAAL,EADd;AAEI,MAAA,OAAO,EAAE,MAFb;AAGI,MAAA,OAAO,EAAE,MAAM;AACX,cAAMC,OAAO,GAAG3C,OAAO,CAACe,IAAD,EAAOqB,IAAP,CAAvB;AACAjB,QAAAA,WAAW,CAACwB,OAAD,CAAX;AACH;AANL,MAJR;AAaI,IAAA,aAAa,EAAEN,aAbnB;AAcI,IAAA,KAAK,EAAEjB,MAAM,CAACV,IAdlB;AAeI,IAAA,GAAG,EAAEW;AAfT,IANJ,CADJ;AA0BH,CAtDD;;AAwDA,eAAeP,UAAf","sourcesContent":["import React from 'react';\nimport { FlatList } from 'react-native';\nimport { getYear, setYear } from 'date-fns';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { Button, Column, Typography, useTheme } from '@fountain-ui/core';\nimport { formatDate } from './utils';\n\nconst initYear = 1901;\nconst itemHeight = 40;\n\ninterface YearPickerProps {\n    date: Date;\n    locale?: string,\n    maxDate?: Date;\n    minDate?: Date;\n    onYearPress: (date: Date) => void;\n}\n\ntype YearPickerStyles = NamedStylesStringUnion<'list'>;\n\nconst useStyles: UseStyles<YearPickerStyles> = function (): YearPickerStyles {\n    const theme = useTheme();\n\n    return {\n        list: {\n            marginTop: theme.spacing(1),\n            maxHeight: 270,\n        },\n    };\n};\n\nconst YearPicker = ({\n    date,\n    locale,\n    maxDate,\n    minDate,\n    onYearPress,\n}: YearPickerProps) => {\n    const styles = useStyles();\n\n    const ref = React.useRef<FlatList | null>(null);\n\n    const minYear = minDate ? getYear(minDate) : initYear;\n    const maxYear = maxDate ? getYear(maxDate) : getYear(new Date());\n    const years = Array(maxYear - minYear + 1).fill(minYear).map((v, i) => v + i);\n\n    React.useEffect(() => {\n        ref.current?.scrollToItem({\n            animated: false,\n            item: getYear(date),\n        });\n    }, [date]);\n\n    const getItemLayout = (data: Array<number> | null | undefined, index: number) => ({\n        length: itemHeight,\n        offset: itemHeight * index,\n        index,\n    });\n\n    return (\n        <Column>\n            <Typography\n                children={formatDate(date, locale)}\n                color={'textPrimary'}\n                variant={'subtitle2'}\n            />\n            <FlatList\n                data={years}\n                keyExtractor={item => item.toString()}\n                renderItem={({ item }) => (\n                    <Button\n                        children={item.toString()}\n                        variant={'text'}\n                        onPress={() => {\n                            const newDate = setYear(date, item);\n                            onYearPress(newDate);\n                        }}\n                    />\n                )}\n                getItemLayout={getItemLayout}\n                style={styles.list}\n                ref={ref}\n            />\n        </Column>\n    );\n};\n\nexport default YearPicker;\n"]}

package/build/module/index.js

@@ -8,6 +8,8 @@ export { default as FlipCard } from './FlipCard';
 export * from './FlipCard';
 export { default as ViewPager } from './ViewPager';
 export * from './ViewPager';
+export { default as ComicViewer } from './ComicViewer';
+export * from './ComicViewer';
 export { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';
 export * from './StatusBarProvider';
 export * from './hooks';

package/build/module/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["default","BottomSheet","Carousel","DateTimePicker","FlipCard","ViewPager","StatusBarProvider","useStatusBarContext"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASD,OAAO,IAAIE,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASF,OAAO,IAAIG,cAApB,QAA0C,kBAA1C;AACA,cAAc,kBAAd;AAEA,SAASH,OAAO,IAAII,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASJ,OAAO,IAAIK,SAApB,QAAqC,aAArC;AACA,cAAc,aAAd;AAEA,SAASL,OAAO,IAAIM,iBAApB,EAAuCC,mBAAvC,QAAkE,qBAAlE;AACA,cAAc,qBAAd;AAEA,cAAc,SAAd","sourcesContent":["export { default as BottomSheet } from './BottomSheet';\nexport * from './BottomSheet';\n\nexport { default as Carousel } from './Carousel';\nexport * from './Carousel';\n\nexport { default as DateTimePicker } from './DateTimePicker';\nexport * from './DateTimePicker';\n\nexport { default as FlipCard } from './FlipCard';\nexport * from './FlipCard';\n\nexport { default as ViewPager } from './ViewPager';\nexport * from './ViewPager';\n\nexport { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';\nexport * from './StatusBarProvider';\n\nexport * from './hooks';\n"]}
+{"version":3,"sources":["index.ts"],"names":["default","BottomSheet","Carousel","DateTimePicker","FlipCard","ViewPager","ComicViewer","StatusBarProvider","useStatusBarContext"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASD,OAAO,IAAIE,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASF,OAAO,IAAIG,cAApB,QAA0C,kBAA1C;AACA,cAAc,kBAAd;AAEA,SAASH,OAAO,IAAII,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASJ,OAAO,IAAIK,SAApB,QAAqC,aAArC;AACA,cAAc,aAAd;AAEA,SAASL,OAAO,IAAIM,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASN,OAAO,IAAIO,iBAApB,EAAuCC,mBAAvC,QAAkE,qBAAlE;AACA,cAAc,qBAAd;AAEA,cAAc,SAAd","sourcesContent":["export { default as BottomSheet } from './BottomSheet';\nexport * from './BottomSheet';\n\nexport { default as Carousel } from './Carousel';\nexport * from './Carousel';\n\nexport { default as DateTimePicker } from './DateTimePicker';\nexport * from './DateTimePicker';\n\nexport { default as FlipCard } from './FlipCard';\nexport * from './FlipCard';\n\nexport { default as ViewPager } from './ViewPager';\nexport * from './ViewPager';\n\nexport { default as ComicViewer } from './ComicViewer';\nexport * from './ComicViewer';\n\nexport { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';\nexport * from './StatusBarProvider';\n\nexport * from './hooks';\n"]}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { default as ComicViewerProps } from './ComicViewerProps';
+export default function ComicViewer<T>(props: ComicViewerProps<T>): JSX.Element;

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

@@ -0,0 +1,12 @@
+import { ComicViewerItemData, ErrorInfo } from './ComicViewerProps';
+declare type ComicViewerItemProps<T> = ComicViewerItemData<T> & {
+    /**
+     * FlatListItem is viewable in screen.
+     */
+    isViewable: boolean;
+    /**
+     * Error handler
+     */
+    onError?: (errorInfo: ErrorInfo) => void;
+};
+export default ComicViewerItemProps;

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

@@ -0,0 +1,76 @@
+import { ComponentProps } from '@fountain-ui/core';
+export interface ErrorInfo {
+    /**
+     * ComicViewerItemData.id.
+     */
+    id: string;
+    /**
+     * Number of times an error occurred.
+     */
+    count: number;
+}
+export declare type ComicViewerItemData<T = {}> = T & {
+    /**
+     * Image height.
+     */
+    height: number;
+    /**
+     * Unique value for identifying.
+     */
+    id: string;
+    /**
+     * Image sourceUrl for displaying.
+     */
+    sourceUrl: string;
+    /**
+     * Image width.
+     */
+    width: number;
+};
+export default interface ComicViewerProps<T> extends ComponentProps<{
+    /**
+     * Data for render.
+     */
+    data: ComicViewerItemData<T>[];
+    /**
+     * Delay Time to call the error handler.
+     * @default 500
+     */
+    errorDebounceMillis?: number;
+    /**
+     * How many times retry onError when same item error occur
+     * @default 3
+     */
+    errorRetryCount?: number;
+    /**
+    * How many items to render in the initial batch.
+    * @default 1
+    */
+    initialNumToRender?: number;
+    /**
+     * Start at initialScrollPercentage.
+     * If over 100, scroll to end.
+     * @default 0
+     */
+    initialScrollPercentage?: number;
+    /**
+     * The value for FlatList viewabilityConfig.itemVisiblePercentThreshold.
+     * @default 0
+     */
+    itemVisiblePercentThreshold?: number;
+    /**
+     * Handling all viewerItem errors at once.
+     * @param errors Array of ViewerItems errorInfo.
+     */
+    onError?: (errors: ErrorInfo[]) => void;
+    /**
+     * Comic viewer width.
+     */
+    viewerWidth: number;
+    /**
+     * The value for FlatList windowSize.
+     * @default 3
+     */
+    windowSize?: number;
+}> {
+}

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

@@ -0,0 +1,7 @@
+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;

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

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

package/build/typescript/index.d.ts

@@ -8,6 +8,8 @@ export { default as FlipCard } from './FlipCard';
 export * from './FlipCard';
 export { default as ViewPager } from './ViewPager';
 export * from './ViewPager';
+export { default as ComicViewer } from './ComicViewer';
+export * from './ComicViewer';
 export { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';
 export * from './StatusBarProvider';
 export * from './hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "1.21.1",
+  "version": "2.0.0-beta.4",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -17,12 +17,12 @@
   "dependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.0.0",
-    "@fountain-ui/icons": "^1.20.1",
-    "@fountain-ui/utils": "^1.1.0",
+    "@fountain-ui/icons": "^2.0.0-beta.4",
+    "@fountain-ui/utils": "^2.0.0-beta.3",
     "react-native-calendars": "1.1267.0"
   },
   "peerDependencies": {
-    "@fountain-ui/core": "^1.0.0-alpha.4",
+    "@fountain-ui/core": "^2.0.0-beta.3",
     "@gorhom/bottom-sheet": "^4.1.3",
     "@react-native-community/viewpager": "> 4.2.x",
     "date-fns": "^2.0.0",
@@ -53,7 +53,6 @@
     }
   },
   "devDependencies": {
-    "@fountain-ui/core": "^1.19.1",
     "@gorhom/bottom-sheet": "4.1.3",
     "@react-native-community/viewpager": "^4.2.2",
     "@types/react-native-snap-carousel": "^3.8.4",
@@ -85,5 +84,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1624478e1427948c29a61931e3af6658db41505f"
+  "gitHead": "041cca35a665927dfc8185624c7be2c4a2e86041"
 }

package/src/BottomSheet/BottomSheetNative.tsx

@@ -46,6 +46,7 @@ export default function BottomSheet(props: BottomSheetProps) {
         } else if (indexRef.current >= 0 && index < 0) {
             bottomSheetRef.current?.dismiss();
         } else {
+            // @ts-ignore
             bottomSheetRef.current?.snapToIndex(index);
         }
     }, [index]);
@@ -60,6 +61,9 @@ export default function BottomSheet(props: BottomSheetProps) {
             web: shadow?.boxShadow,
         }),
     };
+    const backgroundStyle = {
+        backgroundColor: theme.palette.paper.default,
+    };
 
     const isBackdropTransparent = backdropOpacity <= 0;
 
@@ -76,6 +80,8 @@ export default function BottomSheet(props: BottomSheetProps) {
         <BottomSheetModalProvider>
             <BottomSheetModal
                 backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}
+                // @ts-ignore
+                backgroundStyle={backgroundStyle}
                 index={index}
                 handleComponent={NoHandle}
                 onChange={handleChange}