Skip to content

Commit

Permalink
Fixed arrow mobile and some refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssb-cgn
ssb-cgn committed Sep 19, 2024
1 parent 3469550 commit 0f54b20
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 111 deletions.
74 changes: 1 addition & 73 deletions src/components/Table/__snapshots__/table.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,85 +10,13 @@ exports[`Render Table component Matches the snapshot 1`] = `
>
<caption>
<div
class="caption-wrapper"
style="position: relative;"
class="caption-wrapper "
>
<div
class="caption-text-wrapper"
>
Table caption
</div>
<div
class="scroll-icon-wrapper "
style="visibility: hidden;"
>
<div
aria-label="Scroll left"
class="scroll-icon "
role="button"
tabindex="0"
>
<svg
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
<polyline
points="12 8 8 12 12 16"
/>
<line
x1="16"
x2="8"
y1="12"
y2="12"
/>
</svg>
</div>
<div
aria-label="Scroll right"
class="scroll-icon "
role="button"
tabindex="0"
>
<svg
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
<polyline
points="12 16 16 12 12 8"
/>
<line
x1="8"
x2="16"
y1="12"
y2="12"
/>
</svg>
</div>
</div>
</div>
</caption>
<thead>
Expand Down
42 changes: 28 additions & 14 deletions src/components/Table/_table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
width: 100%;
border-collapse: collapse;
border: 1px solid variables.$ssb-dark-5;

caption,
th,
td {
Expand Down Expand Up @@ -67,16 +67,6 @@
position: relative;
padding: 1.25rem 1rem;

@media (max-width: $desktop-screen) {
&:has(.visible){
padding-top: 3rem;
}

.caption-wrapper .scroll-icon-wrapper {
margin-top: -100px;
}
}

.icon-container {
padding: 0 1rem;
}
Expand All @@ -98,10 +88,10 @@
align-items: center;
position: sticky;
right: 40px;
left: 40px;
}

.scroll-icon {
@include reset-button;
cursor: pointer;
display: flex;
justify-content: center;
Expand Down Expand Up @@ -169,6 +159,30 @@
color: variables.$ssb-green-4;
stroke-width: 1.5px;
}

&.overflow {
@media #{$mobile} {
display: grid;

.caption-text-wrapper {
width: 100%;
order: 2;
}

.scroll-icon-wrapper {
order: 1;
position: sticky;
justify-content: end;
left: 0;
}
}

@media #{$tablet} {
.caption-text-wrapper {
max-width: 500px;
}
}
}
}
}

Expand Down Expand Up @@ -252,12 +266,12 @@
fill: var(--ssb-dark-5);
transition: fill 0.18s;
}

svg line,
svg polyline {
stroke: var(--ssb-white);
}

svg circle {
stroke: var(--ssb-dark-5);
transition: stroke 0.16s;
Expand Down
51 changes: 27 additions & 24 deletions src/components/Table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const Table = forwardRef<HTMLTableElement, TableProps>(
const captionRef = useRef<HTMLDivElement | null>(null)
const [isOverflowing, setIsOverflowing] = useState(false)
const [isActive, setIsActive] = useState<{ left: boolean; right: boolean }>({ left: false, right: false })
const [maxWidth, setMaxWidth] = useState('')

type Direction = 'left' | 'right'

Expand All @@ -50,7 +51,7 @@ const Table = forwardRef<HTMLTableElement, TableProps>(
}
}

const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, direction: Direction) => {
const handleKeyPress = (event: React.KeyboardEvent<HTMLButtonElement>, direction: Direction) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault()
setIsActive((prev) => ({ ...prev, [direction]: true }))
Expand All @@ -67,6 +68,9 @@ const Table = forwardRef<HTMLTableElement, TableProps>(
const hasOverflow = tableWrapperRef.current.scrollWidth > tableWrapperRef.current.clientWidth
setIsOverflowing(hasOverflow)

const maxWidthValue = tableWrapperRef.current.clientWidth - 16
setMaxWidth(`${maxWidthValue}px`)

if (iconWrapperRef.current) {
iconWrapperRef.current.style.visibility = hasOverflow ? 'visible' : 'hidden'
}
Expand All @@ -82,35 +86,34 @@ const Table = forwardRef<HTMLTableElement, TableProps>(

return (
<div id={id} className='ssb-table-wrapper' ref={tableWrapperRef}>
<table className={`ssb-table${className ? ` ${className}` : ''}`} ref={ref}>
<table className={['ssb-table', className ?? ''].filter(Boolean).join(' ')} ref={ref}>
{caption && (
<caption data-noterefs={dataNoteRefs}>
<div className='caption-wrapper' style={{ position: 'relative' }}>
<div className={`caption-wrapper ${isOverflowing ? 'overflow' : ''}`}>
<div className='caption-text-wrapper' ref={captionRef}>
{caption}
</div>
<div className={`scroll-icon-wrapper ${isOverflowing ? 'visible' : ''}`} ref={iconWrapperRef}>
<div
className={`scroll-icon ${isActive.left ? 'scroll-icon-active' : ''}`}
role='button'
aria-label='Scroll left'
tabIndex={0}
onClick={() => handleMouseClick('left')}
onKeyDown={(event) => handleKeyPress(event, 'left')}
>
<ArrowLeftCircle />
</div>
<div
className={`scroll-icon ${isActive.right ? 'scroll-icon-active' : ''}`}
role='button'
aria-label='Scroll right'
tabIndex={0}
onClick={() => handleMouseClick('right')}
onKeyDown={(event) => handleKeyPress(event, 'right')}
>
<ArrowRightCircle />
{isOverflowing && (
<div className='scroll-icon-wrapper' ref={iconWrapperRef} style={{ maxWidth: `${maxWidth}` }}>
<button
className={`scroll-icon ${isActive.left ? 'scroll-icon-active' : ''}`}
aria-label='Scroll left'
onClick={() => handleMouseClick('left')}
onKeyDown={(event) => handleKeyPress(event, 'left')}
>
<ArrowLeftCircle />
</button>
<button
className={`scroll-icon ${isActive.right ? 'scroll-icon-active' : ''}`}
aria-label='Scroll right'
tabIndex={0}
onClick={() => handleMouseClick('right')}
onKeyDown={(event) => handleKeyPress(event, 'right')}
>
<ArrowRightCircle />
</button>
</div>
</div>
)}
</div>
</caption>
)}
Expand Down

0 comments on commit 0f54b20

Please sign in to comment.