Brush storybook diff (#4520)

src/cartesian/Brush.tsx

@@ -501,6 +501,24 @@ class BrushWithState extends PureComponent<BrushWithStateProps, State> {
       };
     }
 
+    if (
+      !prevState.isSlideMoving &&
+      !prevState.isTravellerMoving &&
+      !prevState.isTravellerFocused &&
+      !prevState.isTextActive
+    ) {
+      /*
+       * If the startIndex and endIndex are controlled from the outside,
+       * we need to keep the startX and end up to date.
+       * Also we do not want to do that while user is interacting in the brush,
+       * because this will trigger re-render and interrupt the drag&drop.
+       */
+      return {
+        startX: prevState.scale(nextProps.startIndex),
+        endX: prevState.scale(nextProps.endIndex),
+      };
+    }
+
     return null;
   }
 
@@ -844,11 +862,9 @@ function BrushInternal(props: Props) {
   const onChangeFromProps = props.onChange;
   const { startIndex: startIndexFromProps, endIndex: endIndexFromProps } = props;
   useEffect(() => {
-    const resolvedStartIndex = startIndexFromProps ?? startIndex;
-    const resolvedEndIndex = endIndexFromProps ?? endIndex;
     // start and end index can be controlled from props, and we need them to stay up-to-date in the Redux state too
-    if (resolvedStartIndex !== startIndex || resolvedEndIndex !== endIndex) {
-      dispatch(setDataStartEndIndexes({ startIndex: resolvedStartIndex, endIndex: resolvedEndIndex }));
+    if (startIndexFromProps !== startIndex || endIndexFromProps !== endIndex) {
+      dispatch(setDataStartEndIndexes({ startIndex: startIndexFromProps, endIndex: endIndexFromProps }));
     }
   }, [dispatch, startIndexFromProps, endIndexFromProps, startIndex, endIndex]);
   const onChange = useCallback(

src/state/chartDataSlice.ts

@@ -27,6 +27,8 @@ const initialState: ChartDataState = {
   dataEndIndex: 0,
 };
 
+type BrushStartEndIndexActionPayload = Partial<BrushStartEndIndex>;
+
 const chartDataSlice = createSlice({
   name: 'chartData',
   initialState,
@@ -38,9 +40,14 @@ const chartDataSlice = createSlice({
         state.dataEndIndex = action.payload.length - 1;
       }
     },
-    setDataStartEndIndexes(state, action: PayloadAction<BrushStartEndIndex>) {
-      state.dataStartIndex = action.payload.startIndex;
-      state.dataEndIndex = action.payload.endIndex;
+    setDataStartEndIndexes(state, action: PayloadAction<BrushStartEndIndexActionPayload>) {
+      const { startIndex, endIndex } = action.payload;
+      if (startIndex != null) {
+        state.dataStartIndex = startIndex;
+      }
+      if (endIndex != null) {
+        state.dataEndIndex = endIndex;
+      }
     },
   },
   /* eslint-enable no-param-reassign */

storybook/stories/Examples/cartesian/Brush/Brush.stories.tsx

@@ -1,4 +1,3 @@
-import { expect, within, userEvent } from '@storybook/test';
 import React, { useState } from 'react';
 import {
   ComposedChart,
@@ -21,8 +20,8 @@ export default {
 
 export const ControlledBrush = {
   render: () => {
-    const [startIndex, setStartIndex] = useState<number | undefined>(3);
-    const [endIndex, setEndIndex] = useState<number | undefined>(pageData.length - 1);
+    const [startIndex, setStartIndex] = useState<number | undefined>(2);
+    const [endIndex, setEndIndex] = useState<number | undefined>(5);
 
     return (
       <>
@@ -61,24 +60,6 @@ export const ControlledBrush = {
       </>
     );
   },
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
-    const user = userEvent.setup();
-    const { getByLabelText } = within(canvasElement);
-
-    const startIndexInput = getByLabelText<HTMLInputElement>('startIndex');
-    const endIndexInput = getByLabelText<HTMLInputElement>('endIndex');
-
-    await user.clear(startIndexInput);
-    await user.type(startIndexInput, '2');
-    await user.clear(endIndexInput);
-    await user.type(endIndexInput, '5');
-
-    const brushTexts = document.getElementsByClassName('recharts-brush-texts').item(0).children;
-    expect(brushTexts.item(0)).toBeInTheDocument();
-
-    expect(brushTexts.item(0).textContent).toContain('2');
-    expect(brushTexts.item(1).textContent).toContain('5');
-  },
 };
 
 export const PanoramicBrush = {

test/cartesian/Brush.spec.tsx

@@ -342,7 +342,7 @@ describe('<Brush />', () => {
       await user.clear(endIndexInput);
       await user.type(endIndexInput, '5');
 
-      const brushTexts = container.getElementsByClassName('recharts-brush-texts').item(0)!.children;
+      const brushTexts = container.getElementsByClassName('recharts-brush-texts').item(0).children;
       expect(brushTexts.item(0)).toBeInTheDocument();
 
       expect(brushTexts.item(0)?.textContent).toContain('2');