|
@@ -1,9 +1,9 @@
|
|
import React, { Component } from 'react';
|
|
import React, { Component } from 'react';
|
|
import styles from './index.less';
|
|
import styles from './index.less';
|
|
-import OldPortal from './OldPortal';
|
|
|
|
import NewPortal from './NewPortal'
|
|
import NewPortal from './NewPortal'
|
|
import PropTypes from 'prop-types';
|
|
import PropTypes from 'prop-types';
|
|
-import close from "./img/close.png";
|
|
|
|
|
|
+import close from "../../images/close1.png";
|
|
|
|
+import icon1 from '../../images/icon.png'
|
|
|
|
|
|
/***
|
|
/***
|
|
* 弹窗组件
|
|
* 弹窗组件
|
|
@@ -41,16 +41,8 @@ const propTypes = {
|
|
titleBg: PropTypes.string,
|
|
titleBg: PropTypes.string,
|
|
noFooter: PropTypes.bool,
|
|
noFooter: PropTypes.bool,
|
|
okText: PropTypes.string,
|
|
okText: PropTypes.string,
|
|
- okColor: PropTypes.string,
|
|
|
|
- okBorderColor: PropTypes.string,
|
|
|
|
- oKBg: PropTypes.string,
|
|
|
|
|
|
+ okType:PropTypes.string,
|
|
cancelText: PropTypes.string,
|
|
cancelText: PropTypes.string,
|
|
- cancelColor: PropTypes.string,
|
|
|
|
- cancelBorderColor: PropTypes.string,
|
|
|
|
- cancelBg: PropTypes.string,
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
}
|
|
}
|
|
|
|
|
|
const defaultProps = {
|
|
const defaultProps = {
|
|
@@ -60,16 +52,10 @@ const defaultProps = {
|
|
maskClosable: true,
|
|
maskClosable: true,
|
|
closable: true,
|
|
closable: true,
|
|
okText: '确认',
|
|
okText: '确认',
|
|
- okColor: 'red',
|
|
|
|
- okBorderColor: 'red',
|
|
|
|
- oKBg:'#fff',
|
|
|
|
|
|
+ okType:'normal', //normal蓝色,danger红色
|
|
cancelText: '取消',
|
|
cancelText: '取消',
|
|
- cancelColor: '#414141',
|
|
|
|
- cancelBorderColor: '#414141',
|
|
|
|
- cancelBg: '#fff',
|
|
|
|
- width: '300px',
|
|
|
|
- height: '200px',
|
|
|
|
- borderBtm:'0'
|
|
|
|
|
|
+ width: '400px',
|
|
|
|
+ height: '204px',
|
|
};
|
|
};
|
|
|
|
|
|
class ConfirmModal extends Component {
|
|
class ConfirmModal extends Component {
|
|
@@ -113,19 +99,13 @@ class ConfirmModal extends Component {
|
|
mask,
|
|
mask,
|
|
maskClosable,
|
|
maskClosable,
|
|
okText,
|
|
okText,
|
|
- okColor,
|
|
|
|
- okBorderColor,
|
|
|
|
- oKBg,
|
|
|
|
- cancelText,
|
|
|
|
- cancelColor,
|
|
|
|
- cancelBorderColor,
|
|
|
|
- cancelBg,
|
|
|
|
|
|
+ okType,
|
|
|
|
+ cancelText,
|
|
width,
|
|
width,
|
|
height,
|
|
height,
|
|
closable,
|
|
closable,
|
|
noFooter,
|
|
noFooter,
|
|
icon,
|
|
icon,
|
|
- borderBtm
|
|
|
|
} = this.props;
|
|
} = this.props;
|
|
const marginLeft = -parseInt(width)/2
|
|
const marginLeft = -parseInt(width)/2
|
|
const marginTop = -parseInt(height)/2
|
|
const marginTop = -parseInt(height)/2
|
|
@@ -133,28 +113,26 @@ class ConfirmModal extends Component {
|
|
<NewPortal visible={visible}>
|
|
<NewPortal visible={visible}>
|
|
<div className={styles['modal-wrapper']} id='confirm'>
|
|
<div className={styles['modal-wrapper']} id='confirm'>
|
|
<div className={styles[['modal']]} style = {{width: width, marginLeft:marginLeft, minHeight:height, marginTop:marginTop}}>
|
|
<div className={styles[['modal']]} style = {{width: width, marginLeft:marginLeft, minHeight:height, marginTop:marginTop}}>
|
|
- <div className={styles['modal-title']} style={{background: titleBg,borderBottom:borderBtm}}>
|
|
|
|
|
|
+ <div className={styles['modal-title']} style={{background: titleBg}}>
|
|
{icon?<img src={icon} className={styles['icon']}/>:''}
|
|
{icon?<img src={icon} className={styles['icon']}/>:''}
|
|
{title ? title : ''}
|
|
{title ? title : ''}
|
|
{closable ? <img onClick={this.closeModal} className={styles['modal-close']} src = {close}/> : false}
|
|
{closable ? <img onClick={this.closeModal} className={styles['modal-close']} src = {close}/> : false}
|
|
</div>
|
|
</div>
|
|
- <div className={styles['modal-content']}>{children}</div>
|
|
|
|
|
|
+ <div className={styles['modal-content']}><img src={icon1}/>{children}</div>
|
|
{noFooter ? '' : <div className={styles['modal-operator']+' clearfix'}>
|
|
{noFooter ? '' : <div className={styles['modal-operator']+' clearfix'}>
|
|
<div className={styles['modal-btn-box']}>
|
|
<div className={styles['modal-btn-box']}>
|
|
<div
|
|
<div
|
|
onClick={this.confirm}
|
|
onClick={this.confirm}
|
|
- className={styles['modal-operator-confirm']}
|
|
|
|
- style={{borderColor: okBorderColor, background: oKBg, color: okColor}}>
|
|
|
|
|
|
+ className={styles['modal-operator-confirm']+" "+styles[okType]}>
|
|
{ okText}
|
|
{ okText}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={styles['modal-btn-box']}>
|
|
<div className={styles['modal-btn-box']}>
|
|
- <div
|
|
|
|
- onClick={this.cancel}
|
|
|
|
- className={styles['modal-operator-close']}
|
|
|
|
- style={{borderColor: cancelBorderColor, background: cancelBg, color: cancelColor}}>
|
|
|
|
- { cancelText}
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div
|
|
|
|
+ onClick={this.cancel}
|
|
|
|
+ className={styles['modal-operator-close']}>
|
|
|
|
+ { cancelText}
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>}
|
|
</div>}
|
|
</div>
|
|
</div>
|