diff --git a/CODEOWNERS b/CODEOWNERS index fd4ca3ea1..6b38e9a92 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -38,7 +38,7 @@ /src/components/Spin @SeqviriouM /src/components/Stories @DarkGenius /src/components/Switch @zamkovskaya -#/src/components/Table +/src/components/Table @Raubzeug /src/components/Tabs @sofiushko /src/components/Text @IsaevAlexandr /src/components/controls/TextArea @korvin89 diff --git a/src/components/Table/README.md b/src/components/Table/README.md index 19dbca2b0..d94c91d80 100644 --- a/src/components/Table/README.md +++ b/src/components/Table/README.md @@ -59,8 +59,8 @@ Additional functionality is enabled via HOCs: | className | CSS-class that will be added to all cells in the column | `string` | | | placeholder | The stub when there is no data in a cell | `string` `((item: any, index: number) => React.ReactNode)` | `— (—)` | | template | Cell contents. If you skip a row, the cell contents will be the value of the field with the same name as this row. | `string` `((item: any, index: number) => React.ReactNode)` | The value of the field with the name equal to the column ID | -| align | Content alignment | `"left"` `"center"` `"right"` | | -| sticky | Sticky column | `"left"` `"right"` | | +| align | Content alignment | `"start"` `"center"` `"end"` | | +| sticky | Sticky column | `"start"` `"end"` | | | primary | Distinguishes a column among other | `boolean` | | | width | Column's content width in px | `number` `string` | | | meta | Various data, HOC settings | `Record` | | diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss index 295a3029d..09f28fa59 100644 --- a/src/components/Table/Table.scss +++ b/src/components/Table/Table.scss @@ -74,12 +74,12 @@ text-align: center; } - &_align_right { + &_align_end { text-align: end; } - #{variables.$block} &_sticky_left, - #{variables.$block} &_sticky_right { + #{variables.$block} &_sticky_start, + #{variables.$block} &_sticky_end { position: sticky; z-index: 2; @@ -130,8 +130,8 @@ background-color: var(--g-color-base-simple-hover-solid); cursor: pointer; - #{variables.$block}__cell_sticky_left, - #{variables.$block}__cell_sticky_right { + #{variables.$block}__cell_sticky_start, + #{variables.$block}__cell_sticky_end { background: var(--g-color-base-simple-hover-solid); } } diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index d62a1944a..057e246e9 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -19,6 +19,16 @@ export interface TableDataItem { type ActiveScrollElementType = 'scrollBar' | 'scrollContainer'; +function normalizeSides(side: TableColumnConfig['align'] | TableColumnConfig['sticky']) { + if (side === 'left') { + return 'start'; + } + if (side === 'right') { + return 'end'; + } + return side; +} + interface TableState { // activeScrollElement is required so listener on table scroll won't fire when scrollbar will appear (and vice-versa) // without that page will wobble on scrolling @@ -39,9 +49,9 @@ export interface TableColumnConfig { /** Cell contents. If you pass a row, the cell contents will be the value of the field named the same as this row. By default: The value of the field with the name equal to the column ID */ template?: string | ((item: I, index: number) => React.ReactNode); /** Content alignment. */ - align?: 'left' | 'center' | 'right'; + align?: 'start' | 'end' | 'center' | 'left' | 'right'; /** Sticky column. */ - sticky?: 'left' | 'right'; + sticky?: 'start' | 'end' | 'left' | 'right'; /** Distinguishes a column among other. */ primary?: boolean; /** Column width in px or in %. Width can behave unexpectedly (it's more like min-width in block-elements). Sometimes you want to use `table-layout: fixed` */ @@ -385,7 +395,9 @@ export class Table> extends Rea {columns.map((column, index) => { - const {id, align, primary, sticky, className} = column; + const {id, align: rawAlign, primary, sticky: rawSticky, className} = column; + const align = normalizeSides(rawAlign); + const sticky = normalizeSides(rawSticky); const content = Table.getHeadCellContent(column); return ( @@ -486,9 +498,10 @@ export class Table> extends Rea )} > {columns.map((column, colIndex) => { - const {id, align, primary, className, sticky} = column; + const {id, align: rawAlign, primary, className, sticky: rawSticky} = column; const content = Table.getBodyCellContent(column, item, rowIndex); - + const align = normalizeSides(rawAlign); + const sticky = normalizeSides(rawSticky); return ( > extends Rea } const filteredColumns = - column.sticky === 'left' ? columnsWidth.slice(0, index) : columnsWidth.slice(index + 1); - style[column.sticky] = filteredColumns.reduce((left, width) => { - return _isNumber(width) ? left + width : left; + column.sticky === 'left' || column.sticky === 'start' + ? columnsWidth.slice(0, index) + : columnsWidth.slice(index + 1); + const styleName: keyof React.CSSProperties = + column.sticky === 'left' || column.sticky === 'start' + ? 'insetInlineStart' + : 'insetInlineEnd'; + style[styleName] = filteredColumns.reduce((start, width) => { + return _isNumber(width) ? start + width : start; }, 0); return style; diff --git a/src/components/Table/__stories__/utils.tsx b/src/components/Table/__stories__/utils.tsx index 7d06e2b4f..77ccc5840 100644 --- a/src/components/Table/__stories__/utils.tsx +++ b/src/components/Table/__stories__/utils.tsx @@ -85,7 +85,7 @@ export const columns: TableColumnConfig[] = [ { id: 'count', name: 'Count', - align: 'right', + align: 'end', }, { id: 'date', diff --git a/src/components/Table/__tests__/utils.ts b/src/components/Table/__tests__/utils.ts index b81b3ca3e..588fdee34 100644 --- a/src/components/Table/__tests__/utils.ts +++ b/src/components/Table/__tests__/utils.ts @@ -63,7 +63,7 @@ export const columns: TableColumnConfig[] = [ { id: 'count', name: 'Count', - align: 'right', + align: 'end', }, { id: 'date', diff --git a/src/components/Table/hoc/withTableActions/withTableActions.tsx b/src/components/Table/hoc/withTableActions/withTableActions.tsx index 017902104..d770c3a9c 100644 --- a/src/components/Table/hoc/withTableActions/withTableActions.tsx +++ b/src/components/Table/hoc/withTableActions/withTableActions.tsx @@ -24,7 +24,7 @@ export function enhanceSystemColumn( const systemColumn = existedColumn || { id: actionsColumnId, name: '', - sticky: 'right', + sticky: 'end', width: 28, // button width placeholder: '', }; diff --git a/src/components/Table/hoc/withTableSelection/withTableSelection.scss b/src/components/Table/hoc/withTableSelection/withTableSelection.scss index 1033365f8..1cec4edce 100644 --- a/src/components/Table/hoc/withTableSelection/withTableSelection.scss +++ b/src/components/Table/hoc/withTableSelection/withTableSelection.scss @@ -25,8 +25,8 @@ $checkboxWidth: 17px; &__row_selected { background: var(--g-color-base-selection); - #{variables.$block}__cell_sticky_left, - #{variables.$block}__cell_sticky_right { + #{variables.$block}__cell_sticky_start, + #{variables.$block}__cell_sticky_end { background: linear-gradient( to right, var(--g-color-base-selection), @@ -42,8 +42,8 @@ $checkboxWidth: 17px; &#{variables.$block}__row_interactive:hover { background: var(--g-color-base-selection-hover); - #{variables.$block}__cell_sticky_left, - #{variables.$block}__cell_sticky_right { + #{variables.$block}__cell_sticky_start, + #{variables.$block}__cell_sticky_end { background: linear-gradient( to right, var(--g-color-base-selection-hover), diff --git a/src/components/Table/hoc/withTableSelection/withTableSelection.tsx b/src/components/Table/hoc/withTableSelection/withTableSelection.tsx index 6a068dc8a..b28f95194 100644 --- a/src/components/Table/hoc/withTableSelection/withTableSelection.tsx +++ b/src/components/Table/hoc/withTableSelection/withTableSelection.tsx @@ -165,7 +165,7 @@ export function withTableSelection( name: this.renderHeadCell, template: this.renderBodyCell, className: b('checkbox_cell'), - sticky: _get(columns, [0, 'sticky']) === 'left' ? 'left' : undefined, + sticky: _get(columns, [0, 'sticky']) === 'start' ? 'start' : undefined, }; return [selectionColumn, ...columns]; diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.scss b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.scss index 46f903355..d962bd6a0 100644 --- a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.scss +++ b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.scss @@ -52,7 +52,7 @@ $block: '.#{variables.$ns}table-column-setup'; &__item { // Increasing specificity for overrides &#{&} { - padding: 0 8px 0 32px; + padding-inline: 32px 8px; cursor: pointer; position: relative; diff --git a/src/components/Table/hoc/withTableSorting/withTableSorting.tsx b/src/components/Table/hoc/withTableSorting/withTableSorting.tsx index e83937e2f..713dfd0d0 100644 --- a/src/components/Table/hoc/withTableSorting/withTableSorting.tsx +++ b/src/components/Table/hoc/withTableSorting/withTableSorting.tsx @@ -144,7 +144,7 @@ export function withTableSorting( , ]; - if (column.align === 'right') { + if (column.align === 'right' || column.align === 'end') { content.reverse(); }