fix: cannot delete event in calendar (#1277)

* fix: calendar cannot delete event

* feat: close detail after delete event

* fix: make sure the DeleteEvent button only appears in the calendar details

packages/core/client/src/schema-component/antd/calendar/Calendar.tsx

@@ -4,7 +4,7 @@ import { observer, RecursionField, Schema, useFieldSchema } from '@formily/react
 import { parseExpression } from 'cron-parser';
 import get from 'lodash/get';
 import moment from 'moment';
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Calendar as BigCalendar, momentLocalizer } from 'react-big-calendar';
 import * as dates from 'react-big-calendar/lib/utils/dates';
 import { useTranslation } from 'react-i18next';
@@ -16,10 +16,14 @@ import Header from './components/Header';
 import { CalendarToolbarContext } from './context';
 import './style.less';
 import type { ToolbarProps } from './types';
+import { formatDate } from './utils';
 
 const Weeks = ['month', 'week', 'day'] as const;
 
 const localizer = momentLocalizer(moment);
+export const DeleteEventContext = React.createContext({
+  close: () => {},
+});
 
 function Toolbar(props: ToolbarProps) {
   const fieldSchema = useFieldSchema();
@@ -168,13 +172,20 @@ const CalendarRecordViewer = (props) => {
       }, null),
     [],
   );
+
+  const close = useCallback(() => {
+    setVisible(false);
+  }, []);
+
   return (
     eventSchema && (
-      <ActionContext.Provider value={{ visible, setVisible }}>
-        <RecordProvider record={record}>
-          <RecursionField schema={eventSchema} name={eventSchema.name} />
-        </RecordProvider>
-      </ActionContext.Provider>
+      <DeleteEventContext.Provider value={{ close }}>
+        <ActionContext.Provider value={{ visible, setVisible }}>
+          <RecordProvider record={record}>
+            <RecursionField schema={eventSchema} name={eventSchema.name} />
+          </RecordProvider>
+        </ActionContext.Provider>
+      </DeleteEventContext.Provider>
     )
   );
 };
@@ -225,7 +236,8 @@ export const Calendar: any = observer((props: any) => {
           if (!record) {
             return;
           }
-          record.__event = event;
+          record.__event = { ...event, start: formatDate(moment(event.start)), end: formatDate(moment(event.end)) };
+
           setRecord(record);
           setVisible(true);
         }}

packages/core/client/src/schema-component/antd/calendar/DeleteEvent.tsx

@@ -1,18 +1,21 @@
 import { observer } from '@formily/react';
 import { Modal, Radio, Space, Typography } from 'antd';
 import moment from 'moment';
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { useBlockRequestContext, useFilterByTk } from '../../../block-provider';
 import { useRecord } from '../../../record-provider';
 import { useActionContext } from '../action';
+import { DeleteEventContext } from './Calendar';
+import { formatDate } from './utils';
 const { Text } = Typography;
 
 export const DeleteEvent = observer(() => {
   const { visible, setVisible } = useActionContext();
   const { exclude = [], cron, ...record } = useRecord();
-  const startDate = moment(record.__parent.__event.start).format();
+  const { close } = useContext(DeleteEventContext);
+  const startDate = formatDate(moment(record.__parent.__event.start));
   const filterByTk = useFilterByTk();
   const { resource, service, __parent } = useBlockRequestContext();
   const [value, onChange] = useState(startDate);
@@ -35,6 +38,7 @@ export const DeleteEvent = observer(() => {
     __parent?.service?.refresh?.();
     service?.refresh?.();
     setVisible?.(false, true);
+    close();
   };
 
   const { t } = useTranslation();

packages/core/client/src/schema-component/antd/calendar/context.ts

@@ -1,5 +1,10 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 import type { ToolbarProps } from './types';
 
 export const CalendarToolbarContext = createContext<ToolbarProps>(null);
 export const CalendarContext = createContext(null);
+export const DeleteEventContext = createContext(null);
+
+export const useDeleteEvent = () => {
+  return useContext(DeleteEventContext);
+}

packages/core/client/src/schema-component/antd/calendar/utils.ts

@@ -19,3 +19,7 @@ export const getLunarDay = (date: moment.MomentInput) => {
   const result = solarLunar.solar2lunar(md.year(), md.month() + 1, md.date());
   return typeof result !== 'number' ? result.lunarFestival || result.term || result.dayCn : result;
 };
+
+export const formatDate = (date: moment.Moment) => {
+  return date.format('YYYY-MM-DDTHH:mm:ss.SSSZ')
+}

packages/core/client/src/schema-initializer/SchemaInitializerProvider.tsx

@@ -1,3 +1,4 @@
+import { useFieldSchema } from '@formily/react';
 import { isPlainObj } from '@formily/shared';
 import React, { createContext, useContext } from 'react';
 import { SchemaComponentOptions } from '../schema-component';
@@ -13,7 +14,8 @@ export interface SchemaInitializerProviderProps {
   initializers?: Record<string, any>;
 }
 
-export const useSchemaInitializer = (name: string) => {
+export const useSchemaInitializer = (name: string, props = {}) => {
+  const fieldSchema = useFieldSchema();
   const initializers = useContext(SchemaInitializerContext);
   const render = (component?: any, props?: any) => {
     return component && React.createElement(component, props);
@@ -23,7 +25,8 @@ export const useSchemaInitializer = (name: string) => {
     return { exists: false, render: (props?: any) => render(null) };
   }
 
-  const initializer = initializers?.[name];
+  const initializer = initializers?.[name || fieldSchema?.['x-initializer']];
+  const initializerProps = { ...props, ...fieldSchema?.['x-initializer-props'] };
 
   if (!initializer) {
     return { exists: false, render: (props?: any) => render(null) };
@@ -34,14 +37,14 @@ export const useSchemaInitializer = (name: string) => {
       exists: true,
       render: (props?: any) => {
         const component = (initializer as any).component || SchemaInitializer.Button;
-        return render(component, { ...initializer, ...props });
+        return render(component, { ...initializer, ...initializerProps, ...props });
       },
     };
   }
 
   return {
     exists: true,
-    render: (props?: any) => render(initializer, props),
+    render: (props?: any) => render(initializer, { ...initializerProps, ...props }),
   };
 };
 

packages/core/client/src/schema-initializer/buttons/RecordBlockInitializers.tsx

@@ -104,7 +104,8 @@ const useRelationFields = () => {
   return relationFields;
 };
 
-const useInheritFields = () => {
+const useInheritFields = (props) => {
+  const { actionInitializers } = props;
   const collection = useCollection();
   const { getChildrenCollections } = useCollectionManager();
   const childrenCollections = getChildrenCollections(collection.name);
@@ -116,14 +117,14 @@ const useInheritFields = () => {
       component: 'RecordReadPrettyFormBlockInitializer',
       icon: false,
       targetCollection: c,
-      actionInitializers: 'CalendarFormActionInitializers',
+      actionInitializers,
     };
   });
 };
 
 export const RecordBlockInitializers = (props: any) => {
   const { t } = useTranslation();
-  const { insertPosition, component } = props;
+  const { insertPosition, component, actionInitializers } = props;
   return (
     <SchemaInitializer.Button
       wrap={gridRowColWrap}
@@ -141,7 +142,7 @@ export const RecordBlockInitializers = (props: any) => {
               type: 'item',
               title: '{{t("Details")}}',
               component: 'RecordReadPrettyFormBlockInitializer',
-              actionInitializers: 'CalendarFormActionInitializers',
+              actionInitializers,
             },
             {
               key: 'form',
@@ -154,7 +155,7 @@ export const RecordBlockInitializers = (props: any) => {
         {
           type: 'itemGroup',
           title: '{{t("Children collection blocks")}}',
-          children: useInheritFields(),
+          children: useInheritFields(props),
         },
         {
           type: 'itemGroup',

packages/core/client/src/schema-initializer/utils.ts

@@ -986,6 +986,9 @@ export const createCalendarBlockSchema = (options) => {
                           grid: {
                             type: 'void',
                             'x-component': 'Grid',
+                            'x-initializer-props': {
+                              actionInitializers: 'CalendarFormActionInitializers'
+                            },
                             'x-initializer': 'RecordBlockInitializers',
                             properties: {},
                           },