From 6e517eab0bef06db4fa1405950e7a274604818ac Mon Sep 17 00:00:00 2001
From: qiuxchao <2915241235@qq.com>
Date: Mon, 29 May 2023 23:33:10 +0800
Subject: [PATCH] fix: Controlled mode, do not select the first one by default

---
 docs/demo/controlled.tsx | 15 +++++++++++++--
 src/MotionThumb.tsx      | 21 +++++++++++++--------
 src/index.tsx            | 11 +++++++----
 3 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/docs/demo/controlled.tsx b/docs/demo/controlled.tsx
index 2546819..ccc41d2 100644
--- a/docs/demo/controlled.tsx
+++ b/docs/demo/controlled.tsx
@@ -5,10 +5,11 @@ import type { SegmentedValue } from 'rc-segmented';
 
 export default class Demo extends React.Component<
   unknown,
-  { value: SegmentedValue }
+  { value: SegmentedValue; value2?: SegmentedValue }
 > {
   state = {
     value: 'Web3',
+    value2: undefined,
   };
 
   render() {
@@ -23,7 +24,7 @@ export default class Demo extends React.Component<
             })
           }
         />
-        &nbsp;&nbsp;
+        &nbsp;
         <Segmented
           options={['iOS', 'Android', 'Web3']}
           value={this.state.value}
@@ -33,6 +34,16 @@ export default class Demo extends React.Component<
             })
           }
         />
+        &nbsp;
+        <Segmented
+          options={['iOS', 'Android', 'Web3']}
+          value={this.state.value2}
+          onChange={(value2) =>
+            this.setState({
+              value2,
+            })
+          }
+        />
       </React.StrictMode>
     );
   }
diff --git a/src/MotionThumb.tsx b/src/MotionThumb.tsx
index a2e26cc..4cdf769 100644
--- a/src/MotionThumb.tsx
+++ b/src/MotionThumb.tsx
@@ -13,7 +13,7 @@ type ThumbReact = {
 
 export interface MotionThumbInterface {
   containerRef: React.RefObject<HTMLDivElement>;
-  value: SegmentedValue;
+  value?: SegmentedValue;
   getValueIndex: (value: SegmentedValue) => number;
   prefixCls: string;
   motionName: string;
@@ -55,7 +55,8 @@ export default function MotionThumb(props: MotionThumbInterface) {
   const [prevValue, setPrevValue] = React.useState(value);
 
   // =========================== Effect ===========================
-  const findValueElement = (val: SegmentedValue) => {
+  const findValueElement = (val?: SegmentedValue) => {
+    if (!val) return null;
     const index = getValueIndex(val);
 
     const ele = containerRef.current?.querySelectorAll<HTMLDivElement>(
@@ -90,16 +91,20 @@ export default function MotionThumb(props: MotionThumbInterface) {
 
   const thumbStart = React.useMemo(
     () =>
-      direction === 'rtl'
-        ? toPX(-(prevStyle?.right as number))
-        : toPX(prevStyle?.left as number),
+      prevStyle
+        ? direction === 'rtl'
+          ? toPX(-(prevStyle?.right as number))
+          : toPX(prevStyle?.left as number)
+        : 'auto',
     [direction, prevStyle],
   );
   const thumbActive = React.useMemo(
     () =>
-      direction === 'rtl'
-        ? toPX(-(nextStyle?.right as number))
-        : toPX(nextStyle?.left as number),
+      nextStyle
+        ? direction === 'rtl'
+          ? toPX(-(nextStyle?.right as number))
+          : toPX(nextStyle?.left as number)
+        : 'auto',
     [direction, nextStyle],
   );
 
diff --git a/src/index.tsx b/src/index.tsx
index 2541a6c..0c0bcaf 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -142,10 +142,13 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
 
     // Note: We should not auto switch value when value not exist in options
     // which may break single source of truth.
-    const [rawValue, setRawValue] = useMergedState(segmentedOptions[0]?.value, {
-      value,
-      defaultValue,
-    });
+    const [rawValue, setRawValue] = useMergedState(
+      props.hasOwnProperty('value') ? value : segmentedOptions[0]?.value,
+      {
+        value,
+        defaultValue,
+      },
+    );
 
     // ======================= Change ========================
     const [thumbShow, setThumbShow] = React.useState(false);