import React, { Component } from 'react';
import classnames from 'classnames';
import './index.scss';
export class TipPopup extends Component {
static propTypes: {
content: PropTypes.string.isRequired,
theme: PropTypes.string.isRequired,
isShow: PropTypes.bool,
interval: PropTypes.number,
callbackParent: PropTypes.func,
};
constructor(props) {
super(props);
this.state = {
isShow: this.props.isShow,
};
}
componentWillMount() {
this.openChangePopupTimer();
}
componentWillReceiveProps(nextProps) {
const { isShow } = nextProps;
this.setState({
isShow: isShow,
});
if (isShow) {
this.openChangePopupTimer();
this.props.callbackParent();
}
}
openChangePopupTimer(props) {
const { interval } = this.props;
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(() => {
this.setState({
isShow: false,
});
}, interval);
}
render() {
const { content, theme } = this.props;
const { isShow } = this.state;
const className = classnames('tip-popup', this.props.className, {
[`tip-popup-${theme}`]: theme,
'tip-popup-hidden': !isShow,
});
const iconClassName = classnames('icon', {
[`${theme}-icon`]: theme,
});
return (
<div className={className}>
<div className={iconClassName} />
{content}
</div>
);
}
}
TipPopup.defaultProps = {
isShow: false,
interval: 3000,
};
@charset 'utf-8';
@import "components/index";
.tip-popup {
position: absolute;
top: 0px;
left: 0px;
line-height: 16px;
text-align: left;
z-index: 2;
&.tip-popup-success {
width: 150px;
padding: 6px 15px 6px 40px;
line-height: 20px;
color: $primary-color;
background-color: $light;
border: 1px solid $gray-lighter;
}
&.tip-popup-info {
display: inline-block;
max-width: 280px;
padding: 6px 10px;
color: #fd8436;
background-color: $light;
border: 1px solid $line-color;
}
&.tip-popup-warning {
display: inline-block;
max-width: 230px;
padding: 7px 14px 7px 37px;
color: #fd8436;
background-color: $light;
border: 1px solid $gray-lighter;
}
&.tip-popup-hidden {
display: none;
}
.icon {
position: absolute;
}
.success-icon {
top: 10px;
left: 18px;
width: 15px;
height: 11px;
background: url("./success.png") 0 0 no-repeat;
}
.info-icon {
top: -8px;
right: 16px;
width: 15px;
height: 9px;
background: url("./tip.png") 0 0 no-repeat;
}
.warning-icon {
top: 7px;
left: 12px;
width: 18px;
height: 16px;
background: url("./error.png") 0 0 no-repeat;
}
}
reactjs:在每个模块下定位提示内容展示,三秒后消失
最新推荐文章于 2023-04-27 16:56:38 发布