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} {
@@ -22,8 +28,7 @@
     position: relative;
     display: flex;
     align-items: stretch;
-    justify-items: flex-start;
-
+    justify-content: flex-start;
     width: 100%;
     border-radius: 2px;
   }
@@ -32,19 +37,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 +64,60 @@
       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;
+    padding: 4px 0;
+    transition: transform @transition-duration @transition-timing-function,
+      width @transition-duration @transition-timing-function;
+  }
+
+  &-group {
+    flex-direction: row;
+  }
+
+  &-thumb {
     width: 0;
     height: 100%;
-    padding: 4px 0;
   }
 
-  // transition effect when `enter-active`
+  &-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;
+    }
+  }
+
+  // disabled styles
+  &-disabled &-item,
+  &-disabled &-item:hover,
+  &-disabled &-item:focus {
+    .segmented-disabled-item();
+  }
+
   &-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
+          position="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 @@ type ThumbReact = {
   left: number;
   right: number;
   width: number;
+  top: number;
+  bottom: number;
+  height: number;
 } | null;
 
 export interface MotionThumbInterface {
@@ -20,23 +23,52 @@ export interface MotionThumbInterface {
   onMotionStart: VoidFunction;
   onMotionEnd: VoidFunction;
   direction?: 'ltr' | 'rtl';
+  position?: 'horizontal' | 'vertical';
 }
 
 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;
+  position: 'horizontal' | 'vertical',
+): 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,
+  };
 
-const toPX = (value: number) =>
+  if (position === 'vertical') {
+    return {
+      left: 0,
+      right: 0,
+      width: 0,
+      top: style.top,
+      bottom: style.bottom,
+      height: style.height,
+    };
+  }
+
+  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,19 +81,17 @@ export default function MotionThumb(props: MotionThumbInterface) {
     onMotionStart,
     onMotionEnd,
     direction,
+    position = 'horizontal',
   } = props;
 
   const thumbRef = React.useRef<HTMLDivElement>(null);
   const [prevValue, setPrevValue] = React.useState(value);
 
-  // =========================== Effect ===========================
   const findValueElement = (val: SegmentedValue) => {
     const index = getValueIndex(val);
-
     const ele = containerRef.current?.querySelectorAll<HTMLDivElement>(
       `.${prefixCls}-item`,
     )[index];
-
     return ele?.offsetParent && ele;
   };
 
@@ -73,8 +103,8 @@ export default function MotionThumb(props: MotionThumbInterface) {
       const prev = findValueElement(prevValue);
       const next = findValueElement(value);
 
-      const calcPrevStyle = calcThumbStyle(prev);
-      const calcNextStyle = calcThumbStyle(next);
+      const calcPrevStyle = calcThumbStyle(prev, position);
+      const calcNextStyle = calcThumbStyle(next, position);
 
       setPrevValue(value);
       setPrevStyle(calcPrevStyle);
@@ -90,40 +120,44 @@ export default function MotionThumb(props: MotionThumbInterface) {
 
   const thumbStart = React.useMemo(
     () =>
-      direction === 'rtl'
-        ? toPX(-(prevStyle?.right as number))
-        : toPX(prevStyle?.left as number),
-    [direction, prevStyle],
+      position === 'vertical'
+        ? toPX(prevStyle?.top ?? 0)
+        : toPX(prevStyle?.left ?? 0),
+    [position, prevStyle],
   );
+
   const thumbActive = React.useMemo(
     () =>
-      direction === 'rtl'
-        ? toPX(-(nextStyle?.right as number))
-        : toPX(nextStyle?.left as number),
-    [direction, nextStyle],
+      position === 'vertical'
+        ? toPX(nextStyle?.top ?? 0)
+        : toPX(nextStyle?.left ?? 0),
+    [position, 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 = () => ({
+    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 onVisibleChanged = () => {
     setPrevStyle(null);
     setNextStyle(null);
     onMotionEnd();
   };
 
-  // =========================== Render ===========================
-  // No need motion when nothing exist in queue
   if (!prevStyle || !nextStyle) {
     return null;
   }
@@ -144,13 +178,20 @@ export default function MotionThumb(props: MotionThumbInterface) {
           '--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
         const motionProps = {
           ref: composeRef(thumbRef, ref),
           style: mergedStyle,
-          className: classNames(`${prefixCls}-thumb`, motionClassName),
+          className: classNames(
+            `${prefixCls}-thumb`,
+            `${prefixCls}-${position}-thumb`,
+            motionClassName,
+          ),
         };
 
         if (process.env.NODE_ENV === 'test') {