Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit1c8fd39

Browse files
added sorting option in list view comp
1 parent873e468 commit1c8fd39

File tree

2 files changed

+104
-36
lines changed

2 files changed

+104
-36
lines changed

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

Lines changed: 101 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import{defaultasPagination}from"antd/es/pagination";
22
import{EditorContext}from"comps/editorState";
33
import{BackgroundColorContext}from"comps/utils/backgroundColorContext";
4-
import_from"lodash";
4+
import_,{findIndex}from"lodash";
55
import{ConstructorToView,deferAction}from"lowcoder-core";
6-
import{HintPlaceHolder,ScrollBar,pageItemRender}from"lowcoder-design";
6+
import{DragIcon,HintPlaceHolder,ScrollBar,pageItemRender}from"lowcoder-design";
77
import{RefObject,useContext,createContext,useMemo,useRef,useEffect}from"react";
88
importReactResizeDetectorfrom"react-resize-detector";
99
importstyledfrom"styled-components";
@@ -22,6 +22,11 @@ import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
2222
import{childrenToProps}from"@lowcoder-ee/comps/generators/multi";
2323
import{AnimationStyleType}from"@lowcoder-ee/comps/controls/styleControlConstants";
2424
import{getBackgroundStyle}from"@lowcoder-ee/util/styleUtils";
25+
import{DndContext}from"@dnd-kit/core";
26+
import{SortableContext,useSortable,verticalListSortingStrategy}from"@dnd-kit/sortable";
27+
import{restrictToVerticalAxis}from"@dnd-kit/modifiers";
28+
import{CSS}from"@dnd-kit/utilities";
29+
import{JSONObject}from"@lowcoder-ee/index.sdk";
2530

2631
constListViewWrapper=styled.div<{$style:any;$paddingWidth:string,$animationStyle:AnimationStyleType}>`
2732
height: 100%;
@@ -63,6 +68,22 @@ const ListOrientationWrapper = styled.div<{
6368
flex-direction:${(props)=>(props.$isHorizontal ?"row" :"column")};
6469
`;
6570

71+
constStyledDragIcon=styled(DragIcon)`
72+
height: 16px;
73+
width: 16px;
74+
color: #8b8fa3;
75+
76+
&:hover {
77+
cursor: grab;
78+
outline: none;
79+
}
80+
81+
&:focus {
82+
cursor: grab;
83+
outline: none;
84+
}
85+
`;
86+
6687
typeMinHorizontalWidthContextType={
6788
horizontalWidth:string,
6889
minHorizontalWidth?:string,
@@ -73,19 +94,30 @@ const MinHorizontalWidthContext = createContext<MinHorizontalWidthContextType>({
7394
minHorizontalWidth:'100px',
7495
});
7596

76-
constContainerInListView=(props:ContainerBaseProps)=>{
97+
constContainerInListView=(props:ContainerBaseProps&{itemIdx:number})=>{
7798
const{
7899
horizontalWidth,
79100
minHorizontalWidth
80101
}=useContext(MinHorizontalWidthContext);
81102

103+
const{ attributes, listeners, setNodeRef, transform, transition}=useSortable({
104+
id:String(props.itemIdx),
105+
});
106+
82107
return(
83108
<div
109+
ref={setNodeRef}
84110
style={{
85111
width:horizontalWidth,
86112
minWidth:minHorizontalWidth||'0px',
113+
transform:CSS.Transform.toString(transform),
114+
transition,
115+
display:'flex',
116+
flexWrap:'nowrap',
117+
alignItems:'center',
87118
}}
88119
>
120+
{<StyledDragIcon{...attributes}{...listeners}/>}
89121
<InnerGrid
90122
{...props}
91123
emptyRows={15}
@@ -133,35 +165,36 @@ function ListItem({
133165
// }, []);
134166

135167
return(
136-
<MinHorizontalWidthContext.Provider
137-
value={{
138-
horizontalWidth,
139-
minHorizontalWidth
168+
<MinHorizontalWidthContext.Provider
169+
value={{
170+
horizontalWidth,
171+
minHorizontalWidth
172+
}}
173+
>
174+
<ContainerInListView
175+
itemIdx={itemIdx}
176+
layout={containerProps.layout}
177+
items={gridItemCompToGridItems(containerProps.items)}
178+
horizontalGridCells={horizontalGridCells}
179+
positionParams={containerProps.positionParams}
180+
// all layout changes should only reflect on the commonContainer
181+
dispatch={itemIdx===offset ?containerProps.dispatch :_.noop}
182+
style={{
183+
height:"100%",
184+
// in case of horizontal mode, minHorizontalWidth is 0px
185+
width:minHorizontalWidth||'100%',
186+
backgroundColor:"transparent",
187+
// flex: "auto",
140188
}}
141-
>
142-
<ContainerInListView
143-
layout={containerProps.layout}
144-
items={gridItemCompToGridItems(containerProps.items)}
145-
horizontalGridCells={horizontalGridCells}
146-
positionParams={containerProps.positionParams}
147-
// all layout changes should only reflect on the commonContainer
148-
dispatch={itemIdx===offset ?containerProps.dispatch :_.noop}
149-
style={{
150-
height:"100%",
151-
// in case of horizontal mode, minHorizontalWidth is 0px
152-
width:minHorizontalWidth||'100%',
153-
backgroundColor:"transparent",
154-
// flex: "auto",
155-
}}
156-
autoHeight={autoHeight}
157-
isDroppable={itemIdx===offset}
158-
isDraggable={itemIdx===offset}
159-
isResizable={itemIdx===offset}
160-
isSelectable={itemIdx===offset}
161-
scrollContainerRef={scrollContainerRef}
162-
overflow={"hidden"}
163-
minHeight={minHeight}
164-
enableGridLines={true}
189+
autoHeight={autoHeight}
190+
isDroppable={itemIdx===offset}
191+
isDraggable={itemIdx===offset}
192+
isResizable={itemIdx===offset}
193+
isSelectable={itemIdx===offset}
194+
scrollContainerRef={scrollContainerRef}
195+
overflow={"hidden"}
196+
minHeight={minHeight}
197+
enableGridLines={true}
165198
/>
166199
</MinHorizontalWidthContext.Provider>
167200
);
@@ -190,6 +223,7 @@ export function ListView(props: Props) {
190223
()=>getData(children.noOfRows.getView()),
191224
[children.noOfRows]
192225
);
226+
constlistData=useMemo(()=>children.listData.getView(),[children.listData]);
193227
consthorizontalGridCells=useMemo(()=>children.horizontalGridCells.getView(),[children.horizontalGridCells]);
194228
constautoHeight=useMemo(()=>children.autoHeight.getView(),[children.autoHeight]);
195229
constshowHorizontalScrollbar=useMemo(()=>children.showHorizontalScrollbar.getView(),[children.showHorizontalScrollbar]);
@@ -213,6 +247,11 @@ export function ListView(props: Props) {
213247
total,
214248
};
215249
},[children.pagination,totalCount]);
250+
251+
useEffect(()=>{
252+
children.listData.dispatchChangeValueAction(data);
253+
},[JSON.stringify(data)]);
254+
216255
conststyle=children.style.getView();
217256
constanimationStyle=children.animationStyle.getView();
218257

@@ -229,6 +268,7 @@ export function ListView(props: Props) {
229268
// log.log("List. listHeight: ", listHeight, " minHeight: ", minHeight);
230269
constrenders=_.range(0,noOfRows).map((rowIdx)=>{
231270
// log.log("renders. i: ", i, "containerProps: ", containerProps, " text: ", Object.values(containerProps.items as Record<string, any>)[0].children.comp.children.text);
271+
constitems=_.range(0,noOfColumns);
232272
constrender=(
233273
<div
234274
key={rowIdx}
@@ -238,7 +278,7 @@ export function ListView(props: Props) {
238278
}}
239279
>
240280
<FlexWrapper>
241-
{_.range(0,noOfColumns).map((colIdx)=>{
281+
{items.map((colIdx)=>{
242282
constitemIdx=rowIdx*noOfColumns+colIdx+pageInfo.offset;
243283
if(
244284
itemIdx>=pageInfo.total||
@@ -250,7 +290,7 @@ export function ListView(props: Props) {
250290
constcontainerProps=containerFn(
251291
{
252292
[itemIndexName]:itemIdx,
253-
[itemDataName]:getCurrentItemParams(data,itemIdx)
293+
[itemDataName]:getCurrentItemParams(listDataasJSONObject[],itemIdx)
254294
},
255295
String(itemIdx)
256296
).getView();
@@ -259,6 +299,7 @@ export function ListView(props: Props) {
259299
deferAction(ContextContainerComp.batchDeleteAction([String(itemIdx)]))
260300
);
261301
};
302+
262303
return(
263304
<ListItem
264305
key={itemIdx}
@@ -278,6 +319,7 @@ export function ListView(props: Props) {
278319
</FlexWrapper>
279320
</div>
280321
);
322+
281323
returnrender;
282324
});
283325

@@ -289,6 +331,23 @@ export function ListView(props: Props) {
289331

290332
useMergeCompStyles(childrenProps,comp.dispatch);
291333

334+
consthandleDragEnd=(e:{active:{id:string};over:{id:string}|null})=>{
335+
if(!e.over){
336+
return;
337+
}
338+
constfromIndex=Number(e.active.id);
339+
consttoIndex=Number(e.over.id);
340+
if(fromIndex<0||toIndex<0||fromIndex===toIndex){
341+
return;
342+
}
343+
344+
constnewData=[...listData];
345+
const[movedItem]=newData.splice(fromIndex,1);
346+
newData.splice(toIndex,0,movedItem);
347+
348+
children.listData.dispatchChangeValueAction(newData);
349+
};
350+
292351
// log.debug("renders: ", renders);
293352
return(
294353
<BackgroundColorContext.Providervalue={style.background}>
@@ -306,7 +365,15 @@ export function ListView(props: Props) {
306365
$isGrid={noOfColumns>1}
307366
$autoHeight={autoHeight}
308367
>
309-
{renders}
368+
<DndContextonDragEnd={handleDragEnd}>
369+
<SortableContext
370+
items={
371+
_.range(0,totalCount).map((colIdx)=>String(colIdx))
372+
}
373+
>
374+
{renders}
375+
</SortableContext>
376+
</DndContext>
310377
</ListOrientationWrapper>
311378
)}
312379
>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import {
2929
withFunction,
3030
WrapContextNodeV2,
3131
}from"lowcoder-core";
32-
import{JSONValue}from"util/jsonTypes";
32+
import{JSONArray,JSONValue}from"util/jsonTypes";
3333
import{depthEqual,lastValueIfEqual,shallowEqual}from"util/objectUtils";
3434
import{CompTree,getAllCompItems,IContainer}from"../containerBase";
3535
import{SimpleContainerComp,toSimpleContainerData}from"../containerBase/simpleContainerComp";
@@ -43,6 +43,7 @@ import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
4343

4444
constchildrenMap={
4545
noOfRows:withIsLoadingMethod(NumberOrJSONObjectArrayControl),// FIXME: migrate "noOfRows" to "data"
46+
listData:stateComp<JSONArray>([]),
4647
noOfColumns:withDefault(NumberControl,1),
4748
itemIndexName:withDefault(StringControl,"i"),
4849
itemDataName:withDefault(StringControl,"currentItem"),
@@ -116,7 +117,7 @@ export class ListViewImplComp extends ListViewTmpComp implements IContainer {
116117
const{ itemCount}=getData(this.children.noOfRows.getView());
117118
constitemIndexName=this.children.itemIndexName.getView();
118119
constitemDataName=this.children.itemDataName.getView();
119-
constdataExposingNode=this.children.noOfRows.exposingNode();
120+
constdataExposingNode=this.children.listData.exposingNode();
120121
constcontainerComp=this.children.container;
121122
// for each container expose each comps with params
122123
constexposingRecord=_(_.range(0,itemCount))

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp