yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-21 14:31:16 +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

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

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