import React, { Component } from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import { Modal, log, Button } from '@front-desktop/bege';
import './index.scss';
export class Popup extends Component {
static propTypes = {
name: PropTypes.string.isRequired,
closeCallback: PropTypes.func,
confirmCallbalk: PropTypes.func,
};
static storeInstanceThis = {};
static open(name, content) {
this.storeInstanceThis[`${name}_this`].setState({
content,
});
Modal.open(name);
}
constructor(props) {
super(props);
if (!props.name) {
log.warn('参数 name 未定义~');
}
this.state = {
content: '',
};
}
componentWillMount() {
const { name } = this.props;
this.constructor.storeInstanceThis[`${name}_this`] = this;
}
clickClose = () => {
let { closeCallback } = this.props;
this.closePopup();
closeCallback();
};
clickConfirm = () => {
let { confirmCallbalk } = this.props;
this.closePopup();
confirmCallbalk();
};
closePopup = () => {
const { name } = this.props;
Modal.close(name);
this.setState({
content: '',
});
};
render() {
const { content } = this.state;
const { name } = this.props;
return (
<Modal className="popup-wrap" name={name}>
<div className="popup-box">
<div className="popup-title">
<span className="title-text">提示</span>
<button className="close-button" onClick={this.clickConfirm} />
</div>
<div className="pop-content">{content}</div>
<div className="pop-bottom clear">
<Button
className="pop-button"
type="outline"
size="small"
onClick={this.clickConfirm}
>
确定
</Button>
</div>
</div>
</Modal>
);
}
}
Popup.defaultProps = {
closeCallback: _.noop,
confirmCallbalk: _.noop,
};
样式
@charset 'utf-8';
@import "components/index";
.popup-wrap {
position: relative;
z-index: 110;
.cm-modal {
width: 330px;
height: 150px;
color: $light;
}
.popup-box {
vertical-align: middle;
}
.popup-title {
height: 40px;
line-height: 40px;
color: $dark;
background-color: $light;
border: 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.title-text {
font-size: $font-size-extra-large;
margin-left: 18px;
}
.close-button {
position: relative;
float: right;
height: 24px;
margin-top: 5px;
margin-right: 10px;
color: $light;
cursor: pointer;
background: none;
border: none;
}
.pop-content {
height: 70px;
padding: 12px 30px 0px 30px;
font-size: $font-size-extra-large;
line-height: 21px;
color: $gray;
background: $light;
text-align: center;
word-break: break-all;
overflow: hidden;
}
.pop-bottom {
height: 40px;
}
.pop-button {
float: right;
width: 100%;
height: 40px;
padding: 0px;
color: $light;
line-height: 40px;
font-size: $font-size-large;
cursor: pointer;
background: $primary-color;
border: 0;
border-color: $primary-color;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
.cm-button {
&:hover {
background: $primary-color;
border-color: $primary-color;
color: $light;
}
}
}