feat: add position props

assets/index.less

@@ -1,16 +1,22 @@
 @segmented-prefix-cls: rc-segmented;
 
+@disabled-color: fade(#000, 25%);
+@selected-bg-color: white;
+@text-color: #262626;
+@transition-duration: 0.3s;
+@transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+
 .segmented-disabled-item() {
   &,
   &:hover,
   &:focus {
-    color: fade(#000, 25%);
+    color: @disabled-color;
     cursor: not-allowed;
   }
 }
 
 .segmented-item-selected() {
-  background-color: white;
+  background-color: @selected-bg-color;
 }
 
 .@{segmented-prefix-cls} {
@@ -21,9 +27,9 @@
   &-group {
     position: relative;
     display: flex;
+    flex-direction: row;
     align-items: stretch;
-    justify-items: flex-start;
-
+    justify-content: flex-start;
     width: 100%;
     border-radius: 2px;
   }
@@ -32,19 +38,18 @@
     position: relative;
     min-height: 28px;
     padding: 4px 10px;
-
     color: fade(#000, 85%);
     text-align: center;
     cursor: pointer;
 
     &-selected {
       .segmented-item-selected();
-      color: #262626;
+      color: @text-color;
     }
 
     &:hover,
     &:focus {
-      color: #262626;
+      color: @text-color;
     }
 
     &-disabled {
@@ -60,37 +65,51 @@
       position: absolute;
       top: 0;
       left: 0;
-
       width: 0;
       height: 0;
       opacity: 0;
       pointer-events: none;
     }
   }
 
-  // disabled styles
-  &-disabled &-item,
-  &-disabled &-item:hover,
-  &-disabled &-item:focus {
-    .segmented-disabled-item();
-  }
-
   &-thumb {
     .segmented-item-selected();
-
     position: absolute;
-    // top: 0;
-    // left: 0;
     width: 0;
     height: 100%;
     padding: 4px 0;
+    transition: transform @transition-duration @transition-timing-function,
+      width @transition-duration @transition-timing-function;
+  }
+
+  &-vertical &-group {
+    flex-direction: column;
+  }
+
+  &-vertical &-item {
+    width: 100%;
+    text-align: left;
+  }
+
+  &-vertical &-thumb {
+    width: 100%;
+    height: 0;
+    padding: 0 4px;
+    transition: transform @transition-duration @transition-timing-function,
+      height @transition-duration @transition-timing-function;
+  }
+
+  // disabled styles
+  &-disabled &-item,
+  &-disabled &-item:hover,
+  &-disabled &-item:focus {
+    .segmented-disabled-item();
   }
 
-  // transition effect when `enter-active`
   &-thumb-motion-appear-active,
   &-thumb-motion-enter-active {
-    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
-      width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: transform @transition-duration @transition-timing-function,
+      width @transition-duration @transition-timing-function;
     will-change: transform, width;
   }
 

docs/demo/basic.tsx

@@ -1,6 +1,6 @@
-import '../../assets/style.less';
-import React from 'react';
 import Segmented from 'rc-segmented';
+import React from 'react';
+import '../../assets/style.less';
 
 export default function App() {
   return (
@@ -11,6 +11,13 @@ export default function App() {
           onChange={(value) => console.log(value, typeof value)}
         />
       </div>
+      <div className="wrapper">
+        <Segmented
+          vertical
+          options={['iOS', 'Android', 'Web']}
+          onChange={(value) => console.log(value, typeof value)}
+        />
+      </div>
       <div className="wrapper">
         <Segmented
           options={[13333333333, 157110000, 12110086]}

src/MotionThumb.tsx

@@ -9,6 +9,9 @@
   left: number;
   right: number;
   width: number;
+  top: number;
+  bottom: number;
+  height: number;
 } | null;
 
 export interface MotionThumbInterface {
@@ -20,23 +23,52 @@
   onMotionStart: VoidFunction;
   onMotionEnd: VoidFunction;
   direction?: 'ltr' | 'rtl';
+  vertical?: boolean;
 }
 
 const calcThumbStyle = (
   targetElement: HTMLElement | null | undefined,
-): ThumbReact =>
-  targetElement
-    ? {
-        left: targetElement.offsetLeft,
-        right:
-          (targetElement.parentElement!.clientWidth as number) -
-          targetElement.clientWidth -
-          targetElement.offsetLeft,
-        width: targetElement.clientWidth,
-      }
-    : null;
+  vertical?: boolean,
+): ThumbReact => {
+  if (!targetElement) return null;
+
+  const style: ThumbReact = {
+    left: targetElement.offsetLeft,
+    right:
+      (targetElement.parentElement!.clientWidth as number) -
+      targetElement.clientWidth -
+      targetElement.offsetLeft,
+    width: targetElement.clientWidth,
+    top: targetElement.offsetTop,
+    bottom:
+      (targetElement.parentElement!.clientHeight as number) -
+      targetElement.clientHeight -
+      targetElement.offsetTop,
+    height: targetElement.clientHeight,
+  };
+
+  if (vertical) {
+    return {
+      left: 0,
+      right: 0,
+      width: 0,
+      top: style.top,
+      bottom: style.bottom,
+      height: style.height,
+    };
+  }
 
-const toPX = (value: number) =>
+  return {
+    left: style.left,
+    right: style.right,
+    width: style.width,
+    top: 0,
+    bottom: 0,
+    height: 0,
+  };
+};
+
+const toPX = (value: number | undefined): string | undefined =>
   value !== undefined ? `${value}px` : undefined;
 
 export default function MotionThumb(props: MotionThumbInterface) {
@@ -49,6 +81,7 @@
     onMotionStart,
     onMotionEnd,
     direction,
+    vertical = false,
   } = props;
 
   const thumbRef = React.useRef<HTMLDivElement>(null);
@@ -57,11 +90,9 @@
   // =========================== Effect ===========================
   const findValueElement = (val: SegmentedValue) => {
     const index = getValueIndex(val);
-
     const ele = containerRef.current?.querySelectorAll<HTMLDivElement>(
       `.${prefixCls}-item`,
     )[index];
-
     return ele?.offsetParent && ele;
   };
 
@@ -73,8 +104,8 @@
       const prev = findValueElement(prevValue);
       const next = findValueElement(value);
 
-      const calcPrevStyle = calcThumbStyle(prev);
-      const calcNextStyle = calcThumbStyle(next);
+      const calcPrevStyle = calcThumbStyle(prev, vertical);
+      const calcNextStyle = calcThumbStyle(next, vertical);
 
       setPrevValue(value);
       setPrevStyle(calcPrevStyle);
@@ -90,32 +121,47 @@
 
   const thumbStart = React.useMemo(
     () =>
-      direction === 'rtl'
+      vertical
+        ? toPX(prevStyle?.top ?? 0)
+        : direction === 'rtl'
         ? toPX(-(prevStyle?.right as number))
         : toPX(prevStyle?.left as number),
-    [direction, prevStyle],
+    [vertical, direction, prevStyle],
   );
+
   const thumbActive = React.useMemo(
     () =>
-      direction === 'rtl'
+      vertical
+        ? toPX(nextStyle?.top ?? 0)
+        : direction === 'rtl'
         ? toPX(-(nextStyle?.right as number))
         : toPX(nextStyle?.left as number),
-    [direction, nextStyle],
+    [vertical, direction, nextStyle],
   );
 
   // =========================== Motion ===========================
-  const onAppearStart = () => {
-    return {
-      transform: `translateX(var(--thumb-start-left))`,
-      width: `var(--thumb-start-width)`,
-    };
-  };
-  const onAppearActive = () => {
-    return {
-      transform: `translateX(var(--thumb-active-left))`,
-      width: `var(--thumb-active-width)`,
-    };
-  };
+  const onAppearStart = () =>
+    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 = () =>
+    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);
     setNextStyle(null);
@@ -144,6 +190,10 @@
           '--thumb-start-width': toPX(prevStyle?.width),
           '--thumb-active-left': thumbActive,
           '--thumb-active-width': toPX(nextStyle?.width),
+          '--thumb-start-top': thumbStart,
+          '--thumb-start-height': toPX(prevStyle?.height),
+          '--thumb-active-top': thumbActive,
+          '--thumb-active-height': toPX(nextStyle?.height),
         } as React.CSSProperties;
 
         // It's little ugly which should be refactor when @umi/test update to latest jsdom

src/index.tsx

@@ -39,6 +39,7 @@ export interface SegmentedProps<ValueType = SegmentedValue>
   prefixCls?: string;
   direction?: 'ltr' | 'rtl';
   motionName?: string;
+  vertical?: boolean;
 }
 
 function getValidTitle(option: SegmentedLabeledOption) {
@@ -56,13 +57,11 @@ function normalizeOptions(options: SegmentedOptions): SegmentedLabeledOption[] {
   return options.map((option) => {
     if (typeof option === 'object' && option !== null) {
       const validTitle = getValidTitle(option);
-
       return {
         ...option,
         title: validTitle,
       };
     }
-
     return {
       label: option?.toString(),
       title: option?.toString(),
@@ -97,7 +96,6 @@ const InternalSegmentedOption: React.FC<{
     if (disabled) {
       return;
     }
-
     onChange(event, value);
   };
 
@@ -131,6 +129,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
     const {
       prefixCls = 'rc-segmented',
       direction,
+      vertical,
       options = [],
       disabled,
       defaultValue,
@@ -168,9 +167,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       if (disabled) {
         return;
       }
-
       setRawValue(val);
-
       onChange?.(val);
     };
 
@@ -186,13 +183,15 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
           {
             [`${prefixCls}-rtl`]: direction === 'rtl',
             [`${prefixCls}-disabled`]: disabled,
+            [`${prefixCls}-vertical`]: vertical,
           },
           className,
         )}
         ref={mergedRef}
       >
         <div className={`${prefixCls}-group`}>
           <MotionThumb
+            vertical={vertical}
             prefixCls={prefixCls}
             value={rawValue}
             containerRef={containerRef}