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

103
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) { 'danger': IcoDanger,
super(props); 'info': IcoInfo,
'notFound': IcoNotFound,
'success': IcoSuccess,
'warning': IcoWarning,
};
this.icons = { function PopUpWarning({ content, isOpen, onConfirm, onlyConfirmButton, popUpWarningType, toggleModal }) {
'danger': IcoDanger, const buttons = [
'info': IcoInfo, {
'notFound': IcoNotFound, className: styles.secondary,
'success': IcoSuccess, id: content.cancel || 'components.popUpWarning.button.cancel',
'warning': IcoWarning, 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={isOpen} toggle={toggleModal} className={styles.modalPosition}>
<Modal isOpen={this.props.isOpen} toggle={this.props.toggleModal} className={styles.modalPosition}> <ModalHeader toggle={toggleModal} className={styles.header}>
<ModalHeader toggle={this.props.toggleModal} className={styles.header}> <FormattedMessage id={content.title || 'components.popUpWarning.title'} />
<FormattedMessage id={this.props.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={icons[popUpWarningType]} alt="icon" />
<img src={this.icons[this.props.popUpWarningType]} alt="icon" /> <FormattedMessage id={content.message || 'components.popUpWarning.message'}>
<FormattedMessage id={this.props.content.message || 'components.popUpWarning.message'}> {(message) => (
{(message) => ( <p>{message}</p>
<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> </FormattedMessage>
</div> ))}
<div className={styles.buttonContainer}> </div>
<FormattedMessage id={this.props.content.cancel || 'components.popUpWarning.button.cancel'}> </ModalBody>
{(message) => ( </Modal>
<Button onClick={this.props.toggleModal} className={styles.secondary}>{message}</Button> </div>
)} );
</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>
);
}
} }
PopUpWarning.propTypes = { PopUpWarning.propTypes = {