CardView - column chooser (select mode)

e2e/testcafe-devextreme/tests/cardView/columnChooser/a11y.functional.ts

@@ -0,0 +1,22 @@
+import CardView from 'devextreme-testcafe-models/cardView';
+import url from '../../../helpers/getPageUrl';
+import { createWidget } from '../../../helpers/createWidget';
+
+fixture.disablePageReloads`CardView - ColumnChooser.A11y.Functional`
+  .page(url(__dirname, '../../container.html'));
+
+const CARD_VIEW_SELECTOR = '#container';
+
+test('column chooser popup should have aria-label attribute', async (t) => {
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+  const columnChooser = cardView.getColumnChooser();
+
+  await cardView.apiShowColumnChooser();
+
+  await t.expect(columnChooser.content.getAttribute('aria-label')).ok();
+}).before(async () => createWidget('dxCardView', {
+  columnChooser: {
+    enabled: true,
+  },
+  columns: ['Column 1'],
+}));

e2e/testcafe-devextreme/tests/cardView/columnChooser/api.functional.ts

@@ -0,0 +1,44 @@
+import CardView from 'devextreme-testcafe-models/cardView';
+import url from '../../../helpers/getPageUrl';
+import { createWidget } from '../../../helpers/createWidget';
+
+fixture.disablePageReloads`CardView - ColumnChooser.Functional`
+  .page(url(__dirname, '../../container.html'));
+
+// TODO: refator this when cardView is merged to 25.1 . This should be in ColumnChooser POM
+const isOpened = (columnChooser) => columnChooser.element.exists;
+
+test('public method showColumnChooser', async (t) => {
+  const cardView = new CardView('#container');
+  const columnChooser = cardView.getColumnChooser();
+
+  await t.expect(isOpened(columnChooser)).notOk();
+
+  await cardView.apiShowColumnChooser();
+  await t.expect(isOpened(columnChooser)).ok();
+}).before(async () => {
+  await createWidget('dxCardView', {
+    columns: ['Column 1'],
+    columnChooser: {
+      enabled: true,
+    },
+  });
+});
+
+test('public method hideColumnChooser', async (t) => {
+  const cardView = new CardView('#container');
+  const columnChooser = cardView.getColumnChooser();
+
+  await t.click(cardView.getColumnChooserButton());
+  await t.expect(isOpened(columnChooser)).ok();
+
+  await cardView.apiHideColumnChooser();
+  await t.expect(isOpened(columnChooser)).notOk();
+}).before(async () => {
+  await createWidget('dxCardView', {
+    columns: ['Column 1'],
+    columnChooser: {
+      enabled: true,
+    },
+  });
+});

e2e/testcafe-devextreme/tests/cardView/columnChooser/visual.ts

@@ -0,0 +1,43 @@
+import CardView from 'devextreme-testcafe-models/cardView';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import url from '../../../helpers/getPageUrl';
+import { testScreenshot } from '../../../helpers/themeUtils';
+import { createWidget } from '../../../helpers/createWidget';
+
+fixture`CardView - ColumnChooser.Visual`
+  .page(url(__dirname, '../../container.html'));
+
+const CARD_VIEW_SELECTOR = '#container';
+
+test('column chooser in select mode', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+  const columnChooser = cardView.getColumnChooser();
+
+  await cardView.apiShowColumnChooser();
+
+  await testScreenshot(t, takeScreenshot, 'card-view_column-chooser.png', { element: columnChooser.content });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxCardView', {
+  columnChooser: {
+    enabled: true,
+    mode: 'select',
+    height: 400,
+    width: 400,
+    search: {
+      enabled: true,
+    },
+    selection: {
+      allowSelectAll: true,
+    },
+  },
+  columns: [
+    { dataField: 'Column 1', visible: false },
+    { dataField: 'Column 2', allowHiding: false },
+    { dataField: 'Column 3', showInColumnChooser: false },
+    { dataField: 'Column 4' },
+  ],
+}));

packages/devextreme/js/__internal/grids/grid_core/column_chooser/const.ts

@@ -0,0 +1,26 @@
+import messageLocalization from '@js/common/core/localization/message';
+import type { ColumnChooser } from '@js/common/grids';
+
+export const defaultOptions = {
+  columnChooser: {
+    enabled: false,
+    search: {
+      enabled: false,
+      timeout: 500,
+      editorOptions: {},
+    },
+    selection: {
+      allowSelectAll: false,
+      selectByClick: false,
+      recursive: false,
+    },
+    position: undefined,
+    sortOrder: undefined,
+    mode: 'dragAndDrop',
+    width: 250,
+    height: 260,
+    title: messageLocalization.format('dxDataGrid-columnChooserTitle'),
+    emptyPanelText: messageLocalization.format('dxDataGrid-columnChooserEmptyText'),
+    container: undefined,
+  } as ColumnChooser,
+};

packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts

@@ -19,6 +19,7 @@ import type { HeaderPanel } from '../header_panel/m_header_panel';
 import modules from '../m_modules';
 import type { ModuleType } from '../m_types';
 import { ColumnsView } from '../views/m_columns_view';
+import { defaultOptions } from './const';
 
 const COLUMN_CHOOSER_CLASS = 'column-chooser';
 const COLUMN_CHOOSER_BUTTON_CLASS = 'column-chooser-button';
@@ -600,29 +601,7 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnC
 
 export const columnChooserModule = {
   defaultOptions() {
-    return {
-      columnChooser: {
-        enabled: false,
-        search: {
-          enabled: false,
-          timeout: 500,
-          editorOptions: {},
-        },
-        selection: {
-          allowSelectAll: false,
-          selectByClick: false,
-          recursive: false,
-        },
-        position: undefined,
-        mode: 'dragAndDrop',
-        width: 250,
-        height: 260,
-        title: messageLocalization.format('dxDataGrid-columnChooserTitle'),
-        emptyPanelText: messageLocalization.format('dxDataGrid-columnChooserEmptyText'),
-        // TODO private option
-        container: undefined,
-      },
-    };
+    return defaultOptions;
   },
   controllers: {
     columnChooser: ColumnChooserController,

packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap

@@ -181,5 +181,6 @@ exports[`common initial render should be successfull 1`] = `
   <div>
 
   </div>
+
 </div>
 `;

packages/devextreme/js/__internal/grids/new/card_view/main_view.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { combined } from '@ts/core/reactive/index';
+import { ColumnChooserView } from '@ts/grids/new/grid_core/column_chooser/index';
 import { View } from '@ts/grids/new/grid_core/core/view';
 import { FilterPanelView } from '@ts/grids/new/grid_core/filtering/filter_panel/view';
 import { HeaderFilterPopupView } from '@ts/grids/new/grid_core/filtering/header_filter/index';
@@ -25,12 +26,14 @@ interface MainViewProps {
   HeaderPanel: ComponentType;
   HeaderFilterPopup: ComponentType;
   FilterPanel: ComponentType;
+  ColumnChooser: ComponentType;
   config: Config;
   rootElementRef: RefObject<HTMLDivElement>;
 }
 
 function MainViewComponent({
-  Toolbar, Content, Pager, HeaderPanel, HeaderFilterPopup, FilterPanel, config, rootElementRef,
+  Toolbar, Content, Pager, HeaderPanel, HeaderFilterPopup,
+  FilterPanel, ColumnChooser, config, rootElementRef,
 }: MainViewProps): JSX.Element {
   return (<>
     <ConfigContext.Provider value={config}>
@@ -53,6 +56,7 @@ function MainViewComponent({
           */}
           <Pager/>
         </div>
+        <ColumnChooser/>
       </RootElementUpdater>
     </ConfigContext.Provider>
   </>);
@@ -68,6 +72,7 @@ export class MainView extends View<MainViewProps> {
     HeaderPanelView,
     HeaderFilterPopupView,
     FilterPanelView,
+    ColumnChooserView,
     OptionsController,
   ] as const;
 
@@ -78,6 +83,7 @@ export class MainView extends View<MainViewProps> {
     private readonly headerPanel: HeaderPanelView,
     private readonly headerFilterPopup: HeaderFilterPopupView,
     private readonly filterPanel: FilterPanelView,
+    private readonly columnsChooser: ColumnChooserView,
     private readonly options: OptionsController,
   ) {
     super();
@@ -93,6 +99,7 @@ export class MainView extends View<MainViewProps> {
       HeaderPanel: this.headerPanel.asInferno(),
       HeaderFilterPopup: this.headerFilterPopup.asInferno(),
       FilterPanel: this.filterPanel.asInferno(),
+      ColumnChooser: this.columnsChooser.asInferno(),
       config: combined({
         rtlEnabled: this.options.oneWay('rtlEnabled'),
         disabled: this.options.oneWay('disabled'),

packages/devextreme/js/__internal/grids/new/grid_core/column_chooser/column_chooser.tsx

@@ -0,0 +1,46 @@
+import type { ColumnChooserMode } from '@js/common/grids';
+import type { Properties as PopupProperties } from '@js/ui/popup';
+import type dxPopup from '@js/ui/popup';
+import type { Properties as TreeViewProperties } from '@js/ui/tree_view';
+import type dxTreeView from '@js/ui/tree_view';
+import type { RefObject } from 'inferno';
+
+import { Popup } from '../inferno_wrappers/popup';
+import { TreeView } from '../inferno_wrappers/tree_view';
+
+export interface ColumnChooserProps {
+  popupRef: RefObject<dxPopup>;
+
+  treeViewRef: RefObject<dxTreeView>;
+
+  visible: boolean;
+
+  mode: ColumnChooserMode;
+
+  popupConfig: PopupProperties;
+
+  treeViewConfig: TreeViewProperties;
+}
+
+export function ColumnChooser(props: ColumnChooserProps): JSX.Element | null {
+  const {
+    visible, treeViewConfig, popupConfig, popupRef, treeViewRef,
+  } = props;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Popup
+      visible={visible}
+      componentRef={popupRef}
+      { ...popupConfig }
+    >
+      <TreeView
+        componentRef={treeViewRef}
+        { ...treeViewConfig }
+      ></TreeView>
+    </Popup>
+  );
+}