fix(components): 修复 Calendar 在有外部 month 时仍然会被内部 value 改变的问题

js-tool-pack · Jan 13, 2024 · 7dde9cb · 7dde9cb
1 parent 24abced
commit 7dde9cb
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 7 deletions.
diff --git a/packages/components/src/calendar/Calendar.tsx b/packages/components/src/calendar/Calendar.tsx
@@ -38,7 +38,10 @@ export const Calendar: React.FC<CalendarProps> = React.forwardRef<
     outerMonth,
     (v) => v || getStartOfMonth(value || today || new Date()),
   );
-  useWatch(valueRef.current, (v) => v && setMonth(getStartOfMonth(v)));
+  useWatch(
+    valueRef.current,
+    (v) => v && !outerMonth && setMonth(getStartOfMonth(v)),
+  );
 
   return (
     <div

diff --git a/packages/components/src/calendar/__tests__/Calendar.test.tsx b/packages/components/src/calendar/__tests__/Calendar.test.tsx
@@ -1,5 +1,6 @@
+import { fireEvent, render, act } from '@testing-library/react';
 import { getClassNames } from '@tool-pack/basic';
-import { render } from '@testing-library/react';
+import { $$, $ } from '~/select/__tests__/utils';
 import { testAttrs } from '~/testAttrs';
 import { Calendar } from '..';
 
@@ -42,4 +43,36 @@ describe('Calendar', () => {
       ).container.firstChild,
     ).toMatchSnapshot();
   });
+
+  it('在没有外部 month 时，内部 value 改变应该改变 month', () => {
+    jest.useFakeTimers();
+
+    render(<Calendar value={new Date(2023, 11, 18)} />);
+
+    expect($('.t-calendar-cell')).toHaveTextContent('26');
+    expect($$('.t-calendar-cell')[41]).toHaveTextContent('6');
+
+    fireEvent.click($('.t-calendar-cell--next-month')!);
+    act(() => jest.advanceTimersByTime(1));
+
+    expect($('.t-calendar-cell')).toHaveTextContent('31');
+    expect($$('.t-calendar-cell')[41]).toHaveTextContent('10');
+  });
+
+  it('在有外部 month 时，内部 value 改变不应该改变 month', () => {
+    jest.useFakeTimers();
+
+    render(
+      <Calendar value={new Date(2023, 11, 18)} month={new Date(2023, 11, 1)} />,
+    );
+
+    expect($('.t-calendar-cell')).toHaveTextContent('26');
+    expect($$('.t-calendar-cell')[41]).toHaveTextContent('6');
+
+    fireEvent.click($('.t-calendar-cell--next-month')!);
+    act(() => jest.advanceTimersByTime(1));
+
+    expect($('.t-calendar-cell')).toHaveTextContent('26');
+    expect($$('.t-calendar-cell')[41]).toHaveTextContent('6');
+  });
 });
diff --git a/packages/components/src/calendar/index.scss b/packages/components/src/calendar/index.scss
@@ -9,9 +9,10 @@ $t: #{Name.$calendar}-table;
   --t-calendar-table-padding: 12px 0 35px;
   --t-calendar-cell-height: 80px;
   --t-calendar-cell-bg: unset;
-  --t-calendar-cell-active-bg: var(--t-color-primary-l-7);
+  --t-calendar-cell-active-bg: var(--t-color-primary-l-3);
   --t-calendar-cell-color: unset;
-  --t-calendar-cell-active-color: var(--t-color-primary-l-2);
+  --t-calendar-cell-active-color: white;
+  --t-calendar-cell-today-color: var(--t-color-primary-l-2);
 }
 
 // .#{$r} {
@@ -31,11 +32,11 @@ $t: #{Name.$calendar}-table;
       --t-calendar-cell-active-bg: var(--t-color-info-l-7);
     }
   }
-  &--today,
-  &--active {
-    --t-calendar-cell-color: var(--t-calendar-cell-active-color);
+  &--today {
+    --t-calendar-cell-color: var(--t-calendar-cell-today-color);
   }
   &--active {
+    --t-calendar-cell-color: var(--t-calendar-cell-active-color);
     --t-calendar-cell-bg: var(--t-calendar-cell-active-bg);
   }
   &:not(&--disabled, &--active) {