web: Components: AdvancedSelector: Added StyledContainer for ADSelectorFooter

web/ASC.Web.Components/src/components/advanced-selector/sub-components/footer.js

@@ -1,12 +1,34 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Button from "../../button";
+import styled from "styled-components";
+
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/prop-types */
+const Container = ({
+  buttonLabel,
+  isDisabled,
+  onClick,
+  isMultiSelect,
+  ...props
+}) => <div {...props} />;
+/* eslint-enable react/prop-types */
+/* eslint-enable no-unused-vars */
+
+const StyledContainer = styled(Container)`
+    border-top: 1px solid #eceef1;
+    display: ${props => props.isMultiSelect || !props.selectedOptions || !props.selectedOptions.length ? 'none' : 'flex'};
+
+    .add_members_btn {
+      margin: 16px;
+    }
+`;
 
 const ADSelectorFooter = props => {
   const { buttonLabel, isDisabled, onClick } = props;
 
   return (
-    <div className="button_container">
+    <StyledContainer {...props}>
       <Button
         className="add_members_btn"
         primary={true}
@@ -16,13 +38,15 @@ const ADSelectorFooter = props => {
         isDisabled={isDisabled}
         onClick={onClick}
       />
-    </div>
+    </StyledContainer>
   );
 };
 
 ADSelectorFooter.propTypes = {
   buttonLabel: PropTypes.string,
   isDisabled: PropTypes.bool,
+  isMultiSelect: PropTypes.bool,
+  selectedOptions: PropTypes.array, 
   onClick: PropTypes.func
 };
 

web/ASC.Web.Components/src/components/advanced-selector/sub-components/selector.js

@@ -181,15 +181,6 @@ const StyledContainer = styled(Container)`
       }
     }
   }
-
-  .button_container {
-    border-top: 1px solid #eceef1;
-    display: flex;
-
-    .add_members_btn {
-      margin: 16px;
-    }
-  }
 `;
 
 class ADSelector extends React.Component {
@@ -482,16 +473,15 @@ class ADSelector extends React.Component {
                 </div>
               )}
           </div>
-          {isMultiSelect && (
-            <ADSelectorFooter
-              buttonLabel={buttonLabel}
-              isDisabled={
-                !this.state.selectedOptions ||
-                !this.state.selectedOptions.length
-              }
-              onClick={this.onButtonClick}
-            />
-          )}
+          <ADSelectorFooter
+            buttonLabel={buttonLabel}
+            isDisabled={
+              !this.state.selectedOptions ||
+              !this.state.selectedOptions.length
+            }
+            isMultiSelect={isMultiSelect}
+            onClick={this.onButtonClick}
+          />
         </div>
       </StyledContainer>
     );