@tendaui/components 1.0.0 → 1.0.2

package/styles/themes/_size.scss

@@ -1,68 +1,68 @@
-// size/margin/padding相关 token
-:root {
-  --td-size-1: 2px;
-  --td-size-2: 4px;
-  --td-size-3: 6px;
-  --td-size-4: 8px;
-  --td-size-5: 12px;
-  --td-size-6: 16px;
-  --td-size-7: 20px;
-  --td-size-8: 24px;
-  --td-size-9: 28px;
-  --td-size-10: 32px;
-  --td-size-11: 36px;
-  --td-size-12: 40px;
-  --td-size-13: 48px;
-  --td-size-14: 56px;
-  --td-size-15: 64px;
-  --td-size-16: 72px;
-
-  //全局 component 组件尺寸高度相关 token
-  --td-comp-size-xxxs: var(--td-size-6);
-  --td-comp-size-xxs: var(--td-size-7);
-  --td-comp-size-xs: var(--td-size-8);
-  --td-comp-size-s: var(--td-size-9);
-  --td-comp-size-m: var(--td-size-10);
-  --td-comp-size-l: var(--td-size-11);
-  --td-comp-size-xl: var(--td-size-12);
-  --td-comp-size-xxl: var(--td-size-13);
-  --td-comp-size-xxxl: var(--td-size-14);
-  --td-comp-size-xxxxl: var(--td-size-15);
-  --td-comp-size-xxxxxl: var(--td-size-16);
-
-  //全局 popup 弹出层整体边距 token
-  --td-pop-padding-s: var(--td-size-2);
-  --td-pop-padding-m: var(--td-size-3);
-  --td-pop-padding-l: var(--td-size-4);
-  --td-pop-padding-xl: var(--td-size-5);
-  --td-pop-padding-xxl: var(--td-size-6);
-
-  //全局 component 组件左右边距 token
-  --td-comp-paddingLR-xxs: var(--td-size-1);
-  --td-comp-paddingLR-xs: var(--td-size-2);
-  --td-comp-paddingLR-s: var(--td-size-4);
-  --td-comp-paddingLR-m: var(--td-size-5);
-  --td-comp-paddingLR-l: var(--td-size-6);
-  --td-comp-paddingLR-xl: var(--td-size-8);
-  --td-comp-paddingLR-xxl: var(--td-size-10);
-
-  //全局 component 组件上下边距 token
-  --td-comp-paddingTB-xxs: var(--td-size-1);
-  --td-comp-paddingTB-xs: var(--td-size-2);
-  --td-comp-paddingTB-s: var(--td-size-4);
-  --td-comp-paddingTB-m: var(--td-size-5);
-  --td-comp-paddingTB-l: var(--td-size-6);
-  --td-comp-paddingTB-xl: var(--td-size-8);
-  --td-comp-paddingTB-xxl: var(--td-size-10);
-
-  //全局 component 组件间距 token
-  --td-comp-margin-xxs: var(--td-size-1);
-  --td-comp-margin-xs: var(--td-size-2);
-  --td-comp-margin-s: var(--td-size-4);
-  --td-comp-margin-m: var(--td-size-5);
-  --td-comp-margin-l: var(--td-size-6);
-  --td-comp-margin-xl: var(--td-size-7);
-  --td-comp-margin-xxl: var(--td-size-8);
-  --td-comp-margin-xxxl: var(--td-size-10);
-  --td-comp-margin-xxxxl: var(--td-size-12);
-}
+// size/margin/padding相关 token
+:root {
+  --td-size-1: 2px;
+  --td-size-2: 4px;
+  --td-size-3: 6px;
+  --td-size-4: 8px;
+  --td-size-5: 12px;
+  --td-size-6: 16px;
+  --td-size-7: 20px;
+  --td-size-8: 24px;
+  --td-size-9: 28px;
+  --td-size-10: 32px;
+  --td-size-11: 36px;
+  --td-size-12: 40px;
+  --td-size-13: 48px;
+  --td-size-14: 56px;
+  --td-size-15: 64px;
+  --td-size-16: 72px;
+
+  //全局 component 组件尺寸高度相关 token
+  --td-comp-size-xxxs: var(--td-size-6);
+  --td-comp-size-xxs: var(--td-size-7);
+  --td-comp-size-xs: var(--td-size-8);
+  --td-comp-size-s: var(--td-size-9);
+  --td-comp-size-m: var(--td-size-10);
+  --td-comp-size-l: var(--td-size-11);
+  --td-comp-size-xl: var(--td-size-12);
+  --td-comp-size-xxl: var(--td-size-13);
+  --td-comp-size-xxxl: var(--td-size-14);
+  --td-comp-size-xxxxl: var(--td-size-15);
+  --td-comp-size-xxxxxl: var(--td-size-16);
+
+  //全局 popup 弹出层整体边距 token
+  --td-pop-padding-s: var(--td-size-2);
+  --td-pop-padding-m: var(--td-size-3);
+  --td-pop-padding-l: var(--td-size-4);
+  --td-pop-padding-xl: var(--td-size-5);
+  --td-pop-padding-xxl: var(--td-size-6);
+
+  //全局 component 组件左右边距 token
+  --td-comp-paddingLR-xxs: var(--td-size-1);
+  --td-comp-paddingLR-xs: var(--td-size-2);
+  --td-comp-paddingLR-s: var(--td-size-4);
+  --td-comp-paddingLR-m: var(--td-size-5);
+  --td-comp-paddingLR-l: var(--td-size-6);
+  --td-comp-paddingLR-xl: var(--td-size-8);
+  --td-comp-paddingLR-xxl: var(--td-size-10);
+
+  //全局 component 组件上下边距 token
+  --td-comp-paddingTB-xxs: var(--td-size-1);
+  --td-comp-paddingTB-xs: var(--td-size-2);
+  --td-comp-paddingTB-s: var(--td-size-4);
+  --td-comp-paddingTB-m: var(--td-size-5);
+  --td-comp-paddingTB-l: var(--td-size-6);
+  --td-comp-paddingTB-xl: var(--td-size-8);
+  --td-comp-paddingTB-xxl: var(--td-size-10);
+
+  //全局 component 组件间距 token
+  --td-comp-margin-xxs: var(--td-size-1);
+  --td-comp-margin-xs: var(--td-size-2);
+  --td-comp-margin-s: var(--td-size-4);
+  --td-comp-margin-m: var(--td-size-5);
+  --td-comp-margin-l: var(--td-size-6);
+  --td-comp-margin-xl: var(--td-size-7);
+  --td-comp-margin-xxl: var(--td-size-8);
+  --td-comp-margin-xxxl: var(--td-size-10);
+  --td-comp-margin-xxxxl: var(--td-size-12);
+}

package/styles/themes.css

@@ -1,66 +1,66 @@
-
-
-.theme-blue {
-  --primary: var(--color-blue-600);
-  --primary-foreground: var(--color-blue-50);
-  --ring: var(--color-blue-400);
-  --sidebar-primary: var(--color-blue-600);
-  --sidebar-primary-foreground: var(--color-blue-50);
-  --sidebar-ring: var(--color-blue-400);
-  --chart-1: var(--color-blue-300);
-  --chart-2: var(--color-blue-500);
-  --chart-3: var(--color-blue-600);
-  --chart-4: var(--color-blue-700);
-  --chart-5: var(--color-blue-800);
-}
-.theme-blue.dark {
-  --primary: var(--color-blue-500);
-  --primary-foreground: var(--color-blue-50);
-  --ring: var(--color-blue-900);
-  --sidebar-primary: var(--color-blue-500);
-  --sidebar-primary-foreground: var(--color-blue-50);
-  --sidebar-ring: var(--color-blue-900);
-}
-@media (prefers-color-scheme: dark) {
-  .theme-blue {
-    --primary: var(--color-blue-500);
-    --primary-foreground: var(--color-blue-50);
-    --ring: var(--color-blue-900);
-    --sidebar-primary: var(--color-blue-500);
-    --sidebar-primary-foreground: var(--color-blue-50);
-    --sidebar-ring: var(--color-blue-900);
-  }
-}
-
-.theme-green {
-  --primary: var(--color-lime-600);
-  --primary-foreground: var(--color-lime-50);
-  --ring: var(--color-lime-400);
-  --chart-1: var(--color-green-300);
-  --chart-2: var(--color-green-500);
-  --chart-3: var(--color-green-600);
-  --chart-4: var(--color-green-700);
-  --chart-5: var(--color-green-800);
-  --sidebar-primary: var(--color-lime-600);
-  --sidebar-primary-foreground: var(--color-lime-50);
-  --sidebar-ring: var(--color-lime-400);
-}
-
-.theme-green.dark {
-  --primary: var(--color-lime-600);
-  --primary-foreground: var(--color-lime-50);
-  --ring: var(--color-lime-900);
-  --sidebar-primary: var(--color-lime-500);
-  --sidebar-primary-foreground: var(--color-lime-50);
-  --sidebar-ring: var(--color-lime-900);
-}
-@media (prefers-color-scheme: dark) {
-  .theme-green {
-    --primary: var(--color-lime-500);
-    --primary-foreground: var(--color-lime-50);
-    --ring: var(--color-lime-900);
-    --sidebar-primary: var(--color-lime-500);
-    --sidebar-primary-foreground: var(--color-lime-50);
-    --sidebar-ring: var(--color-lime-900);
-  }
-}
+
+
+.theme-blue {
+  --primary: var(--color-blue-600);
+  --primary-foreground: var(--color-blue-50);
+  --ring: var(--color-blue-400);
+  --sidebar-primary: var(--color-blue-600);
+  --sidebar-primary-foreground: var(--color-blue-50);
+  --sidebar-ring: var(--color-blue-400);
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+}
+.theme-blue.dark {
+  --primary: var(--color-blue-500);
+  --primary-foreground: var(--color-blue-50);
+  --ring: var(--color-blue-900);
+  --sidebar-primary: var(--color-blue-500);
+  --sidebar-primary-foreground: var(--color-blue-50);
+  --sidebar-ring: var(--color-blue-900);
+}
+@media (prefers-color-scheme: dark) {
+  .theme-blue {
+    --primary: var(--color-blue-500);
+    --primary-foreground: var(--color-blue-50);
+    --ring: var(--color-blue-900);
+    --sidebar-primary: var(--color-blue-500);
+    --sidebar-primary-foreground: var(--color-blue-50);
+    --sidebar-ring: var(--color-blue-900);
+  }
+}
+
+.theme-green {
+  --primary: var(--color-lime-600);
+  --primary-foreground: var(--color-lime-50);
+  --ring: var(--color-lime-400);
+  --chart-1: var(--color-green-300);
+  --chart-2: var(--color-green-500);
+  --chart-3: var(--color-green-600);
+  --chart-4: var(--color-green-700);
+  --chart-5: var(--color-green-800);
+  --sidebar-primary: var(--color-lime-600);
+  --sidebar-primary-foreground: var(--color-lime-50);
+  --sidebar-ring: var(--color-lime-400);
+}
+
+.theme-green.dark {
+  --primary: var(--color-lime-600);
+  --primary-foreground: var(--color-lime-50);
+  --ring: var(--color-lime-900);
+  --sidebar-primary: var(--color-lime-500);
+  --sidebar-primary-foreground: var(--color-lime-50);
+  --sidebar-ring: var(--color-lime-900);
+}
+@media (prefers-color-scheme: dark) {
+  .theme-green {
+    --primary: var(--color-lime-500);
+    --primary-foreground: var(--color-lime-50);
+    --ring: var(--color-lime-900);
+    --sidebar-primary: var(--color-lime-500);
+    --sidebar-primary-foreground: var(--color-lime-50);
+    --sidebar-ring: var(--color-lime-900);
+  }
+}

package/styles/utilities/_animation.scss

@@ -1,57 +1,57 @@
-@import '../_vars.scss';
-
-@keyframes t-fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes t-fade-out {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes t-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.#{$prefix}-icon-loading {
-  animation: t-spin 1s linear infinite;
-}
-
-// 动态生成 keyframes 动画
-@mixin anim-g-attr-change($name, $attr, $from, $to) {
-  @keyframes #{$name} {
-    from {
-      #{$attr}: #{$from};
-    }
-    to {
-      #{$attr}: #{$to};
-    }
-  }
-}
-
-@keyframes t-zoom-out {
-  from {
-    transform: scale(0.2);
-  }
-
-  to {
-    transform: scale(1);
-  }
-}
+@import '../_vars.scss';
+
+@keyframes t-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes t-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes t-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.#{$prefix}-icon-loading {
+  animation: t-spin 1s linear infinite;
+}
+
+// 动态生成 keyframes 动画
+@mixin anim-g-attr-change($name, $attr, $from, $to) {
+  @keyframes #{$name} {
+    from {
+      #{$attr}: #{$from};
+    }
+    to {
+      #{$attr}: #{$to};
+    }
+  }
+}
+
+@keyframes t-zoom-out {
+  from {
+    transform: scale(0.2);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}

package/styles/utilities/_tips.scss

@@ -1,9 +1,9 @@
-@import '../mixins/_text.scss';
-.#{$prefix}-tips {
-  font-size: $font-size-s;
-}
-
-@include tips-text-status(default);
-@include tips-text-status(error);
-@include tips-text-status(warning);
-@include tips-text-status(success);
+@import '../mixins/_text.scss';
+.#{$prefix}-tips {
+  font-size: $font-size-s;
+}
+
+@include tips-text-status(default);
+@include tips-text-status(error);
+@include tips-text-status(warning);
+@include tips-text-status(success);

package/tab/TabBar.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState, CSSProperties, useRef } from "react";
+import classNames from "classnames";
+import useConfig from "../hooks/useConfig";
+import useMutationObserver from "../hooks/useMutationObserver";
+import useResizeObserver from "../hooks/useResizeObserve";
+interface TabBarProps {
+  tabPosition: string;
+  activeId: string | number;
+  containerRef: React.MutableRefObject<HTMLDivElement>;
+  navsWrapRef: React.MutableRefObject<HTMLDivElement>;
+}
+
+const TabBar: React.FC<TabBarProps> = (props) => {
+  const { tabPosition, activeId, containerRef, navsWrapRef } = props;
+  const { classPrefix } = useConfig();
+  const [barStyle, setBarStyle] = useState<CSSProperties>({});
+  const tabsClassPrefix = `${classPrefix}-tabs`;
+  const currentActiveIdRef = useRef(activeId);
+  useEffect(() => {
+    currentActiveIdRef.current = activeId;
+  }, [activeId]);
+
+  const computeStyle = React.useCallback(() => {
+    const isHorizontal = ["bottom", "top"].includes(tabPosition);
+    const transformPosition = isHorizontal ? "translateX" : "translateY";
+    const itemProp = isHorizontal ? "width" : "height";
+    const barBorderProp = isHorizontal ? "width" : "height";
+
+    let offset = 0;
+
+    if (containerRef.current) {
+      const itemsRef = containerRef.current?.querySelectorAll<HTMLElement>(`.${tabsClassPrefix}__nav-item`);
+      if (itemsRef.length - 1 >= (currentActiveIdRef.current as number)) {
+        itemsRef.forEach((item, itemIndex) => {
+          if (itemIndex < (currentActiveIdRef.current as number)) {
+            offset += Number(getComputedStyle(item)[itemProp].replace("px", ""));
+          }
+        });
+        const computedItem = itemsRef[currentActiveIdRef.current];
+        if (!computedItem) {
+          setBarStyle({ transform: `${transformPosition}(${0}px)`, [barBorderProp]: 0 });
+          return;
+        }
+        const itemPropValue = getComputedStyle(computedItem)[itemProp];
+        setBarStyle({ transform: `${transformPosition}(${offset}px)`, [barBorderProp]: itemPropValue || 0 });
+      }
+    }
+  }, [currentActiveIdRef, containerRef, tabPosition, tabsClassPrefix]);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      setTimeout(() => computeStyle());
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tabPosition, activeId, containerRef.current]);
+
+  const handleMutationObserver = React.useCallback(
+    (mutations: MutationRecord[]) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === "characterData") {
+          computeStyle();
+        }
+      });
+    },
+    [computeStyle]
+  );
+
+  useMutationObserver(containerRef.current, handleMutationObserver);
+
+  useResizeObserver(navsWrapRef, computeStyle);
+
+  return (
+    <div
+      className={classNames({
+        [`${tabsClassPrefix}__bar`]: true,
+        [`${classPrefix}-is-${tabPosition}`]: true
+      })}
+      style={barStyle}
+    ></div>
+  );
+};
+
+TabBar.displayName = "TabBar";
+
+export default TabBar;

package/tab/TabNav.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback, useEffect, useRef, useState, WheelEvent } from "react";
+import classNames from "classnames";
+import noop from "../utils/noop";
+import { useTabClass } from "./useTabClass";
+import TabNavItem from "./TabNavItem";
+import TabBar from "./TabBar";
+import { omit } from "lodash-es";
+import { TdTabsProps, TdTabPanelProps, TabValue } from "./type";
+export interface TabNavProps extends TdTabsProps {
+  itemList: TdTabPanelProps[];
+  activeValue: TabValue;
+  size?: "medium" | "large";
+  children?: React.ReactNode;
+}
+const TabNav: React.FC<TabNavProps> = (props) => {
+  const {
+    placement = "top",
+    itemList = [],
+    theme,
+    addable,
+    onAdd,
+    scrollPosition = "auto",
+    size = "medium",
+    disabled = false,
+    onRemove = noop,
+    onChange = noop,
+    activeValue,
+    children,
+    action
+  } = props;
+  const { tdTabsClassGenerator, tdClassGenerator, tdSizeClassGenerator } = useTabClass();
+  const navsContainerRef = useRef<HTMLDivElement>(null);
+  const navsWrapRef = useRef<HTMLDivElement>(null);
+  const getIndex = useCallback(
+    (value) => {
+      const index = itemList.findIndex((item) => item.value === value);
+      return index > -1 ? index : -1;
+    },
+    [itemList]
+  );
+
+  const activeIndex = getIndex(activeValue);
+  const [activeTab, setActiveTab] = useState<HTMLElement>(null);
+  const TabBarCom = (
+    <TabBar tabPosition={placement} activeId={activeIndex} containerRef={navsWrapRef} navsWrapRef={navsWrapRef} />
+  );
+  const handleTabItemClick = (clickItem) => {
+    if (activeValue !== clickItem.value) {
+      onChange(clickItem.value);
+    }
+    clickItem?.onClick?.(clickItem.value);
+  };
+  const handleTabItemRemove = (removeItem) => {
+    const { value: removeValue, index: removeIndex } = removeItem;
+    if (removeValue === activeValue) {
+      onChange(removeIndex === 0 ? itemList[removeIndex + 1]?.value : itemList[removeIndex - 1].value);
+    }
+    onRemove(removeItem);
+  };
+  const handleTabAdd = (e) => {
+    onAdd({ e });
+  };
+  return (
+    <div ref={navsContainerRef} className={classNames(tdTabsClassGenerator("nav"))} style={{ minHeight: 48 }}>
+      <div className={classNames(tdTabsClassGenerator("nav-container"), addable ? tdClassGenerator("is-addable") : "")}>
+        <div
+          className={classNames(
+            tdTabsClassGenerator("nav-wrap"),
+            ["left", "right"].includes(placement) ? tdClassGenerator("is-vertical") : "",
+            tdClassGenerator("is-smooth")
+          )}
+          ref={navsWrapRef}
+        >
+          {TabBarCom}
+          {itemList.map((v, index) => (
+            <TabNavItem
+              {...omit(props, ["className", "style"])}
+              {...v}
+              onRemove={v.onRemove}
+              key={v.value}
+              label={v.label}
+              isActive={activeValue === v.value}
+              theme={theme}
+              placement={placement}
+              index={index}
+              disabled={disabled || v.disabled}
+              onClick={() => handleTabItemClick(v)}
+              onTabRemove={handleTabItemRemove}
+              innerRef={(ref) => {
+                if (activeValue === v.value) {
+                  setActiveTab(ref);
+                }
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+TabNav.displayName = "TabNav";
+export default TabNav;

package/tab/TabNavItem.tsx

@@ -0,0 +1,80 @@
+import React, { MouseEvent } from "react";
+import classNames from "classnames";
+import { IconClose as TdCloseIcon } from "@tendaui/icons";
+
+import noop from "../utils/noop";
+import { useTabClass } from "./useTabClass";
+import useGlobalIcon from "../hooks/useGlobalIcon";
+
+import type { StyledProps } from "../common";
+import type { TdTabPanelProps, TdTabsProps } from "./type";
+
+export interface TabNavItemProps extends TdTabPanelProps, StyledProps {
+  // 当前 item 是否处于激活态
+  isActive: boolean;
+  // 点击事件
+  onClick: (e: MouseEvent) => void;
+  theme: "normal" | "card";
+  placement: string;
+  size?: "medium" | "large";
+  index: number;
+  innerRef(ref: HTMLElement): void;
+  onTabRemove: TdTabsProps["onRemove"];
+}
+
+const TabNavItem: React.FC<TabNavItemProps> = (props) => {
+  const {
+    label,
+    removable,
+    isActive,
+    onClick = noop,
+    placement,
+    onRemove = noop,
+    value,
+    size = "medium",
+    disabled = false,
+    index,
+    onTabRemove = noop,
+    innerRef
+  } = props;
+
+  const { CloseIcon } = useGlobalIcon({ CloseIcon: TdCloseIcon });
+
+  // 样式变量和常量定义
+  const { tdTabsClassGenerator, tdClassGenerator, tdSizeClassGenerator } = useTabClass();
+
+  // 斜八度动画
+  return (
+    <div
+      ref={innerRef}
+      onClick={disabled ? noop : onClick}
+      className={classNames(
+        tdTabsClassGenerator("nav-item"),
+        tdSizeClassGenerator(size),
+        isActive ? tdClassGenerator("is-active") : "",
+        tdClassGenerator(`is-${placement}`),
+        disabled ? tdClassGenerator("is-disabled") : "",
+        props.className
+      )}
+    >
+      {/* 根据新的 dom 结构和样式进行改动，卡片类型情况下不需要 nav-item-wrapper 这个 div */}
+      <div className={classNames(tdTabsClassGenerator("nav-item-wrapper"))}>
+        <span className={classNames(tdTabsClassGenerator("nav-item-text-wrapper"))}>{label}</span>
+      </div>
+      {removable && !disabled ? (
+        <span
+          className={classNames("remove-btn")}
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove({ value, e });
+            onTabRemove({ value, e, index });
+          }}
+        >
+          <CloseIcon />
+        </span>
+      ) : null}
+    </div>
+  );
+};
+
+export default TabNavItem;