1
0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-12-25 00:11:36 +01:00

Merge branch 'improve-alert' into 'dev'

Move alert to portal

See merge request turris/reforis/foris-js!35
This commit is contained in:
Maciej Lenartowicz 2019-11-12 12:50:29 +00:00
commit 13ff8221ca
5 changed files with 24 additions and 34 deletions

View File

@ -9,6 +9,7 @@ import React, { useState, useContext, useCallback } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Alert, ALERT_TYPES } from "bootstrap/Alert"; import { Alert, ALERT_TYPES } from "bootstrap/Alert";
import { Portal } from "utils/Portal";
const AlertContext = React.createContext(); const AlertContext = React.createContext();
@ -31,9 +32,11 @@ function AlertContextProvider({ children }) {
return ( return (
<> <>
{alert && ( {alert && (
<Alert type={alert.type} onDismiss={dismissAlert} floating> <Portal containerId="alert-container">
{alert.message} <Alert type={alert.type} onDismiss={dismissAlert}>
</Alert> {alert.message}
</Alert>
</Portal>
)} )}
<AlertContext.Provider value={[setAlertWrapper, dismissAlert]}> <AlertContext.Provider value={[setAlertWrapper, dismissAlert]}>
{ children } { children }

View File

@ -12,8 +12,10 @@ import { useAlert, AlertContextProvider } from "../AlertContext";
function AlertTest() { function AlertTest() {
const [setAlert, dismissAlert] = useAlert(); const [setAlert, dismissAlert] = useAlert();
// alert-container serves as an output for Portal which renders Alert
return ( return (
<> <>
<div id="alert-container" />
<button onClick={() => setAlert("Alert content")}>Set alert</button> <button onClick={() => setAlert("Alert content")}>Set alert</button>
<button onClick={dismissAlert}>Dismiss alert</button> <button onClick={dismissAlert}>Dismiss alert</button>
</> </>

View File

@ -3,15 +3,19 @@
exports[`AlertContext should render alert 1`] = ` exports[`AlertContext should render alert 1`] = `
<div> <div>
<div <div
class="alert alert-dismissible alert-danger fixed-top floating-alert" id="alert-container"
> >
<button <div
class="close" class="alert alert-dismissible alert-danger"
type="button"
> >
× <button
</button> class="close"
Alert content type="button"
>
×
</button>
Alert content
</div>
</div> </div>
<button> <button>
Set alert Set alert
@ -24,6 +28,9 @@ exports[`AlertContext should render alert 1`] = `
exports[`AlertContext should render component without alert 1`] = ` exports[`AlertContext should render component without alert 1`] = `
<div> <div>
<div
id="alert-container"
/>
<button> <button>
Set alert Set alert
</button> </button>

View File

@ -1,17 +0,0 @@
.floating-alert {
/* Display alert above other components */
z-index: 2000;
}
@media(max-width: 768px) {
.floating-alert {
margin: 0.5rem;
}
}
@media(min-width: 769px) {
.floating-alert {
width: 75%;
margin: 0.5rem auto;
}
}

View File

@ -8,8 +8,6 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import "./Alert.css";
export const ALERT_TYPES = Object.freeze({ export const ALERT_TYPES = Object.freeze({
PRIMARY: "primary", PRIMARY: "primary",
SECONDARY: "secondary", SECONDARY: "secondary",
@ -31,20 +29,17 @@ Alert.propTypes = {
]), ]),
/** onDismiss handler. */ /** onDismiss handler. */
onDismiss: PropTypes.func, onDismiss: PropTypes.func,
/** Floating alerts stay on top of the page */
floating: PropTypes.bool,
}; };
Alert.defaultProps = { Alert.defaultProps = {
type: ALERT_TYPES.DANGER, type: ALERT_TYPES.DANGER,
floating: false,
}; };
export function Alert({ export function Alert({
type, onDismiss, floating, children, type, onDismiss, children,
}) { }) {
return ( return (
<div className={`alert alert-dismissible alert-${type} ${floating ? "fixed-top floating-alert" : ""}`.trim()}> <div className={`alert alert-dismissible alert-${type}`}>
{onDismiss ? <button type="button" className="close" onClick={onDismiss}>&times;</button> : false} {onDismiss ? <button type="button" className="close" onClick={onDismiss}>&times;</button> : false}
{children} {children}
</div> </div>