yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-22 06:50:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refacto component PopUpWarning

Browse Source
This commit is contained in:
cyril lopez 2017-10-17 14:23:28 +02:00
parent cc87727536
commit a1911bbb08
1 changed files with 58 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
packages/strapi-helper-plugin/lib/src/components/PopUpWarning/index.js
View File

@ -6,6 +6,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { map } from 'lodash';
// modal // modal
import { Button, Modal, ModalHeader, ModalBody } from 'reactstrap'; import { Button, Modal, ModalHeader, ModalBody } from 'reactstrap';
@ -17,54 +18,66 @@ import IcoSuccess from '../../assets/icons/icon_success.svg';
import IcoWarning from '../../assets/icons/icon_warning.svg'; import IcoWarning from '../../assets/icons/icon_warning.svg';
import styles from './styles.scss'; import styles from './styles.scss';
class PopUpWarning extends React.Component { // eslint-disable-line react/prefer-stateless-function const icons = {
constructor(props) {
super(props);
this.icons = {
'danger': IcoDanger, 'danger': IcoDanger,
'info': IcoInfo, 'info': IcoInfo,
'notFound': IcoNotFound, 'notFound': IcoNotFound,
'success': IcoSuccess, 'success': IcoSuccess,
'warning': IcoWarning, 'warning': IcoWarning,
}; };
}
function PopUpWarning({ content, isOpen, onConfirm, onlyConfirmButton, popUpWarningType, toggleModal }) {
const buttons = [
{
className: styles.secondary,
id: content.cancel || 'components.popUpWarning.button.cancel',
handleClick: toggleModal,
style: {},
},
{
className: styles.primary,
id: content.confirm || 'components.popUpWarning.button.confirm',
handleClick: onConfirm,
style: {},
},
];
const singleButton = [
{
className: styles.primary,
id: content.confirm || 'components.popUpWarning.button.confirm',
handleClick: onConfirm,
style: { width: '100%' },
},
];
const footerButtons = onlyConfirmButton ? singleButton : buttons;
render() {
return ( return (
<div className={styles.popUpWarning}> <div className={styles.popUpWarning}>
<Modal isOpen={this.props.isOpen} toggle={this.props.toggleModal} className={styles.modalPosition}> <Modal isOpen={isOpen} toggle={toggleModal} className={styles.modalPosition}>
<ModalHeader toggle={this.props.toggleModal} className={styles.header}> <ModalHeader toggle={toggleModal} className={styles.header}>
<FormattedMessage id={this.props.content.title || 'components.popUpWarning.title'} /> <FormattedMessage id={content.title || 'components.popUpWarning.title'} />
</ModalHeader> </ModalHeader>
<div className={styles.bordered} /> <div className={styles.bordered} />
<ModalBody> <ModalBody>
<div className={styles.modalDangerBodyContainer}> <div className={styles.modalDangerBodyContainer}>
<img src={this.icons[this.props.popUpWarningType]} alt="icon" /> <img src={icons[popUpWarningType]} alt="icon" />
<FormattedMessage id={this.props.content.message || 'components.popUpWarning.message'}> <FormattedMessage id={content.message || 'components.popUpWarning.message'}>
{(message) => ( {(message) => (
<p>{message}</p> <p>{message}</p>
)} )}
</FormattedMessage> </FormattedMessage>
</div> </div>
<div className={styles.buttonContainer}> <div className={styles.buttonContainer}>
<FormattedMessage id={this.props.content.cancel || 'components.popUpWarning.button.cancel'}> {map(footerButtons, (button) => (
{(message) => ( <FormattedMessage id={button.id} key={button.id}>
<Button onClick={this.props.toggleModal} className={styles.secondary}>{message}</Button> {(message) => <Button onClick={button.handleClick} className={button.className} style={button.style}>{message}</Button>}
)}
</FormattedMessage>
<FormattedMessage id={this.props.content.confirm || 'components.popUpWarning.button.confirm'}>
{(message) => (
<Button onClick={this.props.onConfirm} className={styles.primary}>{message}</Button>
)}
</FormattedMessage> </FormattedMessage>
))}
</div> </div>
</ModalBody> </ModalBody>
</Modal> </Modal>
</div> </div>
); );
}
} }
PopUpWarning.propTypes = { PopUpWarning.propTypes = {