@fountain-ui/lab 2.0.0-beta.6 → 2.0.0-beta.9
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 +1 -1
- 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 +16 -11
- package/build/commonjs/ComicViewer/ComicViewer.js.map +1 -1
- package/build/commonjs/ComicViewer/ComicViewerItemProps.js.map +1 -1
- package/build/commonjs/ComicViewer/ComicViewerProps.js.map +1 -1
- package/build/commonjs/ComicViewer/ViewerItem.js +4 -3
- package/build/commonjs/ComicViewer/ViewerItem.js.map +1 -1
- package/build/commonjs/ComicViewer/index.js.map +1 -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 +21 -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 +1 -1
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerNative.js +19 -16
- package/build/commonjs/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerProps.js.map +1 -1
- 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 +13 -11
- 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 +54 -53
- 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 +10 -10
- 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 +1 -1
- 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 +16 -11
- package/build/module/ComicViewer/ComicViewer.js.map +1 -1
- package/build/module/ComicViewer/ComicViewerItemProps.js.map +1 -1
- package/build/module/ComicViewer/ComicViewerProps.js.map +1 -1
- package/build/module/ComicViewer/ViewerItem.js +4 -3
- package/build/module/ComicViewer/ViewerItem.js.map +1 -1
- package/build/module/ComicViewer/index.js.map +1 -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 +21 -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 +1 -1
- package/build/module/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/module/ViewPager/ViewPagerNative.js +15 -10
- package/build/module/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/module/ViewPager/ViewPagerProps.js.map +1 -1
- 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 +11 -10
- 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 +56 -39
- 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.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 +0 -1
- 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/ViewPagerNative.d.ts +0 -1
- package/build/typescript/ViewPager/ViewPagerWeb.d.ts +0 -1
- package/build/typescript/hooks/useUnstableCollapsibleAppBar.d.ts +2 -2
- package/build/typescript/hooks/useUnstableToggleDisplayStyle.d.ts +2 -2
- package/package.json +10 -9
- package/src/AnimatedY/AnimatedY.tsx +13 -10
- package/src/FlipCard/FlipCard.tsx +8 -8
- package/src/ViewPager/ViewPagerNative.tsx +18 -11
- package/src/hooks/useHeight.ts +2 -2
- package/src/hooks/useUnstableCollapsibleAppBar.ts +57 -35
- package/src/hooks/useUnstableToggleDisplayStyle.ts +8 -6
- 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
|
@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = useUnstableCollapsibleAppBar;
|
|
7
7
|
|
|
8
|
-
var _react =
|
|
8
|
+
var _react = require("react");
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
var _reactNativeReanimated =
|
|
12
|
+
var _reactNativeReanimated = require("react-native-reanimated");
|
|
13
13
|
|
|
14
14
|
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
|
|
15
15
|
|
|
@@ -21,10 +21,6 @@ var _useHeight = _interopRequireDefault(require("./useHeight"));
|
|
|
21
21
|
|
|
22
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
23
|
|
|
24
|
-
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); }
|
|
25
|
-
|
|
26
|
-
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; }
|
|
27
|
-
|
|
28
24
|
const defaultOptions = {
|
|
29
25
|
shouldTranslateYReset: false
|
|
30
26
|
};
|
|
@@ -38,7 +34,8 @@ function useLargerValueOfLastTwoValues(value) {
|
|
|
38
34
|
return Math.max(...refLatestTwoValues.current);
|
|
39
35
|
}
|
|
40
36
|
|
|
41
|
-
function useUnstableCollapsibleAppBar(
|
|
37
|
+
function useUnstableCollapsibleAppBar() {
|
|
38
|
+
let userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
|
|
42
39
|
const {
|
|
43
40
|
shouldTranslateYReset
|
|
44
41
|
} = { ...defaultOptions,
|
|
@@ -49,53 +46,58 @@ function useUnstableCollapsibleAppBar(userOptions = defaultOptions) {
|
|
|
49
46
|
const [appBarHeight, onAppBarLayout] = (0, _useHeight.default)();
|
|
50
47
|
const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);
|
|
51
48
|
const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = (0, _useHeight.default)();
|
|
49
|
+
const maxTranslateY = (0, _reactNativeReanimated.useDerivedValue)(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
|
|
50
|
+
const translateY = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
51
|
+
const lastTranslateY = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
52
|
+
const lastOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
53
|
+
const prevOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
54
|
+
const overlapped = (0, _reactNativeReanimated.useSharedValue)(false);
|
|
55
|
+
const vectorY = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
56
|
+
const elevationStyle = (0, _useElevationStyle.default)(4);
|
|
57
|
+
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
58
|
+
const transform = [{
|
|
59
|
+
translateY: translateY.value
|
|
60
|
+
}];
|
|
61
|
+
|
|
62
|
+
if (_reactNative.Platform.OS === 'web') {
|
|
63
|
+
return {
|
|
64
|
+
transform,
|
|
65
|
+
boxShadow: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.boxShadow : 0
|
|
66
|
+
};
|
|
67
|
+
}
|
|
52
68
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
const lastOffsetY = _reactNativeReanimated.default.useSharedValue(0);
|
|
60
|
-
|
|
61
|
-
const prevOffsetY = _reactNativeReanimated.default.useSharedValue(0);
|
|
62
|
-
|
|
63
|
-
const overlapped = _reactNativeReanimated.default.useSharedValue(false);
|
|
64
|
-
|
|
65
|
-
const vectorY = _reactNativeReanimated.default.useSharedValue(0);
|
|
69
|
+
if (_reactNative.Platform.OS === 'android') {
|
|
70
|
+
return {
|
|
71
|
+
transform,
|
|
72
|
+
elevation: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.elevation : 0
|
|
73
|
+
};
|
|
74
|
+
}
|
|
66
75
|
|
|
67
|
-
|
|
76
|
+
if (_reactNative.Platform.OS === 'ios') {
|
|
77
|
+
return {
|
|
78
|
+
transform,
|
|
79
|
+
shadowColor: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowColor,
|
|
80
|
+
shadowOffset: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOffset,
|
|
81
|
+
shadowRadius: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowRadius,
|
|
82
|
+
shadowOpacity: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOpacity : 0
|
|
83
|
+
};
|
|
84
|
+
}
|
|
68
85
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
translateY: translateY.value
|
|
78
|
-
}],
|
|
79
|
-
elevation: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.elevation : 0,
|
|
80
|
-
shadowColor: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowColor,
|
|
81
|
-
shadowOffset: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOffset,
|
|
82
|
-
shadowRadius: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowRadius,
|
|
83
|
-
shadowOpacity: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOpacity : 0
|
|
84
|
-
};
|
|
85
|
-
});
|
|
86
|
-
|
|
87
|
-
const indexRef = _react.default.useRef(0);
|
|
88
|
-
|
|
89
|
-
const offsetsRef = _react.default.useRef([]);
|
|
86
|
+
return {};
|
|
87
|
+
}, [
|
|
88
|
+
/**
|
|
89
|
+
* FIXME: Consider add `elevationStyle` to dependencies.
|
|
90
|
+
*/
|
|
91
|
+
]);
|
|
92
|
+
const indexRef = (0, _react.useRef)(0);
|
|
93
|
+
const offsetsRef = (0, _react.useRef)([]);
|
|
90
94
|
|
|
91
95
|
const onScrollViewChanged = nextIndex => {
|
|
92
|
-
var _offsetsRef$current$n;
|
|
93
|
-
|
|
94
96
|
const prevIndex = indexRef.current;
|
|
95
97
|
|
|
96
98
|
if (prevIndex === nextIndex) {
|
|
97
99
|
if (shouldTranslateYReset) {
|
|
98
|
-
translateY.value = _reactNativeReanimated.
|
|
100
|
+
translateY.value = (0, _reactNativeReanimated.withTiming)(0, {
|
|
99
101
|
duration: ANIMATION_DURATION_MILLIS
|
|
100
102
|
});
|
|
101
103
|
vectorY.value = 0;
|
|
@@ -107,21 +109,21 @@ function useUnstableCollapsibleAppBar(userOptions = defaultOptions) {
|
|
|
107
109
|
}
|
|
108
110
|
|
|
109
111
|
offsetsRef.current[prevIndex] = lastOffsetY.value;
|
|
110
|
-
const savedOffsetY =
|
|
112
|
+
const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;
|
|
111
113
|
lastOffsetY.value = savedOffsetY;
|
|
112
114
|
indexRef.current = nextIndex; // Determine whether to overlap every time index is changed.
|
|
113
115
|
|
|
114
116
|
overlapped.value = savedOffsetY > 0; // If next ScrollView's offset is too short, expand app bar.
|
|
115
117
|
|
|
116
118
|
if (translateY.value < 0 && savedOffsetY < appBarHeight) {
|
|
117
|
-
translateY.value = _reactNativeReanimated.
|
|
119
|
+
translateY.value = (0, _reactNativeReanimated.withTiming)(0, {
|
|
118
120
|
duration: ANIMATION_DURATION_MILLIS
|
|
119
121
|
});
|
|
120
122
|
vectorY.value = 0;
|
|
121
123
|
}
|
|
122
124
|
};
|
|
123
125
|
|
|
124
|
-
const scrollHandler = _reactNativeReanimated.
|
|
126
|
+
const scrollHandler = (0, _reactNativeReanimated.useAnimatedScrollHandler)({
|
|
125
127
|
onBeginDrag: () => {
|
|
126
128
|
lastTranslateY.value = translateY.value;
|
|
127
129
|
},
|
|
@@ -143,13 +145,13 @@ function useUnstableCollapsibleAppBar(userOptions = defaultOptions) {
|
|
|
143
145
|
} else {
|
|
144
146
|
if (offsetY > -maxTy) {
|
|
145
147
|
if (ty === 0) {
|
|
146
|
-
translateY.value = _reactNativeReanimated.
|
|
148
|
+
translateY.value = (0, _reactNativeReanimated.withTiming)(Math.min(Math.max(-offsetY, maxTy), 0), {
|
|
147
149
|
duration: ANIMATION_DURATION_MILLIS
|
|
148
150
|
});
|
|
149
151
|
}
|
|
150
152
|
} else {
|
|
151
153
|
if (ty === maxTy) {
|
|
152
|
-
translateY.value = _reactNativeReanimated.
|
|
154
|
+
translateY.value = (0, _reactNativeReanimated.withTiming)(0, {
|
|
153
155
|
duration: ANIMATION_DURATION_MILLIS
|
|
154
156
|
});
|
|
155
157
|
}
|
|
@@ -175,12 +177,11 @@ function useUnstableCollapsibleAppBar(userOptions = defaultOptions) {
|
|
|
175
177
|
const threshold = maxTy * 0.5;
|
|
176
178
|
const nextTranslateY = ty > threshold || offsetY < appBarHeight ? 0 : maxTy;
|
|
177
179
|
overlapped.value = offsetY + nextTranslateY > 0;
|
|
178
|
-
translateY.value = _reactNativeReanimated.
|
|
180
|
+
translateY.value = (0, _reactNativeReanimated.withTiming)(nextTranslateY, {
|
|
179
181
|
duration: ANIMATION_DURATION_MILLIS
|
|
180
182
|
});
|
|
181
183
|
}
|
|
182
|
-
});
|
|
183
|
-
|
|
184
|
+
}, []);
|
|
184
185
|
const hasCollapsible = collapsibleToolbarHeight > 0;
|
|
185
186
|
const appBarStyle = [animatedStyle, {
|
|
186
187
|
paddingTop: safeAreaInsets.top
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useUnstableCollapsibleAppBar.ts"],"names":["defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","Animated","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","animatedStyle","useAnimatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","React","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","withTiming","duration","savedOffsetY","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","deltaY","dy","min","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"mappings":"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","sourcesContent":["import React, { useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport useAppbarStyles from './useAppbarStyles';\nimport useElevationStyle from './useElevationStyle';\nimport useHeight from './useHeight';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n top?: number;\n bottom?: number;\n left?: number;\n right?: number;\n}\n\nexport interface Options {\n shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n vectorY: Animated.SharedValue<number>;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\n\nfunction useLargerValueOfLastTwoValues(value: number) {\n const refLatestTwoValues = useRef([0, 0]);\n\n refLatestTwoValues.current.shift();\n refLatestTwoValues.current.push(value);\n\n return Math.max(...refLatestTwoValues.current);\n}\n\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { shouldTranslateYReset }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);\n const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n const translateY = Animated.useSharedValue<number>(0);\n const lastTranslateY = Animated.useSharedValue<number>(0);\n const lastOffsetY = Animated.useSharedValue<number>(0);\n const prevOffsetY = Animated.useSharedValue<number>(0);\n const overlapped = Animated.useSharedValue<boolean>(false);\n const vectorY = Animated.useSharedValue<number>(0);\n\n const elevationStyle = useElevationStyle(4);\n const animatedStyle = Animated.useAnimatedStyle(() => {\n return Platform.OS === 'web' ? ({\n transform: [{ translateY: translateY.value }],\n boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n }) : ({\n transform: [{ translateY: translateY.value }],\n elevation: overlapped.value ? elevationStyle?.elevation : 0,\n shadowColor: elevationStyle?.shadowColor,\n shadowOffset: elevationStyle?.shadowOffset,\n shadowRadius: elevationStyle?.shadowRadius,\n shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n });\n });\n\n const indexRef = React.useRef<number>(0);\n const offsetsRef = React.useRef<Array<number>>([]);\n\n const onScrollViewChanged = (nextIndex: number) => {\n const prevIndex = indexRef.current;\n if (prevIndex === nextIndex) {\n if (shouldTranslateYReset) {\n translateY.value = Animated.withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n\n vectorY.value = 0;\n offsetsRef.current = [];\n overlapped.value = false;\n }\n\n return;\n }\n\n offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n lastOffsetY.value = savedOffsetY;\n\n indexRef.current = nextIndex;\n\n // Determine whether to overlap every time index is changed.\n overlapped.value = savedOffsetY > 0;\n\n // If next ScrollView's offset is too short, expand app bar.\n if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n translateY.value = Animated.withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n\n vectorY.value = 0;\n }\n };\n\n const scrollHandler = Animated.useAnimatedScrollHandler({\n onBeginDrag: () => {\n lastTranslateY.value = translateY.value;\n },\n onMomentumBegin: () => {\n lastTranslateY.value = translateY.value;\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n const deltaY = offsetY - prevOffsetY.value;\n vectorY.value = (vectorY.value * deltaY >= 0 && offsetY > 0) ? vectorY.value + deltaY : deltaY;\n prevOffsetY.value = offsetY;\n\n if (SUPPORTS_DRAG_DETECTION) {\n const dy = offsetY - lastOffsetY.value;\n\n translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n overlapped.value = offsetY + translateY.value > 0;\n } else {\n if (offsetY > -maxTy) {\n if (ty === 0) {\n translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n } else {\n if (ty === maxTy) {\n translateY.value = Animated.withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n }\n\n overlapped.value = offsetY > 0;\n\n lastOffsetY.value = offsetY;\n }\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n const offsetY = event.contentOffset.y;\n\n lastOffsetY.value = offsetY;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n // If toolbar is already positioned on edge, do nothing.\n if (ty <= maxTy || ty >= 0) {\n return;\n }\n\n const threshold = maxTy * 0.5;\n\n const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n overlapped.value = offsetY + nextTranslateY > 0;\n\n translateY.value = Animated.withTiming(nextTranslateY, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n },\n });\n\n const hasCollapsible = collapsibleToolbarHeight > 0;\n\n const appBarStyle = [\n animatedStyle,\n { paddingTop: safeAreaInsets.top },\n hasCollapsible ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n vectorY,\n onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarMaxHeight : 0 },\n };\n};\n"]}
|
|
1
|
+
{"version":3,"names":["defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","useRef","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","useElevationStyle","animatedStyle","useAnimatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","withTiming","duration","savedOffsetY","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","deltaY","dy","min","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useUnstableCollapsibleAppBar.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport {\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport useAppbarStyles from './useAppbarStyles';\nimport useElevationStyle from './useElevationStyle';\nimport useHeight from './useHeight';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n top?: number;\n bottom?: number;\n left?: number;\n right?: number;\n}\n\nexport interface Options {\n shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n vectorY: SharedValue<number>;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nfunction useLargerValueOfLastTwoValues(value: number) {\n const refLatestTwoValues = useRef([0, 0]);\n\n refLatestTwoValues.current.shift();\n refLatestTwoValues.current.push(value);\n\n return Math.max(...refLatestTwoValues.current);\n}\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { shouldTranslateYReset }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);\n const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n const translateY = useSharedValue<number>(0);\n const lastTranslateY = useSharedValue<number>(0);\n const lastOffsetY = useSharedValue<number>(0);\n const prevOffsetY = useSharedValue<number>(0);\n const overlapped = useSharedValue<boolean>(false);\n const vectorY = useSharedValue<number>(0);\n\n const elevationStyle = useElevationStyle(4);\n const animatedStyle = useAnimatedStyle(() => {\n const transform = [{ translateY: translateY.value }];\n\n if (Platform.OS === 'web') {\n return {\n transform,\n boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n };\n }\n if (Platform.OS === 'android') {\n return {\n transform,\n elevation: overlapped.value ? elevationStyle?.elevation : 0,\n };\n }\n if (Platform.OS === 'ios') {\n return {\n transform,\n shadowColor: elevationStyle?.shadowColor,\n shadowOffset: elevationStyle?.shadowOffset,\n shadowRadius: elevationStyle?.shadowRadius,\n shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n };\n }\n return {};\n }, [\n /**\n * FIXME: Consider add `elevationStyle` to dependencies.\n */\n ]);\n\n const indexRef = useRef<number>(0);\n const offsetsRef = useRef<Array<number>>([]);\n\n const onScrollViewChanged = (nextIndex: number) => {\n const prevIndex = indexRef.current;\n if (prevIndex === nextIndex) {\n if (shouldTranslateYReset) {\n translateY.value = withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n\n vectorY.value = 0;\n offsetsRef.current = [];\n overlapped.value = false;\n }\n\n return;\n }\n\n offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n lastOffsetY.value = savedOffsetY;\n\n indexRef.current = nextIndex;\n\n // Determine whether to overlap every time index is changed.\n overlapped.value = savedOffsetY > 0;\n\n // If next ScrollView's offset is too short, expand app bar.\n if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n translateY.value = withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n\n vectorY.value = 0;\n }\n };\n\n const scrollHandler = useAnimatedScrollHandler({\n onBeginDrag: () => {\n lastTranslateY.value = translateY.value;\n },\n onMomentumBegin: () => {\n lastTranslateY.value = translateY.value;\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n const deltaY = offsetY - prevOffsetY.value;\n vectorY.value = (vectorY.value * deltaY >= 0 && offsetY > 0) ? vectorY.value + deltaY : deltaY;\n prevOffsetY.value = offsetY;\n\n if (SUPPORTS_DRAG_DETECTION) {\n const dy = offsetY - lastOffsetY.value;\n\n translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n overlapped.value = offsetY + translateY.value > 0;\n } else {\n if (offsetY > -maxTy) {\n if (ty === 0) {\n translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n } else {\n if (ty === maxTy) {\n translateY.value = withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n }\n\n overlapped.value = offsetY > 0;\n\n lastOffsetY.value = offsetY;\n }\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n const offsetY = event.contentOffset.y;\n\n lastOffsetY.value = offsetY;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n // If toolbar is already positioned on edge, do nothing.\n if (ty <= maxTy || ty >= 0) {\n return;\n }\n\n const threshold = maxTy * 0.5;\n\n const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n overlapped.value = offsetY + nextTranslateY > 0;\n\n translateY.value = withTiming(nextTranslateY, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n },\n }, []);\n\n const hasCollapsible = collapsibleToolbarHeight > 0;\n\n const appBarStyle = [\n animatedStyle,\n { paddingTop: safeAreaInsets.top },\n hasCollapsible ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n vectorY,\n onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarMaxHeight : 0 },\n };\n};\n"],"mappings":"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"}
|
|
@@ -5,24 +5,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = useAnimatedDisplayStyle;
|
|
7
7
|
|
|
8
|
-
var _reactNativeReanimated =
|
|
8
|
+
var _reactNativeReanimated = require("react-native-reanimated");
|
|
9
9
|
|
|
10
|
-
function
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const display = _reactNativeReanimated.
|
|
14
|
-
|
|
15
|
-
_reactNativeReanimated.default.useAnimatedReaction(() => vectorY.value, vy => {
|
|
10
|
+
function useAnimatedDisplayStyle(vectorY) {
|
|
11
|
+
let threshold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200;
|
|
12
|
+
let defaultDisplay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'flex';
|
|
13
|
+
const display = (0, _reactNativeReanimated.useSharedValue)(defaultDisplay);
|
|
14
|
+
(0, _reactNativeReanimated.useAnimatedReaction)(() => vectorY.value, vy => {
|
|
16
15
|
if (vy >= threshold) {
|
|
17
16
|
display.value = 'none';
|
|
18
17
|
} else if (vy < threshold) {
|
|
19
18
|
display.value = 'flex';
|
|
20
19
|
}
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
return _reactNativeReanimated.default.useAnimatedStyle(() => ({
|
|
20
|
+
}, [threshold]);
|
|
21
|
+
return (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
24
22
|
display: display.value
|
|
25
|
-
}));
|
|
23
|
+
}), []);
|
|
26
24
|
}
|
|
27
25
|
|
|
28
26
|
;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["useAnimatedDisplayStyle","vectorY","threshold","defaultDisplay","display","useSharedValue","useAnimatedReaction","value","vy","useAnimatedStyle"],"sources":["useUnstableToggleDisplayStyle.ts"],"sourcesContent":["import type { SharedValue } from 'react-native-reanimated';\nimport { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\n\nexport default function useAnimatedDisplayStyle(\n vectorY: SharedValue<number>,\n threshold: number = 200,\n defaultDisplay: 'flex' | 'none' = 'flex',\n) {\n const display = useSharedValue(defaultDisplay);\n\n useAnimatedReaction(\n () => vectorY.value,\n (vy) => {\n if (vy >= threshold) {\n display.value = 'none';\n } else if (vy < threshold) {\n display.value = 'flex';\n }\n },\n [threshold],\n );\n\n return useAnimatedStyle(() => ({\n display: display.value,\n }), []);\n};\n"],"mappings":";;;;;;;AACA;;AAEe,SAASA,uBAAT,CACXC,OADW,EAIb;EAAA,IAFEC,SAEF,uEAFsB,GAEtB;EAAA,IADEC,cACF,uEADoC,MACpC;EACE,MAAMC,OAAO,GAAG,IAAAC,qCAAA,EAAeF,cAAf,CAAhB;EAEA,IAAAG,0CAAA,EACI,MAAML,OAAO,CAACM,KADlB,EAEKC,EAAD,IAAQ;IACJ,IAAIA,EAAE,IAAIN,SAAV,EAAqB;MACjBE,OAAO,CAACG,KAAR,GAAgB,MAAhB;IACH,CAFD,MAEO,IAAIC,EAAE,GAAGN,SAAT,EAAoB;MACvBE,OAAO,CAACG,KAAR,GAAgB,MAAhB;IACH;EACJ,CARL,EASI,CAACL,SAAD,CATJ;EAYA,OAAO,IAAAO,uCAAA,EAAiB,OAAO;IAC3BL,OAAO,EAAEA,OAAO,CAACG;EADU,CAAP,CAAjB,EAEH,EAFG,CAAP;AAGH;;AAAA"}
|
package/build/commonjs/index.js
CHANGED
|
@@ -25,34 +25,34 @@ Object.defineProperty(exports, "Carousel", {
|
|
|
25
25
|
return _Carousel.default;
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
|
-
Object.defineProperty(exports, "
|
|
28
|
+
Object.defineProperty(exports, "ComicViewer", {
|
|
29
29
|
enumerable: true,
|
|
30
30
|
get: function () {
|
|
31
|
-
return
|
|
31
|
+
return _ComicViewer.default;
|
|
32
32
|
}
|
|
33
33
|
});
|
|
34
|
-
Object.defineProperty(exports, "
|
|
34
|
+
Object.defineProperty(exports, "DateTimePicker", {
|
|
35
35
|
enumerable: true,
|
|
36
36
|
get: function () {
|
|
37
|
-
return
|
|
37
|
+
return _DateTimePicker.default;
|
|
38
38
|
}
|
|
39
39
|
});
|
|
40
|
-
Object.defineProperty(exports, "
|
|
40
|
+
Object.defineProperty(exports, "FlipCard", {
|
|
41
41
|
enumerable: true,
|
|
42
42
|
get: function () {
|
|
43
|
-
return
|
|
43
|
+
return _FlipCard.default;
|
|
44
44
|
}
|
|
45
45
|
});
|
|
46
|
-
Object.defineProperty(exports, "
|
|
46
|
+
Object.defineProperty(exports, "StatusBarProvider", {
|
|
47
47
|
enumerable: true,
|
|
48
48
|
get: function () {
|
|
49
|
-
return
|
|
49
|
+
return _StatusBarProvider.default;
|
|
50
50
|
}
|
|
51
51
|
});
|
|
52
|
-
Object.defineProperty(exports, "
|
|
52
|
+
Object.defineProperty(exports, "ViewPager", {
|
|
53
53
|
enumerable: true,
|
|
54
54
|
get: function () {
|
|
55
|
-
return
|
|
55
|
+
return _ViewPager.default;
|
|
56
56
|
}
|
|
57
57
|
});
|
|
58
58
|
Object.defineProperty(exports, "useStatusBarContext", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
@@ -1,23 +1,24 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import Animated, { Easing } from 'react-native-reanimated';
|
|
1
|
+
import React, { useEffect } from 'react';
|
|
2
|
+
import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
3
|
+
const ANIMATION_CONFIG = {
|
|
4
|
+
duration: 150,
|
|
5
|
+
easing: Easing.out(Easing.exp)
|
|
6
|
+
};
|
|
3
7
|
export default function AnimatedY(props) {
|
|
4
8
|
const {
|
|
5
9
|
children,
|
|
6
10
|
translateY,
|
|
7
11
|
style
|
|
8
12
|
} = props;
|
|
9
|
-
const animatedY =
|
|
10
|
-
const animatedStyle =
|
|
13
|
+
const animatedY = useSharedValue(translateY);
|
|
14
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
11
15
|
transform: [{
|
|
12
16
|
translateY: animatedY.value
|
|
13
17
|
}]
|
|
14
|
-
}));
|
|
15
|
-
|
|
18
|
+
}), []);
|
|
19
|
+
useEffect(() => {
|
|
16
20
|
if (translateY >= 0) {
|
|
17
|
-
animatedY.value =
|
|
18
|
-
duration: 150,
|
|
19
|
-
easing: Easing.out(Easing.exp)
|
|
20
|
-
});
|
|
21
|
+
animatedY.value = withTiming(translateY, ANIMATION_CONFIG);
|
|
21
22
|
}
|
|
22
23
|
}, [translateY]);
|
|
23
24
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","useEffect","Animated","Easing","useAnimatedStyle","useSharedValue","withTiming","ANIMATION_CONFIG","duration","easing","out","exp","AnimatedY","props","children","translateY","style","animatedY","animatedStyle","transform","value"],"sources":["AnimatedY.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type AnimatedYProps from './AnimatedYProps';\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = {\n duration: 150,\n easing: Easing.out(Easing.exp),\n};\n\nexport default function AnimatedY(props: AnimatedYProps) {\n const {\n children,\n translateY,\n style,\n } = props;\n\n const animatedY = useSharedValue(translateY);\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ translateY: animatedY.value }],\n }), []);\n\n useEffect(() => {\n if (translateY >= 0) {\n animatedY.value = withTiming(translateY, ANIMATION_CONFIG);\n }\n }, [translateY]);\n\n return (\n <Animated.View\n children={children}\n style={[\n animatedStyle,\n style,\n ]}\n />\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AAEA,OAAOC,QAAP,IAAmBC,MAAnB,EAA2BC,gBAA3B,EAA6CC,cAA7C,EAA6DC,UAA7D,QAA+E,yBAA/E;AAGA,MAAMC,gBAA4C,GAAG;EACjDC,QAAQ,EAAE,GADuC;EAEjDC,MAAM,EAAEN,MAAM,CAACO,GAAP,CAAWP,MAAM,CAACQ,GAAlB;AAFyC,CAArD;AAKA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,QADE;IAEFC,UAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAMI,SAAS,GAAGZ,cAAc,CAACU,UAAD,CAAhC;EACA,MAAMG,aAAa,GAAGd,gBAAgB,CAAC,OAAO;IAC1Ce,SAAS,EAAE,CAAC;MAAEJ,UAAU,EAAEE,SAAS,CAACG;IAAxB,CAAD;EAD+B,CAAP,CAAD,EAElC,EAFkC,CAAtC;EAIAnB,SAAS,CAAC,MAAM;IACZ,IAAIc,UAAU,IAAI,CAAlB,EAAqB;MACjBE,SAAS,CAACG,KAAV,GAAkBd,UAAU,CAACS,UAAD,EAAaR,gBAAb,CAA5B;IACH;EACJ,CAJQ,EAIN,CAACQ,UAAD,CAJM,CAAT;EAMA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,QAAQ,EAAED,QADd;IAEI,KAAK,EAAE,CACHI,aADG,EAEHF,KAFG;EAFX,EADJ;AASH;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["AnimatedYProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface AnimatedYProps extends ComponentProps<{\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n\n /**\n * The translate y value of the component.\n */\n translateY: number;\n}> {}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './AnimatedY';\nexport type { default as AnimatedYProps } from './AnimatedYProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
2
2
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { Platform } from 'react-native';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"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"],"sources":["BottomSheetNative.tsx"],"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"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["BottomSheetProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface BottomSheetProps extends ComponentProps<{\n /**\n * Opacity for BackdropComponent\n * @default 0.5\n */\n backdropOpacity?: number;\n\n /**\n * BottomSheet children, usually the included sub-components.\n */\n children?: React.ReactNode;\n\n /**\n * Snap index. You could also provide -1 to bottom sheet in closed state.\n */\n index: number;\n\n /**\n * Callback fired when the index is changed.\n * Important! Use memoized value.\n */\n onChange?: (newIndex: number) => void;\n\n /**\n * Points for the bottom sheet to snap to, points should be sorted from bottom to top.\n * Important! Use memoized value.\n */\n snapPoints: Array<number>;\n}> {}\n"],"mappings":""}
|
|
@@ -24,14 +24,10 @@ const useStyles = function () {
|
|
|
24
24
|
};
|
|
25
25
|
|
|
26
26
|
const calculateHeight = points => {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
return (_points = points[points.length - 1]) !== null && _points !== void 0 ? _points : 0;
|
|
27
|
+
return points[points.length - 1] ?? 0;
|
|
30
28
|
};
|
|
31
29
|
|
|
32
30
|
export default function BottomSheet(props) {
|
|
33
|
-
var _snapPoints$index;
|
|
34
|
-
|
|
35
31
|
const {
|
|
36
32
|
backdropOpacity,
|
|
37
33
|
children,
|
|
@@ -48,7 +44,7 @@ export default function BottomSheet(props) {
|
|
|
48
44
|
};
|
|
49
45
|
|
|
50
46
|
const height = calculateHeight(snapPoints);
|
|
51
|
-
const translateY = height - (
|
|
47
|
+
const translateY = height - (snapPoints[index] ?? 0);
|
|
52
48
|
return /*#__PURE__*/React.createElement(Modal, {
|
|
53
49
|
backdropOpacity: backdropOpacity,
|
|
54
50
|
onClose: handleClose,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","Modal","Paper","StyleSheet","css","useTheme","AnimatedY","useStyles","theme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","calculateHeight","points","length","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","styles","handleClose","height","translateY","absoluteFill"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React from 'react';\nimport { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n const theme = useTheme();\n\n return {\n root: {\n justifyContent: 'flex-end',\n zIndex: theme.zIndex.dialog\n },\n animated: {\n alignSelf: 'center',\n maxWidth: 720,\n width: '100%',\n },\n paper: {\n borderBottomLeftRadius: 0,\n borderBottomRightRadius: 0,\n flexGrow: 1,\n overflow: 'hidden',\n },\n };\n};\n\nconst calculateHeight = (points: BottomSheetProps['snapPoints']): number => {\n return points[points.length - 1] ?? 0;\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n const {\n backdropOpacity,\n children,\n index,\n onChange,\n snapPoints,\n } = props;\n\n const styles = useStyles();\n\n const handleClose = () => {\n if (onChange) {\n onChange(-1);\n }\n };\n\n const height = calculateHeight(snapPoints);\n const translateY = height - (snapPoints[index] ?? 0);\n\n return (\n <Modal\n backdropOpacity={backdropOpacity}\n onClose={handleClose}\n visible={index >= 0}\n style={css([StyleSheet.absoluteFill, styles.root])}\n >\n <AnimatedY\n style={styles.animated}\n translateY={translateY}\n >\n <Paper\n elevation={12}\n style={[\n styles.paper,\n { height },\n ]}\n >\n {children}\n </Paper>\n </AnimatedY>\n </Modal>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,KAAT,EAAgBC,KAAhB,EAAuBC,UAAvB,EAAmCC,GAAnC,EAAwCC,QAAxC,QAAwD,mBAAxD;AAEA,OAAOC,SAAP,MAAsB,cAAtB;;AAKA,MAAMC,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,OAAO;IACHI,IAAI,EAAE;MACFC,cAAc,EAAE,UADd;MAEFC,MAAM,EAAEH,KAAK,CAACG,MAAN,CAAaC;IAFnB,CADH;IAKHC,QAAQ,EAAE;MACNC,SAAS,EAAE,QADL;MAENC,QAAQ,EAAE,GAFJ;MAGNC,KAAK,EAAE;IAHD,CALP;IAUHC,KAAK,EAAE;MACHC,sBAAsB,EAAE,CADrB;MAEHC,uBAAuB,EAAE,CAFtB;MAGHC,QAAQ,EAAE,CAHP;MAIHC,QAAQ,EAAE;IAJP;EAVJ,CAAP;AAiBH,CApBD;;AAsBA,MAAMC,eAAe,GAAIC,MAAD,IAAoD;EACxE,OAAOA,MAAM,CAACA,MAAM,CAACC,MAAP,GAAgB,CAAjB,CAAN,IAA6B,CAApC;AACH,CAFD;;AAIA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,QAFE;IAGFC,KAHE;IAIFC,QAJE;IAKFC;EALE,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGzB,SAAS,EAAxB;;EAEA,MAAM0B,WAAW,GAAG,MAAM;IACtB,IAAIH,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAMI,MAAM,GAAGZ,eAAe,CAACS,UAAD,CAA9B;EACA,MAAMI,UAAU,GAAGD,MAAM,IAAIH,UAAU,CAACF,KAAD,CAAV,IAAqB,CAAzB,CAAzB;EAEA,oBACI,oBAAC,KAAD;IACI,eAAe,EAAEF,eADrB;IAEI,OAAO,EAAEM,WAFb;IAGI,OAAO,EAAEJ,KAAK,IAAI,CAHtB;IAII,KAAK,EAAEzB,GAAG,CAAC,CAACD,UAAU,CAACiC,YAAZ,EAA0BJ,MAAM,CAACvB,IAAjC,CAAD;EAJd,gBAMI,oBAAC,SAAD;IACI,KAAK,EAAEuB,MAAM,CAACnB,QADlB;IAEI,UAAU,EAAEsB;EAFhB,gBAII,oBAAC,KAAD;IACI,SAAS,EAAE,EADf;IAEI,KAAK,EAAE,CACHH,MAAM,CAACf,KADJ,EAEH;MAAEiB;IAAF,CAFG;EAFX,GAOKN,QAPL,CAJJ,CANJ,CADJ;AAuBH;AAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
2
2
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","BottomSheetBackdrop","css","TransparentBackdrop","props","backdropStyle","backgroundColor","bottom","left","position","right","top"],"sources":["TransparentBackdrop.tsx"],"sourcesContent":["import React from 'react';\nimport { BottomSheetBackdrop, BottomSheetBackdropProps } from '@gorhom/bottom-sheet';\nimport { css } from '@fountain-ui/styles';\n\nexport default function TransparentBackdrop(props: BottomSheetBackdropProps) {\n // The reason that it did not use the opacity prop is that the close event is ignored in Android. (opacity < 0.1)\n const backdropStyle = css([\n {\n backgroundColor: '#ffffff00',\n bottom: 0,\n left: 0,\n position: 'absolute',\n right: 0,\n top: 0,\n },\n ]);\n\n return (\n <BottomSheetBackdrop\n {...props}\n appearsOnIndex={0}\n disappearsOnIndex={-1}\n style={backdropStyle}\n />\n );\n};"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,mBAAT,QAA8D,sBAA9D;AACA,SAASC,GAAT,QAAoB,qBAApB;AAEA,eAAe,SAASC,mBAAT,CAA6BC,KAA7B,EAA8D;EACzE;EACA,MAAMC,aAAa,GAAGH,GAAG,CAAC,CACtB;IACII,eAAe,EAAE,WADrB;IAEIC,MAAM,EAAE,CAFZ;IAGIC,IAAI,EAAE,CAHV;IAIIC,QAAQ,EAAE,UAJd;IAKIC,KAAK,EAAE,CALX;IAMIC,GAAG,EAAE;EANT,CADsB,CAAD,CAAzB;EAWA,oBACI,oBAAC,mBAAD,eACQP,KADR;IAEI,cAAc,EAAE,CAFpB;IAGI,iBAAiB,EAAE,CAAC,CAHxB;IAII,KAAK,EAAEC;EAJX,GADJ;AAQH;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './BottomSheetWeb';\nexport type { default as BottomSheetProps } from './BottomSheetProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,kBAAxB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["default"],"sources":["index.native.ts"],"sourcesContent":["export { default } from './BottomSheetNative';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,qBAAxB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","useEffect","useRef","useState","Dimensions","View","RNSnapCarousel","defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultInfinite","Carousel","props","autoplay","autoplayInterval","centerSlidePadding","data","inactiveSlideOpacity","inactiveSlideScale","index","infinite","onChange","renderItem","carouselRef","sliderWidth","setSliderWidth","get","width","itemWidth","undefined","carousel","current","currentIndex","snapToItem","handleSnapToItem","newIndex","event","nativeEvent","layout"],"sources":["CarouselNative.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Dimensions, View } from 'react-native';\nimport RNSnapCarousel from 'react-native-snap-carousel';\nimport type CarouselProps from './CarouselProps';\nimport {\n defaultAutoplay,\n defaultAutoplayInterval,\n defaultInactiveSlideOpacity,\n defaultInactiveSlideScale,\n defaultInfinite,\n} from './utils';\n\nexport default function Carousel<ItemT>(props: CarouselProps<ItemT>) {\n const {\n autoplay = defaultAutoplay,\n autoplayInterval = defaultAutoplayInterval,\n centerSlidePadding,\n data,\n inactiveSlideOpacity = defaultInactiveSlideOpacity,\n inactiveSlideScale = defaultInactiveSlideScale,\n index,\n infinite = defaultInfinite,\n onChange,\n renderItem,\n } = props;\n\n const carouselRef = useRef<RNSnapCarousel<ItemT> | null>(null);\n\n const [sliderWidth, setSliderWidth] = useState(() => Dimensions.get('window').width);\n\n const itemWidth = centerSlidePadding !== undefined\n ? sliderWidth - (centerSlidePadding * 2)\n : sliderWidth;\n\n useEffect(() => {\n const carousel = carouselRef.current;\n if (carousel && index !== carousel.currentIndex) {\n carousel.snapToItem(index, true);\n }\n }, [index]);\n\n const handleSnapToItem = (newIndex: number) => {\n if (onChange) {\n onChange(newIndex);\n }\n };\n\n return (\n <View onLayout={(event) => setSliderWidth(event.nativeEvent.layout.width)}>\n <RNSnapCarousel\n autoplay={autoplay}\n autoplayInterval={autoplayInterval}\n data={data}\n horizontal={true}\n inactiveSlideOpacity={inactiveSlideOpacity}\n inactiveSlideScale={inactiveSlideScale}\n itemWidth={itemWidth}\n loop={infinite}\n loopClonesPerSide={2}\n onSnapToItem={handleSnapToItem}\n ref={carouselRef}\n renderItem={renderItem}\n sliderWidth={sliderWidth}\n />\n </View>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,QAAnC,QAAmD,OAAnD;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AACA,OAAOC,cAAP,MAA2B,4BAA3B;AAEA,SACIC,eADJ,EAEIC,uBAFJ,EAGIC,2BAHJ,EAIIC,yBAJJ,EAKIC,eALJ,QAMO,SANP;AAQA,eAAe,SAASC,QAAT,CAAyBC,KAAzB,EAAsD;EACjE,MAAM;IACFC,QAAQ,GAAGP,eADT;IAEFQ,gBAAgB,GAAGP,uBAFjB;IAGFQ,kBAHE;IAIFC,IAJE;IAKFC,oBAAoB,GAAGT,2BALrB;IAMFU,kBAAkB,GAAGT,yBANnB;IAOFU,KAPE;IAQFC,QAAQ,GAAGV,eART;IASFW,QATE;IAUFC;EAVE,IAWFV,KAXJ;EAaA,MAAMW,WAAW,GAAGtB,MAAM,CAA+B,IAA/B,CAA1B;EAEA,MAAM,CAACuB,WAAD,EAAcC,cAAd,IAAgCvB,QAAQ,CAAC,MAAMC,UAAU,CAACuB,GAAX,CAAe,QAAf,EAAyBC,KAAhC,CAA9C;EAEA,MAAMC,SAAS,GAAGb,kBAAkB,KAAKc,SAAvB,GACZL,WAAW,GAAIT,kBAAkB,GAAG,CADxB,GAEZS,WAFN;EAIAxB,SAAS,CAAC,MAAM;IACZ,MAAM8B,QAAQ,GAAGP,WAAW,CAACQ,OAA7B;;IACA,IAAID,QAAQ,IAAIX,KAAK,KAAKW,QAAQ,CAACE,YAAnC,EAAiD;MAC7CF,QAAQ,CAACG,UAAT,CAAoBd,KAApB,EAA2B,IAA3B;IACH;EACJ,CALQ,EAKN,CAACA,KAAD,CALM,CAAT;;EAOA,MAAMe,gBAAgB,GAAIC,QAAD,IAAsB;IAC3C,IAAId,QAAJ,EAAc;MACVA,QAAQ,CAACc,QAAD,CAAR;IACH;EACJ,CAJD;;EAMA,oBACI,oBAAC,IAAD;IAAM,QAAQ,EAAGC,KAAD,IAAWX,cAAc,CAACW,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyBX,KAA1B;EAAzC,gBACI,oBAAC,cAAD;IACI,QAAQ,EAAEd,QADd;IAEI,gBAAgB,EAAEC,gBAFtB;IAGI,IAAI,EAAEE,IAHV;IAII,UAAU,EAAE,IAJhB;IAKI,oBAAoB,EAAEC,oBAL1B;IAMI,kBAAkB,EAAEC,kBANxB;IAOI,SAAS,EAAEU,SAPf;IAQI,IAAI,EAAER,QARV;IASI,iBAAiB,EAAE,CATvB;IAUI,YAAY,EAAEc,gBAVlB;IAWI,GAAG,EAAEX,WAXT;IAYI,UAAU,EAAED,UAZhB;IAaI,WAAW,EAAEE;EAbjB,EADJ,CADJ;AAmBH;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["CarouselProps.ts"],"sourcesContent":["import React, { RefObject } from 'react';\nimport type { ListRenderItemInfo } from 'react-native';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface CarouselProps<ItemT = any> extends ComponentProps<{\n /**\n * If `true`, enable autoplay.\n * @default false\n */\n autoplay?: boolean;\n\n /**\n * Delay in ms until navigating to the next item.\n * @default 3000\n */\n autoplayInterval?: number;\n\n /**\n * Padding for center slide. If specified, `slidesToScroll` and `slidesToShow` set to 1.\n */\n centerSlidePadding?: number;\n\n /**\n * Delay in ms until navigating to the next item.\n */\n data: ReadonlyArray<ItemT>;\n\n /**\n * Value of the opacity effect applied to inactive slides.\n * @default 0.7\n */\n inactiveSlideOpacity?: number;\n\n /**\n * Value of the 'scale' transform applied to inactive slides.\n * @default 0.9\n */\n inactiveSlideScale?: number;\n\n /**\n * Web only. Value of the 'scale' transform applied to a active slide.\n * @default 0.990\n */\n activeSlideScale?: number;\n\n /**\n * A number representing the index of the active slide.\n */\n index: number;\n\n /**\n * Enable infinite loop mode.\n * @default false\n */\n infinite?: boolean;\n\n /**\n * Callback fired when an index is changed.\n */\n onChange?: (newIndex: number) => void;\n\n /**\n * Takes an item from data and renders it into the list.\n */\n renderItem: (info: Omit<ListRenderItemInfo<ItemT>, 'separators'>) => React.ReactElement | null;\n\n /**\n * Web only. Number of slides to scroll at once.\n * @default 1\n */\n slidesToScroll?: number;\n\n /**\n * Web only. Number of slides to display.\n * @default 1\n */\n slidesToShow?: number;\n\n /**\n * Web only. Enable items to display at the center.\n * @default true\n */\n centerMode?: boolean;\n\n /**\n * Web only. Enable arrows to display.\n * @default true\n */\n arrows?: boolean;\n\n /**\n * Web only. Style of arrows\n * @default true\n */\n arrowsStyle?: object;\n\n /**\n * Web only. Style of track\n * @default object\n */\n trackStyle?: object;\n\n /**\n * Only web. Refer slick object\n */\n ref?: RefObject<any>;\n}> {}\n"],"mappings":""}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
2
2
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { View } from 'react-native';
|