2019-09-12 12:15:22 +00:00
|
|
|
import React from "react";
|
2020-11-19 13:34:34 +00:00
|
|
|
import styled, { css } from "styled-components";
|
2020-10-27 08:16:59 +00:00
|
|
|
import classnames from "classnames";
|
2020-11-19 14:53:12 +00:00
|
|
|
import PropTypes from "prop-types";
|
2021-03-03 09:47:28 +00:00
|
|
|
import { LayoutContextConsumer } from "studio/Layout/context";
|
2022-03-03 07:04:54 +00:00
|
|
|
import { isMobile, isMobileOnly } from "react-device-detect";
|
|
|
|
import { tablet, desktop, mobile } from "@appserver/components/utils/device";
|
2021-08-23 10:50:21 +00:00
|
|
|
import NoUserSelect from "@appserver/components/utils/commonStyles";
|
2022-03-18 10:45:26 +00:00
|
|
|
|
2022-01-28 13:44:58 +00:00
|
|
|
import Base from "@appserver/components/themes/base";
|
2022-02-03 12:59:26 +00:00
|
|
|
|
2019-07-20 09:48:29 +00:00
|
|
|
const StyledSectionHeader = styled.div`
|
2021-10-15 07:07:15 +00:00
|
|
|
position: relative;
|
2022-03-03 07:04:54 +00:00
|
|
|
height: 53px;
|
2022-03-31 11:02:00 +00:00
|
|
|
min-height: 53px;
|
2022-03-03 07:04:54 +00:00
|
|
|
margin-right: 20px;
|
2021-08-23 10:50:21 +00:00
|
|
|
${NoUserSelect}
|
2022-03-23 11:09:31 +00:00
|
|
|
|
2022-03-31 11:02:00 +00:00
|
|
|
width: calc(100vw - 296px);
|
|
|
|
max-width: calc(100vw - 296px);
|
|
|
|
|
2019-12-23 13:41:52 +00:00
|
|
|
@media ${tablet} {
|
2022-03-31 11:02:00 +00:00
|
|
|
width: ${(props) =>
|
|
|
|
props.showText ? "calc(100vw - 272px)" : "calc(100vw - 84px)"};
|
|
|
|
max-width: ${(props) =>
|
|
|
|
props.showText ? "calc(100vw - 272px)" : "calc(100vw - 84px)"};
|
2022-03-03 07:04:54 +00:00
|
|
|
height: 61px;
|
2022-03-31 11:02:00 +00:00
|
|
|
min-height: 61px;
|
2022-03-29 11:35:55 +00:00
|
|
|
margin-right: 0px !important;
|
2019-12-23 13:41:52 +00:00
|
|
|
}
|
2020-01-15 12:58:57 +00:00
|
|
|
|
2021-05-18 14:59:34 +00:00
|
|
|
${isMobile &&
|
|
|
|
css`
|
2022-03-31 11:02:00 +00:00
|
|
|
width: ${(props) =>
|
|
|
|
props.showText ? "calc(100vw - 272px)" : "calc(100vw - 84px)"};
|
|
|
|
max-width: ${(props) =>
|
|
|
|
props.showText ? "calc(100vw - 272px)" : "calc(100vw - 84px)"};
|
|
|
|
height: 61px;
|
|
|
|
min-height: 61px;
|
2022-03-03 07:04:54 +00:00
|
|
|
margin-right: 0px !important;
|
2021-05-18 14:59:34 +00:00
|
|
|
`}
|
2021-01-20 18:04:00 +00:00
|
|
|
|
2022-03-31 11:02:00 +00:00
|
|
|
@media ${mobile} {
|
|
|
|
width: calc(100vw - 32px) !important;
|
|
|
|
max-width: calc(100vw - 32px) !important;
|
|
|
|
height: 61px;
|
|
|
|
min-height: 61px;
|
|
|
|
margin-right: 0px !important;
|
2021-03-22 15:11:39 +00:00
|
|
|
}
|
2021-10-01 13:51:28 +00:00
|
|
|
|
2022-03-31 11:02:00 +00:00
|
|
|
${isMobileOnly &&
|
2021-05-18 14:59:34 +00:00
|
|
|
css`
|
2022-03-31 11:02:00 +00:00
|
|
|
width: calc(100vw - 32px) !important;
|
|
|
|
max-width: calc(100vw - 32px) !important;
|
|
|
|
height: 61px;
|
|
|
|
min-height: 61px;
|
|
|
|
margin-right: 0px !important;
|
2021-05-18 14:59:34 +00:00
|
|
|
`}
|
2019-07-20 09:48:29 +00:00
|
|
|
`;
|
|
|
|
|
2021-12-24 16:50:45 +00:00
|
|
|
StyledSectionHeader.defaultProps = { theme: Base };
|
|
|
|
|
2022-03-28 12:28:57 +00:00
|
|
|
const SectionHeader = (props) => {
|
|
|
|
const {
|
|
|
|
isArticlePinned,
|
|
|
|
isHeaderVisible,
|
|
|
|
viewAs,
|
|
|
|
maintenanceExist,
|
|
|
|
snackbarExist,
|
2022-03-31 11:02:00 +00:00
|
|
|
className,
|
2022-03-28 12:28:57 +00:00
|
|
|
...rest
|
|
|
|
} = props;
|
2020-11-17 08:36:49 +00:00
|
|
|
|
2022-03-28 12:28:57 +00:00
|
|
|
return (
|
2022-03-31 11:02:00 +00:00
|
|
|
<StyledSectionHeader
|
|
|
|
className={`section-header ${className}`}
|
|
|
|
viewAs={viewAs}
|
|
|
|
{...rest}
|
|
|
|
/>
|
2022-03-28 12:28:57 +00:00
|
|
|
);
|
|
|
|
};
|
2019-07-20 09:48:29 +00:00
|
|
|
|
2019-09-12 12:15:22 +00:00
|
|
|
SectionHeader.displayName = "SectionHeader";
|
|
|
|
|
2021-01-26 15:21:50 +00:00
|
|
|
SectionHeader.propTypes = {
|
|
|
|
isArticlePinned: PropTypes.bool,
|
|
|
|
isHeaderVisible: PropTypes.bool,
|
|
|
|
};
|
2019-09-12 12:15:22 +00:00
|
|
|
export default SectionHeader;
|