@fountain-ui/lab 2.0.0-beta.42 → 2.0.0-beta.44

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.
Files changed (30) hide show
  1. package/build/commonjs/BottomSheet/BottomSheetNative.js +24 -3
  2. package/build/commonjs/BottomSheet/BottomSheetNative.js.map +1 -1
  3. package/build/commonjs/BottomSheet/BottomSheetProps.js.map +1 -1
  4. package/build/commonjs/BottomSheet/BottomSheetWeb.js +24 -25
  5. package/build/commonjs/BottomSheet/BottomSheetWeb.js.map +1 -1
  6. package/build/commonjs/BottomSheet/useDynamicSnapPoints.js +37 -21
  7. package/build/commonjs/BottomSheet/useDynamicSnapPoints.js.map +1 -1
  8. package/build/module/BottomSheet/BottomSheetNative.js +25 -5
  9. package/build/module/BottomSheet/BottomSheetNative.js.map +1 -1
  10. package/build/module/BottomSheet/BottomSheetProps.js.map +1 -1
  11. package/build/module/BottomSheet/BottomSheetWeb.js +24 -26
  12. package/build/module/BottomSheet/BottomSheetWeb.js.map +1 -1
  13. package/build/module/BottomSheet/useDynamicSnapPoints.js +33 -22
  14. package/build/module/BottomSheet/useDynamicSnapPoints.js.map +1 -1
  15. package/build/typescript/BottomSheet/BottomSheetProps.d.ts +13 -1
  16. package/build/typescript/BottomSheet/useDynamicSnapPoints.d.ts +7 -6
  17. package/build/typescript/Carousel/Carousel.d.ts +1 -1
  18. package/build/typescript/ViewPager/ViewPager.d.ts +1 -1
  19. package/build/typescript/ViewPager/ViewPager.native.d.ts +1 -1
  20. package/package.json +4 -4
  21. package/src/BottomSheet/BottomSheetNative.tsx +28 -3
  22. package/src/BottomSheet/BottomSheetProps.ts +15 -1
  23. package/src/BottomSheet/BottomSheetWeb.tsx +31 -25
  24. package/src/BottomSheet/useDynamicSnapPoints.ts +49 -28
  25. package/build/commonjs/BottomSheet/BottomSheet.js +0 -177
  26. package/build/commonjs/BottomSheet/BottomSheet.js.map +0 -1
  27. package/build/module/BottomSheet/BottomSheet.js +0 -161
  28. package/build/module/BottomSheet/BottomSheet.js.map +0 -1
  29. package/build/typescript/BottomSheet/BottomSheet.d.ts +0 -2
  30. package/src/BottomSheet/BottomSheet.tsx +0 -184
@@ -1,177 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = BottomSheet;
7
-
8
- var _react = _interopRequireWildcard(require("react"));
9
-
10
- var _reactNative = require("react-native");
11
-
12
- var _core = require("@fountain-ui/core");
13
-
14
- var _useDynamicSnapPoints = _interopRequireDefault(require("./useDynamicSnapPoints"));
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 ? 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); }
23
-
24
- const useStyles = function () {
25
- const theme = (0, _core.useTheme)();
26
- return {
27
- root: {
28
- justifyContent: 'flex-end',
29
- zIndex: theme.zIndex.dialog
30
- },
31
- animated: {
32
- alignSelf: 'center',
33
- maxWidth: 720,
34
- width: '100%'
35
- },
36
- paper: {
37
- borderBottomLeftRadius: 0,
38
- borderBottomRightRadius: 0,
39
- flexGrow: 1,
40
- overflow: 'hidden'
41
- },
42
- scrollView: {
43
- flexGrow: 1
44
- }
45
- };
46
- };
47
-
48
- function BottomSheet(props) {
49
- const {
50
- backdropOpacity,
51
- children,
52
- header,
53
- index,
54
- onChange,
55
- snapPoints: initialSnapPoints
56
- } = props;
57
- const styles = useStyles();
58
- const contentLayout = (0, _react.useRef)({
59
- x: 0,
60
- y: 0,
61
- width: 0,
62
- height: 0
63
- });
64
- const currentScrollY = (0, _react.useRef)(0);
65
- const {
66
- snapPoints,
67
- handleContentLayout
68
- } = (0, _useDynamicSnapPoints.default)({
69
- index,
70
- initialSnapPoints
71
- });
72
- const height = snapPoints[snapPoints.length - 1] ?? 0;
73
- const translateY = height - (snapPoints[index] ?? 0);
74
- const animatedY = (0, _core.useAnimatedValue)(translateY);
75
-
76
- const isInsideScrollView = (locationX, locationY) => {
77
- const {
78
- current: {
79
- x,
80
- y,
81
- width,
82
- height
83
- }
84
- } = contentLayout;
85
- return locationX >= x && locationX <= x + width && locationY >= y && locationY <= y + height;
86
- };
87
-
88
- const panResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
89
- onMoveShouldSetPanResponder: (event, gestureState) => {
90
- const {
91
- nativeEvent: {
92
- locationX,
93
- locationY
94
- }
95
- } = event;
96
-
97
- if (isInsideScrollView(locationX, locationY)) {
98
- return gestureState.dy > 0 && currentScrollY.current === 0;
99
- }
100
-
101
- return true;
102
- },
103
- onPanResponderMove: (_, gestureState) => {
104
- if (gestureState.dy > 0) {
105
- animatedY.setValue(translateY + gestureState.dy);
106
- }
107
- },
108
- onPanResponderRelease: (_, gestureState) => {
109
- if (gestureState.dy > 0 && gestureState.vy > 0.5) {
110
- handleClose();
111
- } else {
112
- _reactNative.Animated.timing(animatedY, {
113
- toValue: translateY,
114
- useNativeDriver: false,
115
- duration: 300
116
- }).start();
117
- }
118
- }
119
- }), [translateY]);
120
- (0, _react.useEffect)(() => {
121
- if (translateY >= 0) {
122
- _reactNative.Animated.timing(animatedY, {
123
- toValue: translateY,
124
- useNativeDriver: false,
125
- duration: 300
126
- }).start();
127
- }
128
- }, [translateY]);
129
-
130
- const handleClose = () => {
131
- if (onChange) {
132
- onChange(-1);
133
- }
134
- };
135
-
136
- const handleScrollViewLayout = event => {
137
- contentLayout.current = event.nativeEvent.layout;
138
- };
139
-
140
- const handleScroll = event => {
141
- currentScrollY.current = event.nativeEvent.contentOffset.y;
142
- };
143
-
144
- const animatedStyles = [styles.animated, {
145
- transform: [{
146
- translateY: animatedY
147
- }]
148
- }];
149
- const paperStyles = [styles.paper, { ...(height !== 0 ? {
150
- height
151
- } : {})
152
- }];
153
- const contentStyle = { ...(snapPoints[index] !== 0 ? {
154
- height: snapPoints[index]
155
- } : {})
156
- };
157
- return /*#__PURE__*/_react.default.createElement(_core.Modal, {
158
- backdropOpacity: backdropOpacity,
159
- onClose: handleClose,
160
- visible: index >= 0,
161
- style: (0, _core.css)([_core.StyleSheet.absoluteFill, styles.root])
162
- }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, _extends({
163
- style: animatedStyles
164
- }, panResponder.panHandlers), /*#__PURE__*/_react.default.createElement(_core.Paper, {
165
- elevation: 12,
166
- style: paperStyles
167
- }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
168
- style: contentStyle,
169
- onLayout: handleContentLayout
170
- }, header, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
171
- onLayout: handleScrollViewLayout,
172
- onScroll: handleScroll,
173
- scrollEventThrottle: 300,
174
- style: styles.scrollView
175
- }, children)))));
176
- }
177
- //# sourceMappingURL=BottomSheet.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","scrollView","BottomSheet","props","backdropOpacity","children","header","index","onChange","snapPoints","initialSnapPoints","styles","contentLayout","useRef","x","y","height","currentScrollY","handleContentLayout","useDynamicSnapPoints","length","translateY","animatedY","useAnimatedValue","isInsideScrollView","locationX","locationY","current","panResponder","useMemo","PanResponder","create","onMoveShouldSetPanResponder","event","gestureState","nativeEvent","dy","onPanResponderMove","_","setValue","onPanResponderRelease","vy","handleClose","Animated","timing","toValue","useNativeDriver","duration","start","useEffect","handleScrollViewLayout","layout","handleScroll","contentOffset","animatedStyles","transform","paperStyles","contentStyle","css","StyleSheet","absoluteFill","panHandlers"],"sources":["BottomSheet.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from 'react';\nimport {\n Animated,\n LayoutChangeEvent,\n LayoutRectangle,\n NativeScrollEvent,\n NativeSyntheticEvent,\n PanResponder,\n ScrollView,\n View,\n} from 'react-native';\nimport { css, Modal, Paper, StyleSheet, useAnimatedValue, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'scrollView'>;\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 scrollView: {\n flexGrow: 1,\n },\n };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n const {\n backdropOpacity,\n children,\n header,\n index,\n onChange,\n snapPoints: initialSnapPoints,\n } = props;\n\n const styles = useStyles();\n\n const contentLayout = useRef<LayoutRectangle>({ x: 0, y: 0, width: 0, height: 0 });\n const currentScrollY = useRef<number>(0);\n\n const {\n snapPoints,\n handleContentLayout,\n } = useDynamicSnapPoints({\n index,\n initialSnapPoints,\n });\n\n const height = snapPoints[snapPoints.length - 1] ?? 0;\n const translateY = height - (snapPoints[index] ?? 0);\n\n const animatedY = useAnimatedValue(translateY);\n\n const isInsideScrollView = (locationX: number, locationY: number): boolean => {\n const {\n current: { x, y, width, height },\n } = contentLayout;\n\n return locationX >= x && locationX <= x + width && locationY >= y && locationY <= y + height;\n };\n\n const panResponder = useMemo(() => (\n PanResponder.create({\n onMoveShouldSetPanResponder: (event, gestureState) => {\n const {\n nativeEvent: { locationX, locationY },\n } = event;\n\n if (isInsideScrollView(locationX, locationY)) {\n return gestureState.dy > 0 && currentScrollY.current === 0;\n }\n\n return true;\n },\n onPanResponderMove: (_, gestureState) => {\n if (gestureState.dy > 0) {\n animatedY.setValue(translateY + gestureState.dy);\n }\n },\n onPanResponderRelease: (_, gestureState) => {\n if (gestureState.dy > 0 && gestureState.vy > 0.5) {\n handleClose();\n } else {\n Animated.timing(animatedY, {\n toValue: translateY,\n useNativeDriver: false,\n duration: 300,\n }).start();\n }\n },\n })\n ), [translateY]);\n\n useEffect(() => {\n if (translateY >= 0) {\n Animated.timing(animatedY, {\n toValue: translateY,\n useNativeDriver: false,\n duration: 300,\n }).start();\n }\n }, [translateY]);\n\n const handleClose = () => {\n if (onChange) {\n onChange(-1);\n }\n };\n\n const handleScrollViewLayout = (event: LayoutChangeEvent) => {\n contentLayout.current = event.nativeEvent.layout;\n };\n\n const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n currentScrollY.current = event.nativeEvent.contentOffset.y;\n };\n\n const animatedStyles = [\n styles.animated,\n { transform: [{ translateY: animatedY }] },\n ];\n\n const paperStyles = [\n styles.paper,\n { ...(height !== 0 ? { height } : {}) },\n ];\n\n const contentStyle = {\n ...(snapPoints[index] !== 0 ? { height: snapPoints[index] } : {}),\n };\n\n return (\n <Modal\n backdropOpacity={backdropOpacity}\n onClose={handleClose}\n visible={index >= 0}\n style={css([StyleSheet.absoluteFill, styles.root])}\n >\n <Animated.View\n style={animatedStyles}\n {...panResponder.panHandlers}\n >\n <Paper\n elevation={12}\n style={paperStyles}\n >\n <View\n style={contentStyle}\n onLayout={handleContentLayout}\n >\n {header}\n\n <ScrollView\n onLayout={handleScrollViewLayout}\n onScroll={handleScroll}\n scrollEventThrottle={300}\n style={styles.scrollView}\n >\n {children}\n </ScrollView>\n </View>\n </Paper>\n </Animated.View>\n </Modal>\n );\n}\n"],"mappings":"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"}
@@ -1,161 +0,0 @@
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
-
3
- import React, { useEffect, useMemo, useRef } from 'react';
4
- import { Animated, PanResponder, ScrollView, View } from 'react-native';
5
- import { css, Modal, Paper, StyleSheet, useAnimatedValue, useTheme } from '@fountain-ui/core';
6
- import useDynamicSnapPoints from './useDynamicSnapPoints';
7
-
8
- const useStyles = function () {
9
- const theme = useTheme();
10
- return {
11
- root: {
12
- justifyContent: 'flex-end',
13
- zIndex: theme.zIndex.dialog
14
- },
15
- animated: {
16
- alignSelf: 'center',
17
- maxWidth: 720,
18
- width: '100%'
19
- },
20
- paper: {
21
- borderBottomLeftRadius: 0,
22
- borderBottomRightRadius: 0,
23
- flexGrow: 1,
24
- overflow: 'hidden'
25
- },
26
- scrollView: {
27
- flexGrow: 1
28
- }
29
- };
30
- };
31
-
32
- export default function BottomSheet(props) {
33
- const {
34
- backdropOpacity,
35
- children,
36
- header,
37
- index,
38
- onChange,
39
- snapPoints: initialSnapPoints
40
- } = props;
41
- const styles = useStyles();
42
- const contentLayout = useRef({
43
- x: 0,
44
- y: 0,
45
- width: 0,
46
- height: 0
47
- });
48
- const currentScrollY = useRef(0);
49
- const {
50
- snapPoints,
51
- handleContentLayout
52
- } = useDynamicSnapPoints({
53
- index,
54
- initialSnapPoints
55
- });
56
- const height = snapPoints[snapPoints.length - 1] ?? 0;
57
- const translateY = height - (snapPoints[index] ?? 0);
58
- const animatedY = useAnimatedValue(translateY);
59
-
60
- const isInsideScrollView = (locationX, locationY) => {
61
- const {
62
- current: {
63
- x,
64
- y,
65
- width,
66
- height
67
- }
68
- } = contentLayout;
69
- return locationX >= x && locationX <= x + width && locationY >= y && locationY <= y + height;
70
- };
71
-
72
- const panResponder = useMemo(() => PanResponder.create({
73
- onMoveShouldSetPanResponder: (event, gestureState) => {
74
- const {
75
- nativeEvent: {
76
- locationX,
77
- locationY
78
- }
79
- } = event;
80
-
81
- if (isInsideScrollView(locationX, locationY)) {
82
- return gestureState.dy > 0 && currentScrollY.current === 0;
83
- }
84
-
85
- return true;
86
- },
87
- onPanResponderMove: (_, gestureState) => {
88
- if (gestureState.dy > 0) {
89
- animatedY.setValue(translateY + gestureState.dy);
90
- }
91
- },
92
- onPanResponderRelease: (_, gestureState) => {
93
- if (gestureState.dy > 0 && gestureState.vy > 0.5) {
94
- handleClose();
95
- } else {
96
- Animated.timing(animatedY, {
97
- toValue: translateY,
98
- useNativeDriver: false,
99
- duration: 300
100
- }).start();
101
- }
102
- }
103
- }), [translateY]);
104
- useEffect(() => {
105
- if (translateY >= 0) {
106
- Animated.timing(animatedY, {
107
- toValue: translateY,
108
- useNativeDriver: false,
109
- duration: 300
110
- }).start();
111
- }
112
- }, [translateY]);
113
-
114
- const handleClose = () => {
115
- if (onChange) {
116
- onChange(-1);
117
- }
118
- };
119
-
120
- const handleScrollViewLayout = event => {
121
- contentLayout.current = event.nativeEvent.layout;
122
- };
123
-
124
- const handleScroll = event => {
125
- currentScrollY.current = event.nativeEvent.contentOffset.y;
126
- };
127
-
128
- const animatedStyles = [styles.animated, {
129
- transform: [{
130
- translateY: animatedY
131
- }]
132
- }];
133
- const paperStyles = [styles.paper, { ...(height !== 0 ? {
134
- height
135
- } : {})
136
- }];
137
- const contentStyle = { ...(snapPoints[index] !== 0 ? {
138
- height: snapPoints[index]
139
- } : {})
140
- };
141
- return /*#__PURE__*/React.createElement(Modal, {
142
- backdropOpacity: backdropOpacity,
143
- onClose: handleClose,
144
- visible: index >= 0,
145
- style: css([StyleSheet.absoluteFill, styles.root])
146
- }, /*#__PURE__*/React.createElement(Animated.View, _extends({
147
- style: animatedStyles
148
- }, panResponder.panHandlers), /*#__PURE__*/React.createElement(Paper, {
149
- elevation: 12,
150
- style: paperStyles
151
- }, /*#__PURE__*/React.createElement(View, {
152
- style: contentStyle,
153
- onLayout: handleContentLayout
154
- }, header, /*#__PURE__*/React.createElement(ScrollView, {
155
- onLayout: handleScrollViewLayout,
156
- onScroll: handleScroll,
157
- scrollEventThrottle: 300,
158
- style: styles.scrollView
159
- }, children)))));
160
- }
161
- //# sourceMappingURL=BottomSheet.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["React","useEffect","useMemo","useRef","Animated","PanResponder","ScrollView","View","css","Modal","Paper","StyleSheet","useAnimatedValue","useTheme","useDynamicSnapPoints","useStyles","theme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","scrollView","BottomSheet","props","backdropOpacity","children","header","index","onChange","snapPoints","initialSnapPoints","styles","contentLayout","x","y","height","currentScrollY","handleContentLayout","length","translateY","animatedY","isInsideScrollView","locationX","locationY","current","panResponder","create","onMoveShouldSetPanResponder","event","gestureState","nativeEvent","dy","onPanResponderMove","_","setValue","onPanResponderRelease","vy","handleClose","timing","toValue","useNativeDriver","duration","start","handleScrollViewLayout","layout","handleScroll","contentOffset","animatedStyles","transform","paperStyles","contentStyle","absoluteFill","panHandlers"],"sources":["BottomSheet.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from 'react';\nimport {\n Animated,\n LayoutChangeEvent,\n LayoutRectangle,\n NativeScrollEvent,\n NativeSyntheticEvent,\n PanResponder,\n ScrollView,\n View,\n} from 'react-native';\nimport { css, Modal, Paper, StyleSheet, useAnimatedValue, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'scrollView'>;\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 scrollView: {\n flexGrow: 1,\n },\n };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n const {\n backdropOpacity,\n children,\n header,\n index,\n onChange,\n snapPoints: initialSnapPoints,\n } = props;\n\n const styles = useStyles();\n\n const contentLayout = useRef<LayoutRectangle>({ x: 0, y: 0, width: 0, height: 0 });\n const currentScrollY = useRef<number>(0);\n\n const {\n snapPoints,\n handleContentLayout,\n } = useDynamicSnapPoints({\n index,\n initialSnapPoints,\n });\n\n const height = snapPoints[snapPoints.length - 1] ?? 0;\n const translateY = height - (snapPoints[index] ?? 0);\n\n const animatedY = useAnimatedValue(translateY);\n\n const isInsideScrollView = (locationX: number, locationY: number): boolean => {\n const {\n current: { x, y, width, height },\n } = contentLayout;\n\n return locationX >= x && locationX <= x + width && locationY >= y && locationY <= y + height;\n };\n\n const panResponder = useMemo(() => (\n PanResponder.create({\n onMoveShouldSetPanResponder: (event, gestureState) => {\n const {\n nativeEvent: { locationX, locationY },\n } = event;\n\n if (isInsideScrollView(locationX, locationY)) {\n return gestureState.dy > 0 && currentScrollY.current === 0;\n }\n\n return true;\n },\n onPanResponderMove: (_, gestureState) => {\n if (gestureState.dy > 0) {\n animatedY.setValue(translateY + gestureState.dy);\n }\n },\n onPanResponderRelease: (_, gestureState) => {\n if (gestureState.dy > 0 && gestureState.vy > 0.5) {\n handleClose();\n } else {\n Animated.timing(animatedY, {\n toValue: translateY,\n useNativeDriver: false,\n duration: 300,\n }).start();\n }\n },\n })\n ), [translateY]);\n\n useEffect(() => {\n if (translateY >= 0) {\n Animated.timing(animatedY, {\n toValue: translateY,\n useNativeDriver: false,\n duration: 300,\n }).start();\n }\n }, [translateY]);\n\n const handleClose = () => {\n if (onChange) {\n onChange(-1);\n }\n };\n\n const handleScrollViewLayout = (event: LayoutChangeEvent) => {\n contentLayout.current = event.nativeEvent.layout;\n };\n\n const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n currentScrollY.current = event.nativeEvent.contentOffset.y;\n };\n\n const animatedStyles = [\n styles.animated,\n { transform: [{ translateY: animatedY }] },\n ];\n\n const paperStyles = [\n styles.paper,\n { ...(height !== 0 ? { height } : {}) },\n ];\n\n const contentStyle = {\n ...(snapPoints[index] !== 0 ? { height: snapPoints[index] } : {}),\n };\n\n return (\n <Modal\n backdropOpacity={backdropOpacity}\n onClose={handleClose}\n visible={index >= 0}\n style={css([StyleSheet.absoluteFill, styles.root])}\n >\n <Animated.View\n style={animatedStyles}\n {...panResponder.panHandlers}\n >\n <Paper\n elevation={12}\n style={paperStyles}\n >\n <View\n style={contentStyle}\n onLayout={handleContentLayout}\n >\n {header}\n\n <ScrollView\n onLayout={handleScrollViewLayout}\n onScroll={handleScroll}\n scrollEventThrottle={300}\n style={styles.scrollView}\n >\n {children}\n </ScrollView>\n </View>\n </Paper>\n </Animated.View>\n </Modal>\n );\n}\n"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- import BottomSheetProps from './BottomSheetProps';
2
- export default function BottomSheet(props: BottomSheetProps): JSX.Element;
@@ -1,184 +0,0 @@
1
- import React, { useEffect, useMemo, useRef } from 'react';
2
- import {
3
- Animated,
4
- LayoutChangeEvent,
5
- LayoutRectangle,
6
- NativeScrollEvent,
7
- NativeSyntheticEvent,
8
- PanResponder,
9
- ScrollView,
10
- View,
11
- } from 'react-native';
12
- import { css, Modal, Paper, StyleSheet, useAnimatedValue, useTheme } from '@fountain-ui/core';
13
- import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
14
- import BottomSheetProps from './BottomSheetProps';
15
- import useDynamicSnapPoints from './useDynamicSnapPoints';
16
-
17
- type BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'scrollView'>;
18
-
19
- const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
20
- const theme = useTheme();
21
-
22
- return {
23
- root: {
24
- justifyContent: 'flex-end',
25
- zIndex: theme.zIndex.dialog,
26
- },
27
- animated: {
28
- alignSelf: 'center',
29
- maxWidth: 720,
30
- width: '100%',
31
- },
32
- paper: {
33
- borderBottomLeftRadius: 0,
34
- borderBottomRightRadius: 0,
35
- flexGrow: 1,
36
- overflow: 'hidden',
37
- },
38
- scrollView: {
39
- flexGrow: 1,
40
- },
41
- };
42
- };
43
-
44
- export default function BottomSheet(props: BottomSheetProps) {
45
- const {
46
- backdropOpacity,
47
- children,
48
- header,
49
- index,
50
- onChange,
51
- snapPoints: initialSnapPoints,
52
- } = props;
53
-
54
- const styles = useStyles();
55
-
56
- const contentLayout = useRef<LayoutRectangle>({ x: 0, y: 0, width: 0, height: 0 });
57
- const currentScrollY = useRef<number>(0);
58
-
59
- const {
60
- snapPoints,
61
- handleContentLayout,
62
- } = useDynamicSnapPoints({
63
- index,
64
- initialSnapPoints,
65
- });
66
-
67
- const height = snapPoints[snapPoints.length - 1] ?? 0;
68
- const translateY = height - (snapPoints[index] ?? 0);
69
-
70
- const animatedY = useAnimatedValue(translateY);
71
-
72
- const isInsideScrollView = (locationX: number, locationY: number): boolean => {
73
- const {
74
- current: { x, y, width, height },
75
- } = contentLayout;
76
-
77
- return locationX >= x && locationX <= x + width && locationY >= y && locationY <= y + height;
78
- };
79
-
80
- const panResponder = useMemo(() => (
81
- PanResponder.create({
82
- onMoveShouldSetPanResponder: (event, gestureState) => {
83
- const {
84
- nativeEvent: { locationX, locationY },
85
- } = event;
86
-
87
- if (isInsideScrollView(locationX, locationY)) {
88
- return gestureState.dy > 0 && currentScrollY.current === 0;
89
- }
90
-
91
- return true;
92
- },
93
- onPanResponderMove: (_, gestureState) => {
94
- if (gestureState.dy > 0) {
95
- animatedY.setValue(translateY + gestureState.dy);
96
- }
97
- },
98
- onPanResponderRelease: (_, gestureState) => {
99
- if (gestureState.dy > 0 && gestureState.vy > 0.5) {
100
- handleClose();
101
- } else {
102
- Animated.timing(animatedY, {
103
- toValue: translateY,
104
- useNativeDriver: false,
105
- duration: 300,
106
- }).start();
107
- }
108
- },
109
- })
110
- ), [translateY]);
111
-
112
- useEffect(() => {
113
- if (translateY >= 0) {
114
- Animated.timing(animatedY, {
115
- toValue: translateY,
116
- useNativeDriver: false,
117
- duration: 300,
118
- }).start();
119
- }
120
- }, [translateY]);
121
-
122
- const handleClose = () => {
123
- if (onChange) {
124
- onChange(-1);
125
- }
126
- };
127
-
128
- const handleScrollViewLayout = (event: LayoutChangeEvent) => {
129
- contentLayout.current = event.nativeEvent.layout;
130
- };
131
-
132
- const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
133
- currentScrollY.current = event.nativeEvent.contentOffset.y;
134
- };
135
-
136
- const animatedStyles = [
137
- styles.animated,
138
- { transform: [{ translateY: animatedY }] },
139
- ];
140
-
141
- const paperStyles = [
142
- styles.paper,
143
- { ...(height !== 0 ? { height } : {}) },
144
- ];
145
-
146
- const contentStyle = {
147
- ...(snapPoints[index] !== 0 ? { height: snapPoints[index] } : {}),
148
- };
149
-
150
- return (
151
- <Modal
152
- backdropOpacity={backdropOpacity}
153
- onClose={handleClose}
154
- visible={index >= 0}
155
- style={css([StyleSheet.absoluteFill, styles.root])}
156
- >
157
- <Animated.View
158
- style={animatedStyles}
159
- {...panResponder.panHandlers}
160
- >
161
- <Paper
162
- elevation={12}
163
- style={paperStyles}
164
- >
165
- <View
166
- style={contentStyle}
167
- onLayout={handleContentLayout}
168
- >
169
- {header}
170
-
171
- <ScrollView
172
- onLayout={handleScrollViewLayout}
173
- onScroll={handleScroll}
174
- scrollEventThrottle={300}
175
- style={styles.scrollView}
176
- >
177
- {children}
178
- </ScrollView>
179
- </View>
180
- </Paper>
181
- </Animated.View>
182
- </Modal>
183
- );
184
- }