feat(withTableSettings): add the renderControls prop (#1357)

src/components/Table/README.md

@@ -251,11 +251,12 @@ const MyTable1 = withTableSettings({sortable: false})(Table);
 
 ### Properties
 
-| Name               | Description                   |                     Type                     |
-| :----------------- | :---------------------------- | :------------------------------------------: |
-| settingsPopupWidth | TableColumnSetup pop-up width |                `number` `fit`                |
-| settings           | Current settings              |             `TableSettingsData`              |
-| updateSettings     | Settings update handle        | `(data: TableSettingsData) => Promise<void>` |
+| Name               | Description                     |                     Type                     |
+| :----------------- | :------------------------------ | :------------------------------------------: |
+| settingsPopupWidth | TableColumnSetup pop-up width   |                `number` `fit`                |
+| settings           | Current settings                |             `TableSettingsData`              |
+| updateSettings     | Settings update handle          | `(data: TableSettingsData) => Promise<void>` |
+| renderControls     | Allows to render custom actions |               `RenderControls`               |
 
 ### TableSettingsData
 
@@ -266,6 +267,15 @@ type TableSettingsData = Array<{
 }>;
 ```
 
+### RenderControls
+
+```ts
+type RenderControls = (params: {
+  DefaultApplyButton: React.ComponentType;
+  onApply: () => void;
+}) => React.ReactNode;
+```
+
 ### Example
 
 ```jsx
@@ -277,12 +287,12 @@ const data = [
   {id: 2, text: 'World'},
 ];
 const columns = [{id: 'id'}, {id: 'text'}];
+const initialSettings = [
+  {id: 'id', isSelected: false},
+  {id: 'text', isSelected: true},
+];
 
 function SelectionTable() {
-  const initialSettings = [
-    {id: 'id', isSelected: false},
-    {id: 'text', isSelected: true},
-  ];
   const [settings, setSettings] = React.useState(initialSettings);
 
   return (
@@ -294,6 +304,20 @@ function SelectionTable() {
         setSettings(settings);
         return Promise.resolve();
       }}
+      renderControls={({DefaultApplyButton, onApply}) => (
+        <Flex gapRow="1" direction="column">
+          <Button
+            view="outlined-warning"
+            onClick={() => {
+              onApply();
+              setSettings(initialSettings);
+            }}
+          >
+            Reset
+          </Button>
+          <DefaultApplyButton />
+        </Flex>
+      )}
     />
   );
 }

src/components/Table/__stories__/Table.stories.tsx

@@ -11,6 +11,7 @@ import {TreeSelect} from '../../TreeSelect/TreeSelect';
 import {Table} from '../Table';
 import type {TableProps} from '../Table';
 
+import {WithTableSettingsCustomActionsShowcase} from './WithTableSettingsCustomActions';
 import {
     TableWithAction,
     TableWithCopy,
@@ -225,6 +226,27 @@ HOCWithTableSettingsFactory.parameters = {
     disableStrictMode: true,
 };
 
+const WithTableSettingsCustomActionsTemplate: StoryFn<TableProps<DataItem>> = (args) => {
+    const settings = React.useMemo(() => {
+        const newSettings: TableSettingsData = columns.map((x) => ({
+            id: x.id,
+            isSelected: true,
+        }));
+        newSettings[0].isSelected = false;
+        newSettings[2].isSelected = false;
+
+        return newSettings;
+    }, []);
+
+    return <WithTableSettingsCustomActionsShowcase {...args} defaultSettings={settings} />;
+};
+export const HOCWithTableSettingsCustomActions = WithTableSettingsCustomActionsTemplate.bind({});
+HOCWithTableSettingsCustomActions.parameters = {
+    // Strict mode ruins sortable list due to this react-beautiful-dnd issue
+    // https://github.com/atlassian/react-beautiful-dnd/issues/2350
+    disableStrictMode: true,
+};
+
 // ---------------------------------
 const columnsWithSorting = _cloneDeep(columns);
 columnsWithSorting[0].meta = {sort: true};

src/components/Table/__stories__/WithTableSettingsCustomActions/WithTableSettingsCustomActions.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import {ArrowRotateLeft} from '@gravity-ui/icons';
+import _isEqual from 'lodash/isEqual';
+
+import {Button} from '../../../Button';
+import type {ButtonProps} from '../../../Button';
+import {Icon} from '../../../Icon';
+import {Flex} from '../../../layout';
+import type {TableProps} from '../../Table';
+import type {TableSettingsData} from '../../hoc/withTableSettings/withTableSettings';
+import type {DataItem} from '../utils';
+import {TableWithSettings} from '../utils';
+
+interface WithTableSettingsCustomActionsShowcaseProps extends TableProps<DataItem> {
+    defaultSettings: TableSettingsData;
+}
+
+export const WithTableSettingsCustomActionsShowcase = ({
+    defaultSettings,
+    ...restTableProps
+}: WithTableSettingsCustomActionsShowcaseProps) => {
+    const [innerSettings, setInnerSettings] = React.useState<TableSettingsData>(defaultSettings);
+
+    const updateSettings = React.useCallback(
+        (updatedSettings: TableSettingsData) => setInnerSettings(updatedSettings),
+        [],
+    );
+
+    const showSelectAllButton = React.useMemo(
+        () => innerSettings.some(({isSelected}) => !isSelected),
+        [innerSettings],
+    );
+
+    const showResetButton = React.useMemo(
+        () => !_isEqual(innerSettings, defaultSettings),
+        [defaultSettings, innerSettings],
+    );
+
+    return (
+        <TableWithSettings
+            {...restTableProps}
+            settings={innerSettings}
+            updateSettings={updateSettings}
+            renderControls={({DefaultApplyButton, onApply}) => (
+                <Flex gapRow="1" direction="column">
+                    {showSelectAllButton && (
+                        <SelectAllButton
+                            onClick={() => {
+                                onApply();
+                                setInnerSettings((prevState) =>
+                                    prevState.map((setting) => ({
+                                        ...setting,
+                                        isSelected: true,
+                                    })),
+                                );
+                            }}
+                        />
+                    )}
+                    {showResetButton && (
+                        <ResetButton
+                            onClick={() => {
+                                onApply();
+                                setInnerSettings(defaultSettings);
+                            }}
+                        />
+                    )}
+                    <DefaultApplyButton />
+                </Flex>
+            )}
+        />
+    );
+};
+
+function SelectAllButton<T extends ButtonProps>({onClick}: T) {
+    return <Button onClick={onClick}>Select All</Button>;
+}
+
+function ResetButton<T extends ButtonProps>({onClick}: T) {
+    return (
+        <Button view="outlined-warning" onClick={onClick}>
+            <Flex alignItems="center" gap="1">
+                <Icon key="icon" data={ArrowRotateLeft} />
+                <span>Reset</span>
+            </Flex>
+        </Button>
+    );
+}

src/components/Table/__stories__/WithTableSettingsCustomActions/index.ts

@@ -0,0 +1 @@
+export {WithTableSettingsCustomActionsShowcase} from './WithTableSettingsCustomActions';