176 lines
9.4 KiB
JavaScript
176 lines
9.4 KiB
JavaScript
import React from 'react';
|
|
import { Grid, withStyles } from '@material-ui/core';
|
|
import { Close as CloseIcon } from '@material-ui/icons';
|
|
import classnames from 'classnames';
|
|
import { ToastContainer } from 'react-toastify';
|
|
import SyntaxHighlighter from 'react-syntax-highlighter';
|
|
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
|
|
import tinycolor from 'tinycolor2';
|
|
import 'react-toastify/dist/ReactToastify.css';
|
|
|
|
import Widget from '../../components/Widget';
|
|
import PageTitle from '../../components/PageTitle';
|
|
import NotificationCustomComponent from '../../components/Notification';
|
|
import { Typography, Button } from '../../components/Wrappers';
|
|
|
|
const CloseButton = ({ closeToast, className }) => (
|
|
<CloseIcon
|
|
className={className}
|
|
onClick={closeToast}
|
|
/>
|
|
);
|
|
|
|
const NotificationsPage = ({ classes, ...props}) => (
|
|
<React.Fragment>
|
|
<PageTitle title="Notifications" />
|
|
<Grid container spacing={32}>
|
|
<ToastContainer className={classes.toastsContainer} closeButton={<CloseButton className={classes.notificationCloseButton} />} closeOnClick={false} progressClassName={classes.notificationProgress} />
|
|
<Grid item xs={12} md={6} lg={4}>
|
|
<Widget title="Layout Options" disableWidgetMenu>
|
|
<Typography>There are few position options available for notifications. You can click any of them to change notifications position:</Typography>
|
|
<div className={classes.layoutContainer}>
|
|
<div className={classes.layoutButtonsRow}>
|
|
<button onClick={() => props.changeNotificationPosition(0)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 0})} />
|
|
<button onClick={() => props.changeNotificationPosition(1)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 1})} />
|
|
<button onClick={() => props.changeNotificationPosition(2)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 2})} />
|
|
</div>
|
|
<Typography className={classes.layoutText} size="md">Click any position</Typography>
|
|
<div className={classes.layoutButtonsRow}>
|
|
<button onClick={() => props.changeNotificationPosition(3)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 3})} />
|
|
<button onClick={() => props.changeNotificationPosition(4)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 4})} />
|
|
<button onClick={() => props.changeNotificationPosition(5)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 5})} />
|
|
</div>
|
|
</div>
|
|
</Widget>
|
|
</Grid>
|
|
<Grid item xs={12} md={6} lg={4}>
|
|
<Widget title="Notifications Types" disableWidgetMenu>
|
|
<Typography>Different types of notifications for lost of use cases. Custom classes are also supported.</Typography>
|
|
<div className={classes.buttonsContainer}>
|
|
<Button variant="contained" colortheme="primary" onClick={() => props.handleNotificationCall('info')} className={classnames(classes.notificationCallButton)}>Info Message</Button>
|
|
<Button variant="contained" colortheme="warning" onClick={() => props.handleNotificationCall('error')} className={classnames(classes.notificationCallButton)}>Error + Retry Message</Button>
|
|
<Button variant="contained" colortheme="success" onClick={() => props.handleNotificationCall('success')} className={classnames(classes.notificationCallButton)}>Success Message</Button>
|
|
</div>
|
|
</Widget>
|
|
</Grid>
|
|
<Grid item xs={12} md={6} lg={4}>
|
|
<Widget title="Usage" disableWidgetMenu>
|
|
<Typography>Notifications are created with the help of <a href="https://github.com/fkhadra/react-toastify">react-toastify</a></Typography>
|
|
<div className={classes.codeContainer}>
|
|
<SyntaxHighlighter className={classes.codeComponent} language='javascript' style={docco}>{`
|
|
// import needed components, functions and styles
|
|
import { ToastContainer, toast } from 'react-toastify';
|
|
import 'react-toastify/dist/ReactToastify.css';
|
|
|
|
const Page = () => {
|
|
<div>
|
|
<ToastContainer />
|
|
<button onClick={() => toast('Toast Message')}>
|
|
show notification
|
|
</button>
|
|
</div>
|
|
};
|
|
`}</SyntaxHighlighter>
|
|
<Typography variant="caption">For more API information refer to the library documentation</Typography>
|
|
</div>
|
|
</Widget>
|
|
</Grid>
|
|
<Grid item xs={12} md={6} lg={4}>
|
|
<Widget title="Notification Types Examples" disableWidgetMenu>
|
|
<NotificationCustomComponent className={classes.notificationItem} shadowless type="message" message="Thanks for Checking out Messenger" variant="contained" color="secondary"/>
|
|
<NotificationCustomComponent className={classes.notificationItem} shadowless type="feedback" message="New user feedback received" variant="contained" color="primary"/>
|
|
<NotificationCustomComponent className={classes.notificationItem} shadowless type="customer" message="New customer is registered" variant="contained" color="success" />
|
|
<NotificationCustomComponent className={classes.notificationItem} shadowless type="shipped" message="The order was shipped" variant="contained" color="warning" />
|
|
<NotificationCustomComponent className={classes.notificationItem} shadowless type="delivered" message="The order was delivered" variant="contained" color="primary" />
|
|
<NotificationCustomComponent className={classes.notificationItem} shadowless type="defence" message="5 Defence alerts" variant="contained" color="info" />
|
|
</Widget>
|
|
</Grid>
|
|
<Grid item xs={12} md={6} lg={4}>
|
|
<Widget title="Notification Types Examples" disableWidgetMenu>
|
|
<NotificationCustomComponent className={classes.notificationItem} type="report" message="New report has been received" color="secondary" />
|
|
<NotificationCustomComponent className={classes.notificationItem} type="feedback" message="New user feedback received" color="primary" />
|
|
<NotificationCustomComponent className={classes.notificationItem} type="shipped" message="The item was shipped" color="success" />
|
|
<NotificationCustomComponent className={classes.notificationItem} type="message" message="The new message from user @nahawaii" color="warning" />
|
|
<NotificationCustomComponent className={classes.notificationItem} type="upload" message="Your file is ready to upload" color="primary" />
|
|
<NotificationCustomComponent className={classes.notificationItem} type="disc" message="The disc is full" color="info" />
|
|
</Widget>
|
|
</Grid>
|
|
<Grid item xs={12} md={6} lg={4}>
|
|
<Widget title="Notification Types Examples" disableWidgetMenu>
|
|
<NotificationCustomComponent className={classes.notificationItem} type="report" message="New report has been received" variant="rounded" color="secondary" />
|
|
<NotificationCustomComponent className={classes.notificationItem} type="feedback" message="New user feedback received" variant="rounded" color="primary" />
|
|
<NotificationCustomComponent className={classes.notificationItem} type="shipped" message="The item was shipped" variant="rounded" color="success" />
|
|
<NotificationCustomComponent className={classes.notificationItem} type="message" message="The new message from user @nahawaii" variant="rounded" color="warning" />
|
|
<NotificationCustomComponent className={classes.notificationItem} type="upload" message="Your file is ready to upload" variant="rounded" color="primary" />
|
|
<NotificationCustomComponent className={classes.notificationItem} type="disc" message="The disc is full" variant="rounded" color="info" />
|
|
</Widget>
|
|
</Grid>
|
|
</Grid>
|
|
</React.Fragment>
|
|
);
|
|
|
|
const styles = (theme) => ({
|
|
layoutContainer: {
|
|
height: 200,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginTop: theme.spacing.unit * 2,
|
|
border: '1px dashed',
|
|
borderColor: theme.palette.primary.main,
|
|
position: 'relative',
|
|
},
|
|
layoutText: {
|
|
color: tinycolor(theme.palette.background.light).darken().toHexString(),
|
|
},
|
|
layoutButtonsRow: {
|
|
width: '100%',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
},
|
|
layoutButton: {
|
|
backgroundColor: theme.palette.background.light,
|
|
width: 125,
|
|
height: 50,
|
|
outline: 'none',
|
|
border: 'none',
|
|
},
|
|
layoutButtonActive: {
|
|
backgroundColor: tinycolor(theme.palette.background.light).darken().toHexString(),
|
|
},
|
|
buttonsContainer: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'flex-start',
|
|
marginTop: theme.spacing.unit * 2,
|
|
},
|
|
notificationCallButton: {
|
|
color: 'white',
|
|
marginBottom: theme.spacing.unit,
|
|
textTransform: 'none',
|
|
},
|
|
codeContainer: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
marginTop: theme.spacing.unit * 2,
|
|
},
|
|
codeComponent: {
|
|
flexGrow: 1,
|
|
},
|
|
notificationItem: {
|
|
marginTop: theme.spacing.unit * 2,
|
|
},
|
|
notificationCloseButton: {
|
|
position: 'absolute',
|
|
right: theme.spacing.unit * 2,
|
|
},
|
|
toastsContainer: {
|
|
width: 400,
|
|
marginTop: theme.spacing.unit * 6,
|
|
right: 0,
|
|
}
|
|
});
|
|
|
|
export default withStyles(styles, { withTheme: true})(NotificationsPage);
|