react-native-bottom-sheet-stack 0.1.11 → 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 +16 -30
- 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 +26 -38
- 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); }
|
|
@@ -16,43 +16,29 @@ const BottomSheetManaged = exports.BottomSheetManaged = /*#__PURE__*/_react.defa
|
|
|
16
16
|
onAnimate,
|
|
17
17
|
onClose,
|
|
18
18
|
enablePanDownToClose = true,
|
|
19
|
+
backdropComponent,
|
|
19
20
|
...props
|
|
20
21
|
}, ref) => {
|
|
21
|
-
const {
|
|
22
|
-
startClosing,
|
|
23
|
-
finishClosing
|
|
24
|
-
} = _bottomSheet2.useBottomSheetStore.getState();
|
|
25
22
|
const {
|
|
26
23
|
bottomSheetState
|
|
27
24
|
} = (0, _useBottomSheetState.useBottomSheetState)();
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
if (fromIndex === -1 && toIndex >= 0) {
|
|
35
|
-
const currentState = _bottomSheet2.useBottomSheetStore.getState();
|
|
36
|
-
_bottomSheet2.useBottomSheetStore.setState({
|
|
37
|
-
stack: currentState.stack.map(s => s.id === bottomSheetState.id ? {
|
|
38
|
-
...s,
|
|
39
|
-
status: 'open'
|
|
40
|
-
} : s)
|
|
41
|
-
});
|
|
42
|
-
}
|
|
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);
|
|
43
31
|
onAnimate?.(fromIndex, toIndex, fromPosition, toPosition);
|
|
44
|
-
}, [
|
|
32
|
+
}, [handleAnimate, onAnimate]);
|
|
33
|
+
const wrappedOnClose = (0, _react.useCallback)(() => {
|
|
34
|
+
onClose?.();
|
|
35
|
+
handleClose();
|
|
36
|
+
}, [handleClose, onClose]);
|
|
45
37
|
const config = (0, _bottomSheet.useBottomSheetSpringConfigs)({
|
|
46
38
|
stiffness: 400,
|
|
47
39
|
damping: 80,
|
|
48
40
|
mass: 0.7
|
|
49
41
|
});
|
|
50
|
-
const handleClose = (0, _react.useCallback)(() => {
|
|
51
|
-
onClose?.();
|
|
52
|
-
if (bottomSheetState.status !== 'hidden') {
|
|
53
|
-
finishClosing(bottomSheetState.id);
|
|
54
|
-
}
|
|
55
|
-
}, [bottomSheetState.id, bottomSheetState.status, finishClosing, onClose]);
|
|
56
42
|
const renderBackdropComponent = (0, _react.useCallback)(backdropProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.BottomSheetBackdrop, {
|
|
57
43
|
...backdropProps,
|
|
58
44
|
disappearsOnIndex: -1,
|
|
@@ -62,10 +48,10 @@ const BottomSheetManaged = exports.BottomSheetManaged = /*#__PURE__*/_react.defa
|
|
|
62
48
|
animationConfigs: config,
|
|
63
49
|
ref: ref,
|
|
64
50
|
...props,
|
|
65
|
-
onClose:
|
|
66
|
-
onAnimate:
|
|
51
|
+
onClose: wrappedOnClose,
|
|
52
|
+
onAnimate: wrappedOnAnimate,
|
|
53
|
+
backdropComponent: backdropComponent || renderBackdropComponent,
|
|
67
54
|
enablePanDownToClose: enablePanDownToClose,
|
|
68
|
-
backdropComponent: renderBackdropComponent,
|
|
69
55
|
children: children
|
|
70
56
|
});
|
|
71
57
|
});
|
|
@@ -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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAC,uBAAA,CAAAH,OAAA;AAMA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AACA,IAAAM,YAAA,GAAAN,OAAA;AAA0D,IAAAO,WAAA,GAAAP,OAAA;AAAA,SAAAQ,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,SAAAN,wBAAAM,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;AAiB1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASW,sBAAsBA,CAAC;EACrCC,QAAQ;EACRC;AAC2B,CAAC,EAAE;EAC9B,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACC,6CAAyB,CAAC;EACrD,MAAMC,OAAO,GAAGH,OAAO,EAAEG,OAAO,IAAI,SAAS;EAE7C,MAAM;IACJC,KAAK,GAAG,IAAI;IACZC,UAAU,GAAG,EAAE;IACfC,YAAY,GAAG,EAAE;IACjBC,QAAQ,GAAG;EACb,CAAC,GAAGR,MAAM,IAAI,CAAC,CAAC;EAEhB,MAAMS,mBAAmB,GAAG,IAAAC,gCAAmB,EAC5CC,KAAK,IACJA,KAAK,CAACC,KAAK,CAACC,IAAI,CACbC,KAAK,IACJA,KAAK,CAACV,OAAO,KAAKA,OAAO,IACzBU,KAAK,CAACC,eAAe,IACrBD,KAAK,CAACE,MAAM,KAAK,SACrB,CAAC,EACHC,gBACF,CAAC;EAED,MAAMC,iBAAiB,GAAG,IAAAC,sCAAe,EAAC,MACxC,IAAAC,iCAAU,EAACX,mBAAmB,GAAG,CAAC,GAAG,CAAC,EAAE;IACtCD;EACF,CAAC,CACH,CAAC;EAED,MAAMa,aAAa,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IAC3C,MAAMC,QAAQ,GAAGL,iBAAiB,CAACM,KAAK;IAExC,OAAO;MACLC,SAAS,EAAE,CACT;QAAEpB,KAAK,EAAE,IAAAqB,kCAAW,EAACH,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAElB,KAAK,CAAC;MAAE,CAAC,EACpD;QAAEC,UAAU,EAAE,IAAAoB,kCAAW,EAACH,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAEjB,UAAU,CAAC;MAAE,CAAC,CAC/D;MACDC,YAAY,EAAE,IAAAmB,kCAAW,EAACH,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAEhB,YAAY,CAAC,CAAC;MAC9DoB,QAAQ,EAAEJ,QAAQ,GAAG,CAAC,GAAI,QAAQ,GAAc;IAClD,CAAC;EACH,CAAC,CAAC;EAEF,oBACE,IAAA9C,WAAA,CAAAmD,GAAA,EAACxD,sBAAA,CAAAY,OAAQ,CAAC6C,IAAI;IAACC,KAAK,EAAE,CAACC,MAAM,CAACC,YAAY,EAAEX,aAAa,CAAE;IAAAtB,QAAA,EACxDA;EAAQ,CACI,CAAC;AAEpB;AAEA,MAAMgC,MAAM,GAAGE,uBAAU,CAACC,MAAM,CAAC;EAC/BF,YAAY,EAAE;IACZG,IAAI,EAAE;EACR;AACF,CAAC,CAAC","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":"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","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 {}
|
|
@@ -22,56 +19,47 @@ export const BottomSheetManaged = React.forwardRef<
|
|
|
22
19
|
BottomSheetManagedProps
|
|
23
20
|
>(
|
|
24
21
|
(
|
|
25
|
-
{
|
|
22
|
+
{
|
|
23
|
+
children,
|
|
24
|
+
onAnimate,
|
|
25
|
+
onClose,
|
|
26
|
+
enablePanDownToClose = true,
|
|
27
|
+
backdropComponent,
|
|
28
|
+
...props
|
|
29
|
+
},
|
|
26
30
|
ref
|
|
27
31
|
) => {
|
|
28
|
-
const { startClosing, finishClosing } = useBottomSheetStore.getState();
|
|
29
32
|
const { bottomSheetState } = useBottomSheetState();
|
|
30
33
|
|
|
31
|
-
const
|
|
34
|
+
const { handleAnimate, handleClose } = useMemo(
|
|
35
|
+
() => createSheetEventHandlers(bottomSheetState.id),
|
|
36
|
+
[bottomSheetState.id]
|
|
37
|
+
);
|
|
38
|
+
|
|
39
|
+
const wrappedOnAnimate: BottomSheetProps['onAnimate'] = useCallback(
|
|
32
40
|
(
|
|
33
41
|
fromIndex: number,
|
|
34
42
|
toIndex: number,
|
|
35
43
|
fromPosition: number,
|
|
36
44
|
toPosition: number
|
|
37
45
|
) => {
|
|
38
|
-
|
|
39
|
-
if (
|
|
40
|
-
bottomSheetState.status === 'open' ||
|
|
41
|
-
bottomSheetState.status === 'opening'
|
|
42
|
-
) {
|
|
43
|
-
startClosing(bottomSheetState.id);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
if (fromIndex === -1 && toIndex >= 0) {
|
|
47
|
-
const currentState = useBottomSheetStore.getState();
|
|
48
|
-
useBottomSheetStore.setState({
|
|
49
|
-
stack: currentState.stack.map((s) =>
|
|
50
|
-
s.id === bottomSheetState.id
|
|
51
|
-
? { ...s, status: 'open' as BottomSheetStatus }
|
|
52
|
-
: s
|
|
53
|
-
),
|
|
54
|
-
});
|
|
55
|
-
}
|
|
46
|
+
handleAnimate(fromIndex, toIndex);
|
|
56
47
|
onAnimate?.(fromIndex, toIndex, fromPosition, toPosition);
|
|
57
48
|
},
|
|
58
|
-
[
|
|
49
|
+
[handleAnimate, onAnimate]
|
|
59
50
|
);
|
|
60
51
|
|
|
52
|
+
const wrappedOnClose = useCallback(() => {
|
|
53
|
+
onClose?.();
|
|
54
|
+
handleClose();
|
|
55
|
+
}, [handleClose, onClose]);
|
|
56
|
+
|
|
61
57
|
const config = useBottomSheetSpringConfigs({
|
|
62
58
|
stiffness: 400,
|
|
63
59
|
damping: 80,
|
|
64
60
|
mass: 0.7,
|
|
65
61
|
});
|
|
66
62
|
|
|
67
|
-
const handleClose = useCallback(() => {
|
|
68
|
-
onClose?.();
|
|
69
|
-
|
|
70
|
-
if (bottomSheetState.status !== 'hidden') {
|
|
71
|
-
finishClosing(bottomSheetState.id);
|
|
72
|
-
}
|
|
73
|
-
}, [bottomSheetState.id, bottomSheetState.status, finishClosing, onClose]);
|
|
74
|
-
|
|
75
63
|
const renderBackdropComponent = useCallback(
|
|
76
64
|
(backdropProps: BottomSheetBackdropProps) => (
|
|
77
65
|
<BottomSheetBackdrop
|
|
@@ -88,10 +76,10 @@ export const BottomSheetManaged = React.forwardRef<
|
|
|
88
76
|
animationConfigs={config}
|
|
89
77
|
ref={ref}
|
|
90
78
|
{...props}
|
|
91
|
-
onClose={
|
|
92
|
-
onAnimate={
|
|
79
|
+
onClose={wrappedOnClose}
|
|
80
|
+
onAnimate={wrappedOnAnimate}
|
|
81
|
+
backdropComponent={backdropComponent || renderBackdropComponent}
|
|
93
82
|
enablePanDownToClose={enablePanDownToClose}
|
|
94
|
-
backdropComponent={renderBackdropComponent}
|
|
95
83
|
>
|
|
96
84
|
{children}
|
|
97
85
|
</BottomSheetOriginal>
|
|
@@ -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;
|