yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-26 17:00:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Design new confirm modal

Browse Source 
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-10-02 17:23:53 +02:00
parent 74464c9d14
commit 6f21cd9206
4 changed files with 231 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/strapi-helper-plugin/lib/src/components/ModalConfirm/Header.js Normal file
View File

@ -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 (
<HeaderWrapper toggle={toggle}>
<Text fontSize="lg" fontWeight="black" style={{ textAlign: 'center' }}>
<FormattedMessage {...title} />
</Text>
<CloseButton>
<Close />
</CloseButton>
</HeaderWrapper>
);
};
Header.propTypes = {
title: PropTypes.exact({
id: PropTypes.string,
defaultMessage: PropTypes.string,
values: PropTypes.object,
}).isRequired,
toggle: PropTypes.func.isRequired,
};
export default Header;

141
packages/strapi-helper-plugin/lib/src/components/ModalConfirm/index.js Normal file
View File

@ -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 = [
<Button color="cancel" type="button" key="cancel" onClick={handleToggle}>
<FormattedMessage {...cancelButtonLabel} />
</Button>,
<Button
color={confirmButtonColor}
type="button"
key="confirm"
onClick={onConfirm}
isLoading={showButtonLoader}
>
<FormattedMessage {...confirmButtonLabel} />
</Button>,
];
}
return (
<StyledModal isOpen={isOpen} toggle={handleToggle}>
<Header title={title} toggle={handleToggle} />
<Body>
<Img src={Src} alt="icon" />;
<TextWrapper>
<Text lineHeight="18px">
<FormattedMessage {...content} />
</Text>
</TextWrapper>
{children && (
<Padded top size="smd">
{children}
</Padded>
)}
</Body>
<Footer>{displayedButtons}</Footer>
</StyledModal>
);
};
ModalConfirm.defaultProps = {
buttons: null,
children: null,
content: {
id: 'components.popUpWarning.message',
defaultMessage: 'Are you sure?',
values: {
// Example
// b: chunks => <b>{chunks}</b>,
// br: () => <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;

58
packages/strapi-helper-plugin/lib/src/components/ModalConfirm/styled.js Normal file
View File

@ -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 };

1
packages/strapi-helper-plugin/lib/src/index.js
View File

@ -62,6 +62,7 @@ export { default as LoadingBar } from './components/LoadingBar';
export { default as LoadingIndicator } from './components/LoadingIndicator'; export { default as LoadingIndicator } from './components/LoadingIndicator';
export { default as LoadingIndicatorPage } from './components/LoadingIndicatorPage'; export { default as LoadingIndicatorPage } from './components/LoadingIndicatorPage';
export { default as ModalConfirm } from './components/ModalConfirm';
export { default as Modal } from './components/Modal'; export { default as Modal } from './components/Modal';
export { default as ModalBody } from './components/BodyModal'; export { default as ModalBody } from './components/BodyModal';
export { default as ModalHeader } from './components/ModalHeader'; export { default as ModalHeader } from './components/ModalHeader';