feat(Table): support rtl (#1152)

gravity-ui · Feb 6, 2024 · 52b2794 · 52b2794
1 parent 5a44a5f
commit 52b2794
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 26 deletions.
diff --git 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
@@ -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)` |                        `— (&mdash;)`                        |
 | 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<string, any>`                    |                                                             |

diff --git 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
@@ -19,6 +19,16 @@ export interface TableDataItem {
 
 type ActiveScrollElementType = 'scrollBar' | 'scrollContainer';
 
+function normalizeSides(side: TableColumnConfig<any>['align'] | TableColumnConfig<any>['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<I> {
     /** 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<I extends TableDataItem = Record<string, string>> extends Rea
             <thead className={b('head')}>
                 <tr className={b('row')}>
                     {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<I extends TableDataItem = Record<string, string>> 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 (
                         <td
                             key={id}
@@ -574,9 +587,15 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
         }
 
         const filteredColumns =
-            column.sticky === 'left' ? columnsWidth.slice(0, index) : columnsWidth.slice(index + 1);
-        style[column.sticky] = filteredColumns.reduce<number>((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<number>((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
@@ -85,7 +85,7 @@ export const columns: TableColumnConfig<DataItem>[] = [
     {
         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
@@ -63,7 +63,7 @@ export const columns: TableColumnConfig<DataItem>[] = [
     {
         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
@@ -24,7 +24,7 @@ export function enhanceSystemColumn<I>(
     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
@@ -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
@@ -165,7 +165,7 @@ export function withTableSelection<I extends TableDataItem, E extends {} = {}>(
                 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
@@ -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
@@ -144,7 +144,7 @@ export function withTableSorting<I extends TableDataItem, E extends {} = {}>(
                                 </div>,
                             ];
 
-                            if (column.align === 'right') {
+                            if (column.align === 'right' || column.align === 'end') {
                                 content.reverse();
                             }