53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
import React, { useCallback } from "react";
|
|
import PropType from "prop-types";
|
|
import StyledSnackBar from "./styled-snackbar";
|
|
import StyledCrossIcon from "./styled-snackbar-action";
|
|
import StyledLogoIcon from "./styled-snackbar-logo";
|
|
import Box from "../box";
|
|
import Heading from "../heading";
|
|
import Text from "../text";
|
|
|
|
const SnackBar = ({ text, headerText, btnText, onAction, ...rest }) => {
|
|
const onActionClick = useCallback(
|
|
(e) => {
|
|
onAction && onAction(e);
|
|
},
|
|
[onAction]
|
|
);
|
|
|
|
const headerStyles = headerText ? {} : { display: "none" };
|
|
|
|
console.log("Snackbar render");
|
|
return (
|
|
<StyledSnackBar {...rest}>
|
|
<Box className="logo">
|
|
<StyledLogoIcon size="medium" />
|
|
</Box>
|
|
<Box className="text-container">
|
|
<Heading
|
|
size="xsmall"
|
|
isInline={true}
|
|
className="text-header"
|
|
style={headerStyles}
|
|
>
|
|
{headerText}
|
|
</Heading>
|
|
<Text>{text}</Text>
|
|
</Box>
|
|
<button className="action" onClick={onActionClick}>
|
|
{btnText ? btnText : <StyledCrossIcon size="medium" />}
|
|
</button>
|
|
</StyledSnackBar>
|
|
);
|
|
};
|
|
|
|
SnackBar.propTypes = {
|
|
text: PropType.string,
|
|
headerText: PropType.string,
|
|
btnText: PropType.string,
|
|
backgroundImg: PropType.string,
|
|
onAction: PropType.func,
|
|
};
|
|
|
|
export default SnackBar;
|