feat: 增加单测

Author: 梁朝飞

docs/demo/basic.tsx

@@ -13,7 +13,7 @@ export default function App() {
       </div>
       <div className="wrapper">
         <Segmented
-          mode="vertical"
+          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';
-  mode?: 'horizontal' | 'vertical';
+  vertical?: boolean;
 }
 
 const calcThumbStyle = (
   targetElement: HTMLElement | null | undefined,
-  mode: 'horizontal' | 'vertical',
+  vertical?: boolean,
 ): ThumbReact => {
   if (!targetElement) return null;
 
@@ -47,7 +47,7 @@ const calcThumbStyle = (
     height: targetElement.clientHeight,
   };
 
-  if (mode === 'vertical') {
+  if (vertical) {
     return {
       left: 0,
       right: 0,
@@ -81,7 +81,7 @@ export default function MotionThumb(props: MotionThumbInterface) {
     onMotionStart,
     onMotionEnd,
     direction,
-    mode = 'horizontal',
+    vertical = false,
   } = 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, mode);
-      const calcNextStyle = calcThumbStyle(next, mode);
+      const calcPrevStyle = calcThumbStyle(prev, vertical);
+      const calcNextStyle = calcThumbStyle(next, vertical);
 
       setPrevValue(value);
       setPrevStyle(calcPrevStyle);
@@ -120,26 +120,26 @@ export default function MotionThumb(props: MotionThumbInterface) {
 
   const thumbStart = React.useMemo(
     () =>
-      mode === 'vertical'
+      vertical
         ? toPX(prevStyle?.top ?? 0)
         : direction === 'rtl'
         ? toPX(-(prevStyle?.right as number))
         : toPX(prevStyle?.left as number),
-    [mode, direction, prevStyle],
+    [vertical, direction, prevStyle],
   );
 
   const thumbActive = React.useMemo(
     () =>
-      mode === 'vertical'
+      vertical
         ? toPX(nextStyle?.top ?? 0)
         : direction === 'rtl'
         ? toPX(-(nextStyle?.right as number))
         : toPX(nextStyle?.left as number),
-    [mode, direction, nextStyle],
+    [vertical, direction, nextStyle],
   );
 
   const onAppearStart = () =>
-    mode === 'vertical'
+    vertical
       ? {
           transform: 'translateY(var(--thumb-start-top))',
           height: 'var(--thumb-start-height)',
@@ -150,7 +150,7 @@ export default function MotionThumb(props: MotionThumbInterface) {
         };
 
   const onAppearActive = () =>
-    mode === 'vertical'
+    vertical
       ? {
           transform: 'translateY(var(--thumb-active-top))',
           height: 'var(--thumb-active-height)',

src/index.tsx

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

tests/__snapshots__/index.test.tsx.snap

@@ -699,3 +699,65 @@ exports[`rc-segmented render segmented: disabled 1`] = `
   </div>
 </div>
 `;
+
+exports[`rc-segmented should render vertical segmented 1`] = `
+<div
+  aria-label="segmented control"
+  class="rc-segmented rc-segmented-vertical"
+  role="listbox"
+>
+  <div
+    class="rc-segmented-group"
+  >
+    <label
+      class="rc-segmented-item rc-segmented-item-selected"
+    >
+      <input
+        checked=""
+        class="rc-segmented-item-input"
+        type="radio"
+      />
+      <div
+        aria-selected="true"
+        class="rc-segmented-item-label"
+        role="option"
+        title="iOS"
+      >
+        iOS
+      </div>
+    </label>
+    <label
+      class="rc-segmented-item"
+    >
+      <input
+        class="rc-segmented-item-input"
+        type="radio"
+      />
+      <div
+        aria-selected="false"
+        class="rc-segmented-item-label"
+        role="option"
+        title="Android"
+      >
+        Android
+      </div>
+    </label>
+    <label
+      class="rc-segmented-item"
+    >
+      <input
+        class="rc-segmented-item-input"
+        type="radio"
+      />
+      <div
+        aria-selected="false"
+        class="rc-segmented-item-label"
+        role="option"
+        title="Web"
+      >
+        Web
+      </div>
+    </label>
+  </div>
+</div>
+`;

tests/index.test.tsx

@@ -555,4 +555,16 @@ describe('rc-segmented', () => {
 
     offsetParentSpy.mockRestore();
   });
+
+  it('should render vertical segmented', () => {
+    const { container, asFragment } = render(
+      <Segmented options={['iOS', 'Android', 'Web']} vertical />,
+    );
+
+    expect(asFragment().firstChild).toMatchSnapshot();
+    expect(container.querySelector('.rc-segmented')).toHaveClass(
+      'rc-segmented-vertical',
+    );
+    expectMatchChecked(container, [true, false, false]);
+  });
 });