site(Calendar): add lunar calendar demo (#44166)

* feat: update demo * feat: update demo * feat: update demo * feat: update demo * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code
ant-design · Aug 17, 2023 · f1c38bf · f1c38bf
1 parent 808452e
commit f1c38bf
Show file tree

Hide file tree

Showing 14 changed files with 258 additions and 15 deletions.
diff --git a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -9282,7 +9282,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
                           <span
                             class="ant-badge-status-text"
                           >
-                            This is very long usual event。。....
+                            This is very long usual event......
                           </span>
                         </span>
                       </li>

diff --git a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap
@@ -5418,7 +5418,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
                           <span
                             class="ant-badge-status-text"
                           >
-                            This is very long usual event。。....
+                            This is very long usual event......
                           </span>
                         </span>
                       </li>

diff --git a/components/calendar/__tests__/demo-extend.test.ts b/components/calendar/__tests__/demo-extend.test.ts
@@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('calendar');
+extendTest('calendar', { skip: ['lunar.tsx'] });
diff --git a/components/calendar/__tests__/demo.test.ts b/components/calendar/__tests__/demo.test.ts
@@ -5,4 +5,5 @@ demoTest('calendar', {
   testRootProps: {
     value: dayjs(),
   },
+  skip: ['lunar.tsx'],
 });
diff --git a/components/calendar/demo/basic.tsx b/components/calendar/demo/basic.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import type { Dayjs } from 'dayjs';
 import { Calendar } from 'antd';
-import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
+import type { CalendarProps } from 'antd';
 
 const App: React.FC = () => {
-  const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
+  const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
     console.log(value.format('YYYY-MM-DD'), mode);
   };
 

diff --git a/components/calendar/demo/card.tsx b/components/calendar/demo/card.tsx
@@ -1,9 +1,9 @@
 import type { Dayjs } from 'dayjs';
 import React from 'react';
 import { Calendar, theme } from 'antd';
-import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
+import type { CalendarProps } from 'antd';
 
-const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
+const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
   console.log(value.format('YYYY-MM-DD'), mode);
 };
 

diff --git a/components/calendar/demo/component-token.tsx b/components/calendar/demo/component-token.tsx
@@ -1,11 +1,11 @@
 import type { Dayjs } from 'dayjs';
 import React from 'react';
 import { Calendar, ConfigProvider } from 'antd';
-import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
+import type { CalendarProps } from 'antd';
 
 /** Test usage. Do not use in your production. */
 export default () => {
-  const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
+  const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
     console.log(value.format('YYYY-MM-DD'), mode);
   };
 

diff --git a/components/calendar/demo/customize-header.tsx b/components/calendar/demo/customize-header.tsx
@@ -4,14 +4,14 @@ import 'dayjs/locale/zh-cn';
 import type { Dayjs } from 'dayjs';
 import dayLocaleData from 'dayjs/plugin/localeData';
 import { Calendar, Col, Radio, Row, Select, Typography, theme } from 'antd';
-import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
+import type { CalendarProps } from 'antd';
 
 dayjs.extend(dayLocaleData);
 
 const App: React.FC = () => {
   const { token } = theme.useToken();
 
-  const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
+  const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
     console.log(value.format('YYYY-MM-DD'), mode);
   };
 

diff --git a/components/calendar/demo/lunar.md b/components/calendar/demo/lunar.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+展示农历、节气等信息。
+
+## en-US
+
+Display lunar calendar, solar terms and other information.
diff --git a/components/calendar/demo/lunar.tsx b/components/calendar/demo/lunar.tsx
@@ -0,0 +1,233 @@
+import dayjs, { type Dayjs } from 'dayjs';
+import React from 'react';
+import lunisolar from 'lunisolar';
+import zhCn from 'lunisolar/locale/zh-cn';
+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;
+          border: 1px solid ${token.colorBorderSecondary};
+          border-radius: ${token.borderRadiusOuter};
+          padding: 5px;
+        `,
+    dateCell: css`
+          position: relative;
+          &:before {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            margin: auto;
+            max-width: 40px;
+            max-height: 40px;
+            background: transparent;
+            transition: background 300ms;
+            border-radius: ${token.borderRadiusOuter}px;
+            border: 1px solid transparent;
+            box-sizing: border-box;
+          }
+          &:hover:before {
+            background: rgba(0, 0, 0, 0.04);
+          }
+        `,
+    today: css`
+          &:before {
+            border: 1px solid ${token.colorPrimary};
+          }
+    `,
+    text: css`
+          position: relative;
+          z-index: 1;
+      `,
+    lunar,
+    current: css`
+            color: ${token.colorTextLightSolid};
+            &:before {
+              background: ${token.colorPrimary};
+            }
+            &:hover:before {
+              background: ${token.colorPrimary};
+              opacity: .8;
+            }
+            .${cx(lunar)} {
+              color: ${token.colorTextLightSolid};
+              opacity: .9;
+            }
+          `,
+    monthCell: css`
+          width: 120px;
+          color: ${token.colorTextBase};
+          border-radius: ${token.borderRadiusOuter}px;
+          padding: 5px 0;
+          &:hover {
+            background: rgba(0, 0, 0, 0.04);
+          }
+        `,
+    monthCellCurrent: css`
+          color: ${token.colorTextLightSolid};
+          background: ${token.colorPrimary};
+          &:hover {
+            background: ${token.colorPrimary};
+            opacity: .8;
+          }
+        `,
+  };
+});
+
+const App: React.FC = () => {
+  const { styles } = useStyle({ test: true });
+
+  const [selectDate, setSelectDate] = React.useState<Dayjs>(dayjs());
+
+  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 cellRender: CalendarProps<Dayjs>['fullCellRender'] = (date, info) => {
+    const d = lunisolar(date.toDate());
+    const lunar = d.lunar.getDayName();
+    const solarTerm = d.solarTerm?.name;
+    if (info.type === 'date') {
+      return React.cloneElement(info.originNode, {
+        ...info.originNode.props,
+        className: classNames(styles.dateCell, {
+          [styles.current]: selectDate.isSame(date, 'date'),
+          [styles.today]: date.isSame(dayjs(), 'date'),
+        }),
+        children: (
+          <div className={styles.text}>
+            {date.get('date')}
+            {info.type === 'date' && <div className={styles.lunar}>{solarTerm || lunar}</div>}
+          </div>
+        ),
+      });
+    }
+
+    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();
+      return (
+        <div
+          className={classNames(styles.monthCell, {
+            [styles.monthCellCurrent]: selectDate.isSame(date, '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 getMonthLabel = (month: number, value: Dayjs) => {
+    const d = lunisolar(new Date(value.year(), month));
+    const lunar = d.lunar.getMonthName();
+    return `${month + 1}月（${lunar}）`;
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <Calendar
+        fullCellRender={cellRender}
+        fullscreen={false}
+        onPanelChange={onPanelChange}
+        onChange={onDateChange}
+        headerRender={({ value, type, onChange, onTypeChange }) => {
+          const start = 0;
+          const end = 12;
+          const monthOptions = [];
+
+          let current = value.clone();
+          const localeData = value.localeData();
+          const months = [];
+          for (let i = 0; i < 12; i++) {
+            current = current.month(i);
+            months.push(localeData.monthsShort(current));
+          }
+
+          for (let i = start; i < end; i++) {
+            monthOptions.push({
+              label: getMonthLabel(i, value),
+              value: i,
+            });
+          }
+
+          const year = value.year();
+          const month = value.month();
+          const options = [];
+          for (let i = year - 10; i < year + 10; i += 1) {
+            options.push({
+              label: getYearLabel(i),
+              value: i,
+            });
+          }
+          return (
+            <Row justify="end" gutter={8} style={{ padding: 8 }}>
+              <Col>
+                <Select
+                  size="small"
+                  dropdownMatchSelectWidth={false}
+                  className="my-year-select"
+                  value={year}
+                  options={options}
+                  onChange={(newYear) => {
+                    const now = value.clone().year(newYear);
+                    onChange(now);
+                  }}
+                />
+              </Col>
+              <Col>
+                <Select
+                  size="small"
+                  dropdownMatchSelectWidth={false}
+                  value={month}
+                  options={monthOptions}
+                  onChange={(newMonth) => {
+                    const now = value.clone().month(newMonth);
+                    onChange(now);
+                  }}
+                />
+              </Col>
+              <Col>
+                <Radio.Group
+                  size="small"
+                  onChange={(e) => onTypeChange(e.target.value)}
+                  value={type}
+                >
+                  <Radio.Button value="month">月</Radio.Button>
+                  <Radio.Button value="year">年</Radio.Button>
+                </Radio.Group>
+              </Col>
+            </Row>
+          );
+        }}
+      />
+    </div>
+  );
+};
+
+export default App;
diff --git a/components/calendar/demo/notice-calendar.tsx b/components/calendar/demo/notice-calendar.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import type { Dayjs } from 'dayjs';
-import type { CellRenderInfo } from 'rc-picker/lib/interface';
-import type { BadgeProps } from 'antd';
+import type { BadgeProps, CalendarProps } from 'antd';
 import { Badge, Calendar } from 'antd';
 
 const getListData = (value: Dayjs) => {
@@ -23,7 +22,7 @@ const getListData = (value: Dayjs) => {
     case 15:
       listData = [
         { type: 'warning', content: 'This is warning event' },
-        { type: 'success', content: 'This is very long usual event。。....' },
+        { type: 'success', content: 'This is very long usual event......' },
         { type: 'error', content: 'This is error event 1.' },
         { type: 'error', content: 'This is error event 2.' },
         { type: 'error', content: 'This is error event 3.' },
@@ -65,7 +64,7 @@ const App: React.FC = () => {
     );
   };
 
-  const cellRender = (current: Dayjs, info: CellRenderInfo<Dayjs>) => {
+  const cellRender: CalendarProps<Dayjs>['cellRender'] = (current, info) => {
     if (info.type === 'date') return dateCellRender(current);
     if (info.type === 'month') return monthCellRender(current);
     return info.originNode;

diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md
@@ -19,6 +19,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 <code src="./demo/notice-calendar.tsx" clientOnly>Notice Calendar</code>
 <code src="./demo/card.tsx" clientOnly>Card</code>
 <code src="./demo/select.tsx" clientOnly>Selectable Calendar</code>
+<code src="./demo/lunar.tsx" clientOnly>Lunar Calendar</code>
 <code src="./demo/customize-header.tsx" clientOnly>Customize Header</code>
 <code src="./demo/component-token.tsx" debug>Component Token</code>
 

diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md
@@ -20,6 +20,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 <code src="./demo/notice-calendar.tsx" clientOnly>通知事项日历</code>
 <code src="./demo/card.tsx" clientOnly>卡片模式</code>
 <code src="./demo/select.tsx" clientOnly>选择功能</code>
+<code src="./demo/lunar.tsx" clientOnly>农历日历</code>
 <code src="./demo/customize-header.tsx" clientOnly>自定义头部</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
 

diff --git a/package.json b/package.json
@@ -258,6 +258,7 @@
     "jsonml.js": "^0.1.0",
     "lint-staged": "^14.0.0",
     "lodash": "^4.17.21",
+    "lunisolar": "^2.2.2",
     "lz-string": "^1.4.4",
     "mockdate": "^3.0.0",
     "node-notifier": "^10.0.1",