Files
goTorrent/goTorrentWebUI/node_modules/react-toastify/src/Toast.js

191 lines
4.8 KiB
JavaScript

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import ProgressBar from './ProgressBar';
import { POSITION, TYPE } from './constant';
import defaultStyle from './defaultStyle';
import {
falseOrElement,
falseOrDelay,
objectValues
} from './util/propValidator';
const styles = {
container: type =>
css({
position: 'relative',
minHeight: '48px',
marginBottom: '1rem',
padding: '8px',
borderRadius: '1px',
boxShadow:
'0 1px 10px 0 rgba(0, 0, 0, .1), 0 2px 15px 0 rgba(0, 0, 0, .05)',
display: 'flex',
justifyContent: 'space-between',
maxHeight: '800px',
overflow: 'hidden',
fontFamily: defaultStyle.fontFamily,
cursor: 'pointer',
background:
defaultStyle[`color${type.charAt(0).toUpperCase()}${type.slice(1)}`],
...(type === 'default' ? { color: '#aaa' } : {}),
[`@media ${defaultStyle.mobile}`]: {
marginBottom: 0
}
}),
body: css({
margin: 'auto 0',
flex: 1
})
};
class Toast extends Component {
static propTypes = {
closeButton: falseOrElement.isRequired,
autoClose: falseOrDelay.isRequired,
children: PropTypes.node.isRequired,
closeToast: PropTypes.func.isRequired,
position: PropTypes.oneOf(objectValues(POSITION)).isRequired,
pauseOnHover: PropTypes.bool.isRequired,
closeOnClick: PropTypes.bool.isRequired,
transition: PropTypes.func.isRequired,
isDocumentHidden: PropTypes.bool.isRequired,
in: PropTypes.bool,
onExited: PropTypes.func,
hideProgressBar: PropTypes.bool,
onOpen: PropTypes.func,
onClose: PropTypes.func,
type: PropTypes.oneOf(objectValues(TYPE)),
className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
bodyClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
progressClassName: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object
]),
updateId: PropTypes.number,
ariaLabel: PropTypes.string
};
static defaultProps = {
type: TYPE.DEFAULT,
in: true,
hideProgressBar: false,
onOpen: null,
onClose: null,
className: '',
bodyClassName: '',
progressClassName: '',
updateId: null,
role: 'alert'
};
state = {
isRunning: true
};
componentDidMount() {
this.props.onOpen !== null && this.props.onOpen(this.getChildrenProps());
}
componentWillReceiveProps(nextProps) {
if (this.props.isDocumentHidden !== nextProps.isDocumentHidden) {
this.setState({
isRunning: !nextProps.isDocumentHidden
});
}
}
componentWillUnmount() {
this.props.onClose !== null && this.props.onClose(this.getChildrenProps());
}
getChildrenProps() {
return this.props.children.props;
}
getToastProps() {
const toastProps = {};
if (this.props.autoClose !== false && this.props.pauseOnHover === true) {
toastProps.onMouseEnter = this.pauseToast;
toastProps.onMouseLeave = this.playToast;
}
typeof this.props.className === 'string' &&
(toastProps.className = this.props.className);
this.props.closeOnClick && (toastProps.onClick = this.props.closeToast);
return toastProps;
}
pauseToast = () => {
this.setState({ isRunning: false });
};
playToast = () => {
this.setState({ isRunning: true });
};
render() {
const {
closeButton,
children,
autoClose,
type,
hideProgressBar,
closeToast,
transition: Transition,
position,
onExited,
className,
bodyClassName,
progressClassName,
updateId,
role
} = this.props;
return (
<Transition
in={this.props.in}
appear
unmountOnExit
onExited={onExited}
position={position}
>
<div
{...(typeof className !== 'string'
? css(styles.container(type), className)
: styles.container(type))}
{...this.getToastProps()}
>
<div
{...this.props.in && { role: role }}
{...(typeof bodyClassName !== 'string'
? css(styles.body, bodyClassName)
: styles.body)}
{...typeof bodyClassName === 'string' && {
className: bodyClassName
}}
>
{children}
</div>
{closeButton !== false && closeButton}
{autoClose !== false && (
<ProgressBar
key={`pb-${updateId}`}
delay={autoClose}
isRunning={this.state.isRunning}
closeToast={closeToast}
hide={hideProgressBar}
type={type}
className={progressClassName}
/>
)}
</div>
</Transition>
);
}
}
export default Toast;