feat: support show lunar day (#972)

* feat: support show lunar day

* fix: update yarn.lock

* fix: types error
Co-authored-by: Dunqing <dengqing0821@gmail.com>

packages/core/client/package.json

@@ -43,6 +43,7 @@
     "react-quill": "^1.3.5",
     "react-router-dom": "^5.2.0",
     "react-to-print": "^2.14.7",
+    "solarlunar-es": "^1.0.9",
     "use-deep-compare-effect": "^1.8.1"
   },
   "peerDependencies": {

packages/core/client/src/block-provider/CalendarBlockProvider.tsx

@@ -7,7 +7,7 @@ import { BlockProvider, useBlockRequestContext } from './BlockProvider';
 export const CalendarBlockContext = createContext<any>({});
 
 const InternalCalendarBlockProvider = (props) => {
-  const { fieldNames } = props;
+  const { fieldNames, showLunar } = props;
   const field = useField();
   const { resource, service } = useBlockRequestContext();
   if (service.loading) {
@@ -20,6 +20,7 @@ const InternalCalendarBlockProvider = (props) => {
         service,
         resource,
         fieldNames,
+        showLunar,
       }}
     >
       {props.children}
@@ -49,5 +50,6 @@ export const useCalendarBlockProps = () => {
   }, [ctx?.service?.loading]);
   return {
     fieldNames: ctx.fieldNames,
+    showLunar: ctx.showLunar,
   };
 };

packages/core/client/src/locale/zh_CN.ts

@@ -314,6 +314,7 @@ export default {
 
   "Configure calendar": "配置日历",
   "Title field": "标题字段",
+  "Show lunar": "展示农历",
   "Start date field": "开始日期字段",
   "End date field": "结束日期字段",
   "Navigate": "分页",

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

@@ -12,15 +12,15 @@ const useOptions = (type = 'string') => {
   const compile = useCompile();
   const { fields } = useCollection();
   const options = fields
-  ?.filter((field) => field.type === type)
-  ?.map((field) => {
-    return {
-      value: field.name,
-      label: compile(field?.uiSchema?.title),
-    };
-  });
+    ?.filter((field) => field.type === type)
+    ?.map((field) => {
+      return {
+        value: field.name,
+        label: compile(field?.uiSchema?.title),
+      };
+    });
   return options;
-}
+};
 
 export const CalendarDesigner = () => {
   const field = useField();
@@ -59,6 +59,21 @@ export const CalendarDesigner = () => {
           dn.refresh();
         }}
       />
+      <SchemaSettings.SwitchItem
+        title={t('Show lunar')}
+        checked={field.decoratorProps.showLunar}
+        onChange={(v) => {
+          field.decoratorProps.showLunar = v;
+          fieldSchema['x-decorator-props']['showLunar'] = v;
+          dn.emit('patch', {
+            schema: {
+              ['x-uid']: fieldSchema['x-uid'],
+              'x-decorator-props': field.decoratorProps,
+            },
+          });
+          dn.refresh();
+        }}
+      />
       <SchemaSettings.SelectItem
         title={t('Start date field')}
         value={fieldNames.start}

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

@@ -7,6 +7,7 @@ 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';
@@ -17,6 +18,29 @@ import type { ToolbarProps } from './types';
 
 const localizer = momentLocalizer(moment);
 
+const DateHeader = ({ date, label, drilldownView, onDrillDown, showLunar = false }) => {
+  if (!drilldownView) {
+    return <span>{label}</span>;
+  }
+
+  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 <span className="rbc-date-lunar">{lunarDay}</span>;
+  }, [date, showLunar]);
+
+  return (
+    <a onClick={onDrillDown} role="cell">
+      <span className="rbc-date-solar">{label}</span>
+      {lunarElement}
+    </a>
+  );
+};
+
 function Toolbar(props: ToolbarProps) {
   const fieldSchema = useFieldSchema();
   const toolBarSchema: Schema = useMemo(
@@ -105,10 +129,11 @@ const CalendarRecordViewer = (props) => {
 };
 
 export const Calendar: any = observer((props: any) => {
-  const { dataSource, fieldNames } = useProps(props);
+  const { dataSource, fieldNames, showLunar } = useProps(props);
   const events = useEvents(dataSource, fieldNames);
   const [visible, setVisible] = useState(false);
   const [record, setRecord] = useState<any>({});
+
   return (
     <div {...props} style={{ height: 700 }}>
       <CalendarRecordViewer visible={visible} setVisible={setVisible} record={record} />
@@ -148,6 +173,7 @@ export const Calendar: any = observer((props: any) => {
         defaultDate={new Date()}
         components={{
           toolbar: Toolbar,
+          dateHeader: (props) => <DateHeader {...props} showLunar={showLunar}></DateHeader>,
         }}
         localizer={localizer}
       />

packages/core/client/src/schema-component/antd/calendar/style.less

@@ -74,7 +74,6 @@ button.rbc-input::-moz-focus-inner {
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 4px 12px;
-  text-align: right;
   vertical-align: middle;
   // font-weight: 500;
   min-height: 32px;
@@ -338,24 +337,39 @@ button.rbc-input::-moz-focus-inner {
   // cursor: pointer;
   flex: 1 1 0;
   min-width: 0;
-  padding-right: 12px;
+  padding-left: 12px;
   padding-top: 4px;
-  text-align: right;
 }
-.rbc-date-cell.rbc-now a {
+.rbc-date-cell.rbc-now span {
   // font-weight: bold;
   color: #1890ff;
 }
-.rbc-date-cell > a,
-.rbc-date-cell > a:active,
-.rbc-date-cell > a:visited {
+.rbc-date-cell a,
+.rbc-date-cell a:active,
+.rbc-date-cell a:visited {
   color: inherit;
   text-decoration: none;
 }
-.rbc-date-cell > a:hover {
+.rbc-date-cell a:hover {
   color: #1890ff;
 }
 
+.rbc-date-cell .rbc-date-solar {
+  font-weight: 500;
+}
+
+.rbc-date-cell .rbc-date-lunar {
+  padding-left: 12px;
+}
+
+.rbc-date-cell:not(.rbc-off-range) .rbc-date-lunar {
+  color: #aaa
+}
+
+.rbc-date-cell .rbc-date-lunar:hover {
+  color: inherit
+}
+
 .rbc-row-bg {
   display: flex;
   flex-direction: row;

packages/core/client/src/schema-component/antd/form-item/FormItem.tsx

@@ -189,7 +189,7 @@ FormItem.Designer = (props) => {
         <SchemaSettings.SwitchItem
           key="required"
           title={t('Required')}
-          checked={fieldSchema.required}
+          checked={fieldSchema.required as boolean}
           onChange={(required) => {
             const schema = {
               ['x-uid']: fieldSchema['x-uid'],

packages/core/client/src/schema-settings/SchemaSettings.tsx

@@ -60,6 +60,7 @@ type SchemaSettingsNested = {
   Item?: React.FC<MenuItemProps>;
   Divider?: React.FC;
   Popup?: React.FC<MenuItemProps & { schema?: ISchema }>;
+  SwitchItem?: React.FC<SwitchItemProps>;
   [key: string]: any;
 };
 
@@ -429,6 +430,12 @@ SchemaSettings.SelectItem = (props) => {
   );
 };
 
+interface SwitchItemProps extends Omit<MenuItemProps, 'onChange'> {
+  title: string;
+  checked?: boolean;
+  onChange?: (v: boolean) => void;
+}
+
 SchemaSettings.SwitchItem = (props) => {
   const { title, onChange, ...others } = props;
   const [checked, setChecked] = useState(!!props.checked);