feat(Table): added link as Table action element (#1290)

gravity-ui · Jan 31, 2024 · de63cef · de63cef
1 parent 1760166
commit de63cef
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/src/components/Table/README.md b/src/components/Table/README.md
@@ -84,12 +84,15 @@ type TableActionConfig = TableAction | TableActionGroup;
 
 #### TableAction
 
-| Name     | Description     |                 Type                 |  Default   |
-| :------- | :-------------- | :----------------------------------: | :--------: |
-| text     | Text            |               `string`               |            |
-| handler  | Click handler   | `(item: any, index: number) => void` |            |
-| disabled | Action disabled |              `boolean `              |            |
-| theme    | Theme           |        `"normal"` `"danger"`         | `"normal"` |
+| Name     | Description                                                        |                 Type                 |  Default   |
+| :------- | :----------------------------------------------------------------- | :----------------------------------: | :--------: |
+| text     | Text                                                               |               `string`               |            |
+| handler  | Click handler                                                      | `(item: any, index: number) => void` |            |
+| disabled | Action disabled                                                    |              `boolean`               |            |
+| href     | Menu item with this prop becomes a link to the specified location. |               `string`               |            |
+| target   | Same as the `target` attribute of the `<a>` tag.                   |               `string`               |            |
+| rel      | Same as the `rel` attribute of the `<a>` tag.                      |               `string`               |            |
+| theme    | Theme                                                              |        `"normal"` `"danger"`         | `"normal"` |
 
 #### TableActionGroup
 

diff --git a/src/components/Table/__stories__/Table.stories.tsx b/src/components/Table/__stories__/Table.stories.tsx
@@ -118,6 +118,14 @@ const WithTableActionsTemplate: StoryFn<TableProps<DataItem>> = (args) => {
                 action('danger')(handlerArgs);
             },
         },
+        {
+            text: 'with href',
+            theme: 'normal',
+            href: 'https://cloud.yandex.com',
+            target: '_blank',
+            rel: 'noopener noreferrer',
+            handler: () => {},
+        },
     ];
     return <TableWithAction {...args} getRowActions={getRowActions} />;
 };

diff --git a/src/components/Table/hoc/withTableActions/withTableActions.tsx b/src/components/Table/hoc/withTableActions/withTableActions.tsx
@@ -44,6 +44,9 @@ export interface TableAction<I> {
         index: number,
         event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement, MouseEvent>,
     ) => void;
+    href?: string;
+    target?: string;
+    rel?: string;
     disabled?: boolean;
     theme?: MenuItemProps['theme'];
     icon?: MenuItemProps['iconStart'];
@@ -174,16 +177,17 @@ export function withTableActions<I extends TableDataItem, E extends {} = {}>(
                     </Menu.Group>
                 );
             } else {
+                const {text, icon, handler, ...restProps} = action;
+
                 return (
                     <Menu.Item
                         key={index}
-                        disabled={action.disabled}
-                        onClick={this.handleActionClick.bind(this, action, popupData!)}
-                        theme={action.theme}
-                        iconStart={action.icon}
+                        onClick={this.handleActionClick.bind(this, handler, popupData!)}
+                        iconStart={icon}
                         className={bPopup('menu-item')}
+                        {...restProps}
                     >
-                        {action.text}
+                        {text}
                     </Menu.Item>
                 );
             }
@@ -204,11 +208,12 @@ export function withTableActions<I extends TableDataItem, E extends {} = {}>(
         };
 
         private handleActionClick = (
-            action: TableAction<I>,
+            handler: TableAction<I>['handler'],
             data: PopupData<I>,
             event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement, MouseEvent>,
         ) => {
-            action.handler(data.item, data.index, event);
+            handler(data.item, data.index, event);
+
             this.closePopup();
         };