From 94339be3e98aed38a48b6d4ad90aa38a29a458d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Fri, 25 Aug 2023 11:42:35 +0800
Subject: [PATCH] feat: lunisolar => lunar-typescript (#44420)

---
 components/calendar/demo/lunar.tsx | 44 ++++++++++++++++--------------
 package.json                       |  2 +-
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/components/calendar/demo/lunar.tsx b/components/calendar/demo/lunar.tsx
index f23d5bdb0d54..efc64412a0c2 100644
--- a/components/calendar/demo/lunar.tsx
+++ b/components/calendar/demo/lunar.tsx
@@ -1,14 +1,11 @@
 import dayjs, { type Dayjs } from 'dayjs';
 import React from 'react';
-import lunisolar from 'lunisolar';
-import zhCn from 'lunisolar/locale/zh-cn';
+import { Lunar, HolidayUtil } from 'lunar-typescript';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import { Calendar, Col, Radio, Row, Select } from 'antd';
 import type { CalendarProps } from 'antd';
 
-lunisolar.locale(zhCn);
-
 const useStyle = createStyles(({ token, css, cx }) => {
   const lunar = css`
     color: ${token.colorTextTertiary};
@@ -16,7 +13,7 @@ const useStyle = createStyles(({ token, css, cx }) => {
   `;
   return {
     wrapper: css`
-      width: 400px;
+      width: 450px;
       border: 1px solid ${token.colorBorderSecondary};
       border-radius: ${token.borderRadiusOuter};
       padding: 5px;
@@ -94,17 +91,20 @@ const App: React.FC = () => {
 
   const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
     console.log(value.format('YYYY-MM-DD'), mode);
-    setSelectDate(value);
   };
 
-  const onDateChange = (value: Dayjs) => {
-    setSelectDate(value);
+  const onDateChange: CalendarProps<Dayjs>['onSelect'] = (value, selectInfo) => {
+    if (selectInfo.source === 'date') {
+      setSelectDate(value);
+    }
   };
 
   const cellRender: CalendarProps<Dayjs>['fullCellRender'] = (date, info) => {
-    const d = lunisolar(date.toDate());
-    const lunar = d.lunar.getDayName();
-    const solarTerm = d.solarTerm?.name;
+    const d = Lunar.fromDate(date.toDate());
+    const lunar = d.getDayInChinese();
+    const solarTerm = d.getJieQi();
+    const h = HolidayUtil.getHoliday(date.get('year'), date.get('month') + 1, date.get('date'));
+    const displayHoliday = h?.getTarget() === h?.getDay() ? h?.getName() : undefined;
     if (info.type === 'date') {
       return React.cloneElement(info.originNode, {
         ...info.originNode.props,
@@ -115,7 +115,9 @@ const App: React.FC = () => {
         children: (
           <div className={styles.text}>
             {date.get('date')}
-            {info.type === 'date' && <div className={styles.lunar}>{solarTerm || lunar}</div>}
+            {info.type === 'date' && (
+              <div className={styles.lunar}>{displayHoliday || solarTerm || lunar}</div>
+            )}
           </div>
         ),
       });
@@ -124,29 +126,29 @@ const App: React.FC = () => {
     if (info.type === 'month') {
       // Due to the fact that a solar month is part of the lunar month X and part of the lunar month X+1,
       // when rendering a month, always take X as the lunar month of the month
-      const d2 = lunisolar(new Date(date.get('year'), date.get('month')));
-      const month = d2.lunar.getMonthName();
+      const d2 = Lunar.fromDate(new Date(date.get('year'), date.get('month')));
+      const month = d2.getMonthInChinese();
       return (
         <div
           className={classNames(styles.monthCell, {
             [styles.monthCellCurrent]: selectDate.isSame(date, 'month'),
           })}
         >
-          {date.get('month') + 1}月（{month}）
+          {date.get('month') + 1}月（{month}月）
         </div>
       );
     }
   };
 
   const getYearLabel = (year: number) => {
-    const d = lunisolar(new Date(year + 1, 0));
-    return `${year}年（${d.format('cYcZ年')}）`;
+    const d = Lunar.fromDate(new Date(year + 1, 0));
+    return `${d.getYearInChinese()}年（${d.getYearInGanZhi()}${d.getYearShengXiao()}年）`;
   };
 
   const getMonthLabel = (month: number, value: Dayjs) => {
-    const d = lunisolar(new Date(value.year(), month));
-    const lunar = d.lunar.getMonthName();
-    return `${month + 1}月（${lunar}）`;
+    const d = Lunar.fromDate(new Date(value.year(), month));
+    const lunar = d.getMonthInChinese();
+    return `${month + 1}月（${lunar}月）`;
   };
 
   return (
@@ -155,7 +157,7 @@ const App: React.FC = () => {
         fullCellRender={cellRender}
         fullscreen={false}
         onPanelChange={onPanelChange}
-        onChange={onDateChange}
+        onSelect={onDateChange}
         headerRender={({ value, type, onChange, onTypeChange }) => {
           const start = 0;
           const end = 12;
diff --git a/package.json b/package.json
index 33487b37dc7e..37fd55d531fa 100644
--- a/package.json
+++ b/package.json
@@ -259,7 +259,7 @@
     "jsonml.js": "^0.1.0",
     "lint-staged": "^14.0.0",
     "lodash": "^4.17.21",
-    "lunisolar": "^2.2.2",
+    "lunar-typescript": "^1.6.9",
     "lz-string": "^1.4.4",
     "mockdate": "^3.0.0",
     "node-notifier": "^10.0.1",