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