From a17560d774ff0ea63425e961466db4bb6062fcf1 Mon Sep 17 00:00:00 2001
From: alx-chernigin <alx-chernigin@yandex-team.ru>
Date: Tue, 1 Oct 2024 15:32:03 +0300
Subject: [PATCH] feat(Table): table actions column added

---
 .../TableActions/DefaultRowActions.scss       |  15 +++
 .../TableActions/DefaultRowActions.tsx        | 127 ++++++++++++++++++
 .../__stories__/TableActions.stories.tsx      |  25 ++++
 .../TableActions/__stories__/constants.tsx    |  64 +++++++++
 .../stories/TableActionsColumnStory.tsx       |  77 +++++++++++
 ...leActionsColumnWithVirtualizationStory.tsx |  38 ++++++
 .../TableSettingsWithActionsColumnStory.tsx   |  39 ++++++
 .../TableActions/__stories__/types.ts         |   7 +
 .../TableActions/__stories__/utils.ts         |  10 ++
 src/components/TableActions/i18n/en.json      |   3 +
 src/components/TableActions/i18n/index.ts     |  10 ++
 src/components/TableActions/i18n/ru.json      |   3 +
 src/components/TableActions/index.ts          |   2 +
 src/components/TableActions/types.ts          |  34 +++++
 src/components/index.ts                       |   1 +
 src/constants/actionsColumn.tsx               |  48 +++++++
 src/constants/index.ts                        |   2 +
 src/constants/settingsWithActionsColumn.ts    |  26 ++++
 18 files changed, 531 insertions(+)
 create mode 100644 src/components/TableActions/DefaultRowActions.scss
 create mode 100644 src/components/TableActions/DefaultRowActions.tsx
 create mode 100644 src/components/TableActions/__stories__/TableActions.stories.tsx
 create mode 100644 src/components/TableActions/__stories__/constants.tsx
 create mode 100644 src/components/TableActions/__stories__/stories/TableActionsColumnStory.tsx
 create mode 100644 src/components/TableActions/__stories__/stories/TableActionsColumnWithVirtualizationStory.tsx
 create mode 100644 src/components/TableActions/__stories__/stories/TableSettingsWithActionsColumnStory.tsx
 create mode 100644 src/components/TableActions/__stories__/types.ts
 create mode 100644 src/components/TableActions/__stories__/utils.ts
 create mode 100644 src/components/TableActions/i18n/en.json
 create mode 100644 src/components/TableActions/i18n/index.ts
 create mode 100644 src/components/TableActions/i18n/ru.json
 create mode 100644 src/components/TableActions/index.ts
 create mode 100644 src/components/TableActions/types.ts
 create mode 100644 src/constants/actionsColumn.tsx
 create mode 100644 src/constants/settingsWithActionsColumn.ts

diff --git a/src/components/TableActions/DefaultRowActions.scss b/src/components/TableActions/DefaultRowActions.scss
new file mode 100644
index 0000000..137a596
--- /dev/null
+++ b/src/components/TableActions/DefaultRowActions.scss
@@ -0,0 +1,15 @@
+@use '@gravity-ui/uikit/styles/mixins';
+@use '../variables';
+
+$block: '.#{variables.$ns}table';
+$popupBlock: '#{$block}-action-popup';
+
+#{$popupBlock} {
+    &__menu {
+        @include mixins.max-height(200px);
+
+        &-item {
+            @include mixins.max-text-width(250px);
+        }
+    }
+}
diff --git a/src/components/TableActions/DefaultRowActions.tsx b/src/components/TableActions/DefaultRowActions.tsx
new file mode 100644
index 0000000..58dfc0a
--- /dev/null
+++ b/src/components/TableActions/DefaultRowActions.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+
+import {Ellipsis} from '@gravity-ui/icons';
+import type {PopupPlacement} from '@gravity-ui/uikit';
+import {Button, Icon, Menu, Popup, useUniqId} from '@gravity-ui/uikit';
+
+import {block} from '../../utils';
+
+import i18n from './i18n';
+import type {TableActionConfig, TableActionGroup, TableActionsSettings} from './types';
+
+import './DefaultRowActions.scss';
+
+type DefaultRowActionsProps<I> = Pick<
+    TableActionsSettings<I>,
+    'getRowActions' | 'rowActionsSize'
+> & {
+    item: I;
+    index: number;
+};
+
+const b = block('table');
+const actionsCn = b('actions');
+const actionsButtonCn = b('actions-button');
+
+const bPopup = block('table-action-popup');
+const menuCn = bPopup('menu');
+const menuItemCn = bPopup('menu-item');
+
+const DEFAULT_PLACEMENT: PopupPlacement = ['bottom-end', 'top-end', 'auto'];
+
+const isActionGroup = <I extends unknown>(
+    config: TableActionConfig<I>,
+): config is TableActionGroup<I> => {
+    return Array.isArray((config as TableActionGroup<I>).items);
+};
+
+export const DefaultRowActions = <I extends unknown>({
+    index: rowIndex,
+    item,
+    getRowActions,
+    rowActionsSize,
+}: DefaultRowActionsProps<I>) => {
+    const [isPopupOpen, setIsPopupOpen] = React.useState(false);
+    const anchorRef = React.useRef<HTMLButtonElement>(null);
+    const rowId = useUniqId();
+
+    if (getRowActions === undefined) {
+        return null;
+    }
+
+    const renderPopupMenuItem = (action: TableActionConfig<I>, index: number) => {
+        if (isActionGroup(action)) {
+            return (
+                <Menu.Group key={index} label={action.title}>
+                    {action.items.map(renderPopupMenuItem)}
+                </Menu.Group>
+            );
+        }
+
+        const {text, icon, handler, href, ...restProps} = action;
+
+        return (
+            <Menu.Item
+                key={index}
+                onClick={(event) => {
+                    event.stopPropagation();
+                    handler(item, index, event);
+
+                    setIsPopupOpen(false);
+                }}
+                href={typeof href === 'function' ? href(item, index) : href}
+                iconStart={icon}
+                className={menuItemCn}
+                {...restProps}
+            >
+                {text}
+            </Menu.Item>
+        );
+    };
+
+    const actions = getRowActions(item, rowIndex);
+
+    if (actions.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className={actionsCn}>
+            <Popup
+                open={isPopupOpen}
+                anchorRef={anchorRef}
+                placement={DEFAULT_PLACEMENT}
+                onOutsideClick={() => setIsPopupOpen(false)}
+                id={rowId}
+            >
+                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+                <div
+                    onClick={(event) => {
+                        event.stopPropagation();
+                    }}
+                >
+                    <Menu className={menuCn} size={rowActionsSize}>
+                        {actions.map(renderPopupMenuItem)}
+                    </Menu>
+                </div>
+            </Popup>
+            <Button
+                view="flat-secondary"
+                className={actionsButtonCn}
+                onClick={(event) => {
+                    setIsPopupOpen((value) => !value);
+                    event.stopPropagation();
+                }}
+                size={rowActionsSize}
+                ref={anchorRef}
+                extraProps={{
+                    'aria-label': i18n('label-actions'),
+                    'aria-expanded': isPopupOpen,
+                    'aria-controls': rowId,
+                }}
+            >
+                <Icon data={Ellipsis} />
+            </Button>
+        </div>
+    );
+};
diff --git a/src/components/TableActions/__stories__/TableActions.stories.tsx b/src/components/TableActions/__stories__/TableActions.stories.tsx
new file mode 100644
index 0000000..1b4f16b
--- /dev/null
+++ b/src/components/TableActions/__stories__/TableActions.stories.tsx
@@ -0,0 +1,25 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {TableActionsColumnStory} from './stories/TableActionsColumnStory';
+import {TableActionsColumnWithVirtualizationStory} from './stories/TableActionsColumnWithVirtualizationStory';
+import {TableSettingsWithActionsColumnStory} from './stories/TableSettingsWithActionsColumnStory';
+
+const meta: Meta = {
+    title: 'Table actions',
+};
+
+export default meta;
+
+export const ActionsColumn: StoryObj<typeof TableActionsColumnStory> = {
+    render: TableActionsColumnStory,
+};
+
+export const SettingsWithActionsColumn: StoryObj<typeof TableSettingsWithActionsColumnStory> = {
+    render: TableSettingsWithActionsColumnStory,
+};
+
+export const ActionsColumnWithVirtualizationStory: StoryObj<
+    typeof TableActionsColumnWithVirtualizationStory
+> = {
+    render: TableActionsColumnWithVirtualizationStory,
+};
diff --git a/src/components/TableActions/__stories__/constants.tsx b/src/components/TableActions/__stories__/constants.tsx
new file mode 100644
index 0000000..db881b4
--- /dev/null
+++ b/src/components/TableActions/__stories__/constants.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+
+import {Pencil} from '@gravity-ui/icons';
+import {Icon} from '@gravity-ui/uikit';
+import type {ColumnDef} from '@tanstack/react-table';
+
+import type {TableActionsSettings} from '../types';
+
+import type {Item} from './types';
+
+export const actionsSettings: TableActionsSettings<unknown> = {
+    getRowActions: (item, index) => [
+        {
+            text: 'default',
+            handler: () => {
+                alert(JSON.stringify(item));
+            },
+        },
+        {
+            text: 'with icon',
+            icon: <Icon data={Pencil} size={14} />,
+            handler: () => {},
+        },
+        {
+            text: 'disabled',
+            disabled: true,
+            handler: () => {},
+        },
+        {
+            text: 'danger theme',
+            theme: 'danger',
+            handler: () => {
+                alert(index);
+            },
+        },
+        {
+            text: 'with href',
+            theme: 'normal',
+            href: 'https://gravity-ui.com',
+            target: '_blank',
+            rel: 'noopener noreferrer',
+            handler: () => {},
+        },
+    ],
+};
+
+export const baseColumns: ColumnDef<Item>[] = [
+    {accessorKey: 'id', header: 'Index', size: 50},
+    {accessorKey: 'name', header: 'Name', size: 100},
+    {accessorKey: 'age', header: 'Age', size: 100},
+    {
+        id: 'name-age',
+        accessorFn: (item) => `${item.name}: ${item.age}`,
+        header: () => <b>Name: Age</b>,
+        cell: (info) => <i>{info.getValue<string>()}</i>,
+        maxSize: 200,
+        minSize: 100,
+    },
+    {
+        accessorKey: 'status',
+        header: 'Status',
+        size: 100,
+    },
+];
diff --git a/src/components/TableActions/__stories__/stories/TableActionsColumnStory.tsx b/src/components/TableActions/__stories__/stories/TableActionsColumnStory.tsx
new file mode 100644
index 0000000..738b09f
--- /dev/null
+++ b/src/components/TableActions/__stories__/stories/TableActionsColumnStory.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+
+import {Select} from '@gravity-ui/uikit';
+import type {ColumnDef, RowSelectionState} from '@tanstack/react-table';
+
+import {ACTIONS_COLUMN_ID, getActionsColumn, selectionColumn} from '../../../../constants';
+import {useTable} from '../../../../hooks';
+import {Table} from '../../../Table/Table';
+import {actionsSettings, baseColumns} from '../constants';
+import type {Item} from '../types';
+import {generateData} from '../utils';
+
+const data = generateData(5);
+
+const defaultColumns: ColumnDef<Item>[] = [
+    selectionColumn as ColumnDef<Item>,
+    ...baseColumns,
+    getActionsColumn<Item>(ACTIONS_COLUMN_ID, {
+        ...actionsSettings,
+    }),
+];
+
+const columnsWithRenderRowActions: ColumnDef<Item>[] = [
+    selectionColumn as ColumnDef<Item>,
+    ...baseColumns,
+    getActionsColumn<Item>(ACTIONS_COLUMN_ID, {
+        ...actionsSettings,
+        renderRowActions: ({index}) => {
+            if (index % 2) {
+                return null;
+            }
+
+            return (
+                <Select
+                    options={[
+                        {value: '1', text: 'action 1', content: 'action 1'},
+                        {value: '2', text: 'action 2', content: 'action 2'},
+                        {value: '3', text: 'action 3', content: 'action 3'},
+                    ]}
+                    size="s"
+                    title="Actions select example"
+                />
+            );
+        },
+    }),
+];
+
+export const TableActionsColumnStory = () => {
+    const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+    const table = useTable({
+        columns: defaultColumns,
+        data,
+        state: {rowSelection},
+        enableRowSelection: true,
+        enableMultiRowSelection: true,
+        onRowSelectionChange: setRowSelection,
+    });
+
+    const tableWithRenderRowActions = useTable({
+        columns: columnsWithRenderRowActions,
+        data,
+        state: {rowSelection},
+        enableRowSelection: true,
+        enableMultiRowSelection: true,
+        onRowSelectionChange: setRowSelection,
+    });
+
+    return (
+        <React.Fragment>
+            <h3>{'with getRowActions property'}</h3>
+            <Table table={table} />
+            <br />
+            <h3>{'with renderRowActions property'}</h3>
+            <Table table={tableWithRenderRowActions} />
+        </React.Fragment>
+    );
+};
diff --git a/src/components/TableActions/__stories__/stories/TableActionsColumnWithVirtualizationStory.tsx b/src/components/TableActions/__stories__/stories/TableActionsColumnWithVirtualizationStory.tsx
new file mode 100644
index 0000000..0304388
--- /dev/null
+++ b/src/components/TableActions/__stories__/stories/TableActionsColumnWithVirtualizationStory.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import type {ColumnDef, RowSelectionState} from '@tanstack/react-table';
+
+import {ACTIONS_COLUMN_ID, getActionsColumn, selectionColumn} from '../../../../constants';
+import {useTable, useWindowRowVirtualizer} from '../../../../hooks';
+import {Table} from '../../../Table/Table';
+import {actionsSettings, baseColumns} from '../constants';
+import type {Item} from '../types';
+import {generateData} from '../utils';
+
+const data = generateData(300);
+
+const columns: ColumnDef<Item>[] = [
+    selectionColumn as ColumnDef<Item>,
+    ...baseColumns,
+    getActionsColumn<Item>(ACTIONS_COLUMN_ID, actionsSettings),
+];
+
+export const TableActionsColumnWithVirtualizationStory = () => {
+    const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+    const table = useTable({
+        columns,
+        data,
+        state: {rowSelection},
+        enableRowSelection: true,
+        enableMultiRowSelection: true,
+        onRowSelectionChange: setRowSelection,
+    });
+
+    const rowVirtualizer = useWindowRowVirtualizer({
+        count: table.getRowModel().rows.length,
+        estimateSize: () => 50,
+        overscan: 5,
+    });
+
+    return <Table table={table} rowVirtualizer={rowVirtualizer} />;
+};
diff --git a/src/components/TableActions/__stories__/stories/TableSettingsWithActionsColumnStory.tsx b/src/components/TableActions/__stories__/stories/TableSettingsWithActionsColumnStory.tsx
new file mode 100644
index 0000000..4f074dd
--- /dev/null
+++ b/src/components/TableActions/__stories__/stories/TableSettingsWithActionsColumnStory.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import type {ColumnDef, ColumnPinningState} from '@tanstack/react-table';
+
+import {SETTINGS_WITH_ACTIONS_COLUMN_ID, getSettingsWithActionsColumn} from '../../../../constants';
+import {useTable} from '../../../../hooks';
+import {Table} from '../../../Table/Table';
+import {actionsSettings, baseColumns} from '../constants';
+import type {Item} from '../types';
+import {generateData} from '../utils';
+
+const data = generateData(5);
+
+const columns: ColumnDef<Item>[] = [
+    ...baseColumns,
+    getSettingsWithActionsColumn<Item>(SETTINGS_WITH_ACTIONS_COLUMN_ID, {
+        actions: actionsSettings,
+        settings: {
+            sortable: true,
+            filterable: true,
+        },
+    }),
+];
+
+export const TableSettingsWithActionsColumnStory = () => {
+    const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({
+        left: [],
+        right: [SETTINGS_WITH_ACTIONS_COLUMN_ID],
+    });
+    const table = useTable({
+        columns,
+        data,
+        enableColumnPinning: true,
+        state: {columnPinning},
+        onColumnPinningChange: setColumnPinning,
+    });
+
+    return <Table table={table} />;
+};
diff --git a/src/components/TableActions/__stories__/types.ts b/src/components/TableActions/__stories__/types.ts
new file mode 100644
index 0000000..c2f6028
--- /dev/null
+++ b/src/components/TableActions/__stories__/types.ts
@@ -0,0 +1,7 @@
+export interface Item {
+    id: string;
+    parentId?: string | undefined;
+    name: string;
+    age: number;
+    status?: 'free' | 'busy' | 'unknown';
+}
diff --git a/src/components/TableActions/__stories__/utils.ts b/src/components/TableActions/__stories__/utils.ts
new file mode 100644
index 0000000..a61123c
--- /dev/null
+++ b/src/components/TableActions/__stories__/utils.ts
@@ -0,0 +1,10 @@
+import type {Item} from './types';
+
+export const generateData = (length: number) => {
+    return Array.from({length}, (_item, index) => ({
+        id: index.toString(),
+        name: ['John', 'Michael', 'Jane'][index % 3],
+        age: (index * 2) % 100,
+        status: ['free', 'busy', 'unknown'][index % 3],
+    })) as Item[];
+};
diff --git a/src/components/TableActions/i18n/en.json b/src/components/TableActions/i18n/en.json
new file mode 100644
index 0000000..c2c4c78
--- /dev/null
+++ b/src/components/TableActions/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "label-actions": "Actions"
+}
diff --git a/src/components/TableActions/i18n/index.ts b/src/components/TableActions/i18n/index.ts
new file mode 100644
index 0000000..2029888
--- /dev/null
+++ b/src/components/TableActions/i18n/index.ts
@@ -0,0 +1,10 @@
+import {addComponentKeysets} from '@gravity-ui/uikit/i18n';
+
+import {NAMESPACE} from '../../../utils';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = `${NAMESPACE}table-actions`;
+
+export default addComponentKeysets({en, ru}, COMPONENT);
diff --git a/src/components/TableActions/i18n/ru.json b/src/components/TableActions/i18n/ru.json
new file mode 100644
index 0000000..244652e
--- /dev/null
+++ b/src/components/TableActions/i18n/ru.json
@@ -0,0 +1,3 @@
+{
+  "label-actions": "Действия"
+}
diff --git a/src/components/TableActions/index.ts b/src/components/TableActions/index.ts
new file mode 100644
index 0000000..cb34c8d
--- /dev/null
+++ b/src/components/TableActions/index.ts
@@ -0,0 +1,2 @@
+export type * from './types';
+export {DefaultRowActions} from './DefaultRowActions';
diff --git a/src/components/TableActions/types.ts b/src/components/TableActions/types.ts
new file mode 100644
index 0000000..ff209d0
--- /dev/null
+++ b/src/components/TableActions/types.ts
@@ -0,0 +1,34 @@
+import type {MenuItemProps} from '@gravity-ui/uikit';
+
+export interface TableAction<TValue> {
+    text: string;
+    handler: (
+        item: TValue,
+        index: number,
+        event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement, MouseEvent>,
+    ) => void;
+    href?: ((item: TValue, index: number) => string) | string;
+    target?: string;
+    rel?: string;
+    disabled?: boolean;
+    theme?: MenuItemProps['theme'];
+    icon?: MenuItemProps['iconStart'];
+}
+export interface TableActionGroup<I> {
+    title: string;
+    items: TableActionConfig<I>[];
+}
+export type TableActionConfig<TValue> = TableAction<TValue> | TableActionGroup<TValue>;
+/**
+ * common sizes for Menu and Button
+ */
+export type TableRowActionsSize = 's' | 'm' | 'l' | 'xl';
+export type RenderRowActionsProps<TValue> = {
+    item: TValue;
+    index: number;
+};
+export interface TableActionsSettings<TValue> {
+    getRowActions?: (item: TValue, index: number) => TableActionConfig<TValue>[];
+    renderRowActions?: (props: RenderRowActionsProps<TValue>) => React.ReactNode;
+    rowActionsSize?: TableRowActionsSize;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 59c385b..ea52f66 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -17,3 +17,4 @@ export * from './SortIndicator';
 export * from './BaseTable';
 export * from './Table';
 export * from './TableSettings';
+export * from './TableActions';
diff --git a/src/constants/actionsColumn.tsx b/src/constants/actionsColumn.tsx
new file mode 100644
index 0000000..ca1e732
--- /dev/null
+++ b/src/constants/actionsColumn.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import type {CellContext, ColumnDef, ColumnDefTemplate} from '@tanstack/react-table';
+
+import type {TableActionsSettings} from '../components';
+import {DefaultRowActions} from '../components';
+
+export const ACTIONS_COLUMN_ID = '_actions';
+const ACTIONS_COLUMN_SIZE = 44;
+
+export const getActionsCell = <TData extends unknown>({
+    getRowActions,
+    renderRowActions,
+    rowActionsSize,
+}: TableActionsSettings<TData>): ColumnDefTemplate<CellContext<TData, unknown>> => {
+    const ActionsCell = (props: CellContext<TData, unknown>) => {
+        const {original: item, index} = props.row;
+
+        if (renderRowActions) {
+            return renderRowActions({item, index});
+        }
+
+        return (
+            <DefaultRowActions<TData>
+                item={item}
+                index={index}
+                getRowActions={getRowActions}
+                rowActionsSize={rowActionsSize}
+            />
+        );
+    };
+
+    ActionsCell.displayName = 'ActionsCell';
+    return ActionsCell;
+};
+
+export const getActionsColumn = <TData extends unknown>(
+    columnId = ACTIONS_COLUMN_ID,
+    options: TableActionsSettings<TData>,
+): ColumnDef<TData> => {
+    return {
+        id: columnId,
+        header: '',
+        size: ACTIONS_COLUMN_SIZE,
+        minSize: ACTIONS_COLUMN_SIZE,
+        cell: getActionsCell<TData>(options),
+    };
+};
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 1038cfd..27e0b97 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1,3 +1,5 @@
 export * from './dragHandleColumn';
 export * from './selectionColumn';
 export * from './settingsColumn';
+export * from './actionsColumn';
+export * from './settingsWithActionsColumn';
diff --git a/src/constants/settingsWithActionsColumn.ts b/src/constants/settingsWithActionsColumn.ts
new file mode 100644
index 0000000..f26514c
--- /dev/null
+++ b/src/constants/settingsWithActionsColumn.ts
@@ -0,0 +1,26 @@
+import type {ColumnDef} from '@tanstack/react-table';
+
+import type {TableActionsSettings, TableSettingsOptions} from '../components';
+
+import {getActionsColumn} from './actionsColumn';
+import {getSettingsColumn} from './settingsColumn';
+
+export const SETTINGS_WITH_ACTIONS_COLUMN_ID = '_settings-with-actions';
+const SETTINGS_WITH_ACTIONS_COLUMN_SIZE = 44;
+
+export const getSettingsWithActionsColumn = <TData extends unknown>(
+    columnId = SETTINGS_WITH_ACTIONS_COLUMN_ID,
+    options: {
+        actions: TableActionsSettings<TData>;
+        settings?: TableSettingsOptions;
+    },
+): ColumnDef<TData> => {
+    return {
+        ...getActionsColumn(columnId, options.actions),
+        ...getSettingsColumn(columnId, options.settings),
+
+        id: columnId,
+        size: SETTINGS_WITH_ACTIONS_COLUMN_SIZE,
+        minSize: SETTINGS_WITH_ACTIONS_COLUMN_SIZE,
+    };
+};