woocommerce/plugins/woocommerce-blocks/assets/js/extensions/shipping-methods/shared-components/settings-modal/index.tsx

89 lines
1.4 KiB
TypeScript

/**
* External dependencies
*/
import { Modal } from '@wordpress/components';
import styled from '@emotion/styled';
const StyledModal = styled( Modal )`
max-width: 600px;
border-radius: 4px;
@media ( min-width: 600px ) {
min-width: 560px;
}
.components-modal__header {
padding: 12px 24px;
border-bottom: 1px solid #e0e0e0;
position: relative;
height: auto;
width: auto;
margin: 0 -24px 16px;
@media ( max-width: 599px ) {
button {
display: none;
}
}
}
.components-modal__content {
margin: 0;
padding: 0 24px;
@media ( max-width: 599px ) {
display: flex;
flex-direction: column;
hr:last-of-type {
margin-top: auto;
}
}
.components-base-control {
label {
margin-top: 8px;
text-transform: none !important;
}
}
}
`;
const StyledFooter = styled.div`
display: flex;
justify-content: flex-end;
border-top: 1px solid #e0e0e0;
margin: 24px -24px 0;
padding: 24px;
> * {
&:not( :first-of-type ) {
margin-left: 8px;
}
}
.button-link-delete {
margin-right: auto;
color: #d63638;
}
`;
const SettingsModal = ( {
children,
actions,
title,
onRequestClose,
...props
}: {
children: React.ReactNode;
actions: React.ReactNode;
title: string;
onRequestClose: () => void;
} ): JSX.Element => (
<StyledModal title={ title } onRequestClose={ onRequestClose } { ...props }>
{ children }
<StyledFooter>{ actions }</StyledFooter>
</StyledModal>
);
export default SettingsModal;