From ed6f9a0867c960b16c83d3c7263eb439c27c125e Mon Sep 17 00:00:00 2001 From: Dunqing Date: Sat, 29 Oct 2022 14:14:21 +0800 Subject: [PATCH] feat: support show lunar day in week and day (#977) Co-authored-by: qing --- .../antd/calendar/Calendar.tsx | 34 ++++---------- .../schema-component/antd/calendar/Title.tsx | 18 ++++++-- .../antd/calendar/components/Header.tsx | 45 +++++++++++++++++++ .../schema-component/antd/calendar/style.less | 32 ++++++++++++- .../schema-component/antd/calendar/types.d.ts | 6 +++ .../schema-component/antd/calendar/utils.ts | 8 ++++ 6 files changed, 113 insertions(+), 30 deletions(-) create mode 100644 packages/core/client/src/schema-component/antd/calendar/components/Header.tsx 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 5ff0fdc38..cdf0c1f4b 100644 --- a/packages/core/client/src/schema-component/antd/calendar/Calendar.tsx +++ b/packages/core/client/src/schema-component/antd/calendar/Calendar.tsx @@ -7,40 +7,17 @@ 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 solarLunar from 'solarlunar-es'; import { RecordProvider } from '../../../'; import { i18n } from '../../../i18n'; import { useProps } from '../../hooks/useProps'; import { ActionContext } from '../action'; +import Header from './components/Header'; import { CalendarToolbarContext } from './context'; import './style.less'; import type { ToolbarProps } from './types'; const localizer = momentLocalizer(moment); -const DateHeader = ({ date, label, drilldownView, onDrillDown, showLunar = false }) => { - if (!drilldownView) { - return {label}; - } - - const lunarElement = useMemo(() => { - if (!showLunar) { - return; - } - const md = moment(date); - const result = solarLunar.solar2lunar(md.year(), md.month() + 1, md.date()); - const lunarDay = typeof result !== 'number' ? result.lunarFestival || result.term || result.dayCn : result; - return {lunarDay}; - }, [date, showLunar]); - - return ( - - {label} - {lunarElement} - - ); -}; - function Toolbar(props: ToolbarProps) { const fieldSchema = useFieldSchema(); const toolBarSchema: Schema = useMemo( @@ -172,8 +149,13 @@ export const Calendar: any = observer((props: any) => { }} defaultDate={new Date()} components={{ - toolbar: Toolbar, - dateHeader: (props) => , + toolbar: (props) => , + week: { + header: (props) =>
, + }, + month: { + dateHeader: (props) =>
, + }, }} localizer={localizer} /> diff --git a/packages/core/client/src/schema-component/antd/calendar/Title.tsx b/packages/core/client/src/schema-component/antd/calendar/Title.tsx index 379a6a70f..bd709f1bf 100644 --- a/packages/core/client/src/schema-component/antd/calendar/Title.tsx +++ b/packages/core/client/src/schema-component/antd/calendar/Title.tsx @@ -1,14 +1,26 @@ import { observer } from '@formily/react'; -import React, { useContext } from 'react'; +import moment from 'moment'; +import React, { useContext, useMemo } from 'react'; +import solarLunar from 'solarlunar-es'; import { useDesignable } from '../../hooks'; import { CalendarToolbarContext } from './context'; +import { getLunarDay } from './utils'; export const Title = observer(() => { const { DesignableBar } = useDesignable(); - const { label } = useContext(CalendarToolbarContext); + const { date, view, label, showLunar } = useContext(CalendarToolbarContext); + + const lunarElement = useMemo(() => { + if (!showLunar || view !== 'day') { + return; + } + return {getLunarDay(date)}; + }, [view, date, showLunar]); + return (
- {label} + {label} + {lunarElement}
); diff --git a/packages/core/client/src/schema-component/antd/calendar/components/Header.tsx b/packages/core/client/src/schema-component/antd/calendar/components/Header.tsx new file mode 100644 index 000000000..9de5798d6 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/calendar/components/Header.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import moment from 'moment'; +import { useMemo } from 'react'; +import solarLunar from 'solarlunar-es'; +import { getLunarDay } from '../utils'; + +const Header = ({ date, label, drilldownView, onDrillDown, showLunar = false, type, localizer }) => { + const lunarElement = useMemo(() => { + if (!showLunar) { + return; + } + return {getLunarDay(date)}; + }, [date, showLunar]); + + const child = useMemo(() => { + if (type === 'week') { + return ( +
+ {localizer.format(date, 'ddd')} +
+ {localizer.format(date, 'DD')} + {lunarElement} +
+
+ ); + } else { + return ( + <> + {label} + {lunarElement} + + ); + } + }, [type]); + + const Wrapper = drilldownView ? 'a' : React.Fragment; + + return ( + + {child} + + ); +}; + +export default Header; diff --git a/packages/core/client/src/schema-component/antd/calendar/style.less b/packages/core/client/src/schema-component/antd/calendar/style.less index 8ca9367e5..0da1ebd46 100644 --- a/packages/core/client/src/schema-component/antd/calendar/style.less +++ b/packages/core/client/src/schema-component/antd/calendar/style.less @@ -567,6 +567,36 @@ button.rbc-input::-moz-focus-inner { .rbc-time-header-cell { min-height: 32px !important; } +.rbc-time-header-cell .rbc-header { + display: flex; +} +.rbc-time-header-cell .rbc-header.rbc-today { + border-color: #1890ff; + background-color: #e6f7ff; + color: #1890ff +} + +.rbc-time-header-cell .rbc-header a { + display: flex; + flex-direction: column; +} + +.rbc-time-header-cell .rbc-date-wrap { + display: flex; + align-items: center; +} + +.rbc-time-header-cell .rbc-date-solar { + font-size: 18px; +} +.rbc-time-header-cell .rbc-date-lunar { + margin-left: 4px; +} + +.rbc-time-header-cell .rbc-header:not(.rbc-today) .rbc-date-lunar { + color: #aaa; +} + .rbc-calendar.view-week { .rbc-time-header-cell { margin-top: -32px; @@ -709,7 +739,7 @@ button.rbc-input::-moz-focus-inner { .rbc-time-header-content { flex: 1; - display: flex; + // display: flex; min-width: 0; flex-direction: column; // border-left: 1px solid #f0f0f0; diff --git a/packages/core/client/src/schema-component/antd/calendar/types.d.ts b/packages/core/client/src/schema-component/antd/calendar/types.d.ts index d3f3470d3..fcb6f0104 100644 --- a/packages/core/client/src/schema-component/antd/calendar/types.d.ts +++ b/packages/core/client/src/schema-component/antd/calendar/types.d.ts @@ -5,4 +5,10 @@ export interface ToolbarProps { views?: any; onNavigate?: (action: string) => void; onView?: (view: string) => void; + + date: string; + /** + * 是否展示农历 + */ + showLunar: boolean; } 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 f72d5efba..a25d2b055 100644 --- a/packages/core/client/src/schema-component/antd/calendar/utils.ts +++ b/packages/core/client/src/schema-component/antd/calendar/utils.ts @@ -1,4 +1,6 @@ import { get } from 'lodash'; +import moment from 'moment'; +import solarLunar from 'solarlunar-es'; import { i18n } from '../../../i18n'; export const toEvents = (data: any[], fieldNames: any) => { @@ -11,3 +13,9 @@ export const toEvents = (data: any[], fieldNames: any) => { }; }); }; + +export const getLunarDay = (date: moment.MomentInput) => { + const md = moment(date); + const result = solarLunar.solar2lunar(md.year(), md.month() + 1, md.date()); + return typeof result !== 'number' ? result.lunarFestival || result.term || result.dayCn : result; +};