added switch to enable/disable sorting

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx

@@ -23,8 +23,7 @@ import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
 import { AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
 import { DndContext } from "@dnd-kit/core";
-import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { JSONObject } from "@lowcoder-ee/index.sdk";
 
@@ -94,7 +93,7 @@ const MinHorizontalWidthContext = createContext<MinHorizontalWidthContextType>({
   minHorizontalWidth: '100px',
 });
 
-const ContainerInListView = (props: ContainerBaseProps & {itemIdx: number} ) => {
+const ContainerInListView = (props: ContainerBaseProps & {itemIdx: number, enableSorting?: boolean} ) => {
   const {
     horizontalWidth,
     minHorizontalWidth
@@ -104,6 +103,24 @@ const ContainerInListView = (props: ContainerBaseProps & {itemIdx: number} ) =>
     id: String(props.itemIdx),
   });
 
+  if (!props.enableSorting) {
+    return (
+      <div
+        style={{
+          width: horizontalWidth,
+          minWidth: minHorizontalWidth || '0px',
+        }}
+      >
+        <InnerGrid
+          {...props}
+          emptyRows={15}
+          containerPadding={[4, 4]}
+          hintPlaceholder={HintPlaceHolder}
+        />
+      </div>
+    )
+  }
+
   return (
     <div
       ref={setNodeRef}
@@ -139,6 +156,7 @@ type ListItemProps = {
   unMountFn?: () => void;
   minHorizontalWidth?: string;
   horizontalWidth: string;
+  enableSorting?: boolean;
 };
 
 function ListItem({
@@ -154,6 +172,7 @@ function ListItem({
     scrollContainerRef,
     minHeight,
     horizontalGridCells,
+    enableSorting,
   } = props;
 
   // disable the unmount function to save user's state with pagination
@@ -195,6 +214,7 @@ function ListItem({
         overflow={"hidden"}
         minHeight={minHeight}
         enableGridLines={true}
+        enableSorting={enableSorting}
       />
     </MinHorizontalWidthContext.Provider>
   );
@@ -248,6 +268,8 @@ export function ListView(props: Props) {
     };
   }, [children.pagination, totalCount]);
 
+  const enableSorting = useMemo(() => children.enableSorting.getView(), [children.enableSorting]);
+
   useEffect(() => {
     children.listData.dispatchChangeValueAction(data);
   }, [JSON.stringify(data)]);
@@ -313,6 +335,7 @@ export function ListView(props: Props) {
                 unMountFn={unMountFn}
                 horizontalWidth={`${100 / noOfColumns}%`}
                 minHorizontalWidth={horizontal ? minHorizontalWidth : undefined}
+                enableSorting={enableSorting}
               />
             );
           })}
@@ -365,15 +388,20 @@ export function ListView(props: Props) {
                   $isGrid={noOfColumns > 1}
                   $autoHeight={autoHeight}
                 >
-                  <DndContext onDragEnd={handleDragEnd}>
-                    <SortableContext
-                      items={
-                        _.range(0, totalCount).map((colIdx) => String(colIdx))
-                      }
-                    >
-                      {renders}
-                    </SortableContext>
-                  </DndContext>
+                  {!enableSorting
+                    ? renders
+                    : (
+                      <DndContext onDragEnd={handleDragEnd}>
+                        <SortableContext
+                          items={
+                            _.range(0, totalCount).map((colIdx) => String(colIdx))
+                          }
+                        >
+                          {renders}
+                        </SortableContext>
+                      </DndContext>
+                    )
+                  }
                 </ListOrientationWrapper>
               )}
             >

client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx

@@ -61,6 +61,7 @@ const childrenMap = {
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   horizontal: withDefault(BoolControl, false),
   minHorizontalWidth: withDefault(RadiusControl, '100px'),
+  enableSorting: withDefault(BoolControl, false),
 };
 
 const ListViewTmpComp = new UICompBuilder(childrenMap, () => <></>)

client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx

@@ -57,6 +57,9 @@ export function listPropertyView(compType: ListCompType) {
           <Section name={sectionNames.interaction}>
             {hiddenPropertyView(children)}
             {showDataLoadingIndicatorsPropertyView(children)}
+            {children.enableSorting.propertyView({
+              label: trans('listView.enableSorting'),
+            })}
           </Section>
         )}
 

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2598,7 +2598,8 @@ export const en = {
     "itemDataNameDesc": "The Variable Name Referring to the Item's Data Object, Default as {default}",
     "itemsDesc": "Exposing Data of Components in List",
     "dataDesc": "The JSON Data Used in the Current List",
-    "dataTooltip": "If You just Set a Number, This Field Will Be Regarded as Row Count, and the Data Will Be Regarded as Empty."
+    "dataTooltip": "If You just Set a Number, This Field Will Be Regarded as Row Count, and the Data Will Be Regarded as Empty.",
+    "enableSorting": "Allow Sorting"
   },
   "navigation": {
     "addText": "Add Submenu Item",