chore: release 1.11.8-patch.8 (#4072)

* fix(DateRangePicker): enhance panel synchronization for preset selection (#3818)

* fix(DatePicker): fix year mode panel in range picker (#3744)

* fix(DatePicker): fix year mode panel in range picker

* chore: optimize

* chore: release 1.11.8-patch.8

---------

Co-authored-by: Rylan <rylanbot@qq.com>

Author: uyarn

packages/components/date-picker/DateRangePicker.tsx

@@ -80,12 +80,24 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((origin
   // 记录面板是否选中过
   const [isSelected, setIsSelected] = useState(false);
 
+  const handleSyncPanelValue = (value: DateRangeValue) => {
+    // 同年同月时，确保右侧面板月份比左侧大 避免两侧面板月份一致
+    const nextMonth = value.map((v: string) => parseToDayjs(v, format).month());
+    const nextYear = value.map((v: string) => parseToDayjs(v, format).year());
+    if (nextYear[0] === nextYear[1] && nextMonth[0] === nextMonth[1]) {
+      nextMonth[0] === 11 ? (nextMonth[0] -= 1) : (nextMonth[1] += 1);
+    }
+    setMonth(nextMonth);
+    setYear(nextYear);
+  };
+
   const handlePopupInvisible = () => {
     setPopupVisible(false);
     props.popupProps?.onVisibleChange?.(false, {});
   };
 
   useEffect(() => {
+    if (value === cacheValue) return;
     // 面板展开重置数据
     if (popupVisible) {
       setIsSelected(false);
@@ -105,13 +117,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((origin
         setYear(defaultYear);
         setMonth(defaultMonth);
       } else if (value.length === 2 && !enableTimePicker) {
-        // 确保右侧面板月份比左侧大 避免两侧面板月份一致
-        const nextMonth = value.map((v: string) => parseToDayjs(v, format).month());
-        if (year[0] === year[1] && nextMonth[0] === nextMonth[1]) {
-          nextMonth[0] === 11 ? (nextMonth[0] -= 1) : (nextMonth[1] += 1);
-        }
-        setYear(value.map((v: string) => parseToDayjs(v, format).year()));
-        setMonth(nextMonth);
+        handleSyncPanelValue(value);
       } else {
         setYear(value.map((v: string) => parseToDayjs(v, format).year()));
         setMonth(value.map((v: string) => parseToDayjs(v, format).month()));
@@ -282,10 +288,17 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((origin
     if (!Array.isArray(presetValue)) {
       log.error('DateRangePicker', `preset: ${preset} must be Array!`);
     } else {
-      onChange(formatDate(presetValue, { format, targetFormat: valueType, autoSwap: true }), {
-        dayjsValue: presetValue.map((p) => parseToDayjs(p, format)),
-        trigger: 'preset',
-      });
+      const formattedPreset = formatDate(presetValue, { format, targetFormat: valueType });
+      setInputValue(formattedPreset);
+      setCacheValue(formattedPreset);
+      setTime(formatTime(formattedPreset, format, timeFormat, props.defaultTime));
+
+      setIsSelected(true);
+      setIsFirstValueSelected(true);
+
+      handleSyncPanelValue(formattedPreset);
+      handlePopupInvisible();
+      onChange(formattedPreset, { dayjsValue: formattedPreset.map((p) => parseToDayjs(p, format)), trigger: 'preset' });
       props.onPresetClick?.(context);
       handlePopupInvisible();
     }

packages/components/date-picker/DateRangePickerPanel.tsx

@@ -1,20 +1,22 @@
-import React, { forwardRef, useState, useMemo } from 'react';
+import React, { forwardRef, useMemo, useState } from 'react';
 import dayjs from 'dayjs';
-import { formatDate, getDefaultFormat, parseToDayjs } from '@tdesign/common-js/date-picker/format';
-import { subtractMonth, addMonth, extractTimeObj } from '@tdesign/common-js/date-picker/utils';
+import { formatDate, formatTime, getDefaultFormat, parseToDayjs } from '@tdesign/common-js/date-picker/format';
+import { addMonth, extractTimeObj, subtractMonth } from '@tdesign/common-js/date-picker/utils';
 import log from '@tdesign/common-js/log/index';
-import { StyledProps } from '../common';
-import {
-  TdDateRangePickerPanelProps,
-  DatePickerYearChangeTrigger,
+import useDefaultProps from '../hooks/useDefaultProps';
+import useRangeValue from './hooks/useRangeValue';
+import RangePanel from './panel/RangePanel';
+import { dateCorrection } from './utils';
+
+import type { StyledProps } from '../common';
+import type {
   DatePickerMonthChangeTrigger,
   DatePickerTimeChangeTrigger,
+  DatePickerYearChangeTrigger,
+  DateRangeValue,
   PresetDate,
+  TdDateRangePickerPanelProps,
 } from './type';
-import RangePanel from './panel/RangePanel';
-import useRangeValue from './hooks/useRangeValue';
-import useDefaultProps from '../hooks/useDefaultProps';
-import { dateCorrection } from './utils';
 
 export interface DateRangePickerPanelProps extends TdDateRangePickerPanelProps, StyledProps {}
 
@@ -50,7 +52,7 @@ const DateRangePickerPanel = forwardRef<HTMLDivElement, DateRangePickerPanelProp
     setCacheValue,
   } = useRangeValue(props);
 
-  const { format } = getDefaultFormat({
+  const { format, timeFormat } = getDefaultFormat({
     mode,
     enableTimePicker,
     format: props.format,
@@ -62,6 +64,18 @@ const DateRangePickerPanel = forwardRef<HTMLDivElement, DateRangePickerPanelProp
   const [hoverValue, setHoverValue] = useState([]);
   const activeIndex = useMemo(() => (isFirstValueSelected ? 1 : 0), [isFirstValueSelected]);
 
+  const handleSyncPanelValue = (value: DateRangeValue) => {
+    // 同年同月时，确保右侧面板月份比左侧大，避免两侧面板月份一致
+    const nextMonth = value.map((v: string) => parseToDayjs(v, format).month());
+    const nextYear = value.map((v: string) => parseToDayjs(v, format).year());
+    if (nextYear[0] === nextYear[1] && nextMonth[0] === nextMonth[1]) {
+      nextMonth[0] === 11 ? (nextMonth[0] -= 1) : (nextMonth[1] += 1);
+    }
+    setMonth(nextMonth);
+    setYear(nextYear);
+    setTime(formatTime(value, format, timeFormat, props.defaultTime));
+  };
+
   // 日期 hover
   function onCellMouseEnter(date: Date) {
     setIsHoverCell(true);
@@ -223,7 +237,12 @@ const DateRangePickerPanel = forwardRef<HTMLDivElement, DateRangePickerPanelProp
     if (!Array.isArray(presetVal)) {
       log.error('DateRangePickerPanel', `preset: ${presetValue} must be Array!`);
     } else {
-      onChange(formatDate(presetVal, { format, autoSwap: true }), {
+      const formattedPreset = formatDate(presetVal, { format });
+      setCacheValue(formattedPreset);
+      setIsFirstValueSelected(true);
+      setIsSelected(true);
+      handleSyncPanelValue(formattedPreset);
+      onChange(formattedPreset, {
         dayjsValue: presetVal.map((p) => parseToDayjs(p, format)),
         trigger: 'preset',
       });

packages/components/date-picker/base/Header.tsx

@@ -8,6 +8,8 @@ import { PaginationMini, TdPaginationMiniProps } from '../../pagination';
 export interface DatePickerHeaderProps extends Pick<TdDatePickerProps, 'mode'> {
   year?: number;
   month?: number;
+  internalYear: Array<number>;
+  partial: 'start' | 'end';
   onMonthChange?: Function;
   onYearChange?: Function;
   onJumperClick?: TdPaginationMiniProps['onChange'];
@@ -31,7 +33,7 @@ const useDatePickerLocalConfig = () => {
 const DatePickerHeader = (props: DatePickerHeaderProps) => {
   const { classPrefix } = useConfig();
 
-  const { mode, year, month, onMonthChange, onYearChange, onJumperClick } = props;
+  const { mode, year, month, onMonthChange, onYearChange, onJumperClick, partial, internalYear = [] } = props;
 
   const { now, months, preMonth, preYear, nextMonth, nextYear, preDecade, nextDecade } = useDatePickerLocalConfig();
 
@@ -66,10 +68,14 @@ const DatePickerHeader = (props: DatePickerHeaderProps) => {
   const [yearOptions, setYearOptions] = useState(() => initOptions(year));
 
   // 年份选择展示区间
-  const nearestYear: number = useMemo(
-    () => yearOptions.find((option) => option.value - year <= 9 && option.value - year >= 0)?.value || year,
-    [yearOptions, year],
-  );
+  const nearestYear: number = useMemo(() => {
+    // 右侧面板年份选择需要保持大于左侧面板年份选择
+    const extraYear = partial === 'end' && mode === 'year' && internalYear[1] - internalYear[0] <= 9 ? 9 : 0;
+    return (
+      yearOptions.find((option) => option.value - (year + extraYear) <= 9 && option.value - (year + extraYear) >= 0)
+        ?.value || year
+    );
+  }, [yearOptions, year, mode, partial, internalYear]);
 
   useEffect(() => {
     const yearRange = initOptions(year);

packages/components/date-picker/panel/PanelContent.tsx

@@ -22,6 +22,7 @@ export interface PanelContentProps {
   multiple?: SinglePanelProps['multiple'];
   popupVisible?: boolean;
   tableData: any[];
+  internalYear?: Array<number>;
   onMonthChange: SinglePanelProps['onMonthChange'] | RangePanelProps['onMonthChange'];
   onYearChange: SinglePanelProps['onYearChange'] | RangePanelProps['onYearChange'];
   onJumperClick: SinglePanelProps['onJumperClick'] | RangePanelProps['onJumperClick'];
@@ -48,6 +49,7 @@ export default function PanelContent(props: PanelContentProps) {
     partial = 'start',
     time,
     tableData,
+    internalYear,
     onJumperClick,
     onCellClick,
     onCellMouseEnter,
@@ -92,6 +94,8 @@ export default function PanelContent(props: PanelContentProps) {
           mode={mode}
           year={year}
           month={month}
+          internalYear={internalYear}
+          partial={partial}
           onMonthChange={onMonthChangeInner}
           onYearChange={onYearChangeInner}
           onJumperClick={onJumperClickInner}

packages/components/date-picker/panel/RangePanel.tsx

@@ -128,7 +128,7 @@ const RangePanel = forwardRef<HTMLDivElement, RangePanelProps>((originalProps, r
     end: value[1] ? parseToDayjs(value[1], format).toDate() : undefined,
     hoverStart: !hidePreselection && hoverValue[0] ? parseToDayjs(hoverValue[0], format).toDate() : undefined,
     hoverEnd: !hidePreselection && hoverValue[1] ? parseToDayjs(hoverValue[1], format).toDate() : undefined,
-    year: endYear,
+    year: mode === 'year' && endYear - startYear <= 9 ? endYear + 9 : endYear,
     month: endMonth,
     mode,
     firstDayOfWeek,
@@ -197,6 +197,7 @@ const RangePanel = forwardRef<HTMLDivElement, RangePanelProps>((originalProps, r
               time={time[activeIndex]}
               value={value}
               tableData={endTableData}
+              internalYear={year}
               {...panelContentProps}
             />,
           ]

packages/components/menu/SubMenu.tsx

@@ -201,7 +201,7 @@ const SubTitleMenu: FC<SubMenuWithCustomizeProps> = (props) => {
 
   useRipple(subMenuDom);
 
-  // pupup 导航
+  // popup 导航
   const isPopUp = expandType === 'popup';
   // 当前二级导航激活
   const isActive = checkSubMenuChildrenActive(children, active) || active === value;

packages/components/table/_example/filter-controlled.tsx

@@ -102,8 +102,8 @@ const columns: TableProps['columns'] = [
 // eslint-disable-next-line
 // function IconText(props = {}) {
 //   // 根据不同的 Props，允许定义不同的筛选图标（col, colIndex 在 Table 组件内部已经注入）
-//   const { col, colIndx } = props;
-//   console.log(col, colIndx);
+//   const { col, colIndex } = props;
+//   console.log(col, colIndex);
 //   if (col.colKey === 'email') return <div>EmailIcon</div>;
 //   return <i>Icon</i>;
 // }

packages/components/tree/__tests__/tree.test.tsx

@@ -246,7 +246,7 @@ describe('Tree test', () => {
         ],
       },
     ];
-    it('wehen props.line is customized, it works fine', async () => {
+    it('when props.line is customized, it works fine', async () => {
       const { container } = await renderTreeWithProps({
         data,
         expandAll: true,
@@ -256,7 +256,7 @@ describe('Tree test', () => {
       expect(container.querySelectorAll('.custom-line').length).toBe(6);
     });
 
-    it('wehen props.line is a customized function, it works fine', async () => {
+    it('when props.line is a customized function, it works fine', async () => {
       const line: any = () => <span className="custom-line"></span>;
       const { container } = await renderTreeWithProps({
         data,

packages/tdesign-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tdesign-react",
-  "version": "1.11.8-patch.7",
+  "version": "1.11.8-patch.8",
   "title": "tdesign-react",
   "description": "TDesign Component for React",
   "main": "lib/index.js",