@attio/react-native-bottom-sheet-toolbox
Version:
59 lines (58 loc) • 2.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BottomSheetToolboxSheet = BottomSheetToolboxSheet;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
var _context = require("../context");
var _useAnimatedSheetStyle = require("../hooks/use-animated-sheet-style");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
// The sheet can be dragged outside of the wrapper's bounds.
// In such case, we need to make sure that the sheet is still visible.
// To do so, we set the height to something arbitrarily larger than 100%.
// Then proportionally set the inner height to the real height.
const SHEET_HEIGHT = "200%";
const SHEET_INNER_HEIGHT = "100%";
const styles = _reactNative.StyleSheet.create({
sheet: {
height: SHEET_HEIGHT,
opacity: 0,
position: "absolute",
top: 0,
width: "100%"
},
sheetInner: {
maxHeight: SHEET_INNER_HEIGHT,
width: "100%"
}
});
function BottomSheetToolboxSheet({
children,
style
}) {
const {
childrenHeightSharedValue
} = (0, _context.useBottomSheetToolboxInternalContext)();
const unmountFn = () => {
childrenHeightSharedValue.set(null);
};
const onUnmountRef = React.useRef(unmountFn);
onUnmountRef.current = unmountFn;
React.useLayoutEffect(() => () => onUnmountRef.current(), []);
const animatedSheetStyle = (0, _useAnimatedSheetStyle.useAnimatedSheetStyle)();
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
style: [styles.sheet, animatedSheetStyle, style],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
onLayout: evt => {
childrenHeightSharedValue.set(evt.nativeEvent.layout.height === 0 ? null : evt.nativeEvent.layout.height);
},
style: styles.sheetInner,
children: children
})
});
}
//# sourceMappingURL=bottom-sheet-toolbox-sheet.js.map