feat: add highlight selection to S2 TableView #9811
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -33,7 +33,6 @@ import { | |
| TableHeaderProps as RACTableHeaderProps, | ||
| TableProps as RACTableProps, | ||
| ResizableTableContainer, | ||
| TableBodyRenderProps, | ||
| TableLayout, | ||
| TableLoadMoreItem, | ||
|
|
@@ -59,6 +58,7 @@ import {getOwnerDocument} from 'react-aria/private/utils/domHelpers'; | |
| import {GridNode} from 'react-stately/private/grid/GridCollection'; | ||
| import {IconContext} from './Icon'; | ||
| import intlMessages from '../intl/*.json'; | ||
| import {isFirstItem, isNextSelected} from './ListView'; | ||
| import {Key} from '@react-types/shared'; | ||
| import {LayoutNode} from 'react-stately/private/layout/ListLayout'; | ||
| import {Menu, MenuItem, MenuSection, MenuTrigger} from './Menu'; | ||
|
|
@@ -121,7 +121,8 @@ interface S2TableProps { | |
| /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */ | ||
| onLoadMore?: () => any, | ||
| /** Provides the ActionBar to display when rows are selected in the TableView. */ | ||
| renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement, | ||
| selectionStyle?: 'checkbox' | 'highlight' | ||
yihuiliao marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
|
|
||
| // TODO: Note that loadMore and loadingState are now on the Table instead of on the TableBody | ||
|
|
@@ -130,7 +131,7 @@ export interface TableViewProps extends Omit<RACTableProps, 'style' | 'className | |
| styles?: StylesPropWithHeight | ||
| } | ||
|
|
||
| let InternalTableContext = createContext<TableViewProps & {layout?: S2TableLayout<unknown>, setIsInResizeMode?:(val: boolean) => void, isInResizeMode?: boolean, selectionMode?: 'none' | 'single' | 'multiple', selectionStyle?: 'checkbox' | 'highlight'}>({}); | ||
|
|
||
| const tableWrapper = style({ | ||
| minHeight: 0, | ||
|
|
@@ -300,6 +301,7 @@ export const TableView = forwardRef(function TableView(props: TableViewProps, re | |
| onAction, | ||
| onLoadMore, | ||
| selectionMode = 'none', | ||
| selectionStyle = 'checkbox', | ||
| ...otherProps | ||
| } = props; | ||
|
|
||
|
|
@@ -325,8 +327,9 @@ export const TableView = forwardRef(function TableView(props: TableViewProps, re | |
| onLoadMore, | ||
| isInResizeMode, | ||
| setIsInResizeMode, | ||
| selectionMode, | ||
| selectionStyle | ||
| }), [isQuiet, density, overflowMode, loadingState, onLoadMore, isInResizeMode, setIsInResizeMode, selectionMode, selectionStyle]); | ||
|
|
||
| let scrollRef = useRef<HTMLElement | null>(null); | ||
| let isCheckboxSelection = selectionMode === 'multiple' || selectionMode === 'single'; | ||
|
|
@@ -371,7 +374,7 @@ export const TableView = forwardRef(function TableView(props: TableViewProps, re | |
| isCheckboxSelection, | ||
| isQuiet | ||
| })} | ||
| selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'} | ||
| selectionMode={selectionMode} | ||
| onRowAction={onAction} | ||
| {...otherProps} | ||
|
|
@@ -487,7 +490,7 @@ const cellFocus = { | |
| } as const; | ||
|
|
||
| function CellFocusRing() { | ||
| return <div role="presentation" className={style({...cellFocus, position: 'absolute', inset: 0, pointerEvents: 'none', top: 0, bottom: '[-1px]'})({isFocusVisible: true})} />; | ||
| } | ||
|
|
||
| const columnStyles = style({ | ||
|
|
@@ -552,14 +555,14 @@ export interface ColumnProps extends Omit<RACColumnProps, 'style' | 'className' | |
| * A column within a `<Table>`. | ||
| */ | ||
| export const Column = forwardRef(function Column(props: ColumnProps, ref: DOMRef<HTMLDivElement>) { | ||
| let {isQuiet, selectionStyle} = useContext(InternalTableContext); | ||
| let {allowsResizing, children, align = 'start'} = props; | ||
| let domRef = useDOMRef(ref); | ||
| let isMenu = allowsResizing || !!props.menuItems; | ||
|
|
||
|
|
||
| return ( | ||
| <RACColumn {...props} ref={domRef} style={{borderInlineEndColor: 'transparent'}} className={renderProps => columnStyles({...renderProps, isMenu, align, isQuiet, selectionStyle})}> | ||
| {({allowsSorting, sortDirection, isFocusVisible, sort, startResize}) => ( | ||
| <> | ||
| {/* Note this is mainly for column's without a dropdown menu. If there is a dropdown menu, the button is styled to have a focus ring for simplicity | ||
|
|
@@ -903,7 +906,7 @@ export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style | |
| export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableHeader<T extends object>({columns, dependencies, children}: TableHeaderProps<T>, ref: DOMRef<HTMLDivElement>) { | ||
| let scale = useScale(); | ||
| let {selectionBehavior, selectionMode} = useTableOptions(); | ||
| let {isQuiet, selectionStyle} = useContext(InternalTableContext); | ||
| let domRef = useDOMRef(ref); | ||
|
|
||
| return ( | ||
|
|
@@ -912,7 +915,7 @@ export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function | |
| ref={domRef} | ||
| className={tableHeader}> | ||
| {/* Add extra columns for selection. */} | ||
| {selectionBehavior === 'toggle' && selectionStyle === 'checkbox' && ( | ||
| // Also isSticky prop is applied just for the layout, will decide what the RAC api should be later | ||
| // @ts-ignore | ||
| (<RACColumn isSticky width={scale === 'medium' ? 40 : 52} minWidth={scale === 'medium' ? 40 : 52} className={selectAllCheckboxColumn({isQuiet})}> | ||
|
|
@@ -992,20 +995,38 @@ const cell = style<CellRenderProps & S2TableProps & {isDivider: boolean, isTreeC | |
| fontSize: controlFont(), | ||
| alignItems: 'center', | ||
| display: 'flex', | ||
| // borderStyle: { | ||
| // default: 'none', | ||
| // isDivider: 'solid' | ||
| // }, | ||
| // borderEndWidth: { | ||
| // default: 0, | ||
| // isDivider: 1 | ||
| // }, | ||
| boxShadow: { | ||
| isDivider: { | ||
| default: '[inset -1px 0 0 var(--borderColorGray)]' | ||
| // isFirstItem: '[inset -1px 0 0 var(--borderColorGray), inset 0px 1px 0px var(--borderColorBlue)]' | ||
| } | ||
| }, | ||
| zIndex: -1 | ||
| // borderColor: { | ||
| // default: 'gray-300', | ||
| // forcedColors: 'ButtonBorder' | ||
| // } | ||
| }); | ||
|
|
||
| // const divider = raw( | ||
| // `&:before { | ||
| // content: ""; | ||
| // position: absolute; | ||
| // inset-inline-end: 0; | ||
| // top: 0, | ||
| // width: 1px; | ||
| // height: 100%; | ||
| // background-color: var(--borderColorGray)}` | ||
| // ); | ||
|
|
||
| const stickyCell = { | ||
| backgroundColor: 'gray-25' | ||
| } as const; | ||
|
|
@@ -1065,6 +1086,7 @@ export const Cell = forwardRef(function Cell(props: CellProps, ref: DOMRef<HTMLD | |
| let {children, isSticky, showDivider = false, align, textValue, ...otherProps} = props; | ||
| let domRef = useDOMRef(ref); | ||
| let tableVisualOptions = useContext(InternalTableContext); | ||
| // let {isFirstItem} = useContext(InternalRowContext); | ||
yihuiliao marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| textValue ||= typeof children === 'string' ? children : undefined; | ||
|
|
||
| return ( | ||
|
|
@@ -1503,11 +1525,23 @@ const rowTextColor = { | |
| forcedColors: 'ButtonText' | ||
| } as const; | ||
|
|
||
| const row = style({ | ||
| height: 'full', | ||
| position: 'relative', | ||
| boxSizing: 'border-box', | ||
| backgroundColor: { | ||
| default: '--rowBackgroundColor', | ||
| selectionStyle: { | ||
| highlight: { | ||
| default: '--rowBackgroundColor', | ||
| isSelected: { | ||
| default: colorMix('gray-25', 'blue-900', 10), | ||
| isHovered: colorMix('gray-25', 'blue-900', 15), | ||
| isPressed: colorMix('gray-25', 'blue-900', 15) | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| '--rowBackgroundColor': { | ||
| type: 'backgroundColor', | ||
| value: rowBackgroundColor | ||
|
|
@@ -1548,18 +1582,90 @@ const row = style<RowRenderProps & S2TableProps>({ | |
| // } | ||
| // }, | ||
| outlineStyle: 'none', | ||
| // kinda unfortunate but the border is really only needed for the first item case. the issue is related to the divider | ||
| // essentially, the gray box shadow from the divider would appear on top of the blue box shadow but only for the first item | ||
| // in order for it to be on the bottom, i used border...couldn't figure out why this was only happening with box shadow | ||
| borderTopWidth: 0, | ||
| borderBottomWidth: { | ||
| selectionStyle: { | ||
| highlight: 0, | ||
| checkbox: 1 | ||
| } | ||
| }, | ||
| borderStartWidth: 0, | ||
| borderEndWidth: 0, | ||
| borderStyle: 'solid', | ||
| borderColor: { | ||
| selectionStyle: { | ||
| highlight: { | ||
| default: 'transparent' | ||
| // isFirstItem: { | ||
| // default: 'transparent', | ||
| // isSelected: 'blue-900' | ||
| // } | ||
| }, | ||
| checkbox: 'gray-300' | ||
| } | ||
| }, | ||
| '--borderColorGray': { | ||
| type: 'borderColor', | ||
| value: 'gray-300' | ||
| }, | ||
| '--borderColorBlue': { | ||
| type: 'borderColor', | ||
| value: 'blue-900' | ||
| }, | ||
| // to avoid affecting the layout, use box shadow instead | ||
| // also selected groups still have gray borders in between the items, hard to have two colors with borders because you'll get a diagonal line where the two borders meet | ||
| // have more control over how the borders are rendered using box shadow instead | ||
| // couldn't add an absolute positioned div because it would mess up the cell count | ||
| boxShadow: { | ||
|
Comment on lines
+1612
to
+1616
Member
There was a problem hiding this comment. I'm not sure I entirely understand this part, at the moment each table row renders just the bottom border right so could we just change the color of that border based on if the row is selected and is the last/first row in its selection group?
Member
There was a problem hiding this comment. Oh is it because of the top most row and if it is selected? Could we use a box shadow for that case only or something?
Member
Author
There was a problem hiding this comment. For highlight selection, the borders actually have a width of 0px. The reasoning for the borders having a width of 0px for highlight is for two reasons: 1) layout shifts 2) border rendering in browsers
Member
Author
There was a problem hiding this comment. The border for the first row is handled slightly differently due to issues with the CSS paint order. Initially, I also just used a box shadow to render the top border of the first item if it was selected, but if a cell has a divider, the divider gets rendered on top of it so you have a gray line on top of the blue line. So in order to fix that, I had to use a pseudo-element to basically force it on top of the divider. I tried isolation and z-indexes which didn't work
Member
There was a problem hiding this comment. hm gotcha, I actually used a outline here (kinda like the commented out code) for the "on" drop indicators, could we do the same here instead then? react-spectrum/packages/@react-spectrum/s2/src/TableView.tsx Lines 1744 to 1766 in 083f4e5 If not, I'm happy to switch my implementation to use box shadows completely, but whichever way we choose should be used for both "on" drop and highlight selection for sure |
||
| selectionStyle: { | ||
| highlight: { | ||
| default: '[inset 0px -1px 0px var(--borderColorGray)]', | ||
| isNextSelected: '[inset 0px -1px 0px var(--borderColorBlue)]', | ||
| isSelected: { | ||
| default: '[inset 0px -1px 0px var(--borderColorBlue), inset 1px 0px 0px var(--borderColorBlue), inset -1px 0px var(--borderColorBlue)]', | ||
| isNextSelected: '[inset 1px 0px 0px var(--borderColorBlue), inset -1px 0px var(--borderColorBlue), inset 0px -1px 0px var(--borderColorGray)]', | ||
| isFirstItem: { | ||
| default: '[inset 0px 1px 0px var(--borderColorBlue), inset 0px -1px 0px var(--borderColorBlue), inset 1px 0px 0px var(--borderColorBlue), inset -1px 0px var(--borderColorBlue)]', | ||
| isNextSelected: '[inset 1px 0px 0px var(--borderColorBlue), inset -1px 0px 0px var(--borderColorBlue), inset 0px -1px 0px var(--borderColorGray)]' | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| '--focusIndicatorHeight': { | ||
| type: 'top', | ||
| value: { | ||
| default: 'calc(self(height) - 1px)' | ||
| } | ||
| }, | ||
| isolation: 'isolate', | ||
| zIndex: 3, | ||
| forcedColorAdjust: 'none' | ||
| }); | ||
|
|
||
| const border = css( | ||
| `&:after { | ||
| content: ""; | ||
| width: 100%; | ||
| height: 100%; | ||
| top: 0; | ||
| inset-inline-start: 0; | ||
| z-index: 3; | ||
| position: absolute; | ||
| box-sizing: border-box; | ||
| border-top-width: 1px; | ||
| border-bottom-width: 0px; | ||
| border-inline-start-width: 0px; | ||
| border-inline-end-width: 0px; | ||
| border-style: solid; | ||
| border-color: var(--borderColorBlue); | ||
| } | ||
| ` | ||
| ); | ||
|
|
||
| const selectionCheckbox = style({ | ||
| visibility: { | ||
| default: 'visible', | ||
|
|
@@ -1574,7 +1680,7 @@ export interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'is | |
| */ | ||
| export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T extends object>({id, columns, children, dependencies = [], ...otherProps}: RowProps<T>, ref: DOMRef<HTMLDivElement>) { | ||
| let {selectionBehavior, selectionMode} = useTableOptions(); | ||
| let {selectionStyle, ...tableVisualOptions} = useContext(InternalTableContext); | ||
| let domRef = useDOMRef(ref); | ||
|
|
||
| return ( | ||
|
|
@@ -1585,8 +1691,13 @@ export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T e | |
| dependencies={[...dependencies, columns]} | ||
| className={renderProps => row({ | ||
| ...renderProps, | ||
| ...tableVisualOptions, | ||
| selectionStyle, | ||
| isNextSelected: isNextSelected(id, renderProps.state), | ||
| isFirstItem: isFirstItem(id, renderProps.state) | ||
| }) + (renderProps.isFocusVisible ? ' ' + css('&:before { content: ""; display: inline-block; position: sticky; inset-inline-start: 0; width: 3px; height: var(--focusIndicatorHeight); margin-inline-end: -3px; margin-block-end: 1px; z-index: 3; background-color: var(--rowFocusIndicatorColor)') : '') | ||
| + (isFirstItem(id, renderProps.state) && renderProps.isSelected && selectionStyle === 'highlight' ? ' ' + border : '') | ||
| } | ||
| {...otherProps}> | ||
| {selectionMode !== 'none' && selectionBehavior === 'toggle' && ( | ||
| // Not sure what we want to do with this className, in Cell it currently overrides the className that would have been applied. | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
moved to the utils file since it was being shared by ListView, TreeView, and TableView