import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { createForm } from '@formily/core';
import { observer, RecursionField, Schema, useFieldSchema } from '@formily/react';
import get from 'lodash/get';
import moment from 'moment';
import React, { 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';
import { RecordProvider } from '../../../';
import { i18n } from '../../../i18n';
import { useProps } from '../../hooks/useProps';
import { ActionContext } from '../action';
import { CalendarToolbarContext } from './context';
import './style.less';
import type { ToolbarProps } from './types';
const localizer = momentLocalizer(moment);
function Toolbar(props: ToolbarProps) {
const fieldSchema = useFieldSchema();
const toolBarSchema: Schema = useMemo(
() =>
fieldSchema.reduceProperties((buf, current) => {
if (current['x-component'].endsWith('.ActionBar')) {
return current;
}
return buf;
}, null),
[],
);
return (
);
}
const messages: any = {
allDay: '',
previous: (
),
next: (
),
today: i18n.t('Today'),
month: i18n.t('Month'),
week: i18n.t('Week'),
work_week: i18n.t('Work week'),
day: i18n.t('Day'),
agenda: i18n.t('Agenda'),
date: i18n.t('Date'),
time: i18n.t('Time'),
event: i18n.t('Event'),
noEventsInRange: i18n.t('None'),
showMore: (count) => i18n.t('{{count}} more items', { count }),
};
const useEvents = (dataSource: any, fieldNames: any) => {
const { t } = useTranslation();
return useMemo(
() =>
Array.isArray(dataSource)
? dataSource?.map((item) => {
return {
id: get(item, fieldNames.id || 'id'),
title: get(item, fieldNames.title) || t('Untitle'),
start: new Date(get(item, fieldNames.start)),
end: new Date(get(item, fieldNames.end || fieldNames.start)),
};
})
: [],
[dataSource, fieldNames],
);
};
const CalendarRecordViewer = (props) => {
const { visible, setVisible, record } = props;
const form = useMemo(() => createForm(), [record]);
const fieldSchema = useFieldSchema();
const eventSchema: Schema = useMemo(
() =>
fieldSchema.reduceProperties((buf, current) => {
if (current['x-component'].endsWith('.Event')) {
return current;
}
return buf;
}, null),
[],
);
return (
eventSchema && (
)
);
};
export const Calendar: any = observer((props: any) => {
const { dataSource, fieldNames } = useProps(props);
const events = useEvents(dataSource, fieldNames);
const [visible, setVisible] = useState(false);
const [record, setRecord] = useState({});
return (
{
console.log('onSelectSlot', slotInfo);
}}
onDoubleClickEvent={(event) => {
console.log('onDoubleClickEvent');
}}
onSelectEvent={(event) => {
const record = dataSource?.find((item) => item[fieldNames.id] === event.id);
if (!record) {
return;
}
setRecord(record);
setVisible(true);
}}
formats={{
monthHeaderFormat: 'Y-M',
agendaDateFormat: 'M-DD',
dayHeaderFormat: 'Y-M-DD',
dayRangeHeaderFormat: ({ start, end }, culture, local) => {
if (dates.eq(start, end, 'month')) {
return local.format(start, 'Y-M', culture);
}
return `${local.format(start, 'Y-M', culture)} - ${local.format(end, 'Y-M', culture)}`;
},
}}
defaultDate={new Date()}
components={{
toolbar: Toolbar,
}}
localizer={localizer}
/>
);
});