Web: Common: added progress-bar to PageLayout

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

@@ -148,6 +148,7 @@ class PageLayoutComponent extends React.PureComponent {
   };
 
   render() {
+    const { showProgressBar, progressBarMaxValue, progressBarValue, progressBarDropDownContent, withBodyScroll, withBodyAutoFocus, progressBarLabel } = this.props;
     return (
       <>
         {this.state.isBackdropAvailable && (
@@ -195,7 +196,16 @@ class PageLayoutComponent extends React.PureComponent {
               <SectionFilter className="section-header_filter">{this.state.sectionFilterContent}</SectionFilter>
             )}
             {this.state.isSectionBodyAvailable && (
-              <SectionBody withScroll={this.props.withBodyScroll} autoFocus={this.props.withBodyAutoFocus} pinned={this.state.isArticlePinned}>
+              <SectionBody 
+                showProgressBar={showProgressBar}
+                progressBarMaxValue={progressBarMaxValue}
+                progressBarValue={progressBarValue}
+                progressBarLabel={progressBarLabel}
+                progressBarDropDownContent={progressBarDropDownContent}
+                withScroll={withBodyScroll}
+                autoFocus={withBodyAutoFocus}
+                pinned={this.state.isArticlePinned}
+              >
                 {this.state.isSectionFilterAvailable && (
               <SectionFilter className="section-body_filter">{this.state.sectionFilterContent}</SectionFilter>
             )}
@@ -263,6 +273,12 @@ PageLayoutComponent.propTypes = {
   withBodyScroll: PropTypes.bool,
   withBodyAutoFocus: PropTypes.bool,
   t: PropTypes.func,
+
+  showProgressBar: PropTypes.bool,
+  progressBarMaxValue: PropTypes.number,
+  progressBarValue: PropTypes.number,
+  progressBarDropDownContent: PropTypes.any,
+  progressBarLabel: PropTypes.string
 };
 
 PageLayoutComponent.defaultProps = {

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

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import { utils, Scrollbar } from "asc-web-components";
+import { utils, Scrollbar, ProgressBar } from "asc-web-components";
 const { tablet } = utils.device;
 
 const StyledSectionBody = styled.div`
@@ -12,14 +12,26 @@ const StyledSectionBody = styled.div`
   ${props => props.withScroll && `
     margin-left: -24px;
   `}
+
+  .sectionWrapper {
+    flex: 1 0 auto;
+    padding: 16px 8px 16px 24px;
+    outline: none;
+
+    @media ${tablet} {
+      padding: 16px 0 16px 24px;
+    }
+  }
 `;
 
 const StyledSectionWrapper = styled.div`
-  padding: 16px 8px 16px 24px;
-  outline: none;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
 
-  @media ${tablet} {
-    padding: 16px 0 16px 24px;
+  .layout-progress-bar {
+    flex: 0 0 auto;
+    margin-right: -16px;
   }
 `;
 
@@ -37,6 +49,7 @@ class SectionBody extends React.Component {
     super(props);
 
     this.focusRef = React.createRef();
+    this.ref = React.createRef();
   }
   
   componentDidMount() {
@@ -47,20 +60,34 @@ class SectionBody extends React.Component {
 
   render() {
     //console.log("PageLayout SectionBody render");
-    const { children, withScroll, autoFocus, pinned } = this.props;
+    const { children, withScroll, autoFocus, pinned, showProgressBar, progressBarMaxValue, progressBarValue, progressBarDropDownContent, progressBarLabel } = this.props;
 
     const focusProps = autoFocus ? {
       ref: this.focusRef,
       tabIndex: 1
     } : {};
 
+    const width = this.ref.current && this.ref.current.offsetWidth;
+
     return (
-      <StyledSectionBody withScroll={withScroll}>
+      <StyledSectionBody ref={this.ref} withScroll={withScroll}>
         {withScroll ? (
           <Scrollbar stype="mediumBlack">
-            <StyledSectionWrapper className="sectionWrapper" {...focusProps}>
-              {children}
-              <StyledSpacer pinned={pinned}/>
+            <StyledSectionWrapper>
+              <div className="sectionWrapper" {...focusProps}>
+                {children}
+                <StyledSpacer pinned={pinned}/>
+              </div>
+              {showProgressBar && (
+                <ProgressBar
+                  className="layout-progress-bar"
+                  label={progressBarLabel}
+                  value={progressBarValue}
+                  width={width}
+                  maxValue={progressBarMaxValue}
+                  dropDownContent={progressBarDropDownContent}
+                />
+              )}
             </StyledSectionWrapper>
           </Scrollbar>
         ) : (
@@ -80,6 +107,11 @@ SectionBody.propTypes = {
   withScroll: PropTypes.bool,
   autoFocus: PropTypes.bool,
   pinned: PropTypes.bool,
+  showProgressBar: PropTypes.bool,
+  progressBarMaxValue: PropTypes.number,
+  progressBarValue: PropTypes.number,
+  progressBarLabel: PropTypes.string,
+  progressBarDropDownContent: PropTypes.any,
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,