From 3dee22964014293c8a1887d863ae297a327fea2b Mon Sep 17 00:00:00 2001
From: alx-chernigin <alx-chernigin@yandex-team.ru>
Date: Mon, 21 Oct 2024 11:36:21 +0300
Subject: [PATCH] feat(Table): table actions column added

---
 src/components/RowActions/RowActions.scss     |  20 +++
 src/components/RowActions/RowActions.tsx      | 119 ++++++++++++++++++
 .../__stories__/RowActions.stories.tsx        |  18 +++
 .../RowActions/__stories__/constants.tsx      |  44 +++++++
 .../stories/RowActionsColumnStory.tsx         |  80 ++++++++++++
 .../RowActionsWithActionsColumnStory.tsx      |  39 ++++++
 src/components/RowActions/i18n/en.json        |   3 +
 src/components/RowActions/i18n/index.ts       |  10 ++
 src/components/RowActions/i18n/ru.json        |   3 +
 src/components/RowActions/index.ts            |   2 +
 src/components/RowActions/types.ts            |  35 ++++++
 src/components/index.ts                       |   1 +
 src/constants/actionsColumn.tsx               |  48 +++++++
 src/constants/index.ts                        |   2 +
 src/constants/settingsWithActionsColumn.ts    |  26 ++++
 15 files changed, 450 insertions(+)
 create mode 100644 src/components/RowActions/RowActions.scss
 create mode 100644 src/components/RowActions/RowActions.tsx
 create mode 100644 src/components/RowActions/__stories__/RowActions.stories.tsx
 create mode 100644 src/components/RowActions/__stories__/constants.tsx
 create mode 100644 src/components/RowActions/__stories__/stories/RowActionsColumnStory.tsx
 create mode 100644 src/components/RowActions/__stories__/stories/RowActionsWithActionsColumnStory.tsx
 create mode 100644 src/components/RowActions/i18n/en.json
 create mode 100644 src/components/RowActions/i18n/index.ts
 create mode 100644 src/components/RowActions/i18n/ru.json
 create mode 100644 src/components/RowActions/index.ts
 create mode 100644 src/components/RowActions/types.ts
 create mode 100644 src/constants/actionsColumn.tsx
 create mode 100644 src/constants/settingsWithActionsColumn.ts

diff --git a/src/components/RowActions/RowActions.scss b/src/components/RowActions/RowActions.scss
new file mode 100644
index 0000000..6fc22ed
--- /dev/null
+++ b/src/components/RowActions/RowActions.scss
@@ -0,0 +1,20 @@
+@use '@gravity-ui/uikit/styles/mixins';
+@use '../variables';
+
+$block: '.#{variables.$ns}row-actions';
+
+#{$block} {
+    height: 18px;
+    display: flex;
+    align-items: center;
+
+    &-popup {
+        &__menu {
+            @include mixins.max-height(200px);
+
+            &-item {
+                @include mixins.max-text-width(250px);
+            }
+        }
+    }
+}
diff --git a/src/components/RowActions/RowActions.tsx b/src/components/RowActions/RowActions.tsx
new file mode 100644
index 0000000..438ac8e
--- /dev/null
+++ b/src/components/RowActions/RowActions.tsx
@@ -0,0 +1,119 @@
+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 './RowActions.scss';
+
+type RowActionsProps<I> = Pick<TableActionsSettings<I>, 'getRowActions' | 'rowActionsSize'> & {
+    item: I;
+    index: number;
+};
+
+const b = block('row-actions');
+const bPopup = block('row-actions-popup');
+
+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 RowActions = <I extends unknown>({
+    index: rowIndex,
+    item,
+    getRowActions,
+    rowActionsSize,
+}: RowActionsProps<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={bPopup('menu-item')}
+                {...restProps}
+            >
+                {text}
+            </Menu.Item>
+        );
+    };
+
+    const actions = getRowActions(item, rowIndex);
+
+    if (actions.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className={b()}>
+            <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={bPopup('menu')} size={rowActionsSize}>
+                        {actions.map(renderPopupMenuItem)}
+                    </Menu>
+                </div>
+            </Popup>
+            <Button
+                view="flat-secondary"
+                className={b('actions-button')}
+                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/RowActions/__stories__/RowActions.stories.tsx b/src/components/RowActions/__stories__/RowActions.stories.tsx
new file mode 100644
index 0000000..56315aa
--- /dev/null
+++ b/src/components/RowActions/__stories__/RowActions.stories.tsx
@@ -0,0 +1,18 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {RowActionsColumnStory} from './stories/RowActionsColumnStory';
+import {RowActionsWithActionsColumnStory} from './stories/RowActionsWithActionsColumnStory';
+
+const meta: Meta = {
+    title: 'Table actions',
+};
+
+export default meta;
+
+export const ActionsColumn: StoryObj<typeof RowActionsColumnStory> = {
+    render: RowActionsColumnStory,
+};
+
+export const SettingsWithActionsColumn: StoryObj<typeof RowActionsWithActionsColumnStory> = {
+    render: RowActionsWithActionsColumnStory,
+};
diff --git a/src/components/RowActions/__stories__/constants.tsx b/src/components/RowActions/__stories__/constants.tsx
new file mode 100644
index 0000000..5b997ce
--- /dev/null
+++ b/src/components/RowActions/__stories__/constants.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+
+import {Pencil} from '@gravity-ui/icons';
+import {Icon} from '@gravity-ui/uikit';
+
+export {columns as baseColumns} from '../../BaseTable/__stories__/constants/columns';
+import type {Item} from '../../BaseTable/__stories__/types';
+import type {TableActionsSettings} from '../types';
+
+export const actionsSettings: TableActionsSettings<Item> = {
+    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: () => {},
+        },
+    ],
+};
diff --git a/src/components/RowActions/__stories__/stories/RowActionsColumnStory.tsx b/src/components/RowActions/__stories__/stories/RowActionsColumnStory.tsx
new file mode 100644
index 0000000..680be7c
--- /dev/null
+++ b/src/components/RowActions/__stories__/stories/RowActionsColumnStory.tsx
@@ -0,0 +1,80 @@
+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 type {Item} from '../../../BaseTable/__stories__/types';
+import {generateData} from '../../../BaseTable/__stories__/utils';
+import {Table} from '../../../Table/Table';
+import {actionsSettings, baseColumns} from '../constants';
+
+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: ({row}) => {
+            const {index} = row;
+            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 RowActionsColumnStory = () => {
+    const [rowSelectionForTable, setRowSelectionForTable] = React.useState<RowSelectionState>({});
+    const table = useTable({
+        columns: defaultColumns,
+        data,
+        state: {rowSelection: rowSelectionForTable},
+        enableRowSelection: true,
+        enableMultiRowSelection: true,
+        onRowSelectionChange: setRowSelectionForTable,
+    });
+
+    const [rowSelectionForTableWithRenderRowActions, setRowSelectionForTableWithRenderRowActions] =
+        React.useState<RowSelectionState>({});
+    const tableWithRenderRowActions = useTable({
+        columns: columnsWithRenderRowActions,
+        data,
+        state: {rowSelection: rowSelectionForTableWithRenderRowActions},
+        enableRowSelection: true,
+        enableMultiRowSelection: true,
+        onRowSelectionChange: setRowSelectionForTableWithRenderRowActions,
+    });
+
+    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/RowActions/__stories__/stories/RowActionsWithActionsColumnStory.tsx b/src/components/RowActions/__stories__/stories/RowActionsWithActionsColumnStory.tsx
new file mode 100644
index 0000000..64a43ff
--- /dev/null
+++ b/src/components/RowActions/__stories__/stories/RowActionsWithActionsColumnStory.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 type {Item} from '../../../BaseTable/__stories__/types';
+import {generateData} from '../../../BaseTable/__stories__/utils';
+import {Table} from '../../../Table/Table';
+import {actionsSettings, baseColumns} from '../constants';
+
+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 RowActionsWithActionsColumnStory = () => {
+    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/RowActions/i18n/en.json b/src/components/RowActions/i18n/en.json
new file mode 100644
index 0000000..c2c4c78
--- /dev/null
+++ b/src/components/RowActions/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "label-actions": "Actions"
+}
diff --git a/src/components/RowActions/i18n/index.ts b/src/components/RowActions/i18n/index.ts
new file mode 100644
index 0000000..2029888
--- /dev/null
+++ b/src/components/RowActions/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/RowActions/i18n/ru.json b/src/components/RowActions/i18n/ru.json
new file mode 100644
index 0000000..244652e
--- /dev/null
+++ b/src/components/RowActions/i18n/ru.json
@@ -0,0 +1,3 @@
+{
+  "label-actions": "Действия"
+}
diff --git a/src/components/RowActions/index.ts b/src/components/RowActions/index.ts
new file mode 100644
index 0000000..a9d45a1
--- /dev/null
+++ b/src/components/RowActions/index.ts
@@ -0,0 +1,2 @@
+export type * from './types';
+export {RowActions} from './RowActions';
diff --git a/src/components/RowActions/types.ts b/src/components/RowActions/types.ts
new file mode 100644
index 0000000..669ba64
--- /dev/null
+++ b/src/components/RowActions/types.ts
@@ -0,0 +1,35 @@
+import type {MenuItemProps} from '@gravity-ui/uikit';
+import type {Row} from '@tanstack/react-table';
+
+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: {row: Row<TValue>}) => React.ReactNode;
+    rowActionsSize?: TableRowActionsSize;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 59c385b..ed8079d 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 './RowActions';
diff --git a/src/constants/actionsColumn.tsx b/src/constants/actionsColumn.tsx
new file mode 100644
index 0000000..7e3e813
--- /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 {RowActions} 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({row: props.row});
+        }
+
+        return (
+            <RowActions<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,
+    };
+};