web: People: SectionHeaderContent optimization

products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { GroupButtonsMenu, DropDownItem, Text } from 'asc-web-components';
 
 const getPeopleItems = (onSelect) => [
@@ -45,21 +45,24 @@ const getPeopleItems = (onSelect) => [
     }
   ];
 
-const SectionHeaderContent = ({
+const SectionHeaderContent = React.memo(({
     isHeaderVisible,
     isHeaderIndeterminate,
     isHeaderChecked,
     onCheck,
     onSelect,
     onClose
-  }) =>
+  }) => {
+    console.log("SectionHeaderContent render");
+    const menuItems = getPeopleItems(onSelect);
+    return (
     isHeaderVisible ? (
       <div style={{ margin: "0 -16px" }}>
         <GroupButtonsMenu
           checked={isHeaderChecked}
           isIndeterminate={isHeaderIndeterminate}
           onChange={onCheck}
-          menuItems={getPeopleItems(onSelect)}
+          menuItems={menuItems}
           visible={isHeaderVisible}
           moreLabel="More"
           closeTitle="Close"
@@ -69,6 +72,8 @@ const SectionHeaderContent = ({
       </div>
     ) : (
       <Text.ContentHeader>People</Text.ContentHeader>
+    )
     );
+  });
 
 export default SectionHeaderContent;

products/ASC.People/Client/src/components/pages/Home/index.js

@@ -99,8 +99,27 @@ class Home extends React.Component {
     });
   };
 
-  render() {
+  onSectionHeaderContentCheck = (checked) => {
+      this.props.setSelected(checked ? "all" : "none");
+  }
+
+  onSectionHeaderContentSelect = (selected) => {
+    this.props.setSelected(selected);
+  }
+
+  onClose = () => {
     const { selection, setSelected } = this.props;
+
+    if (!selection.length) {
+      setSelected("none");
+      this.setState({ isHeaderVisible: false });
+    } else {
+      setSelected("close");
+    }
+  }
+
+  render() {
+    
     const {
       isHeaderVisible,
       isHeaderIndeterminate,
@@ -137,25 +156,9 @@ class Home extends React.Component {
               isHeaderVisible={isHeaderVisible}
               isHeaderIndeterminate={isHeaderIndeterminate}
               isHeaderChecked={isHeaderChecked}
-              onCheck={checked => {
-                /*console.log(`SectionHeaderContent onCheck 
-                selection.length=${selection.length}`);*/
-                setSelected(checked ? "all" : "none");
-              }}
-              onSelect={selected => {
-                /*console.log(`SectionHeaderContent onSelect 
-              selected=${selected}`);*/
-                setSelected(selected);
-              }}
-              onClose={() => {
-                /*console.log('SectionHeaderContent onClose');*/
-                if (!selection.length) {
-                  setSelected("none");
-                  this.setState({ isHeaderVisible: false });
-                } else {
-                  setSelected("close");
-                }
-              }}
+              onCheck={this.onSectionHeaderContentCheck}
+              onSelect={this.onSectionHeaderContentSelect}
+              onClose={this.onClose}
             />
           </NPL.SectionHeader>
           <NPL.SectionFilter>