✨ Refactor memoized timeline card elements

README.md

@@ -645,6 +645,12 @@ pnpm rollup
 
   # run cypress tests
   pnpm cypress:test
+
+  # run cypress tests in headless mode
+  pnpm cypress:headless
+
+  # run cypress tests in quiet mode
+  pnpm cypress:quiet
 ```
 
 ## 🤝Contributing

src/components/timeline-elements/memoized/__tests__/index.test.tsx

@@ -1,9 +1,11 @@
+import { forwardRef } from 'react';
 import { vi } from 'vitest';
-import { DetailsTextMemo, SubTitleMemo, TitleMemo } from '../';
 import { customRender } from '../../../common/test';
 import { providerProps } from '../../../common/test/index';
-import { forwardRef } from 'react';
 import { TextOrContentModel } from '../../timeline-card-content/text-or-content';
+import { DetailsTextMemo } from '../details-text-memo';
+import { SubTitleMemo } from '../subtitle-memo';
+import { TitleMemo } from '../title-memo';
 
 describe('Title', () => {
   it('should render title', () => {

src/components/timeline-elements/memoized/details-text-memo.tsx

@@ -0,0 +1,55 @@
+import { memo, useCallback, useMemo } from 'react';
+import { hexToRGBA } from '../../../utils';
+import { DetailsTextWrapper } from './../timeline-card-media/timeline-card-media.styles';
+import { DetailsTextMemoModel } from './memoized-model';
+
+const DetailsTextMemo = memo<DetailsTextMemoModel>(
+  ({
+    theme,
+    show,
+    expand,
+    textOverlay,
+    text,
+    height,
+    onRender,
+  }: DetailsTextMemoModel) => {
+    const onTextRef = useCallback((node: HTMLDivElement) => {
+      if (node) {
+        onRender?.(node.clientHeight);
+      }
+    }, []);
+
+    const Text = text;
+
+    const background = useMemo(() => {
+      const bg = theme?.cardDetailsBackGround || '';
+      if (bg) {
+        return hexToRGBA(bg, 0.8);
+      } else {
+        return bg;
+      }
+    }, [theme?.cardDetailsBackGround]);
+
+    return textOverlay ? (
+      <DetailsTextWrapper
+        ref={onTextRef}
+        // height={expand ? height : 0}
+        $expandFull={expand}
+        theme={theme}
+        $show={show}
+        background={background}
+      >
+        <Text />
+      </DetailsTextWrapper>
+    ) : null;
+  },
+  (prev, next) =>
+    prev.height === next.height &&
+    prev.show === next.show &&
+    prev.expand === next.expand &&
+    JSON.stringify(prev.theme) === JSON.stringify(next.theme),
+);
+
+DetailsTextMemo.displayName = 'Details Text';
+
+export { DetailsTextMemo };

src/components/timeline-elements/memoized/expand-button-memo.tsx

@@ -0,0 +1,31 @@
+import { memo, useMemo } from 'react';
+import { MaximizeIcon, MinimizeIcon } from '../../icons';
+import { ExpandButton } from '../timeline-card-media/timeline-card-media-buttons';
+import { ExpandButtonModel } from './memoized-model';
+
+const ExpandButtonMemo = memo<ExpandButtonModel>(
+  ({ theme, expanded, onExpand, textOverlay }: ExpandButtonModel) => {
+    const label = useMemo(() => {
+      return expanded ? 'Minimize' : 'Maximize';
+    }, [expanded]);
+
+    return textOverlay ? (
+      <ExpandButton
+        onPointerDown={onExpand}
+        onKeyDown={(ev) => ev.key === 'Enter' && onExpand?.(ev)}
+        theme={theme}
+        aria-expanded={expanded}
+        tabIndex={0}
+        aria-label={label}
+        title={label}
+      >
+        {expanded ? <MinimizeIcon /> : <MaximizeIcon />}
+      </ExpandButton>
+    ) : null;
+  },
+  (prev, next) => prev.expanded === next.expanded,
+);
+
+ExpandButtonMemo.displayName = 'Expand Button';
+
+export { ExpandButtonMemo };

src/components/timeline-elements/memoized/memoized-model.ts

@@ -2,52 +2,60 @@ import { Theme } from '@models/Theme';
 import React, { ForwardRefExoticComponent, ReactNode } from 'react';
 import { TextOrContentModel } from '../timeline-card-content/text-or-content';
 
+// Common properties shared by multiple interfaces
 type common = {
-  classString?: string;
-  color?: string;
-  dir?: string;
-  fontSize?: string;
-  padding?: boolean;
-  theme?: Theme;
+  classString?: string; // CSS class string
+  color?: string; // Color value
+  dir?: string; // Text direction
+  fontSize?: string; // Font size
+  padding?: boolean; // Whether to apply padding
+  theme?: Theme; // Theme object
 };
 
+// Interface for the Title component
 export interface Title extends common {
-  active?: boolean;
-  padding?: boolean;
-  title?: string;
-  url?: string;
+  active?: boolean; // Whether the title is active
+  padding?: boolean; // Whether to apply padding
+  title?: string; // Title text
+  url?: string; // URL for the title
 }
 
+// Interface for the Content component
 export interface Content extends common {
-  content?: string | ReactNode;
+  content?: string | ReactNode; // Content text or ReactNode
 }
 
+// Type for the ExpandButtonModel
 export type ExpandButtonModel = {
-  expanded?: boolean;
-  onExpand?: (ev: React.PointerEvent | React.KeyboardEvent) => void;
-  textOverlay?: boolean;
+  expanded?: boolean; // Whether the button is expanded
+  onExpand?: (ev: React.PointerEvent | React.KeyboardEvent) => void; // Event handler for expand action
+  textOverlay?: boolean; // Whether to overlay text on the button
 } & Pick<common, 'theme'>;
 
+// Type for the ShowHideTextButtonModel
 export type ShowHideTextButtonModel = {
-  onToggle: (ev: React.PointerEvent | React.KeyboardEvent) => void;
-  show?: boolean;
-  textOverlay?: boolean;
+  onToggle: (ev: React.PointerEvent | React.KeyboardEvent) => void; // Event handler for toggle action
+  show?: boolean; // Whether to show the button
+  textOverlay?: boolean; // Whether to overlay text on the button
 } & Pick<common, 'theme'>;
 
+// Type for the DetailsTextMemoModel
 export type DetailsTextMemoModel = {
-  expand?: boolean;
-  height?: number;
-  onRender?: (height?: number) => void;
-  show?: boolean;
-  text: ForwardRefExoticComponent<TextOrContentModel>;
-  textOverlay?: boolean;
-  theme?: Theme;
+  expand?: boolean; // Whether to expand the details text
+  height?: number; // Height of the details text
+  onRender?: (height?: number) => void; // Callback function for rendering the details text
+  show?: boolean; // Whether to show the details text
+  text: ForwardRefExoticComponent<TextOrContentModel>; // Text component for the details text
+  textOverlay?: boolean; // Whether to overlay text on the details text
+  theme?: Theme; // Theme object
 };
 
+// Type for the TextContentMemoModel
 export type TextContentMemoModel = Title &
   Content &
   ExpandButtonModel &
   ShowHideTextButtonModel &
   DetailsTextMemoModel;
 
+// Type for the CardMediaHeaderMemoModel
 export type CardMediaHeaderMemoModel = Title & Content;