Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(Table): 最初の列を固定可能にする #4806

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from
Draft

fix(Table): 最初の列を固定可能にする #4806

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d35b91f
docs(Table): add story for fixed columns
Qs-F Jul 25, 2024
1051eca
fix: make dom iterable
Qs-F Jul 30, 2024
8c94a7f
docs: update storybook
Qs-F Jul 30, 2024
919c8bb
fix: collected into fixedCellStyle reel shadow related code
Qs-F Jul 30, 2024
cd40f98
fix: fix to support multiple leading and trailing columns fixed
Qs-F Jul 30, 2024
f8d7c30
fix: Fix only two columns fixed bug (WIP)
Qs-F Aug 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 98 additions & 0 deletions packages/smarthr-ui/src/components/Table/Table.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -622,6 +622,104 @@ export const WithReel: StoryFn = () => (
)
WithReel.storyName = 'with TableReel'

export const FixedColumns = () => (
<Ul>
<li>
<TableReel>
<Table>
<thead>
<tr>
<Th fixed>fixed</Th>
<Th fixed>fixed</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th fixed>fixed</Th>
<Th fixed>fixed</Th>
</tr>
</thead>
<tbody>
<tr>
<Td fixed>fixed</Td>
<Td fixed>fixed</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td fixed>fixed</Td>
<Td fixed>fixed</Td>
</tr>
<tr>
<Td fixed>fixed</Td>
<Td fixed>fixed</Td>
<Td fixed>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td fixed>fixed</Td>
<Td fixed>
<FFButton />
</Td>
</tr>
</tbody>
</Table>
</TableReel>
</li>
</Ul>
)

const FFButton = () => {
const [state, setState] = React.useState(false)
return (
<Button size="s" variant="secondary" onClick={() => setState((s) => !s)}>
{state ? 'Onnnnnnnnnnnnnnnnnnnn' : 'Off'}
</Button>
)
}

const Ul = styled.ul`
list-style: none;
padding: 0;
Expand Down
12 changes: 7 additions & 5 deletions packages/smarthr-ui/src/components/Table/TableReel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,29 @@ import React, { ComponentPropsWithRef, PropsWithChildren, useMemo } from 'react'
import { tv } from 'tailwind-variants'

import { useReelCells } from './useReelCells'
import { reelShadowStyle } from './useReelShadow'

type ElementProps = Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren>

const tableReel = tv({
slots: {
wrapper: ['smarthr-ui-TableReel', 'shr-relative'],
inner: ['smarthr-ui-TableReel-inner', 'shr-relative shr-overflow-auto'],
inner: [
'smarthr-ui-TableReel-inner smarthr-ui-TableReel-scroll-reached-start smarthr-ui-TableReel-scroll-reached-end',
'shr-relative shr-overflow-auto',
],
},
})

export const TableReel: React.FC<PropsWithChildren & ElementProps> = ({ className, ...props }) => {
const { showShadow, tableWrapperRef } = useReelCells()
const { tableWrapperRef } = useReelCells()

const { wrapperStyle, innerStyle } = useMemo(() => {
const { wrapper, inner } = tableReel()
return {
wrapperStyle: reelShadowStyle({ showShadow, className: wrapper({ className }) }),
wrapperStyle: wrapper({ className }),
innerStyle: inner(),
}
}, [className, showShadow])
}, [className])

return (
<div className={wrapperStyle}>
Expand Down
13 changes: 4 additions & 9 deletions packages/smarthr-ui/src/components/Table/Td.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { ComponentPropsWithoutRef, FC, PropsWithChildren, useMemo } from 'react'
import { type VariantProps, tv } from 'tailwind-variants'

import { reelShadowStyle } from './useReelShadow'
import { fixedCellStyle } from './fixedCellStyle'

import type { CellContentWidth } from './type'

Expand All @@ -10,6 +10,7 @@ export type Props = PropsWithChildren<
contentWidth?:
| CellContentWidth
| { base?: CellContentWidth; min?: CellContentWidth; max?: CellContentWidth }
fixed?: boolean
}
>
type ElementProps = Omit<ComponentPropsWithoutRef<'td'>, keyof Props>
Expand All @@ -24,8 +25,8 @@ export const Td: FC<Props & ElementProps> = ({
...props
}) => {
const styleProps = useMemo(() => {
const tdStyles = td({ align, nullable, fixed, className })
const reelShadowStyles = fixed ? reelShadowStyle({ direction: 'right' }) : ''
const tdStyles = td({ align, nullable, className })
const reelShadowStyles = fixed ? fixedCellStyle() : ''
return {
className: `${tdStyles} ${reelShadowStyles}`.trim(),
style: {
Expand All @@ -51,12 +52,6 @@ const td = tv({
nullable: {
true: "empty:after:shr-content-['-----']",
},
fixed: {
true: [
'fixedElement',
'[&.fixed]:shr-sticky [&.fixed]:shr-right-0 [&.fixed]:shr-bg-white [&.fixed]:after:shr-opacity-100',
],
},
},
})

Expand Down
14 changes: 4 additions & 10 deletions packages/smarthr-ui/src/components/Table/Th.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { UnstyledButton } from '../Button'
import { FaSortDownIcon, FaSortUpIcon } from '../Icon'
import { VisuallyHiddenText } from '../VisuallyHiddenText'

import { reelShadowStyle } from './useReelShadow'
import { fixedCellStyle } from './fixedCellStyle'

import type { CellContentWidth } from './type'

Expand All @@ -29,6 +29,7 @@ export type Props = PropsWithChildren<
sortDirectionIconAlt: (text: string, { sort }: { sort: sortTypes }) => ReactNode
}
contentWidth?: CellContentWidth
fixed?: boolean
} & VariantProps<typeof thWrapper>
>
type ElementProps = Omit<ComponentPropsWithoutRef<'th'>, keyof Props | 'onClick'>
Expand All @@ -55,13 +56,6 @@ const thWrapper = tv({
left: '',
right: 'shr-text-right',
},
fixed: {
true: [
/* これ以降の記述はTableReel内で'fixed'を利用した際に追従させるために必要 */
'fixedElement',
'[&.fixed]:shr-sticky [&.fixed]:shr-right-0 [&.fixed]:after:shr-opacity-100',
],
},
},
})

Expand All @@ -87,8 +81,8 @@ export const Th: FC<Props & ElementProps> = ({
...props
}) => {
const styleProps = useMemo(() => {
const thWrapperStyle = thWrapper({ className, align, fixed })
const reelShadowStyles = fixed ? reelShadowStyle({ showShadow: false, direction: 'right' }) : ''
const thWrapperStyle = thWrapper({ className, align })
const reelShadowStyles = fixed ? fixedCellStyle() : ''
return {
className: `${thWrapperStyle} ${reelShadowStyles}`.trim(),
style: {
Expand Down
21 changes: 21 additions & 0 deletions packages/smarthr-ui/src/components/Table/fixedCellStyle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { tv } from 'tailwind-variants'

export const fixedCellStyle = tv({
base: [
'smarthr-ui-TableCell-fixed',
'shr-sticky shr-bg-white',

'after:shr-absolute after:shr-top-0 after:shr-z-0 after:shr-h-full after:shr-w-0.75 after:shr-from-[rgba(0,0,0,0.2)] after:shr-to-transparent after:shr-transition-all after:shr-duration-200 after:shr-content-[""] after:shr-visible',
/* 影の領域が広すぎるとクリッカブルエリアを侵食するので無効化 */
'after:shr-pointer-events-none',

'[&.smarthr-ui-TableCell-fixed]:shr-left-[var(--prev-width)]',
'[&:has(+:not(.smarthr-ui-TableCell-fixed))]:after:shr-left-full [&:has(+:not(.smarthr-ui-TableCell-fixed))]:after:shr-bg-gradient-to-r',

'[&.smarthr-ui-TableCell-fixed]:shr-right-[var(--next-width)]',
'[:not(.smarthr-ui-TableCell-fixed)+&.smarthr-ui-TableCell-fixed]:after:shr-right-full [:not(.smarthr-ui-TableCell-fixed)+&.smarthr-ui-TableCell-fixed]:after:shr-bg-gradient-to-l',

'[.smarthr-ui-TableReel-scroll-reached-start_&:has(+:not(.smarthr-ui-TableCell-fixed))]:after:shr-opacity-0',
'[.smarthr-ui-TableReel-scroll-reached-end_:not(.smarthr-ui-TableCell-fixed)+&.smarthr-ui-TableCell-fixed]:after:shr-opacity-0',
],
})
37 changes: 21 additions & 16 deletions packages/smarthr-ui/src/components/Table/useReelCells.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,28 @@ export const useReelCells = () => {
const currentRef = tableWrapperRef.current

const handleScroll = () => {
if (currentRef) {
const stickyCells = currentRef.querySelectorAll('.fixedElement') || []
const scrollLeft = currentRef.scrollLeft
const maxScrollLeft = currentRef.scrollWidth - currentRef.clientWidth || 0

stickyCells.forEach((cell) => {
const shouldFix = maxScrollLeft > 0 && scrollLeft < maxScrollLeft

if (shouldFix) {
cell.classList.add('fixed')
setShowShadow(scrollLeft > 0)
} else {
cell.classList.remove('fixed')
setShowShadow(maxScrollLeft === 0 && scrollLeft === 0 ? false : true)
}
})
if (!currentRef) {
return
}
const stickyCells =
(currentRef.querySelectorAll(
'.smarthr-ui-TableCell-fixed',
) as unknown as HTMLCollectionOf<HTMLElement>) || []
for (const stickyCell of stickyCells) {
const prevWidth = stickyCell.previousElementSibling?.getBoundingClientRect().width ?? 0
const nextWidth = stickyCell.nextElementSibling?.getBoundingClientRect().width ?? 0
stickyCell.style.setProperty('--prev-width', `${prevWidth}px`)
stickyCell.style.setProperty('--next-width', `${nextWidth}px`)
}

const scrollLeft = currentRef.scrollLeft
const maxScrollLeft = currentRef.scrollWidth - currentRef.clientWidth || 0

const scrollReachedStart = scrollLeft <= 0
const scrollReachedEnd = maxScrollLeft <= 0 || scrollLeft >= maxScrollLeft

currentRef.classList.toggle('smarthr-ui-TableReel-scroll-reached-start', scrollReachedStart)
currentRef.classList.toggle('smarthr-ui-TableReel-scroll-reached-end', scrollReachedEnd)
}
handleScroll()

Expand Down
19 changes: 0 additions & 19 deletions packages/smarthr-ui/src/components/Table/useReelShadow.ts
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion packages/smarthr-ui/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "./lib",
"lib": ["es2020", "dom"],
"lib": ["es2020", "dom", "DOM.Iterable"],
"target": "es2020",
"module": "commonjs",
"moduleResolution": "node",
Expand Down
Loading