fix: remove Calendar year picker

Author: NeverEllipsis

packages/bui-core/src/Calendar/Calendar.tsx

@@ -3,20 +3,12 @@ import { useDidMountEffect, useValue } from '@bifrostui/utils';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
 import isoWeek from 'dayjs/plugin/isoWeek';
-import React, {
-  Suspense,
-  lazy,
-  SyntheticEvent,
-  useMemo,
-  useState,
-} from 'react';
+import React, { SyntheticEvent, useMemo, useState } from 'react';
 import { CalendarProps, ICalendarInstance } from './Calendar.types';
 import { formatDate, isRange, isSame } from './utils';
 import { useLocaleText } from '../locales';
 import './Calendar.less';
 
-const Picker = lazy(() => import('../Picker'));
-
 dayjs.extend(isoWeek);
 
 const classes = {
@@ -41,12 +33,10 @@ const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
       headerBarLeftIcon,
       headerBarRightIcon,
       disabledDate,
-      enableSelectYear,
       highlightDate,
       dateRender,
       weekRender,
       onMonthChange,
-      onYearChange,
       onChange,
       ...others
     } = props;
@@ -72,8 +62,6 @@ const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
       maxDate,
     );
 
-    // 控制年份选择picker
-    const [openPicker, setOpenPicker] = useState<boolean>(false);
     // 头部操作栏月份
     const [renderMonth, setRenderMonth] = useState(() => {
       const initMonth =
@@ -186,21 +174,6 @@ const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
       return list;
     };
 
-    const getYearsList = () => {
-      const result = [];
-      // 使用传入参数的时间
-      let startTime = new Date(minDate).getFullYear();
-      const endTime = new Date(maxDate).getFullYear();
-      while (endTime - startTime >= 0) {
-        result.push({
-          label: startTime,
-          value: startTime,
-        });
-        startTime += 1;
-      }
-      return result;
-    };
-
     const getDayClassName = ({ day: itemDate, disabled }) => {
       let result = '';
       if (disabled) return result;
@@ -334,27 +307,6 @@ const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
       }
     };
 
-    /**
-     * 点击顶部日期
-     */
-    const onClickDate = (e) => {
-      if (!enableSelectYear) {
-        return;
-      }
-      e.stopPropagation();
-      setOpenPicker(true);
-      getYearsList();
-    };
-    const onClosePicker = (e, data) => {
-      const selectYear = data.value[0];
-      e.stopPropagation();
-      setRenderMonth(dayjs(renderMonth).set('year', selectYear).toDate());
-      onYearChange?.(e, {
-        year: selectYear,
-      });
-      setOpenPicker(false);
-    };
-
     let data: Record<string, string> = {};
     if (isRangeMode) {
       data = {
@@ -382,7 +334,7 @@ const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
           <div onClick={onClickPrev} className={`${classes.handler}-btn`}>
             {headerBarIcon.left}
           </div>
-          <div className={`${classes.handler}-text`} onClick={onClickDate}>
+          <div className={`${classes.handler}-text`}>
             {dayjs(renderMonth).format(headerBarFormat)}
           </div>
           <div onClick={onClickNext} className={`${classes.handler}-btn`}>
@@ -404,16 +356,6 @@ const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
         </div>
 
         <div className={clsx(`${classes.root}-month`)}>{renderDayList()}</div>
-        {enableSelectYear && (
-          <Suspense fallback={null}>
-            <Picker
-              options={[getYearsList()]}
-              open={openPicker}
-              value={[dayjs(renderMonth).year()]}
-              onClose={onClosePicker}
-            />
-          </Suspense>
-        )}
       </div>
     );
   },
@@ -423,7 +365,6 @@ Calendar.displayName = 'BuiCalendar';
 Calendar.defaultProps = {
   hideDaysOutsideCurrentMonth: false,
   headerBarFormat: 'YYYY/MM',
-  enableSelectYear: false,
   mode: 'single',
   minDate: dayjs(dayjs().format('YYYYMMDD')).add(0, 'month').toDate(),
   maxDate: dayjs(dayjs().format('YYYYMMDD')).add(11, 'month').toDate(),

packages/bui-core/src/Calendar/Calendar.types.ts

@@ -14,10 +14,6 @@ export interface ICalendarMonthChangeData {
   /** 操作类型，prev: 点击上个月 next: 点击下个月 */
   type: 'prev' | 'next';
 }
-export interface ICalendarYearChangeData {
-  /** 切换后的年份 */
-  year: number;
-}
 
 export interface ICustomIconProps {
   /** 是否为可选范围内的最小月份 */
@@ -96,17 +92,6 @@ export type CalendarProps<
        * 自定义周单元格的内容
        */
       weekRender?: (week: string) => React.ReactNode;
-      /**
-       * 是否开启选择年
-       */
-      enableSelectYear?: boolean;
-      /**
-       * 年份发生变化的回调
-       */
-      onYearChange?: (
-        e: React.SyntheticEvent,
-        data: ICalendarYearChangeData,
-      ) => void;
       /**
        * 月份发生变化的回调
        */

packages/bui-core/src/Calendar/__tests__/Calendar.test.tsx

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import React from 'react';
-import { act, screen, fireEvent, isConformant, render } from 'testing';
+import { screen, fireEvent, isConformant, render } from 'testing';
 import { Calendar } from '..';
 
 describe('Calendar', () => {
@@ -175,92 +175,6 @@ describe('Calendar', () => {
     expect(fakeMonthChange).toReturnWith('next');
   });
 
-  it('should render Picker when `enableSelectYear`', async () => {
-    const fakeYearChange = jest.fn((e, data) => data.type);
-    const { container } = render(
-      <Calendar
-        mode="single"
-        enableSelectYear
-        value={dayjs('20240402').toDate()}
-        minDate={dayjs('20230401').toDate()}
-        maxDate={dayjs('20261001').toDate()}
-        onYearChange={fakeYearChange}
-      />,
-    );
-    const texts = container.querySelector(`.${rootClass}-handler-text`);
-
-    fireEvent.click(texts);
-
-    await act(async () => {
-      await jest.runAllTimers();
-    });
-    const picker = document.querySelector(`.bui-picker-confirm`);
-    expect(picker).toHaveTextContent('确认');
-  });
-
-  it('should be called when onYearChange change yaer', async () => {
-    const fakeYearChange = jest.fn((e, data) => data.type);
-    const { container } = render(
-      <Calendar
-        mode="single"
-        enableSelectYear
-        value={dayjs('20240402').toDate()}
-        minDate={dayjs('20230401').toDate()}
-        maxDate={dayjs('20261001').toDate()}
-        onYearChange={fakeYearChange}
-      />,
-    );
-    const texts = container.querySelector(`.${rootClass}-handler-text`);
-
-    fireEvent.click(texts);
-
-    await act(async () => {
-      await jest.runAllTimers();
-    });
-
-    const [panel1] = document.querySelectorAll(`.bui-picker-panel`);
-    const [roller1] = document.querySelectorAll(`.bui-picker-panel-roller`);
-    const confirmBtn1 = document.querySelector(`.bui-picker-confirm`);
-    fireEvent.touchStart(panel1, {
-      touches: [
-        {
-          clientX: 0,
-          clientY: 0,
-        },
-      ],
-      cancelable: true,
-      bubbles: true,
-    });
-    fireEvent.touchMove(panel1, {
-      touches: [
-        {
-          clientX: 0,
-          clientY: -36,
-        },
-      ],
-      cancelable: true,
-      bubbles: true,
-    });
-    fireEvent.touchEnd(panel1, {
-      touches: [
-        {
-          clientX: 0,
-          clientY: -30,
-        },
-      ],
-      cancelable: true,
-      bubbles: true,
-    });
-    fireEvent.transitionEnd(roller1);
-    fireEvent.click(confirmBtn1);
-
-    await act(async () => {
-      await jest.runAllTimers();
-    });
-
-    expect(fakeYearChange).toBeCalled();
-  });
-
   it('should render handler bar by `headerBarFormat`', () => {
     const { container } = render(
       <Calendar

packages/bui-core/src/Calendar/index.en-US.md

@@ -175,38 +175,6 @@ export default () => {
 };
 ```
 
-### Enable direct year switching function
-
-Enable 'enableSelectYear' by clicking on the date text area to open the year floating layer and switch years.
-
-```tsx
-import { Calendar, Stack } from '@bifrostui/react';
-import dayjs from 'dayjs/esm/index';
-import React, { useState } from 'react';
-
-export default () => {
-  const [value, setValue] = useState(dayjs().toDate());
-  const handleChange = (e, res) => {
-    console.log('date change:', res);
-    setValue(res.value);
-  };
-
-  return (
-    <Stack>
-      <div style={{ width: '320px' }}>
-        <Calendar
-          minDate={dayjs().subtract(5, 'year').toDate()}
-          maxDate={dayjs().add(5, 'year').toDate()}
-          enableSelectYear
-          value={value}
-          onChange={handleChange}
-        />
-      </div>
-    </Stack>
-  );
-};
-```
-
 ### Customize disable date
 
 You can customize the disable date through 'disabled date'.

packages/bui-core/src/Calendar/index.zh-CN.md

@@ -175,38 +175,6 @@ export default () => {
 };
 ```
 
-### 开启直接切换年份功能
-
-启用 `enableSelectYear` 通过点击日期文本区域打开年份浮层切换年份。
-
-```tsx
-import { Calendar, Stack } from '@bifrostui/react';
-import dayjs from 'dayjs/esm/index';
-import React, { useState } from 'react';
-
-export default () => {
-  const [value, setValue] = useState(dayjs().toDate());
-  const handleChange = (e, res) => {
-    console.log('date change:', res);
-    setValue(res.value);
-  };
-
-  return (
-    <Stack>
-      <div style={{ width: '320px' }}>
-        <Calendar
-          minDate={dayjs().subtract(5, 'year').toDate()}
-          maxDate={dayjs().add(5, 'year').toDate()}
-          enableSelectYear
-          value={value}
-          onChange={handleChange}
-        />
-      </div>
-    </Stack>
-  );
-};
-```
-
 ### 自定义禁用日期
 
 通过 `disabledDate` 可自定义禁用日期。