feat: 优化代码

Author: 梁朝飞

assets/index.less

@@ -27,6 +27,7 @@
   &-group {
     position: relative;
     display: flex;
+    flex-direction: row;
     align-items: stretch;
     justify-content: flex-start;
     width: 100%;
@@ -74,37 +75,28 @@
   &-thumb {
     .segmented-item-selected();
     position: absolute;
+    width: 0;
+    height: 100%;
     padding: 4px 0;
     transition: transform @transition-duration @transition-timing-function,
       width @transition-duration @transition-timing-function;
   }
 
-  &-group {
-    flex-direction: row;
+  &-vertical &-group {
+    flex-direction: column;
   }
 
-  &-thumb {
-    width: 0;
-    height: 100%;
+  &-vertical &-item {
+    width: 100%;
+    text-align: left;
   }
 
-  &-vertical {
-    &-group {
-      flex-direction: column;
-    }
-
-    &-item {
-      width: 100%;
-      text-align: left;
-    }
-
-    &-thumb {
-      width: 100%;
-      height: 0;
-      padding: 0 4px;
-      transition: transform @transition-duration @transition-timing-function,
-        height @transition-duration @transition-timing-function;
-    }
+  &-vertical &-thumb {
+    width: 100%;
+    height: 0;
+    padding: 0 4px;
+    transition: transform @transition-duration @transition-timing-function,
+      height @transition-duration @transition-timing-function;
   }
 
   // disabled styles

docs/demo/basic.tsx

@@ -13,7 +13,7 @@ export default function App() {
       </div>
       <div className="wrapper">
         <Segmented
-          position="vertical"
+          mode="vertical"
           options={['iOS', 'Android', 'Web']}
           onChange={(value) => console.log(value, typeof value)}
         />

src/MotionThumb.tsx

@@ -23,12 +23,12 @@ export interface MotionThumbInterface {
   onMotionStart: VoidFunction;
   onMotionEnd: VoidFunction;
   direction?: 'ltr' | 'rtl';
-  position?: 'horizontal' | 'vertical';
+  mode?: 'horizontal' | 'vertical';
 }
 
 const calcThumbStyle = (
   targetElement: HTMLElement | null | undefined,
-  position: 'horizontal' | 'vertical',
+  mode: 'horizontal' | 'vertical',
 ): ThumbReact => {
   if (!targetElement) return null;
 
@@ -47,7 +47,7 @@ const calcThumbStyle = (
     height: targetElement.clientHeight,
   };
 
-  if (position === 'vertical') {
+  if (mode === 'vertical') {
     return {
       left: 0,
       right: 0,
@@ -81,7 +81,7 @@ export default function MotionThumb(props: MotionThumbInterface) {
     onMotionStart,
     onMotionEnd,
     direction,
-    position = 'horizontal',
+    mode = 'horizontal',
   } = props;
 
   const thumbRef = React.useRef<HTMLDivElement>(null);
@@ -103,8 +103,8 @@ export default function MotionThumb(props: MotionThumbInterface) {
       const prev = findValueElement(prevValue);
       const next = findValueElement(value);
 
-      const calcPrevStyle = calcThumbStyle(prev, position);
-      const calcNextStyle = calcThumbStyle(next, position);
+      const calcPrevStyle = calcThumbStyle(prev, mode);
+      const calcNextStyle = calcThumbStyle(next, mode);
 
       setPrevValue(value);
       setPrevStyle(calcPrevStyle);
@@ -120,37 +120,45 @@ export default function MotionThumb(props: MotionThumbInterface) {
 
   const thumbStart = React.useMemo(
     () =>
-      position === 'vertical'
+      mode === 'vertical'
         ? toPX(prevStyle?.top ?? 0)
-        : toPX(prevStyle?.left ?? 0),
-    [position, prevStyle],
+        : direction === 'rtl'
+        ? toPX(-(prevStyle?.right as number))
+        : toPX(prevStyle?.left as number),
+    [mode, direction, prevStyle],
   );
 
   const thumbActive = React.useMemo(
     () =>
-      position === 'vertical'
+      mode === 'vertical'
         ? toPX(nextStyle?.top ?? 0)
-        : toPX(nextStyle?.left ?? 0),
-    [position, nextStyle],
+        : direction === 'rtl'
+        ? toPX(-(nextStyle?.right as number))
+        : toPX(nextStyle?.left as number),
+    [mode, direction, nextStyle],
   );
 
-  const onAppearStart = () => ({
-    transform: `translate${
-      position === 'vertical' ? 'Y' : 'X'
-    }(var(--thumb-start-${position === 'vertical' ? 'top' : 'left'}))`,
-    [position === 'vertical' ? 'height' : 'width']: `var(--thumb-start-${
-      position === 'vertical' ? 'height' : 'width'
-    })`,
-  });
-
-  const onAppearActive = () => ({
-    transform: `translate${
-      position === 'vertical' ? 'Y' : 'X'
-    }(var(--thumb-active-${position === 'vertical' ? 'top' : 'left'}))`,
-    [position === 'vertical' ? 'height' : 'width']: `var(--thumb-active-${
-      position === 'vertical' ? 'height' : 'width'
-    })`,
-  });
+  const onAppearStart = () =>
+    mode === 'vertical'
+      ? {
+          transform: 'translateY(var(--thumb-start-top))',
+          height: 'var(--thumb-start-height)',
+        }
+      : {
+          transform: 'translateX(var(--thumb-start-left))',
+          width: 'var(--thumb-start-width)',
+        };
+
+  const onAppearActive = () =>
+    mode === 'vertical'
+      ? {
+          transform: 'translateY(var(--thumb-active-top))',
+          height: 'var(--thumb-active-height)',
+        }
+      : {
+          transform: 'translateX(var(--thumb-active-left))',
+          width: 'var(--thumb-active-width)',
+        };
 
   const onVisibleChanged = () => {
     setPrevStyle(null);
@@ -187,11 +195,7 @@ export default function MotionThumb(props: MotionThumbInterface) {
         const motionProps = {
           ref: composeRef(thumbRef, ref),
           style: mergedStyle,
-          className: classNames(
-            `${prefixCls}-thumb`,
-            `${prefixCls}-${position}-thumb`,
-            motionClassName,
-          ),
+          className: classNames(`${prefixCls}-thumb`, motionClassName),
         };
 
         if (process.env.NODE_ENV === 'test') {

src/index.tsx

@@ -15,6 +15,9 @@ export interface SegmentedLabeledOption<ValueType = SegmentedRawOption> {
   disabled?: boolean;
   label: React.ReactNode;
   value: ValueType;
+  /**
+   * html `title` property for label
+   */
   title?: string;
 }
 
@@ -36,7 +39,7 @@ export interface SegmentedProps<ValueType = SegmentedValue>
   prefixCls?: string;
   direction?: 'ltr' | 'rtl';
   motionName?: string;
-  position?: 'horizontal' | 'vertical'; // Add position prop
+  mode?: 'horizontal' | 'vertical'; // Add mode prop
 }
 
 function getValidTitle(option: SegmentedLabeledOption) {
@@ -124,7 +127,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
     const {
       prefixCls = 'rc-segmented',
       direction,
-      position = 'horizontal', // Default to 'horizontal'
+      mode,
       options = [],
       disabled,
       defaultValue,
@@ -175,20 +178,15 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
           {
             [`${prefixCls}-rtl`]: direction === 'rtl',
             [`${prefixCls}-disabled`]: disabled,
-            [`${prefixCls}-vertical`]: position === 'vertical', // Apply vertical class if position is 'vertical'
+            [`${prefixCls}-vertical`]: mode === 'vertical', // Apply vertical class if mode is 'vertical'
           },
           className,
         )}
         ref={mergedRef}
       >
-        <div
-          className={classNames(
-            `${prefixCls}-group`,
-            `${prefixCls}-${position}-group`,
-          )}
-        >
+        <div className={classNames(`${prefixCls}-group`)}>
           <MotionThumb
-            position={position}
+            mode={mode}
             prefixCls={prefixCls}
             value={rawValue}
             containerRef={containerRef}