withTableSettings TreeSelect (#1315)

gravity-ui · Feb 13, 2024 · 422a7dc · 422a7dc
1 parent 1394de9
commit 422a7dc
Show file tree

Hide file tree

Showing 12 changed files with 344 additions and 375 deletions.
diff --git a/src/components/Table/README.md b/src/components/Table/README.md
@@ -211,10 +211,10 @@ const MyTable1 = withTableSettings({sortable: false})(Table);
 
 ### Options
 
-| Name     | Description                                       |       Type        | Default |
-| :------- | :------------------------------------------------ | :---------------: | :-----: |
-| width    | Settings' popup width                             | `number` `string` |         |
-| sortable | Whether or not add ability to sort settings items |     `boolean`     | `true`  |
+| Name     | Description                                       |      Type      | Default |
+| :------- | :------------------------------------------------ | :------------: | :-----: |
+| width    | Settings' popup width                             | `number` `fit` |         |
+| sortable | Whether or not add ability to sort settings items |   `boolean`    | `true`  |
 
 ### ColumnMeta
 
@@ -227,7 +227,7 @@ const MyTable1 = withTableSettings({sortable: false})(Table);
 
 | Name               | Description                   |                     Type                     |
 | :----------------- | :---------------------------- | :------------------------------------------: |
-| settingsPopupWidth | TableColumnSetup pop-up width |              `number` `string`               |
+| settingsPopupWidth | TableColumnSetup pop-up width |                `number` `fit`                |
 | settings           | Current settings              |             `TableSettingsData`              |
 | updateSettings     | Settings update handle        | `(data: TableSettingsData) => Promise<void>` |
 

diff --git a/src/components/Table/__stories__/Table.stories.tsx b/src/components/Table/__stories__/Table.stories.tsx
@@ -178,9 +178,32 @@ const WithTableSettingsTemplate: StoryFn<TableProps<DataItem>> = (args, context)
     }
 };
 export const HOCWithTableSettings = WithTableSettingsTemplate.bind({});
+HOCWithTableSettings.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 columnsWithSettings = _cloneDeep(columns);
+const markColumnAsSelectedAlways = (idx: number) => {
+    const column = columnsWithSettings[idx];
+    column.meta = column.meta || {};
+    column.meta.selectedAlways = true;
+};
+
+markColumnAsSelectedAlways(2);
+markColumnAsSelectedAlways(3);
+
+HOCWithTableSettings.args = {
+    columns: columnsWithSettings,
+};
+
 export const HOCWithTableSettingsFactory = WithTableSettingsTemplate.bind({});
 HOCWithTableSettingsFactory.parameters = {
     isFactory: true,
+
+    // Strict mode ruins sortable list due to this react-beautiful-dnd issue
+    // https://github.com/atlassian/react-beautiful-dnd/issues/2350
+    disableStrictMode: true,
 };
 
 // ---------------------------------

diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.scss b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.scss
@@ -3,61 +3,18 @@
 $block: '.#{variables.$ns}table-column-setup';
 
 #{$block} {
-    &__controls {
-        padding: 4px;
+    &__apply {
+        margin: var(--g-spacing-1) var(--g-spacing-1) 0;
     }
 
-    &__status {
-        margin-inline-start: 5px;
-        color: var(--g-color-text-secondary);
-    }
-
-    &__tick-wrap {
-        position: absolute;
-        inset-inline-start: 14px;
-        inset-block-start: 50%;
-        transform: translateY(-50%);
-        width: 10px;
-        height: 10px;
-        visibility: hidden;
-
-        &_visible {
-            visibility: visible;
-        }
-    }
-
-    &__tick {
-        color: var(--g-color-base-brand);
-    }
-
-    &__lock-wrap {
-        position: absolute;
-        inset-inline-start: 10px;
-        inset-block-start: 50%;
-        transform: translateY(-50%);
-        color: var(--g-color-text-hint);
-    }
-
-    &__title {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-    }
-
-    &__items {
-        overflow-x: auto;
-    }
-
-    &__item {
-        // Increasing specificity for overrides
-        &#{&} {
-            padding-inline: 32px 8px;
-            cursor: pointer;
-            position: relative;
+    // to override this https://github.com/gravity-ui/uikit/blob/main/src/components/useList/components/ListItemView/ListItemView.scss#L25
+    &__required-item {
+        background: inherit;
 
-            .#{variables.$ns}list__item-sort-icon {
-                cursor: move;
-            }
+        &:hover {
+            /* stylelint-disable declaration-no-important */
+            background: var(--g-color-base-simple-hover-solid) !important;
+            /* stylelint-enable declaration-no-important */
         }
     }
 }