2021-07-14 14:12:13 +00:00
|
|
|
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";
|
|
|
|
|
2021-07-20 08:07:41 +00:00
|
|
|
const SnackBar = ({
|
|
|
|
text,
|
|
|
|
headerText,
|
|
|
|
btnText,
|
|
|
|
onAction,
|
|
|
|
textColor,
|
|
|
|
...rest
|
|
|
|
}) => {
|
2021-07-14 14:12:13 +00:00
|
|
|
const onActionClick = useCallback(
|
|
|
|
(e) => {
|
|
|
|
onAction && onAction(e);
|
|
|
|
},
|
|
|
|
[onAction]
|
|
|
|
);
|
|
|
|
|
|
|
|
const headerStyles = headerText ? {} : { display: "none" };
|
2021-06-10 14:20:09 +00:00
|
|
|
|
2021-07-20 03:51:29 +00:00
|
|
|
console.log("Snackbar render");
|
2021-07-14 14:12:13 +00:00
|
|
|
return (
|
|
|
|
<StyledSnackBar {...rest}>
|
|
|
|
<Box className="logo">
|
2021-07-20 08:07:41 +00:00
|
|
|
<StyledLogoIcon size="medium" textColor={textColor} />
|
2021-07-14 14:12:13 +00:00
|
|
|
</Box>
|
|
|
|
<Box className="text-container">
|
|
|
|
<Heading
|
|
|
|
size="xsmall"
|
|
|
|
isInline={true}
|
|
|
|
className="text-header"
|
|
|
|
style={headerStyles}
|
2021-07-20 08:07:41 +00:00
|
|
|
color={textColor}
|
2021-07-14 14:12:13 +00:00
|
|
|
>
|
|
|
|
{headerText}
|
|
|
|
</Heading>
|
2021-07-20 08:07:41 +00:00
|
|
|
<Text color={textColor}>{text}</Text>
|
2021-07-14 14:12:13 +00:00
|
|
|
</Box>
|
|
|
|
<button className="action" onClick={onActionClick}>
|
2021-07-15 06:55:21 +00:00
|
|
|
{btnText ? btnText : <StyledCrossIcon size="medium" />}
|
2021-07-14 14:12:13 +00:00
|
|
|
</button>
|
|
|
|
</StyledSnackBar>
|
|
|
|
);
|
2021-06-10 14:20:09 +00:00
|
|
|
};
|
|
|
|
|
2021-07-14 14:12:13 +00:00
|
|
|
SnackBar.propTypes = {
|
|
|
|
text: PropType.string,
|
|
|
|
headerText: PropType.string,
|
2021-07-15 06:55:21 +00:00
|
|
|
btnText: PropType.string,
|
2021-07-20 03:51:29 +00:00
|
|
|
backgroundImg: PropType.string,
|
2021-07-20 08:07:41 +00:00
|
|
|
backgroundColor: PropType.string,
|
|
|
|
textColor: PropType.string,
|
2021-07-14 14:12:13 +00:00
|
|
|
onAction: PropType.func,
|
2021-06-10 14:20:09 +00:00
|
|
|
};
|
2021-07-14 14:12:13 +00:00
|
|
|
|
2021-07-20 08:07:41 +00:00
|
|
|
SnackBar.defaultProps = {
|
|
|
|
backgroundColor: "#f8f7bf",
|
|
|
|
textColor: "#000",
|
|
|
|
};
|
|
|
|
|
2021-07-14 14:12:13 +00:00
|
|
|
export default SnackBar;
|