diff --git a/packages/core/client/src/schema-component/antd/calendar/Calendar.tsx b/packages/core/client/src/schema-component/antd/calendar/Calendar.tsx index d83b32211..d40ced831 100644 --- a/packages/core/client/src/schema-component/antd/calendar/Calendar.tsx +++ b/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 && ( - - - - - + + + + + + + ) ); }; @@ -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); }} diff --git a/packages/core/client/src/schema-component/antd/calendar/DeleteEvent.tsx b/packages/core/client/src/schema-component/antd/calendar/DeleteEvent.tsx index 704de4023..00cc4703e 100644 --- a/packages/core/client/src/schema-component/antd/calendar/DeleteEvent.tsx +++ b/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(); diff --git a/packages/core/client/src/schema-component/antd/calendar/context.ts b/packages/core/client/src/schema-component/antd/calendar/context.ts index 31dc497ba..ed0fd6835 100644 --- a/packages/core/client/src/schema-component/antd/calendar/context.ts +++ b/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(null); export const CalendarContext = createContext(null); +export const DeleteEventContext = createContext(null); + +export const useDeleteEvent = () => { + return useContext(DeleteEventContext); +} diff --git a/packages/core/client/src/schema-component/antd/calendar/utils.ts b/packages/core/client/src/schema-component/antd/calendar/utils.ts index a25d2b055..5fd2ea9a0 100644 --- a/packages/core/client/src/schema-component/antd/calendar/utils.ts +++ b/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') +} diff --git a/packages/core/client/src/schema-initializer/SchemaInitializerProvider.tsx b/packages/core/client/src/schema-initializer/SchemaInitializerProvider.tsx index 9b90f2918..caec9ee78 100644 --- a/packages/core/client/src/schema-initializer/SchemaInitializerProvider.tsx +++ b/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; } -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 }), }; }; diff --git a/packages/core/client/src/schema-initializer/buttons/RecordBlockInitializers.tsx b/packages/core/client/src/schema-initializer/buttons/RecordBlockInitializers.tsx index a4fed82ad..2315cd5d7 100644 --- a/packages/core/client/src/schema-initializer/buttons/RecordBlockInitializers.tsx +++ b/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 ( { 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', diff --git a/packages/core/client/src/schema-initializer/utils.ts b/packages/core/client/src/schema-initializer/utils.ts index b0c079feb..abd849c42 100644 --- a/packages/core/client/src/schema-initializer/utils.ts +++ b/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: {}, },