fix: transform logic (#38)

assets/index.less

@@ -82,6 +82,7 @@
   }
 
   // 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);

docs/examples/controlled.tsx

@@ -13,7 +13,7 @@ export default class Demo extends React.Component<
 
   render() {
     return (
-      <>
+      <React.StrictMode>
         <Segmented
           options={['iOS', 'Android', 'Web3']}
           value={this.state.value}
@@ -33,7 +33,7 @@ export default class Demo extends React.Component<
             })
           }
         />
-      </>
+      </React.StrictMode>
     );
   }
 }

package.json

@@ -40,8 +40,8 @@
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
     "pretty-quick": "pretty-quick",
-    "test": "father test",
-    "coverage": "father test --coverage"
+    "test": "umi-test",
+    "coverage": "umi-test --coverage"
   },
   "dependencies": {
     "@babel/runtime": "^7.11.1",
@@ -57,9 +57,11 @@
     "@types/react": "^17.0.13",
     "@types/react-dom": "^16.9.0",
     "@umijs/fabric": "^2.0.8",
+    "@umijs/test": "^3.5.23",
     "coveralls": "^3.0.6",
     "cross-env": "^7.0.2",
-    "dumi": "^1.1.0",
+    "cssstyle": "^2.3.0",
+    "dumi": "^1.1.41-rc.0",
     "eslint": "^7.0.0",
     "father": "^2.13.4",
     "father-build": "^1.18.6",

src/MotionThumb.tsx

@@ -0,0 +1,142 @@
+import * as React from 'react';
+import CSSMotion from 'rc-motion';
+import classNames from 'classnames';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import { composeRef } from 'rc-util/lib/ref';
+import type { SegmentedValue } from '.';
+
+type ThumbReact = {
+  left: number;
+  width: number;
+} | null;
+
+export interface MotionThumbInterface {
+  containerRef: React.RefObject<HTMLDivElement>;
+  value: SegmentedValue;
+  getValueIndex: (value: SegmentedValue) => number;
+  prefixCls: string;
+  motionName: string;
+  onMotionStart: VoidFunction;
+  onMotionEnd: VoidFunction;
+}
+
+const calcThumbStyle = (
+  targetElement: HTMLElement | null | undefined,
+): ThumbReact =>
+  targetElement
+    ? {
+        left: targetElement.offsetLeft,
+        width: targetElement.clientWidth,
+      }
+    : null;
+
+const toPX = (value: number) =>
+  value !== undefined ? `${value}px` : undefined;
+
+export default function MotionThumb(props: MotionThumbInterface) {
+  const {
+    prefixCls,
+    containerRef,
+    value,
+    getValueIndex,
+    motionName,
+    onMotionStart,
+    onMotionEnd,
+  } = 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;
+  };
+
+  const [prevStyle, setPrevStyle] = React.useState<ThumbReact>(null);
+  const [nextStyle, setNextStyle] = React.useState<ThumbReact>(null);
+
+  useLayoutEffect(() => {
+    if (prevValue !== value) {
+      const prev = findValueElement(prevValue);
+      const next = findValueElement(value);
+
+      const calcPrevStyle = calcThumbStyle(prev);
+      const calcNextStyle = calcThumbStyle(next);
+
+      setPrevValue(value);
+      setPrevStyle(calcPrevStyle);
+      setNextStyle(calcNextStyle);
+
+      if (prev && next) {
+        onMotionStart();
+      } else {
+        onMotionEnd();
+      }
+    }
+  }, [value]);
+
+  // =========================== 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 onAppearEnd = () => {
+    setPrevStyle(null);
+    setNextStyle(null);
+    onMotionEnd();
+  };
+
+  // =========================== Render ===========================
+  // No need motion when nothing exist in queue
+  if (!prevStyle || !nextStyle) {
+    return null;
+  }
+
+  return (
+    <CSSMotion
+      visible
+      motionName={motionName}
+      motionAppear
+      onAppearStart={onAppearStart}
+      onAppearActive={onAppearActive}
+      onAppearEnd={onAppearEnd}
+    >
+      {({ className: motionClassName, style: motionStyle }, ref) => {
+        const mergedStyle = {
+          ...motionStyle,
+          '--thumb-start-left': toPX(prevStyle?.left),
+          '--thumb-start-width': toPX(prevStyle?.width),
+          '--thumb-active-left': toPX(nextStyle?.left),
+          '--thumb-active-width': toPX(nextStyle?.width),
+        } 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),
+        };
+
+        if (process.env.NODE_ENV === 'test') {
+          (motionProps as any)['data-test-style'] = JSON.stringify(mergedStyle);
+        }
+
+        return <div {...motionProps} />;
+      }}
+    </CSSMotion>
+  );
+}