Merge pull request #8 from knightburton/feat/v3-prepare

feat: v3 - memoize the main components
knightburton · Oct 12, 2023 · 73d03bc · 73d03bc
2 parents 32bbba0 + a75f3c0
commit 73d03bc
Show file tree

Hide file tree

Showing 7 changed files with 205 additions and 183 deletions.
diff --git a/src/components/Body.tsx b/src/components/Body.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo, useMemo } from 'react';
 import { SlotComponentProps, VisibilityMatrix } from '../types';
 import classnames from '../utils/classnames';
 import styles from './styles.less';
@@ -31,49 +31,51 @@ export type BodyPrivateProps = {
   };
 };
 
-const Body = ({
-  numberOfWeeks,
-  numberOfTodayWeek,
-  startRenderOnCurrentWeek,
-  locale,
-  numberOfRowsPreRender,
-  startDate,
-  updateVisibilityMatrix,
-  visibilityMatrix,
-  slots,
-  slotProps,
-}: BodyPrivateProps): JSX.Element => {
-  const RootSlot = slots?.root || 'div';
-  const rootProps = { ...(slotProps?.root || {}), className: classnames(styles.body, slotProps?.root?.className) };
+const Body = memo(
+  ({
+    numberOfWeeks,
+    numberOfTodayWeek,
+    startRenderOnCurrentWeek,
+    locale,
+    numberOfRowsPreRender,
+    startDate,
+    updateVisibilityMatrix,
+    visibilityMatrix,
+    slots,
+    slotProps,
+  }: BodyPrivateProps): JSX.Element => {
+    const RootSlot = useMemo(() => slots?.root || 'div', [slots]);
+    const rootProps = useMemo(() => ({ ...(slotProps?.root || {}), className: classnames(styles.body, slotProps?.root?.className) }), [slotProps]);
 
-  return (
-    <RootSlot {...rootProps}>
-      {!!startDate &&
-        Array.from(Array(numberOfWeeks + 1).keys()).map(numberOfWeek => (
-          <BodyRow
-            key={numberOfWeek}
-            numberOfWeek={numberOfWeek}
-            numberOfTodayWeek={numberOfTodayWeek}
-            startRenderOnCurrentWeek={startRenderOnCurrentWeek}
-            locale={locale}
-            numberOfRowsPreRender={numberOfRowsPreRender}
-            startDate={startDate}
-            updateVisibilityMatrix={updateVisibilityMatrix}
-            visibilityMatrix={visibilityMatrix}
-            slots={{
-              root: slots?.row,
-              cell: slots?.cell,
-              cellContent: slots?.cellContent,
-            }}
-            slotProps={{
-              root: slotProps?.row,
-              cell: slotProps?.cell,
-              cellContent: slotProps?.cellContent,
-            }}
-          />
-        ))}
-    </RootSlot>
-  );
-};
+    return (
+      <RootSlot {...rootProps}>
+        {!!startDate &&
+          Array.from(Array(numberOfWeeks + 1).keys()).map(numberOfWeek => (
+            <BodyRow
+              key={numberOfWeek}
+              numberOfWeek={numberOfWeek}
+              numberOfTodayWeek={numberOfTodayWeek}
+              startRenderOnCurrentWeek={startRenderOnCurrentWeek}
+              locale={locale}
+              numberOfRowsPreRender={numberOfRowsPreRender}
+              startDate={startDate}
+              updateVisibilityMatrix={updateVisibilityMatrix}
+              visibilityMatrix={visibilityMatrix}
+              slots={{
+                root: slots?.row,
+                cell: slots?.cell,
+                cellContent: slots?.cellContent,
+              }}
+              slotProps={{
+                root: slotProps?.row,
+                cell: slotProps?.cell,
+                cellContent: slotProps?.cellContent,
+              }}
+            />
+          ))}
+      </RootSlot>
+    );
+  },
+);
 
 export default Body;
diff --git a/src/components/BodyCell.tsx b/src/components/BodyCell.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, memo } from 'react';
 import { BodyCellData } from '../types';
 import classnames from '../utils/classnames';
 import styles from './styles.less';
@@ -21,24 +21,28 @@ export type BodyCellPrivateProps = {
   };
 };
 
-const BodyCell = ({ data, locale, slots, slotProps }: BodyCellPrivateProps): JSX.Element => {
-  const [RootSlot, ContentSlot] = useMemo(() => [slots?.root || 'li', slots?.content || BodyCellContent], [slots]);
-  const { onClick, className, ...restRootProps } = slotProps?.root || {};
-  const rootProps = useMemo(() => ({ ...restRootProps, className: classnames(styles.body__cell, className) }), [restRootProps, className]);
-  const contentProps = useMemo(() => ({ ...(slotProps?.content || {}), className: classnames(styles.body__cell__content, slotProps?.content?.className) }), [slotProps]);
+const BodyCell = memo(
+  ({ data, locale, slots, slotProps }: BodyCellPrivateProps): JSX.Element => {
+    const [RootSlot, ContentSlot] = useMemo(() => [slots?.root || 'li', slots?.content || BodyCellContent], [slots]);
+    const { onClick, className, ...restRootProps } = slotProps?.root || {};
+    const rootProps = useMemo(() => ({ ...restRootProps, className: classnames(styles.body__cell, className) }), [restRootProps, className]);
+    const contentProps = useMemo(() => ({ ...(slotProps?.content || {}), className: classnames(styles.body__cell__content, slotProps?.content?.className) }), [
+      slotProps,
+    ]);
 
-  const handleCellClick = useCallback(
-    (event: React.MouseEventHandler<HTMLLIElement>) => {
-      if (onClick) onClick(event, data);
-    },
-    [onClick, data],
-  );
+    const handleCellClick = useCallback(
+      (event: React.MouseEventHandler<HTMLLIElement>) => {
+        if (onClick) onClick(event, data);
+      },
+      [onClick, data],
+    );
 
-  return (
-    <RootSlot {...rootProps} onClick={handleCellClick} role="presentation">
-      <ContentSlot {...contentProps} data={data} locale={locale} />
-    </RootSlot>
-  );
-};
+    return (
+      <RootSlot {...rootProps} onClick={(!!onClick && handleCellClick) || undefined} role="presentation">
+        <ContentSlot {...contentProps} data={data} locale={locale} />
+      </RootSlot>
+    );
+  },
+);
 
 export default BodyCell;
diff --git a/src/components/BodyCellContent.tsx b/src/components/BodyCellContent.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { BodyCellData, SlotComponentProps } from '../types';
 import { getBodyCellContent } from '../helpers';
 
 export type BodyCellContentProps = SlotComponentProps<'div', { data: BodyCellData; locale?: string }>;
 
-const BodyCellContent = ({ data, locale, ...rest }: BodyCellContentProps): JSX.Element => <div {...rest}>{getBodyCellContent(data, locale)}</div>;
+const BodyCellContent = memo(({ data, locale, ...rest }: BodyCellContentProps): JSX.Element => <div {...rest}>{getBodyCellContent(data, locale)}</div>);
 
 export default BodyCellContent;
diff --git a/src/components/BodyRow.tsx b/src/components/BodyRow.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useEffect } from 'react';
+import React, { useMemo, useRef, useEffect, memo } from 'react';
 import useOnScreen from '../hooks/useOnScreen';
 import { getCellAttributes } from '../helpers';
 import { VisibilityMatrix, SlotRefComponentProps } from '../types';
@@ -30,58 +30,60 @@ export type BodyRowPrivateProps = {
   };
 };
 
-const BodyRow = ({
-  numberOfWeek,
-  numberOfTodayWeek,
-  startRenderOnCurrentWeek,
-  startDate,
-  locale,
-  visibilityMatrix,
-  updateVisibilityMatrix,
-  numberOfRowsPreRender,
-  slots,
-  slotProps,
-}: BodyRowPrivateProps): JSX.Element => {
-  const ref = useRef<HTMLUListElement>(null);
-  const shouldScroll = useRef<boolean>(startRenderOnCurrentWeek && numberOfWeek === numberOfTodayWeek);
-  const isVisible = useOnScreen(ref);
-  const shouldRender = useMemo(
-    () =>
-      visibilityMatrix[numberOfWeek] ||
-      Array(numberOfRowsPreRender)
-        .fill(null)
-        .some((_, idx) => visibilityMatrix[numberOfWeek - idx]),
-    [visibilityMatrix, numberOfWeek, numberOfRowsPreRender],
-  );
-  const data = useMemo(() => {
-    if (!startDate || !shouldRender) return [];
-    const dates = Array.from(Array(7).keys()).map(day => getCellAttributes(startDate, numberOfWeek, day, locale));
-    return dates;
-  }, [startDate, numberOfWeek, locale, shouldRender]);
-  const RootSlot = useMemo(() => slots?.root || 'ul', [slots]);
-  const rootProps = useMemo(() => ({ ...(slotProps?.root || {}), className: classnames(styles.body__row, slotProps?.root?.className) }), [slotProps]);
+const BodyRow = memo(
+  ({
+    numberOfWeek,
+    numberOfTodayWeek,
+    startRenderOnCurrentWeek,
+    startDate,
+    locale,
+    visibilityMatrix,
+    updateVisibilityMatrix,
+    numberOfRowsPreRender,
+    slots,
+    slotProps,
+  }: BodyRowPrivateProps): JSX.Element => {
+    const ref = useRef<HTMLUListElement>(null);
+    const shouldScroll = useRef<boolean>(startRenderOnCurrentWeek && numberOfWeek === numberOfTodayWeek);
+    const isVisible = useOnScreen(ref);
+    const shouldRender = useMemo(
+      () =>
+        visibilityMatrix[numberOfWeek] ||
+        Array(numberOfRowsPreRender)
+          .fill(null)
+          .some((_, idx) => visibilityMatrix[numberOfWeek - idx]),
+      [visibilityMatrix, numberOfWeek, numberOfRowsPreRender],
+    );
+    const data = useMemo(() => {
+      if (!startDate || !shouldRender) return [];
+      const dates = Array.from(Array(7).keys()).map(day => getCellAttributes(startDate, numberOfWeek, day, locale));
+      return dates;
+    }, [startDate, numberOfWeek, locale, shouldRender]);
+    const RootSlot = useMemo(() => slots?.root || 'ul', [slots]);
+    const rootProps = useMemo(() => ({ ...(slotProps?.root || {}), className: classnames(styles.body__row, slotProps?.root?.className) }), [slotProps]);
 
-  useEffect(() => {
-    if (isVisible && !shouldRender && updateVisibilityMatrix) updateVisibilityMatrix(numberOfWeek);
-  }, [isVisible, shouldRender, updateVisibilityMatrix, numberOfWeek]);
+    useEffect(() => {
+      if (isVisible && !shouldRender && updateVisibilityMatrix) updateVisibilityMatrix(numberOfWeek);
+    }, [isVisible, shouldRender, updateVisibilityMatrix, numberOfWeek]);
 
-  useEffect(() => {
-    if (ref.current && shouldScroll.current) ref.current.scrollIntoView();
-  }, []);
+    useEffect(() => {
+      if (ref.current && shouldScroll.current) ref.current.scrollIntoView();
+    }, []);
 
-  return (
-    <RootSlot ref={ref} key={numberOfWeek} {...rootProps}>
-      {data.map(cell => (
-        <BodyCell
-          key={cell.key}
-          data={cell}
-          locale={locale}
-          slots={{ root: slots?.cell, content: slots?.cellContent }}
-          slotProps={{ root: slotProps?.cell, content: slotProps?.cellContent }}
-        />
-      ))}
-    </RootSlot>
-  );
-};
+    return (
+      <RootSlot ref={ref} key={numberOfWeek} {...rootProps}>
+        {data.map(cell => (
+          <BodyCell
+            key={cell.key}
+            data={cell}
+            locale={locale}
+            slots={{ root: slots?.cell, content: slots?.cellContent }}
+            slotProps={{ root: slotProps?.cell, content: slotProps?.cellContent }}
+          />
+        ))}
+      </RootSlot>
+    );
+  },
+);
 
 export default BodyRow;
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
@@ -17,8 +17,7 @@ export type ContainerPrivateProps = {
 
 const Container = memo(
   ({ children, slots, slotProps }: ContainerPrivateProps): JSX.Element => {
-    const containerClassName = classnames(styles.calendar, slotProps?.root?.className);
-    const containerProps = { ...(slotProps?.root || {}), className: containerClassName };
+    const containerProps = { ...(slotProps?.root || {}), className: classnames(styles.calendar, slotProps?.root?.className) };
     const ContainerSlot = slots?.root || 'div';
 
     return <ContainerSlot {...containerProps}>{children}</ContainerSlot>;

diff --git a/src/components/Empty.tsx b/src/components/Empty.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import classnames from '../utils/classnames';
 import styles from './styles.less';
 import { SlotComponentProps } from '../types';
@@ -14,17 +14,19 @@ export type EmptyPrivateProps = {
   };
 };
 
-const Empty = ({ slots, slotProps }: EmptyPrivateProps): JSX.Element => {
-  const rootClassName = classnames(styles.empty, slotProps?.root?.className);
-  const { label = 'There is no date range to display', ...restProps } = slotProps?.root || {};
-  const rootProps = { ...restProps, ...(slots?.root ? { label } : {}), className: rootClassName };
-  const RootSlot = slots?.root || 'div';
+const Empty = memo(
+  ({ slots, slotProps }: EmptyPrivateProps): JSX.Element => {
+    const rootClassName = classnames(styles.empty, slotProps?.root?.className);
+    const { label = 'There is no date range to display', ...restProps } = slotProps?.root || {};
+    const rootProps = { ...restProps, ...(slots?.root ? { label } : {}), className: rootClassName };
+    const RootSlot = slots?.root || 'div';
 
-  return (
-    <RootSlot {...rootProps}>
-      <p>{label}</p>
-    </RootSlot>
-  );
-};
+    return (
+      <RootSlot {...rootProps}>
+        <p>{label}</p>
+      </RootSlot>
+    );
+  },
+);
 
 export default Empty;