feat: lunisolar => lunar-typescript (ant-design#44420)

ammar-knowledge · Aug 25, 2023 · 94339be · 94339be
1 parent d7d493e
commit 94339be
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 22 deletions.
diff --git a/components/calendar/demo/lunar.tsx b/components/calendar/demo/lunar.tsx
@@ -1,22 +1,19 @@
 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};
     font-size: ${token.fontSizeSM}px;
   `;
   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
@@ -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",