Skip to content

Commit 2395c7e

Browse files
ggbond2077ggbond2077
committed
feat: js library v2
fix: file comp not clear parsed value fix(table): fix simpleTextComp
1 parent 85d7250 commit 2395c7e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+1102
-523
lines changed

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

Lines changed: 98 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,11 @@ import {
2020
CustomModal,
2121
jsonValueExposingStateControl,
2222
CalendarDeleteIcon,
23+
Tooltip,
2324
} from "openblocks-sdk";
2425
import { Input, Form } from "antd";
2526
import { trans, getCalendarLocale } from "../../i18n/comps";
26-
import { createRef, useContext, useRef } from "react";
27+
import { createRef, useContext, useRef, useState } from "react";
2728
import FullCalendar from "@fullcalendar/react";
2829
import dayGridPlugin from "@fullcalendar/daygrid";
2930
import timeGridPlugin from "@fullcalendar/timegrid";
@@ -46,6 +47,7 @@ import {
4647
views,
4748
slotLabelFormat,
4849
viewClassNames,
50+
FormWrapper,
4951
} from "./calendarConstants";
5052
import moment from "moment";
5153

@@ -71,6 +73,7 @@ let CalendarBasicComp = (function () {
7173
const ref = createRef<HTMLDivElement>();
7274
const editEvent = useRef<EventType>();
7375
const [form] = Form.useForm();
76+
const [left, setLeft] = useState<number | undefined>(undefined);
7477

7578
const events = props.events.value.map((item: EventType) => {
7679
return {
@@ -154,11 +157,12 @@ let CalendarBasicComp = (function () {
154157
return;
155158
}
156159
if (event) {
157-
const { title, groupId, color } = event;
160+
const { title, groupId, color, id } = event;
158161
const eventInfo = {
159162
title,
160163
groupId,
161164
color,
165+
id,
162166
};
163167
showModal(eventInfo, true);
164168
} else {
@@ -171,7 +175,6 @@ let CalendarBasicComp = (function () {
171175
allDay: info.allDay,
172176
start: info.startStr,
173177
end: info.endStr,
174-
id: events.length + 1 + "",
175178
};
176179
const view = info.view.type as ViewType;
177180
const duration = moment(info.end).diff(moment(info.start), "minutes");
@@ -181,6 +184,9 @@ let CalendarBasicComp = (function () {
181184
(info.allDay && duration === 1440);
182185
if (singleClick) {
183186
editEvent.current = event;
187+
setTimeout(() => {
188+
editEvent.current = undefined;
189+
}, 500);
184190
return;
185191
}
186192
showModal(event, false);
@@ -189,56 +195,86 @@ let CalendarBasicComp = (function () {
189195
const showModal = (event: EventType, ifEdit: boolean) => {
190196
const modalTitle = ifEdit ? trans("calendar.editEvent") : trans("calendar.creatEvent");
191197
form && form.setFieldsValue(event);
198+
const eventId = editEvent.current?.id;
192199
CustomModal.confirm({
193200
title: modalTitle,
194201
content: (
195-
<Form form={form}>
196-
<Form.Item label={trans("calendar.eventName")} name="title">
202+
<FormWrapper form={form}>
203+
<Form.Item
204+
label={
205+
<Tooltip title={trans("calendar.eventIdTooltip")}>
206+
{trans("calendar.eventId")}
207+
</Tooltip>
208+
}
209+
name="id"
210+
rules={[{ required: true, message: trans("calendar.eventIdRequire") }]}
211+
>
212+
<Input />
213+
</Form.Item>
214+
<Form.Item
215+
label={trans("calendar.eventName")}
216+
name="title"
217+
rules={[{ required: true, message: trans("calendar.eventNameRequire") }]}
218+
>
197219
<Input />
198220
</Form.Item>
199221
<Form.Item label={trans("calendar.eventColor")} name="color">
200222
<Input />
201223
</Form.Item>
202-
<Form.Item label={trans("calendar.eventGroupId")} name="groupId">
224+
<Form.Item
225+
label={
226+
<Tooltip title={trans("calendar.groupIdTooltip")}>
227+
{trans("calendar.eventGroupId")}
228+
</Tooltip>
229+
}
230+
name="groupId"
231+
>
203232
<Input />
204233
</Form.Item>
205-
</Form>
234+
</FormWrapper>
206235
),
207236
onConfirm: () => {
208-
const { groupId, color, title = "" } = form.getFieldsValue();
209-
if (ifEdit) {
210-
const changeEvents = props.events.value.map((item: EventType) => {
211-
if (item.id === editEvent.current?.id) {
212-
return {
213-
...item,
214-
title,
215-
...(groupId !== undefined ? { groupId } : null),
216-
...(color !== undefined ? { color } : null),
217-
};
218-
} else {
219-
return item;
220-
}
221-
});
222-
props.events.onChange(changeEvents);
223-
} else {
224-
const createInfo = {
225-
allDay: event.allDay,
226-
start: event.start,
227-
end: event.end,
228-
id: event.id,
229-
title,
230-
...(groupId !== undefined ? { groupId } : null),
231-
...(color !== undefined ? { color } : null),
232-
};
233-
props.events.onChange([...props.events.value, createInfo]);
234-
}
235-
props.onEvent("change");
236-
form.resetFields();
237-
editEvent.current = undefined;
237+
form.submit();
238+
return form.validateFields().then(() => {
239+
const { id, groupId, color, title = "" } = form.getFieldsValue();
240+
const idExist = props.events.value.findIndex((item: EventType) => item.id === id);
241+
if (idExist > -1 && id !== eventId) {
242+
form.setFields([{ name: "id", errors: [trans("calendar.eventIdExist")] }]);
243+
throw new Error();
244+
}
245+
if (ifEdit) {
246+
const changeEvents = props.events.value.map((item: EventType) => {
247+
if (item.id === eventId) {
248+
return {
249+
...item,
250+
title,
251+
id,
252+
...(groupId !== undefined ? { groupId } : null),
253+
...(color !== undefined ? { color } : null),
254+
};
255+
} else {
256+
return item;
257+
}
258+
});
259+
props.events.onChange(changeEvents);
260+
} else {
261+
const createInfo = {
262+
allDay: event.allDay,
263+
start: event.start,
264+
end: event.end,
265+
id,
266+
title,
267+
...(groupId !== undefined ? { groupId } : null),
268+
...(color !== undefined ? { color } : null),
269+
};
270+
props.events.onChange([...props.events.value, createInfo]);
271+
}
272+
props.onEvent("change");
273+
form.resetFields();
274+
});
238275
},
239276
onCancel: () => {
240277
form.resetFields();
241-
editEvent.current = undefined;
242278
},
243279
});
244280
};
@@ -250,6 +286,7 @@ let CalendarBasicComp = (function () {
250286
$style={style}
251287
theme={theme?.theme}
252288
onDoubleClick={handleDbClick}
289+
left={left}
253290
>
254291
<FullCalendar
255292
slotEventOverlap={false}
@@ -261,8 +298,28 @@ let CalendarBasicComp = (function () {
261298
firstDay={Number(firstDay)}
262299
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin, momentPlugin]}
263300
headerToolbar={headerToolbar}
301+
moreLinkClick={(info) => {
302+
let left = 0;
303+
const ele = info.jsEvent.target as HTMLElement;
304+
if (info.view.type === ViewType.DAY) {
305+
if (info.allDay) {
306+
left = ele.offsetParent?.parentElement?.offsetLeft || 0;
307+
} else {
308+
left = ele.parentElement?.offsetLeft || 0;
309+
}
310+
} else {
311+
if (info.allDay) {
312+
left = ele.offsetParent?.parentElement?.parentElement?.offsetLeft || 0;
313+
} else {
314+
left =
315+
ele.offsetParent?.parentElement?.parentElement?.parentElement?.offsetLeft || 0;
316+
}
317+
}
318+
setLeft(left);
319+
}}
264320
buttonText={buttonText}
265321
views={views}
322+
eventClassNames={() => (!showEventTime ? "no-time" : "")}
266323
slotLabelFormat={slotLabelFormat}
267324
viewClassNames={viewClassNames}
268325
moreLinkText={trans("calendar.more")}
@@ -281,6 +338,9 @@ let CalendarBasicComp = (function () {
281338
eventClick={(info) => {
282339
const event = events.find((item: EventType) => item.id === info.event.id);
283340
editEvent.current = event;
341+
setTimeout(() => {
342+
editEvent.current = undefined;
343+
}, 500);
284344
}}
285345
eventsSet={(info) => {
286346
let needChange = false;

0 commit comments

Comments
 (0)