Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added allow close option to banner and fixed banner min width

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-06-16 20:08:10 +10:00
parent 7cc0e6cee0
commit 693c2967cd
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Banner.js
View File

@ -2,7 +2,7 @@ import React from "react";
import Modal from "react-modal";
import { useThemeUI, Close } from "theme-ui";
function Banner({ isOpen, onRequestClose, children }) {
function Banner({ isOpen, onRequestClose, children, allowClose }) {
const { theme } = useThemeUI();
return (
@ -15,7 +15,7 @@ function Banner({ isOpen, onRequestClose, children }) {
backgroundColor: theme.colors.highlight,
top: "initial",
left: "50%",
right: 0,
right: "initial",
// Offset for iOS safe zone
bottom: "env(safe-area-inset-bottom)",
border: "none",
@ -28,13 +28,19 @@ function Banner({ isOpen, onRequestClose, children }) {
}}
>
{children}
<Close
m={0}
sx={{ position: "absolute", top: "4px", right: 0 }}
onClick={onRequestClose}
/>
{allowClose && (
<Close
m={0}
sx={{ position: "absolute", top: "4px", right: 0 }}
onClick={onRequestClose}
/>
)}
</Modal>
);
}
Banner.defaultProps = {
allowClose: true,
};
export default Banner;