2022-02-03 15:34:19 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import styled, { css } from "styled-components";
|
|
|
|
import Heading from "@appserver/components/heading";
|
|
|
|
import { isMobileOnly, isTablet } from "react-device-detect";
|
|
|
|
import MenuIcon from "@appserver/components/public/static/images/menu.react.svg";
|
|
|
|
import { tablet, mobile } from "@appserver/components/utils/device";
|
2021-09-27 12:59:37 +00:00
|
|
|
|
|
|
|
const StyledCatalogHeader = styled.div`
|
|
|
|
padding: 12px 20px 13px;
|
|
|
|
display: flex;
|
|
|
|
justify-content: flex-start;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
@media ${tablet} {
|
2021-09-30 09:05:04 +00:00
|
|
|
padding: 16px 16px 17px;
|
2021-10-04 14:22:06 +00:00
|
|
|
margin: 0;
|
2022-02-03 15:34:19 +00:00
|
|
|
justify-content: ${(props) => (props.showText ? "flex-start" : "center")};
|
2021-09-27 12:59:37 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@media ${mobile} {
|
|
|
|
border-bottom: 1px solid #eceef1;
|
2021-10-04 14:22:06 +00:00
|
|
|
padding: 8px 14px 17px;
|
|
|
|
margin: 0;
|
2021-09-27 12:59:37 +00:00
|
|
|
}
|
2021-09-30 09:05:04 +00:00
|
|
|
|
|
|
|
${isTablet &&
|
|
|
|
css`
|
|
|
|
padding: 16px 16px 17px;
|
2022-02-03 15:34:19 +00:00
|
|
|
justify-content: ${(props) => (props.showText ? "flex-start" : "center")};
|
2021-10-04 14:22:06 +00:00
|
|
|
margin: 0;
|
2021-09-30 09:05:04 +00:00
|
|
|
`}
|
|
|
|
|
|
|
|
${isMobileOnly &&
|
|
|
|
css`
|
|
|
|
border-bottom: 1px solid #eceef1 !important;
|
2021-10-04 14:22:06 +00:00
|
|
|
padding: 8px 14px 17px !important;
|
|
|
|
margin: 0;
|
2021-09-30 09:05:04 +00:00
|
|
|
`}
|
2021-09-27 12:59:37 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledHeading = styled(Heading)`
|
|
|
|
margin: 0;
|
2021-10-04 14:22:06 +00:00
|
|
|
padding: 0;
|
2021-09-27 12:59:37 +00:00
|
|
|
font-weight: bold;
|
|
|
|
line-height: 28px;
|
|
|
|
@media ${tablet} {
|
2022-02-03 15:34:19 +00:00
|
|
|
display: ${(props) => (props.showText ? "block" : "none")};
|
|
|
|
margin-left: ${(props) => props.showText && "12px"};
|
2021-09-27 12:59:37 +00:00
|
|
|
}
|
2021-09-30 09:05:04 +00:00
|
|
|
|
2021-10-04 14:22:06 +00:00
|
|
|
${isTablet &&
|
|
|
|
css`
|
2022-02-03 15:34:19 +00:00
|
|
|
display: ${(props) => (props.showText ? "block" : "none")};
|
|
|
|
margin-left: ${(props) => props.showText && "12px"};
|
2021-10-04 14:22:06 +00:00
|
|
|
`}
|
|
|
|
|
2021-09-27 12:59:37 +00:00
|
|
|
@media ${mobile} {
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
2021-10-04 14:22:06 +00:00
|
|
|
|
2021-09-30 09:05:04 +00:00
|
|
|
${isMobileOnly &&
|
|
|
|
css`
|
|
|
|
margin-left: 0 !important;
|
|
|
|
`}
|
2021-09-27 12:59:37 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledIconBox = styled.div`
|
|
|
|
display: none;
|
|
|
|
align-items: center;
|
|
|
|
height: 28px;
|
|
|
|
|
|
|
|
@media ${tablet} {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media ${mobile} {
|
|
|
|
display: none;
|
|
|
|
}
|
2021-09-30 09:05:04 +00:00
|
|
|
|
|
|
|
${isTablet &&
|
|
|
|
css`
|
|
|
|
display: flex !important;
|
|
|
|
`}
|
|
|
|
|
|
|
|
${isMobileOnly &&
|
|
|
|
css`
|
|
|
|
display: none !important;
|
|
|
|
`}
|
2021-09-27 12:59:37 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledMenuIcon = styled(MenuIcon)`
|
|
|
|
display: block;
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
fill: #657077;
|
|
|
|
cursor: pointer;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const CatalogHeader = (props) => {
|
|
|
|
const { showText, children, onClick, ...rest } = props;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<StyledCatalogHeader showText={showText} {...rest}>
|
|
|
|
<StyledIconBox>
|
|
|
|
<StyledMenuIcon onClick={onClick} />
|
|
|
|
</StyledIconBox>
|
|
|
|
|
|
|
|
<StyledHeading showText={showText} color="#333333" size="large">
|
|
|
|
{children}
|
|
|
|
</StyledHeading>
|
|
|
|
</StyledCatalogHeader>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
CatalogHeader.propTypes = {
|
|
|
|
children: PropTypes.any,
|
|
|
|
showText: PropTypes.bool,
|
|
|
|
onClick: PropTypes.func,
|
|
|
|
};
|
|
|
|
|
2022-02-03 15:34:19 +00:00
|
|
|
CatalogHeader.displayName = "CatalogHeader";
|
2021-09-27 12:59:37 +00:00
|
|
|
|
|
|
|
export default React.memo(CatalogHeader);
|