@bifrostui/react 1.4.5 → 1.4.7-beta.0

package/es/SwipeAction/SwipeAction.js

@@ -0,0 +1,337 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import React, {
+  useImperativeHandle,
+  useRef,
+  useState,
+  useEffect,
+  useMemo
+} from "react";
+import clsx from "clsx";
+import {
+  useTouch,
+  touchEmulator,
+  isMini,
+  getBoundingClientRect,
+  throttle
+} from "@bifrostui/utils";
+import BuiSwipeActionContext from "./SwipeActionContext";
+import {
+  SideTypeEnum,
+  DragPhaseEnum
+} from "./SwipeAction.types";
+import "./SwipeAction.css";
+const classPrefix = "bui-swipe-action";
+const SwipeAction = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    const _a = props, {
+      className,
+      children,
+      rightActions,
+      leftActions,
+      disabled,
+      closeOnClickActionItem = true,
+      closeOnClickContainer = false,
+      onActionsReveal
+    } = _a, others = __objRest(_a, [
+      "className",
+      "children",
+      "rightActions",
+      "leftActions",
+      "disabled",
+      "closeOnClickActionItem",
+      "closeOnClickContainer",
+      "onActionsReveal"
+    ]);
+    const touch = useTouch();
+    const rootRef = useRef(null);
+    const leftRef = useRef(null);
+    const rightRef = useRef(null);
+    const contentRef = useRef(null);
+    const [translateX, setTranslateX] = useState(0);
+    const [isOpen, setIsOpen] = useState(false);
+    const startingX = useRef(0);
+    const currentX = useRef(0);
+    const isDragging = useRef(false);
+    let pretranslateX = 0;
+    let dragPhase = DragPhaseEnum.START;
+    const dragThreshold = 5;
+    const leftWidthCache = useRef(0);
+    const rightWidthCache = useRef(0);
+    const getWidth = (_ref) => {
+      if (!_ref.current)
+        return Promise.resolve(0);
+      return new Promise((resolve) => {
+        if (isMini) {
+          getBoundingClientRect(_ref.current).then((rect) => {
+            if (rect) {
+              resolve(rect.width || 0);
+            }
+          });
+        } else {
+          resolve(_ref.current.offsetWidth);
+        }
+      });
+    };
+    const getLefRefWidth = () => __async(void 0, null, function* () {
+      if (leftRef.current && leftActions && !leftWidthCache.current) {
+        leftWidthCache.current = yield getWidth(leftRef);
+      }
+      return leftWidthCache.current;
+    });
+    const getRightRefWidth = () => __async(void 0, null, function* () {
+      if (rightRef.current && rightActions && !rightWidthCache.current) {
+        rightWidthCache.current = yield getWidth(rightRef);
+      }
+      return rightWidthCache.current;
+    });
+    const initRefWidth = () => {
+      getLefRefWidth();
+      getRightRefWidth();
+    };
+    const handleTouchStart = (e) => {
+      dragPhase = DragPhaseEnum.START;
+      const isMaskEle = e.target.id === "content-mask";
+      if (isDragging.current || disabled || isMaskEle)
+        return;
+      touch.start(e);
+      isDragging.current = true;
+      startingX.current = touch.deltaX.current - translateX;
+    };
+    const handleTouchMove = throttle(
+      (e) => __async(void 0, null, function* () {
+        if (!isDragging.current || disabled)
+          return;
+        if (dragPhase === DragPhaseEnum.START) {
+          dragPhase = DragPhaseEnum.MOVE;
+        }
+        touch.move(e);
+        currentX.current = touch.deltaX.current - startingX.current;
+        if (Math.abs(currentX.current) < dragThreshold)
+          return;
+        const leftWidth = yield getLefRefWidth();
+        const rightWidth = yield getRightRefWidth();
+        currentX.current = Math.max(
+          -rightWidth,
+          Math.min(leftWidth, currentX.current)
+        );
+        setTranslateX(currentX.current);
+      }),
+      100
+    );
+    const emitActionsReveal = (targetX, stop = false) => {
+      const isSpecial = targetX === pretranslateX && targetX !== 0;
+      if (targetX === pretranslateX && !isSpecial || stop)
+        return;
+      let resStr = null;
+      const shouldOpen = targetX > 0 && pretranslateX <= 0 || targetX < 0 && pretranslateX >= 0 || isSpecial;
+      if (shouldOpen) {
+        if (targetX > 0) {
+          resStr = SideTypeEnum.LEFT;
+        } else if (targetX < 0) {
+          resStr = SideTypeEnum.RIGHT;
+        }
+        setIsOpen(true);
+      } else {
+        setIsOpen(false);
+      }
+      if (resStr) {
+        onActionsReveal == null ? void 0 : onActionsReveal({ side: resStr });
+      }
+    };
+    const handleTouchEnd = (e) => __async(void 0, null, function* () {
+      if (!isDragging.current)
+        return;
+      if (dragPhase === DragPhaseEnum.MOVE) {
+        dragPhase = DragPhaseEnum.END;
+      }
+      const leftWidth = yield getLefRefWidth();
+      const rightWidth = yield getRightRefWidth();
+      const threshold = 0.5;
+      let targetX = 0;
+      isDragging.current = false;
+      if (Math.abs(currentX.current) < dragThreshold)
+        return;
+      if (currentX.current > leftWidth * threshold) {
+        targetX = leftWidth;
+      } else if (currentX.current < -rightWidth * threshold) {
+        targetX = -rightWidth;
+      }
+      if (dragPhase === DragPhaseEnum.END || isMini) {
+        emitActionsReveal(targetX);
+        console.log("handleTouchEnd\uFF1A", targetX, e);
+        setTranslateX(targetX);
+        pretranslateX = targetX;
+      }
+      currentX.current = 0;
+    });
+    const close = () => {
+      setTranslateX(0);
+      pretranslateX = 0;
+      setIsOpen(false);
+    };
+    useEffect(() => {
+      initRefWidth();
+      if (!contentRef.current)
+        return;
+      const removeTouchEmulator = touchEmulator(contentRef.current);
+      return () => {
+        removeTouchEmulator();
+      };
+    }, []);
+    useEffect(() => {
+      var _a2, _b, _c, _d;
+      (_a2 = contentRef == null ? void 0 : contentRef.current) == null ? void 0 : _a2.addEventListener("touchstart", handleTouchStart);
+      (_b = contentRef == null ? void 0 : contentRef.current) == null ? void 0 : _b.addEventListener("touchmove", handleTouchMove);
+      (_c = contentRef == null ? void 0 : contentRef.current) == null ? void 0 : _c.addEventListener("touchend", handleTouchEnd);
+      (_d = contentRef == null ? void 0 : contentRef.current) == null ? void 0 : _d.addEventListener("touchcancel", handleTouchEnd);
+      if (!isMini && document) {
+        document.addEventListener("mouseup", handleTouchEnd);
+      }
+      return () => {
+        var _a3, _b2, _c2, _d2;
+        (_a3 = contentRef == null ? void 0 : contentRef.current) == null ? void 0 : _a3.removeEventListener(
+          "touchstart",
+          handleTouchStart
+        );
+        (_b2 = contentRef == null ? void 0 : contentRef.current) == null ? void 0 : _b2.removeEventListener("touchmove", handleTouchMove);
+        (_c2 = contentRef == null ? void 0 : contentRef.current) == null ? void 0 : _c2.removeEventListener("touchend", handleTouchEnd);
+        (_d2 = contentRef == null ? void 0 : contentRef.current) == null ? void 0 : _d2.removeEventListener("touchcancel", handleTouchEnd);
+        if (!isMini && document) {
+          document.removeEventListener("mouseup", handleTouchEnd);
+        }
+      };
+    }, []);
+    useImperativeHandle(ref, () => ({
+      show: (params) => __async(void 0, null, function* () {
+        let targetX = 0;
+        if (params && params.side === SideTypeEnum.RIGHT) {
+          targetX = -(yield getRightRefWidth());
+        } else {
+          targetX = yield getLefRefWidth();
+        }
+        setTranslateX(targetX);
+        pretranslateX = targetX;
+        emitActionsReveal(targetX);
+      }),
+      close,
+      // 获取当前是否打开
+      open: isOpen,
+      ref: rootRef.current
+    }));
+    const outClickHandle = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (translateX !== 0 && closeOnClickContainer) {
+        close();
+      }
+    };
+    const SwipeActionContext = useMemo(
+      () => ({ closeOnClickActionItem, close }),
+      [closeOnClickActionItem]
+    );
+    return /* @__PURE__ */ React.createElement(BuiSwipeActionContext.Provider, { value: SwipeActionContext }, /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadValues({
+        className: clsx(`${classPrefix}`, className),
+        ref: rootRef
+      }, others),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `${classPrefix}-track`,
+          style: {
+            transform: `translate3d(${translateX}px, 0, 0)`
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `${classPrefix}-actions ${classPrefix}-actions-left`,
+            ref: leftRef
+          },
+          leftActions
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `${classPrefix}-content-container`,
+            ref: contentRef,
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
+            onTouchCancel: handleTouchEnd
+          },
+          isOpen && closeOnClickContainer && /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: `${classPrefix}-content-mask`,
+              id: "content-mask",
+              onClick: outClickHandle
+            }
+          ),
+          children
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `${classPrefix}-actions ${classPrefix}-actions-right`,
+            ref: rightRef
+          },
+          rightActions
+        )
+      )
+    ));
+  }
+);
+SwipeAction.displayName = "BuiSwipeAction";
+var SwipeAction_default = SwipeAction;
+export {
+  SwipeAction_default as default
+};

package/es/SwipeAction/SwipeAction.types.d.ts

@@ -0,0 +1,83 @@
+import { OverrideProps, ThemeColor } from '@bifrostui/types';
+import React from 'react';
+export type SwipeActionProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 右侧的操作按钮列表区域
+         */
+        rightActions?: React.ReactNode;
+        /**
+         * 左侧的操作按钮列表区域
+         */
+        leftActions?: React.ReactNode;
+        /**
+         * 是否在点击按钮区自动归位
+         */
+        closeOnClickActionItem?: boolean;
+        /**
+         * 是否在点击其他区域时自动归位
+         */
+        closeOnClickContainer?: boolean;
+        /**
+         * 操作按钮展开时触发
+         */
+        onActionsReveal?: (params: RevealParams) => void;
+        /**
+         * 是否禁用拖动
+         */
+        disabled?: boolean;
+    };
+    defaultComponent: D;
+}, D>;
+interface RevealParams {
+    side: SideTypeEnum | '';
+}
+export type SwipeActionItemProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 颜色风格
+         */
+        color?: ThemeColor | 'vip';
+        /**
+         * id
+         */
+        id?: string | number;
+        /**
+         * 点击事件
+         */
+        onClick?: (e: React.SyntheticEvent, item: {
+            id: string | number;
+            color: ThemeColor | 'vip';
+            text: React.ReactNode;
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export interface BuiSwipeActionContextProps {
+    /**
+     * 是否在点击操作按钮时自动归位
+     */
+    closeOnClickActionItem?: boolean;
+    /**
+     * 关闭函数
+     */
+    close: () => void;
+}
+export type SwipeActionRef = {
+    close: () => void;
+    show: (params?: {
+        side: SideTypeEnum;
+    }) => void;
+    open: boolean;
+    ref?: HTMLDivElement;
+};
+export declare enum SideTypeEnum {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare enum DragPhaseEnum {
+    START = 1,
+    MOVE = 2,
+    END = 3
+}
+export {};

package/es/SwipeAction/SwipeAction.types.js

@@ -0,0 +1 @@
+export {};

package/es/SwipeAction/SwipeActionContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BuiSwipeActionContextProps } from './SwipeAction.types';
+declare const BuiSwipeActionContext: import("react").Context<BuiSwipeActionContextProps>;
+export default BuiSwipeActionContext;

package/es/SwipeAction/SwipeActionContext.js

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+const BuiSwipeActionContext = createContext({
+  closeOnClickActionItem: true,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  close: () => {
+  }
+});
+var SwipeActionContext_default = BuiSwipeActionContext;
+export {
+  SwipeActionContext_default as default
+};

package/es/SwipeAction/SwipeActionItem.css

@@ -0,0 +1,31 @@
+.bui-swipe-action-item {
+  padding: 0 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  background: var(--background-button-color);
+  color: #fff;
+  box-sizing: content-box;
+  white-space: nowrap;
+  font-family: var(--bui-font-family);
+}
+.bui-swipe-action-item-primary {
+  background-color: var(--bui-color-primary);
+}
+.bui-swipe-action-item-vip {
+  background-color: var(--bui-color-vip);
+}
+.bui-swipe-action-item-success {
+  background-color: var(--bui-color-success);
+}
+.bui-swipe-action-item-info {
+  background-color: var(--bui-color-info);
+}
+.bui-swipe-action-item-warning {
+  background-color: var(--bui-color-warning);
+}
+.bui-swipe-action-item-danger {
+  background-color: var(--bui-color-danger);
+}

package/es/SwipeAction/SwipeActionItem.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SwipeActionItemProps } from './SwipeAction.types';
+import './SwipeActionItem.less';
+declare const SwipeActionItem: React.ForwardRefExoticComponent<Omit<SwipeActionItemProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SwipeActionItem;

package/es/SwipeAction/SwipeActionItem.js

@@ -0,0 +1,78 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React, { useContext } from "react";
+import clsx from "clsx";
+import BuiSwipeActionContext from "./SwipeActionContext";
+import "./SwipeActionItem.css";
+const prefixCls = "bui-swipe-action-item";
+const SwipeActionItem = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    const _a = props, {
+      className,
+      children,
+      onClick,
+      color = "primary",
+      id = ""
+    } = _a, others = __objRest(_a, [
+      "className",
+      "children",
+      "onClick",
+      "color",
+      "id"
+    ]);
+    const { closeOnClickActionItem, close } = useContext(BuiSwipeActionContext);
+    const onClickHandle = (e) => {
+      e.stopPropagation();
+      if (closeOnClickActionItem) {
+        close == null ? void 0 : close();
+      }
+      onClick == null ? void 0 : onClick(e, {
+        color,
+        id,
+        text: children
+      });
+    };
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadValues({
+        className: clsx(prefixCls, className, {
+          [`${prefixCls}-${color}`]: color
+        }),
+        ref,
+        onClick: onClickHandle
+      }, others),
+      children
+    );
+  }
+);
+SwipeActionItem.displayName = "SwipeActionItem";
+var SwipeActionItem_default = SwipeActionItem;
+export {
+  SwipeActionItem_default as default
+};

package/es/SwipeAction/index.d.ts

@@ -0,0 +1,4 @@
+export * from './SwipeAction.types';
+export { default } from './SwipeAction';
+export { default as SwipeAction } from './SwipeAction';
+export { default as SwipeActionItem } from './SwipeActionItem';

package/es/SwipeAction/index.js

@@ -0,0 +1,9 @@
+export * from "./SwipeAction.types";
+import { default as default2 } from "./SwipeAction";
+import { default as default3 } from "./SwipeAction";
+import { default as default4 } from "./SwipeActionItem";
+export {
+  default3 as SwipeAction,
+  default4 as SwipeActionItem,
+  default2 as default
+};

package/es/Tabs/Tab.js

@@ -36,7 +36,19 @@ import TabsContext from "./TabsContext";
 import "./Tab.css";
 const prefixCls = "bui-tab";
 const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
-  const _a = props, { className, children, index, disabled, onClick } = _a, others = __objRest(_a, ["className", "children", "index", "disabled", "onClick"]);
+  const _a = props, {
+    className,
+    children,
+    index,
+    disabled = false,
+    onClick
+  } = _a, others = __objRest(_a, [
+    "className",
+    "children",
+    "index",
+    "disabled",
+    "onClick"
+  ]);
   const tabsContext = React.useContext(TabsContext);
   const { value, align, triggerChange } = tabsContext;
   return /* @__PURE__ */ React.createElement(
@@ -74,9 +86,6 @@ const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
   );
 });
 Tab.displayName = "BuiTab";
-Tab.defaultProps = {
-  disabled: false
-};
 var Tab_default = Tab;
 export {
   Tab_default as default

package/es/Tabs/Tabs.js

@@ -42,9 +42,10 @@ import React, {
 } from "react";
 import Tab from "./Tab";
 import { TabsContextProvider } from "./TabsContext";
-import bound from "./utils/bound";
+import scrollLeftTo from "./utils/scroll";
 import "./Tabs.css";
 const prefixCls = "bui-tabs";
+const duration = 300;
 const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
   const [active, setActive] = useState("");
@@ -59,14 +60,11 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     leftMaskOpacity: 0,
     rightMaskOpacity: 0
   });
-  const animate = ({ transitionInUse }) => {
+  const getActiveTabElement = () => {
     const container = tabsRef.current;
     if (!container)
-      return;
+      return void 0;
     const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === active);
-    const activeLine = activeLineRef.current;
-    if (!activeLine)
-      return;
     let activeTab;
     if (tabs.length) {
       activeTab = activeIndex > -1 ? container.childNodes[activeIndex + 1] : void 0;
@@ -80,6 +78,25 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
         return [...child.classList].includes("bui-tab-active");
       });
     }
+    return activeTab;
+  };
+  const scrollIntoView = () => {
+    const tabsContainer = tabsRef.current;
+    const activeTab = getActiveTabElement();
+    if (!tabsContainer || !activeTab) {
+      return;
+    }
+    const to = activeTab.offsetLeft - (tabsContainer.offsetWidth - activeTab.offsetWidth) / 2;
+    scrollLeftTo(tabsContainer, to, duration);
+  };
+  const animate = ({ transitionInUse }) => {
+    const container = tabsRef.current;
+    if (!container)
+      return;
+    const activeLine = activeLineRef.current;
+    if (!activeLine)
+      return;
+    const activeTab = getActiveTabElement();
     let activeTabLeft = 0;
     let activeTabWidth = 0;
     let containerWidth = 0;
@@ -102,13 +119,8 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     const maxScrollDistance = containerScrollWidth - containerWidth;
     if (maxScrollDistance <= 0 || !activeTab)
       return;
-    const nextScrollLeft = bound(
-      activeTabLeft - (containerWidth - activeTabWidth) / 2,
-      0,
-      containerScrollWidth - containerWidth
-    );
-    if (tabsRef.current) {
-      tabsRef.current.scrollLeft = nextScrollLeft;
+    if (!isMini) {
+      scrollIntoView();
     }
   };
   useEffect(() => {
@@ -138,7 +150,10 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
           return;
         const scrollLeft = container == null ? void 0 : container.scrollLeft;
         const showLeftMask = scrollLeft > 0;
-        const showRightMask = scrollLeft + container.offsetWidth < container.scrollWidth;
+        const rightRange = Math.abs(
+          container.scrollWidth - (scrollLeft + container.offsetWidth)
+        );
+        const showRightMask = rightRange > 1;
         setMaskData({
           leftMaskOpacity: showLeftMask ? 1 : 0,
           rightMaskOpacity: showRightMask ? 1 : 0
@@ -196,7 +211,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
         "bui-tabline-invisible": isMini || !lineData.hasActiveTab
       }),
       style: {
-        transition: lineData.transitionInUse ? "transform 0.25s ease-in-out" : void 0,
+        transition: lineData.transitionInUse ? `transform ${duration / 1e3}s ease` : void 0,
         transform: `translate3d(${lineData.x}px, 0px, 0px)`
       }
     }