@popsure/dirty-swan 0.28.0-beta.4 → 0.28.0

package/src/lib/components/comparisonTable/components/TableArrows/style.module.scss

@@ -3,9 +3,11 @@
 
 .container {
   position: absolute;
-  width: 100vw;
+  width: 100%;
+  height: 100%;
   padding: 0 16px;
   justify-content: space-between;
+  align-items: center;
   z-index: 1;
   display: flex;
   @include p-size-tablet {

package/src/lib/components/comparisonTable/hooks/useComparisonTable.ts

@@ -0,0 +1,124 @@
+import debounce from 'lodash.debounce';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { ArrowValues } from '../components/TableArrows';
+
+export const useComparisonTable = () => {
+  const [showMore, setShowMore] = useState<boolean>(false);
+  const [headerWidth, setHeaderWidth] = useState(0);
+
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+
+  const [selectedSection, setSelectedSection] = useState('');
+
+  const headerRef = useRef<HTMLDivElement | null>(null);
+  const contentContainerRef = useRef<HTMLDivElement | null>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
+
+  const scrollContainerCallbackRef = useCallback((node) => {
+    if (node) {
+      setHeaderWidth(node.clientWidth);
+    }
+
+    headerRef.current = node;
+  }, []);
+
+  useEffect(() => {
+    if (!observerRef.current) {
+      observerRef.current = new ResizeObserver((entries) => {
+        entries.forEach((entry) => {
+          const currentTabIndex = Math.round(
+            entry.target.scrollLeft / entry.contentRect.width
+          );
+
+          setHeaderWidth(entry.contentRect.width);
+
+          // Update selectedTabIndex to match the calculated current tab index
+          setSelectedTabIndex(currentTabIndex);
+        });
+      });
+    }
+
+    if (headerRef.current) {
+      observerRef.current.observe(headerRef.current);
+    }
+
+    return () => {
+      if (headerRef.current) {
+        observerRef.current?.unobserve(headerRef.current);
+      }
+      observerRef.current?.disconnect();
+    };
+  }, []);
+
+  const handleTableScroll = () => {
+    if (!headerRef.current) {
+      return;
+    }
+
+    const currentTabIndex = Math.round(
+      headerRef.current.scrollLeft /
+        headerRef.current.getBoundingClientRect().width
+    );
+
+    setSelectedTabIndex(currentTabIndex);
+  };
+
+  const debouncedTableScroll = debounce(handleTableScroll, 150);
+
+  useEffect(() => {
+    headerRef.current?.addEventListener('scroll', debouncedTableScroll, {
+      passive: true,
+    });
+
+    return headerRef.current?.removeEventListener('scroll', handleTableScroll);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleArrowsClick = (value: ArrowValues) => {
+    if (headerRef.current) {
+      const currentTabIndex = Math.round(
+        headerRef.current.scrollLeft / headerRef.current.clientWidth
+      );
+
+      const direction = value === 'next' ? 1 : -1;
+
+      const newTabIndex = currentTabIndex + direction;
+
+      headerRef.current.scroll({
+        top: 0,
+        left: headerWidth * newTabIndex,
+        behavior: 'smooth',
+      });
+
+      setSelectedTabIndex(() => {
+        return newTabIndex;
+      });
+    }
+  };
+
+  const toggleMoreRows = async () => {
+    if (showMore && headerRef.current && contentContainerRef.current) {
+      window.scroll(
+        0,
+        window.scrollY +
+          (contentContainerRef.current.getBoundingClientRect().y -
+            headerRef.current.getBoundingClientRect().bottom)
+      );
+    }
+
+    setShowMore(!showMore);
+  };
+
+  return {
+    headerWidth,
+    contentContainerRef,
+    selectedSection,
+    setSelectedSection,
+    selectedTabIndex,
+    setSelectedTabIndex,
+    scrollContainerCallbackRef,
+    handleArrowsClick,
+    toggleMoreRows,
+    showMore,
+  };
+};

package/src/lib/components/comparisonTable/index.stories.mdx

@@ -19,11 +19,17 @@ The Comparison Table component provides an easy way to compare vast amounts of i
 
 ## Arguments
 
-| attribute   | unit                | description                                                | default value | required |
-| ----------- | ------------------- | ---------------------------------------------------------- | ------------- | -------- |
-| headers     | [Header[]](#header) | The structure of the table                                 | n/a           | true     |
-| data        | array               | The title text that needs to be displayed                  | n/a           | true     |
-| hideDetails | boolean             | Hide table groups that do not have the `default` attribute | false         | false    |
+| attribute             | unit                | description                                                | default value | required |
+| --------------------- | ------------------- | ---------------------------------------------------------- | ------------- | -------- |
+| headers               | [Header[]](#header) | The structure of the table                                 | n/a           | true     |
+| data                  | array               | The title text that needs to be displayed                  | n/a           | true     |
+| hideDetails           | boolean             | Hide table groups that do not have the `default` attribute | false         | false    |
+| hideScrollBars        | boolean             | Hide scroll bars                                           | false         | false    |
+| collapsibleSections   | boolean             | Make table groups with a label collapsible                 | false         | false    |
+| cellWidth             | number              | Width of a table content cell                              | 256px         | false    |
+| firstColumnWidth      | number              | Width of the first column of the table                     | 288px         | false    |
+| stickyHeaderTopOffset | number              | Y-offset of the sticky header row                          | 0px           | false    |
+| growContent           | boolean             | Makes the content area grow to fill the available space    | false         | false    |
 
 ## Types
 
@@ -55,6 +61,105 @@ export const ComparisonTableWithData = () => {
   const headers = [
     {
       id: 1,
+      default: true,
+      cells: [
+        {
+          id: 1,
+          key: 'name',
+          label: 'Films',
+        },
+        {
+          id: 2,
+          key: 'country',
+          label: 'Country',
+        },
+        {
+          id: 4,
+          key: 'imdb',
+          label: 'IMDB rating',
+        },
+        {
+          id: 3,
+          key: 'rating',
+          label: 'Our rating',
+          render: (value) => <TableRating type="star" rating={value} />,
+        },
+        {
+          id: 5,
+          key: 'recommended',
+          label: 'Recommended',
+          render: (value) => <TableRating type="zap" rating={value} />,
+        },
+        {
+          id: 5,
+          key: 'familyFriendly',
+          label: 'Family friendly',
+          render: (value) => <TableTrueFalse value={value} />,
+        },
+        {
+          id: 6,
+          key: 'boxOffice',
+          label: 'Box office',
+          render: (value) =>
+            value.toLocaleString('de-DE', {
+              style: 'currency',
+              currency: 'EUR',
+            }),
+        },
+      ],
+    },
+    {
+      id: 2,
+      label: 'SUBSECTION',
+      cells: [
+        {
+          id: 1,
+          key: 'name',
+          label: 'Films',
+        },
+        {
+          id: 2,
+          key: 'country',
+          label: 'Country',
+        },
+        {
+          id: 4,
+          key: 'imdb',
+          label: 'IMDB rating',
+        },
+        {
+          id: 3,
+          key: 'rating',
+          label: 'Our rating',
+          render: (value) => <TableRating type="star" rating={value} />,
+        },
+        {
+          id: 5,
+          key: 'recommended',
+          label: 'Recommended',
+          render: (value) => <TableRating type="zap" rating={value} />,
+        },
+        {
+          id: 5,
+          key: 'familyFriendly',
+          label: 'Family friendly',
+          render: (value) => <TableTrueFalse value={value} />,
+        },
+        {
+          id: 6,
+          key: 'boxOffice',
+          label: 'Box office',
+          render: (value) =>
+            value.toLocaleString('de-DE', {
+              style: 'currency',
+              currency: 'EUR',
+            }),
+        },
+      ],
+    },
+    {
+      id: 3,
+      label: 'SUBSECTION 2',
       cells: [
         {
           id: 1,
@@ -137,7 +242,14 @@ export const ComparisonTableWithData = () => {
       boxOffice: 258908054,
     },
   ];
-  return <ComparisonTable data={data} headers={headers} />;
+  return (
+    <ComparisonTable
+      data={data}
+      headers={headers}
+      collapsibleSections
+      hideDetails
+    />
+  );
 };
 
 <ComparisonTableWithData />
@@ -162,9 +274,108 @@ interface TableData {
 }
 
 export const ComparisonTableWithData = () => {
-  const headers: Array<TableHeader<TableData>> = [
+  const headers = [
     {
       id: 1,
+      default: true,
+      cells: [
+        {
+          id: 1,
+          key: 'name',
+          label: 'Films',
+        },
+        {
+          id: 2,
+          key: 'country',
+          label: 'Country',
+        },
+        {
+          id: 4,
+          key: 'imdb',
+          label: 'IMDB rating',
+        },
+        {
+          id: 3,
+          key: 'rating',
+          label: 'Our rating',
+          render: (value) => <TableRating type="star" rating={value} />,
+        },
+        {
+          id: 5,
+          key: 'recommended',
+          label: 'Recommended',
+          render: (value) => <TableRating type="zap" rating={value} />,
+        },
+        {
+          id: 5,
+          key: 'familyFriendly',
+          label: 'Family friendly',
+          render: (value) => <TableTrueFalse value={value} />,
+        },
+        {
+          id: 6,
+          key: 'boxOffice',
+          label: 'Box office',
+          render: (value) =>
+            value.toLocaleString('de-DE', {
+              style: 'currency',
+              currency: 'EUR',
+            }),
+        },
+      ],
+    },
+    {
+      id: 2,
+      label: 'SUBSECTION',
+      cells: [
+        {
+          id: 1,
+          key: 'name',
+          label: 'Films',
+        },
+        {
+          id: 2,
+          key: 'country',
+          label: 'Country',
+        },
+        {
+          id: 4,
+          key: 'imdb',
+          label: 'IMDB rating',
+        },
+        {
+          id: 3,
+          key: 'rating',
+          label: 'Our rating',
+          render: (value) => <TableRating type="star" rating={value} />,
+        },
+        {
+          id: 5,
+          key: 'recommended',
+          label: 'Recommended',
+          render: (value) => <TableRating type="zap" rating={value} />,
+        },
+        {
+          id: 5,
+          key: 'familyFriendly',
+          label: 'Family friendly',
+          render: (value) => <TableTrueFalse value={value} />,
+        },
+        {
+          id: 6,
+          key: 'boxOffice',
+          label: 'Box office',
+          render: (value) =>
+            value.toLocaleString('de-DE', {
+              style: 'currency',
+              currency: 'EUR',
+            }),
+        },
+      ],
+    },
+    {
+      id: 3,
+      label: 'SUBSECTION 2',
       cells: [
         {
           id: 1,
@@ -247,7 +458,14 @@ export const ComparisonTableWithData = () => {
       boxOffice: 258908054,
     },
   ];
-  return <ComparisonTable data={data} headers={headers} />;
+  return (
+    <ComparisonTable
+      data={data}
+      headers={headers}
+      collapsibleSections
+      hideDetails
+    />
+  );
 };
 
 <ComparisonTableWithData />;