@tendaui/components 1.2.4 → 1.3.0

package/tag-input/_example/events.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { TagInput, TagInputValue } from "@tendaui/react";
+
+const EventsExample = () => {
+  const [tags, setTags] = useState<TagInputValue>(["Vue"]);
+  const [logs, setLogs] = useState<string[]>([]);
+
+  const addLog = (msg: string) => {
+    setLogs((prev) => [...prev.slice(-4), msg]);
+  };
+
+  return (
+    <div style={{ display: "flex", gap: "24px", flexDirection: "column" }}>
+      <div style={{ flex: 1 }}>
+        <TagInput
+          value={tags}
+          onChange={(val, context) => {
+            setTags(val);
+            addLog(`onChange: ${JSON.stringify(val)}, trigger: ${context.trigger}`);
+          }}
+          onEnter={(val, context) => {
+            addLog(`onEnter: inputValue=${context.inputValue}`);
+          }}
+          onRemove={(context) => {
+            addLog(`onRemove: removed=${context.item}, index=${context.index}`);
+          }}
+          onClear={() => {
+            addLog("onClear: 清空所有标签");
+          }}
+          onPaste={(context) => {
+            addLog(`onPaste: ${context.pasteValue}`);
+          }}
+          clearable
+          placeholder="请输入标签"
+          style={{ width: "350px" }}
+        />
+      </div>
+      <div
+        style={{
+          flex: 1,
+          padding: "12px",
+          background: "var(--td-bg-color-2)",
+          borderRadius: "4px",
+          fontSize: "12px",
+          maxHeight: "150px",
+          overflow: "auto"
+        }}
+      >
+        <div style={{ fontWeight: "bold", marginBottom: "8px" }}>事件日志：</div>
+        {logs.length === 0 ? (
+          <div style={{ color: "#999" }}>暂无日志</div>
+        ) : (
+          logs.map((log, index) => (
+            <div key={index} style={{ marginBottom: "4px", color: "#666" }}>
+              {log}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EventsExample;

package/tag-input/_example/excess-display.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { TagInput } from "@tendaui/react";
+
+const ExcessDisplayExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "24px", width: "500px" }}>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>换行显示（默认）</div>
+      <TagInput
+        defaultValue={["标签一", "标签二", "标签三", "标签四", "标签五", "标签六"]}
+        excessTagsDisplayType="break-line"
+        placeholder="请输入"
+        style={{ width: "300px" }}
+      />
+    </div>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>横向滚动</div>
+      <TagInput
+        defaultValue={["标签一", "标签二", "标签三", "标签四", "标签五", "标签六"]}
+        excessTagsDisplayType="scroll"
+        placeholder="请输入"
+        style={{ width: "300px" }}
+      />
+    </div>
+  </div>
+);
+
+export default ExcessDisplayExample;

package/tag-input/_example/max-tags.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import { TagInput, TagInputValue } from "@tendaui/react";
+
+const MaxTagsExample = () => {
+  const [tags, setTags] = useState<TagInputValue>(["Vue", "React"]);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+      <TagInput
+        value={tags}
+        onChange={(val) => setTags(val)}
+        max={5}
+        placeholder="最多输入 5 个标签"
+        clearable
+        style={{ width: "400px" }}
+      />
+      <div style={{ color: "#666", fontSize: "12px" }}>已输入 {tags.length}/5 个标签</div>
+    </div>
+  );
+};
+
+export default MaxTagsExample;

package/tag-input/_example/sizes.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { TagInput } from "@tendaui/react";
+
+const SizesExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>小尺寸</div>
+      <TagInput size="small" defaultValue={["标签一", "标签二"]} placeholder="小尺寸" style={{ width: "400px" }} />
+    </div>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>中尺寸（默认）</div>
+      <TagInput size="medium" defaultValue={["标签一", "标签二"]} placeholder="中尺寸" style={{ width: "400px" }} />
+    </div>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>大尺寸</div>
+      <TagInput size="large" defaultValue={["标签一", "标签二"]} placeholder="大尺寸" style={{ width: "400px" }} />
+    </div>
+  </div>
+);
+
+export default SizesExample;

package/tag-input/_example/status.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { TagInput } from "@tendaui/react";
+
+const StatusExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "24px", width: "500px", margin: "8px 0" }}>
+    <TagInput
+      status="default"
+      defaultValue={["默认"]}
+      tips="这是提示信息"
+      placeholder="默认状态"
+      style={{ width: "400px" }}
+    />
+    <TagInput
+      status="success"
+      defaultValue={["成功"]}
+      tips="校验通过"
+      placeholder="成功状态"
+      style={{ width: "400px" }}
+    />
+    <TagInput
+      status="warning"
+      defaultValue={["警告"]}
+      tips="请注意"
+      placeholder="警告状态"
+      style={{ width: "400px" }}
+    />
+    <TagInput
+      status="error"
+      defaultValue={["错误"]}
+      tips="输入有误"
+      placeholder="错误状态"
+      style={{ width: "400px" }}
+    />
+  </div>
+);
+
+export default StatusExample;

package/tag-input/_example/with-label.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { TagInput } from "@tendaui/react";
+
+const WithLabelExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+    <TagInput
+      label="技术栈："
+      defaultValue={["React", "TypeScript"]}
+      placeholder="请输入"
+      clearable
+      style={{ width: "450px" }}
+    />
+    <TagInput
+      label="城市："
+      defaultValue={["北京", "上海"]}
+      placeholder="请输入"
+      clearable
+      style={{ width: "450px" }}
+    />
+  </div>
+);
+
+export default WithLabelExample;

package/tag-input/hooks/useTagList.tsx

@@ -103,7 +103,7 @@ export default function useTagList(props: TagInputProps) {
         value: tagValue,
         count: tagValue.length - minCollapsedNum,
         collapsedTags: tagValue.slice(minCollapsedNum, tagValue.length),
-        collapsedSelectedItems: (options.slice(minCollapsedNum, tagValue.length) as TagInputValue),
+        collapsedSelectedItems: options.slice(minCollapsedNum, tagValue.length) as TagInputValue,
         onClose
       };
       const more = isFunction(collapsedItems) ? collapsedItems(params) : collapsedItems;

package/tooltip/Tooltip.tsx

@@ -0,0 +1,76 @@
+import React, { forwardRef, useState, useEffect, useRef, useImperativeHandle } from "react";
+import classNames from "classnames";
+import Popup, { PopupRef } from "../popup";
+import useConfig from "../hooks/useConfig";
+import type { TdTooltipProps } from "./type";
+import { tooltipDefaultProps } from "./defaultProps";
+import useDefaultProps from "../hooks/useDefaultProps";
+
+export type TooltipProps = TdTooltipProps;
+
+const Tooltip = forwardRef<Partial<PopupRef>, TdTooltipProps>((originalProps, ref) => {
+  const props = useDefaultProps<TdTooltipProps>(originalProps, tooltipDefaultProps);
+  const {
+    theme,
+    showArrow,
+    destroyOnClose,
+    overlayClassName,
+    children,
+    duration,
+    placement,
+    onVisibleChange,
+    ...restProps
+  } = props;
+
+  const { classPrefix } = useConfig();
+  const [timeUp, setTimeUp] = useState(false);
+  const popupRef = useRef<PopupRef>(null);
+  const timerRef = useRef<number | null>(null);
+  const toolTipClass = classNames(
+    `${classPrefix}-tooltip`,
+    {
+      [`${classPrefix}-tooltip--${theme}`]: theme
+    },
+    overlayClassName
+  );
+
+  function handleVisibleChange(visible: boolean, context: any) {
+    setTimeUp(false);
+    onVisibleChange?.(visible, context);
+  }
+
+  useEffect(() => {
+    if (duration !== 0 && !timeUp) {
+      popupRef.current?.setVisible?.(true);
+      timerRef.current = window.setTimeout(() => {
+        popupRef.current?.setVisible?.(false);
+        setTimeUp(true);
+      }, duration);
+    }
+    return () => {
+      window.clearTimeout(timerRef.current);
+    };
+  }, [duration, timeUp]);
+
+  useImperativeHandle(ref, () => ({
+    ...(popupRef.current || {})
+  }));
+
+  return (
+    <Popup
+      ref={popupRef}
+      destroyOnClose={destroyOnClose}
+      showArrow={showArrow}
+      overlayClassName={toolTipClass}
+      onVisibleChange={handleVisibleChange}
+      placement={placement}
+      {...restProps}
+    >
+      {children}
+    </Popup>
+  );
+});
+
+Tooltip.displayName = "Tooltip";
+
+export default Tooltip;

package/tooltip/_example/base.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Tooltip, Button } from '@tendaui/react';
+
+const BaseTooltipExample = () => {
+  return (
+    <div style={{ display: 'flex', gap: '16px', padding: '24px' }}>
+      <Tooltip content="这是一个默认提示">
+        <Button>默认提示</Button>
+      </Tooltip>
+
+      <Tooltip content="这是一个浅色主题提示" theme="light">
+        <Button variant="outline">浅色主题</Button>
+      </Tooltip>
+
+      <Tooltip content="点击查看提示" trigger="click">
+        <Button variant="dashed">点击触发</Button>
+      </Tooltip>
+
+      <Tooltip content="3秒后自动消失" duration={3000}>
+        <Button variant="text">自动消失</Button>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default BaseTooltipExample;

package/tooltip/_example/custom-content.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Tooltip, Button, Tag } from '@tendaui/react';
+
+const CustomContentTooltipExample = () => {
+  return (
+    <div style={{ display: 'flex', gap: '16px', padding: '24px' }}>
+      <Tooltip
+        content={
+          <div style={{ padding: '8px' }}>
+            <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>用户信息</div>
+            <div>姓名: 张三</div>
+            <div>年龄: 28</div>
+            <div>职位: 前端工程师</div>
+          </div>
+        }
+      >
+        <Button>用户信息</Button>
+      </Tooltip>
+
+      <Tooltip
+        content={
+          <div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
+            <Tag color="primary">React</Tag>
+            <Tag color="success">TypeScript</Tag>
+            <Tag color="warning">SCSS</Tag>
+            <Tag color="error">Node.js</Tag>
+          </div>
+        }
+      >
+        <Button variant="outline">技术栈</Button>
+      </Tooltip>
+
+      <Tooltip
+        content={
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ fontSize: '14px', marginBottom: '4px' }}>提示标题</div>
+            <div style={{ fontSize: '12px', color: '#999' }}>这是一段详细的提示信息，可以包含多行文本和各种样式。</div>
+          </div>
+        }
+      >
+        <Button variant="dashed">详细提示</Button>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default CustomContentTooltipExample;

package/tooltip/_example/placement.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Tooltip, Button } from '@tendaui/react';
+
+const PlacementTooltipExample = () => {
+  const placements = [
+    'top',
+    'left',
+    'right',
+    'bottom',
+    'top-left',
+    'top-right',
+    'bottom-left',
+    'bottom-right',
+    'left-top',
+    'left-bottom',
+    'right-top',
+    'right-bottom',
+  ];
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px', padding: '24px' }}>
+      {placements.map((placement) => (
+        <div key={placement} style={{ textAlign: 'center' }}>
+          <Tooltip content={`位置: ${placement}`} placement={placement}>
+            <Button style={{ width: '120px' }}>{placement}</Button>
+          </Tooltip>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PlacementTooltipExample;

package/tooltip/_example/theme.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Tooltip, Button } from '@tendaui/react';
+
+const ThemeTooltipExample = () => {
+  return (
+    <div style={{ display: 'flex', gap: '16px', padding: '24px' }}>
+      <Tooltip content="这是一个默认深色主题" theme="dark">
+        <Button>默认深色</Button>
+      </Tooltip>
+
+      <Tooltip content="这是一个浅色主题" theme="light">
+        <Button variant="outline">浅色主题</Button>
+      </Tooltip>
+
+      <Tooltip content="这是一个主色主题" theme="primary">
+        <Button variant="dashed" color="primary">主色主题</Button>
+      </Tooltip>
+
+      <Tooltip content="这是一个成功主题" theme="success">
+        <Button variant="dashed" color="success">成功主题</Button>
+      </Tooltip>
+
+      <Tooltip content="这是一个错误主题" theme="error">
+        <Button variant="dashed" color="error">错误主题</Button>
+      </Tooltip>
+
+      <Tooltip content="这是一个警告主题" theme="warning">
+        <Button variant="dashed" color="warning">警告主题</Button>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default ThemeTooltipExample;

package/tooltip/defaultProps.ts

@@ -0,0 +1,14 @@
+import { TdTooltipProps } from './type';
+
+export const tooltipDefaultProps: TdTooltipProps = {
+  theme: 'dark',
+  trigger: 'hover',
+  placement: 'top',
+  duration: 0,
+  showArrow: true,
+  destroyOnClose: true,
+  arrowPointAtCenter: true,
+  autoAdjustOverflow: true,
+  mouseEnterPopup: false,
+  disabled: false,
+};

package/tooltip/index.ts

@@ -0,0 +1,7 @@
+import _Tooltip from "./Tooltip";
+import "./style/index";
+
+export type { TooltipProps } from "./Tooltip";
+export type * from "./type";
+export const Tooltip = _Tooltip;
+export default Tooltip;

package/tooltip/style/index.js

@@ -0,0 +1 @@
+import '../../styles/components/tooltip/_index.scss';

package/tooltip/type.ts

@@ -0,0 +1,99 @@
+import { TNode, TElement } from "../common";
+import { TdPopupProps, PopupPlacement } from "../popup/type";
+export interface TdTooltipProps extends Omit<TdPopupProps, "content"> {
+  /**
+   *  tooltip 内容
+   */
+  content: TNode;
+  /**
+   * 触发方式，可选项：hover/click/focus/context-menu
+   * @default 'hover'
+   */
+  trigger?: "hover" | "click" | "focus" | "context-menu";
+  /**
+   * 主题，可选项：dark/light/primary/success/error/warning
+   * @default 'dark'
+   */
+  theme?: "dark" | "light" | "primary" | "success" | "error" | "warning";
+  /**
+   * 显示/隐藏触发方式
+   * @default 'hover'
+   */
+  placement?:
+    | "top"
+    | "left"
+    | "right"
+    | "bottom"
+    | "top-left"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-right"
+    | "left-top"
+    | "left-bottom"
+    | "right-top"
+    | "right-bottom";
+  /**
+   * 浮层出现后自动隐藏延时，单位：毫秒
+   * @default 0
+   */
+  duration?: number;
+  /**
+   * 是否显示箭头
+   * @default true
+   */
+  showArrow?: boolean;
+  /**
+   * 自定义提示框类名
+   */
+  overlayClassName?: string | string[];
+  /**
+   * 浮层隐藏时是否销毁浮层
+   * @default true
+   */
+  destroyOnClose?: boolean;
+  /**
+   * 自定义弹出层内容
+   */
+  popupContent?: TNode;
+
+  /**
+   * 箭头是否指向目标元素中心
+   * @default true
+   */
+  arrowPointAtCenter?: boolean;
+  /**
+   * 手动控制浮层显隐
+   */
+  visible?: boolean;
+  /**
+   * 当浮层无法完全显示时，是否自动调整位置
+   * @default true
+   */
+  autoAdjustOverflow?: boolean;
+  /**
+   * 浮层偏移量，示例：[10, 20] 或 (placement) => [10, 20]
+   */
+  offset?: Array<number> | ((placement: string) => Array<number>);
+  /**
+   * 透传 Popper.js 的配置项
+   */
+  popperOptions?: object;
+  /**
+   * 触发元素
+   */
+  triggerElement?: TElement;
+
+  /**
+   * 层级
+   */
+  zIndex?: number;
+  /**
+   * 鼠标是否可进入浮层
+   * @default false
+   */
+  mouseEnterPopup?: boolean;
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
+}