diff --git a/packages/client/src/schema-component/antd/calendar/Calendar.tsx b/packages/client/src/schema-component/antd/calendar/Calendar.tsx index 48a83344b..fa3977f9e 100644 --- a/packages/client/src/schema-component/antd/calendar/Calendar.tsx +++ b/packages/client/src/schema-component/antd/calendar/Calendar.tsx @@ -9,11 +9,9 @@ import { SchemaComponent } from '../..'; import { AsyncDataProvider, RecordProvider, useRequest } from '../../../'; import { i18n } from '../../../i18n'; import { ActionBar, ActionContext } from '../action'; -import { ActionInitializer } from './ActionInitializer'; import { CalendarContext, ToolbarContext } from './context'; import { Event } from './Event'; import { Filter } from './Filter'; -import { FooterActionInitializer } from './FooterActionInitializer'; import { Nav } from './Nav'; import './style.less'; import { Title } from './Title'; @@ -120,11 +118,13 @@ export const Calendar: any = observer((props: any) => {
- - - - - + {eventSchema && ( + + + + + + )} { ); }); -Calendar.ActionInitializer = ActionInitializer; - -Calendar.FooterActionInitializer = FooterActionInitializer; - Calendar.ActionBar = ActionBar; Calendar.Event = Event; diff --git a/packages/client/src/schema-component/antd/calendar/ActionInitializer.tsx b/packages/client/src/schema-component/antd/calendar/demos/ActionInitializer.tsx similarity index 96% rename from packages/client/src/schema-component/antd/calendar/ActionInitializer.tsx rename to packages/client/src/schema-component/antd/calendar/demos/ActionInitializer.tsx index c788bed3b..b40467b91 100644 --- a/packages/client/src/schema-component/antd/calendar/ActionInitializer.tsx +++ b/packages/client/src/schema-component/antd/calendar/demos/ActionInitializer.tsx @@ -2,9 +2,9 @@ import { observer, useFieldSchema } from '@formily/react'; import { Switch } from 'antd'; import React from 'react'; import { useTranslation } from 'react-i18next'; -import { useCollection } from '../../../collection-manager'; -import { SchemaInitializer } from '../../../schema-initializer'; -import { useDesignable } from '../../hooks'; +import { useCollection } from '../../../../collection-manager'; +import { SchemaInitializer } from '../../../../schema-initializer'; +import { useDesignable } from '../../../hooks'; export const ActionInitializer = observer((props: any) => { const { name: collectName } = useCollection(); diff --git a/packages/client/src/schema-component/antd/calendar/FooterActionInitializer.tsx b/packages/client/src/schema-component/antd/calendar/demos/FooterActionInitializer.tsx similarity index 95% rename from packages/client/src/schema-component/antd/calendar/FooterActionInitializer.tsx rename to packages/client/src/schema-component/antd/calendar/demos/FooterActionInitializer.tsx index 5696763c2..1c63b8b5e 100644 --- a/packages/client/src/schema-component/antd/calendar/FooterActionInitializer.tsx +++ b/packages/client/src/schema-component/antd/calendar/demos/FooterActionInitializer.tsx @@ -2,9 +2,9 @@ import { observer, useFieldSchema } from '@formily/react'; import { Switch } from 'antd'; import React from 'react'; import { useTranslation } from 'react-i18next'; -import { useCollection } from '../../../collection-manager'; -import { SchemaInitializer } from '../../../schema-initializer'; -import { useDesignable } from '../../hooks'; +import { useCollection } from '../../../../collection-manager'; +import { SchemaInitializer } from '../../../../schema-initializer'; +import { useDesignable } from '../../../hooks'; export const FooterActionInitializer = observer((props: any) => { const { name: collectName } = useCollection(); diff --git a/packages/client/src/schema-component/antd/calendar/demos/demo1.tsx b/packages/client/src/schema-component/antd/calendar/demos/demo1.tsx index bbec2e4ca..829c62605 100644 --- a/packages/client/src/schema-component/antd/calendar/demos/demo1.tsx +++ b/packages/client/src/schema-component/antd/calendar/demos/demo1.tsx @@ -2,21 +2,14 @@ * title: Calendar */ -import { useField, useFieldSchema, useForm } from '@formily/react'; import { observable } from '@formily/reactive'; -import { uid } from '@formily/shared'; import { AntdSchemaComponentProvider, - CalendarContext, - CollectionProvider, SchemaComponent, SchemaComponentProvider, SchemaInitializerProvider, - useActionContext, - useAsyncData, - useRequest, } from '@nocobase/client'; -import React, { useContext, useEffect } from 'react'; +import React from 'react'; import defaultValues from './defaultValues'; const dataSource = observable(defaultValues); @@ -31,7 +24,6 @@ const schema = { toolBar: { type: 'void', 'x-component': 'Calendar.ActionBar', - 'x-action-initializer': 'Calendar.ActionInitializer', properties: { today: { type: 'void', @@ -61,222 +53,19 @@ const schema = { 'x-action': 'calendar:viewSelect', 'x-align': 'right', }, - // filter: { - // type: 'void', - // title: '过滤', - // 'x-align': 'right', - // 'x-component': 'Calendar.Filter', - // 'x-action': 'calendar:filter', - // }, - }, - }, - event: { - type: 'void', - name: 'event', - 'x-component': 'Calendar.Event', - properties: { - modal: { - 'x-component': 'Action.Drawer', - 'x-decorator': 'Form', - 'x-decorator-props': { - useValues: '{{ useValues }}', - }, - type: 'void', - title: 'Drawer Title', - properties: { - grid: { - type: 'void', - 'x-component': 'Grid', - 'x-item-initializer': 'FormItemInitializer', - 'x-item-initializer-props': { - readPretty: true, - }, - }, - footer: { - 'x-component': 'Action.Drawer.Footer', - type: 'void', - properties: { - [uid()]: { - title: 'submit', - 'x-component': 'ActionBar', - 'x-action-initializer': 'Calendar.FooterActionInitializer', - }, - }, - }, - }, - }, }, }, }, }; -const useSaveAction = () => { - const { setVisible } = useActionContext(); - const { refresh: dataRefresh, data } = useAsyncData(); - const form = useForm(); - const fieldSchema = useFieldSchema(); - const field = useField(); - return { - async run() { - setVisible(false); - console.log(form.values, fieldSchema, field, data); - dataSource.push({ ...form.values, start: new Date(form.values.start), end: new Date(form.values.end) }); - schema['x-component-props']['dataSource'] = dataSource; - dataRefresh(); - form.reset(); - }, - }; -}; - -const useCloseAction = () => { - const { setVisible } = useActionContext(); - return { - async run() { - setVisible(false); - }, - }; -}; - -const useRemoveAction = () => { - const { refresh: dataRefresh, data } = useAsyncData(); - const { record } = useContext(CalendarContext); - const { setVisible } = useActionContext(); - - return { - async run() { - setVisible(false); - for (let i = 0, iLen = dataSource.length; i < iLen; i++) { - const element = dataSource[i]; - if (element.id === record.id) { - dataSource.splice(i, 1); - break; - } - } - schema['x-component-props']['dataSource'] = dataSource; - dataRefresh(); - }, - }; -}; - -const useEditAction = () => { - const { refresh: dataRefresh, data } = useAsyncData(); - const { record } = useContext(CalendarContext); - const { setVisible } = useActionContext(); - return { - async run() { - console.log(record); - }, - }; -}; - -const useUpdateAction = () => { - const form = useForm(); - const { setVisible } = useActionContext(); - const { refresh: dataRefresh, data } = useAsyncData(); - return { - async run() { - setVisible(false); - console.log(form.values); - const record = form.values; - for (let i = 0, iLen = dataSource.length; i < iLen; i++) { - const element = dataSource[i]; - if (element.id === record.id) { - dataSource[i] = { ...record }; - break; - } - } - schema['x-component-props']['dataSource'] = dataSource; - form.reset(); - }, - }; -}; - -const useValues = (options) => { - const { visible } = useActionContext(); - const { record } = useContext(CalendarContext); - const result = useRequest( - () => - Promise.resolve({ - data: { - ...record, - }, - }), - { ...options, manual: true }, - ); - useEffect(() => { - if (visible) { - result.run(); - } - }, [visible]); - return result; -}; - -const collection = { - name: 'tests', - fields: [ - { - type: 'string', - name: 'id', - interface: 'input', - uiSchema: { - type: 'string', - 'x-component': 'Input', - }, - }, - { - type: 'string', - name: 'title', - interface: 'input', - uiSchema: { - type: 'string', - 'x-component': 'Input', - }, - }, - { - type: 'string', - name: 'start', - interface: 'datetime', - uiSchema: { - type: 'string', - 'x-component': 'DatePicker', - 'x-component-props': { - dateFormat: 'YYYY-MM-DD', - }, - }, - }, - { - type: 'string', - name: 'end', - interface: 'datetime', - uiSchema: { - type: 'string', - 'x-component': 'DatePicker', - 'x-component-props': { - dateFormat: 'YYYY-MM-DD', - }, - }, - }, - ], -}; export default () => { return ( - - - - - - - - - + + + + + + + ); }; diff --git a/packages/client/src/schema-component/antd/calendar/demos/demo2.tsx b/packages/client/src/schema-component/antd/calendar/demos/demo2.tsx new file mode 100644 index 000000000..0ef5b6d75 --- /dev/null +++ b/packages/client/src/schema-component/antd/calendar/demos/demo2.tsx @@ -0,0 +1,139 @@ +/** + * title: Calendar + */ + +import { observer, RecursionField } from '@formily/react'; +import { observable } from '@formily/reactive'; +import { uid } from '@formily/shared'; +import { AntdSchemaComponentProvider, SchemaComponent, SchemaComponentProvider, useRecord } from '@nocobase/client'; +import React from 'react'; +import defaultValues from './defaultValues'; + +const dataSource = observable(defaultValues); + +const DetailCalendar = observer((props) => { + const record = useRecord(); + debugger; + const detailSchema = { + type: 'void', + properties: { + id: { + type: 'string', + title: 'ID', + 'x-component': 'Input', + 'x-decorator': 'FormItem', + 'x-read-pretty': true, + default: record.id, + }, + title: { + type: 'string', + title: '标题', + 'x-component': 'Input', + 'x-decorator': 'FormItem', + 'x-read-pretty': true, + default: record.title, + }, + start: { + type: 'string', + title: '开始时间', + 'x-component': 'DatePicker', + 'x-decorator': 'FormItem', + 'x-read-pretty': true, + default: record.start, + }, + end: { + type: 'string', + title: '结束时间', + 'x-component': 'DatePicker', + 'x-decorator': 'FormItem', + 'x-read-pretty': true, + default: record.end, + }, + }, + }; + + return ; +}); +const schema = { + type: 'void', + name: 'calendar1', + 'x-component': 'Calendar', + 'x-component-props': { + dataSource: dataSource, + }, + properties: { + toolBar: { + type: 'void', + 'x-component': 'Calendar.ActionBar', + properties: { + today: { + type: 'void', + title: '今天', + 'x-component': 'Calendar.Today', + 'x-action': 'calendar:today', + 'x-align': 'left', + }, + nav: { + type: 'void', + title: '翻页', + 'x-component': 'Calendar.Nav', + 'x-action': 'calendar:nav', + 'x-align': 'left', + }, + title: { + type: 'void', + title: '标题', + 'x-component': 'Calendar.Title', + 'x-action': 'calendar:title', + 'x-align': 'left', + }, + viewSelect: { + type: 'void', + title: '视图切换', + 'x-component': 'Calendar.ViewSelect', + 'x-action': 'calendar:viewSelect', + 'x-align': 'right', + }, + }, + }, + event: { + type: 'void', + name: 'event', + 'x-component': 'Calendar.Event', + properties: { + modal: { + 'x-component': 'Action.Drawer', + 'x-decorator': 'Form', + type: 'void', + title: 'Calendar Detail', + properties: { + grid: { + type: 'void', + 'x-component': 'DetailCalendar', + }, + footer: { + 'x-component': 'Action.Drawer.Footer', + type: 'void', + properties: { + [uid()]: { + title: 'submit', + 'x-component': 'ActionBar', + }, + }, + }, + }, + }, + }, + }, + }, +}; + +export default () => { + return ( + + + + + + ); +}; diff --git a/packages/client/src/schema-component/antd/calendar/demos/demo3.tsx b/packages/client/src/schema-component/antd/calendar/demos/demo3.tsx new file mode 100644 index 000000000..22389a530 --- /dev/null +++ b/packages/client/src/schema-component/antd/calendar/demos/demo3.tsx @@ -0,0 +1,157 @@ +/** + * title: Calendar + */ + +import { observable } from '@formily/reactive'; +import { uid } from '@formily/shared'; +import { + AntdSchemaComponentProvider, + CollectionField, + CollectionProvider, + SchemaComponent, + SchemaComponentProvider, + SchemaInitializerProvider, +} from '@nocobase/client'; +import React from 'react'; +import defaultValues from './defaultValues'; + +const dataSource = observable(defaultValues); +const schema = { + type: 'void', + name: 'calendar1', + 'x-component': 'Calendar', + 'x-component-props': { + dataSource: dataSource, + }, + properties: { + toolBar: { + type: 'void', + 'x-component': 'Calendar.ActionBar', + properties: { + today: { + type: 'void', + title: '今天', + 'x-component': 'Calendar.Today', + 'x-action': 'calendar:today', + 'x-align': 'left', + }, + nav: { + type: 'void', + title: '翻页', + 'x-component': 'Calendar.Nav', + 'x-action': 'calendar:nav', + 'x-align': 'left', + }, + title: { + type: 'void', + title: '标题', + 'x-component': 'Calendar.Title', + 'x-action': 'calendar:title', + 'x-align': 'left', + }, + viewSelect: { + type: 'void', + title: '视图切换', + 'x-component': 'Calendar.ViewSelect', + 'x-action': 'calendar:viewSelect', + 'x-align': 'right', + }, + }, + }, + event: { + type: 'void', + name: 'event', + 'x-component': 'Calendar.Event', + properties: { + modal: { + 'x-component': 'Action.Drawer', + 'x-decorator': 'Form', + type: 'void', + title: 'Drawer Title', + properties: { + grid: { + type: 'void', + 'x-component': 'Grid', + 'x-initializer': 'GridFormItemInitializers', + }, + footer: { + 'x-component': 'Action.Drawer.Footer', + type: 'void', + properties: { + [uid()]: { + title: 'submit', + 'x-component': 'ActionBar', + }, + }, + }, + }, + }, + }, + }, + }, +}; + +const collection = { + name: 'tests', + fields: [ + { + type: 'string', + name: 'id', + interface: 'input', + uiSchema: { + type: 'string', + title: 'id', + 'x-component': 'Input', + }, + }, + { + type: 'string', + name: 'title', + interface: 'input', + uiSchema: { + type: 'string', + title: '标题', + 'x-component': 'Input', + }, + }, + { + type: 'string', + name: 'start', + interface: 'datetime', + uiSchema: { + type: 'string', + title: '开始时间', + 'x-component': 'DatePicker', + 'x-component-props': { + dateFormat: 'YYYY-MM-DD', + }, + }, + }, + { + type: 'string', + name: 'end', + interface: 'datetime', + uiSchema: { + type: 'string', + title: '结束时间', + 'x-component': 'DatePicker', + 'x-component-props': { + dateFormat: 'YYYY-MM-DD', + }, + }, + }, + ], +}; +export default () => { + return ( + + + + + + + + + + ); +}; diff --git a/packages/client/src/schema-component/antd/calendar/demos/demo4.tsx b/packages/client/src/schema-component/antd/calendar/demos/demo4.tsx new file mode 100644 index 000000000..a2d899539 --- /dev/null +++ b/packages/client/src/schema-component/antd/calendar/demos/demo4.tsx @@ -0,0 +1,276 @@ +/** + * title: Calendar + */ + +import { useField, useFieldSchema, useForm } from '@formily/react'; +import { observable } from '@formily/reactive'; +import { uid } from '@formily/shared'; +import { + AntdSchemaComponentProvider, + CalendarContext, + CollectionProvider, + SchemaComponent, + SchemaComponentProvider, + SchemaInitializerProvider, + useActionContext, + useAsyncData, + useRequest, +} from '@nocobase/client'; +import React, { useContext, useEffect } from 'react'; +import defaultValues from './defaultValues'; + +const dataSource = observable(defaultValues); +const schema = { + type: 'void', + name: 'calendar1', + 'x-component': 'Calendar', + 'x-component-props': { + dataSource: dataSource, + }, + properties: { + toolBar: { + type: 'void', + 'x-component': 'Calendar.ActionBar', + properties: { + today: { + type: 'void', + title: '今天', + 'x-component': 'Calendar.Today', + 'x-action': 'calendar:today', + 'x-align': 'left', + }, + nav: { + type: 'void', + title: '翻页', + 'x-component': 'Calendar.Nav', + 'x-action': 'calendar:nav', + 'x-align': 'left', + }, + title: { + type: 'void', + title: '标题', + 'x-component': 'Calendar.Title', + 'x-action': 'calendar:title', + 'x-align': 'left', + }, + viewSelect: { + type: 'void', + title: '视图切换', + 'x-component': 'Calendar.ViewSelect', + 'x-action': 'calendar:viewSelect', + 'x-align': 'right', + }, + // filter: { + // type: 'void', + // title: '过滤', + // 'x-align': 'right', + // 'x-component': 'Calendar.Filter', + // 'x-action': 'calendar:filter', + // }, + }, + }, + event: { + type: 'void', + name: 'event', + 'x-component': 'Calendar.Event', + properties: { + modal: { + 'x-component': 'Action.Drawer', + 'x-decorator': 'Form', + 'x-decorator-props': { + useValues: '{{ useValues }}', + }, + type: 'void', + title: 'Drawer Title', + properties: { + grid: { + type: 'void', + 'x-component': 'Grid', + }, + footer: { + 'x-component': 'Action.Drawer.Footer', + type: 'void', + properties: { + [uid()]: { + title: 'submit', + 'x-component': 'ActionBar', + }, + }, + }, + }, + }, + }, + }, + }, +}; + +const useSaveAction = () => { + const { setVisible } = useActionContext(); + const { refresh: dataRefresh, data } = useAsyncData(); + const form = useForm(); + const fieldSchema = useFieldSchema(); + const field = useField(); + return { + async run() { + setVisible(false); + console.log(form.values, fieldSchema, field, data); + dataSource.push({ ...form.values, start: new Date(form.values.start), end: new Date(form.values.end) }); + schema['x-component-props']['dataSource'] = dataSource; + dataRefresh(); + form.reset(); + }, + }; +}; + +const useCloseAction = () => { + const { setVisible } = useActionContext(); + return { + async run() { + setVisible(false); + }, + }; +}; + +const useRemoveAction = () => { + const { refresh: dataRefresh, data } = useAsyncData(); + const { record } = useContext(CalendarContext); + const { setVisible } = useActionContext(); + + return { + async run() { + setVisible(false); + for (let i = 0, iLen = dataSource.length; i < iLen; i++) { + const element = dataSource[i]; + if (element.id === record.id) { + dataSource.splice(i, 1); + break; + } + } + schema['x-component-props']['dataSource'] = dataSource; + dataRefresh(); + }, + }; +}; + +const useEditAction = () => { + const { refresh: dataRefresh, data } = useAsyncData(); + const { record } = useContext(CalendarContext); + const { setVisible } = useActionContext(); + return { + async run() { + console.log(record); + }, + }; +}; + +const useUpdateAction = () => { + const form = useForm(); + const { setVisible } = useActionContext(); + const { refresh: dataRefresh, data } = useAsyncData(); + return { + async run() { + setVisible(false); + console.log(form.values); + const record = form.values; + for (let i = 0, iLen = dataSource.length; i < iLen; i++) { + const element = dataSource[i]; + if (element.id === record.id) { + dataSource[i] = { ...record }; + break; + } + } + schema['x-component-props']['dataSource'] = dataSource; + form.reset(); + }, + }; +}; + +const useValues = (options) => { + const { visible } = useActionContext(); + const { record } = useContext(CalendarContext); + const result = useRequest( + () => + Promise.resolve({ + data: { + ...record, + }, + }), + { ...options, manual: true }, + ); + useEffect(() => { + if (visible) { + result.run(); + } + }, [visible]); + return result; +}; + +const collection = { + name: 'tests', + fields: [ + { + type: 'string', + name: 'id', + interface: 'input', + uiSchema: { + type: 'string', + 'x-component': 'Input', + }, + }, + { + type: 'string', + name: 'title', + interface: 'input', + uiSchema: { + type: 'string', + 'x-component': 'Input', + }, + }, + { + type: 'string', + name: 'start', + interface: 'datetime', + uiSchema: { + type: 'string', + 'x-component': 'DatePicker', + 'x-component-props': { + dateFormat: 'YYYY-MM-DD', + }, + }, + }, + { + type: 'string', + name: 'end', + interface: 'datetime', + uiSchema: { + type: 'string', + 'x-component': 'DatePicker', + 'x-component-props': { + dateFormat: 'YYYY-MM-DD', + }, + }, + }, + ], +}; +export default () => { + return ( + + + + + + + + + + ); +}; diff --git a/packages/client/src/schema-component/antd/calendar/index.md b/packages/client/src/schema-component/antd/calendar/index.md index e56d63dad..d8f5a8aa3 100644 --- a/packages/client/src/schema-component/antd/calendar/index.md +++ b/packages/client/src/schema-component/antd/calendar/index.md @@ -11,6 +11,14 @@ group: ### Calendar -#### Sync Data +#### general calendar + +#### view calendar detail + + + +#### view calendar detail used initializer + + diff --git a/packages/client/src/schema-component/antd/grid/Grid.tsx b/packages/client/src/schema-component/antd/grid/Grid.tsx index e87f759a5..f3a0d8c8f 100644 --- a/packages/client/src/schema-component/antd/grid/Grid.tsx +++ b/packages/client/src/schema-component/antd/grid/Grid.tsx @@ -121,9 +121,11 @@ const useColProperties = () => { }; export const Grid: any = observer((props) => { + debugger; const field = useField(); const fieldSchema = useFieldSchema(); const { render } = useSchemaInitializer(fieldSchema['x-initializer']); + debugger; const addr = field.address.toString(); const rows = useRowProperties(); return ( diff --git a/packages/client/src/schema-initializer/SchemaInitializerProvider.tsx b/packages/client/src/schema-initializer/SchemaInitializerProvider.tsx index c0279f731..401ba0429 100644 --- a/packages/client/src/schema-initializer/SchemaInitializerProvider.tsx +++ b/packages/client/src/schema-initializer/SchemaInitializerProvider.tsx @@ -29,6 +29,7 @@ export const useSchemaInitializer = (name: string) => { } if (isPlainObj(initializer)) { + debugger; return { exists: true, render: (props?: any) => {