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

Commit232bed3

Browse files
fixed issue with dynamic data replaced with json on data updates
1 parent047a9f1 commit232bed3

File tree

2 files changed

+120
-95
lines changed

2 files changed

+120
-95
lines changed

‎client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx‎

Lines changed: 83 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import timeGridPlugin from "@fullcalendar/timegrid";
1515
importinteractionPlugin,{EventResizeDoneArg}from"@fullcalendar/interaction";
1616
importlistPluginfrom"@fullcalendar/list";
1717
importallLocalesfrom"@fullcalendar/core/locales-all";
18-
import{EventContentArg,DateSelectArg,EventDropArg}from"@fullcalendar/core";
18+
import{EventContentArg,DateSelectArg,EventDropArg,EventInput}from"@fullcalendar/core";
1919
importmomentPluginfrom"@fullcalendar/moment";
2020

2121
importErrorBoundaryfrom"./errorBoundary";
@@ -58,6 +58,8 @@ import {
5858
depsConfig,
5959
stateComp,
6060
JSONObject,
61+
isDynamicSegment,
62+
Theme,
6163
}from'lowcoder-sdk';
6264

6365
import{
@@ -81,11 +83,14 @@ import {
8183
resourcesDefaultData,
8284
resourceTimeLineHeaderToolbar,
8385
resourceTimeGridHeaderToolbar,
86+
formattedEvents,
8487
}from"./calendarConstants";
8588
import{EventOptionControl}from"./eventOptionsControl";
8689
import{EventImpl}from"@fullcalendar/core/internal";
8790
importDatePickerfrom"antd/es/date-picker";
8891

92+
typeTheme=typeofTheme;
93+
8994
constDATE_TIME_FORMAT="YYYY-MM-DD HH:mm:ss";
9095

9196
functionfixOldData(oldData:any){
@@ -206,6 +211,7 @@ let childrenMap: any = {
206211
showVerticalScrollbar:withDefault(BoolControl,false),
207212
showResourceEventsInFreeView:withDefault(BoolControl,false),
208213
initialData:stateComp<JSONObject>({}),
214+
updatedEventsData:stateComp<JSONObject>(defaultEvents),
209215
updatedEvents:stateComp<JSONObject>({}),
210216
insertedEvents:stateComp<JSONObject>({}),
211217
deletedEvents:stateComp<JSONObject>({}),
@@ -251,15 +257,16 @@ let CalendarBasicComp = (function () {
251257
showVerticalScrollbar?:boolean;
252258
showResourceEventsInFreeView?:boolean;
253259
initialData:Array<EventType>;
260+
updatedEventsData:Array<EventType>;
254261
inputFormat:string;
255262
},dispatch:any)=>{
256263
constcomp=useContext(EditorContext)?.getUICompByName(
257264
useContext(CompNameContext)
258265
);
259266

260-
consttheme=useContext(ThemeContext);
267+
consttheme:Theme|undefined=useContext(ThemeContext);
261268
constref=createRef<HTMLDivElement>();
262-
consteditEvent=useRef<EventType>();
269+
consteditEvent=useRef<EventInput>();
263270
constinitData=useRef<boolean>(false);
264271
const[form]=Form.useForm();
265272
const[left,setLeft]=useState<number|undefined>(undefined);
@@ -294,63 +301,75 @@ let CalendarBasicComp = (function () {
294301

295302
constcurrentEvents=useMemo(()=>{
296303
if(props.showResourceEventsInFreeView&&Boolean(props.licenseKey)){
297-
returnprops.events.filter((event:{resourceId:any;})=>Boolean(event.resourceId))
304+
returnprops.updatedEventsData.filter((event:{resourceId?:any;})=>Boolean(event.resourceId))
298305
}
299306
returncurrentView=="resourceTimelineDay"||currentView=="resourceTimeGridDay"
300-
?props.events.filter((event:{resourceId:any;})=>Boolean(event.resourceId))
301-
:props.events.filter((event:{resourceId:any;})=>!Boolean(event.resourceId));
307+
?props.updatedEventsData.filter((event:{resourceId?:any;})=>Boolean(event.resourceId))
308+
:props.updatedEventsData.filter((event:{resourceId?:any;})=>!Boolean(event.resourceId));
302309
},[
303310
currentView,
304-
props.events,
311+
props.updatedEventsData,
305312
props.showResourceEventsInFreeView,
306313
])
307314

308315
// we use one central stack of events for all views
309-
constevents=useMemo(()=>{
310-
returnArray.isArray(currentEvents) ?currentEvents.map((item:EventType)=>{
311-
return{
312-
title:item.label,
313-
id:item.id,
314-
start:dayjs(item.start,DateParser).format(),
315-
end:dayjs(item.end,DateParser).format(),
316-
allDay:item.allDay,
317-
...(item.resourceId ?{resourceId:item.resourceId} :{}),
318-
...(item.groupId ?{groupId:item.groupId} :{}),
319-
backgroundColor:item.backgroundColor,
320-
extendedProps:{// Ensure color is in extendedProps
321-
color:isValidColor(item.color||"") ?item.color :theme?.theme?.primary,
322-
detail:item.detail,
323-
titleColor:item.titleColor,
324-
detailColor:item.detailColor,
325-
titleFontWeight:item.titleFontWeight,
326-
titleFontStyle:item.titleFontStyle,
327-
detailFontWeight:item.detailFontWeight,
328-
detailFontStyle:item.detailFontStyle,
329-
animation:item?.animation,
330-
animationDelay:item?.animationDelay,
331-
animationDuration:item?.animationDuration,
332-
animationIterationCount:item?.animationIterationCount
333-
}
334-
}
335-
}) :[currentEvents];
316+
constevents:EventInput=useMemo(()=>{
317+
returnformattedEvents(currentEvents,theme);
336318
},[currentEvents,theme])
337319

320+
constinitialEvents=useMemo(()=>{
321+
leteventsList:EventType[]=[];
322+
if(props.showResourceEventsInFreeView&&Boolean(props.licenseKey)){
323+
eventsList=props.events.filter((event:{resourceId?:any;})=>Boolean(event.resourceId))
324+
}
325+
else{
326+
if(currentView=="resourceTimelineDay"||currentView=="resourceTimeGridDay"){
327+
eventsList=props.events.filter((event:{resourceId?:any;})=>Boolean(event.resourceId))
328+
}else{
329+
eventsList=props.events.filter((event:{resourceId?:any;})=>!Boolean(event.resourceId));
330+
}
331+
}
332+
333+
returneventsList.map(event=>({
334+
...event,
335+
start:dayjs(event.start,DateParser).format(),
336+
end:dayjs(event.end,DateParser).format(),
337+
}));
338+
},[
339+
JSON.stringify(props.events),
340+
])
341+
342+
useEffect(()=>{
343+
initData.current=false;
344+
},[JSON.stringify(props.events)]);
345+
338346
useEffect(()=>{
339347
if(initData.current)return;
340348

341349
constmapData:Record<string,number>={};
342-
events?.forEach((item:any,index:number)=>{
350+
initialEvents?.forEach((item:any,index:number)=>{
343351
mapData[`${item.id}`]=index;
344352
})
345353

346-
if(!initData.current&&events?.length&&comp?.children?.comp?.children?.initialData){
354+
if(!initData.current&&initialEvents?.length&&comp?.children?.comp?.children?.initialData){
347355
setInitDataMap(mapData);
348356
comp?.children?.comp?.children?.initialData?.dispatch?.(
349-
comp?.children?.comp?.children?.initialData?.changeValueAction?.([...events])
357+
comp?.children?.comp?.children?.initialData?.changeValueAction?.([...initialEvents])
358+
);
359+
360+
consteventsList=props.events.map((event:EventType)=>({
361+
...event,
362+
start:dayjs(event.start,DateParser).format(),
363+
end:dayjs(event.end,DateParser).format(),
364+
}));
365+
366+
comp?.children?.comp?.children?.updatedEventsData?.dispatch?.(
367+
comp?.children?.comp?.children?.updatedEventsData?.changeValueAction?.(eventsList)
350368
);
369+
351370
initData.current=true;
352371
}
353-
},[JSON.stringify(events),comp?.children?.comp?.children?.initialData]);
372+
},[JSON.stringify(initialEvents),comp?.children?.comp?.children?.initialData]);
354373

355374
constresources=useMemo(()=>props.resources.value,[props.resources.value]);
356375

@@ -413,35 +432,10 @@ let CalendarBasicComp = (function () {
413432
constfindUpdatedInsertedDeletedEvents=useCallback((data:Array<EventType>)=>{
414433
if(!initData.current)return;
415434

416-
leteventsData:Array<Record<string,any>>=currentView=="resourceTimelineDay"||currentView=="resourceTimeGridDay"
435+
consteventsData:Array<EventType>=currentView=="resourceTimelineDay"||currentView=="resourceTimeGridDay"
417436
?data.filter((event:{resourceId?:string;})=>Boolean(event.resourceId))
418437
:data.filter((event:{resourceId?:string;})=>!Boolean(event.resourceId));
419438

420-
eventsData=eventsData.map((item)=>({
421-
title:item.label,
422-
id:item.id,
423-
start:dayjs(item.start,DateParser).format(),
424-
end:dayjs(item.end,DateParser).format(),
425-
allDay:item.allDay,
426-
...(item.resourceId ?{resourceId:item.resourceId} :{}),
427-
...(item.groupId ?{groupId:item.groupId} :{}),
428-
backgroundColor:item.backgroundColor,
429-
extendedProps:{// Ensure color is in extendedProps
430-
color:isValidColor(item.color||"") ?item.color :theme?.theme?.primary,
431-
detail:item.detail,
432-
titleColor:item.titleColor,
433-
detailColor:item.detailColor,
434-
titleFontWeight:item.titleFontWeight,
435-
titleFontStyle:item.titleFontStyle,
436-
detailFontWeight:item.detailFontWeight,
437-
detailFontStyle:item.detailFontStyle,
438-
animation:item?.animation,
439-
animationDelay:item?.animationDelay,
440-
animationDuration:item?.animationDuration,
441-
animationIterationCount:item?.animationIterationCount
442-
}
443-
}));
444-
445439
constmapData:Record<string,number>={};
446440
eventsData?.forEach((item:any,index:number)=>{
447441
mapData[`${item.id}`]=index;
@@ -458,13 +452,8 @@ let CalendarBasicComp = (function () {
458452
},[initDataMap,currentView,props.initialData,initData.current]);
459453

460454
consthandleEventDataChange=useCallback((data:Array<EventType>)=>{
461-
comp?.children?.comp.children.events.children.manual.children.manual.dispatch(
462-
comp?.children?.comp.children.events.children.manual.children.manual.setChildrensAction(
463-
data
464-
)
465-
);
466-
comp?.children?.comp.children.events.children.mapData.children.data.dispatchChangeValueAction(
467-
JSON.stringify(data)
455+
comp?.children?.comp?.children?.updatedEventsData?.dispatch?.(
456+
comp?.children?.comp?.children?.updatedEventsData?.changeValueAction?.(data)
468457
);
469458

470459
findUpdatedInsertedDeletedEvents(data);
@@ -522,7 +511,7 @@ let CalendarBasicComp = (function () {
522511
className="event-remove"
523512
onClick={(e)=>{
524513
e.stopPropagation();
525-
constevents=props.events.filter(
514+
constevents=props.updatedEventsData.filter(
526515
(item:EventType)=>item.id!==eventInfo.event.id
527516
);
528517
handleEventDataChange(events);
@@ -541,7 +530,7 @@ let CalendarBasicComp = (function () {
541530
},[
542531
theme,
543532
props.style,
544-
props.events,
533+
props.updatedEventsData,
545534
props.showAllDay,
546535
handleEventDataChange,
547536
]);
@@ -780,7 +769,7 @@ let CalendarBasicComp = (function () {
780769
end,
781770
allDay,
782771
}=form.getFieldsValue();
783-
constidExist=props.events.findIndex(
772+
constidExist=props.updatedEventsData.findIndex(
784773
(item:EventType)=>item.id===id
785774
);
786775
if(idExist>-1&&id!==eventId){
@@ -790,7 +779,7 @@ let CalendarBasicComp = (function () {
790779
thrownewError();
791780
}
792781
if(ifEdit){
793-
constchangeEvents=props.events.map((item:EventType)=>{
782+
constchangeEvents=props.updatedEventsData.map((item:EventType)=>{
794783
if(item.id===eventId){
795784
return{
796785
...item,
@@ -843,7 +832,7 @@ let CalendarBasicComp = (function () {
843832
...(titleColor!==undefined ?{ titleColor} :null),
844833
...(detailColor!==undefined ?{ detailColor} :null),
845834
};
846-
handleEventDataChange([...props.events,createInfo]);
835+
handleEventDataChange([...props.updatedEventsData,createInfo]);
847836
}
848837
form.resetFields();
849838
});//small change
@@ -855,14 +844,14 @@ let CalendarBasicComp = (function () {
855844
},[
856845
form,
857846
editEvent,
858-
props.events,
847+
props.updatedEventsData,
859848
props?.modalStyle,
860849
props?.animationStyle,
861850
handleEventDataChange,
862851
]);
863852

864853
consthandleDbClick=useCallback(()=>{
865-
constevent=props.events.find(
854+
constevent=props.updatedEventsData.find(
866855
(item:EventType)=>item.id===editEvent.current?.id
867856
)asEventType;
868857
if(!props.editable||!editEvent.current){
@@ -880,7 +869,7 @@ let CalendarBasicComp = (function () {
880869
}
881870
},[
882871
editEvent,
883-
props.events,
872+
props.updatedEventsData,
884873
props.editable,
885874
onEventVal,
886875
showModal,
@@ -911,7 +900,7 @@ let CalendarBasicComp = (function () {
911900
constupdateEventsOnDragOrResize=useCallback((eventInfo:EventImpl)=>{
912901
const{extendedProps, title, ...event}=eventInfo.toJSON();
913902

914-
leteventsList=[...props.events];
903+
leteventsList=[...props.updatedEventsData];
915904
consteventIdx=eventsList.findIndex(
916905
(item:EventType)=>item.id===event.id
917906
);
@@ -923,7 +912,7 @@ let CalendarBasicComp = (function () {
923912
};
924913
handleEventDataChange(eventsList);
925914
}
926-
},[props.events,handleEventDataChange]);
915+
},[props.updatedEventsData,handleEventDataChange]);
927916

928917
consthandleDrop=useCallback((eventInfo:EventDropArg)=>{
929918
updateEventsOnDragOrResize(eventInfo.event);
@@ -987,7 +976,7 @@ let CalendarBasicComp = (function () {
987976
select={(info)=>handleCreate(info)}
988977
eventClick={(info)=>{
989978
constevent=events.find(
990-
(item:EventType)=>item.id===info.event.id
979+
(item:EventInput)=>item.id===info.event.id
991980
);
992981
editEvent.current=event;
993982
setTimeout(()=>{
@@ -1018,9 +1007,9 @@ let CalendarBasicComp = (function () {
10181007
}}
10191008
eventsSet={(info)=>{
10201009
letneedChange=false;
1021-
letchangeEvents:EventType[]=[];
1010+
letchangeEvents:EventInput[]=[];
10221011
info.forEach((item)=>{
1023-
constevent=events.find((i:EventType)=>i.id===item.id);
1012+
constevent=events.find((i:EventInput)=>i.id===item.id);
10241013
conststart=dayjs(item.start,DateParser).format();
10251014
constend=dayjs(item.end,DateParser).format();
10261015
if(
@@ -1076,7 +1065,7 @@ let CalendarBasicComp = (function () {
10761065
style:{getPropertyView:()=>any;};
10771066
animationStyle:{getPropertyView:()=>any;};
10781067
modalStyle:{getPropertyView:()=>any;};
1079-
licenseKey:{getView:()=>any;propertyView:(arg0:{label:string;})=>any;};
1068+
licenseKey:{getView:()=>any;propertyView:(arg0:{label:string;tooltip:string})=>any;};
10801069
showVerticalScrollbar:{propertyView:(arg0:{label:string;})=>any;};
10811070
showResourceEventsInFreeView:{propertyView:(arg0:{label:string;})=>any;};
10821071
inputFormat:{propertyView:(arg0:{})=>any;};
@@ -1172,25 +1161,25 @@ const TmpCalendarComp = withExposingConfigs(CalendarBasicComp, [
11721161
depsConfig({
11731162
name:"allEvents",
11741163
desc:trans("calendar.events"),
1175-
depKeys:["events"],
1176-
func:(input:{events:any[];})=>{
1177-
returninput.events;
1164+
depKeys:["updatedEventsData"],
1165+
func:(input:{updatedEventsData:any[];})=>{
1166+
returninput.updatedEventsData;
11781167
},
11791168
}),
11801169
depsConfig({
11811170
name:"events",
11821171
desc:trans("calendar.events"),
1183-
depKeys:["events"],
1184-
func:(input:{events:any[];})=>{
1185-
returninput.events.filter(event=>!Boolean(event.resourceId));
1172+
depKeys:["updatedEventsData"],
1173+
func:(input:{updatedEventsData:any[];})=>{
1174+
returninput.updatedEventsData.filter(event=>!Boolean(event.resourceId));
11861175
},
11871176
}),
11881177
depsConfig({
11891178
name:"resourcesEvents",
11901179
desc:trans("calendar.resourcesEvents"),
1191-
depKeys:["events"],
1192-
func:(input:{events:any[];})=>{
1193-
returninput.events.filter(event=>Boolean(event.resourceId));
1180+
depKeys:["updatedEventsData"],
1181+
func:(input:{updatedEventsData:any[];})=>{
1182+
returninput.updatedEventsData.filter(event=>Boolean(event.resourceId));
11941183
},
11951184
}),
11961185
depsConfig({

0 commit comments

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