From 43e60c72562202be49b502d7bebee55f217a9d93 Mon Sep 17 00:00:00 2001
From: vagusx <vagusxl@gmail.com>
Date: Fri, 22 Apr 2022 16:57:35 +0800
Subject: [PATCH 1/2] fix: antd issue 35170

---
 docs/examples/controlled.tsx | 30 +++++++++-----
 src/index.tsx                | 78 ++++++++++++++++++++++++++----------
 tests/index.spec.tsx         |  2 +-
 3 files changed, 78 insertions(+), 32 deletions(-)

diff --git a/docs/examples/controlled.tsx b/docs/examples/controlled.tsx
index 80c16c9..ae2f18b 100644
--- a/docs/examples/controlled.tsx
+++ b/docs/examples/controlled.tsx
@@ -13,15 +13,27 @@ export default class Demo extends React.Component<
 
   render() {
     return (
-      <Segmented
-        options={['iOS', 'Android', 'Web3']}
-        value={this.state.value}
-        onChange={(e) =>
-          this.setState({
-            value: e.target.value,
-          })
-        }
-      />
+      <>
+        <Segmented
+          options={['iOS', 'Android', 'Web3']}
+          value={this.state.value}
+          onChange={(e) =>
+            this.setState({
+              value: e.target.value,
+            })
+          }
+        />
+        &nbsp;&nbsp;
+        <Segmented
+          options={['iOS', 'Android', 'Web3']}
+          value={this.state.value}
+          onChange={(e) =>
+            this.setState({
+              value: e.target.value,
+            })
+          }
+        />
+      </>
     );
   }
 }
diff --git a/src/index.tsx b/src/index.tsx
index 6d84985..9af875f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -104,7 +104,7 @@ const InternalSegmentedOption: React.FC<{
 
   return (
     <label
-      className={classNames(`${prefixCls}-item`, className, {
+      className={classNames(className, {
         [`${prefixCls}-item-disabled`]: disabled,
       })}
     >
@@ -155,7 +155,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
     }, [options]);
 
     const [selected, setSelected] = useMergedState(segmentedOptions[0]?.value, {
-      value,
+      value: props.value,
       defaultValue,
     });
 
@@ -163,26 +163,58 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       SegmentedRawOption | undefined
     >(selected);
 
-    const [thumbShow, setThumbShow] = React.useState(false);
+    const latestVisualSelected = React.useRef(visualSelected);
 
-    const calcThumbMoveStatus = (
-      event: React.ChangeEvent<HTMLInputElement>,
-    ) => {
-      const toElement = event.target.closest(`.${prefixCls}-item`);
+    React.useEffect(() => {
+      latestVisualSelected.current = visualSelected;
+    });
+
+    const [thumbShow, setThumbShow] = React.useState(false);
 
-      const fromElement = containerRef.current?.querySelector(
-        `.${prefixCls}-item-selected`,
-      );
+    const doThumbAnimation = React.useCallback(
+      (selectedValue: SegmentedRawOption) => {
+        const segmentedItemIndex = segmentedOptions.findIndex(
+          (n) => n.value === selectedValue,
+        );
 
-      if (fromElement && toElement && thumbMoveStatus.current) {
-        thumbMoveStatus.current.from = calcThumbStyle(
-          fromElement as HTMLElement,
+        // find target element
+        const toElement = containerRef.current?.querySelector(
+          `.${prefixCls}-item:nth-child(${segmentedItemIndex + 1})`,
         );
-        thumbMoveStatus.current.to = calcThumbStyle(toElement as HTMLElement);
 
-        setThumbShow(true);
+        if (toElement) {
+          // find source element
+          const fromElement = containerRef.current?.querySelector(
+            `.${prefixCls}-item-selected`,
+          );
+
+          if (fromElement && toElement && thumbMoveStatus.current) {
+            // calculate for thumb moving animation
+            thumbMoveStatus.current.from = calcThumbStyle(
+              fromElement as HTMLElement,
+            );
+            thumbMoveStatus.current.to = calcThumbStyle(
+              toElement as HTMLElement,
+            );
+
+            // trigger css-motion starts
+            setThumbShow(true);
+          }
+        }
+      },
+      [prefixCls, segmentedOptions],
+    );
+
+    React.useEffect(() => {
+      // Syncing `visualSelected` when `selected` changed
+      // and do thumb animation
+      if (
+        (typeof selected === 'string' || typeof selected === 'number') &&
+        selected !== latestVisualSelected.current
+      ) {
+        doThumbAnimation(selected);
       }
-    };
+    }, [selected]);
 
     const handleChange = (
       event: React.ChangeEvent<HTMLInputElement>,
@@ -192,8 +224,6 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
         return;
       }
 
-      calcThumbMoveStatus(event);
-
       setSelected(val);
 
       if (onChange) {
@@ -275,10 +305,14 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
           <InternalSegmentedOption
             key={segmentedOption.value}
             prefixCls={prefixCls}
-            className={classNames(segmentedOption.className, {
-              [`${prefixCls}-item-selected`]:
-                segmentedOption.value === visualSelected,
-            })}
+            className={classNames(
+              segmentedOption.className,
+              `${prefixCls}-item`,
+              {
+                [`${prefixCls}-item-selected`]:
+                  segmentedOption.value === visualSelected,
+              },
+            )}
             checked={segmentedOption.value === selected}
             onChange={handleChange}
             {...segmentedOption}
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 358b5ee..12a252c 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -163,7 +163,7 @@ describe('rc-segmented', () => {
     expect(wrapper.render()).toMatchSnapshot();
     expect(
       wrapper
-        .find('.rc-segmented-item')
+        .find('label.rc-segmented-item')
         .at(1)
         .hasClass('rc-segmented-item-disabled'),
     ).toBeTruthy();

From ac11587f406460c2896f17d246b42ee5ff5165bb Mon Sep 17 00:00:00 2001
From: vagusx <vagusxl@gmail.com>
Date: Fri, 22 Apr 2022 17:23:52 +0800
Subject: [PATCH 2/2] test: add unit test

---
 src/index.tsx        | 16 ++++++++++------
 tests/index.spec.tsx | 28 ++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 9af875f..9e7b414 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -163,12 +163,6 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       SegmentedRawOption | undefined
     >(selected);
 
-    const latestVisualSelected = React.useRef(visualSelected);
-
-    React.useEffect(() => {
-      latestVisualSelected.current = visualSelected;
-    });
-
     const [thumbShow, setThumbShow] = React.useState(false);
 
     const doThumbAnimation = React.useCallback(
@@ -177,6 +171,10 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
           (n) => n.value === selectedValue,
         );
 
+        if (segmentedItemIndex < 0) {
+          return;
+        }
+
         // find target element
         const toElement = containerRef.current?.querySelector(
           `.${prefixCls}-item:nth-child(${segmentedItemIndex + 1})`,
@@ -205,6 +203,12 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       [prefixCls, segmentedOptions],
     );
 
+    // get latest version of `visualSelected`
+    const latestVisualSelected = React.useRef(visualSelected);
+    React.useEffect(() => {
+      latestVisualSelected.current = visualSelected;
+    });
+
     React.useEffect(() => {
       // Syncing `visualSelected` when `selected` changed
       // and do thumb animation
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 12a252c..3c3b4eb 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -285,6 +285,34 @@ describe('rc-segmented', () => {
       .at(1)
       .simulate('change');
     expect(wrapper.state().value).toBe('Android');
+
+    // change state directly
+    wrapper.find(Demo).setState({ value: 'Web3' });
+
+    // Motion end
+    wrapper.triggerMotionEvent();
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    expect(
+      wrapper.find('.rc-segmented-item-selected').contains('Web3'),
+    ).toBeTruthy();
+
+    // Motion end
+    wrapper.triggerMotionEvent();
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    // change it strangely
+    wrapper.find(Demo).setState({ value: 'Web4' });
+    // invalid changes
+    expect(
+      wrapper.find('.rc-segmented-item-selected').contains('Web3'),
+    ).toBeTruthy();
   });
 
   it('render segmented with CSSMotion', () => {