2019-08-07 10:57:54 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
2020-05-29 06:25:28 +00:00
|
|
|
import styled, { css } from "styled-components";
|
2021-03-29 07:24:56 +00:00
|
|
|
//import equal from "fast-deep-equal/react";
|
|
|
|
//import { LayoutContextConsumer } from "studio/Layout/context";
|
2022-05-24 06:54:58 +00:00
|
|
|
import { isMobile, isMobileOnly, isDesktop } from "react-device-detect";
|
2021-02-20 14:31:58 +00:00
|
|
|
import { inject, observer } from "mobx-react";
|
2020-08-11 12:35:24 +00:00
|
|
|
|
2021-02-24 17:11:23 +00:00
|
|
|
import Scrollbar from "@appserver/components/scrollbar";
|
|
|
|
import DragAndDrop from "@appserver/components/drag-and-drop";
|
2022-04-29 16:33:57 +00:00
|
|
|
import {
|
|
|
|
tablet,
|
|
|
|
mobile,
|
|
|
|
desktop,
|
|
|
|
smallTablet,
|
|
|
|
} from "@appserver/components/utils/device";
|
2019-07-20 09:48:29 +00:00
|
|
|
|
2021-10-19 10:58:55 +00:00
|
|
|
const paddingStyles = css`
|
2022-04-29 16:33:57 +00:00
|
|
|
padding: ${(props) =>
|
2022-05-25 14:24:55 +00:00
|
|
|
props.settingsStudio ? "0 7px 16px 24px" : "19px 3px 16px 20px"};
|
2022-04-29 16:33:57 +00:00
|
|
|
|
2021-10-19 10:58:55 +00:00
|
|
|
@media ${tablet} {
|
2022-04-29 16:33:57 +00:00
|
|
|
padding: ${(props) =>
|
|
|
|
props.settingsStudio ? "0 0 16px 24px" : "19px 0 16px 24px"};
|
|
|
|
}
|
|
|
|
|
|
|
|
@media ${smallTablet} {
|
|
|
|
padding: ${(props) =>
|
|
|
|
props.settingsStudio ? "8px 0 16px 24px" : "19px 0 16px 24px"};
|
2021-10-19 10:58:55 +00:00
|
|
|
}
|
2022-04-29 16:33:57 +00:00
|
|
|
|
2022-02-02 11:24:35 +00:00
|
|
|
@media ${mobile} {
|
2022-04-29 16:33:57 +00:00
|
|
|
padding: ${(props) =>
|
|
|
|
props.settingsStudio ? "8px 0 16px 24px" : "19px 0 16px 24px"};
|
2022-02-02 11:24:35 +00:00
|
|
|
}
|
2022-04-29 16:33:57 +00:00
|
|
|
|
2022-02-18 09:56:42 +00:00
|
|
|
${isMobile &&
|
|
|
|
css`
|
2022-03-29 11:35:55 +00:00
|
|
|
padding: 0 0 16px 24px !important;
|
2022-02-18 09:56:42 +00:00
|
|
|
`};
|
2022-04-29 16:33:57 +00:00
|
|
|
|
2022-02-18 09:56:42 +00:00
|
|
|
${isMobileOnly &&
|
|
|
|
css`
|
2022-03-29 11:35:55 +00:00
|
|
|
padding: 0px 0 16px 24px !important;
|
2022-02-18 09:56:42 +00:00
|
|
|
`};
|
2021-10-19 10:58:55 +00:00
|
|
|
`;
|
2022-04-29 16:33:57 +00:00
|
|
|
|
2020-05-29 06:25:28 +00:00
|
|
|
const commonStyles = css`
|
2019-07-20 09:48:29 +00:00
|
|
|
flex-grow: 1;
|
2021-11-02 15:41:33 +00:00
|
|
|
|
|
|
|
${(props) => (props.isDesktop ? "height: auto" : "height: 100%")};
|
|
|
|
|
2021-10-19 09:18:07 +00:00
|
|
|
${(props) => !props.withScroll && `height: 100%;`}
|
2021-09-30 07:55:26 +00:00
|
|
|
border-left: none;
|
2022-04-01 09:41:48 +00:00
|
|
|
border-right: none;
|
|
|
|
border-top: none;
|
2020-03-11 14:18:47 +00:00
|
|
|
|
2021-10-19 09:18:07 +00:00
|
|
|
.section-wrapper {
|
2021-10-19 10:58:55 +00:00
|
|
|
${(props) =>
|
|
|
|
!props.withScroll &&
|
2022-04-21 07:29:49 +00:00
|
|
|
`display: flex; flex-direction: column; height: 100%; box-sizing:border-box`};
|
2021-10-19 10:58:55 +00:00
|
|
|
${(props) => !props.withScroll && paddingStyles}
|
2021-10-19 09:18:07 +00:00
|
|
|
}
|
|
|
|
|
2020-05-29 06:25:28 +00:00
|
|
|
.section-wrapper-content {
|
2021-10-19 10:58:55 +00:00
|
|
|
${paddingStyles}
|
|
|
|
flex: 1 0 auto;
|
|
|
|
outline: none;
|
2021-10-20 12:52:02 +00:00
|
|
|
${(props) =>
|
|
|
|
props.viewAs == "tile" &&
|
|
|
|
css`
|
|
|
|
padding-left: 20px;
|
|
|
|
`}
|
2020-05-29 06:25:28 +00:00
|
|
|
|
2021-10-19 10:58:55 +00:00
|
|
|
.section-wrapper {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
min-height: 100%;
|
|
|
|
}
|
2020-12-03 15:03:05 +00:00
|
|
|
|
2021-10-19 10:58:55 +00:00
|
|
|
.people-row-container,
|
|
|
|
.files-row-container {
|
|
|
|
margin-top: -22px;
|
2021-10-26 17:37:28 +00:00
|
|
|
|
2022-05-24 06:54:58 +00:00
|
|
|
${isDesktop &&
|
|
|
|
css`
|
|
|
|
margin-top: -17px;
|
|
|
|
`}
|
|
|
|
|
2021-10-26 17:37:28 +00:00
|
|
|
@media ${desktop} {
|
2022-05-25 14:24:55 +00:00
|
|
|
${(props) =>
|
|
|
|
props.viewAs === "row" &&
|
|
|
|
css`
|
|
|
|
margin-top: -15px;
|
|
|
|
margin-right: 4px;
|
|
|
|
`}
|
2021-10-26 17:37:28 +00:00
|
|
|
}
|
2021-02-24 17:11:23 +00:00
|
|
|
}
|
2020-03-11 14:18:47 +00:00
|
|
|
}
|
2019-12-25 14:51:38 +00:00
|
|
|
`;
|
|
|
|
|
2020-05-29 06:25:28 +00:00
|
|
|
const StyledSectionBody = styled.div`
|
2022-04-04 15:23:01 +00:00
|
|
|
max-width: 100vw !important;
|
2020-05-29 06:25:28 +00:00
|
|
|
${commonStyles}
|
2020-10-16 12:38:04 +00:00
|
|
|
${(props) =>
|
|
|
|
props.withScroll &&
|
|
|
|
`
|
2022-03-03 09:36:18 +00:00
|
|
|
margin-left: -20px;
|
|
|
|
|
|
|
|
@media ${tablet}{
|
|
|
|
margin-left: -24px;
|
|
|
|
}
|
2022-04-01 14:24:07 +00:00
|
|
|
|
|
|
|
${
|
|
|
|
isMobile &&
|
|
|
|
css`
|
|
|
|
margin-left: -24px;
|
|
|
|
`
|
|
|
|
}
|
2022-04-04 15:23:01 +00:00
|
|
|
`}
|
|
|
|
.additional-scroll-height {
|
2021-10-19 09:18:07 +00:00
|
|
|
${(props) =>
|
|
|
|
!props.withScroll &&
|
|
|
|
!props.pinned &&
|
|
|
|
` height: 64px;
|
|
|
|
|
|
|
|
`}
|
|
|
|
}
|
2020-05-29 06:25:28 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledDropZoneBody = styled(DragAndDrop)`
|
2022-04-04 15:23:01 +00:00
|
|
|
max-width: 100vw !important;
|
|
|
|
${commonStyles} .drag-and-drop {
|
2020-08-11 12:53:39 +00:00
|
|
|
user-select: none;
|
2020-05-29 06:25:28 +00:00
|
|
|
height: 100%;
|
|
|
|
}
|
2020-10-16 12:38:04 +00:00
|
|
|
|
|
|
|
${(props) =>
|
|
|
|
props.withScroll &&
|
|
|
|
`
|
2022-03-03 09:36:18 +00:00
|
|
|
margin-left: -20px;
|
|
|
|
|
|
|
|
@media ${tablet}{
|
|
|
|
margin-left: -24px;
|
|
|
|
}
|
2022-04-01 09:41:48 +00:00
|
|
|
|
|
|
|
${
|
|
|
|
isMobile &&
|
|
|
|
css`
|
|
|
|
margin-left: -24px;
|
|
|
|
`
|
|
|
|
}
|
2020-05-29 06:25:28 +00:00
|
|
|
`}
|
2019-07-20 09:48:29 +00:00
|
|
|
`;
|
|
|
|
|
2019-11-14 12:13:54 +00:00
|
|
|
const StyledSpacer = styled.div`
|
|
|
|
display: none;
|
|
|
|
min-height: 64px;
|
|
|
|
|
|
|
|
@media ${tablet} {
|
2021-12-14 11:45:40 +00:00
|
|
|
display: ${(props) =>
|
|
|
|
props.isHomepage || props.pinned ? "none" : "block"};
|
2019-11-14 12:13:54 +00:00
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2020-01-24 08:23:12 +00:00
|
|
|
class SectionBody extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-07-20 09:48:29 +00:00
|
|
|
|
2020-01-24 08:23:12 +00:00
|
|
|
this.focusRef = React.createRef();
|
|
|
|
}
|
2020-08-11 12:35:24 +00:00
|
|
|
|
2021-02-20 14:31:58 +00:00
|
|
|
// shouldComponentUpdate(nextProps) {
|
|
|
|
// return !equal(this.props, nextProps);
|
|
|
|
// }
|
2020-08-11 12:35:24 +00:00
|
|
|
|
2020-01-24 08:23:12 +00:00
|
|
|
componentDidMount() {
|
2021-10-21 10:19:28 +00:00
|
|
|
const { withScroll } = this.props;
|
2020-01-24 08:23:12 +00:00
|
|
|
if (!this.props.autoFocus) return;
|
2021-10-21 10:19:28 +00:00
|
|
|
if (withScroll) this.focusRef.current.focus();
|
2020-01-24 08:23:12 +00:00
|
|
|
}
|
|
|
|
|
2020-12-04 11:21:51 +00:00
|
|
|
componentWillUnmount() {
|
|
|
|
this.focusRef = null;
|
|
|
|
}
|
|
|
|
|
2020-01-24 08:23:12 +00:00
|
|
|
render() {
|
2022-03-16 12:22:48 +00:00
|
|
|
//console.log(" SectionBody render" );
|
2020-10-16 12:38:04 +00:00
|
|
|
const {
|
2020-08-11 12:35:24 +00:00
|
|
|
autoFocus,
|
|
|
|
children,
|
|
|
|
onDrop,
|
|
|
|
pinned,
|
|
|
|
uploadFiles,
|
|
|
|
viewAs,
|
2020-10-16 12:38:04 +00:00
|
|
|
withScroll,
|
2020-11-19 13:34:34 +00:00
|
|
|
isLoaded,
|
2021-11-02 15:41:33 +00:00
|
|
|
isDesktop,
|
2021-12-14 11:45:40 +00:00
|
|
|
isHomepage,
|
2022-04-29 16:33:57 +00:00
|
|
|
settingsStudio,
|
2020-08-11 12:35:24 +00:00
|
|
|
} = this.props;
|
2021-10-21 08:11:14 +00:00
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
const focusProps = autoFocus
|
|
|
|
? {
|
|
|
|
ref: this.focusRef,
|
2021-04-30 11:02:58 +00:00
|
|
|
tabIndex: -1,
|
2020-10-16 12:38:04 +00:00
|
|
|
}
|
|
|
|
: {};
|
2020-01-24 08:23:12 +00:00
|
|
|
|
2020-07-24 07:34:53 +00:00
|
|
|
return uploadFiles ? (
|
|
|
|
<StyledDropZoneBody
|
|
|
|
isDropZone
|
|
|
|
onDrop={onDrop}
|
|
|
|
withScroll={withScroll}
|
|
|
|
viewAs={viewAs}
|
2020-11-17 08:36:49 +00:00
|
|
|
pinned={pinned}
|
2020-11-19 13:34:34 +00:00
|
|
|
isLoaded={isLoaded}
|
2021-11-02 15:41:33 +00:00
|
|
|
isDesktop={isDesktop}
|
2022-04-29 16:33:57 +00:00
|
|
|
settingsStudio={settingsStudio}
|
2021-09-02 15:03:42 +00:00
|
|
|
className="section-body"
|
2020-07-24 07:34:53 +00:00
|
|
|
>
|
|
|
|
{withScroll ? (
|
2022-03-29 07:34:43 +00:00
|
|
|
!isMobileOnly ? (
|
2021-06-18 14:17:59 +00:00
|
|
|
<Scrollbar scrollclass="section-scroll" stype="mediumBlack">
|
2021-04-13 06:35:07 +00:00
|
|
|
<div className="section-wrapper">
|
|
|
|
<div className="section-wrapper-content" {...focusProps}>
|
|
|
|
{children}
|
|
|
|
<StyledSpacer pinned={pinned} />
|
2020-07-24 07:34:53 +00:00
|
|
|
</div>
|
2021-04-13 06:35:07 +00:00
|
|
|
</div>
|
2021-01-20 18:04:00 +00:00
|
|
|
</Scrollbar>
|
|
|
|
) : (
|
2021-03-29 07:24:56 +00:00
|
|
|
<div className="section-wrapper">
|
|
|
|
<div className="section-wrapper-content" {...focusProps}>
|
|
|
|
{children}
|
|
|
|
<StyledSpacer pinned={pinned} />
|
2021-03-29 07:08:50 +00:00
|
|
|
</div>
|
2021-03-29 07:24:56 +00:00
|
|
|
</div>
|
2021-01-20 18:04:00 +00:00
|
|
|
)
|
2020-07-24 07:34:53 +00:00
|
|
|
) : (
|
2021-04-13 06:35:07 +00:00
|
|
|
<div className="section-wrapper">
|
|
|
|
{children}
|
2021-10-19 10:41:52 +00:00
|
|
|
<StyledSpacer pinned={pinned} />
|
2021-04-13 06:35:07 +00:00
|
|
|
</div>
|
2020-10-16 12:38:04 +00:00
|
|
|
)}
|
2020-07-24 07:34:53 +00:00
|
|
|
</StyledDropZoneBody>
|
|
|
|
) : (
|
2020-11-17 08:36:49 +00:00
|
|
|
<StyledSectionBody
|
|
|
|
viewAs={viewAs}
|
|
|
|
withScroll={withScroll}
|
|
|
|
pinned={pinned}
|
2020-11-19 13:34:34 +00:00
|
|
|
isLoaded={isLoaded}
|
2021-11-03 08:59:54 +00:00
|
|
|
isDesktop={isDesktop}
|
2022-04-29 16:33:57 +00:00
|
|
|
settingsStudio={settingsStudio}
|
2020-11-17 08:36:49 +00:00
|
|
|
>
|
2020-10-16 12:38:04 +00:00
|
|
|
{withScroll ? (
|
2022-03-29 07:34:43 +00:00
|
|
|
!isMobileOnly ? (
|
2021-06-18 14:17:59 +00:00
|
|
|
<Scrollbar stype="mediumBlack">
|
2021-01-20 18:04:00 +00:00
|
|
|
<div className="section-wrapper">
|
|
|
|
<div className="section-wrapper-content" {...focusProps}>
|
|
|
|
{children}
|
2022-03-22 10:50:52 +00:00
|
|
|
<StyledSpacer pinned={pinned} className="settings-mobile" />
|
2021-01-20 18:04:00 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Scrollbar>
|
|
|
|
) : (
|
2020-10-16 12:38:04 +00:00
|
|
|
<div className="section-wrapper">
|
|
|
|
<div className="section-wrapper-content" {...focusProps}>
|
2020-03-11 14:18:47 +00:00
|
|
|
{children}
|
2022-03-22 10:26:35 +00:00
|
|
|
<StyledSpacer
|
|
|
|
pinned={pinned}
|
|
|
|
isHomepage={isHomepage}
|
|
|
|
className="settings-mobile"
|
|
|
|
/>
|
2020-03-11 14:18:47 +00:00
|
|
|
</div>
|
2020-10-16 12:38:04 +00:00
|
|
|
</div>
|
2021-01-20 18:04:00 +00:00
|
|
|
)
|
2020-10-16 12:38:04 +00:00
|
|
|
) : (
|
2021-10-21 09:29:25 +00:00
|
|
|
<div className="section-wrapper">{children}</div>
|
2020-10-16 12:38:04 +00:00
|
|
|
)}
|
|
|
|
</StyledSectionBody>
|
|
|
|
);
|
2020-01-24 08:23:12 +00:00
|
|
|
}
|
|
|
|
}
|
2019-07-20 09:48:29 +00:00
|
|
|
|
2019-09-10 12:41:52 +00:00
|
|
|
SectionBody.displayName = "SectionBody";
|
|
|
|
|
2019-08-07 10:57:54 +00:00
|
|
|
SectionBody.propTypes = {
|
2019-09-10 12:41:52 +00:00
|
|
|
withScroll: PropTypes.bool,
|
2020-01-24 08:23:12 +00:00
|
|
|
autoFocus: PropTypes.bool,
|
2019-11-14 12:13:54 +00:00
|
|
|
pinned: PropTypes.bool,
|
2020-05-29 06:25:28 +00:00
|
|
|
onDrop: PropTypes.func,
|
|
|
|
uploadFiles: PropTypes.bool,
|
2019-09-10 12:41:52 +00:00
|
|
|
children: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
2019-09-12 12:15:22 +00:00
|
|
|
PropTypes.node,
|
2020-10-16 12:38:04 +00:00
|
|
|
PropTypes.any,
|
2020-07-15 04:30:59 +00:00
|
|
|
]),
|
2020-10-16 12:38:04 +00:00
|
|
|
viewAs: PropTypes.string,
|
2020-11-19 14:53:12 +00:00
|
|
|
isLoaded: PropTypes.bool,
|
2021-12-14 11:45:40 +00:00
|
|
|
isHomepage: PropTypes.bool,
|
2022-04-29 16:33:57 +00:00
|
|
|
settingsStudio: PropTypes.bool,
|
2019-08-07 10:57:54 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
SectionBody.defaultProps = {
|
2020-01-24 08:23:12 +00:00
|
|
|
autoFocus: false,
|
2020-05-29 06:25:28 +00:00
|
|
|
pinned: false,
|
2020-07-15 04:30:59 +00:00
|
|
|
uploadFiles: false,
|
2020-10-16 12:38:04 +00:00
|
|
|
withScroll: true,
|
2021-12-14 11:45:40 +00:00
|
|
|
isHomepage: false,
|
2022-04-29 16:33:57 +00:00
|
|
|
settingsStudio: false,
|
2019-08-07 10:57:54 +00:00
|
|
|
};
|
|
|
|
|
2021-02-20 14:31:58 +00:00
|
|
|
export default inject(({ auth }) => {
|
2021-11-02 15:41:33 +00:00
|
|
|
const { settingsStore } = auth;
|
|
|
|
const { isDesktopClient: isDesktop } = settingsStore;
|
2020-11-19 14:53:12 +00:00
|
|
|
return {
|
2021-02-20 14:31:58 +00:00
|
|
|
isLoaded: auth.isLoaded,
|
2021-11-02 15:41:33 +00:00
|
|
|
isDesktop,
|
2020-11-19 14:53:12 +00:00
|
|
|
};
|
2021-02-20 14:31:58 +00:00
|
|
|
})(observer(SectionBody));
|