)[0].children.comp.children.text);
+ const items = _.range(0, noOfColumns);
const render = (
- {_.range(0, noOfColumns).map((colIdx) => {
+ {items.map((colIdx) => {
const itemIdx = rowIdx * noOfColumns + colIdx + pageInfo.offset;
if (
itemIdx >= pageInfo.total ||
@@ -250,7 +312,7 @@ export function ListView(props: Props) {
const containerProps = containerFn(
{
[itemIndexName]: itemIdx,
- [itemDataName]: getCurrentItemParams(data, itemIdx)
+ [itemDataName]: getCurrentItemParams(listData as JSONObject[], itemIdx)
},
String(itemIdx)
).getView();
@@ -259,6 +321,7 @@ export function ListView(props: Props) {
deferAction(ContextContainerComp.batchDeleteAction([String(itemIdx)]))
);
};
+
return (
);
})}
);
+
return render;
});
@@ -289,6 +354,23 @@ export function ListView(props: Props) {
useMergeCompStyles(childrenProps, comp.dispatch);
+ const handleDragEnd = (e: { active: { id: string }; over: { id: string } | null }) => {
+ if (!e.over) {
+ return;
+ }
+ const fromIndex = Number(e.active.id);
+ const toIndex = Number(e.over.id);
+ if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) {
+ return;
+ }
+
+ const newData = [...listData];
+ const [movedItem] = newData.splice(fromIndex, 1);
+ newData.splice(toIndex, 0, movedItem);
+
+ children.listData.dispatchChangeValueAction(newData);
+ };
+
// log.debug("renders: ", renders);
return (
@@ -306,7 +388,20 @@ export function ListView(props: Props) {
$isGrid={noOfColumns > 1}
$autoHeight={autoHeight}
>
- {renders}
+ {!enableSorting
+ ? renders
+ : (
+
+ String(colIdx))
+ }
+ >
+ {renders}
+
+
+ )
+ }
)}
>
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx
index 47da5c6f3c..00f6807cf8 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx
@@ -29,7 +29,7 @@ import {
withFunction,
WrapContextNodeV2,
} from "lowcoder-core";
-import { JSONValue } from "util/jsonTypes";
+import { JSONArray, JSONValue } from "util/jsonTypes";
import { depthEqual, lastValueIfEqual, shallowEqual } from "util/objectUtils";
import { CompTree, getAllCompItems, IContainer } from "../containerBase";
import { SimpleContainerComp, toSimpleContainerData } from "../containerBase/simpleContainerComp";
@@ -43,6 +43,7 @@ import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
const childrenMap = {
noOfRows: withIsLoadingMethod(NumberOrJSONObjectArrayControl), // FIXME: migrate "noOfRows" to "data"
+ listData: stateComp([]),
noOfColumns: withDefault(NumberControl, 1),
itemIndexName: withDefault(StringControl, "i"),
itemDataName: withDefault(StringControl, "currentItem"),
@@ -60,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, () => <>)
@@ -116,7 +118,7 @@ export class ListViewImplComp extends ListViewTmpComp implements IContainer {
const { itemCount } = getData(this.children.noOfRows.getView());
const itemIndexName = this.children.itemIndexName.getView();
const itemDataName = this.children.itemDataName.getView();
- const dataExposingNode = this.children.noOfRows.exposingNode();
+ const dataExposingNode = this.children.listData.exposingNode();
const containerComp = this.children.container;
// for each container expose each comps with params
const exposingRecord = _(_.range(0, itemCount))
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
index 6e9a4b865d..22e288d737 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
@@ -57,6 +57,9 @@ export function listPropertyView(compType: ListCompType) {
{hiddenPropertyView(children)}
{showDataLoadingIndicatorsPropertyView(children)}
+ {children.enableSorting.propertyView({
+ label: trans('listView.enableSorting'),
+ })}
)}
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index ce47ff7093..825761bc3c 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/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",
--- a PPN by Garber Painting Akron. With Image Size Reduction included!Fetched URL: http://github.com/lowcoder-org/lowcoder/pull/1644.diff
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy