react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
98 lines (83 loc) • 2.93 kB
JavaScript
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import BaseModal from '../modal/base-modal';
import styles from './info-modal.less';
import weeprabbit from '../../public/images/common/weep-rabbit.png';
import happyrabbit from '../../public/images/common/happy-rabbit.png';
const HeaderType = {weep: weeprabbit, happy: happyrabbit};
class InfoModal extends PureComponent {
static propTypes = {
visible: PropTypes.bool,
loading: PropTypes.bool,
cancelVisible: PropTypes.bool, // 取消按钮是否显示
okText: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element
]),
headerType: PropTypes.string, // 头图片类型 weep,happy
cancelText: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element
]),
okBtnStyle: PropTypes.object, // 确定按钮样式
cancelBtnStyle: PropTypes.object, // 取消按钮样式
onOk: PropTypes.func,
onCancel: PropTypes.func,
};
static defaultProps = {
visible: true,
loading: false,
cancelVisible: true,
okText: '确认',
okBtnStyle: {},
cancelBtnStyle: {},
cancelText: '再想想',
headerType: 'happy',
onCancel: () => {
console.log('您点击了取消');
}
};
state = {
};
handleonCancel = () => {
let {onCancel} = this.props;
onCancel && onCancel();
};
handleonOk = () => {
let {onOk, onCancel, loading} = this.props;
if (loading) return false;
onOk ? onOk() : onCancel();
};
renderFooterBtn = () => {
const {cancelVisible, cancelText, okText, okBtnStyle, cancelBtnStyle} = this.props;
let buttons = [];
if (cancelVisible) {
buttons.push(<button key={'cancel'}
style={cancelBtnStyle}
className={styles['cancelBtn']}
onClick={this.handleonCancel}>{cancelText}</button>);
}
buttons.push(<button key={'ok'}
style={okBtnStyle}
className={styles['okBtn']}
onClick={this.handleonOk}>{okText}</button>);
return buttons;
}
render() {
const {visible, headerType, children} = this.props;
let rabbit = HeaderType[headerType] || HeaderType['happy'];
return visible ? (
<BaseModal
onCancel={this.handleonCancel}
header={<div className={styles['info-header']}><img src={rabbit} alt="logo"/></div>}
footer={<div className={styles['info-footer']}>
{this.renderFooterBtn()}
</div>}>
<div className={styles['info-form']}>
{children}
</div>
</BaseModal>
) : null;
}
}
export default InfoModal;