diff --git a/packages/strapi-helper-plugin/lib/src/components/ModalConfirm/Header.js b/packages/strapi-helper-plugin/lib/src/components/ModalConfirm/Header.js new file mode 100644 index 0000000000..0e2678551a --- /dev/null +++ b/packages/strapi-helper-plugin/lib/src/components/ModalConfirm/Header.js @@ -0,0 +1,31 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Text } from '@buffetjs/core'; +import { FormattedMessage } from 'react-intl'; +import Close from '../../svgs/Close'; +import { CloseButton, HeaderWrapper } from './styled'; + +const Header = ({ title, toggle }) => { + return ( + + + + + + + + + + ); +}; + +Header.propTypes = { + title: PropTypes.exact({ + id: PropTypes.string, + defaultMessage: PropTypes.string, + values: PropTypes.object, + }).isRequired, + toggle: PropTypes.func.isRequired, +}; + +export default Header; diff --git a/packages/strapi-helper-plugin/lib/src/components/ModalConfirm/index.js b/packages/strapi-helper-plugin/lib/src/components/ModalConfirm/index.js new file mode 100644 index 0000000000..806a8dfd1c --- /dev/null +++ b/packages/strapi-helper-plugin/lib/src/components/ModalConfirm/index.js @@ -0,0 +1,141 @@ +import React, { useCallback } from 'react'; +import PropTypes from 'prop-types'; +import { Button, Padded, Text } from '@buffetjs/core'; +import { FormattedMessage } from 'react-intl'; +import Src from '../../assets/icons/icon_danger.svg'; +import Header from './Header'; +import { Body, Footer, Img, StyledModal, TextWrapper } from './styled'; + +const ModalConfirm = ({ + buttons, + cancelButtonLabel, + confirmButtonLabel, + content, + children, + isOpen, + onConfirm, + showButtonLoader, + title, + toggle, + type, +}) => { + const handleToggle = useCallback( + e => { + // Prevent action when loading + if (showButtonLoader) { + return; + } + + toggle(e); + }, + [showButtonLoader, toggle] + ); + + let displayedButtons = buttons; + + // If type is info buttons have more control + if (type !== 'info' && !buttons) { + const confirmButtonColor = ['xwarning', 'warning'].includes(type) ? 'delete' : 'success'; + + displayedButtons = [ + , + , + ]; + } + + return ( + +
+ + icon; + + + + + + {children && ( + + {children} + + )} + +
{displayedButtons}
+ + ); +}; + +ModalConfirm.defaultProps = { + buttons: null, + children: null, + content: { + id: 'components.popUpWarning.message', + defaultMessage: 'Are you sure?', + values: { + // Example + // b: chunks => {chunks}, + // br: () =>
, + }, + }, + cancelButtonLabel: { + id: 'components.popUpWarning.button.cancel', + defaultMessage: 'No, cancel', + values: {}, + }, + confirmButtonLabel: { + id: 'components.popUpWarning.button.confirm', + defaultMessage: 'Yes, confirm', + values: {}, + }, + onConfirm: () => {}, + showButtonLoader: false, + + toggle: () => {}, + title: { + id: 'components.popUpWarning.title', + defaultMessage: 'Please confirm', + values: {}, + }, + type: 'warning', +}; + +ModalConfirm.propTypes = { + buttons: PropTypes.array, + children: PropTypes.element, + cancelButtonLabel: PropTypes.exact({ + id: PropTypes.string, + defaultMessage: PropTypes.string, + values: PropTypes.object, + }), + confirmButtonLabel: PropTypes.exact({ + id: PropTypes.string, + defaultMessage: PropTypes.string, + values: PropTypes.object, + }), + content: PropTypes.exact({ + id: PropTypes.string, + defaultMessage: PropTypes.string, + values: PropTypes.object, + }), + isOpen: PropTypes.bool.isRequired, + onConfirm: PropTypes.func, + showButtonLoader: PropTypes.bool, + title: PropTypes.exact({ + id: PropTypes.string, + defaultMessage: PropTypes.string, + values: PropTypes.object, + }), + toggle: PropTypes.func, + type: PropTypes.oneOf(['warning', 'xwarning', 'info']), +}; + +export default ModalConfirm; diff --git a/packages/strapi-helper-plugin/lib/src/components/ModalConfirm/styled.js b/packages/strapi-helper-plugin/lib/src/components/ModalConfirm/styled.js new file mode 100644 index 0000000000..45bfb51687 --- /dev/null +++ b/packages/strapi-helper-plugin/lib/src/components/ModalConfirm/styled.js @@ -0,0 +1,58 @@ +import { Modal as BaseModal } from 'reactstrap'; +import styled from 'styled-components'; + +const Body = styled.div` + padding-top: 2.1rem; + padding-bottom: 1.5rem + padding-right: ${props => props.theme.main.sizes.paddings.md}; + padding-left: ${props => props.theme.main.sizes.paddings.md}; + text-align: center; +`; + +const HeaderWrapper = styled.div` + width: 100%; + padding-left: ${props => props.theme.main.sizes.paddings.md}; + padding-right: ${props => props.theme.main.sizes.paddings.md}; + padding-top: 17px; + padding-bottom: 22px; + background-color: ${props => props.theme.main.colors.lightGrey}; + border: 0; +`; + +const CloseButton = styled.div` + position: absolute; + top: 18px; + right: 30px; + cursor: pointer; + > svg { + fill: #c3c5c8; + } +`; + +const StyledModal = styled(BaseModal)` + width: 41.6rem !important; + margin: 14.4rem auto !important; +`; + +const Footer = styled.div` + display: flex; + width: 100%; + margin-top: 19px; + justify-content: space-between; + background-color: #eff3f6; + padding: 15px 30px 17px 30px; + > button { + padding: 0 30px; + } +`; + +const Img = styled.img` + width: 2.5rem; + margin-bottom: 2.2rem; +`; + +const TextWrapper = styled.div` + min-height: 36px; +`; + +export { Body, CloseButton, Footer, HeaderWrapper, Img, StyledModal, TextWrapper }; diff --git a/packages/strapi-helper-plugin/lib/src/index.js b/packages/strapi-helper-plugin/lib/src/index.js index 8fad9c422d..c56b783b29 100644 --- a/packages/strapi-helper-plugin/lib/src/index.js +++ b/packages/strapi-helper-plugin/lib/src/index.js @@ -62,6 +62,7 @@ export { default as LoadingBar } from './components/LoadingBar'; export { default as LoadingIndicator } from './components/LoadingIndicator'; export { default as LoadingIndicatorPage } from './components/LoadingIndicatorPage'; +export { default as ModalConfirm } from './components/ModalConfirm'; export { default as Modal } from './components/Modal'; export { default as ModalBody } from './components/BodyModal'; export { default as ModalHeader } from './components/ModalHeader';