Skip to content

Commit d5d844e

Browse files
MenamAfzalMenamAfzal
committed
final changes
1 parent 96f824e commit d5d844e

File tree

2 files changed

+45
-64
lines changed

2 files changed

+45
-64
lines changed

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

Lines changed: 11 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -174,10 +174,8 @@ let CalendarBasicComp = (function () {
174174
animation:item?.animation,
175175
animationDelay:item?.animationDelay,
176176
animationDuration:item?.animationDuration,
177-
animationIterationCount:item.animationIterationCount
178-
179-
},
180-
};
177+
animationIterationCount:item?.animationIterationCount
178+
}}
181179
}) : [currentEvents.value];
182180

183181

@@ -285,28 +283,16 @@ let CalendarBasicComp = (function () {
285283
return (
286284
<Event
287285
className={`event ${sizeClass} ${stateClass}`}
288-
$bg={eventInfo.event.extendedProps.color}
289286
theme={theme?.theme}
290287
$isList={isList}
291288
$allDay={Boolean(showAllDay)}
292289
$style={props.style}
293290
$backgroundColor={eventInfo.backgroundColor}
294-
$detail={eventInfo.event.extendedProps.detail}
295-
$titleColor={eventInfo.event.extendedProps.titleColor}
296-
$detailColor={eventInfo.event.extendedProps.detailColor}
297-
$titleFontWeight={eventInfo.event.extendedProps.titleFontWeight}
298-
$titleFontStyle={eventInfo.event.extendedProps.titleFontStyle}
299-
$detailFontWeight={eventInfo.event.extendedProps.detailFontWeight}
300-
$detailFontStyle={eventInfo.event.extendedProps.detailFontStyle}
301-
$animation={eventInfo.event.extendedProps?.animation}
302-
$animationDelay={eventInfo.event.extendedProps?.animationDelay}
303-
$animationDuration={eventInfo.event.extendedProps?.animationDuration}
304-
$animationIterationCount={eventInfo.event.extendedProps?.animationIterationCount}
305-
291+
$extendedProps={eventInfo?.event?.extendedProps}
306292
>
307-
<div className="event-time">{eventInfo.timeText}</div>
308-
<div className="event-title">{eventInfo.event.title}</div>
309-
<div className="event-detail">{eventInfo.event.extendedProps.detail}</div>
293+
<div className="event-time">{eventInfo?.timeText}</div>
294+
<div className="event-title">{eventInfo?.event?.title}</div>
295+
<div className="event-detail">{eventInfo?.event?.extendedProps?.detail}</div>
310296
<Remove
311297
$isList={isList}
312298
className="event-remove"
@@ -328,7 +314,6 @@ let CalendarBasicComp = (function () {
328314
</Event>
329315
);
330316
}
331-
332317
const handleDbClick = () => {
333318
const event = props.events.value.find(
334319
(item: EventType) => item.id === editEvent.current?.id
@@ -419,7 +404,7 @@ let CalendarBasicComp = (function () {
419404
content: (
420405
<Tabs defaultActiveKey="1">
421406
<Tabs.TabPane tab={trans("calendar.general")} key="1">
422-
<FormWrapper form={form} $modaltyle={modalStyle}>
407+
<FormWrapper form={form} $modalStyle={modalStyle}>
423408
<Form.Item
424409
label={
425410
<Tooltip title={trans("calendar.eventIdTooltip")}>
@@ -457,7 +442,7 @@ let CalendarBasicComp = (function () {
457442
</FormWrapper>
458443
</Tabs.TabPane>
459444
<Tabs.TabPane tab={trans("calendar.colorStyles")} key="2">
460-
<FormWrapper form={form} $modaltyle={modalStyle}>
445+
<FormWrapper form={form} $modalStyle={modalStyle}>
461446
<Form.Item
462447
label={trans("calendar.eventTitleColor")}
463448
name="titleColor"
@@ -485,7 +470,7 @@ let CalendarBasicComp = (function () {
485470
</FormWrapper>
486471
</Tabs.TabPane>
487472
<Tabs.TabPane tab={trans("calendar.fontStyles")} key="3">
488-
<FormWrapper form={form} $modaltyle={modalStyle}>
473+
<FormWrapper form={form} $modalStyle={modalStyle}>
489474
<Form.Item
490475
label={trans("calendar.eventTitleFontWeight")}
491476
name="titleFontWeight"
@@ -513,7 +498,7 @@ let CalendarBasicComp = (function () {
513498
</FormWrapper>
514499
</Tabs.TabPane>
515500
<Tabs.TabPane tab={trans("calendar.animations")} key="4">
516-
<FormWrapper form={form} $modaltyle={modalStyle}>
501+
<FormWrapper form={form} $modalStyle={modalStyle}>
517502
<Form.Item
518503
label={trans("calendar.animationType")}
519504
name="animation"
@@ -952,3 +937,4 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [
952937

953938

954939
export { CalendarComp };
940+

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

Lines changed: 34 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -654,24 +654,12 @@ export const Remove = styled.div<{ $isList: boolean }>`
654654
`;
655655

656656
export const Event = styled.div<{
657-
$bg: string;
658657
theme: Object;
659658
$isList: boolean;
660659
$allDay: boolean;
661660
$style: CalendarStyleType;
662661
$backgroundColor:string;
663-
$detail:string;
664-
$titleColor:string;
665-
$detailColor:string;
666-
$titleFontWeight:string;
667-
$titleFontStyle:string;
668-
$detailFontWeight:string;
669-
$detailFontStyle:string;
670-
$animation?: any;
671-
$animationDelay?: any;
672-
$animationDuration?: any;
673-
$animationIterationCount?: any;
674-
662+
$extendedProps: any;
675663
}>`
676664
height: 100%;
677665
width: 100%;
@@ -680,17 +668,17 @@ export const Event = styled.div<{
680668
box-shadow: ${(props) => !props.$isList && "0 0 5px 0 rgba(0, 0, 0, 0.15)"};
681669
border: 1px solid ${(props) => props.$style.border};
682670
display: ${(props) => props.$isList && "flex"};
683-
background-color:${(props) => props.$backgroundColor};
671+
background-color:${(props) => props?.$backgroundColor || "#ffffff"} ;
684672
overflow: hidden;
685673
font-size: 13px;
686674
line-height: 19px;
687675
padding-right: 20px;
688676
overflow: hidden;
689677
position: relative;
690-
animation: ${(props) => props?.$animation};
691-
animation-delay: ${(props) => props?.$animationDelay};
692-
animation-duration: ${(props) => props?.$animationDuration};
693-
animation-iteration-count: ${(props) => props?.$animationIterationCount};
678+
animation: ${(props) => props?.$extendedProps?.animation || ""};
679+
animation-delay: ${(props) => props?.$extendedProps?.animationDelay || ""} ;
680+
animation-duration: ${(props) => props?.$extendedProps?.animationDuration || ""};
681+
animation-iteration-count: ${(props) => props?.$extendedProps?.animationIterationCount || ""};
694682
&::before {
695683
content: "";
696684
position: absolute;
@@ -700,7 +688,7 @@ export const Event = styled.div<{
700688
left: 2px;
701689
top: 2px;
702690
border-radius: 3px;
703-
background-color: ${(props) => props.$bg};
691+
background-color: ${(props) => props.$extendedProps?.color};
704692
}
705693
706694
.event-time {
@@ -714,17 +702,17 @@ export const Event = styled.div<{
714702
margin-top: 2px;
715703
}
716704
.event-title {
717-
color: ${(props) => props.$titleColor};
718-
font-weight: ${(props) => props.$titleFontWeight};
719-
font-style: ${(props) => props.$titleFontStyle};
705+
color: ${(props) => props?.$extendedProps?.titleColor || "#000000"};
706+
font-weight: ${(props) => props?.$extendedProps?.titleFontWeight || "normal"};
707+
font-style: ${(props) => props?.$extendedProps?.titleFontStyle || ""};
720708
margin-left: 15px;
721709
white-space: pre-wrap;
722710
word-break: break-word;
723711
}
724712
.event-detail {
725-
color: ${(props) => props.$detailColor};
726-
font-weight: ${(props) => props.$detailFontWeight};
727-
font-style: ${(props) => props.$detailFontStyle};
713+
color: ${(props) => props?.$extendedProps?.detailColor || "#000000"};
714+
font-weight: ${(props) => props?.$extendedProps?.detailFontWeight || "normal"};
715+
font-style: ${(props) => props?.$extendedProps?.detailFontStyle || "italic"};
728716
margin-left: 15px;
729717
white-space: pre-wrap;
730718
word-break: break-word;
@@ -762,9 +750,9 @@ export const Event = styled.div<{
762750
}
763751
&.past {
764752
background-color: ${(props) =>
765-
`rgba(${props.$style.bg}, 0.3)`};
753+
`rgba(${props?.$extendedProps?.color}, 0.3)`};
766754
&::before {
767-
background-color: ${(props) => props.$style.bg};
755+
background-color: ${(props) => props?.$extendedProps?.color};
768756
opacity: 0.3;
769757
}
770758
&::before,
@@ -780,10 +768,10 @@ export const Event = styled.div<{
780768

781769

782770
export const FormWrapper = styled(Form)<{
783-
$modaltyle: EventModalStyleType
771+
$modalStyle: EventModalStyleType
784772
}>`
785773
.ant-form-item-label {
786-
width: 120px;
774+
width: 125px;
787775
text-align: left;
788776
line-height: 18px;
789777
@@ -801,11 +789,11 @@ export const FormWrapper = styled(Form)<{
801789
802790
// Setting style for input fields
803791
.ant-input {
804-
background-color: ${(props) => props.$modaltyle.labelBackground };
805-
border-color: ${(props) => props.$modaltyle.border};
806-
border-width: ${(props) => props.$modaltyle.borderWidth};
807-
border-style: ${(props) => props.$modaltyle.borderStyle};
808-
color: ${(props) => props.$modaltyle.text};
792+
background-color: ${(props) => props.$modalStyle.labelBackground };
793+
border-color: ${(props) => props.$modalStyle.border};
794+
border-width: ${(props) => props.$modalStyle.borderWidth};
795+
border-style: ${(props) => props.$modalStyle.borderStyle};
796+
color: ${(props) => props.$modalStyle.text};
809797
}
810798
811799
`;
@@ -953,19 +941,25 @@ export const defaultData = [
953941
start: dayjs().hour(10).minute(0).second(0).format(DATE_TIME_FORMAT),
954942
end: dayjs().hour(12).minute(30).second(0).format(DATE_TIME_FORMAT),
955943
color: "#079968",
956-
backgroundColor:"purple",
944+
backgroundColor:"#ffffff",
957945
detail: 'Discuss project milestones and deliverables.',
958-
titleColor:"black",
959-
detailColor:"black",
946+
titleColor:"#000000",
947+
detailColor:"#000000",
948+
titleFontWeight:"normal",
949+
titleFontStyle:"italic",
950+
detailFontWeight:"normal",
951+
detailFontStyle:"italic",
952+
animation:"none",
953+
animationDelay:"0s",
954+
animationDuration:"0s",
955+
animationIterationCount:"0",
960956
},
961957
{
962958
id: "2",
963959
title: "Rest",
964960
start: dayjs().hour(24).format(DATE_FORMAT),
965961
end: dayjs().hour(48).format(DATE_FORMAT),
966-
backgroundColor:"purple",
967962
color: "#079968",
968-
titleColor:"white",
969963
allDay: true,
970964
},
971965
];
@@ -1114,3 +1108,4 @@ export const viewClassNames = (info: ViewContentArg) => {
11141108
}
11151109
return className;
11161110
};
1111+

0 commit comments

Comments
 (0)