Web: Common: added dropzone to PageLayout, added DragAndDrop export

web/ASC.Web.Common/src/components/PageLayout/index.js

@@ -148,7 +148,7 @@ class PageLayoutComponent extends React.PureComponent {
   };
 
   render() {
-    const { showProgressBar, progressBarValue, progressBarDropDownContent, withBodyScroll, withBodyAutoFocus, progressBarLabel } = this.props;
+    const { showProgressBar, progressBarValue, progressBarDropDownContent, withBodyScroll, withBodyAutoFocus, progressBarLabel, onDrop, uploadFiles } = this.props;
     return (
       <>
         {this.state.isBackdropAvailable && (
@@ -197,7 +197,9 @@ class PageLayoutComponent extends React.PureComponent {
             )}
             {this.state.isSectionBodyAvailable && (
               <>
-                <SectionBody 
+                <SectionBody
+                  onDrop={onDrop}
+                  uploadFiles={uploadFiles}
                   withScroll={withBodyScroll}
                   autoFocus={withBodyAutoFocus}
                   pinned={this.state.isArticlePinned}
@@ -282,7 +284,9 @@ PageLayoutComponent.propTypes = {
   showProgressBar: PropTypes.bool,
   progressBarValue: PropTypes.number,
   progressBarDropDownContent: PropTypes.any,
-  progressBarLabel: PropTypes.string
+  progressBarLabel: PropTypes.string,
+  onDrop: PropTypes.func,
+  uploadFiles: PropTypes.bool
 };
 
 PageLayoutComponent.defaultProps = {

web/ASC.Web.Common/src/components/PageLayout/sub-components/section-body.js

@@ -1,19 +1,15 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { utils, Scrollbar } from "asc-web-components";
+import DragAndDrop from "../../DragAndDrop";
 const { tablet } = utils.device;
 
-const StyledSectionBody = styled.div`
-  ${props => props.displayBorder && `outline: 1px dotted;`}
+const commonStyles = css`
   flex-grow: 1;
   height: 100%;
-  
-  ${props => props.withScroll && `
-    margin-left: -24px;
-  `}
 
-  .sectionWrapper {
+  .section-wrapper-content {
     flex: 1 0 auto;
     padding: 16px 8px 16px 24px;
     outline: none;
@@ -21,13 +17,35 @@ const StyledSectionBody = styled.div`
     @media ${tablet} {
       padding: 16px 0 16px 24px;
     }
+
+    .section-wrapper {
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+    }
   }
 `;
 
-const StyledSectionWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
+const StyledSectionBody = styled.div`
+  ${props => props.displayBorder && `outline: 1px dotted;`}
+  ${commonStyles}
+  
+  ${props => props.withScroll && `
+    margin-left: -24px;
+  `}
+`;
+
+const StyledDropZoneBody = styled(DragAndDrop)`
+  ${props => props.displayBorder && `outline: 1px dotted;`}
+  ${commonStyles}
+
+  .drag-and-drop {
+    height: 100%;
+  }
+  
+  ${props => props.withScroll && `
+    margin-left: -24px;
+  `}
 `;
 
 const StyledSpacer = styled.div`
@@ -54,31 +72,42 @@ class SectionBody extends React.Component {
 
   render() {
     //console.log("PageLayout SectionBody render");
-    const { children, withScroll, autoFocus, pinned } = this.props;
+    const { children, withScroll, autoFocus, pinned, onDrop, uploadFiles } = this.props;
 
     const focusProps = autoFocus ? {
       ref: this.focusRef,
       tabIndex: 1
     } : {};
 
-    return (
-      <StyledSectionBody withScroll={withScroll}>
-        {withScroll ? (
+    const renderBody = () => {
+      return(
+        withScroll ? (
           <Scrollbar stype="mediumBlack">
-            <StyledSectionWrapper>
-              <div className="sectionWrapper" {...focusProps}>
+            <div className="section-wrapper">
+              <div className="section-wrapper-content" {...focusProps}>
                 {children}
-                <StyledSpacer pinned={pinned}/>
+                <StyledSpacer pinned={pinned} />
               </div>
-            </StyledSectionWrapper>
+            </div>
           </Scrollbar>
         ) : (
-          <StyledSectionWrapper>
+          <div className="section-wrapper">
             {children}
-            <StyledSpacer pinned={pinned}/>
-          </StyledSectionWrapper>
-        )}
-      </StyledSectionBody>
+            <StyledSpacer pinned={pinned} />
+          </div>
+        ))
+    };
+
+    return (
+      uploadFiles ? (
+        <StyledDropZoneBody onDrop={onDrop} withScroll={withScroll}>
+          {renderBody()}
+        </StyledDropZoneBody>
+      ) : (
+        <StyledSectionBody>
+          {renderBody()}
+        </StyledSectionBody>
+      )
     );
   }
 }
@@ -89,6 +118,8 @@ SectionBody.propTypes = {
   withScroll: PropTypes.bool,
   autoFocus: PropTypes.bool,
   pinned: PropTypes.bool,
+  onDrop: PropTypes.func,
+  uploadFiles: PropTypes.bool,
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
@@ -99,7 +130,8 @@ SectionBody.propTypes = {
 SectionBody.defaultProps = {
   withScroll: true,
   autoFocus: false,
-  pinned: false
+  pinned: false,
+  uploadFiles: false
 };
 
 export default SectionBody;

web/ASC.Web.Common/src/components/index.js

@@ -13,4 +13,5 @@ export { default as ProfileMenu } from './ProfileMenu';
 export { default as ErrorContainer } from './ErrorContainer';
 export { default as ErrorBoundary } from './ErrorBoundary';
 export { default as FilterInput } from './FilterInput';
-export { default as MediaViewer } from './MediaViewer';
+export { default as MediaViewer } from './MediaViewer';
+export { default as DragAndDrop } from './DragAndDrop';