From 79b8aeeaf030323256827ccc0ed392c54c26cc8e Mon Sep 17 00:00:00 2001 From: awxxxxxx Date: Wed, 12 Feb 2025 15:46:04 +0800 Subject: [PATCH 1/4] feat(ProTable): update pin style shadow --- .../uikit/src/biz/Table/ProTable/helpers.tsx | 101 +++++++++++++++++- stories/uikit/biz/ProTable.stories.tsx | 2 +- 2 files changed, 100 insertions(+), 3 deletions(-) diff --git a/packages/uikit/src/biz/Table/ProTable/helpers.tsx b/packages/uikit/src/biz/Table/ProTable/helpers.tsx index 365df7fdb..87714defe 100644 --- a/packages/uikit/src/biz/Table/ProTable/helpers.tsx +++ b/packages/uikit/src/biz/Table/ProTable/helpers.tsx @@ -2,7 +2,7 @@ import { isFunction } from 'lodash-es' import { type MRT_TableOptions, type MRT_RowData, useMantineReactTable, MRT_TableInstance } from 'mantine-react-table' import { IconSwitchVertical02, IconArrowUp, IconArrowDown } from '../../../icons/index.js' -import { type BoxProps, useMantineTheme } from '../../../primitive/index.js' +import { type BoxProps, useComputedColorScheme, useMantineTheme } from '../../../primitive/index.js' import { mergeSxList } from '../../../utils/index.js' import { ProTableExtraProps, ProTableOptions } from './types.js' @@ -67,6 +67,9 @@ export function mergeProTableProps>(props: ProTabl } = props const theme = useMantineTheme() + const colorScheme = useComputedColorScheme() + const isDark = colorScheme === 'dark' + const mPaperProps = mergeMProps['mantinePaperProps']>>( { shadow: 'none', @@ -162,6 +165,36 @@ export function mergeProTableProps>(props: ProTabl }, '.mrt-table-head-cell-resize-handle': { marginRight: -7 + }, + '&[data-column-pinned]': { + '&::before': { + pointerEvents: 'none', + content: '""', + height: '100%', + position: 'absolute', + top: 0, + width: 6, + zIndex: -2 + }, + + "&[data-column-pinned='left']": { + '&[data-last-left-pinned]': { + boxShadow: 'none', + '&::before': { + left: '100%', + boxShadow: `6px 0px 6px -6px ${boxShadowColor} inset` + } + } + }, + "&[data-column-pinned='right']": { + '&[data-first-right-pinned]': { + boxShadow: 'none', + '&::before': { + right: '100%', + boxShadow: `-6px 0px 6px -6px ${boxShadowColor} inset` + } + } + } } } } @@ -173,6 +206,10 @@ export function mergeProTableProps>(props: ProTabl } }, mantineTableBodyCellProps) + // see https://github.com/KevinVandy/mantine-react-table/blob/33cda81122d62fd8064af9d51ccf7f7b7250c4bc/packages/mantine-react-table/src/components/body/MRT_TableBodyRow.module.css#L53-L99 + + const boxShadowColor = `color-mix(in srgb, var(${isDark ? '--mantine-color-dark-outline' : '--mantine-color-gray-outline'}), transparent 50%)` + const mTableBodyRowProps = mergeMProps['mantineTableBodyRowProps']>>(() => { return { sx: { @@ -187,6 +224,33 @@ export function mergeProTableProps>(props: ProTabl }, '&:not([data-selected], [data-row-pinned]) td[data-column-pinned]::before': { backgroundColor: 'transparent' + }, + td: { + '&[data-column-pinned]': { + "&[data-column-pinned='left']": { + '&[data-last-left-pinned]': { + overflow: 'visible', + '&::before': { + pointerEvents: 'none', + left: '100%', + width: 6, + boxShadow: `6px 0px 6px -6px ${boxShadowColor} inset !important` + } + } + }, + "&[data-column-pinned='right']": { + '&[data-first-right-pinned]': { + overflow: 'visible', + '&::before': { + pointerEvents: 'none', + width: 6, + left: 'unset', + right: '100%', + boxShadow: `-6px 0px 6px -6px ${boxShadowColor} inset !important` + } + } + } + } } } } @@ -224,7 +288,40 @@ export function mergeProTableProps>(props: ProTabl const mTableFooterCellProps = mergeMProps['mantineTableFooterCellProps']>>( { - p: 8 + p: 8, + sx: { + '&[data-column-pinned]': { + '&::before': { + pointerEvents: 'none', + content: '""', + height: '100%', + position: 'absolute', + top: 0, + width: 6 + }, + + "&[data-column-pinned='left']": { + '&[data-last-left-pinned]': { + boxShadow: 'none', + zIndex: 2, + '&::before': { + top: 0, + left: '100%', + boxShadow: `6px 0px 6px -6px ${boxShadowColor} inset` + } + } + }, + "&[data-column-pinned='right']": { + '&[data-first-right-pinned]': { + boxShadow: 'none', + '&::before': { + right: '100%', + boxShadow: `-6px 0px 6px -6px ${boxShadowColor} inset` + } + } + } + } + } }, mantineTableFooterCellProps ) diff --git a/stories/uikit/biz/ProTable.stories.tsx b/stories/uikit/biz/ProTable.stories.tsx index e7a2c66e8..67a71f7ab 100644 --- a/stories/uikit/biz/ProTable.stories.tsx +++ b/stories/uikit/biz/ProTable.stories.tsx @@ -128,7 +128,7 @@ export const Primary: Story = { }, state: { columnVisibility: {}, - columnPinning: { left: ['position'] } + columnPinning: { left: ['position'], right: ['mass'] } }, enablePagination: true, rowCount: 0, From 4ef5a23134e05a375b438fe5c89cb46361f4ccbc Mon Sep 17 00:00:00 2001 From: awxxxxxx Date: Wed, 12 Feb 2025 16:50:42 +0800 Subject: [PATCH 2/4] fix(ProTable): pin dark style --- packages/uikit/src/biz/Table/ProTable/helpers.tsx | 11 +++++++++-- stories/uikit/biz/ProTable.stories.tsx | 2 +- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/uikit/src/biz/Table/ProTable/helpers.tsx b/packages/uikit/src/biz/Table/ProTable/helpers.tsx index 87714defe..0d2d24092 100644 --- a/packages/uikit/src/biz/Table/ProTable/helpers.tsx +++ b/packages/uikit/src/biz/Table/ProTable/helpers.tsx @@ -179,7 +179,7 @@ export function mergeProTableProps>(props: ProTabl "&[data-column-pinned='left']": { '&[data-last-left-pinned]': { - boxShadow: 'none', + boxShadow: 'none !important', '&::before': { left: '100%', boxShadow: `6px 0px 6px -6px ${boxShadowColor} inset` @@ -188,7 +188,7 @@ export function mergeProTableProps>(props: ProTabl }, "&[data-column-pinned='right']": { '&[data-first-right-pinned]': { - boxShadow: 'none', + boxShadow: 'none !important', '&::before': { right: '100%', boxShadow: `-6px 0px 6px -6px ${boxShadowColor} inset` @@ -225,6 +225,13 @@ export function mergeProTableProps>(props: ProTabl '&:not([data-selected], [data-row-pinned]) td[data-column-pinned]::before': { backgroundColor: 'transparent' }, + '&[data-hover]': { + '&:hover': { + 'td[data-column-pinned]': { + backgroundColor: 'var(--mrt-row-hover-background-color)' + } + } + }, td: { '&[data-column-pinned]': { "&[data-column-pinned='left']": { diff --git a/stories/uikit/biz/ProTable.stories.tsx b/stories/uikit/biz/ProTable.stories.tsx index 67a71f7ab..b72b59d44 100644 --- a/stories/uikit/biz/ProTable.stories.tsx +++ b/stories/uikit/biz/ProTable.stories.tsx @@ -128,7 +128,7 @@ export const Primary: Story = { }, state: { columnVisibility: {}, - columnPinning: { left: ['position'], right: ['mass'] } + columnPinning: { left: [], right: ['mass'] } }, enablePagination: true, rowCount: 0, From 9fef8750fd59125e944bc0f26e3957299d1c9d66 Mon Sep 17 00:00:00 2001 From: awxxxxxx Date: Wed, 12 Feb 2025 18:22:20 +0800 Subject: [PATCH 3/4] fix(ProTable): shadow overflow --- .../uikit/src/biz/Table/ProTable/helpers.tsx | 63 ++++++------------- stories/uikit/biz/ProTable.stories.tsx | 8 ++- 2 files changed, 24 insertions(+), 47 deletions(-) diff --git a/packages/uikit/src/biz/Table/ProTable/helpers.tsx b/packages/uikit/src/biz/Table/ProTable/helpers.tsx index 0d2d24092..4d8845f45 100644 --- a/packages/uikit/src/biz/Table/ProTable/helpers.tsx +++ b/packages/uikit/src/biz/Table/ProTable/helpers.tsx @@ -167,34 +167,22 @@ export function mergeProTableProps>(props: ProTabl marginRight: -7 }, '&[data-column-pinned]': { - '&::before': { - pointerEvents: 'none', - content: '""', - height: '100%', - position: 'absolute', - top: 0, - width: 6, - zIndex: -2 - }, - "&[data-column-pinned='left']": { '&[data-last-left-pinned]': { boxShadow: 'none !important', - '&::before': { - left: '100%', + '+ th': { boxShadow: `6px 0px 6px -6px ${boxShadowColor} inset` } } }, "&[data-column-pinned='right']": { '&[data-first-right-pinned]': { - boxShadow: 'none !important', - '&::before': { - right: '100%', - boxShadow: `-6px 0px 6px -6px ${boxShadowColor} inset` - } + boxShadow: 'none !important' } } + }, + ":has(+ th[data-column-pinned][data-column-pinned='right'][data-first-right-pinned])": { + boxShadow: `-6px 0px 6px -6px ${boxShadowColor} inset` } } } @@ -236,27 +224,25 @@ export function mergeProTableProps>(props: ProTabl '&[data-column-pinned]': { "&[data-column-pinned='left']": { '&[data-last-left-pinned]': { - overflow: 'visible', '&::before': { + display: 'none' + }, + '+ td': { pointerEvents: 'none', - left: '100%', - width: 6, - boxShadow: `6px 0px 6px -6px ${boxShadowColor} inset !important` + boxShadow: `6px 0px 6px -6px ${boxShadowColor} inset` } } }, "&[data-column-pinned='right']": { '&[data-first-right-pinned]': { - overflow: 'visible', '&::before': { - pointerEvents: 'none', - width: 6, - left: 'unset', - right: '100%', - boxShadow: `-6px 0px 6px -6px ${boxShadowColor} inset !important` + display: 'none' } } } + }, + ":has(+ td[data-column-pinned][data-column-pinned='right'][data-first-right-pinned])": { + boxShadow: `-6px 0px 6px -6px ${boxShadowColor} inset` } } } @@ -298,35 +284,24 @@ export function mergeProTableProps>(props: ProTabl p: 8, sx: { '&[data-column-pinned]': { - '&::before': { - pointerEvents: 'none', - content: '""', - height: '100%', - position: 'absolute', - top: 0, - width: 6 - }, + boxShadow: 'none', "&[data-column-pinned='left']": { '&[data-last-left-pinned]': { boxShadow: 'none', - zIndex: 2, - '&::before': { - top: 0, - left: '100%', + '+ th': { boxShadow: `6px 0px 6px -6px ${boxShadowColor} inset` } } }, "&[data-column-pinned='right']": { '&[data-first-right-pinned]': { - boxShadow: 'none', - '&::before': { - right: '100%', - boxShadow: `-6px 0px 6px -6px ${boxShadowColor} inset` - } + boxShadow: 'none' } } + }, + ":has(+ th[data-column-pinned][data-column-pinned='right'][data-first-right-pinned])": { + boxShadow: `-6px 0px 6px -6px ${boxShadowColor} inset` } } }, diff --git a/stories/uikit/biz/ProTable.stories.tsx b/stories/uikit/biz/ProTable.stories.tsx index b72b59d44..145936b57 100644 --- a/stories/uikit/biz/ProTable.stories.tsx +++ b/stories/uikit/biz/ProTable.stories.tsx @@ -42,7 +42,7 @@ const data = [ { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' }, { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' }, { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' }, - { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' }, + { position: 56, mass: 137.33, symbol: 'Ba', name: 'Bard' }, { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' }, { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' }, { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' }, @@ -69,11 +69,13 @@ const columns: MRT_ColumnDef<{}>[] = [ { header: 'Symbol', accessorKey: 'symbol', - footer: 'Symbol' + footer: 'Symbol', + enableResizing: false }, { header: 'Mass', accessorKey: 'mass', + enableResizing: false, mantineTableHeadCellProps: { align: 'right' }, @@ -128,7 +130,7 @@ export const Primary: Story = { }, state: { columnVisibility: {}, - columnPinning: { left: [], right: ['mass'] } + columnPinning: { left: ['position'], right: ['mass'] } }, enablePagination: true, rowCount: 0, From 25ae0900d530a7eaedc079990e3584de535e5020 Mon Sep 17 00:00:00 2001 From: awxxxxxx Date: Thu, 13 Feb 2025 11:27:04 +0800 Subject: [PATCH 4/4] Revert "fix(ProTable): shadow overflow" This reverts commit 9fef8750fd59125e944bc0f26e3957299d1c9d66. --- .../uikit/src/biz/Table/ProTable/helpers.tsx | 63 +++++++++++++------ stories/uikit/biz/ProTable.stories.tsx | 8 +-- 2 files changed, 47 insertions(+), 24 deletions(-) diff --git a/packages/uikit/src/biz/Table/ProTable/helpers.tsx b/packages/uikit/src/biz/Table/ProTable/helpers.tsx index 4d8845f45..0d2d24092 100644 --- a/packages/uikit/src/biz/Table/ProTable/helpers.tsx +++ b/packages/uikit/src/biz/Table/ProTable/helpers.tsx @@ -167,22 +167,34 @@ export function mergeProTableProps>(props: ProTabl marginRight: -7 }, '&[data-column-pinned]': { + '&::before': { + pointerEvents: 'none', + content: '""', + height: '100%', + position: 'absolute', + top: 0, + width: 6, + zIndex: -2 + }, + "&[data-column-pinned='left']": { '&[data-last-left-pinned]': { boxShadow: 'none !important', - '+ th': { + '&::before': { + left: '100%', boxShadow: `6px 0px 6px -6px ${boxShadowColor} inset` } } }, "&[data-column-pinned='right']": { '&[data-first-right-pinned]': { - boxShadow: 'none !important' + boxShadow: 'none !important', + '&::before': { + right: '100%', + boxShadow: `-6px 0px 6px -6px ${boxShadowColor} inset` + } } } - }, - ":has(+ th[data-column-pinned][data-column-pinned='right'][data-first-right-pinned])": { - boxShadow: `-6px 0px 6px -6px ${boxShadowColor} inset` } } } @@ -224,25 +236,27 @@ export function mergeProTableProps>(props: ProTabl '&[data-column-pinned]': { "&[data-column-pinned='left']": { '&[data-last-left-pinned]': { + overflow: 'visible', '&::before': { - display: 'none' - }, - '+ td': { pointerEvents: 'none', - boxShadow: `6px 0px 6px -6px ${boxShadowColor} inset` + left: '100%', + width: 6, + boxShadow: `6px 0px 6px -6px ${boxShadowColor} inset !important` } } }, "&[data-column-pinned='right']": { '&[data-first-right-pinned]': { + overflow: 'visible', '&::before': { - display: 'none' + pointerEvents: 'none', + width: 6, + left: 'unset', + right: '100%', + boxShadow: `-6px 0px 6px -6px ${boxShadowColor} inset !important` } } } - }, - ":has(+ td[data-column-pinned][data-column-pinned='right'][data-first-right-pinned])": { - boxShadow: `-6px 0px 6px -6px ${boxShadowColor} inset` } } } @@ -284,24 +298,35 @@ export function mergeProTableProps>(props: ProTabl p: 8, sx: { '&[data-column-pinned]': { - boxShadow: 'none', + '&::before': { + pointerEvents: 'none', + content: '""', + height: '100%', + position: 'absolute', + top: 0, + width: 6 + }, "&[data-column-pinned='left']": { '&[data-last-left-pinned]': { boxShadow: 'none', - '+ th': { + zIndex: 2, + '&::before': { + top: 0, + left: '100%', boxShadow: `6px 0px 6px -6px ${boxShadowColor} inset` } } }, "&[data-column-pinned='right']": { '&[data-first-right-pinned]': { - boxShadow: 'none' + boxShadow: 'none', + '&::before': { + right: '100%', + boxShadow: `-6px 0px 6px -6px ${boxShadowColor} inset` + } } } - }, - ":has(+ th[data-column-pinned][data-column-pinned='right'][data-first-right-pinned])": { - boxShadow: `-6px 0px 6px -6px ${boxShadowColor} inset` } } }, diff --git a/stories/uikit/biz/ProTable.stories.tsx b/stories/uikit/biz/ProTable.stories.tsx index 145936b57..b72b59d44 100644 --- a/stories/uikit/biz/ProTable.stories.tsx +++ b/stories/uikit/biz/ProTable.stories.tsx @@ -42,7 +42,7 @@ const data = [ { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' }, { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' }, { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' }, - { position: 56, mass: 137.33, symbol: 'Ba', name: 'Bard' }, + { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' }, { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' }, { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' }, { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' }, @@ -69,13 +69,11 @@ const columns: MRT_ColumnDef<{}>[] = [ { header: 'Symbol', accessorKey: 'symbol', - footer: 'Symbol', - enableResizing: false + footer: 'Symbol' }, { header: 'Mass', accessorKey: 'mass', - enableResizing: false, mantineTableHeadCellProps: { align: 'right' }, @@ -130,7 +128,7 @@ export const Primary: Story = { }, state: { columnVisibility: {}, - columnPinning: { left: ['position'], right: ['mass'] } + columnPinning: { left: [], right: ['mass'] } }, enablePagination: true, rowCount: 0,