react-native-bottom-sheet-stack 0.1.12 → 1.0.0
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/lib/commonjs/BottomSheetManaged.js +14 -29
- package/lib/commonjs/BottomSheetManaged.js.map +1 -1
- package/lib/commonjs/BottomSheetManager.context.js +10 -0
- package/lib/commonjs/BottomSheetManager.context.js.map +1 -0
- package/lib/commonjs/BottomSheetManager.provider.js +19 -5
- package/lib/commonjs/BottomSheetManager.provider.js.map +1 -1
- package/lib/commonjs/ScaleBackgroundWrapper.js +69 -0
- package/lib/commonjs/ScaleBackgroundWrapper.js.map +1 -0
- package/lib/commonjs/bottomSheet.store.js +9 -0
- package/lib/commonjs/bottomSheet.store.js.map +1 -1
- package/lib/commonjs/bottomSheetCoordinator.js +38 -0
- package/lib/commonjs/bottomSheetCoordinator.js.map +1 -1
- package/lib/commonjs/index.js +7 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/useBottomSheetManager.js +9 -15
- package/lib/commonjs/useBottomSheetManager.js.map +1 -1
- package/lib/typescript/example/src/App.d.ts.map +1 -1
- package/lib/typescript/src/BottomSheetManaged.d.ts.map +1 -1
- package/lib/typescript/src/BottomSheetManager.context.d.ts +6 -0
- package/lib/typescript/src/BottomSheetManager.context.d.ts.map +1 -0
- package/lib/typescript/src/BottomSheetManager.provider.d.ts +19 -8
- package/lib/typescript/src/BottomSheetManager.provider.d.ts.map +1 -1
- package/lib/typescript/src/ScaleBackgroundWrapper.d.ts +32 -0
- package/lib/typescript/src/ScaleBackgroundWrapper.d.ts.map +1 -0
- package/lib/typescript/src/bottomSheet.store.d.ts +2 -0
- package/lib/typescript/src/bottomSheet.store.d.ts.map +1 -1
- package/lib/typescript/src/bottomSheetCoordinator.d.ts +8 -0
- package/lib/typescript/src/bottomSheetCoordinator.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +2 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/useBottomSheetManager.d.ts +3 -0
- package/lib/typescript/src/useBottomSheetManager.d.ts.map +1 -1
- package/package.json +8 -7
- package/src/BottomSheetManaged.tsx +17 -36
- package/src/BottomSheetManager.context.tsx +8 -0
- package/src/BottomSheetManager.provider.tsx +53 -25
- package/src/ScaleBackgroundWrapper.tsx +98 -0
- package/src/bottomSheet.store.ts +10 -0
- package/src/bottomSheetCoordinator.ts +42 -0
- package/src/index.tsx +5 -1
- package/src/useBottomSheetManager.tsx +11 -15
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.BottomSheetManaged = void 0;
|
|
7
7
|
var _bottomSheet = _interopRequireWildcard(require("@gorhom/bottom-sheet"));
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var
|
|
9
|
+
var _bottomSheetCoordinator = require("./bottomSheetCoordinator");
|
|
10
10
|
var _useBottomSheetState = require("./useBottomSheetState");
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
@@ -19,41 +19,26 @@ const BottomSheetManaged = exports.BottomSheetManaged = /*#__PURE__*/_react.defa
|
|
|
19
19
|
backdropComponent,
|
|
20
20
|
...props
|
|
21
21
|
}, ref) => {
|
|
22
|
-
const {
|
|
23
|
-
startClosing,
|
|
24
|
-
finishClosing
|
|
25
|
-
} = _bottomSheet2.useBottomSheetStore.getState();
|
|
26
22
|
const {
|
|
27
23
|
bottomSheetState
|
|
28
24
|
} = (0, _useBottomSheetState.useBottomSheetState)();
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
if (fromIndex === -1 && toIndex >= 0) {
|
|
36
|
-
const currentState = _bottomSheet2.useBottomSheetStore.getState();
|
|
37
|
-
_bottomSheet2.useBottomSheetStore.setState({
|
|
38
|
-
stack: currentState.stack.map(s => s.id === bottomSheetState.id ? {
|
|
39
|
-
...s,
|
|
40
|
-
status: 'open'
|
|
41
|
-
} : s)
|
|
42
|
-
});
|
|
43
|
-
}
|
|
25
|
+
const {
|
|
26
|
+
handleAnimate,
|
|
27
|
+
handleClose
|
|
28
|
+
} = (0, _react.useMemo)(() => (0, _bottomSheetCoordinator.createSheetEventHandlers)(bottomSheetState.id), [bottomSheetState.id]);
|
|
29
|
+
const wrappedOnAnimate = (0, _react.useCallback)((fromIndex, toIndex, fromPosition, toPosition) => {
|
|
30
|
+
handleAnimate(fromIndex, toIndex);
|
|
44
31
|
onAnimate?.(fromIndex, toIndex, fromPosition, toPosition);
|
|
45
|
-
}, [
|
|
32
|
+
}, [handleAnimate, onAnimate]);
|
|
33
|
+
const wrappedOnClose = (0, _react.useCallback)(() => {
|
|
34
|
+
onClose?.();
|
|
35
|
+
handleClose();
|
|
36
|
+
}, [handleClose, onClose]);
|
|
46
37
|
const config = (0, _bottomSheet.useBottomSheetSpringConfigs)({
|
|
47
38
|
stiffness: 400,
|
|
48
39
|
damping: 80,
|
|
49
40
|
mass: 0.7
|
|
50
41
|
});
|
|
51
|
-
const handleClose = (0, _react.useCallback)(() => {
|
|
52
|
-
onClose?.();
|
|
53
|
-
if (bottomSheetState.status !== 'hidden') {
|
|
54
|
-
finishClosing(bottomSheetState.id);
|
|
55
|
-
}
|
|
56
|
-
}, [bottomSheetState.id, bottomSheetState.status, finishClosing, onClose]);
|
|
57
42
|
const renderBackdropComponent = (0, _react.useCallback)(backdropProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.BottomSheetBackdrop, {
|
|
58
43
|
...backdropProps,
|
|
59
44
|
disappearsOnIndex: -1,
|
|
@@ -63,8 +48,8 @@ const BottomSheetManaged = exports.BottomSheetManaged = /*#__PURE__*/_react.defa
|
|
|
63
48
|
animationConfigs: config,
|
|
64
49
|
ref: ref,
|
|
65
50
|
...props,
|
|
66
|
-
onClose:
|
|
67
|
-
onAnimate:
|
|
51
|
+
onClose: wrappedOnClose,
|
|
52
|
+
onAnimate: wrappedOnAnimate,
|
|
68
53
|
backdropComponent: backdropComponent || renderBackdropComponent,
|
|
69
54
|
enablePanDownToClose: enablePanDownToClose,
|
|
70
55
|
children: children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_bottomSheet","_interopRequireWildcard","require","_react","
|
|
1
|
+
{"version":3,"names":["_bottomSheet","_interopRequireWildcard","require","_react","_bottomSheetCoordinator","_useBottomSheetState","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","BottomSheetManaged","exports","React","forwardRef","children","onAnimate","onClose","enablePanDownToClose","backdropComponent","props","ref","bottomSheetState","useBottomSheetState","handleAnimate","handleClose","useMemo","createSheetEventHandlers","id","wrappedOnAnimate","useCallback","fromIndex","toIndex","fromPosition","toPosition","wrappedOnClose","config","useBottomSheetSpringConfigs","stiffness","damping","mass","renderBackdropComponent","backdropProps","jsx","BottomSheetBackdrop","disappearsOnIndex","appearsOnIndex","animationConfigs"],"sourceRoot":"../../src","sources":["BottomSheetManaged.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.BottomSheetManagerContext = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
+
const BottomSheetManagerContext = exports.BottomSheetManagerContext = /*#__PURE__*/_react.default.createContext(null);
|
|
10
|
+
//# sourceMappingURL=BottomSheetManager.context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","e","__esModule","default","BottomSheetManagerContext","exports","React","createContext"],"sourceRoot":"../../src","sources":["BottomSheetManager.context.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAMnB,MAAMG,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,gBACpCE,cAAK,CAACC,aAAa,CAAwC,IAAI,CAAC","ignoreList":[]}
|
|
@@ -5,23 +5,31 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useMaybeBottomSheetManagerContext = exports.useBottomSheetManagerContext = exports.BottomSheetManagerProvider = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _BottomSheetManager = require("./BottomSheetManager.context");
|
|
8
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
-
|
|
12
|
+
/**
|
|
13
|
+
* Provider for bottom sheet manager context.
|
|
14
|
+
* Use ScaleBackgroundWrapper inside to enable iOS-style scale effect on content.
|
|
15
|
+
*/
|
|
11
16
|
function BottomSheetManagerProviderComp({
|
|
12
17
|
id,
|
|
13
18
|
children
|
|
14
19
|
}) {
|
|
15
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
20
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BottomSheetManager.BottomSheetManagerContext.Provider, {
|
|
16
21
|
value: {
|
|
17
22
|
groupId: id
|
|
18
23
|
},
|
|
19
|
-
children:
|
|
24
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
25
|
+
style: styles.container,
|
|
26
|
+
children: children
|
|
27
|
+
})
|
|
20
28
|
}, id);
|
|
21
29
|
}
|
|
22
30
|
const BottomSheetManagerProvider = exports.BottomSheetManagerProvider = /*#__PURE__*/_react.default.memo(BottomSheetManagerProviderComp);
|
|
23
31
|
const useBottomSheetManagerContext = () => {
|
|
24
|
-
const context = _react.default.useContext(
|
|
32
|
+
const context = _react.default.useContext(_BottomSheetManager.BottomSheetManagerContext);
|
|
25
33
|
if (!context) {
|
|
26
34
|
throw new Error('useBottomSheetManagerContext must be used within a BottomSheetManagerProvider');
|
|
27
35
|
}
|
|
@@ -29,11 +37,17 @@ const useBottomSheetManagerContext = () => {
|
|
|
29
37
|
};
|
|
30
38
|
exports.useBottomSheetManagerContext = useBottomSheetManagerContext;
|
|
31
39
|
const useMaybeBottomSheetManagerContext = () => {
|
|
32
|
-
const context = _react.default.useContext(
|
|
40
|
+
const context = _react.default.useContext(_BottomSheetManager.BottomSheetManagerContext);
|
|
33
41
|
if (!context) {
|
|
34
42
|
return null;
|
|
35
43
|
}
|
|
36
44
|
return context;
|
|
37
45
|
};
|
|
38
46
|
exports.useMaybeBottomSheetManagerContext = useMaybeBottomSheetManagerContext;
|
|
47
|
+
const styles = _reactNative.StyleSheet.create({
|
|
48
|
+
container: {
|
|
49
|
+
flex: 1,
|
|
50
|
+
backgroundColor: '#000'
|
|
51
|
+
}
|
|
52
|
+
});
|
|
39
53
|
//# sourceMappingURL=BottomSheetManager.provider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_BottomSheetManager","_jsxRuntime","e","__esModule","default","BottomSheetManagerProviderComp","id","children","jsx","BottomSheetManagerContext","Provider","value","groupId","View","style","styles","container","BottomSheetManagerProvider","exports","React","memo","useBottomSheetManagerContext","context","useContext","Error","useMaybeBottomSheetManagerContext","StyleSheet","create","flex","backgroundColor"],"sourceRoot":"../../src","sources":["BottomSheetManager.provider.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,mBAAA,GAAAF,OAAA;AAGsC,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAiBtC;AACA;AACA;AACA;AACA,SAASG,8BAA8BA,CAAC;EAAEC,EAAE;EAAEC;AAAwB,CAAC,EAAE;EACvE,oBACE,IAAAN,WAAA,CAAAO,GAAA,EAACR,mBAAA,CAAAS,yBAAyB,CAACC,QAAQ;IAAUC,KAAK,EAAE;MAAEC,OAAO,EAAEN;IAAG,CAAE;IAAAC,QAAA,eAClE,IAAAN,WAAA,CAAAO,GAAA,EAACT,YAAA,CAAAc,IAAI;MAACC,KAAK,EAAEC,MAAM,CAACC,SAAU;MAAAT,QAAA,EAAEA;IAAQ,CAAO;EAAC,GADTD,EAEL,CAAC;AAEzC;AAEO,MAAMW,0BAA0B,GAAAC,OAAA,CAAAD,0BAAA,gBAAGE,cAAK,CAACC,IAAI,CAClDf,8BACF,CAAC;AAEM,MAAMgB,4BAA4B,GACvCA,CAAA,KAAsC;EACpC,MAAMC,OAAO,GAAGH,cAAK,CAACI,UAAU,CAACd,6CAAyB,CAAC;EAE3D,IAAI,CAACa,OAAO,EAAE;IACZ,MAAM,IAAIE,KAAK,CACb,+EACF,CAAC;EACH;EACA,OAAOF,OAAO;AAChB,CAAC;AAACJ,OAAA,CAAAG,4BAAA,GAAAA,4BAAA;AAEG,MAAMI,iCAAiC,GAC5CA,CAAA,KAA6C;EAC3C,MAAMH,OAAO,GAAGH,cAAK,CAACI,UAAU,CAACd,6CAAyB,CAAC;EAE3D,IAAI,CAACa,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EACA,OAAOA,OAAO;AAChB,CAAC;AAACJ,OAAA,CAAAO,iCAAA,GAAAA,iCAAA;AAEJ,MAAMV,MAAM,GAAGW,uBAAU,CAACC,MAAM,CAAC;EAC/BX,SAAS,EAAE;IACTY,IAAI,EAAE,CAAC;IACPC,eAAe,EAAE;EACnB;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ScaleBackgroundWrapper = ScaleBackgroundWrapper;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
10
|
+
var _shallow = require("zustand/shallow");
|
|
11
|
+
var _BottomSheetManager = require("./BottomSheetManager.context");
|
|
12
|
+
var _bottomSheet = require("./bottomSheet.store");
|
|
13
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
|
+
/**
|
|
17
|
+
* Wraps content with iOS-style scale animation when a bottom sheet with
|
|
18
|
+
* scaleBackground: true is open. Place your main content inside this wrapper,
|
|
19
|
+
* but keep BottomSheetHost outside of it.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* <BottomSheetManagerProvider id="default">
|
|
24
|
+
* <ScaleBackgroundWrapper config={{ scale: 0.92 }}>
|
|
25
|
+
* <MainContent />
|
|
26
|
+
* </ScaleBackgroundWrapper>
|
|
27
|
+
* <BottomSheetHost />
|
|
28
|
+
* </BottomSheetManagerProvider>
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
function ScaleBackgroundWrapper({
|
|
32
|
+
children,
|
|
33
|
+
config
|
|
34
|
+
}) {
|
|
35
|
+
const context = (0, _react.useContext)(_BottomSheetManager.BottomSheetManagerContext);
|
|
36
|
+
const groupId = context?.groupId ?? 'default';
|
|
37
|
+
const {
|
|
38
|
+
scale = 0.92,
|
|
39
|
+
translateY = 10,
|
|
40
|
+
borderRadius = 12,
|
|
41
|
+
duration = 300
|
|
42
|
+
} = config ?? {};
|
|
43
|
+
const hasActiveScaleSheet = (0, _bottomSheet.useBottomSheetStore)(store => store.stack.some(sheet => sheet.groupId === groupId && sheet.scaleBackground && sheet.status !== 'closing'), _shallow.shallow);
|
|
44
|
+
const animationProgress = (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.withTiming)(hasActiveScaleSheet ? 1 : 0, {
|
|
45
|
+
duration
|
|
46
|
+
}));
|
|
47
|
+
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
48
|
+
const progress = animationProgress.value;
|
|
49
|
+
return {
|
|
50
|
+
transform: [{
|
|
51
|
+
scale: (0, _reactNativeReanimated.interpolate)(progress, [0, 1], [1, scale])
|
|
52
|
+
}, {
|
|
53
|
+
translateY: (0, _reactNativeReanimated.interpolate)(progress, [0, 1], [0, translateY])
|
|
54
|
+
}],
|
|
55
|
+
borderRadius: (0, _reactNativeReanimated.interpolate)(progress, [0, 1], [0, borderRadius]),
|
|
56
|
+
overflow: progress > 0 ? 'hidden' : 'visible'
|
|
57
|
+
};
|
|
58
|
+
});
|
|
59
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
60
|
+
style: [styles.scaleWrapper, animatedStyle],
|
|
61
|
+
children: children
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
const styles = _reactNative.StyleSheet.create({
|
|
65
|
+
scaleWrapper: {
|
|
66
|
+
flex: 1
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
//# sourceMappingURL=ScaleBackgroundWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_shallow","_BottomSheetManager","_bottomSheet","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ScaleBackgroundWrapper","children","config","context","useContext","BottomSheetManagerContext","groupId","scale","translateY","borderRadius","duration","hasActiveScaleSheet","useBottomSheetStore","store","stack","some","sheet","scaleBackground","status","shallow","animationProgress","useDerivedValue","withTiming","animatedStyle","useAnimatedStyle","progress","value","transform","interpolate","overflow","jsx","View","style","styles","scaleWrapper","StyleSheet","create","flex"],"sourceRoot":"../../src","sources":["ScaleBackgroundWrapper.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -67,6 +67,15 @@ const useBottomSheetStore = exports.useBottomSheetStore = (0, _traditional.creat
|
|
|
67
67
|
stack
|
|
68
68
|
};
|
|
69
69
|
}),
|
|
70
|
+
markOpen: id => set(state => {
|
|
71
|
+
const stack = state.stack.map(s => s.id === id ? {
|
|
72
|
+
...s,
|
|
73
|
+
status: 'open'
|
|
74
|
+
} : s);
|
|
75
|
+
return {
|
|
76
|
+
stack
|
|
77
|
+
};
|
|
78
|
+
}),
|
|
70
79
|
startClosing: id => set(state => {
|
|
71
80
|
const stack = [...state.stack];
|
|
72
81
|
const index = stack.findIndex(s => s.id === id);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_middleware","require","_traditional","useBottomSheetStore","exports","create","subscribeWithSelector","set","stack","push","sheet","state","some","s","id","status","switch","length","topIndex","replace","prevTop","pop","startClosing","index","findIndex","closing","below","finishClosing","filter","clearAll"],"sourceRoot":"../../src","sources":["bottomSheet.store.ts"],"mappings":";;;;;;AACA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;
|
|
1
|
+
{"version":3,"names":["_middleware","require","_traditional","useBottomSheetStore","exports","create","subscribeWithSelector","set","stack","push","sheet","state","some","s","id","status","switch","length","topIndex","replace","prevTop","pop","markOpen","map","startClosing","index","findIndex","closing","below","finishClosing","filter","clearAll"],"sourceRoot":"../../src","sources":["bottomSheet.store.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
exports.createSheetEventHandlers = createSheetEventHandlers;
|
|
6
7
|
exports.initBottomSheetCoordinator = initBottomSheetCoordinator;
|
|
7
8
|
var _bottomSheet = require("./bottomSheet.store");
|
|
8
9
|
var _refsMap = require("./refsMap");
|
|
@@ -40,4 +41,41 @@ function initBottomSheetCoordinator() {
|
|
|
40
41
|
});
|
|
41
42
|
});
|
|
42
43
|
}
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* Creates event handlers for a bottom sheet that sync gorhom events back to the store.
|
|
47
|
+
* Direction: Gorhom Events → Store
|
|
48
|
+
*/
|
|
49
|
+
function createSheetEventHandlers(sheetId) {
|
|
50
|
+
const {
|
|
51
|
+
startClosing,
|
|
52
|
+
finishClosing,
|
|
53
|
+
markOpen
|
|
54
|
+
} = _bottomSheet.useBottomSheetStore.getState();
|
|
55
|
+
const handleAnimate = (fromIndex, toIndex) => {
|
|
56
|
+
const currentStatus = _bottomSheet.useBottomSheetStore.getState().stack.find(s => s.id === sheetId)?.status;
|
|
57
|
+
|
|
58
|
+
// Sheet is closing (animating to -1)
|
|
59
|
+
if (toIndex === -1) {
|
|
60
|
+
if (currentStatus === 'open' || currentStatus === 'opening') {
|
|
61
|
+
startClosing(sheetId);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// Sheet finished opening (animating from -1 to visible)
|
|
66
|
+
if (fromIndex === -1 && toIndex >= 0) {
|
|
67
|
+
markOpen(sheetId);
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
const handleClose = () => {
|
|
71
|
+
const currentStatus = _bottomSheet.useBottomSheetStore.getState().stack.find(s => s.id === sheetId)?.status;
|
|
72
|
+
if (currentStatus !== 'hidden') {
|
|
73
|
+
finishClosing(sheetId);
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
return {
|
|
77
|
+
handleAnimate,
|
|
78
|
+
handleClose
|
|
79
|
+
};
|
|
80
|
+
}
|
|
43
81
|
//# sourceMappingURL=bottomSheetCoordinator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_bottomSheet","require","_refsMap","initBottomSheetCoordinator","useBottomSheetStore","subscribe","s","stack","map","id","status","next","prev","forEach","prevStatus","find","p","ref","sheetRefs","current","expand","close"],"sourceRoot":"../../src","sources":["bottomSheetCoordinator.ts"],"mappings":"
|
|
1
|
+
{"version":3,"names":["_bottomSheet","require","_refsMap","initBottomSheetCoordinator","useBottomSheetStore","subscribe","s","stack","map","id","status","next","prev","forEach","prevStatus","find","p","ref","sheetRefs","current","expand","close","createSheetEventHandlers","sheetId","startClosing","finishClosing","markOpen","getState","handleAnimate","fromIndex","toIndex","currentStatus","handleClose"],"sourceRoot":"../../src","sources":["bottomSheetCoordinator.ts"],"mappings":";;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAEO,SAASE,0BAA0BA,CAAA,EAAG;EAC3CC,gCAAmB,CAACC,SAAS,CAC1BC,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,GAAG,CAAC,CAAC;IAAEC,EAAE;IAAEC;EAAO,CAAC,MAAM;IAAED,EAAE;IAAEC;EAAO,CAAC,CAAC,CAAC,EACxD,CAACC,IAAI,EAAEC,IAAI,KAAK;IACdD,IAAI,CAACE,OAAO,CAAC,CAAC;MAAEJ,EAAE;MAAEC;IAAO,CAAC,KAAK;MAC/B,MAAMI,UAAU,GAAGF,IAAI,CAACG,IAAI,CAAEC,CAAC,IAAKA,CAAC,CAACP,EAAE,KAAKA,EAAE,CAAC,EAAEC,MAAM;MAExD,IAAII,UAAU,KAAKJ,MAAM,EAAE;QACzB;MACF;MAEA,MAAMO,GAAG,GAAGC,kBAAS,CAACT,EAAE,CAAC,EAAEU,OAAO;MAClC,IAAI,CAACF,GAAG,EAAE;QACR;MACF;MAEA,QAAQP,MAAM;QACZ,KAAK,SAAS;UACZO,GAAG,CAACG,MAAM,CAAC,CAAC;UACZ;QACF,KAAK,QAAQ;UACXH,GAAG,CAACI,KAAK,CAAC,CAAC;UACX;QACF,KAAK,SAAS;UACZJ,GAAG,CAACI,KAAK,CAAC,CAAC;UACX;MACJ;IACF,CAAC,CAAC;EACJ,CACF,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACO,SAASC,wBAAwBA,CAACC,OAAe,EAAE;EACxD,MAAM;IAAEC,YAAY;IAAEC,aAAa;IAAEC;EAAS,CAAC,GAC7CtB,gCAAmB,CAACuB,QAAQ,CAAC,CAAC;EAEhC,MAAMC,aAAa,GAAGA,CAACC,SAAiB,EAAEC,OAAe,KAAK;IAC5D,MAAMC,aAAa,GAAG3B,gCAAmB,CACtCuB,QAAQ,CAAC,CAAC,CACVpB,KAAK,CAACQ,IAAI,CAAET,CAAC,IAAKA,CAAC,CAACG,EAAE,KAAKc,OAAO,CAAC,EAAEb,MAAM;;IAE9C;IACA,IAAIoB,OAAO,KAAK,CAAC,CAAC,EAAE;MAClB,IAAIC,aAAa,KAAK,MAAM,IAAIA,aAAa,KAAK,SAAS,EAAE;QAC3DP,YAAY,CAACD,OAAO,CAAC;MACvB;IACF;;IAEA;IACA,IAAIM,SAAS,KAAK,CAAC,CAAC,IAAIC,OAAO,IAAI,CAAC,EAAE;MACpCJ,QAAQ,CAACH,OAAO,CAAC;IACnB;EACF,CAAC;EAED,MAAMS,WAAW,GAAGA,CAAA,KAAM;IACxB,MAAMD,aAAa,GAAG3B,gCAAmB,CACtCuB,QAAQ,CAAC,CAAC,CACVpB,KAAK,CAACQ,IAAI,CAAET,CAAC,IAAKA,CAAC,CAACG,EAAE,KAAKc,OAAO,CAAC,EAAEb,MAAM;IAE9C,IAAIqB,aAAa,KAAK,QAAQ,EAAE;MAC9BN,aAAa,CAACF,OAAO,CAAC;IACxB;EACF,CAAC;EAED,OAAO;IACLK,aAAa;IACbI;EACF,CAAC;AACH","ignoreList":[]}
|
package/lib/commonjs/index.js
CHANGED
|
@@ -21,6 +21,12 @@ Object.defineProperty(exports, "BottomSheetManagerProvider", {
|
|
|
21
21
|
return _BottomSheetManager.BottomSheetManagerProvider;
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
+
Object.defineProperty(exports, "ScaleBackgroundWrapper", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () {
|
|
27
|
+
return _ScaleBackgroundWrapper.ScaleBackgroundWrapper;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
24
30
|
Object.defineProperty(exports, "useBottomSheetManager", {
|
|
25
31
|
enumerable: true,
|
|
26
32
|
get: function () {
|
|
@@ -38,4 +44,5 @@ var _BottomSheetManager = require("./BottomSheetManager.provider");
|
|
|
38
44
|
var _useBottomSheetManager = require("./useBottomSheetManager");
|
|
39
45
|
var _useBottomSheetState = require("./useBottomSheetState");
|
|
40
46
|
var _BottomSheetManaged = require("./BottomSheetManaged");
|
|
47
|
+
var _ScaleBackgroundWrapper = require("./ScaleBackgroundWrapper");
|
|
41
48
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_BottomSheetHost","require","_BottomSheetManager","_useBottomSheetManager","_useBottomSheetState","_BottomSheetManaged"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"names":["_BottomSheetHost","require","_BottomSheetManager","_useBottomSheetManager","_useBottomSheetState","_BottomSheetManaged","_ScaleBackgroundWrapper"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AAIA,IAAAE,sBAAA,GAAAF,OAAA;AACA,IAAAG,oBAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AACA,IAAAK,uBAAA,GAAAL,OAAA","ignoreList":[]}
|
|
@@ -36,24 +36,18 @@ const useBottomSheetManager = () => {
|
|
|
36
36
|
const contentWithRef = /*#__PURE__*/_react.default.cloneElement(content, {
|
|
37
37
|
ref
|
|
38
38
|
});
|
|
39
|
+
const sheetData = {
|
|
40
|
+
id,
|
|
41
|
+
groupId,
|
|
42
|
+
content: contentWithRef,
|
|
43
|
+
scaleBackground: options.scaleBackground
|
|
44
|
+
};
|
|
39
45
|
if (options.mode === 'replace') {
|
|
40
|
-
replaceBottomSheet(
|
|
41
|
-
id,
|
|
42
|
-
groupId,
|
|
43
|
-
content: contentWithRef
|
|
44
|
-
});
|
|
46
|
+
replaceBottomSheet(sheetData);
|
|
45
47
|
} else if (options.mode === 'switch') {
|
|
46
|
-
switchBottomSheet(
|
|
47
|
-
id,
|
|
48
|
-
groupId,
|
|
49
|
-
content: contentWithRef
|
|
50
|
-
});
|
|
48
|
+
switchBottomSheet(sheetData);
|
|
51
49
|
} else {
|
|
52
|
-
pushBottomSheet(
|
|
53
|
-
id,
|
|
54
|
-
groupId,
|
|
55
|
-
content: contentWithRef
|
|
56
|
-
});
|
|
50
|
+
pushBottomSheet(sheetData);
|
|
57
51
|
}
|
|
58
52
|
return id;
|
|
59
53
|
}, [bottomSheetManagerContext?.groupId, pushBottomSheet, replaceBottomSheet, switchBottomSheet]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_bottomSheet","_BottomSheetManager","_refsMap","_shallow","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","useBottomSheetManager","bottomSheetManagerContext","useMaybeBottomSheetManagerContext","pushBottomSheet","replaceBottomSheet","switchBottomSheet","startClosing","storeClearAll","useBottomSheetStore","store","clearAll","replace","push","switch","shallow","openBottomSheet","useCallback","content","options","groupId","id","Math","random","toString","ref","React","createRef","sheetRefs","contentWithRef","cloneElement","mode","close","exports"],"sourceRoot":"../../src","sources":["useBottomSheetManager.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAEA,IAAAI,QAAA,GAAAJ,OAAA;AAA0C,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAP,wBAAAO,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAEnC,MAAMW,qBAAqB,GAAGA,CAAA,KAAM;EACzC,MAAMC,yBAAyB,GAAG,IAAAC,qDAAiC,EAAC,CAAC;EAErE,MAAM;IACJC,eAAe;IACfC,kBAAkB;IAClBC,iBAAiB;IACjBC,YAAY;IACZC;EACF,CAAC,GAAG,IAAAC,gCAAmB,EACpBC,KAAK,KAAM;IACVF,aAAa,EAAEE,KAAK,CAACC,QAAQ;IAC7BN,kBAAkB,EAAEK,KAAK,CAACE,OAAO;IACjCR,eAAe,EAAEM,KAAK,CAACG,IAAI;IAC3BP,iBAAiB,EAAEI,KAAK,CAACI,MAAM;IAC/BP,YAAY,EAAEG,KAAK,CAACH;EACtB,CAAC,CAAC,EACFQ,gBACF,CAAC;EAED,MAAMC,eAAe,GAAG,IAAAC,kBAAW,EACjC,CACEC,OAA2B,EAC3BC,
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_bottomSheet","_BottomSheetManager","_refsMap","_shallow","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","useBottomSheetManager","bottomSheetManagerContext","useMaybeBottomSheetManagerContext","pushBottomSheet","replaceBottomSheet","switchBottomSheet","startClosing","storeClearAll","useBottomSheetStore","store","clearAll","replace","push","switch","shallow","openBottomSheet","useCallback","content","options","groupId","id","Math","random","toString","ref","React","createRef","sheetRefs","contentWithRef","cloneElement","sheetData","scaleBackground","mode","close","exports"],"sourceRoot":"../../src","sources":["useBottomSheetManager.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAEA,IAAAI,QAAA,GAAAJ,OAAA;AAA0C,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAP,wBAAAO,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAEnC,MAAMW,qBAAqB,GAAGA,CAAA,KAAM;EACzC,MAAMC,yBAAyB,GAAG,IAAAC,qDAAiC,EAAC,CAAC;EAErE,MAAM;IACJC,eAAe;IACfC,kBAAkB;IAClBC,iBAAiB;IACjBC,YAAY;IACZC;EACF,CAAC,GAAG,IAAAC,gCAAmB,EACpBC,KAAK,KAAM;IACVF,aAAa,EAAEE,KAAK,CAACC,QAAQ;IAC7BN,kBAAkB,EAAEK,KAAK,CAACE,OAAO;IACjCR,eAAe,EAAEM,KAAK,CAACG,IAAI;IAC3BP,iBAAiB,EAAEI,KAAK,CAACI,MAAM;IAC/BP,YAAY,EAAEG,KAAK,CAACH;EACtB,CAAC,CAAC,EACFQ,gBACF,CAAC;EAED,MAAMC,eAAe,GAAG,IAAAC,kBAAW,EACjC,CACEC,OAA2B,EAC3BC,OAKC,GAAG,CAAC,CAAC,KACH;IACH,MAAMC,OAAO,GACXD,OAAO,CAACC,OAAO,IAAIlB,yBAAyB,EAAEkB,OAAO,IAAI,SAAS;IAEpE,MAAMC,EAAE,GAAGF,OAAO,CAACE,EAAE,IAAIC,IAAI,CAACC,MAAM,CAAC,CAAC,CAACC,QAAQ,CAAC,EAAE,CAAC;IACnD,MAAMC,GAAG,gBAAGC,cAAK,CAACC,SAAS,CAAqB,CAAC;IAEjDC,kBAAS,CAACP,EAAE,CAAC,GAAGI,GAAG;;IAEnB;IACA,MAAMI,cAAc,gBAAGH,cAAK,CAACI,YAAY,CAACZ,OAAO,EAAE;MAAEO;IAAI,CAAC,CAAC;IAE3D,MAAMM,SAAS,GAAG;MAChBV,EAAE;MACFD,OAAO;MACPF,OAAO,EAAEW,cAAc;MACvBG,eAAe,EAAEb,OAAO,CAACa;IAC3B,CAAC;IAED,IAAIb,OAAO,CAACc,IAAI,KAAK,SAAS,EAAE;MAC9B5B,kBAAkB,CAAC0B,SAAS,CAAC;IAC/B,CAAC,MAAM,IAAIZ,OAAO,CAACc,IAAI,KAAK,QAAQ,EAAE;MACpC3B,iBAAiB,CAACyB,SAAS,CAAC;IAC9B,CAAC,MAAM;MACL3B,eAAe,CAAC2B,SAAS,CAAC;IAC5B;IAEA,OAAOV,EAAE;EACX,CAAC,EACD,CACEnB,yBAAyB,EAAEkB,OAAO,EAClChB,eAAe,EACfC,kBAAkB,EAClBC,iBAAiB,CAErB,CAAC;EAED,MAAM4B,KAAK,GAAG,IAAAjB,kBAAW,EACtBI,EAAU,IAAK;IACdd,YAAY,CAACc,EAAE,CAAC;EAClB,CAAC,EACD,CAACd,YAAY,CACf,CAAC;EAED,MAAMI,QAAQ,GAAG,IAAAM,kBAAW,EAAC,MAAM;IACjCT,aAAa,CAAC,CAAC;EACjB,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,OAAO;IACLG,QAAQ;IACRuB,KAAK;IACLlB,eAAe;IACfZ,eAAe;IACfC;EACF,CAAC;AACH,CAAC;AAAC8B,OAAA,CAAAlC,qBAAA,GAAAA,qBAAA","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../example/src/App.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../example/src/App.tsx"],"names":[],"mappings":"AASA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAQ3D,MAAM,CAAC,OAAO,UAAU,GAAG,4CAiB1B;AAmBD,eAAO,MAAM,OAAO,GAAI,IAAI,iBAAiB,4CAU5C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetManaged.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetManaged.tsx"],"names":[],"mappings":"AAAA,OAA4B,EAI1B,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,
|
|
1
|
+
{"version":3,"file":"BottomSheetManaged.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetManaged.tsx"],"names":[],"mappings":"AAAA,OAA4B,EAI1B,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,KAA+B,MAAM,OAAO,CAAC;AAKpD,MAAM,WAAW,cAAe,SAAQ,kBAAkB;CAAG;AAE7D,UAAU,uBAAwB,SAAQ,gBAAgB;CAAG;AAE7D,eAAO,MAAM,kBAAkB,gGAuE9B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BottomSheetManager.context.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetManager.context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,8BAA8B;IAC7C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,yBAAyB,sDAC4B,CAAC"}
|
|
@@ -1,14 +1,25 @@
|
|
|
1
1
|
import React, { type PropsWithChildren } from 'react';
|
|
2
|
-
|
|
2
|
+
import { type BottomSheetManagerContextValue } from './BottomSheetManager.context';
|
|
3
|
+
export interface ScaleBackgroundConfig {
|
|
4
|
+
/** Scale factor when sheet is open (default: 0.92) */
|
|
5
|
+
scale?: number;
|
|
6
|
+
/** Vertical translation when sheet is open (default: 10) */
|
|
7
|
+
translateY?: number;
|
|
8
|
+
/** Border radius when sheet is open (default: 12) */
|
|
9
|
+
borderRadius?: number;
|
|
10
|
+
/** Animation duration in ms (default: 300) */
|
|
11
|
+
duration?: number;
|
|
12
|
+
}
|
|
13
|
+
interface ProviderProps extends PropsWithChildren {
|
|
3
14
|
id: string;
|
|
4
15
|
}
|
|
5
|
-
|
|
16
|
+
/**
|
|
17
|
+
* Provider for bottom sheet manager context.
|
|
18
|
+
* Use ScaleBackgroundWrapper inside to enable iOS-style scale effect on content.
|
|
19
|
+
*/
|
|
20
|
+
declare function BottomSheetManagerProviderComp({ id, children }: ProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
6
21
|
export declare const BottomSheetManagerProvider: React.MemoExoticComponent<typeof BottomSheetManagerProviderComp>;
|
|
7
|
-
export declare const useBottomSheetManagerContext: () =>
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
export declare const useMaybeBottomSheetManagerContext: () => {
|
|
11
|
-
groupId: string;
|
|
12
|
-
} | null;
|
|
22
|
+
export declare const useBottomSheetManagerContext: () => BottomSheetManagerContextValue;
|
|
23
|
+
export declare const useMaybeBottomSheetManagerContext: () => BottomSheetManagerContextValue | null;
|
|
13
24
|
export {};
|
|
14
25
|
//# sourceMappingURL=BottomSheetManager.provider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetManager.provider.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetManager.provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"BottomSheetManager.provider.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetManager.provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAEL,KAAK,8BAA8B,EACpC,MAAM,8BAA8B,CAAC;AAEtC,MAAM,WAAW,qBAAqB;IACpC,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,aAAc,SAAQ,iBAAiB;IAC/C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;;GAGG;AACH,iBAAS,8BAA8B,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAMtE;AAED,eAAO,MAAM,0BAA0B,kEAEtC,CAAC;AAEF,eAAO,MAAM,4BAA4B,QACnC,8BASH,CAAC;AAEJ,eAAO,MAAM,iCAAiC,QACxC,8BAA8B,GAAG,IAOpC,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { type PropsWithChildren } from 'react';
|
|
2
|
+
export interface ScaleBackgroundConfig {
|
|
3
|
+
/** Scale factor when sheet is open (default: 0.92) */
|
|
4
|
+
scale?: number;
|
|
5
|
+
/** Vertical translation when sheet is open (default: 10) */
|
|
6
|
+
translateY?: number;
|
|
7
|
+
/** Border radius when sheet is open (default: 12) */
|
|
8
|
+
borderRadius?: number;
|
|
9
|
+
/** Animation duration in ms (default: 300) */
|
|
10
|
+
duration?: number;
|
|
11
|
+
}
|
|
12
|
+
interface ScaleBackgroundWrapperProps extends PropsWithChildren {
|
|
13
|
+
config?: ScaleBackgroundConfig;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Wraps content with iOS-style scale animation when a bottom sheet with
|
|
17
|
+
* scaleBackground: true is open. Place your main content inside this wrapper,
|
|
18
|
+
* but keep BottomSheetHost outside of it.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
* <BottomSheetManagerProvider id="default">
|
|
23
|
+
* <ScaleBackgroundWrapper config={{ scale: 0.92 }}>
|
|
24
|
+
* <MainContent />
|
|
25
|
+
* </ScaleBackgroundWrapper>
|
|
26
|
+
* <BottomSheetHost />
|
|
27
|
+
* </BottomSheetManagerProvider>
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
export declare function ScaleBackgroundWrapper({ children, config, }: ScaleBackgroundWrapperProps): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export {};
|
|
32
|
+
//# sourceMappingURL=ScaleBackgroundWrapper.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScaleBackgroundWrapper.d.ts","sourceRoot":"","sources":["../../../src/ScaleBackgroundWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAY3D,MAAM,WAAW,qBAAqB;IACpC,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,2BAA4B,SAAQ,iBAAiB;IAC7D,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,MAAM,GACP,EAAE,2BAA2B,2CA8C7B"}
|
|
@@ -6,6 +6,7 @@ export interface BottomSheetState {
|
|
|
6
6
|
id: string;
|
|
7
7
|
content: ReactNode;
|
|
8
8
|
status: BottomSheetStatus;
|
|
9
|
+
scaleBackground?: boolean;
|
|
9
10
|
}
|
|
10
11
|
type TriggerState = Omit<BottomSheetState, 'status'>;
|
|
11
12
|
interface BottomSheetStoreState {
|
|
@@ -15,6 +16,7 @@ interface BottomSheetStoreActions {
|
|
|
15
16
|
push(sheet: TriggerState): void;
|
|
16
17
|
switch(sheet: TriggerState): void;
|
|
17
18
|
replace(sheet: TriggerState): void;
|
|
19
|
+
markOpen(id: string): void;
|
|
18
20
|
startClosing(id: string): void;
|
|
19
21
|
finishClosing(id: string): void;
|
|
20
22
|
clearAll(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bottomSheet.store.d.ts","sourceRoot":"","sources":["../../../src/bottomSheet.store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC1E,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,KAAK,YAAY,GAAG,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;AAErD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,gBAAgB,EAAE,CAAC;CAC3B;AAED,UAAU,uBAAuB;IAC/B,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IAChC,MAAM,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,QAAQ,IAAI,IAAI,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB;;;;;;;;
|
|
1
|
+
{"version":3,"file":"bottomSheet.store.d.ts","sourceRoot":"","sources":["../../../src/bottomSheet.store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC1E,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,KAAK,YAAY,GAAG,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;AAErD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,gBAAgB,EAAE,CAAC;CAC3B;AAED,UAAU,uBAAuB;IAC/B,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IAChC,MAAM,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,QAAQ,IAAI,IAAI,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB;;;;;;;;EAkG/B,CAAC"}
|
|
@@ -1,2 +1,10 @@
|
|
|
1
1
|
export declare function initBottomSheetCoordinator(): void;
|
|
2
|
+
/**
|
|
3
|
+
* Creates event handlers for a bottom sheet that sync gorhom events back to the store.
|
|
4
|
+
* Direction: Gorhom Events → Store
|
|
5
|
+
*/
|
|
6
|
+
export declare function createSheetEventHandlers(sheetId: string): {
|
|
7
|
+
handleAnimate: (fromIndex: number, toIndex: number) => void;
|
|
8
|
+
handleClose: () => void;
|
|
9
|
+
};
|
|
2
10
|
//# sourceMappingURL=bottomSheetCoordinator.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bottomSheetCoordinator.d.ts","sourceRoot":"","sources":["../../../src/bottomSheetCoordinator.ts"],"names":[],"mappings":"AAGA,wBAAgB,0BAA0B,SA8BzC"}
|
|
1
|
+
{"version":3,"file":"bottomSheetCoordinator.d.ts","sourceRoot":"","sources":["../../../src/bottomSheetCoordinator.ts"],"names":[],"mappings":"AAGA,wBAAgB,0BAA0B,SA8BzC;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,MAAM;+BAIpB,MAAM,WAAW,MAAM;;EAgC1D"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { BottomSheetHost } from './BottomSheetHost';
|
|
2
|
-
export { BottomSheetManagerProvider } from './BottomSheetManager.provider';
|
|
2
|
+
export { BottomSheetManagerProvider, type ScaleBackgroundConfig, } from './BottomSheetManager.provider';
|
|
3
3
|
export { useBottomSheetManager } from './useBottomSheetManager';
|
|
4
4
|
export { useBottomSheetState } from './useBottomSheetState';
|
|
5
5
|
export { BottomSheetManaged } from './BottomSheetManaged';
|
|
6
|
+
export { ScaleBackgroundWrapper } from './ScaleBackgroundWrapper';
|
|
6
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EACL,0BAA0B,EAC1B,KAAK,qBAAqB,GAC3B,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}
|
|
@@ -7,16 +7,19 @@ export declare const useBottomSheetManager: () => {
|
|
|
7
7
|
id?: string;
|
|
8
8
|
groupId?: string;
|
|
9
9
|
mode?: OpenMode;
|
|
10
|
+
scaleBackground?: boolean;
|
|
10
11
|
}) => string;
|
|
11
12
|
pushBottomSheet: (sheet: {
|
|
12
13
|
groupId: string;
|
|
13
14
|
id: string;
|
|
14
15
|
content: React.ReactNode;
|
|
16
|
+
scaleBackground?: boolean | undefined;
|
|
15
17
|
}) => void;
|
|
16
18
|
replaceBottomSheet: (sheet: {
|
|
17
19
|
groupId: string;
|
|
18
20
|
id: string;
|
|
19
21
|
content: React.ReactNode;
|
|
22
|
+
scaleBackground?: boolean | undefined;
|
|
20
23
|
}) => void;
|
|
21
24
|
};
|
|
22
25
|
//# sourceMappingURL=useBottomSheetManager.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useBottomSheetManager.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAuB,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAMzE,eAAO,MAAM,qBAAqB;;
|
|
1
|
+
{"version":3,"file":"useBottomSheetManager.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAuB,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAMzE,eAAO,MAAM,qBAAqB;;gBAmEzB,MAAM;+BA7CA,KAAK,CAAC,YAAY,YAClB;QACP,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;QAChB,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B;;;;;;;;;;;;;CAwDN,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-bottom-sheet-stack",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Bottom Sheet Stack Manager",
|
|
5
5
|
"source": "./src/index.tsx",
|
|
6
6
|
"main": "lib/commonjs/index.js",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"@eslint/eslintrc": "^3.3.0",
|
|
44
44
|
"@eslint/js": "^9.22.0",
|
|
45
45
|
"@evilmartians/lefthook": "^1.5.0",
|
|
46
|
-
"@gorhom/bottom-sheet": "^5.
|
|
46
|
+
"@gorhom/bottom-sheet": "^5.2.8",
|
|
47
47
|
"@react-native/eslint-config": "^0.78.0",
|
|
48
48
|
"@release-it/conventional-changelog": "^9.0.2",
|
|
49
49
|
"@types/jest": "^29.5.5",
|
|
@@ -55,12 +55,13 @@
|
|
|
55
55
|
"eslint-plugin-prettier": "^5.2.3",
|
|
56
56
|
"jest": "^29.7.0",
|
|
57
57
|
"prettier": "^3.0.3",
|
|
58
|
-
"react": "
|
|
59
|
-
"react-native": "0.
|
|
58
|
+
"react": "19.1.0",
|
|
59
|
+
"react-native": "0.81.5",
|
|
60
60
|
"react-native-builder-bob": "^0.40.6",
|
|
61
|
-
"react-native-gesture-handler": "^2.
|
|
62
|
-
"react-native-reanimated": "^
|
|
63
|
-
"react-native-safe-area-context": "^5.
|
|
61
|
+
"react-native-gesture-handler": "^2.30.0",
|
|
62
|
+
"react-native-reanimated": "^4.2.1",
|
|
63
|
+
"react-native-safe-area-context": "^5.6.2",
|
|
64
|
+
"react-native-worklets": "^0.7.1",
|
|
64
65
|
"release-it": "^17.10.0",
|
|
65
66
|
"typescript": "^5.2.2",
|
|
66
67
|
"zustand": "^5.0.3"
|
|
@@ -5,12 +5,9 @@ import BottomSheetOriginal, {
|
|
|
5
5
|
type BottomSheetProps,
|
|
6
6
|
} from '@gorhom/bottom-sheet';
|
|
7
7
|
import { type BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
|
|
8
|
-
import React, { useCallback } from 'react';
|
|
8
|
+
import React, { useCallback, useMemo } from 'react';
|
|
9
9
|
|
|
10
|
-
import {
|
|
11
|
-
useBottomSheetStore,
|
|
12
|
-
type BottomSheetStatus,
|
|
13
|
-
} from './bottomSheet.store';
|
|
10
|
+
import { createSheetEventHandlers } from './bottomSheetCoordinator';
|
|
14
11
|
import { useBottomSheetState } from './useBottomSheetState';
|
|
15
12
|
|
|
16
13
|
export interface BottomSheetRef extends BottomSheetMethods {}
|
|
@@ -32,53 +29,37 @@ export const BottomSheetManaged = React.forwardRef<
|
|
|
32
29
|
},
|
|
33
30
|
ref
|
|
34
31
|
) => {
|
|
35
|
-
const { startClosing, finishClosing } = useBottomSheetStore.getState();
|
|
36
32
|
const { bottomSheetState } = useBottomSheetState();
|
|
37
33
|
|
|
38
|
-
const
|
|
34
|
+
const { handleAnimate, handleClose } = useMemo(
|
|
35
|
+
() => createSheetEventHandlers(bottomSheetState.id),
|
|
36
|
+
[bottomSheetState.id]
|
|
37
|
+
);
|
|
38
|
+
|
|
39
|
+
const wrappedOnAnimate: BottomSheetProps['onAnimate'] = useCallback(
|
|
39
40
|
(
|
|
40
41
|
fromIndex: number,
|
|
41
42
|
toIndex: number,
|
|
42
43
|
fromPosition: number,
|
|
43
44
|
toPosition: number
|
|
44
45
|
) => {
|
|
45
|
-
|
|
46
|
-
if (
|
|
47
|
-
bottomSheetState.status === 'open' ||
|
|
48
|
-
bottomSheetState.status === 'opening'
|
|
49
|
-
) {
|
|
50
|
-
startClosing(bottomSheetState.id);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
if (fromIndex === -1 && toIndex >= 0) {
|
|
54
|
-
const currentState = useBottomSheetStore.getState();
|
|
55
|
-
useBottomSheetStore.setState({
|
|
56
|
-
stack: currentState.stack.map((s) =>
|
|
57
|
-
s.id === bottomSheetState.id
|
|
58
|
-
? { ...s, status: 'open' as BottomSheetStatus }
|
|
59
|
-
: s
|
|
60
|
-
),
|
|
61
|
-
});
|
|
62
|
-
}
|
|
46
|
+
handleAnimate(fromIndex, toIndex);
|
|
63
47
|
onAnimate?.(fromIndex, toIndex, fromPosition, toPosition);
|
|
64
48
|
},
|
|
65
|
-
[
|
|
49
|
+
[handleAnimate, onAnimate]
|
|
66
50
|
);
|
|
67
51
|
|
|
52
|
+
const wrappedOnClose = useCallback(() => {
|
|
53
|
+
onClose?.();
|
|
54
|
+
handleClose();
|
|
55
|
+
}, [handleClose, onClose]);
|
|
56
|
+
|
|
68
57
|
const config = useBottomSheetSpringConfigs({
|
|
69
58
|
stiffness: 400,
|
|
70
59
|
damping: 80,
|
|
71
60
|
mass: 0.7,
|
|
72
61
|
});
|
|
73
62
|
|
|
74
|
-
const handleClose = useCallback(() => {
|
|
75
|
-
onClose?.();
|
|
76
|
-
|
|
77
|
-
if (bottomSheetState.status !== 'hidden') {
|
|
78
|
-
finishClosing(bottomSheetState.id);
|
|
79
|
-
}
|
|
80
|
-
}, [bottomSheetState.id, bottomSheetState.status, finishClosing, onClose]);
|
|
81
|
-
|
|
82
63
|
const renderBackdropComponent = useCallback(
|
|
83
64
|
(backdropProps: BottomSheetBackdropProps) => (
|
|
84
65
|
<BottomSheetBackdrop
|
|
@@ -95,8 +76,8 @@ export const BottomSheetManaged = React.forwardRef<
|
|
|
95
76
|
animationConfigs={config}
|
|
96
77
|
ref={ref}
|
|
97
78
|
{...props}
|
|
98
|
-
onClose={
|
|
99
|
-
onAnimate={
|
|
79
|
+
onClose={wrappedOnClose}
|
|
80
|
+
onAnimate={wrappedOnAnimate}
|
|
100
81
|
backdropComponent={backdropComponent || renderBackdropComponent}
|
|
101
82
|
enablePanDownToClose={enablePanDownToClose}
|
|
102
83
|
>
|
|
@@ -1,16 +1,35 @@
|
|
|
1
1
|
import React, { type PropsWithChildren } from 'react';
|
|
2
|
+
import { StyleSheet, View } from 'react-native';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
import {
|
|
5
|
+
BottomSheetManagerContext,
|
|
6
|
+
type BottomSheetManagerContextValue,
|
|
7
|
+
} from './BottomSheetManager.context';
|
|
4
8
|
|
|
5
|
-
interface
|
|
9
|
+
export interface ScaleBackgroundConfig {
|
|
10
|
+
/** Scale factor when sheet is open (default: 0.92) */
|
|
11
|
+
scale?: number;
|
|
12
|
+
/** Vertical translation when sheet is open (default: 10) */
|
|
13
|
+
translateY?: number;
|
|
14
|
+
/** Border radius when sheet is open (default: 12) */
|
|
15
|
+
borderRadius?: number;
|
|
16
|
+
/** Animation duration in ms (default: 300) */
|
|
17
|
+
duration?: number;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
interface ProviderProps extends PropsWithChildren {
|
|
6
21
|
id: string;
|
|
7
22
|
}
|
|
8
23
|
|
|
9
|
-
|
|
24
|
+
/**
|
|
25
|
+
* Provider for bottom sheet manager context.
|
|
26
|
+
* Use ScaleBackgroundWrapper inside to enable iOS-style scale effect on content.
|
|
27
|
+
*/
|
|
28
|
+
function BottomSheetManagerProviderComp({ id, children }: ProviderProps) {
|
|
10
29
|
return (
|
|
11
|
-
<
|
|
12
|
-
{children}
|
|
13
|
-
</
|
|
30
|
+
<BottomSheetManagerContext.Provider key={id} value={{ groupId: id }}>
|
|
31
|
+
<View style={styles.container}>{children}</View>
|
|
32
|
+
</BottomSheetManagerContext.Provider>
|
|
14
33
|
);
|
|
15
34
|
}
|
|
16
35
|
|
|
@@ -18,22 +37,31 @@ export const BottomSheetManagerProvider = React.memo(
|
|
|
18
37
|
BottomSheetManagerProviderComp
|
|
19
38
|
);
|
|
20
39
|
|
|
21
|
-
export const useBottomSheetManagerContext =
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
+
export const useBottomSheetManagerContext =
|
|
41
|
+
(): BottomSheetManagerContextValue => {
|
|
42
|
+
const context = React.useContext(BottomSheetManagerContext);
|
|
43
|
+
|
|
44
|
+
if (!context) {
|
|
45
|
+
throw new Error(
|
|
46
|
+
'useBottomSheetManagerContext must be used within a BottomSheetManagerProvider'
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
return context;
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
export const useMaybeBottomSheetManagerContext =
|
|
53
|
+
(): BottomSheetManagerContextValue | null => {
|
|
54
|
+
const context = React.useContext(BottomSheetManagerContext);
|
|
55
|
+
|
|
56
|
+
if (!context) {
|
|
57
|
+
return null;
|
|
58
|
+
}
|
|
59
|
+
return context;
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
const styles = StyleSheet.create({
|
|
63
|
+
container: {
|
|
64
|
+
flex: 1,
|
|
65
|
+
backgroundColor: '#000',
|
|
66
|
+
},
|
|
67
|
+
});
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { useContext, type PropsWithChildren } from 'react';
|
|
2
|
+
import { StyleSheet } from 'react-native';
|
|
3
|
+
import Animated, {
|
|
4
|
+
interpolate,
|
|
5
|
+
useAnimatedStyle,
|
|
6
|
+
useDerivedValue,
|
|
7
|
+
withTiming,
|
|
8
|
+
} from 'react-native-reanimated';
|
|
9
|
+
import { shallow } from 'zustand/shallow';
|
|
10
|
+
import { BottomSheetManagerContext } from './BottomSheetManager.context';
|
|
11
|
+
import { useBottomSheetStore } from './bottomSheet.store';
|
|
12
|
+
|
|
13
|
+
export interface ScaleBackgroundConfig {
|
|
14
|
+
/** Scale factor when sheet is open (default: 0.92) */
|
|
15
|
+
scale?: number;
|
|
16
|
+
/** Vertical translation when sheet is open (default: 10) */
|
|
17
|
+
translateY?: number;
|
|
18
|
+
/** Border radius when sheet is open (default: 12) */
|
|
19
|
+
borderRadius?: number;
|
|
20
|
+
/** Animation duration in ms (default: 300) */
|
|
21
|
+
duration?: number;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
interface ScaleBackgroundWrapperProps extends PropsWithChildren {
|
|
25
|
+
config?: ScaleBackgroundConfig;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Wraps content with iOS-style scale animation when a bottom sheet with
|
|
30
|
+
* scaleBackground: true is open. Place your main content inside this wrapper,
|
|
31
|
+
* but keep BottomSheetHost outside of it.
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* ```tsx
|
|
35
|
+
* <BottomSheetManagerProvider id="default">
|
|
36
|
+
* <ScaleBackgroundWrapper config={{ scale: 0.92 }}>
|
|
37
|
+
* <MainContent />
|
|
38
|
+
* </ScaleBackgroundWrapper>
|
|
39
|
+
* <BottomSheetHost />
|
|
40
|
+
* </BottomSheetManagerProvider>
|
|
41
|
+
* ```
|
|
42
|
+
*/
|
|
43
|
+
export function ScaleBackgroundWrapper({
|
|
44
|
+
children,
|
|
45
|
+
config,
|
|
46
|
+
}: ScaleBackgroundWrapperProps) {
|
|
47
|
+
const context = useContext(BottomSheetManagerContext);
|
|
48
|
+
const groupId = context?.groupId ?? 'default';
|
|
49
|
+
|
|
50
|
+
const {
|
|
51
|
+
scale = 0.92,
|
|
52
|
+
translateY = 10,
|
|
53
|
+
borderRadius = 12,
|
|
54
|
+
duration = 300,
|
|
55
|
+
} = config ?? {};
|
|
56
|
+
|
|
57
|
+
const hasActiveScaleSheet = useBottomSheetStore(
|
|
58
|
+
(store) =>
|
|
59
|
+
store.stack.some(
|
|
60
|
+
(sheet) =>
|
|
61
|
+
sheet.groupId === groupId &&
|
|
62
|
+
sheet.scaleBackground &&
|
|
63
|
+
sheet.status !== 'closing'
|
|
64
|
+
),
|
|
65
|
+
shallow
|
|
66
|
+
);
|
|
67
|
+
|
|
68
|
+
const animationProgress = useDerivedValue(() =>
|
|
69
|
+
withTiming(hasActiveScaleSheet ? 1 : 0, {
|
|
70
|
+
duration,
|
|
71
|
+
})
|
|
72
|
+
);
|
|
73
|
+
|
|
74
|
+
const animatedStyle = useAnimatedStyle(() => {
|
|
75
|
+
const progress = animationProgress.value;
|
|
76
|
+
|
|
77
|
+
return {
|
|
78
|
+
transform: [
|
|
79
|
+
{ scale: interpolate(progress, [0, 1], [1, scale]) },
|
|
80
|
+
{ translateY: interpolate(progress, [0, 1], [0, translateY]) },
|
|
81
|
+
],
|
|
82
|
+
borderRadius: interpolate(progress, [0, 1], [0, borderRadius]),
|
|
83
|
+
overflow: progress > 0 ? ('hidden' as const) : ('visible' as const),
|
|
84
|
+
};
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
return (
|
|
88
|
+
<Animated.View style={[styles.scaleWrapper, animatedStyle]}>
|
|
89
|
+
{children}
|
|
90
|
+
</Animated.View>
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
const styles = StyleSheet.create({
|
|
95
|
+
scaleWrapper: {
|
|
96
|
+
flex: 1,
|
|
97
|
+
},
|
|
98
|
+
});
|
package/src/bottomSheet.store.ts
CHANGED
|
@@ -10,6 +10,7 @@ export interface BottomSheetState {
|
|
|
10
10
|
id: string;
|
|
11
11
|
content: ReactNode;
|
|
12
12
|
status: BottomSheetStatus;
|
|
13
|
+
scaleBackground?: boolean;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
type TriggerState = Omit<BottomSheetState, 'status'>;
|
|
@@ -22,6 +23,7 @@ interface BottomSheetStoreActions {
|
|
|
22
23
|
push(sheet: TriggerState): void;
|
|
23
24
|
switch(sheet: TriggerState): void;
|
|
24
25
|
replace(sheet: TriggerState): void;
|
|
26
|
+
markOpen(id: string): void;
|
|
25
27
|
startClosing(id: string): void;
|
|
26
28
|
finishClosing(id: string): void;
|
|
27
29
|
clearAll(): void;
|
|
@@ -77,6 +79,14 @@ export const useBottomSheetStore = create(
|
|
|
77
79
|
|
|
78
80
|
return { stack };
|
|
79
81
|
}),
|
|
82
|
+
markOpen: (id) =>
|
|
83
|
+
set((state) => {
|
|
84
|
+
const stack = state.stack.map((s) =>
|
|
85
|
+
s.id === id ? { ...s, status: 'open' as BottomSheetStatus } : s
|
|
86
|
+
);
|
|
87
|
+
return { stack };
|
|
88
|
+
}),
|
|
89
|
+
|
|
80
90
|
startClosing: (id) =>
|
|
81
91
|
set((state) => {
|
|
82
92
|
const stack = [...state.stack];
|
|
@@ -32,3 +32,45 @@ export function initBottomSheetCoordinator() {
|
|
|
32
32
|
}
|
|
33
33
|
);
|
|
34
34
|
}
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Creates event handlers for a bottom sheet that sync gorhom events back to the store.
|
|
38
|
+
* Direction: Gorhom Events → Store
|
|
39
|
+
*/
|
|
40
|
+
export function createSheetEventHandlers(sheetId: string) {
|
|
41
|
+
const { startClosing, finishClosing, markOpen } =
|
|
42
|
+
useBottomSheetStore.getState();
|
|
43
|
+
|
|
44
|
+
const handleAnimate = (fromIndex: number, toIndex: number) => {
|
|
45
|
+
const currentStatus = useBottomSheetStore
|
|
46
|
+
.getState()
|
|
47
|
+
.stack.find((s) => s.id === sheetId)?.status;
|
|
48
|
+
|
|
49
|
+
// Sheet is closing (animating to -1)
|
|
50
|
+
if (toIndex === -1) {
|
|
51
|
+
if (currentStatus === 'open' || currentStatus === 'opening') {
|
|
52
|
+
startClosing(sheetId);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// Sheet finished opening (animating from -1 to visible)
|
|
57
|
+
if (fromIndex === -1 && toIndex >= 0) {
|
|
58
|
+
markOpen(sheetId);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
const handleClose = () => {
|
|
63
|
+
const currentStatus = useBottomSheetStore
|
|
64
|
+
.getState()
|
|
65
|
+
.stack.find((s) => s.id === sheetId)?.status;
|
|
66
|
+
|
|
67
|
+
if (currentStatus !== 'hidden') {
|
|
68
|
+
finishClosing(sheetId);
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
return {
|
|
73
|
+
handleAnimate,
|
|
74
|
+
handleClose,
|
|
75
|
+
};
|
|
76
|
+
}
|
package/src/index.tsx
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
export { BottomSheetHost } from './BottomSheetHost';
|
|
2
|
-
export {
|
|
2
|
+
export {
|
|
3
|
+
BottomSheetManagerProvider,
|
|
4
|
+
type ScaleBackgroundConfig,
|
|
5
|
+
} from './BottomSheetManager.provider';
|
|
3
6
|
export { useBottomSheetManager } from './useBottomSheetManager';
|
|
4
7
|
export { useBottomSheetState } from './useBottomSheetState';
|
|
5
8
|
export { BottomSheetManaged } from './BottomSheetManaged';
|
|
9
|
+
export { ScaleBackgroundWrapper } from './ScaleBackgroundWrapper';
|
|
@@ -33,6 +33,7 @@ export const useBottomSheetManager = () => {
|
|
|
33
33
|
id?: string;
|
|
34
34
|
groupId?: string;
|
|
35
35
|
mode?: OpenMode;
|
|
36
|
+
scaleBackground?: boolean;
|
|
36
37
|
} = {}
|
|
37
38
|
) => {
|
|
38
39
|
const groupId =
|
|
@@ -46,24 +47,19 @@ export const useBottomSheetManager = () => {
|
|
|
46
47
|
// @ts-ignore
|
|
47
48
|
const contentWithRef = React.cloneElement(content, { ref });
|
|
48
49
|
|
|
50
|
+
const sheetData = {
|
|
51
|
+
id,
|
|
52
|
+
groupId,
|
|
53
|
+
content: contentWithRef,
|
|
54
|
+
scaleBackground: options.scaleBackground,
|
|
55
|
+
};
|
|
56
|
+
|
|
49
57
|
if (options.mode === 'replace') {
|
|
50
|
-
replaceBottomSheet(
|
|
51
|
-
id,
|
|
52
|
-
groupId,
|
|
53
|
-
content: contentWithRef,
|
|
54
|
-
});
|
|
58
|
+
replaceBottomSheet(sheetData);
|
|
55
59
|
} else if (options.mode === 'switch') {
|
|
56
|
-
switchBottomSheet(
|
|
57
|
-
id,
|
|
58
|
-
groupId,
|
|
59
|
-
content: contentWithRef,
|
|
60
|
-
});
|
|
60
|
+
switchBottomSheet(sheetData);
|
|
61
61
|
} else {
|
|
62
|
-
pushBottomSheet(
|
|
63
|
-
id,
|
|
64
|
-
groupId,
|
|
65
|
-
content: contentWithRef,
|
|
66
|
-
});
|
|
62
|
+
pushBottomSheet(sheetData);
|
|
67
63
|
}
|
|
68
64
|
|
|
69
65
|
return id;
|