@fountain-ui/lab 2.0.0-beta.45 → 2.0.0-beta.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/commonjs/ComicViewer/ComicViewer.js +36 -7
- package/build/commonjs/ComicViewer/ComicViewer.js.map +1 -1
- package/build/commonjs/ComicViewer/ComicViewerProps.js.map +1 -1
- package/build/commonjs/ComicViewer/FastScroll.js +162 -0
- package/build/commonjs/ComicViewer/FastScroll.js.map +1 -0
- package/build/commonjs/ComicViewer/FastScrollProps.js +6 -0
- package/build/commonjs/ComicViewer/FastScrollProps.js.map +1 -0
- package/build/commonjs/ComicViewer/index.js.map +1 -1
- package/build/commonjs/ComicViewer/util.js +27 -0
- package/build/commonjs/ComicViewer/util.js.map +1 -0
- package/build/module/ComicViewer/ComicViewer.js +35 -7
- package/build/module/ComicViewer/ComicViewer.js.map +1 -1
- package/build/module/ComicViewer/ComicViewerProps.js.map +1 -1
- package/build/module/ComicViewer/FastScroll.js +141 -0
- package/build/module/ComicViewer/FastScroll.js.map +1 -0
- package/build/module/ComicViewer/FastScrollProps.js +2 -0
- package/build/module/ComicViewer/FastScrollProps.js.map +1 -0
- package/build/module/ComicViewer/index.js.map +1 -1
- package/build/module/ComicViewer/util.js +15 -0
- package/build/module/ComicViewer/util.js.map +1 -0
- package/build/typescript/AnimatedY/AnimatedY.d.ts +1 -0
- package/build/typescript/BottomSheet/BottomSheetNative.d.ts +1 -0
- package/build/typescript/BottomSheet/BottomSheetWeb.d.ts +1 -0
- package/build/typescript/BottomSheet/TransparentBackdrop.d.ts +1 -0
- package/build/typescript/ComicViewer/ComicViewer.d.ts +1 -0
- package/build/typescript/ComicViewer/ComicViewerProps.d.ts +13 -0
- package/build/typescript/ComicViewer/FastScroll.d.ts +4 -0
- package/build/typescript/ComicViewer/FastScrollProps.d.ts +70 -0
- package/build/typescript/ComicViewer/ReloadButton.d.ts +1 -0
- package/build/typescript/ComicViewer/ViewerItem.d.ts +1 -0
- package/build/typescript/ComicViewer/index.d.ts +1 -0
- package/build/typescript/ComicViewer/util.d.ts +2 -0
- package/build/typescript/DateTimePicker/DateTimePicker.d.ts +1 -0
- package/build/typescript/DateTimePicker/YearPicker.d.ts +1 -0
- package/build/typescript/FlipCard/FlipCard.d.ts +1 -0
- package/build/typescript/StatusBarProvider/StatusBarProvider.d.ts +1 -0
- package/build/typescript/ViewabilityTrackerView/ViewabilityTrackerView.d.ts +1 -0
- package/package.json +3 -3
- package/src/ComicViewer/ComicViewer.tsx +50 -17
- package/src/ComicViewer/ComicViewerProps.ts +16 -0
- package/src/ComicViewer/FastScroll.tsx +158 -0
- package/src/ComicViewer/FastScrollProps.ts +83 -0
- package/src/ComicViewer/index.ts +6 -0
- package/src/ComicViewer/util.ts +15 -0
- package/yarn-error.log +103 -0
|
@@ -15,6 +15,8 @@ var _core = require("@fountain-ui/core");
|
|
|
15
15
|
|
|
16
16
|
var _ViewerItem = _interopRequireDefault(require("./ViewerItem"));
|
|
17
17
|
|
|
18
|
+
var _FastScroll = _interopRequireDefault(require("./FastScroll"));
|
|
19
|
+
|
|
18
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
21
|
|
|
20
22
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -54,6 +56,7 @@ function ComicViewer(props) {
|
|
|
54
56
|
const {
|
|
55
57
|
debounceMillis = 100,
|
|
56
58
|
autoHandleErrorCount = 3,
|
|
59
|
+
fastScrollOptions,
|
|
57
60
|
getUrlByIndex,
|
|
58
61
|
initialNumToRender = 1,
|
|
59
62
|
initialScrollPercentage = 0,
|
|
@@ -61,11 +64,15 @@ function ComicViewer(props) {
|
|
|
61
64
|
intrinsicDimensions,
|
|
62
65
|
maxContentWidth = MAXIMUM_WIDTH,
|
|
63
66
|
onItemPress,
|
|
67
|
+
onScroll,
|
|
68
|
+
onError,
|
|
69
|
+
onReloadPress,
|
|
64
70
|
viewportWidth,
|
|
65
71
|
invisiblePaddingTop = 0,
|
|
66
72
|
windowSize = 3,
|
|
67
73
|
...otherProps
|
|
68
74
|
} = props;
|
|
75
|
+
const fastScrollRef = fastScrollOptions === null || fastScrollOptions === void 0 ? void 0 : fastScrollOptions.ref;
|
|
69
76
|
const flatListRef = (0, _react.useRef)(null);
|
|
70
77
|
const maybeLoadableItemsIndexRange = (0, _react.useRef)([-1, 0]);
|
|
71
78
|
const actualImageWidth = Math.min(viewportWidth, maxContentWidth);
|
|
@@ -193,6 +200,22 @@ function ComicViewer(props) {
|
|
|
193
200
|
|
|
194
201
|
loadItemsDebounce();
|
|
195
202
|
});
|
|
203
|
+
const handleScroll = (0, _react.useCallback)(event => {
|
|
204
|
+
var _fastScrollRef$curren;
|
|
205
|
+
|
|
206
|
+
fastScrollRef === null || fastScrollRef === void 0 ? void 0 : (_fastScrollRef$curren = fastScrollRef.current) === null || _fastScrollRef$curren === void 0 ? void 0 : _fastScrollRef$curren.onContentScroll(event);
|
|
207
|
+
onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
|
|
208
|
+
}, [onScroll]);
|
|
209
|
+
|
|
210
|
+
const scrollContentToOffset = offset => {
|
|
211
|
+
var _flatListRef$current;
|
|
212
|
+
|
|
213
|
+
(_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToOffset({
|
|
214
|
+
offset,
|
|
215
|
+
animated: false
|
|
216
|
+
});
|
|
217
|
+
};
|
|
218
|
+
|
|
196
219
|
const renderItem = (0, _react.useCallback)(_ref2 => {
|
|
197
220
|
var _renderedDimensions$i, _renderedDimensions$i2;
|
|
198
221
|
|
|
@@ -201,7 +224,8 @@ function ComicViewer(props) {
|
|
|
201
224
|
index
|
|
202
225
|
} = _ref2;
|
|
203
226
|
|
|
204
|
-
const
|
|
227
|
+
const handleError = () => {
|
|
228
|
+
onError && onError();
|
|
205
229
|
updateImageState((imageState, i) => {
|
|
206
230
|
const urlState = imageState.urlState;
|
|
207
231
|
|
|
@@ -228,7 +252,8 @@ function ComicViewer(props) {
|
|
|
228
252
|
}
|
|
229
253
|
};
|
|
230
254
|
|
|
231
|
-
const
|
|
255
|
+
const handleReloadPress = () => {
|
|
256
|
+
onReloadPress && onReloadPress();
|
|
232
257
|
const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
|
|
233
258
|
|
|
234
259
|
if (index >= startIndex || index < endIndex) {
|
|
@@ -253,10 +278,10 @@ function ComicViewer(props) {
|
|
|
253
278
|
};
|
|
254
279
|
|
|
255
280
|
return /*#__PURE__*/_react.default.createElement(_ViewerItem.default, {
|
|
256
|
-
onError:
|
|
281
|
+
onError: handleError,
|
|
257
282
|
onLoad: onLoad,
|
|
258
283
|
onPress: onItemPress,
|
|
259
|
-
onReloadPress:
|
|
284
|
+
onReloadPress: handleReloadPress,
|
|
260
285
|
url: item.url,
|
|
261
286
|
invisiblePaddingTop: index === 0 ? invisiblePaddingTop : 0,
|
|
262
287
|
width: ((_renderedDimensions$i = renderedDimensions[index]) === null || _renderedDimensions$i === void 0 ? void 0 : _renderedDimensions$i.width) ?? 0,
|
|
@@ -274,7 +299,7 @@ function ComicViewer(props) {
|
|
|
274
299
|
});
|
|
275
300
|
}
|
|
276
301
|
}, []);
|
|
277
|
-
return /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, _extends({
|
|
302
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, _extends({
|
|
278
303
|
data: itemStates,
|
|
279
304
|
getItemLayout: getItemLayout,
|
|
280
305
|
initialNumToRender: initialNumToRender,
|
|
@@ -283,8 +308,12 @@ function ComicViewer(props) {
|
|
|
283
308
|
ref: flatListRef,
|
|
284
309
|
renderItem: renderItem,
|
|
285
310
|
viewabilityConfig: viewabilityConfig,
|
|
286
|
-
windowSize: windowSize
|
|
287
|
-
|
|
311
|
+
windowSize: windowSize,
|
|
312
|
+
onScroll: handleScroll
|
|
313
|
+
}, otherProps)), /*#__PURE__*/_react.default.createElement(_FastScroll.default, _extends({}, fastScrollOptions, {
|
|
314
|
+
contentLength: totalHeight,
|
|
315
|
+
scrollContentToOffset: scrollContentToOffset
|
|
316
|
+
})));
|
|
288
317
|
}
|
|
289
318
|
|
|
290
319
|
;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["appender","left","right","getHeightAccum","heights","R","mapAccum","keyExtractor","item","String","index","createInitialImageState","dimension","isNewUrlIncoming","totalErrorCount","mapImageStateToItemState","imageState","autoHandleErrorCount","url","urlState","reloadButtonVisible","validity","mapIndexed","addIndex","map","MAXIMUM_WIDTH","NUMBER_OF_ADJACENT_ITEM","ComicViewer","props","debounceMillis","getUrlByIndex","initialNumToRender","initialScrollPercentage","itemVisiblePercentThreshold","intrinsicDimensions","maxContentWidth","onItemPress","viewportWidth","invisiblePaddingTop","windowSize","otherProps","flatListRef","useRef","maybeLoadableItemsIndexRange","actualImageWidth","Math","min","initialImageStates","useMemo","imageStatesRef","mapImageStatesToItemStates","imageStates","image","itemStates","setItemStates","useState","current","renderedDimensions","intrinsicDimension","width","height","layoutFromDimensions","useCallback","itemHeights","totalHeight","heightAccum","itemOffsets","prepend","getItemLayout","data","length","offset","viewabilityConfig","updateImageState","updateFunction","prevImageStates","newImageStates","prevItemStates","newItemStates","equals","loadUrlByIndex","indexes","filteredIndexes","filter","state","isNil","i","includes","urls","newUrl","get","undefined","e","loadMaybeLoadableItems","startIndex","endIndex","affectedIndexes","range","ignoreDebounce","loadItemsDebounce","useDebounce","onViewableItemsChanged","viewableItems","orderedViewableItems","sort","a","b","firstViewableIndex","head","lastViewableItemIndex","last","max","renderItem","onError","onReloadPress","onLoad","useEffect","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 { useDebounce } from '@fountain-ui/core';\nimport { default as ComicViewerProps, Dimension } from './ComicViewerProps';\nimport ViewerItem from './ViewerItem';\n\nconst appender = (left: number, right: number): [number, number] => [left + right, left + right];\nconst getHeightAccum = (heights: number[]): [number, number[]] => R.mapAccum(appender, 0, heights);\n\nconst keyExtractor = <T, >(item: ItemState) => String(item.index);\n\ninterface UrlState {\n url: string;\n validity: 'valid' | 'invalid' | 'unknown';\n}\n\ninterface ImageState {\n urlState?: UrlState;\n isNewUrlIncoming: boolean;\n totalErrorCount: number;\n dimension: Dimension;\n}\n\ninterface ItemState {\n index: number;\n url?: string;\n reloadButtonVisible: boolean;\n dimension: Dimension;\n}\n\nconst createInitialImageState = (dimension: Dimension): ImageState => ({\n isNewUrlIncoming: false,\n totalErrorCount: 0,\n dimension,\n});\n\nconst mapImageStateToItemState = (\n index: number,\n imageState: ImageState,\n autoHandleErrorCount: number,\n): ItemState => ({\n index,\n url: imageState.urlState?.url,\n reloadButtonVisible: (imageState.urlState?.validity !== 'valid') && imageState.totalErrorCount >= autoHandleErrorCount,\n dimension: imageState.dimension,\n});\n\nconst mapIndexed = R.addIndex<Dimension>(R.map);\n\nconst MAXIMUM_WIDTH = 720;\n\nconst NUMBER_OF_ADJACENT_ITEM = 5;\n\nexport default function ComicViewer(props: ComicViewerProps) {\n const {\n debounceMillis = 100,\n autoHandleErrorCount = 3,\n getUrlByIndex,\n initialNumToRender = 1,\n initialScrollPercentage = 0,\n itemVisiblePercentThreshold = 0,\n intrinsicDimensions,\n maxContentWidth = MAXIMUM_WIDTH,\n onItemPress,\n viewportWidth,\n invisiblePaddingTop = 0,\n windowSize = 3,\n ...otherProps\n } = props;\n\n const flatListRef = useRef<FlatList>(null);\n\n const maybeLoadableItemsIndexRange = useRef<[number, number]>([-1, 0]);\n\n const actualImageWidth = Math.min(viewportWidth, maxContentWidth);\n\n const initialImageStates = useMemo<Array<ImageState>>(() => R.map(createInitialImageState, intrinsicDimensions), []);\n const imageStatesRef = useRef<Array<ImageState>>(initialImageStates);\n\n const mapImageStatesToItemStates = (imageStates: Array<ImageState>): Array<ItemState> => {\n return imageStates.map((image, index) => mapImageStateToItemState(\n index, image, autoHandleErrorCount,\n ));\n };\n\n const [itemStates, setItemStates] = useState<Array<ItemState>>(() => {\n return mapImageStatesToItemStates(imageStatesRef.current);\n });\n\n const renderedDimensions = useMemo<Array<Dimension>>(() => {\n return mapIndexed((intrinsicDimension, index) => ({\n width: actualImageWidth,\n height: (intrinsicDimension.height * actualImageWidth) / intrinsicDimension.width + (index === 0 ? invisiblePaddingTop : 0),\n }), intrinsicDimensions);\n }, [actualImageWidth]);\n\n const layoutFromDimensions = useCallback(() => {\n const itemHeights = R.map(dimension => dimension.height, renderedDimensions);\n const [totalHeight, heightAccum] = getHeightAccum(itemHeights);\n const itemOffsets = R.prepend(0, heightAccum);\n\n const getItemLayout = (data: any, index: number) => ({\n index,\n length: itemHeights[index],\n offset: itemOffsets[index],\n });\n\n return {\n totalHeight,\n getItemLayout,\n };\n }, [renderedDimensions]);\n\n const { totalHeight, getItemLayout } = layoutFromDimensions();\n\n const viewabilityConfig = useMemo(() => ({\n itemVisiblePercentThreshold,\n }), [itemVisiblePercentThreshold]);\n\n const updateImageState = (updateFunction: (prev: ImageState, index: number) => ImageState) => {\n const prevImageStates = imageStatesRef.current;\n const newImageStates = prevImageStates.map(updateFunction);\n\n imageStatesRef.current = newImageStates;\n\n setItemStates(prevItemStates => {\n const newItemStates = mapImageStatesToItemStates(newImageStates);\n\n return R.equals(prevItemStates, newItemStates) ? prevItemStates : newItemStates;\n });\n };\n\n const loadUrlByIndex = async (indexes: number[]) => {\n const filteredIndexes = R.filter(index => {\n const state = imageStatesRef.current[index];\n\n return !state.isNewUrlIncoming\n && (R.isNil(state.urlState) || state.urlState?.validity === 'invalid');\n }, indexes);\n\n updateImageState((imageState, i) => {\n return R.includes(i, filteredIndexes)\n ? { ...imageState, isNewUrlIncoming: true }\n : imageState;\n });\n\n try {\n const urls = await getUrlByIndex(filteredIndexes);\n\n updateImageState((imageState, i) => {\n const newUrl = urls?.get(i);\n const urlState = imageState.urlState;\n\n if (newUrl !== undefined && urlState?.validity !== 'valid') {\n return {\n ...imageState,\n urlState: {\n url: newUrl,\n validity: 'unknown',\n },\n };\n }\n\n return imageState;\n });\n } catch (e) {\n // ignore\n } finally {\n updateImageState((imageState, i) => {\n return R.includes(i, filteredIndexes)\n ? { ...imageState, isNewUrlIncoming: false }\n : imageState;\n });\n }\n };\n\n const loadMaybeLoadableItems = () => {\n const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;\n const affectedIndexes = R.range(startIndex, endIndex);\n\n loadUrlByIndex(affectedIndexes);\n };\n\n const ignoreDebounce = useRef(true);\n const loadItemsDebounce = useDebounce(loadMaybeLoadableItems, debounceMillis);\n\n const onViewableItemsChanged = useRef(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {\n const orderedViewableItems = R.sort((a, b) => (a.index || 0) - (b.index || 0), viewableItems);\n\n const firstViewableIndex = R.head(orderedViewableItems)?.index;\n const lastViewableItemIndex = R.last(orderedViewableItems)?.index;\n\n if (R.isNil(firstViewableIndex) || R.isNil(lastViewableItemIndex)) {\n return;\n }\n\n const startIndex = R.max(firstViewableIndex - NUMBER_OF_ADJACENT_ITEM, 0);\n const endIndex = R.min(lastViewableItemIndex + NUMBER_OF_ADJACENT_ITEM, itemStates.length - 1);\n\n maybeLoadableItemsIndexRange.current = [startIndex, endIndex + 1];\n\n if (ignoreDebounce.current) {\n loadMaybeLoadableItems();\n\n ignoreDebounce.current = false;\n return;\n }\n\n loadItemsDebounce();\n });\n\n const renderItem: ListRenderItem<ItemState> = useCallback(({ item, index }) => {\n const onError = () => {\n updateImageState((imageState, i) => {\n const urlState = imageState.urlState;\n\n if (i === index && urlState !== undefined) {\n return {\n ...imageState,\n totalErrorCount: imageState.totalErrorCount + 1,\n urlState: {\n ...urlState,\n validity: 'invalid',\n },\n };\n }\n\n return imageState;\n });\n\n if (item.reloadButtonVisible) {\n return;\n }\n\n const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;\n if (index >= startIndex || index < endIndex) {\n loadItemsDebounce();\n }\n };\n\n const onReloadPress = () => {\n const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;\n if (index >= startIndex || index < endIndex) {\n loadUrlByIndex([index]);\n }\n };\n\n const onLoad = () => {\n updateImageState((imageState, i) => {\n const urlState = imageState.urlState;\n\n if (i === index && urlState !== undefined) {\n return {\n ...imageState,\n urlState: {\n ...urlState,\n validity: 'valid',\n },\n };\n }\n\n return imageState;\n });\n };\n\n return (\n <ViewerItem\n onError={onError}\n onLoad={onLoad}\n onPress={onItemPress}\n onReloadPress={onReloadPress}\n url={item.url}\n invisiblePaddingTop={index === 0 ? invisiblePaddingTop : 0}\n width={renderedDimensions[index]?.width ?? 0}\n height={renderedDimensions[index]?.height ?? 0}\n reloadButtonVisible={item.reloadButtonVisible}\n />\n );\n }, [onItemPress, renderedDimensions]);\n\n useEffect(() => {\n const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);\n\n if (flatListRef.current) {\n flatListRef.current.scrollToOffset({ offset, animated: false });\n }\n }, []);\n\n return (\n <FlatList\n data={itemStates}\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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"}
|
|
1
|
+
{"version":3,"names":["appender","left","right","getHeightAccum","heights","R","mapAccum","keyExtractor","item","String","index","createInitialImageState","dimension","isNewUrlIncoming","totalErrorCount","mapImageStateToItemState","imageState","autoHandleErrorCount","url","urlState","reloadButtonVisible","validity","mapIndexed","addIndex","map","MAXIMUM_WIDTH","NUMBER_OF_ADJACENT_ITEM","ComicViewer","props","debounceMillis","fastScrollOptions","getUrlByIndex","initialNumToRender","initialScrollPercentage","itemVisiblePercentThreshold","intrinsicDimensions","maxContentWidth","onItemPress","onScroll","onError","onReloadPress","viewportWidth","invisiblePaddingTop","windowSize","otherProps","fastScrollRef","ref","flatListRef","useRef","maybeLoadableItemsIndexRange","actualImageWidth","Math","min","initialImageStates","useMemo","imageStatesRef","mapImageStatesToItemStates","imageStates","image","itemStates","setItemStates","useState","current","renderedDimensions","intrinsicDimension","width","height","layoutFromDimensions","useCallback","itemHeights","totalHeight","heightAccum","itemOffsets","prepend","getItemLayout","data","length","offset","viewabilityConfig","updateImageState","updateFunction","prevImageStates","newImageStates","prevItemStates","newItemStates","equals","loadUrlByIndex","indexes","filteredIndexes","filter","state","isNil","i","includes","urls","newUrl","get","undefined","e","loadMaybeLoadableItems","startIndex","endIndex","affectedIndexes","range","ignoreDebounce","loadItemsDebounce","useDebounce","onViewableItemsChanged","viewableItems","orderedViewableItems","sort","a","b","firstViewableIndex","head","lastViewableItemIndex","last","max","handleScroll","event","onContentScroll","scrollContentToOffset","scrollToOffset","animated","renderItem","handleError","handleReloadPress","onLoad","useEffect","floor"],"sources":["ComicViewer.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { FlatList, ListRenderItem, NativeScrollEvent, NativeSyntheticEvent, ViewToken } from 'react-native';\nimport * as R from 'ramda';\nimport { useDebounce } from '@fountain-ui/core';\nimport { default as ComicViewerProps, Dimension } from './ComicViewerProps';\nimport ViewerItem from './ViewerItem';\nimport FastScroll from './FastScroll';\n\nconst appender = (left: number, right: number): [number, number] => [left + right, left + right];\nconst getHeightAccum = (heights: number[]): [number, number[]] => R.mapAccum(appender, 0, heights);\n\nconst keyExtractor = <T, >(item: ItemState) => String(item.index);\n\ninterface UrlState {\n url: string;\n validity: 'valid' | 'invalid' | 'unknown';\n}\n\ninterface ImageState {\n urlState?: UrlState;\n isNewUrlIncoming: boolean;\n totalErrorCount: number;\n dimension: Dimension;\n}\n\ninterface ItemState {\n index: number;\n url?: string;\n reloadButtonVisible: boolean;\n dimension: Dimension;\n}\n\nconst createInitialImageState = (dimension: Dimension): ImageState => ({\n isNewUrlIncoming: false,\n totalErrorCount: 0,\n dimension,\n});\n\nconst mapImageStateToItemState = (\n index: number,\n imageState: ImageState,\n autoHandleErrorCount: number,\n): ItemState => ({\n index,\n url: imageState.urlState?.url,\n reloadButtonVisible: (imageState.urlState?.validity !== 'valid') && imageState.totalErrorCount >= autoHandleErrorCount,\n dimension: imageState.dimension,\n});\n\nconst mapIndexed = R.addIndex<Dimension>(R.map);\n\nconst MAXIMUM_WIDTH = 720;\n\nconst NUMBER_OF_ADJACENT_ITEM = 5;\n\nexport default function ComicViewer(props: ComicViewerProps) {\n const {\n debounceMillis = 100,\n autoHandleErrorCount = 3,\n fastScrollOptions,\n getUrlByIndex,\n initialNumToRender = 1,\n initialScrollPercentage = 0,\n itemVisiblePercentThreshold = 0,\n intrinsicDimensions,\n maxContentWidth = MAXIMUM_WIDTH,\n onItemPress,\n onScroll,\n onError,\n onReloadPress,\n viewportWidth,\n invisiblePaddingTop = 0,\n windowSize = 3,\n ...otherProps\n } = props;\n\n const fastScrollRef = fastScrollOptions?.ref;\n\n const flatListRef = useRef<FlatList>(null);\n\n const maybeLoadableItemsIndexRange = useRef<[number, number]>([-1, 0]);\n\n const actualImageWidth = Math.min(viewportWidth, maxContentWidth);\n\n const initialImageStates = useMemo<Array<ImageState>>(() => R.map(createInitialImageState, intrinsicDimensions), []);\n const imageStatesRef = useRef<Array<ImageState>>(initialImageStates);\n\n const mapImageStatesToItemStates = (imageStates: Array<ImageState>): Array<ItemState> => {\n return imageStates.map((image, index) => mapImageStateToItemState(\n index, image, autoHandleErrorCount,\n ));\n };\n\n const [itemStates, setItemStates] = useState<Array<ItemState>>(() => {\n return mapImageStatesToItemStates(imageStatesRef.current);\n });\n\n const renderedDimensions = useMemo<Array<Dimension>>(() => {\n return mapIndexed((intrinsicDimension, index) => ({\n width: actualImageWidth,\n height: (intrinsicDimension.height * actualImageWidth) / intrinsicDimension.width + (index === 0 ? invisiblePaddingTop : 0),\n }), intrinsicDimensions);\n }, [actualImageWidth]);\n\n const layoutFromDimensions = useCallback(() => {\n const itemHeights = R.map(dimension => dimension.height, renderedDimensions);\n const [totalHeight, heightAccum] = getHeightAccum(itemHeights);\n const itemOffsets = R.prepend(0, heightAccum);\n\n const getItemLayout = (data: any, index: number) => ({\n index,\n length: itemHeights[index],\n offset: itemOffsets[index],\n });\n\n return {\n totalHeight,\n getItemLayout,\n };\n }, [renderedDimensions]);\n\n const { totalHeight, getItemLayout } = layoutFromDimensions();\n\n const viewabilityConfig = useMemo(() => ({\n itemVisiblePercentThreshold,\n }), [itemVisiblePercentThreshold]);\n\n const updateImageState = (updateFunction: (prev: ImageState, index: number) => ImageState) => {\n const prevImageStates = imageStatesRef.current;\n const newImageStates = prevImageStates.map(updateFunction);\n\n imageStatesRef.current = newImageStates;\n\n setItemStates(prevItemStates => {\n const newItemStates = mapImageStatesToItemStates(newImageStates);\n\n return R.equals(prevItemStates, newItemStates) ? prevItemStates : newItemStates;\n });\n };\n\n const loadUrlByIndex = async (indexes: number[]) => {\n const filteredIndexes = R.filter(index => {\n const state = imageStatesRef.current[index];\n\n return !state.isNewUrlIncoming\n && (R.isNil(state.urlState) || state.urlState?.validity === 'invalid');\n }, indexes);\n\n updateImageState((imageState, i) => {\n return R.includes(i, filteredIndexes)\n ? { ...imageState, isNewUrlIncoming: true }\n : imageState;\n });\n\n try {\n const urls = await getUrlByIndex(filteredIndexes);\n\n updateImageState((imageState, i) => {\n const newUrl = urls?.get(i);\n const urlState = imageState.urlState;\n\n if (newUrl !== undefined && urlState?.validity !== 'valid') {\n return {\n ...imageState,\n urlState: {\n url: newUrl,\n validity: 'unknown',\n },\n };\n }\n\n return imageState;\n });\n } catch (e) {\n // ignore\n } finally {\n updateImageState((imageState, i) => {\n return R.includes(i, filteredIndexes)\n ? { ...imageState, isNewUrlIncoming: false }\n : imageState;\n });\n }\n };\n\n const loadMaybeLoadableItems = () => {\n const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;\n const affectedIndexes = R.range(startIndex, endIndex);\n\n loadUrlByIndex(affectedIndexes);\n };\n\n const ignoreDebounce = useRef(true);\n const loadItemsDebounce = useDebounce(loadMaybeLoadableItems, debounceMillis);\n\n const onViewableItemsChanged = useRef(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {\n const orderedViewableItems = R.sort((a, b) => (a.index || 0) - (b.index || 0), viewableItems);\n\n const firstViewableIndex = R.head(orderedViewableItems)?.index;\n const lastViewableItemIndex = R.last(orderedViewableItems)?.index;\n\n if (R.isNil(firstViewableIndex) || R.isNil(lastViewableItemIndex)) {\n return;\n }\n\n const startIndex = R.max(firstViewableIndex - NUMBER_OF_ADJACENT_ITEM, 0);\n const endIndex = R.min(lastViewableItemIndex + NUMBER_OF_ADJACENT_ITEM, itemStates.length - 1);\n\n maybeLoadableItemsIndexRange.current = [startIndex, endIndex + 1];\n\n if (ignoreDebounce.current) {\n loadMaybeLoadableItems();\n\n ignoreDebounce.current = false;\n return;\n }\n\n loadItemsDebounce();\n });\n\n const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {\n fastScrollRef?.current?.onContentScroll(event);\n\n onScroll?.(event);\n }, [onScroll]);\n\n const scrollContentToOffset = (offset: number) => {\n flatListRef.current?.scrollToOffset({\n offset,\n animated: false,\n });\n };\n\n const renderItem: ListRenderItem<ItemState> = useCallback(({ item, index }) => {\n const handleError = () => {\n onError && onError();\n\n updateImageState((imageState, i) => {\n const urlState = imageState.urlState;\n\n if (i === index && urlState !== undefined) {\n return {\n ...imageState,\n totalErrorCount: imageState.totalErrorCount + 1,\n urlState: {\n ...urlState,\n validity: 'invalid',\n },\n };\n }\n\n return imageState;\n });\n\n if (item.reloadButtonVisible) {\n return;\n }\n\n const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;\n if (index >= startIndex || index < endIndex) {\n loadItemsDebounce();\n }\n };\n\n const handleReloadPress = () => {\n onReloadPress && onReloadPress();\n\n const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;\n if (index >= startIndex || index < endIndex) {\n loadUrlByIndex([index]);\n }\n };\n\n const onLoad = () => {\n updateImageState((imageState, i) => {\n const urlState = imageState.urlState;\n\n if (i === index && urlState !== undefined) {\n return {\n ...imageState,\n urlState: {\n ...urlState,\n validity: 'valid',\n },\n };\n }\n\n return imageState;\n });\n };\n\n return (\n <ViewerItem\n onError={handleError}\n onLoad={onLoad}\n onPress={onItemPress}\n onReloadPress={handleReloadPress}\n url={item.url}\n invisiblePaddingTop={index === 0 ? invisiblePaddingTop : 0}\n width={renderedDimensions[index]?.width ?? 0}\n height={renderedDimensions[index]?.height ?? 0}\n reloadButtonVisible={item.reloadButtonVisible}\n />\n );\n }, [onItemPress, renderedDimensions]);\n\n useEffect(() => {\n const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);\n\n if (flatListRef.current) {\n flatListRef.current.scrollToOffset({ offset, animated: false });\n }\n }, []);\n\n return (\n <React.Fragment>\n <FlatList\n data={itemStates}\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 onScroll={handleScroll}\n {...otherProps}\n />\n\n <FastScroll\n {...fastScrollOptions}\n contentLength={totalHeight}\n scrollContentToOffset={scrollContentToOffset}\n />\n </React.Fragment>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["ComicViewerProps.ts"],"sourcesContent":["import React from 'react';\nimport { ComponentProps } from '@fountain-ui/core';\nimport { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';\n\nexport interface Dimension {\n width: number;\n height: number;\n}\n\nexport default interface ComicViewerProps extends ComponentProps <{\n /**\n * Delay Time to call the error handler.\n * @default 100\n */\n debounceMillis?: number;\n\n /**\n * How many times handle onError directly when item error occur\n * @default 3\n */\n autoHandleErrorCount?: 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 * Dimensions of each Image considering viewport.\n */\n intrinsicDimensions: Array<Dimension>;\n\n /**\n * Need invisible paddingTop viewer vertically expanded.\n * @default 0\n */\n invisiblePaddingTop?: number;\n\n /**\n * Max value of contents image width size.\n * @default 720\n */\n maxContentWidth?: number;\n\n /**\n * Width of viewport.\n */\n viewportWidth: number;\n\n /**\n * The value for FlatList windowSize.\n * @default 3\n */\n windowSize?: number;\n\n /**\n * Get contents urls by indexes.\n */\n getUrlByIndex: (indexes: Array<number>) => Promise<Map<number, string> | undefined> ;\n\n /**\n * Handle scroll event.\n * @param event Scroll event.\n */\n onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\n\n /**\n * Handle item press event.\n */\n onItemPress?: () => void;\n\n /**\n * Component for comic viewer footer.\n */\n ListFooterComponent?: React.ReactElement;\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["ComicViewerProps.ts"],"sourcesContent":["import React from 'react';\nimport { ComponentProps } from '@fountain-ui/core';\nimport { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';\nimport { FastScrollOptions } from './FastScrollProps';\n\nexport interface Dimension {\n width: number;\n height: number;\n}\n\nexport default interface ComicViewerProps extends ComponentProps <{\n /**\n * Delay Time to call the error handler.\n * @default 100\n */\n debounceMillis?: number;\n\n /**\n * How many times handle onError directly when item error occur\n * @default 3\n */\n autoHandleErrorCount?: 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 * Dimensions of each Image considering viewport.\n */\n intrinsicDimensions: Array<Dimension>;\n\n /**\n * Need invisible paddingTop viewer vertically expanded.\n * @default 0\n */\n invisiblePaddingTop?: number;\n\n /**\n * Max value of contents image width size.\n * @default 720\n */\n maxContentWidth?: number;\n\n /**\n * Width of viewport.\n */\n viewportWidth: number;\n\n /**\n * The value for FlatList windowSize.\n * @default 3\n */\n windowSize?: number;\n\n /**\n * Options for fastscroll component.\n */\n fastScrollOptions: FastScrollOptions;\n\n /**\n * Get contents urls by indexes.\n */\n getUrlByIndex: (indexes: Array<number>) => Promise<Map<number, string> | undefined> ;\n\n /**\n * Handle scroll event.\n * @param event Scroll event.\n */\n onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\n\n /**\n * Handle item press event.\n */\n onItemPress?: () => void;\n\n /**\n * Handle image loading fail event.\n */\n onError?: () => void;\n\n /**\n * Handle reload button press event.\n */\n onReloadPress?: () => void;\n\n /**\n * Component for comic viewer footer.\n */\n ListFooterComponent?: React.ReactElement;\n}> {}\n"],"mappings":""}
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
12
|
+
var _reactNativeGestureHandler = require("react-native-gesture-handler");
|
|
13
|
+
|
|
14
|
+
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
15
|
+
|
|
16
|
+
var _icons = require("@fountain-ui/icons");
|
|
17
|
+
|
|
18
|
+
var _core = require("@fountain-ui/core");
|
|
19
|
+
|
|
20
|
+
var _util = require("./util");
|
|
21
|
+
|
|
22
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
|
+
|
|
24
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
+
|
|
26
|
+
const styles = _core.StyleSheet.create({
|
|
27
|
+
indicator: {
|
|
28
|
+
width: 24,
|
|
29
|
+
height: 40,
|
|
30
|
+
backgroundColor: '#767676',
|
|
31
|
+
flexDirection: 'column',
|
|
32
|
+
alignItems: 'center',
|
|
33
|
+
borderRadius: 4
|
|
34
|
+
},
|
|
35
|
+
view: {
|
|
36
|
+
position: 'absolute'
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
const FastScroll = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
41
|
+
const {
|
|
42
|
+
absolutePosition,
|
|
43
|
+
additionalLength = 0,
|
|
44
|
+
contentLength,
|
|
45
|
+
movementRange,
|
|
46
|
+
scrollContentToOffset,
|
|
47
|
+
visibleDurations = {
|
|
48
|
+
hideMillis: 200,
|
|
49
|
+
showMillis: 350
|
|
50
|
+
}
|
|
51
|
+
} = props;
|
|
52
|
+
const lastIndicatorOffset = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
53
|
+
const indicatorOffset = (0, _reactNativeReanimated.useSharedValue)(lastIndicatorOffset.value);
|
|
54
|
+
const isIndicatorDragging = (0, _react.useRef)(false);
|
|
55
|
+
const indicatorOpacity = (0, _reactNativeReanimated.useSharedValue)(1);
|
|
56
|
+
const [visible, setVisible] = (0, _react.useState)(true);
|
|
57
|
+
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
58
|
+
transform: [{
|
|
59
|
+
translateY: indicatorOffset.value
|
|
60
|
+
}],
|
|
61
|
+
opacity: indicatorOpacity.value
|
|
62
|
+
}));
|
|
63
|
+
const totalContentLength = contentLength + additionalLength;
|
|
64
|
+
|
|
65
|
+
const onContentScroll = event => {
|
|
66
|
+
if (isIndicatorDragging.current === false) {
|
|
67
|
+
const contentPercentage = (0, _util.offsetToPercentage)(event.nativeEvent.contentOffset.y, totalContentLength);
|
|
68
|
+
const offset = (0, _util.percentageToOffset)(contentPercentage, movementRange);
|
|
69
|
+
|
|
70
|
+
if (offset < 0 || indicatorOffset.value < 0) {
|
|
71
|
+
lastIndicatorOffset.value = 0;
|
|
72
|
+
indicatorOffset.value = 0;
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
if (offset > movementRange || indicatorOffset.value > movementRange) {
|
|
77
|
+
lastIndicatorOffset.value = movementRange;
|
|
78
|
+
indicatorOffset.value = movementRange;
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
lastIndicatorOffset.value = offset;
|
|
83
|
+
} else {
|
|
84
|
+
setVisible(true);
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
const getIsIndicatorDragging = () => isIndicatorDragging.current;
|
|
89
|
+
|
|
90
|
+
(0, _react.useImperativeHandle)(ref, () => ({
|
|
91
|
+
getIsIndicatorDragging,
|
|
92
|
+
onContentScroll,
|
|
93
|
+
setVisible
|
|
94
|
+
}), []);
|
|
95
|
+
|
|
96
|
+
const handleUpdate = () => {
|
|
97
|
+
const contentPercentage = (0, _util.offsetToPercentage)(indicatorOffset.value, movementRange);
|
|
98
|
+
const offset = (0, _util.percentageToOffset)(contentPercentage, totalContentLength);
|
|
99
|
+
scrollContentToOffset(offset);
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
const setIsIndicatorDragging = value => isIndicatorDragging.current = value;
|
|
103
|
+
|
|
104
|
+
const pan = _reactNativeGestureHandler.Gesture.Pan().onBegin(e => {
|
|
105
|
+
indicatorOffset.value = lastIndicatorOffset.value;
|
|
106
|
+
(0, _reactNativeReanimated.runOnJS)(setIsIndicatorDragging)(true);
|
|
107
|
+
}).onUpdate(e => {
|
|
108
|
+
if (indicatorOffset.value <= 0 && e.translationY < 0) {
|
|
109
|
+
indicatorOffset.value = 0;
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
if (indicatorOffset.value >= movementRange && e.translationY > 0) {
|
|
114
|
+
indicatorOffset.value = movementRange;
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
indicatorOffset.value = lastIndicatorOffset.value + e.translationY;
|
|
119
|
+
(0, _reactNativeReanimated.runOnJS)(handleUpdate)();
|
|
120
|
+
}).onFinalize(e => {
|
|
121
|
+
lastIndicatorOffset.value = indicatorOffset.value;
|
|
122
|
+
(0, _reactNativeReanimated.runOnJS)(setIsIndicatorDragging)(false);
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
const hide = () => indicatorOpacity.value = (0, _reactNativeReanimated.withDelay)(0, (0, _reactNativeReanimated.withTiming)(0, {
|
|
126
|
+
duration: visibleDurations.hideMillis
|
|
127
|
+
}));
|
|
128
|
+
|
|
129
|
+
const show = () => indicatorOpacity.value = (0, _reactNativeReanimated.withDelay)(0, (0, _reactNativeReanimated.withTiming)(1, {
|
|
130
|
+
duration: visibleDurations.showMillis
|
|
131
|
+
}));
|
|
132
|
+
|
|
133
|
+
(0, _react.useEffect)(() => {
|
|
134
|
+
if (visible) {
|
|
135
|
+
indicatorOffset.value = lastIndicatorOffset.value;
|
|
136
|
+
show();
|
|
137
|
+
} else {
|
|
138
|
+
hide();
|
|
139
|
+
}
|
|
140
|
+
}, [visible]);
|
|
141
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
142
|
+
style: [{
|
|
143
|
+
height: movementRange
|
|
144
|
+
}, styles.view, absolutePosition]
|
|
145
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.GestureDetector, {
|
|
146
|
+
gesture: pan
|
|
147
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
148
|
+
style: [animatedStyle, styles.indicator]
|
|
149
|
+
}, /*#__PURE__*/_react.default.createElement(_icons.ChevronUp, {
|
|
150
|
+
fill: '#ededed',
|
|
151
|
+
height: 20,
|
|
152
|
+
width: 20
|
|
153
|
+
}), /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, {
|
|
154
|
+
fill: '#ededed',
|
|
155
|
+
height: 20,
|
|
156
|
+
width: 20
|
|
157
|
+
}))));
|
|
158
|
+
});
|
|
159
|
+
|
|
160
|
+
var _default = FastScroll;
|
|
161
|
+
exports.default = _default;
|
|
162
|
+
//# sourceMappingURL=FastScroll.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","indicator","width","height","backgroundColor","flexDirection","alignItems","borderRadius","view","position","FastScroll","React","forwardRef","props","ref","absolutePosition","additionalLength","contentLength","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","lastIndicatorOffset","useSharedValue","indicatorOffset","value","isIndicatorDragging","useRef","indicatorOpacity","visible","setVisible","useState","animatedStyle","useAnimatedStyle","transform","translateY","opacity","totalContentLength","onContentScroll","event","current","contentPercentage","offsetToPercentage","nativeEvent","contentOffset","y","offset","percentageToOffset","getIsIndicatorDragging","useImperativeHandle","handleUpdate","setIsIndicatorDragging","pan","Gesture","Pan","onBegin","e","runOnJS","onUpdate","translationY","onFinalize","hide","withDelay","withTiming","duration","show","useEffect"],"sources":["FastScroll.tsx"],"sourcesContent":["import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { NativeScrollEvent, NativeSyntheticEvent, View } from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';\nimport { ChevronDown, ChevronUp } from '@fountain-ui/icons';\nimport { StyleSheet } from '@fountain-ui/core';\nimport FastScrollProps from './FastScrollProps';\nimport { offsetToPercentage, percentageToOffset } from './util';\n\nconst styles = StyleSheet.create({\n indicator: {\n width: 24,\n height: 40,\n backgroundColor: '#767676',\n flexDirection: 'column',\n alignItems: 'center',\n borderRadius: 4,\n },\n view: { position: 'absolute' },\n});\n\nconst FastScroll = React.forwardRef((props: FastScrollProps, ref) => {\n const {\n absolutePosition,\n additionalLength = 0,\n contentLength,\n movementRange,\n scrollContentToOffset,\n visibleDurations = { hideMillis: 200, showMillis: 350 },\n } = props;\n\n const lastIndicatorOffset = useSharedValue(0);\n const indicatorOffset = useSharedValue(lastIndicatorOffset.value);\n\n const isIndicatorDragging = useRef(false);\n\n const indicatorOpacity = useSharedValue(1);\n const [visible, setVisible] = useState(true);\n\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ translateY: indicatorOffset.value }],\n opacity: indicatorOpacity.value,\n }));\n\n const totalContentLength = contentLength + additionalLength;\n\n const onContentScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n if (isIndicatorDragging.current === false) {\n const contentPercentage = offsetToPercentage(event.nativeEvent.contentOffset.y, totalContentLength);\n const offset = percentageToOffset(contentPercentage, movementRange);\n\n if (offset < 0 || indicatorOffset.value < 0) {\n lastIndicatorOffset.value = 0;\n indicatorOffset.value = 0;\n return;\n }\n\n if (offset > movementRange || indicatorOffset.value > movementRange) {\n lastIndicatorOffset.value = movementRange;\n indicatorOffset.value = movementRange;\n return;\n }\n\n lastIndicatorOffset.value = offset;\n } else {\n setVisible(true);\n }\n };\n\n const getIsIndicatorDragging = () => isIndicatorDragging.current;\n\n useImperativeHandle(\n ref,\n () => ({\n getIsIndicatorDragging,\n onContentScroll,\n setVisible,\n }),\n [],\n );\n\n const handleUpdate = () => {\n const contentPercentage = offsetToPercentage(indicatorOffset.value, movementRange);\n const offset = percentageToOffset(contentPercentage, totalContentLength);\n\n scrollContentToOffset(offset);\n };\n\n const setIsIndicatorDragging = (value: boolean) => isIndicatorDragging.current = value;\n\n const pan = Gesture.Pan()\n .onBegin((e) => {\n indicatorOffset.value = lastIndicatorOffset.value;\n runOnJS(setIsIndicatorDragging)(true);\n })\n .onUpdate((e) => {\n if (indicatorOffset.value <= 0 && e.translationY < 0) {\n indicatorOffset.value = 0;\n return;\n }\n\n if (indicatorOffset.value >= movementRange && e.translationY > 0) {\n indicatorOffset.value = movementRange;\n return;\n }\n\n indicatorOffset.value = lastIndicatorOffset.value + e.translationY;\n\n runOnJS(handleUpdate)();\n })\n .onFinalize((e) => {\n lastIndicatorOffset.value = indicatorOffset.value;\n runOnJS(setIsIndicatorDragging)(false);\n });\n\n const hide = () => indicatorOpacity.value = withDelay(0, withTiming(0, { duration: visibleDurations.hideMillis }));\n\n const show = () => indicatorOpacity.value = withDelay(0, withTiming(1, { duration: visibleDurations.showMillis }));\n\n useEffect(() => {\n if (visible) {\n indicatorOffset.value = lastIndicatorOffset.value;\n show();\n } else {\n hide();\n }\n }, [visible]);\n\n return (\n <View\n style={[\n { height: movementRange },\n styles.view,\n absolutePosition,\n ]}\n >\n <GestureDetector gesture={pan}>\n <Animated.View style={[\n animatedStyle,\n styles.indicator,\n ]}>\n <ChevronUp\n fill={'#ededed'}\n height={20}\n width={20}\n />\n <ChevronDown\n fill={'#ededed'}\n height={20}\n width={20}\n />\n </Animated.View>\n </GestureDetector>\n </View>\n );\n});\n\nexport default FastScroll;"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["FastScrollProps.ts"],"sourcesContent":["import React from 'react';\nimport { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';\nimport type { RefObject } from 'react';\n\n/**\n * Position infos with display: 'position'.\n */\nexport type AbsolutePosition = {\n top: number;\n bottom: number;\n right: number;\n left: number;\n};\n\n/**\n * Durations(millis) for show, hide animation.\n */\nexport type VisibleDurations = {\n hideMillis: number;\n showMillis: number;\n}\n\nexport interface FastScrollInstance {\n /**\n * Handle content scroll event, not using fast scroll indicator.\n * @param event Function onScroll event params.\n */\n onContentScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\n\n /**\n * Set indicator visible state.\n */\n setVisible: React.Dispatch<React.SetStateAction<boolean>>;\n\n /**\n * Return true, if pan gesture state is begin to finalize.\n */\n getIsIndicatorDragging: () => boolean,\n}\n\nexport interface FastScrollOptions {\n /**\n * Ref for React.forwardRef.\n */\n ref: RefObject<FastScrollInstance>;\n\n /**\n * Range within which the indicator can move.\n */\n movementRange: number;\n\n /**\n * Scrollbar positions for 'display: position'.\n */\n absolutePosition?: Partial<AbsolutePosition>;\n\n /**\n * Durations(millis) for show, hide animation.\n * @default { hide: 200, show: 350 }\n */\n visibleDurations?: VisibleDurations;\n\n /**\n * Additional height except contentLength.\n * @default 0\n */\n additionalLength?: number;\n}\n\ninterface FastScrollProps extends FastScrollOptions {\n /**\n * Total length of scrollable content.\n */\n contentLength: number;\n\n /**\n * Scroll content to offset appropriate for the indicator location.\n * @param offset Content offset.\n */\n scrollContentToOffset: (offset: number) => void;\n}\n\nexport default FastScrollProps;\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './ComicViewer';\nexport type { Dimension, default as ComicViewerProps } from './ComicViewerProps';\nexport type { ViewerItemProps } from './ViewerItem';\n"],"mappings":";;;;;;;;;;;;AAAA"}
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './ComicViewer';\nexport type { Dimension, default as ComicViewerProps } from './ComicViewerProps';\nexport type { ViewerItemProps } from './ViewerItem';\nexport type {\n AbsolutePosition,\n FastScrollInstance,\n FastScrollOptions,\n VisibleDurations,\n} from './FastScrollProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.percentageToOffset = exports.offsetToPercentage = void 0;
|
|
7
|
+
|
|
8
|
+
const offsetToPercentage = (offset, total) => {
|
|
9
|
+
if (offset === 0 || total === 0) {
|
|
10
|
+
return 0;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
return offset / total * 100;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
exports.offsetToPercentage = offsetToPercentage;
|
|
17
|
+
|
|
18
|
+
const percentageToOffset = (percentage, total) => {
|
|
19
|
+
if (percentage === 0 || total === 0) {
|
|
20
|
+
return 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
return percentage / 100 * total;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
exports.percentageToOffset = percentageToOffset;
|
|
27
|
+
//# sourceMappingURL=util.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["offsetToPercentage","offset","total","percentageToOffset","percentage"],"sources":["util.ts"],"sourcesContent":["export const offsetToPercentage = (offset: number, total: number) => {\n if (offset === 0 || total === 0) {\n return 0;\n }\n\n return offset / total * 100;\n};\n\nexport const percentageToOffset = (percentage: number, total: number) => {\n if (percentage === 0 || total === 0) {\n return 0;\n }\n\n return percentage / 100 * total;\n};\n"],"mappings":";;;;;;;AAAO,MAAMA,kBAAkB,GAAG,CAACC,MAAD,EAAiBC,KAAjB,KAAmC;EACjE,IAAID,MAAM,KAAK,CAAX,IAAgBC,KAAK,KAAK,CAA9B,EAAiC;IAC7B,OAAO,CAAP;EACH;;EAED,OAAOD,MAAM,GAAGC,KAAT,GAAiB,GAAxB;AACH,CANM;;;;AAQA,MAAMC,kBAAkB,GAAG,CAACC,UAAD,EAAqBF,KAArB,KAAuC;EACrE,IAAIE,UAAU,KAAK,CAAf,IAAoBF,KAAK,KAAK,CAAlC,EAAqC;IACjC,OAAO,CAAP;EACH;;EAED,OAAOE,UAAU,GAAG,GAAb,GAAmBF,KAA1B;AACH,CANM"}
|
|
@@ -5,6 +5,7 @@ import { FlatList } from 'react-native';
|
|
|
5
5
|
import * as R from 'ramda';
|
|
6
6
|
import { useDebounce } from '@fountain-ui/core';
|
|
7
7
|
import ViewerItem from './ViewerItem';
|
|
8
|
+
import FastScroll from './FastScroll';
|
|
8
9
|
|
|
9
10
|
const appender = (left, right) => [left + right, left + right];
|
|
10
11
|
|
|
@@ -36,6 +37,7 @@ export default function ComicViewer(props) {
|
|
|
36
37
|
const {
|
|
37
38
|
debounceMillis = 100,
|
|
38
39
|
autoHandleErrorCount = 3,
|
|
40
|
+
fastScrollOptions,
|
|
39
41
|
getUrlByIndex,
|
|
40
42
|
initialNumToRender = 1,
|
|
41
43
|
initialScrollPercentage = 0,
|
|
@@ -43,11 +45,15 @@ export default function ComicViewer(props) {
|
|
|
43
45
|
intrinsicDimensions,
|
|
44
46
|
maxContentWidth = MAXIMUM_WIDTH,
|
|
45
47
|
onItemPress,
|
|
48
|
+
onScroll,
|
|
49
|
+
onError,
|
|
50
|
+
onReloadPress,
|
|
46
51
|
viewportWidth,
|
|
47
52
|
invisiblePaddingTop = 0,
|
|
48
53
|
windowSize = 3,
|
|
49
54
|
...otherProps
|
|
50
55
|
} = props;
|
|
56
|
+
const fastScrollRef = fastScrollOptions === null || fastScrollOptions === void 0 ? void 0 : fastScrollOptions.ref;
|
|
51
57
|
const flatListRef = useRef(null);
|
|
52
58
|
const maybeLoadableItemsIndexRange = useRef([-1, 0]);
|
|
53
59
|
const actualImageWidth = Math.min(viewportWidth, maxContentWidth);
|
|
@@ -175,6 +181,22 @@ export default function ComicViewer(props) {
|
|
|
175
181
|
|
|
176
182
|
loadItemsDebounce();
|
|
177
183
|
});
|
|
184
|
+
const handleScroll = useCallback(event => {
|
|
185
|
+
var _fastScrollRef$curren;
|
|
186
|
+
|
|
187
|
+
fastScrollRef === null || fastScrollRef === void 0 ? void 0 : (_fastScrollRef$curren = fastScrollRef.current) === null || _fastScrollRef$curren === void 0 ? void 0 : _fastScrollRef$curren.onContentScroll(event);
|
|
188
|
+
onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
|
|
189
|
+
}, [onScroll]);
|
|
190
|
+
|
|
191
|
+
const scrollContentToOffset = offset => {
|
|
192
|
+
var _flatListRef$current;
|
|
193
|
+
|
|
194
|
+
(_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToOffset({
|
|
195
|
+
offset,
|
|
196
|
+
animated: false
|
|
197
|
+
});
|
|
198
|
+
};
|
|
199
|
+
|
|
178
200
|
const renderItem = useCallback(_ref2 => {
|
|
179
201
|
var _renderedDimensions$i, _renderedDimensions$i2;
|
|
180
202
|
|
|
@@ -183,7 +205,8 @@ export default function ComicViewer(props) {
|
|
|
183
205
|
index
|
|
184
206
|
} = _ref2;
|
|
185
207
|
|
|
186
|
-
const
|
|
208
|
+
const handleError = () => {
|
|
209
|
+
onError && onError();
|
|
187
210
|
updateImageState((imageState, i) => {
|
|
188
211
|
const urlState = imageState.urlState;
|
|
189
212
|
|
|
@@ -210,7 +233,8 @@ export default function ComicViewer(props) {
|
|
|
210
233
|
}
|
|
211
234
|
};
|
|
212
235
|
|
|
213
|
-
const
|
|
236
|
+
const handleReloadPress = () => {
|
|
237
|
+
onReloadPress && onReloadPress();
|
|
214
238
|
const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;
|
|
215
239
|
|
|
216
240
|
if (index >= startIndex || index < endIndex) {
|
|
@@ -235,10 +259,10 @@ export default function ComicViewer(props) {
|
|
|
235
259
|
};
|
|
236
260
|
|
|
237
261
|
return /*#__PURE__*/React.createElement(ViewerItem, {
|
|
238
|
-
onError:
|
|
262
|
+
onError: handleError,
|
|
239
263
|
onLoad: onLoad,
|
|
240
264
|
onPress: onItemPress,
|
|
241
|
-
onReloadPress:
|
|
265
|
+
onReloadPress: handleReloadPress,
|
|
242
266
|
url: item.url,
|
|
243
267
|
invisiblePaddingTop: index === 0 ? invisiblePaddingTop : 0,
|
|
244
268
|
width: ((_renderedDimensions$i = renderedDimensions[index]) === null || _renderedDimensions$i === void 0 ? void 0 : _renderedDimensions$i.width) ?? 0,
|
|
@@ -256,7 +280,7 @@ export default function ComicViewer(props) {
|
|
|
256
280
|
});
|
|
257
281
|
}
|
|
258
282
|
}, []);
|
|
259
|
-
return /*#__PURE__*/React.createElement(FlatList, _extends({
|
|
283
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FlatList, _extends({
|
|
260
284
|
data: itemStates,
|
|
261
285
|
getItemLayout: getItemLayout,
|
|
262
286
|
initialNumToRender: initialNumToRender,
|
|
@@ -265,8 +289,12 @@ export default function ComicViewer(props) {
|
|
|
265
289
|
ref: flatListRef,
|
|
266
290
|
renderItem: renderItem,
|
|
267
291
|
viewabilityConfig: viewabilityConfig,
|
|
268
|
-
windowSize: windowSize
|
|
269
|
-
|
|
292
|
+
windowSize: windowSize,
|
|
293
|
+
onScroll: handleScroll
|
|
294
|
+
}, otherProps)), /*#__PURE__*/React.createElement(FastScroll, _extends({}, fastScrollOptions, {
|
|
295
|
+
contentLength: totalHeight,
|
|
296
|
+
scrollContentToOffset: scrollContentToOffset
|
|
297
|
+
})));
|
|
270
298
|
}
|
|
271
299
|
;
|
|
272
300
|
//# sourceMappingURL=ComicViewer.js.map
|