fix: remove action sheet backdrop

This commit is contained in:
thecodrr
2022-06-03 21:30:13 +05:00
parent 4db78654be
commit 28beb8dca8
2 changed files with 12 additions and 5 deletions

View File

@@ -44,6 +44,7 @@ import { getPosition } from "./useMenu";
import MenuItem from "./menuitem";
// import { useMenuTrigger, useMenu, getPosition } from "../../hooks/useMenu";
import Modal from "react-modal";
import { useTheme } from "emotion-theming";
import Sheet from "react-modal-sheet";
import { useIsMobile } from "../../toolbar/stores/toolbar-store";
// import { store as selectionStore } from "../../stores/selectionstore";
@@ -271,6 +272,7 @@ export function MenuPresenter(props) {
}
export function ActionSheetPresenter(props) {
var _a = props.items, items = _a === void 0 ? [] : _a, isOpen = props.isOpen, _b = props.onClose, onClose = _b === void 0 ? function () { } : _b, children = props.children, sx = props.sx, _c = props.blocking, blocking = _c === void 0 ? true : _c, containerProps = __rest(props, ["items", "isOpen", "onClose", "children", "sx", "blocking"]);
var theme = useTheme();
return (_jsxs(Sheet, __assign({ isOpen: isOpen, onClose: onClose, springConfig: {
stiffness: 300,
damping: 30,
@@ -279,7 +281,7 @@ export function ActionSheetPresenter(props) {
} }, { children: [_jsxs(Sheet.Container, __assign({ style: {
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
boxShadow: "none",
boxShadow: theme.shadows.menu,
paddingBottom: 30,
} }, { children: [_jsx(Sheet.Header, {}), _jsx(Sheet.Content, { children: props.children ? (props.children) : (_jsx(Menu, __assign({ items: items, closeMenu: onClose, sx: __assign({ flex: 1, boxShadow: "none", border: "none" }, sx) }, containerProps))) })] })), _jsx(Sheet.Backdrop, {})] })));
} }, { children: [_jsx(Sheet.Header, {}), _jsx(Sheet.Content, { children: props.children ? (props.children) : (_jsx(Menu, __assign({ items: items, closeMenu: onClose, sx: __assign({ flex: 1, boxShadow: "none", border: "none" }, sx) }, containerProps))) })] })), _jsx(Sheet.Backdrop, { style: { backgroundColor: "transparent" }, onTap: onClose })] })));
}

View File

@@ -13,9 +13,10 @@ import MenuItem from "./menuitem";
import { MenuItem as MenuItemType /*ResolvedMenuItem*/ } from "./types";
// import { useMenuTrigger, useMenu, getPosition } from "../../hooks/useMenu";
import Modal from "react-modal";
import { ThemeProvider } from "emotion-theming";
import { ThemeProvider, useTheme } from "emotion-theming";
import Sheet from "react-modal-sheet";
import { useIsMobile } from "../../toolbar/stores/toolbar-store";
import { Theme } from "@notesnook/theme";
// import { store as selectionStore } from "../../stores/selectionstore";
function useMenuFocus(
@@ -421,6 +422,7 @@ export function ActionSheetPresenter(
blocking = true,
...containerProps
} = props;
const theme: Theme = useTheme();
return (
<Sheet
@@ -437,7 +439,7 @@ export function ActionSheetPresenter(
style={{
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
boxShadow: "none",
boxShadow: theme.shadows.menu,
paddingBottom: 30,
}}
>
@@ -461,7 +463,10 @@ export function ActionSheetPresenter(
</Sheet.Content>
</Sheet.Container>
<Sheet.Backdrop />
<Sheet.Backdrop
style={{ backgroundColor: "transparent" }}
onTap={onClose}
/>
</Sheet>
);
}