optimize headers

Author: Ilaiwi

package.json

@@ -95,7 +95,8 @@
     "classnames": "^2.2.6",
     "create-react-context": "^0.2.2",
     "element-resize-detector": "^1.1.12",
-    "lodash.isequal": "^4.5.0"
+    "lodash.isequal": "^4.5.0",
+    "memoize-one": "^5.1.1"
   },
   "peerDependencies": {
     "interactjs": "^1.3.4",

src/lib/headers/CustomHeader.js

@@ -193,7 +193,6 @@ export class CustomHeader extends React.Component {
       data: headerData
     }
   }
-
   render() {
     const props = this.getStateAndHelpers()
     const Renderer = this.props.children

src/lib/headers/DateHeader.js

@@ -5,6 +5,7 @@ import CustomHeader from './CustomHeader'
 import { getNextUnit } from '../utility/calendar'
 import { defaultHeaderFormats } from '../default-config'
 import Interval from './Interval'
+import memoize from 'memoize-one'
 
 class DateHeader extends React.Component {
   static propTypes = {
@@ -31,14 +32,14 @@ class DateHeader extends React.Component {
     return this.props.timelineUnit
   }
 
-  getRootStyle = () => {
+  getRootStyle = memoize(style => {
     return {
       height: 30,
-      ...this.props.style
+      ...style
     }
-  }
+  })
 
-  getLabelFormat(interval, unit, labelWidth) {
+  getLabelFormat = (interval, unit, labelWidth) => {
     const { labelFormat } = this.props
     if (typeof labelFormat === 'string') {
       const startTime = interval[0]
@@ -50,50 +51,43 @@ class DateHeader extends React.Component {
     }
   }
 
+  getHeaderData = memoize(
+    (
+      intervalRenderer,
+      style,
+      className,
+      getLabelFormat,
+      unitProp,
+      headerData
+    ) => {
+      return {
+        intervalRenderer,
+        style,
+        className,
+        getLabelFormat,
+        unitProp,
+        headerData
+      }
+    }
+  )
+
   render() {
     const unit = this.getHeaderUnit()
     const { headerData, height } = this.props
     return (
-      <CustomHeader unit={unit} height={height} headerData={headerData}>
-        {({
-          headerContext: { intervals },
-          getRootProps,
-          getIntervalProps,
-          showPeriod,
-          data
-        }) => {
-          const unit = this.getHeaderUnit()
-
-          return (
-            <div
-              data-testid={`dateHeader`}
-              className={this.props.className}
-              {...getRootProps({ style: this.getRootStyle() })}
-            >
-              {intervals.map(interval => {
-                const intervalText = this.getLabelFormat(
-                  [interval.startTime, interval.endTime],
-                  unit,
-                  interval.labelWidth
-                )
-                return (
-                  <Interval
-                    key={`label-${interval.startTime.valueOf()}`}
-                    unit={unit}
-                    interval={interval}
-                    showPeriod={showPeriod}
-                    intervalText={intervalText}
-                    primaryHeader={this.props.unit === 'primaryHeader'}
-                    getIntervalProps={getIntervalProps}
-                    intervalRenderer={this.props.intervalRenderer}
-                    headerData={data}
-                  />
-                )
-              })}
-            </div>
-          )
-        }}
-      </CustomHeader>
+      <CustomHeader
+        unit={unit}
+        height={height}
+        headerData={this.getHeaderData(
+          this.props.intervalRenderer,
+          this.getRootStyle(this.props.style),
+          this.props.className,
+          this.getLabelFormat,
+          this.props.unit,
+          this.props.headerData
+        )}
+        children={Header}
+      />
     )
   }
 }
@@ -116,6 +110,7 @@ class DateHeaderWrapper extends React.Component {
   static defaultProps = {
     labelFormat: formatLabel
   }
+
   render() {
     const {
       unit,
@@ -148,6 +143,50 @@ class DateHeaderWrapper extends React.Component {
   }
 }
 
+function Header({
+  headerContext: { intervals, unit },
+  getRootProps,
+  getIntervalProps,
+  showPeriod,
+  data: {
+    style,
+    intervalRenderer,
+    className,
+    getLabelFormat,
+    unitProp,
+    ...restData
+  }
+}) {
+  return (
+    <div
+      data-testid={`dateHeader`}
+      className={className}
+      {...getRootProps({ style })}
+    >
+      {intervals.map(interval => {
+        const intervalText = getLabelFormat(
+          [interval.startTime, interval.endTime],
+          unit,
+          interval.labelWidth
+        )
+        return (
+          <Interval
+            key={`label-${interval.startTime.valueOf()}`}
+            unit={unit}
+            interval={interval}
+            showPeriod={showPeriod}
+            intervalText={intervalText}
+            primaryHeader={unitProp === 'primaryHeader'}
+            getIntervalProps={getIntervalProps}
+            intervalRenderer={intervalRenderer}
+            headerData={restData}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
 function formatLabel(
   [timeStart, timeEnd],
   unit,

src/lib/headers/Interval.js

@@ -36,7 +36,6 @@ class Interval extends React.PureComponent {
       onClick: composeEvents(this.onIntervalClick, props.onClick)
     }
   }
-
   render() {
     const { intervalText, interval, intervalRenderer, headerData } = this.props
     const Renderer = intervalRenderer

src/lib/headers/SidebarHeader.js

@@ -32,7 +32,6 @@ class SidebarHeader extends React.PureComponent {
       data: this.props.headerData
     }
   }
-
   render() {
     const props = this.getStateAndHelpers()
     const Renderer = this.props.children

src/lib/headers/TimelineHeaders.js

@@ -56,7 +56,6 @@ class TimelineHeaders extends React.Component {
     if (child.type === undefined) return false
     return child.type.secretKey === SidebarHeader.secretKey
   }
-
   render() {
     let rightSidebarHeader
     let leftSidebarHeader

yarn.lock

@@ -5195,6 +5195,11 @@ mem@^4.0.0:
     mimic-fn "^2.0.0"
     p-is-promise "^2.0.0"
 
+memoize-one@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
+  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
+
 memory-fs@^0.4.0, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"