@fountain-ui/lab 1.21.1 → 2.0.0-beta.11
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/AnimatedY/AnimatedY.js +10 -14
- package/build/commonjs/AnimatedY/AnimatedY.js.map +1 -1
- package/build/commonjs/AnimatedY/AnimatedYProps.js.map +1 -1
- package/build/commonjs/AnimatedY/index.js.map +1 -1
- package/build/commonjs/BottomSheet/BottomSheetNative.js +8 -2
- package/build/commonjs/BottomSheet/BottomSheetNative.js.map +1 -1
- package/build/commonjs/BottomSheet/BottomSheetProps.js.map +1 -1
- package/build/commonjs/BottomSheet/BottomSheetWeb.js +2 -6
- package/build/commonjs/BottomSheet/BottomSheetWeb.js.map +1 -1
- package/build/commonjs/BottomSheet/TransparentBackdrop.js +1 -1
- package/build/commonjs/BottomSheet/TransparentBackdrop.js.map +1 -1
- package/build/commonjs/BottomSheet/index.js.map +1 -1
- package/build/commonjs/BottomSheet/index.native.js.map +1 -1
- package/build/commonjs/Carousel/CarouselNative.js.map +1 -1
- package/build/commonjs/Carousel/CarouselProps.js.map +1 -1
- package/build/commonjs/Carousel/CarouselWeb.js +1 -1
- package/build/commonjs/Carousel/CarouselWeb.js.map +1 -1
- package/build/commonjs/Carousel/index.js.map +1 -1
- package/build/commonjs/Carousel/index.native.js.map +1 -1
- package/build/commonjs/Carousel/utils.js +1 -1
- package/build/commonjs/Carousel/utils.js.map +1 -1
- package/build/commonjs/ComicViewer/ComicViewer.js +168 -0
- package/build/commonjs/ComicViewer/ComicViewer.js.map +1 -0
- package/build/commonjs/ComicViewer/ComicViewerItemProps.js +6 -0
- package/build/commonjs/ComicViewer/ComicViewerItemProps.js.map +1 -0
- package/build/commonjs/ComicViewer/ComicViewerProps.js +2 -0
- package/build/commonjs/ComicViewer/ComicViewerProps.js.map +1 -0
- package/build/commonjs/ComicViewer/ViewerItem.js +88 -0
- package/build/commonjs/ComicViewer/ViewerItem.js.map +1 -0
- package/build/commonjs/ComicViewer/index.js +16 -0
- package/build/commonjs/ComicViewer/index.js.map +1 -0
- package/build/commonjs/DateTimePicker/DateTimePicker.js +7 -1
- package/build/commonjs/DateTimePicker/DateTimePicker.js.map +1 -1
- package/build/commonjs/DateTimePicker/DateTimePickerProps.js.map +1 -1
- package/build/commonjs/DateTimePicker/DateTimePickerProvider.js.map +1 -1
- package/build/commonjs/DateTimePicker/YearPicker.js +22 -17
- package/build/commonjs/DateTimePicker/YearPicker.js.map +1 -1
- package/build/commonjs/DateTimePicker/index.js +4 -4
- package/build/commonjs/DateTimePicker/index.js.map +1 -1
- package/build/commonjs/DateTimePicker/utils.js +2 -1
- package/build/commonjs/DateTimePicker/utils.js.map +1 -1
- package/build/commonjs/FlipCard/FlipCard.js +7 -13
- package/build/commonjs/FlipCard/FlipCard.js.map +1 -1
- package/build/commonjs/FlipCard/FlipCardProps.js.map +1 -1
- package/build/commonjs/FlipCard/index.js.map +1 -1
- package/build/commonjs/StatusBarProvider/Provider.js +1 -1
- package/build/commonjs/StatusBarProvider/Provider.js.map +1 -1
- package/build/commonjs/StatusBarProvider/StatusBarProvider.js.map +1 -1
- package/build/commonjs/StatusBarProvider/StatusBarProviderProps.js.map +1 -1
- package/build/commonjs/StatusBarProvider/index.js.map +1 -1
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js +90 -22
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerNative.js +46 -36
- package/build/commonjs/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerWeb.js +32 -25
- package/build/commonjs/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/commonjs/ViewPager/index.js.map +1 -1
- package/build/commonjs/ViewPager/index.native.js.map +1 -1
- package/build/commonjs/ViewPager/utils.js +3 -39
- package/build/commonjs/ViewPager/utils.js.map +1 -1
- package/build/commonjs/hooks/index.js.map +1 -1
- package/build/commonjs/hooks/useAppbarStyles.js.map +1 -1
- package/build/commonjs/hooks/useElevationStyle.js.map +1 -1
- package/build/commonjs/hooks/useHeight.js +5 -4
- package/build/commonjs/hooks/useHeight.js.map +1 -1
- package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js +56 -57
- package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
- package/build/commonjs/hooks/useUnstableToggleDisplayStyle.js +9 -11
- package/build/commonjs/hooks/useUnstableToggleDisplayStyle.js.map +1 -1
- package/build/commonjs/index.js +25 -4
- package/build/commonjs/index.js.map +1 -1
- package/build/module/AnimatedY/AnimatedY.js +11 -10
- package/build/module/AnimatedY/AnimatedY.js.map +1 -1
- package/build/module/AnimatedY/AnimatedYProps.js.map +1 -1
- package/build/module/AnimatedY/index.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetNative.js +8 -2
- package/build/module/BottomSheet/BottomSheetNative.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetProps.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetWeb.js +2 -6
- package/build/module/BottomSheet/BottomSheetWeb.js.map +1 -1
- package/build/module/BottomSheet/TransparentBackdrop.js +1 -1
- package/build/module/BottomSheet/TransparentBackdrop.js.map +1 -1
- package/build/module/BottomSheet/index.js.map +1 -1
- package/build/module/BottomSheet/index.native.js.map +1 -1
- package/build/module/Carousel/CarouselNative.js.map +1 -1
- package/build/module/Carousel/CarouselProps.js.map +1 -1
- package/build/module/Carousel/CarouselWeb.js +1 -1
- package/build/module/Carousel/CarouselWeb.js.map +1 -1
- package/build/module/Carousel/index.js.map +1 -1
- package/build/module/Carousel/index.native.js.map +1 -1
- package/build/module/Carousel/utils.js.map +1 -1
- package/build/module/ComicViewer/ComicViewer.js +151 -0
- package/build/module/ComicViewer/ComicViewer.js.map +1 -0
- package/build/module/ComicViewer/ComicViewerItemProps.js +2 -0
- package/build/module/ComicViewer/ComicViewerItemProps.js.map +1 -0
- package/build/module/ComicViewer/ComicViewerProps.js +2 -0
- package/build/module/ComicViewer/ComicViewerProps.js.map +1 -0
- package/build/module/ComicViewer/ViewerItem.js +72 -0
- package/build/module/ComicViewer/ViewerItem.js.map +1 -0
- package/build/module/ComicViewer/index.js +2 -0
- package/build/module/ComicViewer/index.js.map +1 -0
- package/build/module/DateTimePicker/DateTimePicker.js +7 -1
- package/build/module/DateTimePicker/DateTimePicker.js.map +1 -1
- package/build/module/DateTimePicker/DateTimePickerProps.js.map +1 -1
- package/build/module/DateTimePicker/DateTimePickerProvider.js.map +1 -1
- package/build/module/DateTimePicker/YearPicker.js +22 -17
- package/build/module/DateTimePicker/YearPicker.js.map +1 -1
- package/build/module/DateTimePicker/index.js.map +1 -1
- package/build/module/DateTimePicker/utils.js +2 -1
- package/build/module/DateTimePicker/utils.js.map +1 -1
- package/build/module/FlipCard/FlipCard.js +7 -7
- package/build/module/FlipCard/FlipCard.js.map +1 -1
- package/build/module/FlipCard/FlipCardProps.js.map +1 -1
- package/build/module/FlipCard/index.js.map +1 -1
- package/build/module/StatusBarProvider/Provider.js.map +1 -1
- package/build/module/StatusBarProvider/StatusBarProvider.js.map +1 -1
- package/build/module/StatusBarProvider/StatusBarProviderProps.js.map +1 -1
- package/build/module/StatusBarProvider/index.js.map +1 -1
- package/build/module/ViewPager/ChildrenMemoizedPage.js +85 -23
- package/build/module/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/module/ViewPager/ViewPagerNative.js +43 -32
- package/build/module/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/module/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/module/ViewPager/ViewPagerWeb.js +26 -23
- package/build/module/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/module/ViewPager/index.js.map +1 -1
- package/build/module/ViewPager/index.native.js.map +1 -1
- package/build/module/ViewPager/utils.js +1 -31
- package/build/module/ViewPager/utils.js.map +1 -1
- package/build/module/hooks/index.js.map +1 -1
- package/build/module/hooks/useAppbarStyles.js.map +1 -1
- package/build/module/hooks/useElevationStyle.js.map +1 -1
- package/build/module/hooks/useHeight.js +4 -3
- package/build/module/hooks/useHeight.js.map +1 -1
- package/build/module/hooks/useUnstableCollapsibleAppBar.js +58 -43
- package/build/module/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
- package/build/module/hooks/useUnstableToggleDisplayStyle.js +9 -7
- package/build/module/hooks/useUnstableToggleDisplayStyle.js.map +1 -1
- package/build/module/index.js +2 -0
- package/build/module/index.js.map +1 -1
- package/build/typescript/AnimatedY/AnimatedY.d.ts +0 -1
- package/build/typescript/BottomSheet/BottomSheetNative.d.ts +0 -1
- package/build/typescript/BottomSheet/BottomSheetWeb.d.ts +0 -1
- package/build/typescript/BottomSheet/TransparentBackdrop.d.ts +0 -1
- package/build/typescript/Carousel/CarouselNative.d.ts +0 -1
- package/build/typescript/ComicViewer/ComicViewer.d.ts +2 -0
- package/build/typescript/ComicViewer/ComicViewerItemProps.d.ts +12 -0
- package/build/typescript/ComicViewer/ComicViewerProps.d.ts +76 -0
- package/build/typescript/ComicViewer/ViewerItem.d.ts +7 -0
- package/build/typescript/ComicViewer/index.d.ts +3 -0
- package/build/typescript/DateTimePicker/DateTimePicker.d.ts +0 -1
- package/build/typescript/DateTimePicker/YearPicker.d.ts +0 -1
- package/build/typescript/FlipCard/FlipCard.d.ts +0 -1
- package/build/typescript/StatusBarProvider/StatusBarProvider.d.ts +0 -1
- package/build/typescript/ViewPager/ChildrenMemoizedPage.d.ts +2 -1
- package/build/typescript/ViewPager/ViewPagerNative.d.ts +4 -2
- package/build/typescript/ViewPager/ViewPagerProps.d.ts +20 -19
- package/build/typescript/ViewPager/ViewPagerWeb.d.ts +4 -2
- package/build/typescript/ViewPager/index.d.ts +1 -1
- package/build/typescript/ViewPager/utils.d.ts +2 -19
- package/build/typescript/hooks/useUnstableCollapsibleAppBar.d.ts +2 -3
- package/build/typescript/hooks/useUnstableToggleDisplayStyle.d.ts +2 -2
- package/build/typescript/index.d.ts +2 -0
- package/package.json +13 -13
- package/src/AnimatedY/AnimatedY.tsx +13 -10
- package/src/BottomSheet/BottomSheetNative.tsx +6 -0
- package/src/ComicViewer/ComicViewer.tsx +162 -0
- package/src/ComicViewer/ComicViewerItemProps.ts +15 -0
- package/src/ComicViewer/ComicViewerProps.ts +90 -0
- package/src/ComicViewer/ViewerItem.tsx +76 -0
- package/src/ComicViewer/index.ts +3 -0
- package/src/DateTimePicker/DateTimePicker.tsx +6 -0
- package/src/DateTimePicker/YearPicker.tsx +2 -1
- package/src/FlipCard/FlipCard.tsx +8 -8
- package/src/ViewPager/ChildrenMemoizedPage.tsx +91 -22
- package/src/ViewPager/ViewPagerNative.tsx +47 -35
- package/src/ViewPager/ViewPagerProps.ts +20 -19
- package/src/ViewPager/ViewPagerWeb.tsx +34 -29
- package/src/ViewPager/index.ts +1 -1
- package/src/ViewPager/utils.tsx +2 -55
- package/src/hooks/useHeight.ts +2 -2
- package/src/hooks/useUnstableCollapsibleAppBar.ts +59 -42
- package/src/hooks/useUnstableToggleDisplayStyle.ts +8 -6
- package/src/index.ts +3 -0
- package/build/commonjs/hooks/useWidth.js +0 -29
- package/build/commonjs/hooks/useWidth.js.map +0 -1
- package/build/module/hooks/useWidth.js +0 -15
- package/build/module/hooks/useWidth.js.map +0 -1
- package/build/typescript/hooks/useWidth.d.ts +0 -2
- package/src/hooks/useWidth.ts +0 -17
|
@@ -0,0 +1,88 @@
|
|
|
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 _core = require("@fountain-ui/core");
|
|
13
|
+
|
|
14
|
+
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); }
|
|
15
|
+
|
|
16
|
+
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; }
|
|
17
|
+
|
|
18
|
+
const styles = _core.StyleSheet.create({
|
|
19
|
+
placeholder: {
|
|
20
|
+
backgroundColor: '#abcabc'
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
function ViewerItem(_ref) {
|
|
25
|
+
let {
|
|
26
|
+
props
|
|
27
|
+
} = _ref;
|
|
28
|
+
const {
|
|
29
|
+
height,
|
|
30
|
+
id,
|
|
31
|
+
isViewable,
|
|
32
|
+
onError,
|
|
33
|
+
sourceUrl,
|
|
34
|
+
width
|
|
35
|
+
} = props;
|
|
36
|
+
const [isLoaded, setIsLoaded] = (0, _react.useState)(false);
|
|
37
|
+
const errorCount = (0, _react.useRef)(0);
|
|
38
|
+
const onLoad = (0, _react.useCallback)(() => {
|
|
39
|
+
errorCount.current = 0;
|
|
40
|
+
setIsLoaded(true);
|
|
41
|
+
}, []);
|
|
42
|
+
const handleError = (0, _react.useCallback)(() => {
|
|
43
|
+
errorCount.current = errorCount.current + 1;
|
|
44
|
+
onError && onError({
|
|
45
|
+
id,
|
|
46
|
+
count: errorCount.current
|
|
47
|
+
});
|
|
48
|
+
}, [id]);
|
|
49
|
+
const viewStyle = {
|
|
50
|
+
width,
|
|
51
|
+
height
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const Placeholder = () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
55
|
+
style: [viewStyle, styles.placeholder]
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
if (!isViewable && !isLoaded) {
|
|
59
|
+
return /*#__PURE__*/_react.default.createElement(Placeholder, null);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
return /*#__PURE__*/_react.default.createElement(_core.Image, {
|
|
63
|
+
disableOutline: true,
|
|
64
|
+
key: sourceUrl,
|
|
65
|
+
onLoad: onLoad,
|
|
66
|
+
onError: handleError,
|
|
67
|
+
source: {
|
|
68
|
+
uri: sourceUrl
|
|
69
|
+
},
|
|
70
|
+
style: viewStyle,
|
|
71
|
+
square: true
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
var _default = /*#__PURE__*/_react.default.memo(ViewerItem, (prevProps, nextProps) => {
|
|
76
|
+
if (prevProps.props.isViewable !== nextProps.props.isViewable) {
|
|
77
|
+
return false;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
if (prevProps.props.sourceUrl !== nextProps.props.sourceUrl) {
|
|
81
|
+
return false;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
return true;
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
exports.default = _default;
|
|
88
|
+
//# sourceMappingURL=ViewerItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","placeholder","backgroundColor","ViewerItem","props","height","id","isViewable","onError","sourceUrl","width","isLoaded","setIsLoaded","useState","errorCount","useRef","onLoad","useCallback","current","handleError","count","viewStyle","Placeholder","uri","React","memo","prevProps","nextProps"],"sources":["ViewerItem.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from 'react';\nimport { View } from 'react-native';\nimport { Image, StyleSheet } from '@fountain-ui/core';\nimport ComicViewerItemProps from './ComicViewerItemProps';\n\nconst styles = StyleSheet.create({\n placeholder: {\n backgroundColor: '#abcabc',\n },\n});\n\nfunction ViewerItem<T>({ props }: { props: ComicViewerItemProps<T> }) {\n const {\n height,\n id,\n isViewable,\n onError,\n sourceUrl,\n width,\n } = props;\n\n const [isLoaded, setIsLoaded] = useState(false);\n\n const errorCount = useRef<number>(0);\n\n const onLoad = useCallback(() => {\n errorCount.current = 0;\n setIsLoaded(true);\n }, []);\n\n const handleError = useCallback(() => {\n errorCount.current = errorCount.current + 1;\n\n onError && onError({\n id,\n count: errorCount.current\n });\n }, [id]);\n\n const viewStyle = { width, height };\n\n const Placeholder = () => (\n <View style={[\n viewStyle,\n styles.placeholder,\n ]}/>\n );\n\n if (!isViewable && !isLoaded) {\n return <Placeholder/>;\n }\n\n return (\n <Image\n disableOutline={true}\n key={sourceUrl}\n onLoad={onLoad}\n onError={handleError}\n source={{ uri: sourceUrl }}\n style={viewStyle}\n square={true}\n />\n );\n}\n\nexport default React.memo(ViewerItem, (prevProps, nextProps) => {\n if (prevProps.props.isViewable !== nextProps.props.isViewable) {\n return false;\n }\n\n if (prevProps.props.sourceUrl !== nextProps.props.sourceUrl) {\n return false;\n }\n\n return true;\n});\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAGA,MAAMA,MAAM,GAAGC,gBAAA,CAAWC,MAAX,CAAkB;EAC7BC,WAAW,EAAE;IACTC,eAAe,EAAE;EADR;AADgB,CAAlB,CAAf;;AAMA,SAASC,UAAT,OAAsE;EAAA,IAA/C;IAAEC;EAAF,CAA+C;EAClE,MAAM;IACFC,MADE;IAEFC,EAFE;IAGFC,UAHE;IAIFC,OAJE;IAKFC,SALE;IAMFC;EANE,IAOFN,KAPJ;EASA,MAAM,CAACO,QAAD,EAAWC,WAAX,IAA0B,IAAAC,eAAA,EAAS,KAAT,CAAhC;EAEA,MAAMC,UAAU,GAAG,IAAAC,aAAA,EAAe,CAAf,CAAnB;EAEA,MAAMC,MAAM,GAAG,IAAAC,kBAAA,EAAY,MAAM;IAC7BH,UAAU,CAACI,OAAX,GAAqB,CAArB;IACAN,WAAW,CAAC,IAAD,CAAX;EACH,CAHc,EAGZ,EAHY,CAAf;EAKA,MAAMO,WAAW,GAAG,IAAAF,kBAAA,EAAY,MAAM;IAClCH,UAAU,CAACI,OAAX,GAAqBJ,UAAU,CAACI,OAAX,GAAqB,CAA1C;IAEAV,OAAO,IAAIA,OAAO,CAAC;MACfF,EADe;MAEfc,KAAK,EAAEN,UAAU,CAACI;IAFH,CAAD,CAAlB;EAIH,CAPmB,EAOjB,CAACZ,EAAD,CAPiB,CAApB;EASA,MAAMe,SAAS,GAAG;IAAEX,KAAF;IAASL;EAAT,CAAlB;;EAEA,MAAMiB,WAAW,GAAG,mBAChB,6BAAC,iBAAD;IAAM,KAAK,EAAE,CACTD,SADS,EAETvB,MAAM,CAACG,WAFE;EAAb,EADJ;;EAOA,IAAI,CAACM,UAAD,IAAe,CAACI,QAApB,EAA8B;IAC1B,oBAAO,6BAAC,WAAD,OAAP;EACH;;EAED,oBACI,6BAAC,WAAD;IACI,cAAc,EAAE,IADpB;IAEI,GAAG,EAAEF,SAFT;IAGI,MAAM,EAAEO,MAHZ;IAII,OAAO,EAAEG,WAJb;IAKI,MAAM,EAAE;MAAEI,GAAG,EAAEd;IAAP,CALZ;IAMI,KAAK,EAAEY,SANX;IAOI,MAAM,EAAE;EAPZ,EADJ;AAWH;;4BAEcG,cAAA,CAAMC,IAAN,CAAWtB,UAAX,EAAuB,CAACuB,SAAD,EAAYC,SAAZ,KAA0B;EAC5D,IAAID,SAAS,CAACtB,KAAV,CAAgBG,UAAhB,KAA+BoB,SAAS,CAACvB,KAAV,CAAgBG,UAAnD,EAA+D;IAC3D,OAAO,KAAP;EACH;;EAED,IAAImB,SAAS,CAACtB,KAAV,CAAgBK,SAAhB,KAA8BkB,SAAS,CAACvB,KAAV,CAAgBK,SAAlD,EAA6D;IACzD,OAAO,KAAP;EACH;;EAED,OAAO,IAAP;AACH,CAVc,C"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "default", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _ComicViewer.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
var _ComicViewer = _interopRequireDefault(require("./ComicViewer"));
|
|
14
|
+
|
|
15
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './ComicViewer';\nexport type { ComicViewerItemData, default as ComicViewerProps, ErrorInfo } from './ComicViewerProps';\nexport type { default as ComicViewerItemProps } from './ComicViewerItemProps';"],"mappings":";;;;;;;;;;;;AAAA"}
|
|
@@ -98,7 +98,13 @@ function DateTimePicker(props) {
|
|
|
98
98
|
variant: 'text',
|
|
99
99
|
size: 'small',
|
|
100
100
|
onPress: () => setYearPickerVisible(true)
|
|
101
|
-
})
|
|
101
|
+
}),
|
|
102
|
+
theme: {
|
|
103
|
+
backgroundColor: theme.palette.paper.default,
|
|
104
|
+
calendarBackground: theme.palette.paper.default,
|
|
105
|
+
dayTextColor: theme.palette.text.primary,
|
|
106
|
+
textDisabledColor: theme.palette.text.hint
|
|
107
|
+
}
|
|
102
108
|
});
|
|
103
109
|
}
|
|
104
110
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["useDateTimePicker","React","useContext","DateTimePickerContext","DateTimePicker","props","currentMonth","Date","locale","markedDate","markedDateProp","maxDate","minDate","onDayPress","onYearPress","onYearPressProp","theme","useTheme","yearPickerVisible","setYearPickerVisible","useState","locales","LeftArrow","RightArrow","date","LocaleConfig","defaultLocale","format","direction","selected","disableTouchEvent","selectedColor","palette","primary","main","selectedTextColor","contrastTextColor","formatDate","toDate","backgroundColor","paper","default","calendarBackground","dayTextColor","text","textDisabledColor","hint"],"sources":["DateTimePicker.tsx"],"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.paper.default,\n calendarBackground: theme.palette.paper.default,\n dayTextColor: theme.palette.text.primary,\n textDisabledColor: theme.palette.text.hint,\n }}\n />\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["DateTimePickerProps.ts"],"sourcesContent":["import type { ComponentProps } from '@fountain-ui/core';\n\nexport interface Day {\n dateString: string;\n day: number;\n month: number;\n timestamp: number;\n year: number;\n}\n\nexport default interface DateTimePickerProps extends ComponentProps<{\n /**\n * To select month on calendar.\n * @default Date()\n */\n currentMonth?: Date;\n\n /**\n * Locale for calendar.\n */\n locale?: string;\n\n /**\n * Marked date on calendar.\n * @default Date()\n */\n markedDate?: Date;\n\n /**\n * Maximum date that can be selected, dates after maxDate will be grayed out.\n */\n maxDate?: Date;\n\n /**\n * Minimum date that can be selected, dates before minDate will be grayed out.\n */\n minDate?: Date;\n\n /**\n * Handler which gets executed on day press.\n */\n onDayPress?: (day: Day) => void;\n\n /**\n * Handler which gets executed on year press.\n */\n onYearPress?: (year: Date) => void;\n}> {}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["defaultValue","locales","DateTimePickerContext","React","createContext","Provider"],"sources":["DateTimePickerProvider.ts"],"sourcesContent":["import React from 'react';\n\nexport interface DateTimePickerValue {\n locales: object;\n}\n\nconst defaultValue: DateTimePickerValue = {\n locales: {},\n};\n\nexport const DateTimePickerContext = React.createContext<DateTimePickerValue>(defaultValue);\n\nexport default DateTimePickerContext.Provider;"],"mappings":";;;;;;;AAAA;;;;AAMA,MAAMA,YAAiC,GAAG;EACtCC,OAAO,EAAE;AAD6B,CAA1C;;AAIO,MAAMC,qBAAqB,gBAAGC,cAAA,CAAMC,aAAN,CAAyCJ,YAAzC,CAA9B;;;eAEQE,qBAAqB,CAACG,Q"}
|
|
@@ -30,13 +30,14 @@ const useStyles = function () {
|
|
|
30
30
|
};
|
|
31
31
|
};
|
|
32
32
|
|
|
33
|
-
const YearPicker =
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
33
|
+
const YearPicker = _ref => {
|
|
34
|
+
let {
|
|
35
|
+
date,
|
|
36
|
+
locale,
|
|
37
|
+
maxDate,
|
|
38
|
+
minDate,
|
|
39
|
+
onYearPress
|
|
40
|
+
} = _ref;
|
|
40
41
|
const styles = useStyles();
|
|
41
42
|
|
|
42
43
|
const ref = _react.default.useRef(null);
|
|
@@ -62,20 +63,24 @@ const YearPicker = ({
|
|
|
62
63
|
|
|
63
64
|
return /*#__PURE__*/_react.default.createElement(_core.Column, null, /*#__PURE__*/_react.default.createElement(_core.Typography, {
|
|
64
65
|
children: (0, _utils.formatDate)(date, locale),
|
|
66
|
+
color: 'textPrimary',
|
|
65
67
|
variant: 'subtitle2'
|
|
66
68
|
}), /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
|
|
67
69
|
data: years,
|
|
68
70
|
keyExtractor: item => item.toString(),
|
|
69
|
-
renderItem:
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
71
|
+
renderItem: _ref2 => {
|
|
72
|
+
let {
|
|
73
|
+
item
|
|
74
|
+
} = _ref2;
|
|
75
|
+
return /*#__PURE__*/_react.default.createElement(_core.Button, {
|
|
76
|
+
children: item.toString(),
|
|
77
|
+
variant: 'text',
|
|
78
|
+
onPress: () => {
|
|
79
|
+
const newDate = (0, _dateFns.setYear)(date, item);
|
|
80
|
+
onYearPress(newDate);
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
},
|
|
79
84
|
getItemLayout: getItemLayout,
|
|
80
85
|
style: styles.list,
|
|
81
86
|
ref: ref
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["initYear","itemHeight","useStyles","theme","useTheme","list","marginTop","spacing","maxHeight","YearPicker","date","locale","maxDate","minDate","onYearPress","styles","ref","React","useRef","minYear","getYear","maxYear","Date","years","Array","fill","map","v","i","useEffect","current","scrollToItem","animated","item","getItemLayout","data","index","length","offset","formatDate","toString","newDate","setYear"],"sources":["YearPicker.tsx"],"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"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;AAEA,MAAMA,QAAQ,GAAG,IAAjB;AACA,MAAMC,UAAU,GAAG,EAAnB;;AAYA,MAAMC,SAAsC,GAAG,YAA8B;EACzE,MAAMC,KAAK,GAAG,IAAAC,cAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,SAAS,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd,CADT;MAEFC,SAAS,EAAE;IAFT;EADH,CAAP;AAMH,CATD;;AAWA,MAAMC,UAAU,GAAG,QAMI;EAAA,IANH;IAChBC,IADgB;IAEhBC,MAFgB;IAGhBC,OAHgB;IAIhBC,OAJgB;IAKhBC;EALgB,CAMG;EACnB,MAAMC,MAAM,GAAGb,SAAS,EAAxB;;EAEA,MAAMc,GAAG,GAAGC,cAAA,CAAMC,MAAN,CAA8B,IAA9B,CAAZ;;EAEA,MAAMC,OAAO,GAAGN,OAAO,GAAG,IAAAO,gBAAA,EAAQP,OAAR,CAAH,GAAsBb,QAA7C;EACA,MAAMqB,OAAO,GAAGT,OAAO,GAAG,IAAAQ,gBAAA,EAAQR,OAAR,CAAH,GAAsB,IAAAQ,gBAAA,EAAQ,IAAIE,IAAJ,EAAR,CAA7C;EACA,MAAMC,KAAK,GAAGC,KAAK,CAACH,OAAO,GAAGF,OAAV,GAAoB,CAArB,CAAL,CAA6BM,IAA7B,CAAkCN,OAAlC,EAA2CO,GAA3C,CAA+C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA7D,CAAd;;EAEAX,cAAA,CAAMY,SAAN,CAAgB,MAAM;IAAA;;IAClB,gBAAAb,GAAG,CAACc,OAAJ,8DAAaC,YAAb,CAA0B;MACtBC,QAAQ,EAAE,KADY;MAEtBC,IAAI,EAAE,IAAAb,gBAAA,EAAQV,IAAR;IAFgB,CAA1B;EAIH,CALD,EAKG,CAACA,IAAD,CALH;;EAOA,MAAMwB,aAAa,GAAG,CAACC,IAAD,EAAyCC,KAAzC,MAA4D;IAC9EC,MAAM,EAAEpC,UADsE;IAE9EqC,MAAM,EAAErC,UAAU,GAAGmC,KAFyD;IAG9EA;EAH8E,CAA5D,CAAtB;;EAMA,oBACI,6BAAC,YAAD,qBACI,6BAAC,gBAAD;IACI,QAAQ,EAAE,IAAAG,iBAAA,EAAW7B,IAAX,EAAiBC,MAAjB,CADd;IAEI,KAAK,EAAE,aAFX;IAGI,OAAO,EAAE;EAHb,EADJ,eAMI,6BAAC,qBAAD;IACI,IAAI,EAAEY,KADV;IAEI,YAAY,EAAEU,IAAI,IAAIA,IAAI,CAACO,QAAL,EAF1B;IAGI,UAAU,EAAE;MAAA,IAAC;QAAEP;MAAF,CAAD;MAAA,oBACR,6BAAC,YAAD;QACI,QAAQ,EAAEA,IAAI,CAACO,QAAL,EADd;QAEI,OAAO,EAAE,MAFb;QAGI,OAAO,EAAE,MAAM;UACX,MAAMC,OAAO,GAAG,IAAAC,gBAAA,EAAQhC,IAAR,EAAcuB,IAAd,CAAhB;UACAnB,WAAW,CAAC2B,OAAD,CAAX;QACH;MANL,EADQ;IAAA,CAHhB;IAaI,aAAa,EAAEP,aAbnB;IAcI,KAAK,EAAEnB,MAAM,CAACV,IAdlB;IAeI,GAAG,EAAEW;EAfT,EANJ,CADJ;AA0BH,CAtDD;;eAwDeP,U"}
|
|
@@ -3,16 +3,16 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
Object.defineProperty(exports, "
|
|
6
|
+
Object.defineProperty(exports, "DateTimePickerProvider", {
|
|
7
7
|
enumerable: true,
|
|
8
8
|
get: function () {
|
|
9
|
-
return
|
|
9
|
+
return _DateTimePickerProvider.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
Object.defineProperty(exports, "
|
|
12
|
+
Object.defineProperty(exports, "default", {
|
|
13
13
|
enumerable: true,
|
|
14
14
|
get: function () {
|
|
15
|
-
return
|
|
15
|
+
return _DateTimePicker.default;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
18
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './DateTimePicker';\nexport { default as DateTimePickerProvider } from './DateTimePickerProvider';\nexport type { default as DateTimePickerProps } from './DateTimePickerProps';"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA"}
|
|
@@ -21,7 +21,8 @@ const localeMap = {
|
|
|
21
21
|
fr: _fr.default
|
|
22
22
|
};
|
|
23
23
|
|
|
24
|
-
const formatDate = (date
|
|
24
|
+
const formatDate = function (date) {
|
|
25
|
+
let locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
|
|
25
26
|
//@ts-ignore
|
|
26
27
|
return (0, _dateFns.format)(date, 'MMMM uuuu', {
|
|
27
28
|
locale: localeMap[locale]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["localeMap","en","enLocale","de","deLocale","fr","frLocale","formatDate","date","locale","format"],"sources":["utils.ts"],"sourcesContent":["import { format } from 'date-fns';\nimport enLocale from 'date-fns/locale/en-US';\nimport deLocale from 'date-fns/locale/de';\nimport frLocale from 'date-fns/locale/fr';\n\nconst localeMap = {\n en: enLocale,\n de: deLocale,\n fr: frLocale,\n};\n\nexport const formatDate = (date: Date, locale: string = 'en'): string => {\n //@ts-ignore\n return format(date, 'MMMM uuuu', { locale: localeMap[locale] });\n};"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,SAAS,GAAG;EACdC,EAAE,EAAEC,aADU;EAEdC,EAAE,EAAEC,WAFU;EAGdC,EAAE,EAAEC;AAHU,CAAlB;;AAMO,MAAMC,UAAU,GAAG,UAACC,IAAD,EAA+C;EAAA,IAAlCC,MAAkC,uEAAjB,IAAiB;EACrE;EACA,OAAO,IAAAC,eAAA,EAAOF,IAAP,EAAa,WAAb,EAA0B;IAAEC,MAAM,EAAET,SAAS,CAACS,MAAD;EAAnB,CAA1B,CAAP;AACH,CAHM"}
|
|
@@ -9,9 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
var _reactNativeReanimated =
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
15
13
|
|
|
16
14
|
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); }
|
|
17
15
|
|
|
@@ -40,10 +38,8 @@ function FlipCard(props) {
|
|
|
40
38
|
reanimationKey,
|
|
41
39
|
style
|
|
42
40
|
} = props;
|
|
43
|
-
|
|
44
|
-
const
|
|
45
|
-
|
|
46
|
-
const animatedFrontCardStyle = _reactNativeReanimated.default.useAnimatedStyle(() => {
|
|
41
|
+
const sharedAngle = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
42
|
+
const animatedFrontCardStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
47
43
|
return {
|
|
48
44
|
zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,
|
|
49
45
|
transform: [{
|
|
@@ -52,9 +48,8 @@ function FlipCard(props) {
|
|
|
52
48
|
rotateX: `${sharedAngle.value}deg`
|
|
53
49
|
}]
|
|
54
50
|
};
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
const animatedBackCardStyle = _reactNativeReanimated.default.useAnimatedStyle(() => {
|
|
51
|
+
}, []);
|
|
52
|
+
const animatedBackCardStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
58
53
|
return {
|
|
59
54
|
zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,
|
|
60
55
|
transform: [{
|
|
@@ -63,11 +58,10 @@ function FlipCard(props) {
|
|
|
63
58
|
rotateX: `${sharedAngle.value + 180}deg`
|
|
64
59
|
}]
|
|
65
60
|
};
|
|
66
|
-
});
|
|
67
|
-
|
|
61
|
+
}, []);
|
|
68
62
|
(0, _react.useEffect)(() => {
|
|
69
63
|
sharedAngle.value = 0;
|
|
70
|
-
sharedAngle.value = _reactNativeReanimated.
|
|
64
|
+
sharedAngle.value = (0, _reactNativeReanimated.withTiming)(180, {
|
|
71
65
|
duration: 500
|
|
72
66
|
});
|
|
73
67
|
}, [reanimationKey]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","container","height","width","animatedCard","alignItems","backfaceVisibility","justifyContent","position","PERSPECTIVE","Z_INDEX_CHANGE_ANGLE","FlipCard","props","backCard","frontCard","reanimationKey","style","sharedAngle","useSharedValue","animatedFrontCardStyle","useAnimatedStyle","zIndex","value","transform","perspective","rotateX","animatedBackCardStyle","useEffect","withTiming","duration"],"sources":["FlipCard.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type FlipCardProps from './FlipCardProps';\n\nconst styles = StyleSheet.create({\n container: {\n height: 32,\n width: 24,\n },\n animatedCard: {\n alignItems: 'center',\n backfaceVisibility: 'hidden',\n justifyContent: 'center',\n position: 'absolute',\n },\n});\n\nconst PERSPECTIVE = 100;\nconst Z_INDEX_CHANGE_ANGLE = 90;\n\nexport default function FlipCard(props: FlipCardProps) {\n const {\n backCard,\n frontCard,\n reanimationKey,\n style,\n } = props;\n\n const sharedAngle = useSharedValue(0);\n\n const animatedFrontCardStyle = useAnimatedStyle(() => {\n return {\n zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,\n transform: [\n { perspective: PERSPECTIVE },\n { rotateX: `${sharedAngle.value}deg` },\n ],\n };\n }, []);\n\n const animatedBackCardStyle = useAnimatedStyle(() => {\n return {\n zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,\n transform: [\n { perspective: PERSPECTIVE },\n { rotateX: `${(sharedAngle.value + 180)}deg` },\n ],\n };\n }, []);\n\n useEffect(() => {\n sharedAngle.value = 0;\n sharedAngle.value = withTiming(180, { duration: 500 });\n }, [reanimationKey]);\n\n return (\n <View style={[styles.container, style]}>\n <Animated.View style={[styles.animatedCard, animatedFrontCardStyle]}>\n {frontCard}\n </Animated.View>\n\n <Animated.View style={[styles.animatedCard, animatedBackCardStyle]}>\n {backCard}\n </Animated.View>\n </View>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAGA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,SAAS,EAAE;IACPC,MAAM,EAAE,EADD;IAEPC,KAAK,EAAE;EAFA,CADkB;EAK7BC,YAAY,EAAE;IACVC,UAAU,EAAE,QADF;IAEVC,kBAAkB,EAAE,QAFV;IAGVC,cAAc,EAAE,QAHN;IAIVC,QAAQ,EAAE;EAJA;AALe,CAAlB,CAAf;;AAaA,MAAMC,WAAW,GAAG,GAApB;AACA,MAAMC,oBAAoB,GAAG,EAA7B;;AAEe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,SAFE;IAGFC,cAHE;IAIFC;EAJE,IAKFJ,KALJ;EAOA,MAAMK,WAAW,GAAG,IAAAC,qCAAA,EAAe,CAAf,CAApB;EAEA,MAAMC,sBAAsB,GAAG,IAAAC,uCAAA,EAAiB,MAAM;IAClD,OAAO;MACHC,MAAM,EAAEJ,WAAW,CAACK,KAAZ,GAAoBZ,oBAApB,GAA2C,CAA3C,GAA+C,CADpD;MAEHa,SAAS,EAAE,CACP;QAAEC,WAAW,EAAEf;MAAf,CADO,EAEP;QAAEgB,OAAO,EAAG,GAAER,WAAW,CAACK,KAAM;MAAhC,CAFO;IAFR,CAAP;EAOH,CAR8B,EAQ5B,EAR4B,CAA/B;EAUA,MAAMI,qBAAqB,GAAG,IAAAN,uCAAA,EAAiB,MAAM;IACjD,OAAO;MACHC,MAAM,EAAEJ,WAAW,CAACK,KAAZ,IAAqBZ,oBAArB,GAA4C,CAA5C,GAAgD,CADrD;MAEHa,SAAS,EAAE,CACP;QAAEC,WAAW,EAAEf;MAAf,CADO,EAEP;QAAEgB,OAAO,EAAG,GAAGR,WAAW,CAACK,KAAZ,GAAoB,GAAK;MAAxC,CAFO;IAFR,CAAP;EAOH,CAR6B,EAQ3B,EAR2B,CAA9B;EAUA,IAAAK,gBAAA,EAAU,MAAM;IACZV,WAAW,CAACK,KAAZ,GAAoB,CAApB;IACAL,WAAW,CAACK,KAAZ,GAAoB,IAAAM,iCAAA,EAAW,GAAX,EAAgB;MAAEC,QAAQ,EAAE;IAAZ,CAAhB,CAApB;EACH,CAHD,EAGG,CAACd,cAAD,CAHH;EAKA,oBACI,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACjB,MAAM,CAACG,SAAR,EAAmBe,KAAnB;EAAb,gBACI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAAClB,MAAM,CAACM,YAAR,EAAsBe,sBAAtB;EAAtB,GACKL,SADL,CADJ,eAKI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAAChB,MAAM,CAACM,YAAR,EAAsBsB,qBAAtB;EAAtB,GACKb,QADL,CALJ,CADJ;AAWH;;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["FlipCardProps.ts"],"sourcesContent":["import React from 'react';\nimport { ComponentProps } from '@fountain-ui/core';\n\nexport default interface FlipCardProps extends ComponentProps<{\n /**\n * Element placed on backSide\n */\n backCard: React.ReactElement;\n\n /**\n * Element placed on frontSide\n */\n frontCard: React.ReactElement;\n\n /**\n * The key to reanimate Component, usually includes card content\n */\n reanimationKey?: string;\n}> {}"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './FlipCard';\nexport type { default as FlipCardProps } from './FlipCardProps';"],"mappings":";;;;;;;;;;;;AAAA"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.useStatusBarContext = exports.default = exports.StatusBarContext = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["StatusBarContext","React","createContext","useStatusBarContext","useContext","Provider"],"sources":["Provider.ts"],"sourcesContent":["import React from 'react';\nimport type { StatusBarStyle } from 'react-native';\n\nexport interface StatusBarProviderValue {\n setTranslucent: (value: boolean) => void;\n setBackgroundColor: (value: string) => void;\n setHidden: (value: boolean) => void;\n setBarStyle: (value: StatusBarStyle, animated?: boolean) => void;\n}\n\nexport const StatusBarContext = React.createContext<StatusBarProviderValue | null>(null);\n\nexport const useStatusBarContext = () => {\n return React.useContext(StatusBarContext);\n};\n\nexport default StatusBarContext.Provider;"],"mappings":";;;;;;;AAAA;;;;AAUO,MAAMA,gBAAgB,gBAAGC,cAAA,CAAMC,aAAN,CAAmD,IAAnD,CAAzB;;;;AAEA,MAAMC,mBAAmB,GAAG,MAAM;EACrC,OAAOF,cAAA,CAAMG,UAAN,CAAiBJ,gBAAjB,CAAP;AACH,CAFM;;;eAIQA,gBAAgB,CAACK,Q"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["initialVisible","Platform","select","ios","android","StatusBarProvider","props","children","theme","useTheme","defaultColor","palette","background","default","visible","setVisible","React","useState","backgroundViewColor","setBackgroundViewColor","setBackgroundColor","value","OS","RNStatusBar","setBarStyle","animated","setHidden","setTranslucent","shouldRenderBackgroundView","inset","useSafeAreaInsets","backgroundViewStyle","css","backgroundColor","height","top","left","position","right","zIndex","statusBar"],"sources":["StatusBarProvider.tsx"],"sourcesContent":["import React from 'react';\nimport type { StatusBarStyle } from 'react-native';\nimport { Platform, StatusBar as RNStatusBar, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useTheme } from '@fountain-ui/core';\nimport { css } from '@fountain-ui/styles';\nimport Provider from './Provider';\nimport type StatusBarProviderProps from './StatusBarProviderProps';\n\nconst initialVisible = Platform.select({\n ios: true,\n android: false,\n});\n\nexport default function StatusBarProvider(props: StatusBarProviderProps) {\n const { children } = props;\n\n const theme = useTheme();\n const defaultColor = theme.palette.background.default;\n\n const [visible, setVisible] = React.useState(initialVisible);\n const [backgroundViewColor, setBackgroundViewColor] = React.useState(defaultColor);\n\n const setBackgroundColor = (value: string) => {\n if (Platform.OS === 'android') {\n RNStatusBar.setBackgroundColor(value);\n }\n\n if (Platform.OS === 'ios') {\n setBackgroundViewColor(value);\n }\n };\n\n const setBarStyle = (value: StatusBarStyle, animated?: boolean) => {\n RNStatusBar.setBarStyle(value, animated);\n };\n\n const setHidden = (value: boolean) => {\n if (Platform.OS === 'ios') {\n setVisible(!value);\n }\n\n RNStatusBar.setHidden(value);\n };\n\n const setTranslucent = (value: boolean) => {\n if (Platform.OS === 'android') {\n RNStatusBar.setTranslucent(value);\n }\n };\n\n const shouldRenderBackgroundView = Platform.OS === 'ios' && visible;\n\n const inset = useSafeAreaInsets();\n const backgroundViewStyle = css([\n {\n backgroundColor: backgroundViewColor,\n height: inset.top,\n left: 0,\n position: 'absolute',\n right: 0,\n top: 0,\n zIndex: theme.zIndex.statusBar,\n },\n ]);\n\n return (\n <Provider value={{\n setBackgroundColor,\n setBarStyle,\n setHidden,\n setTranslucent,\n }}>\n {shouldRenderBackgroundView ? (\n <View style={backgroundViewStyle}/>\n ) : null}\n {children}\n </Provider>\n );\n}"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;AAGA,MAAMA,cAAc,GAAGC,qBAAA,CAASC,MAAT,CAAgB;EACnCC,GAAG,EAAE,IAD8B;EAEnCC,OAAO,EAAE;AAF0B,CAAhB,CAAvB;;AAKe,SAASC,iBAAT,CAA2BC,KAA3B,EAA0D;EACrE,MAAM;IAAEC;EAAF,IAAeD,KAArB;EAEA,MAAME,KAAK,GAAG,IAAAC,cAAA,GAAd;EACA,MAAMC,YAAY,GAAGF,KAAK,CAACG,OAAN,CAAcC,UAAd,CAAyBC,OAA9C;;EAEA,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBC,cAAA,CAAMC,QAAN,CAAejB,cAAf,CAA9B;;EACA,MAAM,CAACkB,mBAAD,EAAsBC,sBAAtB,IAAgDH,cAAA,CAAMC,QAAN,CAAeP,YAAf,CAAtD;;EAEA,MAAMU,kBAAkB,GAAIC,KAAD,IAAmB;IAC1C,IAAIpB,qBAAA,CAASqB,EAAT,KAAgB,SAApB,EAA+B;MAC3BC,sBAAA,CAAYH,kBAAZ,CAA+BC,KAA/B;IACH;;IAED,IAAIpB,qBAAA,CAASqB,EAAT,KAAgB,KAApB,EAA2B;MACvBH,sBAAsB,CAACE,KAAD,CAAtB;IACH;EACJ,CARD;;EAUA,MAAMG,WAAW,GAAG,CAACH,KAAD,EAAwBI,QAAxB,KAA+C;IAC/DF,sBAAA,CAAYC,WAAZ,CAAwBH,KAAxB,EAA+BI,QAA/B;EACH,CAFD;;EAIA,MAAMC,SAAS,GAAIL,KAAD,IAAoB;IAClC,IAAIpB,qBAAA,CAASqB,EAAT,KAAgB,KAApB,EAA2B;MACvBP,UAAU,CAAC,CAACM,KAAF,CAAV;IACH;;IAEDE,sBAAA,CAAYG,SAAZ,CAAsBL,KAAtB;EACH,CAND;;EAQA,MAAMM,cAAc,GAAIN,KAAD,IAAoB;IACvC,IAAIpB,qBAAA,CAASqB,EAAT,KAAgB,SAApB,EAA+B;MAC3BC,sBAAA,CAAYI,cAAZ,CAA2BN,KAA3B;IACH;EACJ,CAJD;;EAMA,MAAMO,0BAA0B,GAAG3B,qBAAA,CAASqB,EAAT,KAAgB,KAAhB,IAAyBR,OAA5D;EAEA,MAAMe,KAAK,GAAG,IAAAC,6CAAA,GAAd;EACA,MAAMC,mBAAmB,GAAG,IAAAC,WAAA,EAAI,CAC5B;IACIC,eAAe,EAAEf,mBADrB;IAEIgB,MAAM,EAAEL,KAAK,CAACM,GAFlB;IAGIC,IAAI,EAAE,CAHV;IAIIC,QAAQ,EAAE,UAJd;IAKIC,KAAK,EAAE,CALX;IAMIH,GAAG,EAAE,CANT;IAOII,MAAM,EAAE/B,KAAK,CAAC+B,MAAN,CAAaC;EAPzB,CAD4B,CAAJ,CAA5B;EAYA,oBACI,6BAAC,iBAAD;IAAU,KAAK,EAAE;MACbpB,kBADa;MAEbI,WAFa;MAGbE,SAHa;MAIbC;IAJa;EAAjB,GAMKC,0BAA0B,gBACvB,6BAAC,iBAAD;IAAM,KAAK,EAAEG;EAAb,EADuB,GAEvB,IARR,EASKxB,QATL,CADJ;AAaH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["StatusBarProviderProps.ts"],"sourcesContent":["import React from 'react';\n\nexport default interface StatusBarProviderProp {\n /**\n * The screens where the statusbar will be visible.\n */\n children: React.ReactNode;\n}"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './StatusBarProvider';\nexport { useStatusBarContext } from './Provider';\nexport type { default as StatusBarProviderProps } from './StatusBarProviderProps';"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA"}
|
|
@@ -5,44 +5,112 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
|
|
8
|
-
var _react =
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
var _reactNativeReanimated = require("react-native-reanimated");
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
var _core = require("@fountain-ui/core");
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
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); }
|
|
17
|
+
|
|
18
|
+
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; }
|
|
19
|
+
|
|
20
|
+
const OFFSCREEN_RERENDER_LIMIT = 1;
|
|
21
|
+
|
|
22
|
+
const styles = _core.StyleSheet.create({
|
|
23
|
+
none: {
|
|
24
|
+
display: 'none'
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
function Page(props) {
|
|
17
29
|
const {
|
|
18
|
-
|
|
19
|
-
|
|
30
|
+
index,
|
|
31
|
+
children,
|
|
32
|
+
loading,
|
|
33
|
+
sharedIndex
|
|
20
34
|
} = props;
|
|
21
|
-
return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
|
|
22
|
-
collapsable: false
|
|
23
|
-
}, otherProps));
|
|
24
|
-
};
|
|
25
35
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
} // isVisible is an important condition for determining memos on the web.
|
|
30
|
-
// Reference ViewPagerWeb's return.
|
|
36
|
+
const assumeInitialPageState = () => {
|
|
37
|
+
const activeIndex = sharedIndex.value;
|
|
38
|
+
const active = index === activeIndex;
|
|
31
39
|
|
|
40
|
+
if (_reactNative.Platform.OS === 'web') {
|
|
41
|
+
return {
|
|
42
|
+
active,
|
|
43
|
+
visited: active
|
|
44
|
+
};
|
|
45
|
+
}
|
|
32
46
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
47
|
+
if (loading === 'eager') {
|
|
48
|
+
return {
|
|
49
|
+
active,
|
|
50
|
+
visited: true
|
|
51
|
+
};
|
|
52
|
+
}
|
|
36
53
|
|
|
37
|
-
|
|
38
|
-
return
|
|
39
|
-
|
|
54
|
+
const visited = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;
|
|
55
|
+
return {
|
|
56
|
+
active,
|
|
57
|
+
visited
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
const [pageState, setPageState] = (0, _react.useState)(assumeInitialPageState);
|
|
62
|
+
const content = pageState.visited ? children : null;
|
|
63
|
+
|
|
64
|
+
const updatePageState = (active, neighbor) => {
|
|
65
|
+
setPageState(prevState => {
|
|
66
|
+
if (prevState.active !== active) {
|
|
67
|
+
return {
|
|
68
|
+
active,
|
|
69
|
+
visited: active || prevState.visited
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
if (neighbor && !prevState.visited) {
|
|
74
|
+
return { ...prevState,
|
|
75
|
+
visited: true
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
return prevState;
|
|
80
|
+
});
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
(0, _reactNativeReanimated.useAnimatedReaction)(() => {
|
|
84
|
+
const activeIndex = sharedIndex.value;
|
|
85
|
+
const willVisible = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;
|
|
86
|
+
const willActive = index === activeIndex;
|
|
87
|
+
const willNeighbor = _reactNative.Platform.OS === 'web' ? false : willVisible && !willActive;
|
|
88
|
+
return {
|
|
89
|
+
willActive,
|
|
90
|
+
willNeighbor
|
|
91
|
+
};
|
|
92
|
+
}, (nextState, prevState) => {
|
|
93
|
+
const activeStateChanged = nextState.willActive !== (prevState === null || prevState === void 0 ? void 0 : prevState.willActive);
|
|
94
|
+
const willNewNeighbor = nextState.willNeighbor && !(prevState !== null && prevState !== void 0 && prevState.willNeighbor);
|
|
95
|
+
|
|
96
|
+
if (activeStateChanged || willNewNeighbor) {
|
|
97
|
+
(0, _reactNativeReanimated.runOnJS)(updatePageState)(nextState.willActive, nextState.willNeighbor);
|
|
98
|
+
}
|
|
99
|
+
}, [index]);
|
|
100
|
+
const style = _reactNative.Platform.OS === 'web' ? pageState.active ? _core.StyleSheet.absoluteFill : styles.none : undefined;
|
|
101
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
102
|
+
children: content,
|
|
103
|
+
collapsable: false,
|
|
104
|
+
style: style
|
|
105
|
+
});
|
|
106
|
+
}
|
|
40
107
|
|
|
108
|
+
var _default = /*#__PURE__*/(0, _react.memo)(Page, (prevProps, nextProps) => {
|
|
41
109
|
if (prevProps.rerenderKey !== nextProps.rerenderKey) {
|
|
42
110
|
return false;
|
|
43
111
|
}
|
|
44
112
|
|
|
45
|
-
return prevProps.
|
|
113
|
+
return prevProps.index !== nextProps.index;
|
|
46
114
|
});
|
|
47
115
|
|
|
48
116
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["OFFSCREEN_RERENDER_LIMIT","styles","StyleSheet","create","none","display","Page","props","index","children","loading","sharedIndex","assumeInitialPageState","activeIndex","value","active","Platform","OS","visited","pageState","setPageState","useState","content","updatePageState","neighbor","prevState","useAnimatedReaction","willVisible","willActive","willNeighbor","nextState","activeStateChanged","willNewNeighbor","runOnJS","style","absoluteFill","undefined","memo","prevProps","nextProps","rerenderKey"],"sources":["ChildrenMemoizedPage.tsx"],"sourcesContent":["import React, { memo, useState } from 'react';\nimport { Platform, View } from 'react-native';\nimport { runOnJS, useAnimatedReaction } from 'react-native-reanimated';\nimport { StyleSheet } from '@fountain-ui/core';\nimport type { PageProps } from './ViewPagerProps';\n\nconst OFFSCREEN_RERENDER_LIMIT = 1;\n\nconst styles = StyleSheet.create({\n none: { display: 'none' },\n});\n\ninterface PageState {\n active: boolean;\n visited: boolean;\n}\n\nfunction Page(props: PageProps) {\n const {\n index,\n children,\n loading,\n sharedIndex,\n } = props;\n\n const assumeInitialPageState = (): PageState => {\n const activeIndex = sharedIndex.value;\n\n const active = index === activeIndex;\n\n if (Platform.OS === 'web') {\n return { active, visited: active };\n }\n\n if (loading === 'eager') {\n return { active, visited: true };\n }\n\n const visited = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT\n && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;\n\n return { active, visited };\n };\n\n const [pageState, setPageState] = useState<PageState>(assumeInitialPageState);\n\n const content = pageState.visited ? children : null;\n\n const updatePageState = (active: boolean, neighbor: boolean) => {\n setPageState(prevState => {\n if (prevState.active !== active) {\n return { active, visited: active || prevState.visited };\n }\n\n if (neighbor && !prevState.visited) {\n return { ...prevState, visited: true };\n }\n\n return prevState;\n });\n };\n\n useAnimatedReaction(\n () => {\n const activeIndex = sharedIndex.value;\n\n const willVisible = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT\n && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;\n\n const willActive = index === activeIndex;\n const willNeighbor = Platform.OS === 'web' ? false : (willVisible && !willActive);\n\n return { willActive, willNeighbor };\n },\n (nextState, prevState) => {\n const activeStateChanged = nextState.willActive !== prevState?.willActive;\n const willNewNeighbor = nextState.willNeighbor && !prevState?.willNeighbor;\n\n if (activeStateChanged || willNewNeighbor) {\n runOnJS(updatePageState)(nextState.willActive, nextState.willNeighbor);\n }\n },\n [index],\n );\n\n const style = Platform.OS === 'web'\n ? (pageState.active ? StyleSheet.absoluteFill : styles.none)\n : undefined;\n\n return (\n <View\n children={content}\n collapsable={false}\n style={style}\n />\n );\n}\n\nexport default memo(Page, (prevProps, nextProps) => {\n if (prevProps.rerenderKey !== nextProps.rerenderKey) {\n return false;\n }\n\n return prevProps.index !== nextProps.index;\n});\n"],"mappings":"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"}
|