@fountain-ui/lab 1.21.0 → 2.0.0-beta.3
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/CHANGELOG.md +8 -0
- package/build/commonjs/BottomSheet/BottomSheetNative.js +7 -1
- package/build/commonjs/BottomSheet/BottomSheetNative.js.map +1 -1
- package/build/commonjs/ComicViewer/ComicViewer.js +163 -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 +87 -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/YearPicker.js +1 -0
- package/build/commonjs/DateTimePicker/YearPicker.js.map +1 -1
- package/build/commonjs/index.js +21 -0
- package/build/commonjs/index.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetNative.js +7 -1
- package/build/module/BottomSheet/BottomSheetNative.js.map +1 -1
- package/build/module/ComicViewer/ComicViewer.js +146 -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 +71 -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/YearPicker.js +1 -0
- package/build/module/DateTimePicker/YearPicker.js.map +1 -1
- package/build/module/index.js +2 -0
- package/build/module/index.js.map +1 -1
- package/build/typescript/ComicViewer/ComicViewer.d.ts +3 -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/index.d.ts +2 -0
- package/package.json +5 -6
- 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/index.ts +3 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.21.1](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.13.0...@fountain-ui/lab@1.21.1) (2022-05-19)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @fountain-ui/lab
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
# [1.21.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/lab@1.13.0...@fountain-ui/lab@1.21.0) (2022-05-12)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @fountain-ui/lab
|
|
@@ -62,6 +62,7 @@ function BottomSheet(props) {
|
|
|
62
62
|
} else {
|
|
63
63
|
var _bottomSheetRef$curre3;
|
|
64
64
|
|
|
65
|
+
// @ts-ignore
|
|
65
66
|
(_bottomSheetRef$curre3 = bottomSheetRef.current) === null || _bottomSheetRef$curre3 === void 0 ? void 0 : _bottomSheetRef$curre3.snapToIndex(index);
|
|
66
67
|
}
|
|
67
68
|
}, [index]);
|
|
@@ -76,6 +77,9 @@ function BottomSheet(props) {
|
|
|
76
77
|
web: shadow === null || shadow === void 0 ? void 0 : shadow.boxShadow
|
|
77
78
|
})
|
|
78
79
|
};
|
|
80
|
+
const backgroundStyle = {
|
|
81
|
+
backgroundColor: theme.palette.paper.default
|
|
82
|
+
};
|
|
79
83
|
const isBackdropTransparent = backdropOpacity <= 0;
|
|
80
84
|
|
|
81
85
|
const OpacityAwareBackdrop = props => /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetBackdrop, _extends({}, props, {
|
|
@@ -85,7 +89,9 @@ function BottomSheet(props) {
|
|
|
85
89
|
}));
|
|
86
90
|
|
|
87
91
|
return /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetModalProvider, null, /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetModal, {
|
|
88
|
-
backdropComponent: isBackdropTransparent ? _TransparentBackdrop.default : OpacityAwareBackdrop
|
|
92
|
+
backdropComponent: isBackdropTransparent ? _TransparentBackdrop.default : OpacityAwareBackdrop // @ts-ignore
|
|
93
|
+
,
|
|
94
|
+
backgroundStyle: backgroundStyle,
|
|
89
95
|
index: index,
|
|
90
96
|
handleComponent: NoHandle,
|
|
91
97
|
onChange: handleChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["BottomSheetNative.tsx"],"names":["NoHandle","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","indexRef","React","useRef","bottomSheetRef","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","shadow","modalStyle","backgroundColor","Platform","select","android","elevation","ios","web","boxShadow","isBackdropTransparent","OpacityAwareBackdrop","TransparentBackdrop"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAOA;;;;;;AAEA,MAAMA,QAAQ,GAAG,MAAM,IAAvB;;AAEe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;AACzD,QAAM;AACFC,IAAAA,eAAe,GAAG,GADhB;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,KAHE;AAIFC,IAAAA,QAJE;AAKFC,IAAAA;AALE,MAMFL,KANJ;;AAQA,QAAMM,QAAQ,GAAGC,eAAMC,MAAN,CAAqB,CAAC,CAAtB,CAAjB;;AACA,QAAMC,cAAc,GAAGF,eAAMC,MAAN,CAAsC,IAAtC,CAAvB;;AAEA,QAAME,YAAY,GAAGH,eAAMI,WAAN,CAAmBC,QAAD,IAAsB;AACzDN,IAAAA,QAAQ,CAACO,OAAT,GAAmBD,QAAnB;;AAEA,QAAIR,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAACQ,QAAD,CAAR;AACH;AACJ,GANoB,EAMlB,CAACR,QAAD,CANkB,CAArB;;AAQA,QAAMU,aAAa,GAAGP,eAAMI,WAAN,CAAkB,MAAM;AAC1CD,IAAAA,YAAY,CAAC,CAAC,CAAF,CAAZ;AACH,GAFqB,EAEnB,CAACA,YAAD,CAFmB,CAAtB;;AAIAH,iBAAMQ,SAAN,CAAgB,MAAM;AAClB,QAAIZ,KAAK,KAAKG,QAAQ,CAACO,OAAvB,EAAgC;AAC5B;AACH;;AAED,QAAIP,QAAQ,CAACO,OAAT,GAAmB,CAAnB,IAAwBV,KAAK,IAAI,CAArC,EAAwC;AAAA;;AACpC,+BAAAM,cAAc,CAACI,OAAf,gFAAwBG,OAAxB;AACH,KAFD,MAEO,IAAIV,QAAQ,CAACO,OAAT,IAAoB,CAApB,IAAyBV,KAAK,GAAG,CAArC,EAAwC;AAAA;;AAC3C,gCAAAM,cAAc,CAACI,OAAf,kFAAwBI,OAAxB;AACH,KAFM,MAEA;AAAA;;AACH,gCAAAR,cAAc,CAACI,OAAf,kFAAwBK,WAAxB,CAAoCf,KAApC;AACH;AACJ,
|
|
1
|
+
{"version":3,"sources":["BottomSheetNative.tsx"],"names":["NoHandle","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","indexRef","React","useRef","bottomSheetRef","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","shadow","modalStyle","backgroundColor","Platform","select","android","elevation","ios","web","boxShadow","backgroundStyle","palette","paper","default","isBackdropTransparent","OpacityAwareBackdrop","TransparentBackdrop"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Platform } from 'react-native';\nimport { useTheme } from '@fountain-ui/styles';\nimport {\n BottomSheetBackdrop,\n BottomSheetBackdropProps,\n BottomSheetModal,\n BottomSheetModalProvider,\n} from '@gorhom/bottom-sheet';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n const {\n backdropOpacity = 0.5,\n children,\n index,\n onChange,\n snapPoints,\n } = props;\n\n const indexRef = React.useRef<number>(-1);\n const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);\n\n const handleChange = React.useCallback((newIndex: number) => {\n indexRef.current = newIndex;\n\n if (onChange) {\n onChange(newIndex);\n }\n }, [onChange]);\n\n const handleDismiss = React.useCallback(() => {\n handleChange(-1);\n }, [handleChange]);\n\n React.useEffect(() => {\n if (index === indexRef.current) {\n return;\n }\n\n if (indexRef.current < 0 && index >= 0) {\n bottomSheetRef.current?.present();\n } else if (indexRef.current >= 0 && index < 0) {\n bottomSheetRef.current?.dismiss();\n } else {\n // @ts-ignore\n bottomSheetRef.current?.snapToIndex(index);\n }\n }, [index]);\n\n const theme = useTheme();\n const shadow = theme.shadow[12];\n const modalStyle = {\n backgroundColor: '#ffffff00',\n ...Platform.select<object>({\n android: shadow?.elevation,\n ios: shadow?.shadow,\n web: shadow?.boxShadow,\n }),\n };\n const backgroundStyle = {\n backgroundColor: theme.palette.paper.default,\n };\n\n const isBackdropTransparent = backdropOpacity <= 0;\n\n const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n <BottomSheetBackdrop\n {...props}\n appearsOnIndex={0}\n disappearsOnIndex={-1}\n opacity={backdropOpacity}\n />\n );\n\n return (\n <BottomSheetModalProvider>\n <BottomSheetModal\n backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n // @ts-ignore\n backgroundStyle={backgroundStyle}\n index={index}\n handleComponent={NoHandle}\n onChange={handleChange}\n onDismiss={handleDismiss}\n ref={bottomSheetRef}\n snapPoints={snapPoints}\n style={modalStyle}\n >\n {children}\n </BottomSheetModal>\n </BottomSheetModalProvider>\n );\n};\n"]}
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = ComicViewer;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
12
|
+
var R = _interopRequireWildcard(require("ramda"));
|
|
13
|
+
|
|
14
|
+
var _ViewerItem = _interopRequireDefault(require("./ViewerItem"));
|
|
15
|
+
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
|
|
18
|
+
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); }
|
|
19
|
+
|
|
20
|
+
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; }
|
|
21
|
+
|
|
22
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
23
|
+
|
|
24
|
+
const getItemHeights = items => R.map(content => content.height)(items);
|
|
25
|
+
|
|
26
|
+
const appender = (left, right) => [left + right, left + right];
|
|
27
|
+
|
|
28
|
+
const getHeightAccum = itemHeights => R.mapAccum(appender, 0, itemHeights);
|
|
29
|
+
|
|
30
|
+
const keyExtractor = item => item.id;
|
|
31
|
+
|
|
32
|
+
function ComicViewer(props) {
|
|
33
|
+
const {
|
|
34
|
+
data,
|
|
35
|
+
errorDebounceMillis = 500,
|
|
36
|
+
errorRetryCount = 3,
|
|
37
|
+
initialNumToRender = 1,
|
|
38
|
+
initialScrollPercentage = 0,
|
|
39
|
+
itemVisiblePercentThreshold = 0,
|
|
40
|
+
onError,
|
|
41
|
+
viewerWidth,
|
|
42
|
+
windowSize = 3,
|
|
43
|
+
...otherProps
|
|
44
|
+
} = props;
|
|
45
|
+
const flatListRef = (0, _react.useRef)(null);
|
|
46
|
+
const errors = (0, _react.useRef)(new Map());
|
|
47
|
+
const debounceTimeOut = (0, _react.useRef)(null);
|
|
48
|
+
const resourceString = R.toString(R.map(itemData => itemData.sourceUrl)(data));
|
|
49
|
+
const initialItems = R.map(itemData => ({ ...itemData,
|
|
50
|
+
isViewable: false,
|
|
51
|
+
width: viewerWidth,
|
|
52
|
+
height: itemData.height * viewerWidth / itemData.width
|
|
53
|
+
}))(data);
|
|
54
|
+
const [items, setItems] = (0, _react.useState)(initialItems);
|
|
55
|
+
const itemHeights = getItemHeights(items);
|
|
56
|
+
const itemHeightAccum = getHeightAccum(itemHeights);
|
|
57
|
+
const viewabilityConfig = (0, _react.useMemo)(() => ({
|
|
58
|
+
itemVisiblePercentThreshold
|
|
59
|
+
}), [itemVisiblePercentThreshold]);
|
|
60
|
+
const getItemLayout = (0, _react.useCallback)((data, index) => {
|
|
61
|
+
const offsets = R.prepend(0, itemHeightAccum[1]);
|
|
62
|
+
return {
|
|
63
|
+
length: itemHeights[index],
|
|
64
|
+
offset: offsets[index],
|
|
65
|
+
index
|
|
66
|
+
};
|
|
67
|
+
}, [itemHeights]);
|
|
68
|
+
const onViewableItemsChanged = (0, _react.useRef)(({
|
|
69
|
+
viewableItems
|
|
70
|
+
}) => {
|
|
71
|
+
setItems(prev => {
|
|
72
|
+
const viewableItemIds = R.map(viewableItem => viewableItem.item.id)(viewableItems);
|
|
73
|
+
return R.map(prevItem => ({ ...prevItem,
|
|
74
|
+
isViewable: R.includes(prevItem.id, viewableItemIds)
|
|
75
|
+
}))([...prev]);
|
|
76
|
+
});
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
const onErrorHandler = errors => {
|
|
80
|
+
const isRetryLimited = R.any(error => error.count >= errorRetryCount)(errors);
|
|
81
|
+
|
|
82
|
+
if (isRetryLimited) {
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
onError && onError(errors);
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
const itemErrorHandler = (0, _react.useCallback)(errorInfo => {
|
|
90
|
+
errors.current.set(errorInfo.id, errorInfo.count);
|
|
91
|
+
|
|
92
|
+
if (debounceTimeOut.current) {
|
|
93
|
+
clearTimeout(debounceTimeOut.current);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
debounceTimeOut.current = setTimeout(function () {
|
|
97
|
+
const errorsArray = Array.from(errors.current.entries());
|
|
98
|
+
const errorsInfo = R.map(([key, value]) => ({
|
|
99
|
+
id: key,
|
|
100
|
+
count: value
|
|
101
|
+
}))(errorsArray);
|
|
102
|
+
onErrorHandler([...errorsInfo]);
|
|
103
|
+
errors.current.clear();
|
|
104
|
+
}, errorDebounceMillis);
|
|
105
|
+
}, [errorDebounceMillis, errors.current]);
|
|
106
|
+
const renderItem = (0, _react.useCallback)(({
|
|
107
|
+
item
|
|
108
|
+
}) => {
|
|
109
|
+
const props = { ...item,
|
|
110
|
+
onError: itemErrorHandler
|
|
111
|
+
};
|
|
112
|
+
return /*#__PURE__*/_react.default.createElement(_ViewerItem.default, {
|
|
113
|
+
props: props
|
|
114
|
+
});
|
|
115
|
+
}, []);
|
|
116
|
+
(0, _react.useEffect)(() => {
|
|
117
|
+
setItems(prev => {
|
|
118
|
+
return R.map(prevItem => {
|
|
119
|
+
const currentData = R.find(currentItemData => prevItem.id === currentItemData.id)(data);
|
|
120
|
+
|
|
121
|
+
if (currentData && currentData.sourceUrl !== prevItem.sourceUrl) {
|
|
122
|
+
return { ...prevItem,
|
|
123
|
+
sourceUrl: currentData.sourceUrl
|
|
124
|
+
};
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
return prevItem;
|
|
128
|
+
})([...prev]);
|
|
129
|
+
});
|
|
130
|
+
}, [resourceString]);
|
|
131
|
+
(0, _react.useEffect)(() => {
|
|
132
|
+
const newItems = R.map(item => ({ ...item,
|
|
133
|
+
width: viewerWidth,
|
|
134
|
+
height: item.height * viewerWidth / item.width
|
|
135
|
+
}))(items);
|
|
136
|
+
setItems(newItems);
|
|
137
|
+
}, [viewerWidth]);
|
|
138
|
+
(0, _react.useEffect)(() => {
|
|
139
|
+
const totalHeight = itemHeightAccum[0];
|
|
140
|
+
const offset = Math.floor(initialScrollPercentage / 100 * totalHeight);
|
|
141
|
+
|
|
142
|
+
if (flatListRef.current) {
|
|
143
|
+
flatListRef.current.scrollToOffset({
|
|
144
|
+
offset,
|
|
145
|
+
animated: false
|
|
146
|
+
});
|
|
147
|
+
}
|
|
148
|
+
}, [flatListRef.current]);
|
|
149
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, _extends({
|
|
150
|
+
data: items,
|
|
151
|
+
getItemLayout: getItemLayout,
|
|
152
|
+
initialNumToRender: initialNumToRender,
|
|
153
|
+
keyExtractor: keyExtractor,
|
|
154
|
+
onViewableItemsChanged: onViewableItemsChanged.current,
|
|
155
|
+
ref: flatListRef,
|
|
156
|
+
renderItem: renderItem,
|
|
157
|
+
viewabilityConfig: viewabilityConfig,
|
|
158
|
+
windowSize: windowSize
|
|
159
|
+
}, otherProps));
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
;
|
|
163
|
+
//# sourceMappingURL=ComicViewer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["ComicViewer.tsx"],"names":["getItemHeights","items","R","map","content","height","appender","left","right","getHeightAccum","itemHeights","mapAccum","keyExtractor","item","id","ComicViewer","props","data","errorDebounceMillis","errorRetryCount","initialNumToRender","initialScrollPercentage","itemVisiblePercentThreshold","onError","viewerWidth","windowSize","otherProps","flatListRef","errors","Map","debounceTimeOut","resourceString","toString","itemData","sourceUrl","initialItems","isViewable","width","setItems","itemHeightAccum","viewabilityConfig","getItemLayout","index","offsets","prepend","length","offset","onViewableItemsChanged","viewableItems","prev","viewableItemIds","viewableItem","prevItem","includes","onErrorHandler","isRetryLimited","any","error","count","itemErrorHandler","errorInfo","current","set","clearTimeout","setTimeout","errorsArray","Array","from","entries","errorsInfo","key","value","clear","renderItem","currentData","find","currentItemData","newItems","totalHeight","Math","floor","scrollToOffset","animated"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { FlatList, ListRenderItem, ViewToken } from 'react-native';\nimport * as R from 'ramda';\nimport { ComicViewerItemData, default as ComicViewerProps, ErrorInfo } from './ComicViewerProps';\nimport type ComicViewerItemProps from './ComicViewerItemProps';\nimport ViewerItem from './ViewerItem';\n\nconst getItemHeights = <T, >(items: ComicViewerItemProps<T>[]): number[] => R.map((content: ComicViewerItemProps<T>) => content.height)(items);\nconst appender = (left: number, right: number): [number, number] => [left + right, left + right];\nconst getHeightAccum = (itemHeights: number[]): [number, number[]] => R.mapAccum(appender, 0, itemHeights);\n\nconst keyExtractor = <T, >(item: ComicViewerItemProps<T>) => item.id;\n\nexport default function ComicViewer<T>(props: ComicViewerProps<T>) {\n const {\n data,\n errorDebounceMillis = 500,\n errorRetryCount = 3,\n initialNumToRender = 1,\n initialScrollPercentage = 0,\n itemVisiblePercentThreshold = 0,\n onError,\n viewerWidth,\n windowSize = 3,\n ...otherProps\n } = props;\n\n const flatListRef = useRef<FlatList>(null);\n\n const errors = useRef<Map<string, number>>(new Map());\n const debounceTimeOut = useRef<NodeJS.Timeout | null>(null);\n\n const resourceString = R.toString(R.map((itemData: ComicViewerItemData) => itemData.sourceUrl)(data));\n\n const initialItems = R.map((itemData: ComicViewerItemData<T>) => ({\n ...itemData,\n isViewable: false,\n width: viewerWidth,\n height: (itemData.height * viewerWidth) / itemData.width,\n }))(data);\n\n const [items, setItems] = useState<ComicViewerItemProps<T>[]>(initialItems);\n\n const itemHeights = getItemHeights(items);\n const itemHeightAccum = getHeightAccum(itemHeights);\n\n const viewabilityConfig = useMemo(() => ({\n itemVisiblePercentThreshold,\n }), [itemVisiblePercentThreshold]);\n\n const getItemLayout = useCallback((data: any, index: number) => {\n const offsets = R.prepend(0, itemHeightAccum[1]);\n\n return {\n length: itemHeights[index],\n offset: offsets[index],\n index,\n };\n }, [itemHeights]);\n\n const onViewableItemsChanged = useRef(({ viewableItems }: {\n viewableItems: Array<ViewToken>,\n }) => {\n setItems((prev: ComicViewerItemProps<T>[]) => {\n const viewableItemIds = R.map((viewableItem: ViewToken) => viewableItem.item.id)(viewableItems);\n\n return R.map((prevItem: ComicViewerItemProps<T>) => ({\n ...prevItem,\n isViewable: R.includes(prevItem.id, viewableItemIds),\n }))([...prev]);\n });\n });\n\n const onErrorHandler = (errors: ErrorInfo[]) => {\n const isRetryLimited = R.any((error: ErrorInfo) => error.count >= errorRetryCount)(errors);\n\n if (isRetryLimited) {\n return;\n }\n\n onError && onError(errors);\n };\n\n const itemErrorHandler = useCallback((errorInfo: ErrorInfo) => {\n errors.current.set(errorInfo.id, errorInfo.count);\n\n if (debounceTimeOut.current) {\n clearTimeout(debounceTimeOut.current);\n }\n\n debounceTimeOut.current = setTimeout(function () {\n const errorsArray = Array.from(errors.current.entries());\n const errorsInfo = R.map(([key, value]: [string, number]) => ({\n id: key,\n count: value,\n }))(errorsArray);\n\n onErrorHandler([...errorsInfo]);\n errors.current.clear();\n }, errorDebounceMillis);\n }, [errorDebounceMillis, errors.current]);\n\n const renderItem: ListRenderItem<ComicViewerItemProps<T>> = useCallback(({ item }) => {\n const props = {\n ...item,\n onError: itemErrorHandler,\n };\n\n return <ViewerItem props={props}/>;\n }, []);\n\n useEffect(() => {\n setItems((prev: ComicViewerItemProps<T>[]) => {\n return R.map((prevItem: ComicViewerItemProps<T>) => {\n const currentData = R.find((currentItemData: ComicViewerItemData<T>) => prevItem.id === currentItemData.id)(data);\n\n if (currentData && (currentData.sourceUrl !== prevItem.sourceUrl)) {\n return {\n ...prevItem,\n sourceUrl: currentData.sourceUrl,\n };\n }\n\n return prevItem;\n })([...prev]);\n });\n }, [resourceString]);\n\n useEffect(() => {\n const newItems = R.map((item: ComicViewerItemProps<T>) => ({\n ...item,\n width: viewerWidth,\n height: (item.height * viewerWidth) / item.width,\n }))(items);\n\n setItems(newItems);\n }, [viewerWidth]);\n\n useEffect(() => {\n const totalHeight = itemHeightAccum[0];\n const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);\n\n if (flatListRef.current) {\n flatListRef.current.scrollToOffset({ offset, animated: false });\n }\n }, [flatListRef.current]);\n\n return (\n <FlatList\n data={items}\n getItemLayout={getItemLayout}\n initialNumToRender={initialNumToRender}\n keyExtractor={keyExtractor}\n onViewableItemsChanged={onViewableItemsChanged.current}\n ref={flatListRef}\n renderItem={renderItem}\n viewabilityConfig={viewabilityConfig}\n windowSize={windowSize}\n {...otherProps}\n />\n );\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
|
|
@@ -0,0 +1,87 @@
|
|
|
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({
|
|
25
|
+
props
|
|
26
|
+
}) {
|
|
27
|
+
const {
|
|
28
|
+
height,
|
|
29
|
+
id,
|
|
30
|
+
isViewable,
|
|
31
|
+
onError,
|
|
32
|
+
sourceUrl,
|
|
33
|
+
width
|
|
34
|
+
} = props;
|
|
35
|
+
const [isLoaded, setIsLoaded] = (0, _react.useState)(false);
|
|
36
|
+
const errorCount = (0, _react.useRef)(0);
|
|
37
|
+
const onLoad = (0, _react.useCallback)(() => {
|
|
38
|
+
errorCount.current = 0;
|
|
39
|
+
setIsLoaded(true);
|
|
40
|
+
}, []);
|
|
41
|
+
const handleError = (0, _react.useCallback)(() => {
|
|
42
|
+
errorCount.current = errorCount.current + 1;
|
|
43
|
+
onError && onError({
|
|
44
|
+
id,
|
|
45
|
+
count: errorCount.current
|
|
46
|
+
});
|
|
47
|
+
}, [id]);
|
|
48
|
+
const viewStyle = {
|
|
49
|
+
width,
|
|
50
|
+
height
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
const Placeholder = () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
54
|
+
style: [viewStyle, styles.placeholder]
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
if (!isViewable && !isLoaded) {
|
|
58
|
+
return /*#__PURE__*/_react.default.createElement(Placeholder, null);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
return /*#__PURE__*/_react.default.createElement(_core.Image, {
|
|
62
|
+
disableOutline: true,
|
|
63
|
+
key: sourceUrl,
|
|
64
|
+
onLoad: onLoad,
|
|
65
|
+
onError: handleError,
|
|
66
|
+
source: {
|
|
67
|
+
uri: sourceUrl
|
|
68
|
+
},
|
|
69
|
+
style: viewStyle,
|
|
70
|
+
square: true
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
var _default = /*#__PURE__*/_react.default.memo(ViewerItem, (prevProps, nextProps) => {
|
|
75
|
+
if (prevProps.props.isViewable !== nextProps.props.isViewable) {
|
|
76
|
+
return false;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
if (prevProps.props.sourceUrl !== nextProps.props.sourceUrl) {
|
|
80
|
+
return false;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
return true;
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
exports.default = _default;
|
|
87
|
+
//# sourceMappingURL=ViewerItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["ViewerItem.tsx"],"names":["styles","StyleSheet","create","placeholder","backgroundColor","ViewerItem","props","height","id","isViewable","onError","sourceUrl","width","isLoaded","setIsLoaded","errorCount","onLoad","current","handleError","count","viewStyle","Placeholder","uri","React","memo","prevProps","nextProps"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAGA,MAAMA,MAAM,GAAGC,iBAAWC,MAAX,CAAkB;AAC7BC,EAAAA,WAAW,EAAE;AACTC,IAAAA,eAAe,EAAE;AADR;AADgB,CAAlB,CAAf;;AAMA,SAASC,UAAT,CAAuB;AAAEC,EAAAA;AAAF,CAAvB,EAAsE;AAClE,QAAM;AACFC,IAAAA,MADE;AAEFC,IAAAA,EAFE;AAGFC,IAAAA,UAHE;AAIFC,IAAAA,OAJE;AAKFC,IAAAA,SALE;AAMFC,IAAAA;AANE,MAOFN,KAPJ;AASA,QAAM,CAACO,QAAD,EAAWC,WAAX,IAA0B,qBAAS,KAAT,CAAhC;AAEA,QAAMC,UAAU,GAAG,mBAAe,CAAf,CAAnB;AAEA,QAAMC,MAAM,GAAG,wBAAY,MAAM;AAC7BD,IAAAA,UAAU,CAACE,OAAX,GAAqB,CAArB;AACAH,IAAAA,WAAW,CAAC,IAAD,CAAX;AACH,GAHc,EAGZ,EAHY,CAAf;AAKA,QAAMI,WAAW,GAAG,wBAAY,MAAM;AAClCH,IAAAA,UAAU,CAACE,OAAX,GAAqBF,UAAU,CAACE,OAAX,GAAqB,CAA1C;AAEAP,IAAAA,OAAO,IAAIA,OAAO,CAAC;AACfF,MAAAA,EADe;AAEfW,MAAAA,KAAK,EAAEJ,UAAU,CAACE;AAFH,KAAD,CAAlB;AAIH,GAPmB,EAOjB,CAACT,EAAD,CAPiB,CAApB;AASA,QAAMY,SAAS,GAAG;AAAER,IAAAA,KAAF;AAASL,IAAAA;AAAT,GAAlB;;AAEA,QAAMc,WAAW,GAAG,mBAChB,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CACTD,SADS,EAETpB,MAAM,CAACG,WAFE;AAAb,IADJ;;AAOA,MAAI,CAACM,UAAD,IAAe,CAACI,QAApB,EAA8B;AAC1B,wBAAO,6BAAC,WAAD,OAAP;AACH;;AAED,sBACI,6BAAC,WAAD;AACI,IAAA,cAAc,EAAE,IADpB;AAEI,IAAA,GAAG,EAAEF,SAFT;AAGI,IAAA,MAAM,EAAEK,MAHZ;AAII,IAAA,OAAO,EAAEE,WAJb;AAKI,IAAA,MAAM,EAAE;AAAEI,MAAAA,GAAG,EAAEX;AAAP,KALZ;AAMI,IAAA,KAAK,EAAES,SANX;AAOI,IAAA,MAAM,EAAE;AAPZ,IADJ;AAWH;;4BAEcG,eAAMC,IAAN,CAAWnB,UAAX,EAAuB,CAACoB,SAAD,EAAYC,SAAZ,KAA0B;AAC5D,MAAID,SAAS,CAACnB,KAAV,CAAgBG,UAAhB,KAA+BiB,SAAS,CAACpB,KAAV,CAAgBG,UAAnD,EAA+D;AAC3D,WAAO,KAAP;AACH;;AAED,MAAIgB,SAAS,CAACnB,KAAV,CAAgBK,SAAhB,KAA8Be,SAAS,CAACpB,KAAV,CAAgBK,SAAlD,EAA6D;AACzD,WAAO,KAAP;AACH;;AAED,SAAO,IAAP;AACH,CAVc,C","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"]}
|
|
@@ -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,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './ComicViewer';\nexport type { ComicViewerItemData, default as ComicViewerProps, ErrorInfo } from './ComicViewerProps';\nexport type { default as ComicViewerItemProps } from './ComicViewerItemProps';"]}
|
|
@@ -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.background.default,
|
|
104
|
+
calendarBackground: theme.palette.background.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,"sources":["DateTimePicker.tsx"],"names":["useDateTimePicker","React","useContext","DateTimePickerContext","DateTimePicker","props","currentMonth","Date","locale","markedDate","markedDateProp","maxDate","minDate","onDayPress","onYearPress","onYearPressProp","theme","yearPickerVisible","setYearPickerVisible","useState","locales","LeftArrow","RightArrow","date","LocaleConfig","defaultLocale","direction","selected","disableTouchEvent","selectedColor","palette","primary","main","selectedTextColor","contrastTextColor","toDate"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;AAPA;AASA,MAAMA,iBAAiB,GAAG,MAAM;AAC5B,SAAOC,eAAMC,UAAN,CAAiBC,6CAAjB,CAAP;AACH,CAFD;;AAIe,SAASC,cAAT,CAAwBC,KAAxB,EAAoD;AAC/D,QAAM;AACFC,IAAAA,YAAY,GAAG,IAAIC,IAAJ,EADb;AAEFC,IAAAA,MAFE;AAGFC,IAAAA,UAAU,EAAEC,cAHV;AAIFC,IAAAA,OAJE;AAKFC,IAAAA,OALE;AAMFC,IAAAA,UANE;AAOFC,IAAAA,WAAW,EAAEC;AAPX,MAQFV,KARJ;AAUA,QAAMW,KAAK,GAAG,uBAAd;;AAEA,QAAM,CAACC,iBAAD,EAAoBC,oBAApB,IAA4CjB,eAAMkB,QAAN,CAAe,KAAf,CAAlD;;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAcpB,iBAAiB,EAArC,CAd+D,CAgB/D;;AACA,QAAMqB,SAAS,gBAAG,6BAAC,gBAAD;AAAY,IAAA,QAAQ,EAAE,GAAtB;AAA2B,IAAA,KAAK,EAAE;AAAlC,IAAlB;;AACA,QAAMC,UAAU,gBAAG,6BAAC,gBAAD;AAAY,IAAA,QAAQ,EAAE,GAAtB;AAA2B,IAAA,KAAK,EAAE;AAAlC,IAAnB;;AAEA,QAAMR,WAAW,GAAIS,IAAD,IAAgB;AAChCL,IAAAA,oBAAoB,CAAC,KAAD,CAApB;AACAH,IAAAA,eAAe,IAAIA,eAAe,CAACQ,IAAD,CAAlC;AACH,GAHD;;AAKA,MAAIf,MAAJ,EAAY;AACRgB,uCAAaJ,OAAb,GAAuBA,OAAvB;AACAI,uCAAaC,aAAb,GAA6BjB,MAA7B;AACH;;AAED,QAAMC,UAAU,GAAGC,cAAc,GAAG,qBAAOA,cAAP,EAAuB,YAAvB,CAAH,GAA0C,EAA3E;;AAEA,MAAIO,iBAAJ,EAAuB;AACnB,wBACI,6BAAC,mBAAD;AACI,MAAA,IAAI,EAAEX,YADV;AAEI,MAAA,MAAM,EAAEE,MAFZ;AAGI,MAAA,OAAO,EAAEG,OAHb;AAII,MAAA,OAAO,EAAEC,OAJb;AAKI,MAAA,WAAW,EAAEE;AALjB,MADJ;AASH;;AAED,sBACI,6BAAC,8BAAD;AACI,IAAA,OAAO,EAAER,YADb;AAEI,IAAA,UAAU,EAAEO,UAFhB;AAGI,IAAA,OAAO,EAAEF,OAHb;AAII,IAAA,OAAO,EAAEC,OAJb;AAKI,IAAA,WAAW,EAAGc,SAAD,IAAuBA,SAAS,KAAK,MAAd,GAAuBL,SAAvB,GAAmCC,UAL3E;AAMI,IAAA,WAAW,EAAE;AACT,OAACb,UAAD,GAAc;AACVkB,QAAAA,QAAQ,EAAE,IADA;AAEVC,QAAAA,iBAAiB,EAAE,IAFT;AAGVC,QAAAA,aAAa,EAAEb,KAAK,CAACc,OAAN,CAAcC,OAAd,CAAsBC,IAH3B;AAIVC,QAAAA,iBAAiB,EAAEjB,KAAK,CAACc,OAAN,CAAcC,OAAd,CAAsBG;AAJ/B;AADL,KANjB,CAcI;AAdJ;AAeI,IAAA,YAAY,EAAGX,IAAD,iBACV,6BAAC,YAAD;AACI,MAAA,QAAQ,EAAE,uBAAWA,IAAI,CAACY,MAAL,EAAX,EAA0B3B,MAA1B,CADd;AAEI,MAAA,OAAO,EAAE,MAFb;AAGI,MAAA,IAAI,EAAE,OAHV;AAII,MAAA,OAAO,EAAE,MAAMU,oBAAoB,CAAC,IAAD;AAJvC;
|
|
1
|
+
{"version":3,"sources":["DateTimePicker.tsx"],"names":["useDateTimePicker","React","useContext","DateTimePickerContext","DateTimePicker","props","currentMonth","Date","locale","markedDate","markedDateProp","maxDate","minDate","onDayPress","onYearPress","onYearPressProp","theme","yearPickerVisible","setYearPickerVisible","useState","locales","LeftArrow","RightArrow","date","LocaleConfig","defaultLocale","direction","selected","disableTouchEvent","selectedColor","palette","primary","main","selectedTextColor","contrastTextColor","toDate","backgroundColor","background","default","calendarBackground","dayTextColor","text","textDisabledColor","hint"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { format } from 'date-fns';\n//@ts-ignore\nimport { Calendar, LocaleConfig } from 'react-native-calendars';\nimport { Button, Typography } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport YearPicker from './YearPicker';\nimport { DateTimePickerContext } from './DateTimePickerProvider';\nimport type DateTimePickerProps from './DateTimePickerProps';\nimport { formatDate } from './utils';\n\nconst useDateTimePicker = () => {\n return React.useContext(DateTimePickerContext);\n};\n\nexport default function DateTimePicker(props: DateTimePickerProps) {\n const {\n currentMonth = new Date(),\n locale,\n markedDate: markedDateProp,\n maxDate,\n minDate,\n onDayPress,\n onYearPress: onYearPressProp,\n } = props;\n\n const theme = useTheme();\n\n const [yearPickerVisible, setYearPickerVisible] = React.useState(false);\n const { locales } = useDateTimePicker();\n\n //TODO: Need to update arrow components\n const LeftArrow = <Typography children={'<'} color={'textPrimary'}/>;\n const RightArrow = <Typography children={'>'} color={'textPrimary'}/>;\n\n const onYearPress = (date: Date) => {\n setYearPickerVisible(false);\n onYearPressProp && onYearPressProp(date);\n };\n\n if (locale) {\n LocaleConfig.locales = locales;\n LocaleConfig.defaultLocale = locale;\n }\n\n const markedDate = markedDateProp ? format(markedDateProp, 'yyyy-MM-dd') : '';\n\n if (yearPickerVisible) {\n return (\n <YearPicker\n date={currentMonth}\n locale={locale}\n maxDate={maxDate}\n minDate={minDate}\n onYearPress={onYearPress}\n />\n );\n }\n\n return (\n <Calendar\n current={currentMonth}\n onDayPress={onDayPress}\n maxDate={maxDate}\n minDate={minDate}\n renderArrow={(direction: string) => direction === 'left' ? LeftArrow : RightArrow}\n markedDates={{\n [markedDate]: {\n selected: true,\n disableTouchEvent: true,\n selectedColor: theme.palette.primary.main,\n selectedTextColor: theme.palette.primary.contrastTextColor,\n },\n }}\n // @ts-ignore\n renderHeader={(date) => (\n <Button\n children={formatDate(date.toDate(), locale)}\n variant={'text'}\n size={'small'}\n onPress={() => setYearPickerVisible(true)}\n />\n )}\n theme={{\n backgroundColor: theme.palette.background.default,\n calendarBackground: theme.palette.background.default,\n dayTextColor: theme.palette.text.primary,\n textDisabledColor: theme.palette.text.hint,\n }}\n />\n );\n};\n"]}
|
|
@@ -62,6 +62,7 @@ const YearPicker = ({
|
|
|
62
62
|
|
|
63
63
|
return /*#__PURE__*/_react.default.createElement(_core.Column, null, /*#__PURE__*/_react.default.createElement(_core.Typography, {
|
|
64
64
|
children: (0, _utils.formatDate)(date, locale),
|
|
65
|
+
color: 'textPrimary',
|
|
65
66
|
variant: 'subtitle2'
|
|
66
67
|
}), /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
|
|
67
68
|
data: years,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["YearPicker.tsx"],"names":["initYear","itemHeight","useStyles","theme","list","marginTop","spacing","maxHeight","YearPicker","date","locale","maxDate","minDate","onYearPress","styles","ref","React","useRef","minYear","maxYear","Date","years","Array","fill","map","v","i","useEffect","current","scrollToItem","animated","item","getItemLayout","data","index","length","offset","toString","newDate"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;AAEA,MAAMA,QAAQ,GAAG,IAAjB;AACA,MAAMC,UAAU,GAAG,EAAnB;;AAYA,MAAMC,SAAsC,GAAG,YAA8B;AACzE,QAAMC,KAAK,GAAG,qBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,SAAS,EAAEF,KAAK,CAACG,OAAN,CAAc,CAAd,CADT;AAEFC,MAAAA,SAAS,EAAE;AAFT;AADH,GAAP;AAMH,CATD;;AAWA,MAAMC,UAAU,GAAG,CAAC;AAChBC,EAAAA,IADgB;AAEhBC,EAAAA,MAFgB;AAGhBC,EAAAA,OAHgB;AAIhBC,EAAAA,OAJgB;AAKhBC,EAAAA;AALgB,CAAD,KAMI;AACnB,QAAMC,MAAM,GAAGZ,SAAS,EAAxB;;AAEA,QAAMa,GAAG,GAAGC,eAAMC,MAAN,CAA8B,IAA9B,CAAZ;;AAEA,QAAMC,OAAO,GAAGN,OAAO,GAAG,sBAAQA,OAAR,CAAH,GAAsBZ,QAA7C;AACA,QAAMmB,OAAO,GAAGR,OAAO,GAAG,sBAAQA,OAAR,CAAH,GAAsB,sBAAQ,IAAIS,IAAJ,EAAR,CAA7C;AACA,QAAMC,KAAK,GAAGC,KAAK,CAACH,OAAO,GAAGD,OAAV,GAAoB,CAArB,CAAL,CAA6BK,IAA7B,CAAkCL,OAAlC,EAA2CM,GAA3C,CAA+C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA7D,CAAd;;AAEAV,iBAAMW,SAAN,CAAgB,MAAM;AAAA;;AAClB,oBAAAZ,GAAG,CAACa,OAAJ,8DAAaC,YAAb,CAA0B;AACtBC,MAAAA,QAAQ,EAAE,KADY;AAEtBC,MAAAA,IAAI,EAAE,sBAAQtB,IAAR;AAFgB,KAA1B;AAIH,GALD,EAKG,CAACA,IAAD,CALH;;AAOA,QAAMuB,aAAa,GAAG,CAACC,IAAD,EAAyCC,KAAzC,MAA4D;AAC9EC,IAAAA,MAAM,EAAElC,UADsE;AAE9EmC,IAAAA,MAAM,EAAEnC,UAAU,GAAGiC,KAFyD;AAG9EA,IAAAA;AAH8E,GAA5D,CAAtB;;AAMA,sBACI,6BAAC,YAAD,qBACI,6BAAC,gBAAD;AACI,IAAA,QAAQ,EAAE,uBAAWzB,IAAX,EAAiBC,MAAjB,CADd;AAEI,IAAA,OAAO,EAAE;
|
|
1
|
+
{"version":3,"sources":["YearPicker.tsx"],"names":["initYear","itemHeight","useStyles","theme","list","marginTop","spacing","maxHeight","YearPicker","date","locale","maxDate","minDate","onYearPress","styles","ref","React","useRef","minYear","maxYear","Date","years","Array","fill","map","v","i","useEffect","current","scrollToItem","animated","item","getItemLayout","data","index","length","offset","toString","newDate"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;AAEA,MAAMA,QAAQ,GAAG,IAAjB;AACA,MAAMC,UAAU,GAAG,EAAnB;;AAYA,MAAMC,SAAsC,GAAG,YAA8B;AACzE,QAAMC,KAAK,GAAG,qBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,SAAS,EAAEF,KAAK,CAACG,OAAN,CAAc,CAAd,CADT;AAEFC,MAAAA,SAAS,EAAE;AAFT;AADH,GAAP;AAMH,CATD;;AAWA,MAAMC,UAAU,GAAG,CAAC;AAChBC,EAAAA,IADgB;AAEhBC,EAAAA,MAFgB;AAGhBC,EAAAA,OAHgB;AAIhBC,EAAAA,OAJgB;AAKhBC,EAAAA;AALgB,CAAD,KAMI;AACnB,QAAMC,MAAM,GAAGZ,SAAS,EAAxB;;AAEA,QAAMa,GAAG,GAAGC,eAAMC,MAAN,CAA8B,IAA9B,CAAZ;;AAEA,QAAMC,OAAO,GAAGN,OAAO,GAAG,sBAAQA,OAAR,CAAH,GAAsBZ,QAA7C;AACA,QAAMmB,OAAO,GAAGR,OAAO,GAAG,sBAAQA,OAAR,CAAH,GAAsB,sBAAQ,IAAIS,IAAJ,EAAR,CAA7C;AACA,QAAMC,KAAK,GAAGC,KAAK,CAACH,OAAO,GAAGD,OAAV,GAAoB,CAArB,CAAL,CAA6BK,IAA7B,CAAkCL,OAAlC,EAA2CM,GAA3C,CAA+C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA7D,CAAd;;AAEAV,iBAAMW,SAAN,CAAgB,MAAM;AAAA;;AAClB,oBAAAZ,GAAG,CAACa,OAAJ,8DAAaC,YAAb,CAA0B;AACtBC,MAAAA,QAAQ,EAAE,KADY;AAEtBC,MAAAA,IAAI,EAAE,sBAAQtB,IAAR;AAFgB,KAA1B;AAIH,GALD,EAKG,CAACA,IAAD,CALH;;AAOA,QAAMuB,aAAa,GAAG,CAACC,IAAD,EAAyCC,KAAzC,MAA4D;AAC9EC,IAAAA,MAAM,EAAElC,UADsE;AAE9EmC,IAAAA,MAAM,EAAEnC,UAAU,GAAGiC,KAFyD;AAG9EA,IAAAA;AAH8E,GAA5D,CAAtB;;AAMA,sBACI,6BAAC,YAAD,qBACI,6BAAC,gBAAD;AACI,IAAA,QAAQ,EAAE,uBAAWzB,IAAX,EAAiBC,MAAjB,CADd;AAEI,IAAA,KAAK,EAAE,aAFX;AAGI,IAAA,OAAO,EAAE;AAHb,IADJ,eAMI,6BAAC,qBAAD;AACI,IAAA,IAAI,EAAEW,KADV;AAEI,IAAA,YAAY,EAAEU,IAAI,IAAIA,IAAI,CAACM,QAAL,EAF1B;AAGI,IAAA,UAAU,EAAE,CAAC;AAAEN,MAAAA;AAAF,KAAD,kBACR,6BAAC,YAAD;AACI,MAAA,QAAQ,EAAEA,IAAI,CAACM,QAAL,EADd;AAEI,MAAA,OAAO,EAAE,MAFb;AAGI,MAAA,OAAO,EAAE,MAAM;AACX,cAAMC,OAAO,GAAG,sBAAQ7B,IAAR,EAAcsB,IAAd,CAAhB;AACAlB,QAAAA,WAAW,CAACyB,OAAD,CAAX;AACH;AANL,MAJR;AAaI,IAAA,aAAa,EAAEN,aAbnB;AAcI,IAAA,KAAK,EAAElB,MAAM,CAACV,IAdlB;AAeI,IAAA,GAAG,EAAEW;AAfT,IANJ,CADJ;AA0BH,CAtDD;;eAwDeP,U","sourcesContent":["import React from 'react';\nimport { FlatList } from 'react-native';\nimport { getYear, setYear } from 'date-fns';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { Button, Column, Typography, useTheme } from '@fountain-ui/core';\nimport { formatDate } from './utils';\n\nconst initYear = 1901;\nconst itemHeight = 40;\n\ninterface YearPickerProps {\n date: Date;\n locale?: string,\n maxDate?: Date;\n minDate?: Date;\n onYearPress: (date: Date) => void;\n}\n\ntype YearPickerStyles = NamedStylesStringUnion<'list'>;\n\nconst useStyles: UseStyles<YearPickerStyles> = function (): YearPickerStyles {\n const theme = useTheme();\n\n return {\n list: {\n marginTop: theme.spacing(1),\n maxHeight: 270,\n },\n };\n};\n\nconst YearPicker = ({\n date,\n locale,\n maxDate,\n minDate,\n onYearPress,\n}: YearPickerProps) => {\n const styles = useStyles();\n\n const ref = React.useRef<FlatList | null>(null);\n\n const minYear = minDate ? getYear(minDate) : initYear;\n const maxYear = maxDate ? getYear(maxDate) : getYear(new Date());\n const years = Array(maxYear - minYear + 1).fill(minYear).map((v, i) => v + i);\n\n React.useEffect(() => {\n ref.current?.scrollToItem({\n animated: false,\n item: getYear(date),\n });\n }, [date]);\n\n const getItemLayout = (data: Array<number> | null | undefined, index: number) => ({\n length: itemHeight,\n offset: itemHeight * index,\n index,\n });\n\n return (\n <Column>\n <Typography\n children={formatDate(date, locale)}\n color={'textPrimary'}\n variant={'subtitle2'}\n />\n <FlatList\n data={years}\n keyExtractor={item => item.toString()}\n renderItem={({ item }) => (\n <Button\n children={item.toString()}\n variant={'text'}\n onPress={() => {\n const newDate = setYear(date, item);\n onYearPress(newDate);\n }}\n />\n )}\n getItemLayout={getItemLayout}\n style={styles.list}\n ref={ref}\n />\n </Column>\n );\n};\n\nexport default YearPicker;\n"]}
|
package/build/commonjs/index.js
CHANGED
|
@@ -9,6 +9,7 @@ var _exportNames = {
|
|
|
9
9
|
DateTimePicker: true,
|
|
10
10
|
FlipCard: true,
|
|
11
11
|
ViewPager: true,
|
|
12
|
+
ComicViewer: true,
|
|
12
13
|
StatusBarProvider: true,
|
|
13
14
|
useStatusBarContext: true
|
|
14
15
|
};
|
|
@@ -42,6 +43,12 @@ Object.defineProperty(exports, "ViewPager", {
|
|
|
42
43
|
return _ViewPager.default;
|
|
43
44
|
}
|
|
44
45
|
});
|
|
46
|
+
Object.defineProperty(exports, "ComicViewer", {
|
|
47
|
+
enumerable: true,
|
|
48
|
+
get: function () {
|
|
49
|
+
return _ComicViewer.default;
|
|
50
|
+
}
|
|
51
|
+
});
|
|
45
52
|
Object.defineProperty(exports, "StatusBarProvider", {
|
|
46
53
|
enumerable: true,
|
|
47
54
|
get: function () {
|
|
@@ -125,6 +132,20 @@ Object.keys(_ViewPager).forEach(function (key) {
|
|
|
125
132
|
});
|
|
126
133
|
});
|
|
127
134
|
|
|
135
|
+
var _ComicViewer = _interopRequireWildcard(require("./ComicViewer"));
|
|
136
|
+
|
|
137
|
+
Object.keys(_ComicViewer).forEach(function (key) {
|
|
138
|
+
if (key === "default" || key === "__esModule") return;
|
|
139
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
140
|
+
if (key in exports && exports[key] === _ComicViewer[key]) return;
|
|
141
|
+
Object.defineProperty(exports, key, {
|
|
142
|
+
enumerable: true,
|
|
143
|
+
get: function () {
|
|
144
|
+
return _ComicViewer[key];
|
|
145
|
+
}
|
|
146
|
+
});
|
|
147
|
+
});
|
|
148
|
+
|
|
128
149
|
var _StatusBarProvider = _interopRequireWildcard(require("./StatusBarProvider"));
|
|
129
150
|
|
|
130
151
|
Object.keys(_StatusBarProvider).forEach(function (key) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default as BottomSheet } from './BottomSheet';\nexport * from './BottomSheet';\n\nexport { default as Carousel } from './Carousel';\nexport * from './Carousel';\n\nexport { default as DateTimePicker } from './DateTimePicker';\nexport * from './DateTimePicker';\n\nexport { default as FlipCard } from './FlipCard';\nexport * from './FlipCard';\n\nexport { default as ViewPager } from './ViewPager';\nexport * from './ViewPager';\n\nexport { default as ComicViewer } from './ComicViewer';\nexport * from './ComicViewer';\n\nexport { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';\nexport * from './StatusBarProvider';\n\nexport * from './hooks';\n"]}
|
|
@@ -44,6 +44,7 @@ export default function BottomSheet(props) {
|
|
|
44
44
|
} else {
|
|
45
45
|
var _bottomSheetRef$curre3;
|
|
46
46
|
|
|
47
|
+
// @ts-ignore
|
|
47
48
|
(_bottomSheetRef$curre3 = bottomSheetRef.current) === null || _bottomSheetRef$curre3 === void 0 ? void 0 : _bottomSheetRef$curre3.snapToIndex(index);
|
|
48
49
|
}
|
|
49
50
|
}, [index]);
|
|
@@ -57,6 +58,9 @@ export default function BottomSheet(props) {
|
|
|
57
58
|
web: shadow === null || shadow === void 0 ? void 0 : shadow.boxShadow
|
|
58
59
|
})
|
|
59
60
|
};
|
|
61
|
+
const backgroundStyle = {
|
|
62
|
+
backgroundColor: theme.palette.paper.default
|
|
63
|
+
};
|
|
60
64
|
const isBackdropTransparent = backdropOpacity <= 0;
|
|
61
65
|
|
|
62
66
|
const OpacityAwareBackdrop = props => /*#__PURE__*/React.createElement(BottomSheetBackdrop, _extends({}, props, {
|
|
@@ -66,7 +70,9 @@ export default function BottomSheet(props) {
|
|
|
66
70
|
}));
|
|
67
71
|
|
|
68
72
|
return /*#__PURE__*/React.createElement(BottomSheetModalProvider, null, /*#__PURE__*/React.createElement(BottomSheetModal, {
|
|
69
|
-
backdropComponent: isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop
|
|
73
|
+
backdropComponent: isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop // @ts-ignore
|
|
74
|
+
,
|
|
75
|
+
backgroundStyle: backgroundStyle,
|
|
70
76
|
index: index,
|
|
71
77
|
handleComponent: NoHandle,
|
|
72
78
|
onChange: handleChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["BottomSheetNative.tsx"],"names":["React","Platform","useTheme","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","TransparentBackdrop","NoHandle","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","indexRef","useRef","bottomSheetRef","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","shadow","modalStyle","backgroundColor","select","android","elevation","ios","web","boxShadow","isBackdropTransparent","OpacityAwareBackdrop"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,QAAT,QAAyB,qBAAzB;AACA,SACIC,mBADJ,EAGIC,gBAHJ,EAIIC,wBAJJ,QAKO,sBALP;AAOA,OAAOC,mBAAP,MAAgC,uBAAhC;;AAEA,MAAMC,QAAQ,GAAG,MAAM,IAAvB;;AAEA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;AACzD,QAAM;AACFC,IAAAA,eAAe,GAAG,GADhB;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,KAHE;AAIFC,IAAAA,QAJE;AAKFC,IAAAA;AALE,MAMFL,KANJ;AAQA,QAAMM,QAAQ,GAAGf,KAAK,CAACgB,MAAN,CAAqB,CAAC,CAAtB,CAAjB;AACA,QAAMC,cAAc,GAAGjB,KAAK,CAACgB,MAAN,CAAsC,IAAtC,CAAvB;AAEA,QAAME,YAAY,GAAGlB,KAAK,CAACmB,WAAN,CAAmBC,QAAD,IAAsB;AACzDL,IAAAA,QAAQ,CAACM,OAAT,GAAmBD,QAAnB;;AAEA,QAAIP,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAACO,QAAD,CAAR;AACH;AACJ,GANoB,EAMlB,CAACP,QAAD,CANkB,CAArB;AAQA,QAAMS,aAAa,GAAGtB,KAAK,CAACmB,WAAN,CAAkB,MAAM;AAC1CD,IAAAA,YAAY,CAAC,CAAC,CAAF,CAAZ;AACH,GAFqB,EAEnB,CAACA,YAAD,CAFmB,CAAtB;AAIAlB,EAAAA,KAAK,CAACuB,SAAN,CAAgB,MAAM;AAClB,QAAIX,KAAK,KAAKG,QAAQ,CAACM,OAAvB,EAAgC;AAC5B;AACH;;AAED,QAAIN,QAAQ,CAACM,OAAT,GAAmB,CAAnB,IAAwBT,KAAK,IAAI,CAArC,EAAwC;AAAA;;AACpC,+BAAAK,cAAc,CAACI,OAAf,gFAAwBG,OAAxB;AACH,KAFD,MAEO,IAAIT,QAAQ,CAACM,OAAT,IAAoB,CAApB,IAAyBT,KAAK,GAAG,CAArC,EAAwC;AAAA;;AAC3C,gCAAAK,cAAc,CAACI,OAAf,kFAAwBI,OAAxB;AACH,KAFM,MAEA;AAAA;;AACH,gCAAAR,cAAc,CAACI,OAAf,kFAAwBK,WAAxB,CAAoCd,KAApC;AACH;AACJ,
|
|
1
|
+
{"version":3,"sources":["BottomSheetNative.tsx"],"names":["React","Platform","useTheme","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","TransparentBackdrop","NoHandle","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","indexRef","useRef","bottomSheetRef","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","shadow","modalStyle","backgroundColor","select","android","elevation","ios","web","boxShadow","backgroundStyle","palette","paper","default","isBackdropTransparent","OpacityAwareBackdrop"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Platform } from 'react-native';\nimport { useTheme } from '@fountain-ui/styles';\nimport {\n BottomSheetBackdrop,\n BottomSheetBackdropProps,\n BottomSheetModal,\n BottomSheetModalProvider,\n} from '@gorhom/bottom-sheet';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n const {\n backdropOpacity = 0.5,\n children,\n index,\n onChange,\n snapPoints,\n } = props;\n\n const indexRef = React.useRef<number>(-1);\n const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);\n\n const handleChange = React.useCallback((newIndex: number) => {\n indexRef.current = newIndex;\n\n if (onChange) {\n onChange(newIndex);\n }\n }, [onChange]);\n\n const handleDismiss = React.useCallback(() => {\n handleChange(-1);\n }, [handleChange]);\n\n React.useEffect(() => {\n if (index === indexRef.current) {\n return;\n }\n\n if (indexRef.current < 0 && index >= 0) {\n bottomSheetRef.current?.present();\n } else if (indexRef.current >= 0 && index < 0) {\n bottomSheetRef.current?.dismiss();\n } else {\n // @ts-ignore\n bottomSheetRef.current?.snapToIndex(index);\n }\n }, [index]);\n\n const theme = useTheme();\n const shadow = theme.shadow[12];\n const modalStyle = {\n backgroundColor: '#ffffff00',\n ...Platform.select<object>({\n android: shadow?.elevation,\n ios: shadow?.shadow,\n web: shadow?.boxShadow,\n }),\n };\n const backgroundStyle = {\n backgroundColor: theme.palette.paper.default,\n };\n\n const isBackdropTransparent = backdropOpacity <= 0;\n\n const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n <BottomSheetBackdrop\n {...props}\n appearsOnIndex={0}\n disappearsOnIndex={-1}\n opacity={backdropOpacity}\n />\n );\n\n return (\n <BottomSheetModalProvider>\n <BottomSheetModal\n backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n // @ts-ignore\n backgroundStyle={backgroundStyle}\n index={index}\n handleComponent={NoHandle}\n onChange={handleChange}\n onDismiss={handleDismiss}\n ref={bottomSheetRef}\n snapPoints={snapPoints}\n style={modalStyle}\n >\n {children}\n </BottomSheetModal>\n </BottomSheetModalProvider>\n );\n};\n"]}
|