fix: trigger thumb animation when selected changed (#31)

Author: vagusX

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,
+            })
+          }
+        />
+      </>
     );
   }
 }

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,
     });
 
@@ -165,24 +165,60 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
 
     const [thumbShow, setThumbShow] = React.useState(false);
 
-    const calcThumbMoveStatus = (
-      event: React.ChangeEvent<HTMLInputElement>,
-    ) => {
-      const toElement = event.target.closest(`.${prefixCls}-item`);
+    const doThumbAnimation = React.useCallback(
+      (selectedValue: SegmentedRawOption) => {
+        const segmentedItemIndex = segmentedOptions.findIndex(
+          (n) => n.value === selectedValue,
+        );
 
-      const fromElement = containerRef.current?.querySelector(
-        `.${prefixCls}-item-selected`,
-      );
+        if (segmentedItemIndex < 0) {
+          return;
+        }
 
-      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],
+    );
+
+    // 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
+      if (
+        (typeof selected === 'string' || typeof selected === 'number') &&
+        selected !== latestVisualSelected.current
+      ) {
+        doThumbAnimation(selected);
       }
-    };
+    }, [selected]);
 
     const handleChange = (
       event: React.ChangeEvent<HTMLInputElement>,
@@ -192,8 +228,6 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
         return;
       }
 
-      calcThumbMoveStatus(event);
-
       setSelected(val);
 
       if (onChange) {
@@ -275,10 +309,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}

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();
@@ -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', () => {