react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
86 lines (74 loc) • 2.32 kB
JavaScript
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import BaseModal from './base-modal';
import style from './tips.less';
export default class TipsModal extends Component {
static propTypes = {
visible: PropTypes.bool,
isShowCancel: PropTypes.bool,
headText: PropTypes.string,
okText: PropTypes.string,
cancelText: PropTypes.string,
footer: PropTypes.element,
onOk: PropTypes.func,
onCancel: PropTypes.func
};
static defaultProps = {
visible: false,
isShowCancel: false, // 是否展示取消按钮,默认不展示
headText: '提示',
okText: '确定',
cancelText: '取消',
footer: null,
onOk: null,
onCancel: null
};
renderHeader = () => {
const {headText} = this.props;
return (
<div className={style['header']}>
{headText}
</div>
);
};
renderFooter = () => {
const {okText, cancelText, footer, isShowCancel} = this.props;
if (footer) {
return footer;
}
if (isShowCancel) {
return (
<div className={style['btn-content']}>
<button className={style['cancel-button']} onClick={this.handleCancel}>{cancelText}</button>
<button className={style['ok-button']} onClick={this.handleOk}>{okText}</button>
</div>
);
}
return (
<div className={style['btn-content']}>
<button className={`${style['ok-button']} ${style['ok-long-button']}`} onClick={this.handleOk}>{okText}</button>
</div>
);
};
handleOk = () => {
const {onOk} = this.props;
onOk && onOk();
};
handleCancel = () => {
const {onCancel} = this.props;
onCancel && onCancel();
};
render() {
const {visible, children} = this.props;
return (
<BaseModal
visible={visible}
header={this.renderHeader()}
footer={this.renderFooter()}>
<div className={style['content']}>
{children}
</div>
</BaseModal>
);
}
}