Skip to content

Commit

Permalink
Merge pull request #737 from lowcoder-org/dev
Browse files Browse the repository at this point in the history 
Dev -> Main - v2.3.1 Fix
  • Loading branch information
@FalkWolsky
FalkWolsky authored Mar 4, 2024
2 parents 86100fe + f31c4f9 commit 2b62b9e
Show file tree
Hide file tree
Showing 68 changed files with 1,679 additions and 530 deletions.
7 changes: 7 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"workbench.colorCustomizations": {
"activityBar.background": "#2A3012",
"titleBar.activeBackground": "#3B431A",
"titleBar.activeForeground": "#F9FAF2"
}
}
6 changes: 5 additions & 1 deletion client/packages/lowcoder-comps/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
{
"name": "lowcoder-comps",
"version": "0.0.24",
"version": "0.0.26",
"type": "module",
"license": "MIT",
"dependencies": {
"@fullcalendar/adaptive": "^6.1.11",
"@fullcalendar/core": "^6.1.6",
"@fullcalendar/daygrid": "^6.1.6",
"@fullcalendar/interaction": "^6.1.6",
"@fullcalendar/list": "^6.1.9",
"@fullcalendar/moment": "^6.1.6",
"@fullcalendar/react": "^6.1.6",
"@fullcalendar/resource": "^6.1.11",
"@fullcalendar/resource-timegrid": "^6.1.11",
"@fullcalendar/resource-timeline": "^6.1.11",
"@fullcalendar/timegrid": "^6.1.6",
"@types/react": "^18.2.45",
"@types/react-dom": "^18.2.18",
Expand Down
118 changes: 94 additions & 24 deletions client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ import { default as Form } from "antd/es/form";
import { default as Input } from "antd/es/input";
import { trans, getCalendarLocale } from "../../i18n/comps";
import { createRef, useContext, useRef, useState } from "react";
import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
import resourceTimeGridPlugin from "@fullcalendar/resource-timegrid";
import adaptivePlugin from "@fullcalendar/adaptive";

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
Expand All @@ -35,7 +39,8 @@ import allLocales from "@fullcalendar/core/locales-all";
import { EventContentArg, DateSelectArg } from "@fullcalendar/core";
import momentPlugin from "@fullcalendar/moment";
import {
DefaultViewOptions,
DefaultWithFreeViewOptions,
DefaultWithPremiumViewOptions,
FirstDayOptions,
Wrapper,
Event,
Expand All @@ -52,20 +57,28 @@ import {
} from "./calendarConstants";
import dayjs from "dayjs";

function filterViews() {}

const childrenMap = {
events: jsonValueExposingStateControl("events", defaultData),
onEvent: ChangeEventHandlerControl,

editable: withDefault(BoolControl, true),
defaultDate: withDefault(StringControl, "{{ new Date() }}"),
defaultView: dropdownControl(DefaultViewOptions, "timeGridWeek"),
defaultFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"),
defaultPremiumView: dropdownControl(
DefaultWithPremiumViewOptions,
"timeGridWeek"
),

firstDay: dropdownControl(FirstDayOptions, "1"),
showEventTime: withDefault(BoolControl, true),
showWeekends: withDefault(BoolControl, true),
showAllDay: withDefault(BoolControl, true),
dayMaxEvents: withDefault(NumberControl, 2),
eventMaxStack: withDefault(NumberControl, 0),
style: styleControl(CalendarStyle),
licenceKey: withDefault(StringControl, ""),
};

let CalendarBasicComp = (function () {
Expand All @@ -83,14 +96,17 @@ let CalendarBasicComp = (function () {
start: dayjs(item.start, DateParser).format(),
end: dayjs(item.end, DateParser).format(),
allDay: item.allDay,
color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary,
color: isValidColor(item.color || "")
? item.color
: theme?.theme?.primary,
...(item.groupId ? { groupId: item.groupId } : null),
};
});

const {
defaultDate,
defaultView,
defaultFreeView,
defaultPremiumView,
showEventTime,
showWeekends,
showAllDay,
Expand All @@ -99,13 +115,19 @@ let CalendarBasicComp = (function () {
style,
firstDay,
editable,
licenceKey,
} = props;

function renderEventContent(eventInfo: EventContentArg) {
const isList = eventInfo.view.type === "listWeek";
let sizeClass = "";
if ([ViewType.WEEK, ViewType.DAY].includes(eventInfo.view.type as ViewType)) {
const duration = dayjs(eventInfo.event.end).diff(dayjs(eventInfo.event.start), "minutes");
if (
[ViewType.WEEK, ViewType.DAY].includes(eventInfo.view.type as ViewType)
) {
const duration = dayjs(eventInfo.event.end).diff(
dayjs(eventInfo.event.start),
"minutes"
);
if (duration <= 30 || eventInfo.event.allDay) {
sizeClass = "small";
} else if (duration <= 60) {
Expand Down Expand Up @@ -137,7 +159,9 @@ let CalendarBasicComp = (function () {
onClick={(e) => {
e.stopPropagation();
props.onEvent("change");
const event = events.filter((item: EventType) => item.id !== eventInfo.event.id);
const event = events.filter(
(item: EventType) => item.id !== eventInfo.event.id
);
props.events.onChange(event);
}}
onMouseDown={(e) => {
Expand Down Expand Up @@ -195,7 +219,9 @@ let CalendarBasicComp = (function () {
};

const showModal = (event: EventType, ifEdit: boolean) => {
const modalTitle = ifEdit ? trans("calendar.editEvent") : trans("calendar.creatEvent");
const modalTitle = ifEdit
? trans("calendar.editEvent")
: trans("calendar.creatEvent");
form && form.setFieldsValue(event);
const eventId = editEvent.current?.id;
CustomModal.confirm({
Expand All @@ -209,14 +235,18 @@ let CalendarBasicComp = (function () {
</Tooltip>
}
name="id"
rules={[{ required: true, message: trans("calendar.eventIdRequire") }]}
rules={[
{ required: true, message: trans("calendar.eventIdRequire") },
]}
>
<Input />
</Form.Item>
<Form.Item
label={trans("calendar.eventName")}
name="title"
rules={[{ required: true, message: trans("calendar.eventNameRequire") }]}
rules={[
{ required: true, message: trans("calendar.eventNameRequire") },
]}
>
<Input />
</Form.Item>
Expand All @@ -239,9 +269,13 @@ let CalendarBasicComp = (function () {
form.submit();
return form.validateFields().then(() => {
const { id, groupId, color, title = "" } = form.getFieldsValue();
const idExist = props.events.value.findIndex((item: EventType) => item.id === id);
const idExist = props.events.value.findIndex(
(item: EventType) => item.id === id
);
if (idExist > -1 && id !== eventId) {
form.setFields([{ name: "id", errors: [trans("calendar.eventIdExist")] }]);
form.setFields([
{ name: "id", errors: [trans("calendar.eventIdExist")] },
]);
throw new Error();
}
if (ifEdit) {
Expand Down Expand Up @@ -287,6 +321,10 @@ let CalendarBasicComp = (function () {
} catch (error) {
initialDate = undefined;
}
let defaultView = defaultFreeView;
if (licenceKey != "") {
defaultView = defaultPremiumView;
}

return (
<Wrapper
Expand All @@ -306,7 +344,16 @@ let CalendarBasicComp = (function () {
locale={getCalendarLocale()}
locales={allLocales}
firstDay={Number(firstDay)}
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin, momentPlugin]}
plugins={[
dayGridPlugin,
timeGridPlugin,
interactionPlugin,
listPlugin,
momentPlugin,
resourceTimelinePlugin,
resourceTimeGridPlugin,
adaptivePlugin,
]}
headerToolbar={headerToolbar}
moreLinkClick={(info) => {
let left = 0;
Expand All @@ -319,15 +366,19 @@ let CalendarBasicComp = (function () {
}
} else {
if (info.allDay) {
left = ele.offsetParent?.parentElement?.parentElement?.offsetLeft || 0;
left =
ele.offsetParent?.parentElement?.parentElement?.offsetLeft ||
0;
} else {
left =
ele.offsetParent?.parentElement?.parentElement?.parentElement?.offsetLeft || 0;
ele.offsetParent?.parentElement?.parentElement?.parentElement
?.offsetLeft || 0;
}
}
setLeft(left);
}}
buttonText={buttonText}
schedulerLicenseKey={licenceKey}
views={views}
eventClassNames={() => (!showEventTime ? "no-time" : "")}
slotLabelFormat={slotLabelFormat}
Expand All @@ -346,7 +397,9 @@ let CalendarBasicComp = (function () {
eventContent={renderEventContent}
select={(info) => handleCreate(info)}
eventClick={(info) => {
const event = events.find((item: EventType) => item.id === info.event.id);
const event = events.find(
(item: EventType) => item.id === info.event.id
);
editEvent.current = event;
setTimeout(() => {
editEvent.current = undefined;
Expand Down Expand Up @@ -385,10 +438,18 @@ let CalendarBasicComp = (function () {
);
})
.setPropertyViewFn((children) => {
let licence = children.licenceKey.getView();
return (
<>
<Section name={sectionNames.basic}>{children.events.propertyView({})}</Section>
<Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
<Section name={sectionNames.basic}>
{children.events.propertyView({})}
</Section>
<Section name={sectionNames.interaction}>
{children.licenceKey.propertyView({
label: trans("calendar.licence"),
})}
{children.onEvent.getPropertyView()}
</Section>
<Section name={sectionNames.advanced}>
{children.editable.propertyView({
label: trans("calendar.editable"),
Expand All @@ -397,10 +458,15 @@ let CalendarBasicComp = (function () {
label: trans("calendar.defaultDate"),
tooltip: trans("calendar.defaultDateTooltip"),
})}
{children.defaultView.propertyView({
label: trans("calendar.defaultView"),
tooltip: trans("calendar.defaultViewTooltip"),
})}
{licence == ""
? children.defaultFreeView.propertyView({
label: trans("calendar.defaultView"),
tooltip: trans("calendar.defaultViewTooltip"),
})
: children.defaultPremiumView.propertyView({
label: trans("calendar.defaultView"),
tooltip: trans("calendar.defaultViewTooltip"),
})}
{children.firstDay.propertyView({
label: trans("calendar.startWeek"),
})}
Expand All @@ -424,8 +490,12 @@ let CalendarBasicComp = (function () {
tooltip: trans("calendar.eventMaxStackTooltip"),
})}
</Section>
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
<Section name={sectionNames.layout}>
{hiddenPropertyView(children)}
</Section>
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section>
</>
);
})
Expand Down
Loading

0 comments on commit 2b62b9e

Please sign in to comment.