inprogress

DevExpress · Dec 10, 2024 · 579ec0e · 579ec0e
1 parent f5bcb63
commit 579ec0e
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 34 deletions.
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/column_sortable.tsx b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/column_sortable.tsx
@@ -0,0 +1,53 @@
+import type { InfernoNode } from 'inferno';
+import { Component } from 'inferno';
+
+import type { Column } from '../../grid_core/columns_controller/types';
+import type { Props as SortableProps } from '../../grid_core/inferno_wrappers/sortable';
+import { Sortable } from '../../grid_core/inferno_wrappers/sortable';
+
+export interface Props extends SortableProps {
+  source: string;
+
+  visibleColumns: Column[];
+
+  allowColumnReordering: boolean;
+}
+
+export class ColumnSortable extends Component<Props> {
+  private readonly onDragStart = (e): void => {
+    const column = this.props.visibleColumns[e.fromIndex];
+
+    if (!column.allowReordering) {
+      e.cancel = true;
+      return;
+    }
+
+    e.itemData = {
+      columnName: column.name,
+      source: this.props.source,
+    };
+  };
+
+  render(): InfernoNode {
+    if (!this.props.allowColumnReordering) {
+      return this.props.children;
+    }
+
+    const {
+      source,
+      visibleColumns,
+      ...restProps
+    } = this.props;
+
+    return (
+      <Sortable
+        dropFeedbackMode='indicate'
+        onDragStart={this.onDragStart}
+        group='dx-cardview-columns'
+        {...restProps}
+      >
+      {this.props.children}
+    </Sortable>
+    );
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/drop_down_button.tsx b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/drop_down_button.tsx
@@ -4,7 +4,7 @@ import { Component, createRef } from 'inferno';
 import type { Column } from '../../grid_core/columns_controller/types';
 import { Button } from '../../grid_core/inferno_wrappers/button';
 import { Popup } from '../../grid_core/inferno_wrappers/popup';
-import { Sortable } from '../../grid_core/inferno_wrappers/sortable';
+import { ColumnSortable } from './column_sortable';
 import { Item } from './item';
 
 const CLASSES = {
@@ -21,6 +21,8 @@ export interface DropDownButtonProps {
   onRemove?: (name: string) => void;
 
   shownColumnCount: number;
+
+  allowColumnReordering: boolean;
 }
 
 interface DropDownButtonState {
@@ -74,23 +76,19 @@ export class DropDownButton extends Component<DropDownButtonProps, DropDownButto
           class: CLASSES.popup,
         }}
       >
-        <Sortable
+        <ColumnSortable
+          visibleColumns={this.props.columns}
+          allowColumnReordering={this.props.allowColumnReordering}
+          source='header-panel-hidden'
           itemOrientation='vertical'
-          dropFeedbackMode='indicate'
           onReorder={(e): void => this.props.onReorder?.(
             e.itemData.columnName,
-            e.toIndex + this.props.shownColumnCount - +(e.itemData.source === 'main-header-panel'),
+            e.toIndex + this.props.shownColumnCount - +(e.itemData.source === 'header-panel-main'),
           )}
           onAdd={(e): void => this.props.onAdd?.(
             e.itemData.columnName,
-            e.toIndex + this.props.shownColumnCount - +(e.itemData.source === 'main-header-panel'),
+            e.toIndex + this.props.shownColumnCount - +(e.itemData.source === 'header-panel-main'),
           )}
-          onDragStart={(e): void => {
-            e.itemData = {
-              columnName: this.props.columns[e.fromIndex].name,
-            };
-          }}
-          group='cardview'
         >
           {this.props.columns.map((column) => (
             <Item
@@ -100,7 +98,7 @@ export class DropDownButton extends Component<DropDownButtonProps, DropDownButto
               }
             />
           ))}
-        </Sortable>
+        </ColumnSortable>
       </Popup>
     </>);
   }

diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/header_panel.tsx b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/header_panel.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import type { Column } from '@ts/grids/new/grid_core/columns_controller/types';
-import type { RefObject } from 'inferno';
+import type { InfernoNode, RefObject } from 'inferno';
 import { Component } from 'inferno';
 
-import { Sortable } from '../../grid_core/inferno_wrappers/sortable';
+import { ColumnSortable } from './column_sortable';
 import { DropDownButton } from './drop_down_button';
 import { Item } from './item';
 
@@ -23,6 +23,8 @@ export interface HeaderPanelProps {
   shownColumnCount: number;
 
   elementRef: RefObject<HTMLDivElement>;
+
+  allowColumnReordering: boolean;
 }
 
 export class HeaderPanel extends Component<HeaderPanelProps> {
@@ -34,37 +36,47 @@ export class HeaderPanel extends Component<HeaderPanelProps> {
       (_, index) => index >= this.props.shownColumnCount,
     );
 
-    return (
-      <div className={CLASSES.headers} ref={this.props.elementRef}>
-        <Sortable
+    const wrapSortable = (content: InfernoNode): InfernoNode => {
+      if (!this.props.allowColumnReordering) {
+        return content;
+      }
+
+      return (
+        <ColumnSortable
+          allowColumnReordering={this.props.allowColumnReordering}
+          source='header-panel-main'
+          visibleColumns={visibleColumns}
           itemOrientation='horizontal'
-          dropFeedbackMode='indicate'
           onReorder={(e): void => this.props.onReorder?.(e.itemData.columnName, e.toIndex)}
           onAdd={(e): void => this.props.onAdd?.(e.itemData.columnName, e.toIndex)}
-          onDragStart={(e): void => {
-            e.itemData = {
-              columnName: visibleColumns[e.fromIndex].name,
-              source: 'main-header-panel',
-            };
-          }}
-          group='cardview'
         >
-          {visibleColumns.map((column) => (
+          {content}
+        </ColumnSortable>
+      );
+    };
+
+    return (
+      <div className={CLASSES.headers} ref={this.props.elementRef}>
+        {
+          wrapSortable(
+            visibleColumns.map((column) => (
             <Item
               column={column}
               onRemove={
                 (): void => this.props.onRemove?.(column.name)
               }
             />
-          ))}
-        </Sortable>
+            )),
+          )
+        }
         {!!nonVisibleColumns.length && (
           <DropDownButton
             columns={nonVisibleColumns}
             onRemove={this.props.onRemove}
             onAdd={this.props.onAdd}
             onReorder={this.props.onReorder}
             shownColumnCount={this.props.shownColumnCount}
+            allowColumnReordering={this.props.allowColumnReordering}
           />
         )}
       </div>

diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/view.tsx b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/view.tsx
@@ -7,15 +7,19 @@ import { ResizableHeaderPanel } from './resizable_header_panel';
 
 export class HeaderPanelView extends View {
   public vdom = computed(
-    (columns) => (
+    (columns, allowColumnReordering) => (
       <ResizableHeaderPanel
         columns={columns}
         onReorder={this.onReorder.bind(this)}
         onAdd={this.onAdd.bind(this)}
         onRemove={this.onRemove.bind(this)}
+        allowColumnReordering={allowColumnReordering}
       />
     ),
-    [this.columnsController.visibleColumns],
+    [
+      this.columnsController.visibleColumns,
+      this.columnsController.allowColumnReordering,
+    ],
   );
 
   public static dependencies = [ColumnsController] as const;

diff --git a/...ges/devextreme/js/__internal/grids/new/grid_core/columns_controller/columns_controller.ts b/...ges/devextreme/js/__internal/grids/new/grid_core/columns_controller/columns_controller.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 /* eslint-disable spellcheck/spell-checker */
-import type { SubsGets, SubsGetsUpd } from '@ts/core/reactive/index';
+import type { Subscribable, SubsGets, SubsGetsUpd } from '@ts/core/reactive/index';
 import { computed, iif, interruptableComputed } from '@ts/core/reactive/index';
 
 import { DataController } from '../data_controller/index';
@@ -16,6 +16,8 @@ export class ColumnsController {
 
   public readonly nonVisibleColumns: SubsGets<Column[]>;
 
+  public readonly allowColumnReordering: Subscribable<boolean>;
+
   public static dependencies = [OptionsController, DataController] as const;
 
   constructor(
@@ -58,6 +60,8 @@ export class ColumnsController {
       (columns) => columns.filter((column) => !column.visible),
       [this.columns],
     );
+
+    this.allowColumnReordering = this.options.oneWay('allowColumnReordering');
   }
 
   public createDataRow(data: DataObject, columns: Column[]): DataRow {

diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/options.ts b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/options.ts
@@ -14,6 +14,7 @@ export const defaultColumnProperties = {
   },
   alignment: 'left',
   visible: true,
+  allowReordering: true,
 } satisfies Partial<Column>;
 
 export const defaultColumnPropertiesByDataType: Record<
@@ -42,8 +43,10 @@ Exclude<ColumnProperties, string>
 
 export interface Options {
   columns?: ColumnProperties[];
+
+  allowColumnReordering?: boolean;
 }
 
 export const defaultOptions = {
-
+  allowColumnReordering: false,
 } satisfies Options;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/types.ts b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/types.ts
@@ -7,6 +7,7 @@ type InheritedColumnProps =
   | 'dataType'
   | 'visible'
   | 'visibleIndex'
+  | 'allowReordering'
   | 'caption';
 
 export type Column = Pick<Required<ColumnBase>, InheritedColumnProps> & {

diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/sortable.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/sortable.tsx
@@ -4,7 +4,11 @@ import { type InfernoNode } from 'inferno';
 
 import { InfernoWrapper } from './widget_wrapper';
 
-export class Sortable extends InfernoWrapper<SortableProperties, dxSortable> {
+export interface Props extends SortableProperties {
+
+}
+
+export class Sortable extends InfernoWrapper<Props, dxSortable> {
   public render(): InfernoNode {
     return (
       <div ref={this.ref}>

diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
@@ -224,18 +224,20 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
                 },
                 width: "100%",
                 // width: 750,
-                height: 500,
+                height: 700,
                 keyExpr: 'ID',
                 cardsPerRow: 'auto',
                 paging: {
                     pageSize: 12,
                 },
                 cardMinWidth: 250,
                 cardMaxWidth: 350,
+                allowColumnReordering: true,
                 columns: [
                     {
                         dataField: 'ID',
                         // visibleIndex: 2,
+                        allowReordering: false,
                     },
                     {
                         dataField: 'First Name',