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";
|
2022-08-01 12:37:33 +00:00
|
|
|
//import classnames from "classnames";
|
2020-11-19 14:53:12 +00:00
|
|
|
import PropTypes from "prop-types";
|
2022-08-01 12:37:33 +00:00
|
|
|
//import { LayoutContextConsumer } from "client/Layout/context";
|
2022-03-03 07:04:54 +00:00
|
|
|
import { isMobile, isMobileOnly } from "react-device-detect";
|
2022-08-01 12:37:33 +00:00
|
|
|
import { tablet, mobile } from "@docspace/components/utils/device";
|
2022-07-22 19:01:25 +00:00
|
|
|
import NoUserSelect from "@docspace/components/utils/commonStyles";
|
2022-03-18 10:45:26 +00:00
|
|
|
|
2022-07-22 19:01:25 +00:00
|
|
|
import Base from "@docspace/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-04-07 14:27:48 +00:00
|
|
|
|
|
|
|
padding-right: 20px;
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
2021-08-23 10:50:21 +00:00
|
|
|
${NoUserSelect}
|
2022-03-23 11:09:31 +00:00
|
|
|
|
2022-04-04 11:57:22 +00:00
|
|
|
display: grid;
|
|
|
|
align-items: center;
|
|
|
|
|
2022-04-07 14:27:48 +00:00
|
|
|
width: 100%;
|
|
|
|
max-width: 100%;
|
2022-03-31 11:02:00 +00:00
|
|
|
|
2022-05-06 13:26:33 +00:00
|
|
|
.header-container {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
2019-12-23 13:41:52 +00:00
|
|
|
@media ${tablet} {
|
2022-04-07 14:27:48 +00:00
|
|
|
padding-right: 16px;
|
|
|
|
margin-right: 0px;
|
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-04-07 14:27:48 +00:00
|
|
|
padding-right: 0 !important;
|
|
|
|
margin-right: -16px !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} {
|
2022-04-07 14:27:48 +00:00
|
|
|
margin-right: 0px;
|
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-04-07 14:27:48 +00:00
|
|
|
width: 100vw !important;
|
|
|
|
max-width: 100vw !important;
|
|
|
|
|
|
|
|
padding-right: 16px !important;
|
|
|
|
|
2022-04-29 16:24:37 +00:00
|
|
|
margin-bottom: ${(props) =>
|
|
|
|
props.settingsStudio ? "8px !important" : "0"};
|
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) => {
|
2022-04-29 16:24:37 +00:00
|
|
|
const { viewAs, settingsStudio = false, className, ...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}
|
2022-04-29 16:24:37 +00:00
|
|
|
settingsStudio={settingsStudio}
|
2022-03-31 11:02:00 +00:00
|
|
|
{...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,
|
2022-04-29 16:24:37 +00:00
|
|
|
settingsStudio: PropTypes.bool,
|
2021-01-26 15:21:50 +00:00
|
|
|
};
|
2019-09-12 12:15:22 +00:00
|
|
|
export default SectionHeader;
|