71 lines
1.5 KiB
JavaScript
71 lines
1.5 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
|
|
import styled, { css } from "styled-components";
|
|
import { smallTablet } from "../../utils/device";
|
|
import IconButton from "../../icon-button";
|
|
import Base from "../../themes/base";
|
|
|
|
const StyledCloseButtonWrapper = styled.div`
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 24px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
background-color: ${(props) =>
|
|
props.theme.modalDialog.closeButton.backgroundColor};
|
|
border-radius: 50%;
|
|
|
|
cursor: pointer;
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
top: 0;
|
|
|
|
${(props) =>
|
|
props.displayType === "modal"
|
|
? css`
|
|
margin-right: -34px;
|
|
@media ${smallTablet} {
|
|
margin-right: 10px;
|
|
margin-top: -34px;
|
|
}
|
|
`
|
|
: css`
|
|
z-index: 1000;
|
|
margin-top: 10px;
|
|
right: 335px;
|
|
`}
|
|
|
|
.close-button {
|
|
cursor: pointer;
|
|
path {
|
|
fill: ${(props) => props.theme.modalDialog.closeButton.fillColor};
|
|
}
|
|
}
|
|
`;
|
|
|
|
StyledCloseButtonWrapper.defaultProps = { theme: Base };
|
|
|
|
const CloseButton = ({ displayType, onClick }) => {
|
|
return (
|
|
<StyledCloseButtonWrapper onClick={onClick} displayType={displayType}>
|
|
<IconButton
|
|
size={12}
|
|
className="close-button"
|
|
iconName="/static/images/cross.react.svg"
|
|
/>
|
|
</StyledCloseButtonWrapper>
|
|
);
|
|
};
|
|
|
|
CloseButton.propTypes = {
|
|
displayType: PropTypes.oneOf(["modal", "aside"]),
|
|
onClick: PropTypes.func,
|
|
};
|
|
|
|
export default CloseButton;
|