@tendaui/components 1.0.0

package/tag/Tag.tsx

@@ -0,0 +1,149 @@
+import React, { ForwardRefRenderFunction, FocusEvent, forwardRef, useMemo } from "react";
+import classNames from "classnames";
+import { IconClose } from "@tendaui/icons";
+import tinycolor from "tinycolor2";
+import noop from "../utils/noop";
+import useConfig from "../hooks/useConfig";
+import useGlobalIcon from "../hooks/useGlobalIcon";
+import { StyledProps } from "../common";
+import { TdTagProps } from "./type";
+import { tagDefaultProps } from "./defaultProps";
+import useDefaultProps from "../hooks/useDefaultProps";
+
+export interface TagProps extends TdTagProps, StyledProps {
+  /**
+   * 标签内容
+   */
+  tabIndex?: number;
+  onFocus?: (e: FocusEvent<HTMLDivElement>) => void;
+  onBlur?: (e: FocusEvent<HTMLDivElement>) => void;
+}
+
+export const TagFunction: ForwardRefRenderFunction<HTMLDivElement, TagProps> = (originalProps, ref) => {
+  const props = useDefaultProps<TagProps>(originalProps, tagDefaultProps);
+  const {
+    theme,
+    size,
+    shape,
+    variant,
+    closable,
+    maxWidth,
+    icon,
+    content,
+    onClick = noop,
+    onClose = noop,
+    className,
+    style,
+    disabled,
+    children,
+    color,
+    title: titleAttr,
+    ...otherTagProps
+  } = props;
+
+  const { classPrefix } = useConfig();
+  const { CloseIcon } = useGlobalIcon({
+    CloseIcon: IconClose
+  });
+
+  const tagClassPrefix = `${classPrefix}-tag`;
+
+  const sizeMap = {
+    large: `${classPrefix}-size-l`,
+    small: `${classPrefix}-size-s`
+  };
+
+  const tagClassNames = classNames(
+    tagClassPrefix,
+    `${tagClassPrefix}--${theme}`,
+    `${tagClassPrefix}--${variant}`,
+    {
+      [`${tagClassPrefix}--${shape}`]: shape !== "square",
+      [`${tagClassPrefix}--ellipsis`]: !!maxWidth,
+      [`${tagClassPrefix}--disabled`]: disabled
+    },
+    sizeMap[size],
+    className
+  );
+
+  const deleteIcon = (
+    <CloseIcon
+      onClick={(e) => {
+        if (disabled) return;
+        onClose({ e });
+      }}
+      className={`${tagClassPrefix}__icon-close`}
+    />
+  );
+
+  const title = useMemo(() => {
+    if (Reflect.has(props, "title")) return titleAttr;
+    if (children && typeof children === "string") return children;
+    if (content && typeof content === "string") return content;
+  }, [children, content, props, titleAttr]);
+
+  const titleAttribute = title ? { title } : undefined;
+
+  const getTagStyle = useMemo(() => {
+    if (!color) return style;
+    const luminance = tinycolor(color).getLuminance();
+
+    const calculatedStyle: React.CSSProperties = {};
+
+    calculatedStyle.color = luminance > 0.5 ? "black" : "white";
+    if (variant === "outline" || variant === "light-outline") {
+      calculatedStyle.borderColor = color;
+    }
+
+    if (variant !== "outline") {
+      const getLightestShade = () => {
+        const { r, g, b } = tinycolor(color).toRgb();
+        // alpha 0.1  is designed by @wen1kang
+        return `rgba(${r}, ${g}, ${b}, 0.1)`;
+      };
+
+      calculatedStyle.backgroundColor = variant === "dark" ? color : getLightestShade();
+    }
+    if (variant !== "dark") {
+      calculatedStyle.color = color;
+    }
+    return { ...calculatedStyle, ...style };
+  }, [color, variant, style]);
+
+  const getTextStyle = useMemo(() => {
+    if (!maxWidth) return {};
+
+    return {
+      maxWidth: isNaN(Number(maxWidth)) ? String(maxWidth) : `${maxWidth}px`
+    };
+  }, [maxWidth]);
+
+  const tag = (
+    <div
+      ref={ref}
+      className={tagClassNames}
+      onClick={(e) => {
+        if (disabled) return;
+        onClick({ e });
+      }}
+      style={getTagStyle}
+      {...otherTagProps}
+    >
+      <>
+        {icon}
+        <span className={maxWidth ? `${tagClassPrefix}--text` : undefined} style={getTextStyle} {...titleAttribute}>
+          {children ?? content}
+        </span>
+        {closable && !disabled && deleteIcon}
+      </>
+    </div>
+  );
+
+  return tag;
+};
+
+export const Tag = forwardRef(TagFunction);
+
+Tag.displayName = "Tag";
+
+export default Tag;

package/tag/defaultProps.ts

@@ -0,0 +1,19 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdTagProps, TdCheckTagProps, TdCheckTagGroupProps } from "./type";
+
+export const tagDefaultProps: TdTagProps = {
+  closable: false,
+  disabled: false,
+  icon: undefined,
+  shape: "square",
+  size: "medium",
+  theme: "default",
+  variant: "dark"
+};
+
+export const checkTagDefaultProps: TdCheckTagProps = { disabled: false, size: "medium" };
+
+export const checkTagGroupDefaultProps: TdCheckTagGroupProps = { multiple: false, defaultValue: [] };

package/tag/index.ts

@@ -0,0 +1,8 @@
+import { TagFunction } from "./Tag";
+import forwardRefWithStatics from "../utils/forwardRefWithStatics";
+import "./style/index.js";
+export type { TagProps } from "./Tag";
+
+export const Tag = forwardRefWithStatics(TagFunction, {});
+Tag.displayName = "Tag";
+export * from "./type";

package/tag/style/css.js

@@ -0,0 +1 @@
+import "./index.css";

package/tag/style/index.js

@@ -0,0 +1 @@
+import "../../styles/components/tag/_index.scss";

package/tag/type.ts

@@ -0,0 +1,170 @@
+import { TNode, TElement, SizeEnum } from "../common";
+import { MouseEvent, KeyboardEvent } from "react";
+
+export interface TdTagProps {
+  /**
+   * 组件子元素，同 `content`
+   */
+  children?: TNode;
+  /**
+   * 标签是否可关闭
+   * @default false
+   */
+  closable?: boolean;
+  /**
+   * 自定义标签颜色
+   * @default ''
+   */
+  color?: string;
+  /**
+   * 组件子元素
+   */
+  content?: TNode;
+  /**
+   * 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 标签中的图标，可自定义图标呈现
+   */
+  icon?: TElement;
+  /**
+   * 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80
+   */
+  maxWidth?: string | number;
+  /**
+   * 标签类型，有三种：方形、圆角方形、标记型
+   * @default square
+   */
+  shape?: "square" | "round" | "mark";
+  /**
+   * 标签尺寸
+   * @default medium
+   */
+  size?: SizeEnum;
+  /**
+   * 组件风格，用于描述组件不同的应用场景
+   * @default default
+   */
+  theme?: "default" | "primary" | "warning" | "danger" | "success";
+  /**
+   * 标签标题，在标签hover时展示，默认为标签内容
+   * @default ''
+   */
+  title?: string;
+  /**
+   * 标签风格变体
+   * @default dark
+   */
+  variant?: "dark" | "light" | "outline" | "light-outline";
+  /**
+   * 点击时触发
+   */
+  onClick?: (context: { e: MouseEvent<HTMLSpanElement> }) => void;
+  /**
+   * 如果关闭按钮存在，点击关闭按钮时触发
+   */
+  onClose?: (context: { e: MouseEvent<SVGSVGElement> }) => void;
+}
+
+export interface TdCheckTagProps {
+  /**
+   * 标签选中的状态，默认风格（theme=default）才有选中态
+   */
+  checked?: boolean;
+  /**
+   * 标签选中的状态，默认风格（theme=default）才有选中态，非受控属性
+   */
+  defaultChecked?: boolean;
+  /**
+   * 透传标签选中态属性
+   */
+  checkedProps?: TdTagProps;
+  /**
+   * 组件子元素
+   */
+  children?: TNode;
+  /**
+   * 组件子元素；传入数组时：[选中内容，非选中内容]
+   */
+  content?: [] | TNode;
+  /**
+   * 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 标签尺寸
+   * @default medium
+   */
+  size?: SizeEnum;
+  /**
+   * 透传标签未选态属性
+   */
+  uncheckedProps?: TdTagProps;
+  /**
+   * 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置
+   */
+  value?: string | number;
+  /**
+   * 状态切换时触发
+   */
+  onChange?: (checked: boolean, context: CheckTagChangeContext) => void;
+  /**
+   * 点击标签时触发
+   */
+  onClick?: (context: { e: MouseEvent<HTMLSpanElement> }) => void;
+}
+
+export interface TdCheckTagGroupProps {
+  /**
+   * 透传标签选中态属性
+   */
+  checkedProps?: TdTagProps;
+  /**
+   * 是否支持选中多个标签
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * 标签选项列表
+   */
+  options?: CheckTagGroupOption[];
+  /**
+   * 透传标签未选态属性
+   */
+  uncheckedProps?: TdTagProps;
+  /**
+   * 选中标签值
+   * @default []
+   */
+  value?: CheckTagGroupValue;
+  /**
+   * 选中标签值，非受控属性
+   * @default []
+   */
+  defaultValue?: CheckTagGroupValue;
+  /**
+   * null
+   */
+  onChange?: (value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void;
+}
+
+export interface CheckTagChangeContext {
+  e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>;
+  value: string | number;
+}
+
+export interface CheckTagGroupOption extends TdCheckTagProps {
+  label: string | TNode;
+  value: string | number;
+}
+
+export type CheckTagGroupValue = Array<string | number>;
+
+export interface CheckTagGroupChangeContext {
+  type: "check" | "uncheck";
+  e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>;
+  value: string | number;
+}

package/tag-input/TagInput.tsx

@@ -0,0 +1,215 @@
+import React, { CompositionEvent, KeyboardEvent, useRef, useImperativeHandle, forwardRef, MouseEvent } from "react";
+import { IconClear } from "@tendaui/icons";
+import { isFunction } from "lodash-es";
+import classnames from "classnames";
+import useConfig from "../hooks/useConfig";
+import TInput, { InputValue, InputRef } from "../input";
+import { InputValueChangeContext, TdTagInputProps } from "./type";
+import useTagList from "./hooks/useTagList";
+import useTagScroll from "./hooks/useTagScroll";
+import useHover from "./hooks/useHover";
+import useControlled from "../hooks/useControlled";
+import { StyledProps } from "../common";
+import { tagInputDefaultProps } from "./defaultProps";
+import useDefaultProps from "../hooks/useDefaultProps";
+import useGlobalIcon from "../hooks/useGlobalIcon";
+import useDragSorter from "../hooks/useDragSorter";
+
+export interface TagInputProps extends TdTagInputProps, StyledProps {
+  options?: unknown[]; // 参数穿透options, 给SelectInput/SelectInput 自定义选中项呈现的内容和多选状态下设置折叠项内容
+}
+
+const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
+  const props = useDefaultProps<TagInputProps>(originalProps, tagInputDefaultProps);
+  const { classPrefix: prefix } = useConfig();
+
+  const { CloseCircleFilledIcon } = useGlobalIcon({
+    CloseCircleFilledIcon: IconClear
+  });
+
+  const {
+    excessTagsDisplayType,
+    autoWidth,
+    borderless,
+    readonly,
+    disabled,
+    clearable,
+    placeholder,
+    valueDisplay,
+    label,
+    inputProps,
+    size,
+    tips,
+    status,
+    suffixIcon,
+    suffix,
+    prefixIcon,
+    maxRows,
+    onClick,
+    onPaste,
+    onFocus,
+    onBlur
+  } = props;
+
+  const [tInputValue, setTInputValue] = useControlled(props, "inputValue", props.onInputChange);
+
+  const { isHover, addHover, cancelHover } = useHover(props);
+  const { getDragProps } = useDragSorter({
+    ...props,
+    sortOnDraggable: props.dragSort,
+    onDragOverCheck: {
+      x: true,
+      targetClassNameRegExp: new RegExp(`^${prefix}-tag`)
+    }
+  });
+  const isCompositionRef = useRef(false);
+
+  const { scrollToRight, onWheel, scrollToRightOnEnter, scrollToLeftOnLeave, tagInputRef } = useTagScroll(props);
+  // handle tag add and remove
+  const { tagValue, onClose, onInnerEnter, onInputBackspaceKeyUp, clearAll, renderLabel, onInputBackspaceKeyDown } =
+    useTagList({
+      ...props,
+      getDragProps
+    });
+  const NAME_CLASS = `${prefix}-tag-input`;
+  const WITH_SUFFIX_ICON_CLASS = `${prefix}-tag-input__with-suffix-icon`;
+  const CLEAR_CLASS = `${prefix}-tag-input__suffix-clear ${prefix}-icon`;
+  const BREAK_LINE_CLASS = `${prefix}-tag-input--break-line`;
+
+  const tagInputPlaceholder = !tagValue?.length ? placeholder : "";
+
+  const showClearIcon = Boolean(!readonly && !disabled && clearable && isHover && tagValue?.length);
+
+  useImperativeHandle(ref as InputRef, () => ({
+    ...(tagInputRef.current || {})
+  }));
+
+  const onInputCompositionstart = (value: InputValue, context: { e: CompositionEvent<HTMLInputElement> }) => {
+    isCompositionRef.current = true;
+    inputProps?.onCompositionstart?.(value, context);
+  };
+
+  const onInputCompositionend = (value: InputValue, context: { e: CompositionEvent<HTMLInputElement> }) => {
+    isCompositionRef.current = false;
+    inputProps?.onCompositionend?.(value, context);
+  };
+
+  const onInputEnter = (value: InputValue, context: { e: KeyboardEvent<HTMLInputElement> }) => {
+    setTInputValue("", { e: context.e, trigger: "enter" });
+    if (!isCompositionRef.current) {
+      onInnerEnter(value, context);
+    }
+    scrollToRight();
+  };
+
+  const onInnerClick = (context: { e: MouseEvent<HTMLDivElement> }) => {
+    if (!props.disabled && !props.readonly) {
+      tagInputRef.current?.currentElement?.focus?.();
+    }
+    onClick?.(context);
+  };
+
+  const onClearClick = (e: React.MouseEvent<SVGSVGElement>) => {
+    clearAll({ e });
+    setTInputValue("", { e, trigger: "clear" });
+    props.onClear?.({ e });
+  };
+
+  const suffixIconNode = showClearIcon ? (
+    <CloseCircleFilledIcon
+      className={CLEAR_CLASS}
+      onClick={onClearClick as unknown as React.MouseEventHandler<HTMLSpanElement>}
+    />
+  ) : (
+    suffixIcon
+  );
+
+  // 自定义 Tag 节点
+  const displayNode = isFunction(valueDisplay)
+    ? valueDisplay({
+        value: tagValue,
+        onClose: (index) => onClose({ index })
+      })
+    : valueDisplay;
+
+  const isEmpty = !(Array.isArray(tagValue) && tagValue.length);
+
+  const classes = [
+    NAME_CLASS,
+    {
+      [BREAK_LINE_CLASS]: excessTagsDisplayType === "break-line",
+      [WITH_SUFFIX_ICON_CLASS]: !!suffixIconNode,
+      [`${prefix}-is-empty`]: isEmpty,
+      [`${prefix}-tag-input--with-tag`]: !isEmpty,
+      [`${prefix}-tag-input--max-rows`]: excessTagsDisplayType === "break-line" && maxRows,
+      [`${prefix}-tag-input--drag-sort`]: props.dragSort && !disabled && !readonly
+    },
+    props.className
+  ];
+
+  const maxRowsStyle = maxRows
+    ? ({
+        "--max-rows": maxRows,
+        "--tag-input-size": size
+      } as React.CSSProperties)
+    : {};
+
+  return (
+    <TInput
+      ref={tagInputRef as unknown as React.Ref<HTMLInputElement>}
+      value={tInputValue}
+      onChange={(val, context) => {
+        setTInputValue(val, { ...context, trigger: "input" } as InputValueChangeContext);
+      }}
+      autoWidth={true} // 控制input_inner的宽度 设置为true让内部input不会提前换行
+      onWheel={onWheel}
+      size={size}
+      borderless={borderless}
+      readonly={readonly}
+      disabled={disabled}
+      label={renderLabel({ displayNode, label })}
+      className={classnames(classes)}
+      style={{
+        ...props.style,
+        ...maxRowsStyle
+      }}
+      tips={tips}
+      status={status}
+      placeholder={tagInputPlaceholder}
+      suffix={suffix}
+      prefixIcon={prefixIcon}
+      suffixIcon={suffixIconNode}
+      showInput={!inputProps?.readonly || !tagValue || !tagValue?.length}
+      keepWrapperWidth={!autoWidth}
+      onPaste={onPaste}
+      onClick={onInnerClick}
+      onEnter={onInputEnter}
+      onKeydown={onInputBackspaceKeyDown}
+      onKeyup={onInputBackspaceKeyUp}
+      onMouseenter={(context) => {
+        addHover(context);
+        scrollToRightOnEnter();
+      }}
+      onMouseleave={(context) => {
+        cancelHover(context);
+        scrollToLeftOnLeave();
+      }}
+      onFocus={(inputValue, context) => {
+        onFocus?.(tagValue, { e: context.e, inputValue });
+      }}
+      onBlur={(inputValue, context) => {
+        if (tInputValue) {
+          setTInputValue("", { e: context.e, trigger: "blur" });
+        }
+        onBlur?.(tagValue, { e: context.e, inputValue: "" });
+      }}
+      onCompositionstart={onInputCompositionstart}
+      onCompositionend={onInputCompositionend}
+      {...inputProps}
+    />
+  );
+});
+
+TagInput.displayName = "TagInput";
+
+export default TagInput;

package/tag-input/defaultProps.ts

@@ -0,0 +1,15 @@
+import { TdTagInputProps } from "./type";
+
+export const tagInputDefaultProps: TdTagInputProps = {
+  autoWidth: false,
+  borderless: false,
+  clearable: false,
+  dragSort: false,
+  excessTagsDisplayType: "break-line",
+  defaultInputValue: "",
+  minCollapsedNum: 0,
+  placeholder: undefined,
+  readonly: false,
+  size: "medium",
+  defaultValue: []
+};

package/tag-input/hooks/useHover.ts

@@ -0,0 +1,28 @@
+import { useState, MouseEvent } from "react";
+import { TdTagInputProps } from "../type";
+
+export interface UseHoverParams {
+  readonly: boolean;
+  disabled: boolean;
+  onMouseenter: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  onMouseleave: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+}
+
+export default function useHover(props: TdTagInputProps) {
+  const { readonly, disabled, onMouseenter, onMouseleave } = props;
+  const [isHover, setIsHover] = useState<boolean>(false);
+
+  const addHover = (context: Parameters<UseHoverParams["onMouseenter"]>[0]) => {
+    if (readonly || disabled) return;
+    setIsHover(true);
+    onMouseenter?.(context);
+  };
+
+  const cancelHover = (context: Parameters<UseHoverParams["onMouseleave"]>[0]) => {
+    if (readonly || disabled) return;
+    setIsHover(false);
+    onMouseleave?.(context);
+  };
+
+  return { isHover, addHover, cancelHover };
+}