UNPKG

react-app-shell

Version:

react打包脚本和example, 这里的版本请忽略

86 lines (74 loc) 2.32 kB
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> ); } }