scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-2847-table (pull request #2665)

Browse Source 
fix(SW-2847): move ScrollWrapper to design system and Table component

* fix(SW-2847): move ScrollWrapper to design system and Table component


Approved-by: Erik Tiekstra
This commit is contained in:
Matilda Landström
2025-08-20 09:41:54 +00:00
parent 7891ae3ae6
commit fe376c63f7
9 changed files with 58 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
apps/scandic-web/components/Blocks/Table/index.tsx
View File

@@ -12,7 +12,6 @@ import Table from "@scandic-hotels/design-system/Table"
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import ScrollWrapper from "@/components/TempDesignSystem/ScrollWrapper"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import styles from "./table.module.css"
@@ -56,50 +55,45 @@ export default function TableBlock({ data }: TableBlockProps) {
<SectionContainer>
<SectionHeader preamble={preamble} title={heading} />
<div className={styles.tableWrapper}>
<ScrollWrapper>
<Table
width={`${totalWidth}%`}
variant="content"
intent="striped"
layout="fixed"
borderRadius="none"
>
{hasHeader ? (
<Table.THead>
{table.getHeaderGroups().map((headerGroup) => (
<Table.TR key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<Table.TH
key={header.id}
width={`${header.column.columnDef.size}%`}
>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
</Table.TH>
))}
</Table.TR>
))}
</Table.THead>
) : null}
<Table.TBody>
{table.getRowModel().rows.map((row) => (
<Table.TR key={row.id}>
{row.getVisibleCells().map((cell) => (
<Table.TD key={cell.id}>
<Table
width={`${totalWidth}%`}
variant="content"
intent="striped"
layout="fixed"
borderRadius="none"
>
{hasHeader ? (
<Table.THead>
{table.getHeaderGroups().map((headerGroup) => (
<Table.TR key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<Table.TH
key={header.id}
width={`${header.column.columnDef.size}%`}
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
header.column.columnDef.header,
header.getContext()
)}
</Table.TD>
</Table.TH>
))}
</Table.TR>
))}
</Table.TBody>
</Table>
</ScrollWrapper>
</Table.THead>
) : null}
<Table.TBody>
{table.getRowModel().rows.map((row) => (
<Table.TR key={row.id}>
{row.getVisibleCells().map((cell) => (
<Table.TD key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</Table.TD>
))}
</Table.TR>
))}
</Table.TBody>
</Table>
{showMoreVisible ? (
<ShowMoreButton
loadMoreData={handleShowMore}

2
apps/scandic-web/components/ContentType/HotelPage/TabNavigation/index.tsx
View File

@@ -11,11 +11,11 @@ import {
useState,
} from "react"
import useScrollShadows from "@scandic-hotels/common/hooks/useScrollShadows"
import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
import { StickyElementNameEnum } from "@scandic-hotels/common/stores/sticky-position"
import { Typography } from "@scandic-hotels/design-system/Typography"
import useScrollShadows from "@/hooks/useScrollShadows"
import useScrollSpy from "@/hooks/useScrollSpy"
import { trackHotelTabClick } from "@/utils/tracking"

3
apps/scandic-web/components/TabFilters/index.tsx
View File

@@ -2,11 +2,10 @@
import { cx } from "class-variance-authority"
import useScrollShadows from "@scandic-hotels/common/hooks/useScrollShadows"
import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
import IconByCSSelect from "@scandic-hotels/design-system/Icons/IconByCSSelect"
import useScrollShadows from "@/hooks/useScrollShadows"
import styles from "./tabFilters.module.css"
interface Filter {

36
apps/scandic-web/components/TempDesignSystem/ScrollWrapper/index.tsx
View File

@@ -1,36 +0,0 @@
"use client"
import { useMemo } from "react"
import useScrollShadows from "@/hooks/useScrollShadows"
import styles from "./scrollWrapper.module.css"
import type { ScrollWrapperProps } from "./scrollWrapper"
export default function ScrollWrapper({
className,
children,
}: ScrollWrapperProps) {
const { containerRef, showLeftShadow, showRightShadow } =
useScrollShadows<HTMLDivElement>()
const classNames = useMemo(() => {
const cls = [styles.scrollWrapper, className]
if (showLeftShadow) {
cls.push(styles.leftShadow)
}
if (showRightShadow) {
cls.push(styles.rightShadow)
}
return cls.join(" ")
}, [showLeftShadow, showRightShadow, className])
return (
<div className={classNames}>
<div className={styles.content} ref={containerRef}>
{children}
</div>
</div>
)
}

33
apps/scandic-web/components/TempDesignSystem/ScrollWrapper/scrollWrapper.module.css
View File

@@ -1,33 +0,0 @@
.scrollWrapper {
position: relative;
overflow: hidden;
}
.scrollWrapper::before,
.scrollWrapper::after {
content: "";
position: absolute;
top: 0;
height: 100%;
pointer-events: none;
z-index: 1;
transition: opacity 0.2s ease;
opacity: 0;
width: 50px;
}
.scrollWrapper.leftShadow::before {
left: 0;
background: linear-gradient(to right, rgba(128, 110, 99, 0.37), transparent);
opacity: 1;
}
.scrollWrapper.rightShadow::after {
right: 0;
background: linear-gradient(to left, rgba(128, 110, 99, 0.37), transparent);
opacity: 1;
}
.content {
overflow-x: auto;
}

2
apps/scandic-web/components/TempDesignSystem/ScrollWrapper/scrollWrapper.ts
View File

@@ -1,2 +0,0 @@
export interface ScrollWrapperProps
extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>> {}

34
apps/scandic-web/hooks/useScrollShadows.ts
View File

@@ -1,34 +0,0 @@
import { useEffect, useRef, useState } from "react"
export default function useScrollShadows<T extends HTMLElement>() {
const containerRef = useRef<T>(null)
const [showLeftShadow, setShowLeftShadow] = useState<boolean>(false)
const [showRightShadow, setShowRightShadow] = useState<boolean>(false)
useEffect(() => {
const handleScroll = () => {
const container = containerRef.current
if (!container) return
setShowLeftShadow(container.scrollLeft > 0)
setShowRightShadow(
container.scrollLeft < container.scrollWidth - container.clientWidth
)
}
const container = containerRef.current
if (container) {
container.addEventListener("scroll", handleScroll)
}
handleScroll()
return () => {
if (container) {
container.removeEventListener("scroll", handleScroll)
}
}
}, [])
return { containerRef, showLeftShadow, showRightShadow }
}