UNPKG

react-app-shell

Version:

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

98 lines (83 loc) 2.93 kB
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;