@voplus/morpho-workspace 4.0.0 → 4.0.1

package/es/modules/calendar/pages/CalendarMonth/index.js

@@ -1,141 +1,141 @@
-import { AsideContent, observe, useRenderOnChange } from "@voplus/morpho-ui";
-import { Button, DatePicker, Select } from "antd";
-import { FilterOptionsContext, FilterOptionsContextState } from "@voplus/morpho-ui/es/data";
-import { useCalendarListEffect, useCalendarStore } from "../../../../data/calendar";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { faAngleLeft, faAngleRight } from "@fortawesome/pro-light-svg-icons";
-import { useDeepMemo, useTabItem } from "@voplus/morpho-data";
-import CalendarEventContent from "../../components/CalendarEventContent";
-import EventsFilter from "../../../../controls/filters/EventsFilter";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import FilterView from "@voplus/morpho-ui/es/controls/FilterView";
-import FullCalendar from "@fullcalendar/react";
-import { Scrollbars } from "react-custom-scrollbars";
-import { State } from "./state";
-import dayGridPlugin from "@fullcalendar/daygrid";
-import dayjs from "dayjs";
-import { faCalendar } from "@fortawesome/free-solid-svg-icons";
-import interactionPlugin from "@fullcalendar/interaction";
-import { runInAction } from "mobx";
-import styles from "./index.less";
-import timeGridPlugin from "@fullcalendar/timegrid";
-import { useMetaStore } from "@voplus/morpho-document-core";
-const CalendarMonth = () => {
-    const tab = useTabItem();
-    const meta = useMetaStore();
-    const filterState = useDeepMemo(() => new FilterOptionsContextState({
-        defaults: {
-            filters: [
-                { c: "OwnerType", o: "contains", v1: JSON.stringify(["My", "Role"]), l: "And" },
-            ],
-            page: { Page: 1, PageSize: 200 },
-        },
-    }), []);
-    const [asideContext] = useState(AsideContent.createContext());
-    const calendar = useCalendarStore();
-    const Option = Select.Option;
-    const [state] = useState(new State());
-    const calendarRef = useRef(null);
-    const [currentTime, setCurrentTime] = useState();
-    const [calendarApi, setCalendarApi] = useState();
-    /** 设置 日历 高度 */
-    const boxRef = useCallback((node) => {
-        if (node !== null) {
-            state.height = node.clientHeight - 60;
-            // calendarRef.current.calendar.setOption("height", state.height);
-        }
-    }, []);
-    useEffect(() => {
-        runInAction(() => (tab.title = "Calendar"));
-    }, []);
-    useEffect(() => {
-        var _a;
-        setCalendarApi((_a = calendarRef === null || calendarRef === void 0 ? void 0 : calendarRef.current) === null || _a === void 0 ? void 0 : _a.getApi());
-    }, [calendarRef]);
-    useRenderOnChange(() => filterState.options);
-    useCalendarListEffect(null, (list) => {
-        runInAction(() => {
-            const colorList = ["#d3adf7", "#ffbb96", "#adc6ff", "#ffd591", "#b7eb8f", "#87e8de"];
-            list.map((item, index) => {
-                item.backgroundColor = colorList[(index || 0) % 6];
-                item.borderColor = colorList[(index || 0) % 6];
-            });
-            state.listOptions = list;
-        });
-    }, filterState.options);
-    /** 在呈现事件时触发。用于修改其DOM的钩子。 */
-    const eventContent = (info) => {
-        const type = info.event.extendedProps.source.type;
-        const id = info.event.extendedProps.source.id;
-        return (React.createElement(CalendarEventContent, { id: id, type: type, onClick: () => {
-                asideContext.openAside(meta.getPropertiesView({
-                    id: id,
-                    type: type,
-                }), { span: 10 });
-            } }));
-    };
-    return observe(() => (React.createElement(AsideContent, { context: asideContext },
-        React.createElement(Scrollbars, { autoHide: true, className: styles["calendar-view"] },
-            React.createElement("div", { className: "calendar-content", ref: boxRef },
-                React.createElement("div", { className: "calendar-header" },
-                    React.createElement("div", { className: "calendar-left" },
-                        React.createElement("span", { className: "calendar-fa-icon" },
-                            React.createElement(FAIcon, { icon: faCalendar })),
-                        React.createElement(Select, { defaultValue: "month", style: { width: 105 }, onChange: handleChange },
-                            React.createElement(Option, { value: "month" }, "Month"),
-                            React.createElement(Option, { value: "week" }, "Week"),
-                            React.createElement(Option, { value: "day" }, "Day"))),
-                    React.createElement("div", { className: "calendar-center" },
-                        React.createElement(Button, { className: "calendar-today", onClick: () => calendarApi.today() }, "Today"),
-                        React.createElement(Button, { className: "calendar-prev", onClick: () => calendarApi.prev() },
-                            React.createElement(FAIcon, { icon: faAngleLeft })),
-                        React.createElement("div", { className: "calendar-title" },
-                            React.createElement(DatePicker, { picker: state.type === "month" ? "month" : state.type === "week" ? "week" : "date", className: "calendar-ant-picker", defaultValue: currentTime, popupClassName: styles["calendar-dropdown"], placeholder: `Select ${state.type === "month" ? "Month" : state.type === "week" ? "Week" : "Date"}`, onChange: onChange }),
-                            state.title),
-                        React.createElement(Button, { className: "calendar-next", onClick: () => calendarApi.next() },
-                            React.createElement(FAIcon, { icon: faAngleRight }))),
-                    React.createElement("div", { className: "calendar-right" },
-                        React.createElement(FilterOptionsContext.Provider, { value: filterState },
-                            React.createElement(FilterView, { columns: [React.createElement(EventsFilter, { key: "EventsFilter", defaultValue: ["My", "Role"] })] })))),
-                React.createElement("div", { className: "calendar-scrollbar" },
-                    React.createElement(FullCalendar, { ref: calendarRef, plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin], editable: true, 
-                        /** 限制一天中显示的事件数。其余的将显示在弹出窗口中。*/
-                        dayMaxEventRows: 3, headerToolbar: false, 
-                        // height={650}
-                        height: "100%", 
-                        //events={(dataInfo)=>getDate(dataInfo)}//这个要放在eventSources前，不然eventSources数据会被覆盖
-                        eventSources: [state.listOptions], eventDrop: eventDrop, eventContent: eventContent, datesSet: (info) => state.datesRender(info) })))))));
-    /** 切换month，week，day视图 */
-    function handleChange(value) {
-        runInAction(() => (state.type = value));
-        if (value === "month")
-            calendarApi.changeView("dayGridMonth");
-        if (value === "week")
-            calendarApi.changeView("timeGridWeek");
-        if (value === "day")
-            calendarApi.changeView("timeGridDay");
-    }
-    /** 时间发生变化的回调 */
-    function onChange(date, dateString) {
-        setCurrentTime(date);
-        if (state.type === "week") {
-            calendarApi.gotoDate(`${dayjs(date).format("YYYY-MM-DD")}`);
-        }
-        else {
-            calendarApi.gotoDate(dateString);
-        }
-    }
-    /** 当拖动停止并且事件已移至其他日期/时间时触发。 */
-    function eventDrop(info) {
-        const id = info.event.id;
-        const start = info.event.start.toISOString();
-        if (info.event.extendedProps.allowChangeStart) {
-            calendar.edit(id, { data: { Start: start }, error: "message" });
-        }
-        else {
-            info.revert();
-        }
-    }
-};
-export default CalendarMonth;
+import { AsideContent, observe, useRenderOnChange } from "@voplus/morpho-ui";
+import { Button, DatePicker, Select } from "antd";
+import { FilterOptionsContext, FilterOptionsContextState } from "@voplus/morpho-ui/es/data";
+import { useCalendarListEffect, useCalendarStore } from "../../../../data/calendar";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { faAngleLeft, faAngleRight } from "@fortawesome/pro-light-svg-icons";
+import { useDeepMemo, useTabItem } from "@voplus/morpho-data";
+import CalendarEventContent from "../../components/CalendarEventContent";
+import EventsFilter from "../../../../controls/filters/EventsFilter";
+import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
+import FilterView from "@voplus/morpho-ui/es/controls/FilterView";
+import FullCalendar from "@fullcalendar/react";
+import { Scrollbars } from "react-custom-scrollbars";
+import { State } from "./state";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import dayjs from "dayjs";
+import { faCalendar } from "@fortawesome/free-solid-svg-icons";
+import interactionPlugin from "@fullcalendar/interaction";
+import { runInAction } from "mobx";
+import styles from "./index.less";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import { useMetaStore } from "@voplus/morpho-document-core";
+const CalendarMonth = () => {
+    const tab = useTabItem();
+    const meta = useMetaStore();
+    const filterState = useDeepMemo(() => new FilterOptionsContextState({
+        defaults: {
+            filters: [
+                { c: "OwnerType", o: "contains", v1: JSON.stringify(["My", "Role"]), l: "And" },
+            ],
+            page: { Page: 1, PageSize: 200 },
+        },
+    }), []);
+    const [asideContext] = useState(AsideContent.createContext());
+    const calendar = useCalendarStore();
+    const Option = Select.Option;
+    const [state] = useState(new State());
+    const calendarRef = useRef(null);
+    const [currentTime, setCurrentTime] = useState();
+    const [calendarApi, setCalendarApi] = useState();
+    /** 设置 日历 高度 */
+    const boxRef = useCallback((node) => {
+        if (node !== null) {
+            state.height = node.clientHeight - 60;
+            // calendarRef.current.calendar.setOption("height", state.height);
+        }
+    }, []);
+    useEffect(() => {
+        runInAction(() => (tab.title = "Calendar"));
+    }, []);
+    useEffect(() => {
+        var _a;
+        setCalendarApi((_a = calendarRef === null || calendarRef === void 0 ? void 0 : calendarRef.current) === null || _a === void 0 ? void 0 : _a.getApi());
+    }, [calendarRef]);
+    useRenderOnChange(() => filterState.options);
+    useCalendarListEffect(null, (list) => {
+        runInAction(() => {
+            const colorList = ["#d3adf7", "#ffbb96", "#adc6ff", "#ffd591", "#b7eb8f", "#87e8de"];
+            list.map((item, index) => {
+                item.backgroundColor = colorList[(index || 0) % 6];
+                item.borderColor = colorList[(index || 0) % 6];
+            });
+            state.listOptions = list;
+        });
+    }, filterState.options);
+    /** 在呈现事件时触发。用于修改其DOM的钩子。 */
+    const eventContent = (info) => {
+        const type = info.event.extendedProps.source.type;
+        const id = info.event.extendedProps.source.id;
+        return (React.createElement(CalendarEventContent, { id: id, type: type, onClick: () => {
+                asideContext.openAside(meta.getPropertiesView({
+                    id: id,
+                    type: type,
+                }), { span: 10 });
+            } }));
+    };
+    return observe(() => (React.createElement(AsideContent, { context: asideContext },
+        React.createElement(Scrollbars, { autoHide: true, className: styles["calendar-view"] },
+            React.createElement("div", { className: "calendar-content", ref: boxRef },
+                React.createElement("div", { className: "calendar-header" },
+                    React.createElement("div", { className: "calendar-left" },
+                        React.createElement("span", { className: "calendar-fa-icon" },
+                            React.createElement(FAIcon, { icon: faCalendar })),
+                        React.createElement(Select, { defaultValue: "month", style: { width: 105 }, onChange: handleChange },
+                            React.createElement(Option, { value: "month" }, "Month"),
+                            React.createElement(Option, { value: "week" }, "Week"),
+                            React.createElement(Option, { value: "day" }, "Day"))),
+                    React.createElement("div", { className: "calendar-center" },
+                        React.createElement(Button, { className: "calendar-today", onClick: () => calendarApi.today() }, "Today"),
+                        React.createElement(Button, { className: "calendar-prev", onClick: () => calendarApi.prev() },
+                            React.createElement(FAIcon, { icon: faAngleLeft })),
+                        React.createElement("div", { className: "calendar-title" },
+                            React.createElement(DatePicker, { picker: state.type === "month" ? "month" : state.type === "week" ? "week" : "date", className: "calendar-ant-picker", defaultValue: currentTime, popupClassName: styles["calendar-dropdown"], placeholder: `Select ${state.type === "month" ? "Month" : state.type === "week" ? "Week" : "Date"}`, onChange: onChange }),
+                            state.title),
+                        React.createElement(Button, { className: "calendar-next", onClick: () => calendarApi.next() },
+                            React.createElement(FAIcon, { icon: faAngleRight }))),
+                    React.createElement("div", { className: "calendar-right" },
+                        React.createElement(FilterOptionsContext.Provider, { value: filterState },
+                            React.createElement(FilterView, { columns: [React.createElement(EventsFilter, { key: "EventsFilter", defaultValue: ["My", "Role"] })] })))),
+                React.createElement("div", { className: "calendar-scrollbar" },
+                    React.createElement(FullCalendar, { ref: calendarRef, plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin], editable: true, 
+                        /** 限制一天中显示的事件数。其余的将显示在弹出窗口中。*/
+                        dayMaxEventRows: 3, headerToolbar: false, 
+                        // height={650}
+                        height: "100%", 
+                        //events={(dataInfo)=>getDate(dataInfo)}//这个要放在eventSources前，不然eventSources数据会被覆盖
+                        eventSources: [state.listOptions], eventDrop: eventDrop, eventContent: eventContent, datesSet: (info) => state.datesRender(info) })))))));
+    /** 切换month，week，day视图 */
+    function handleChange(value) {
+        runInAction(() => (state.type = value));
+        if (value === "month")
+            calendarApi.changeView("dayGridMonth");
+        if (value === "week")
+            calendarApi.changeView("timeGridWeek");
+        if (value === "day")
+            calendarApi.changeView("timeGridDay");
+    }
+    /** 时间发生变化的回调 */
+    function onChange(date, dateString) {
+        setCurrentTime(date);
+        if (state.type === "week") {
+            calendarApi.gotoDate(`${dayjs(date).format("YYYY-MM-DD")}`);
+        }
+        else {
+            calendarApi.gotoDate(dateString);
+        }
+    }
+    /** 当拖动停止并且事件已移至其他日期/时间时触发。 */
+    function eventDrop(info) {
+        const id = info.event.id;
+        const start = info.event.start.toISOString();
+        if (info.event.extendedProps.allowChangeStart) {
+            calendar.edit(id, { data: { Start: start }, error: "message" });
+        }
+        else {
+            info.revert();
+        }
+    }
+};
+export default CalendarMonth;
 //# sourceMappingURL=index.js.map