@datalayer/core
Version:
[](https://datalayer.io)
61 lines (60 loc) • 2.91 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*
* Copyright (c) 2023-2025 Datalayer, Inc.
* Distributed under the terms of the Modified BSD License.
*/
import { AlertIcon, CheckIcon, InfoIcon, StopIcon, XIcon, } from '@primer/octicons-react';
import { Flash as PrimerFlash, IconButton } from '@primer/react';
import { Box } from '@datalayer/primer-addons';
import { useCallback, useState } from 'react';
/**
* Closable flash component with actions.
*/
export const FlashClosable = ({ actions, children, closable = true, variant, sx, ...others }) => {
const [open, setOpen] = useState(true);
const visual = variant === 'warning' ? (_jsx(AlertIcon, {})) : variant === 'success' ? (_jsx(CheckIcon, {})) : variant === 'danger' ? (_jsx(StopIcon, {})) : (_jsx(InfoIcon, {}));
const onClose = useCallback(() => {
if (closable) {
setOpen(false);
}
}, [closable]);
return open ? (_jsxs(PrimerFlash, { ...others, variant: variant, sx: {
...sx,
margin: 'var(--stack-gap-condensed) 0',
display: 'grid',
gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
gridTemplateRows: 'min-content',
gridTemplateAreas: "'visual message actions close'",
'@media screen and (max-width: 544px)': {
gridTemplateColumns: 'min-content 1fr',
gridTemplateRows: 'min-content min-content',
gridTemplateAreas: `
'visual message close'
'. actions actions'
`,
},
}, children: [_jsx(Box, { sx: {
display: 'grid',
paddingBlock: 'var(--base-size-8)',
alignSelf: 'center',
gridArea: 'visual',
}, children: visual }), _jsx(Box, { sx: {
alignSelf: 'center',
display: 'grid',
gridArea: 'message',
}, children: children }), _jsx(Box, { sx: {
display: 'grid',
gap: 'var(--stack-gap-condensed)',
marginLeft: 'actions',
'@media screen and (max-width: 544px)': {
alignSelf: 'start',
margin: 'var(--base-size-8) 0 0 var(--base-size-8)',
},
}, children: actions }), closable && (_jsx(Box, { sx: {
alignSelf: 'start',
marginLeft: 'close',
}, children: _jsx(IconButton, { "aria-label": "Dismiss flash message", title: "Dismiss", onClick: onClose, variant: "invisible", icon: XIcon, sx: {
'& > svg': { marginRight: 0, color: 'var(--fgColor-default)' },
} }) }))] })) : (_jsx(_Fragment, {}));
};
export default FlashClosable;