@tendaui/components 1.0.0

package/input/Input.tsx

@@ -0,0 +1,383 @@
+import React, { useState, useRef, useEffect, useImperativeHandle, forwardRef } from "react";
+import classNames from "classnames";
+import { IconEyeOpened, IconEyeClosed, IconClose } from "@tendaui/icons";
+import { TdInputProps } from "./type";
+import useLayoutEffect from "../hooks/useLayoutEffect";
+import useControlled from "../hooks/useControlled";
+import { inputDefaultProps } from "./defaultProps";
+import parseTNode from "../utils/parseTNode";
+import useDefaultProps from "../hooks/useDefaultProps";
+import { StyledProps, TNode, TElement } from "../common";
+import { isFunction } from "lodash-es";
+import useConfig from "../hooks/useConfig";
+export interface InputProps extends TdInputProps, StyledProps {
+  showInput?: boolean; // 控制透传readonly同时是否展示input 默认保留 因为正常Input需要撑开宽度
+  keepWrapperWidth?: boolean; // 控制透传autoWidth之后是否容器宽度也自适应 多选等组件需要用到自适应但也需要保留宽度
+}
+
+export interface InputRef extends React.RefObject<unknown> {
+  currentElement: HTMLDivElement;
+  inputElement: HTMLInputElement;
+  focus: () => void;
+  blur: () => void;
+  select: () => void;
+}
+
+type InputContextTrigger = "input" | "clear" | "initial";
+
+const renderIcon = (classPrefix: string, type: "prefix" | "suffix", icon: TNode | TElement) => {
+  const result = parseTNode(icon);
+
+  const iconClassName = icon ? `${classPrefix}-input__${type}-icon` : "";
+
+  return result ? <span className={`${classPrefix}-input__${type} ${iconClassName}`}>{result}</span> : null;
+};
+
+const Input = forwardRef<HTMLInputElement, InputProps>((originalProps, ref) => {
+  const props = useDefaultProps<InputProps>(originalProps, inputDefaultProps as Partial<InputProps>);
+  const { classPrefix } = useConfig();
+
+  const {
+    type,
+    autoWidth,
+    borderless,
+    placeholder = "请输入内容",
+    disabled,
+    size,
+    className,
+    inputClass,
+    style,
+    prefixIcon,
+    suffixIcon,
+    clearable,
+    tips,
+    align,
+    showClearIconOnEmpty,
+    autofocus,
+    autocomplete,
+    readonly,
+    label,
+    suffix,
+    showInput = true,
+    keepWrapperWidth,
+    allowInput,
+    name,
+    format,
+    onClick,
+    onClear,
+    onEnter,
+    onKeydown,
+    onKeyup,
+    onKeypress,
+    onFocus,
+    onBlur,
+    onPaste,
+    onMouseenter,
+    onMouseleave,
+    onWheel,
+    onCompositionstart,
+    onCompositionend,
+    onChange: onChangeFromProps,
+    ...restProps
+  } = props;
+  const composingRef = useRef(false);
+  const [value, onChange] = useControlled(props, "value", onChangeFromProps);
+  const inputRef: React.RefObject<HTMLInputElement | null> = useRef(null);
+  const inputPreRef: React.RefObject<HTMLInputElement | null> = useRef(null);
+  const wrapperRef: React.RefObject<HTMLDivElement | null> = useRef(null);
+
+  const [isHover, toggleIsHover] = useState(false);
+  const [isFocused, toggleIsFocused] = useState(false);
+  const [renderType, setRenderType] = useState(type);
+
+  const [composingValue, setComposingValue] = useState<string>("");
+  const isInnerInputReadonly = readonly || !allowInput;
+  const isValueEnabled = value && !disabled;
+  const isShowClearIcon = ((clearable && isValueEnabled) || showClearIconOnEmpty) && isHover;
+  let suffixIconNew = suffixIcon;
+  if (isShowClearIcon)
+    suffixIconNew = (
+      <IconClose
+        className={`${classPrefix}-input__suffix-clear ${classPrefix}-icon`}
+        onMouseDown={handleMouseDown}
+        onClick={handleClear}
+      />
+    );
+
+  if (type === "password" && typeof suffixIcon === "undefined") {
+    if (renderType === "password") {
+      suffixIconNew = (
+        <IconEyeClosed
+          className={`${classPrefix}-input__suffix-clear ${classPrefix}-icon`}
+          onClick={togglePasswordVisible}
+        />
+      );
+    } else if (renderType === "text") {
+      suffixIconNew = (
+        <IconEyeOpened
+          className={`${classPrefix}-input__suffix-clear ${classPrefix}-icon`}
+          onClick={togglePasswordVisible}
+        />
+      );
+    }
+  }
+  const prefixIconContent = renderIcon("t", "prefix", parseTNode(prefixIcon));
+  const suffixIconContent = renderIcon("t", "suffix", parseTNode(suffixIconNew));
+  const labelContent = isFunction(label) ? label() : label;
+  const suffixContent = isFunction(suffix) ? suffix() : suffix;
+
+  const updateInputWidth = () => {
+    if (!autoWidth || !inputRef.current) return;
+    const { offsetWidth } = inputPreRef.current as HTMLInputElement;
+    const { width } = inputPreRef.current?.getBoundingClientRect() as DOMRect;
+    // 异步渲染场景下 getBoundingClientRect 宽度为 0，需要使用 offsetWidth
+    const calcWidth = width < offsetWidth ? offsetWidth + 1 : width;
+    inputRef.current.style.width = `${calcWidth}px`;
+  };
+
+  useLayoutEffect(() => {
+    // 推迟到下一帧处理防止异步渲染 input 场景宽度计算为 0
+    requestAnimationFrame(() => {
+      updateInputWidth();
+    });
+    // eslint-disable-next-line
+  }, [autoWidth, value, placeholder, inputRef, composingValue]);
+
+  // 当元素默认为 display: none 状态，无法提前准确计算宽度，因此需要监听元素宽度变化。比如：Tabs 场景切换。
+  useEffect(() => {
+    let resizeObserver: ResizeObserver | null = null;
+    // IE 11 以下使用设置 minWidth 兼容；IE 11 以上使用 ResizeObserver
+    if (typeof window.ResizeObserver === "undefined" || !inputRef.current) return;
+    resizeObserver = new window.ResizeObserver(() => {
+      updateInputWidth();
+    });
+    resizeObserver.observe(inputRef.current);
+    return () => {
+      // resizeObserver.unobserve?.(inputRef.current);
+      resizeObserver.disconnect?.();
+      resizeObserver = null;
+    };
+    // eslint-disable-next-line
+  }, [inputRef]);
+
+  useEffect(() => {
+    setRenderType(type);
+  }, [type]);
+
+  const innerValue = composingRef.current ? composingValue : value ?? "";
+  const formatDisplayValue = format && !isFocused ? format(innerValue) : innerValue;
+
+  const renderInput = (
+    <input
+      ref={inputRef}
+      placeholder={placeholder}
+      type={renderType}
+      className={classNames(`${classPrefix}-input__inner`, {
+        [`${classPrefix}-input--soft-hidden`]: !showInput
+      })}
+      value={formatDisplayValue}
+      readOnly={isInnerInputReadonly}
+      disabled={disabled}
+      autoComplete={autocomplete}
+      autoFocus={autofocus}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
+      onKeyUp={handleKeyUp}
+      onKeyPress={handleKeyPress}
+      onCompositionStart={handleCompositionStart}
+      onCompositionEnd={handleCompositionEnd}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      onPaste={handlePaste}
+      name={name}
+    />
+  );
+  const renderInputNode = (
+    <div
+      className={classNames(inputClass, `${classPrefix}-input`, {
+        [`${classPrefix}-is-readonly`]: readonly,
+        [`${classPrefix}-is-disabled`]: disabled,
+        [`${classPrefix}-is-focused`]: isFocused,
+        [`${classPrefix}-size-s`]: size === "small",
+        [`${classPrefix}-size-l`]: size === "large",
+        [`${classPrefix}-align-${align}`]: align,
+        [`${classPrefix}-inpu${classPrefix}--prefix`]: prefixIcon || labelContent,
+        [`${classPrefix}-inpu${classPrefix}--suffix`]: suffixIconContent || suffixContent,
+        [`${classPrefix}-inpu${classPrefix}--borderless`]: borderless,
+        [`${classPrefix}-input--focused`]: isFocused
+      })}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onWheel={(e) => onWheel?.({ e })}
+      onClick={(e) => {
+        inputRef.current?.focus();
+        onClick?.({ e });
+      }}
+    >
+      {prefixIconContent}
+      {labelContent ? <div className={`${classPrefix}-input__prefix`}>{labelContent}</div> : null}
+      {renderInput}
+      {autoWidth && (
+        <span ref={inputPreRef} className={`${classPrefix}-input__inpu${classPrefix}-pre`}>
+          {innerValue || placeholder}
+        </span>
+      )}
+      {suffixContent ? <div className={`${classPrefix}-input__suffix`}>{suffixContent}</div> : null}
+      {suffixIconContent}
+    </div>
+  );
+  useLayoutEffect(() => {
+    // 推迟到下一帧处理防止异步渲染 input 场景宽度计算为 0
+    requestAnimationFrame(() => {
+      updateInputWidth();
+    });
+    // eslint-disable-next-line
+  }, [autoWidth, value, placeholder, inputRef, composingValue]);
+
+  function togglePasswordVisible() {
+    if (disabled) return;
+    // 保存光标位置
+    const inputEl = inputRef.current;
+    const cursorPosition = inputRef.current?.selectionStart || 0;
+
+    const toggleType = renderType === "password" ? "text" : "password";
+    setRenderType(toggleType);
+
+    requestAnimationFrame(() => {
+      inputEl?.setSelectionRange(cursorPosition, cursorPosition);
+    });
+  }
+
+  function handleChange(
+    e: React.ChangeEvent<HTMLInputElement> | React.CompositionEvent<HTMLInputElement>,
+    trigger: InputContextTrigger = "input"
+  ) {
+    let { value: newStr } = e.currentTarget;
+    if (composingRef.current) {
+      setComposingValue(newStr);
+    } else {
+      // 完成中文输入时同步一次 composingValue
+      setComposingValue(newStr);
+      onChange(newStr, { e, trigger });
+    }
+  }
+
+  // 添加MouseDown阻止冒泡，防止點擊Clear value會導致彈窗閃爍一下
+  // https://github.com/Tencent/tdesign-react/issues/2320
+  function handleMouseDown(e: React.MouseEvent<HTMLSpanElement, globalThis.MouseEvent>) {
+    e.stopPropagation();
+    // 兼容React16
+    e.nativeEvent.stopImmediatePropagation();
+  }
+
+  function handleClear(e: React.MouseEvent<HTMLSpanElement>) {
+    onChange?.("", { e, trigger: "clear" });
+    onClear?.({ e: e as unknown as React.MouseEvent<SVGElement> });
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    const {
+      key,
+      currentTarget: { value }
+    } = e;
+    if (key === "Enter") {
+      onEnter?.(value, { e });
+    }
+    onKeydown?.(value, { e });
+  }
+
+  function handleKeyUp(e: React.KeyboardEvent<HTMLInputElement>) {
+    const {
+      currentTarget: { value }
+    } = e;
+    onKeyup?.(value, { e });
+  }
+
+  function handleKeyPress(e: React.KeyboardEvent<HTMLInputElement>) {
+    const {
+      currentTarget: { value }
+    } = e;
+    onKeypress?.(value, { e });
+  }
+
+  function handleCompositionStart(e: React.CompositionEvent<HTMLInputElement>) {
+    composingRef.current = true;
+    const {
+      currentTarget: { value }
+    } = e;
+    onCompositionstart?.(value, { e });
+  }
+
+  function handleCompositionEnd(e: React.CompositionEvent<HTMLInputElement>) {
+    const {
+      currentTarget: { value }
+    } = e;
+    if (composingRef.current) {
+      composingRef.current = false;
+      handleChange(e);
+    }
+    onCompositionend?.(value, { e });
+  }
+
+  function handleFocus(e: React.FocusEvent<HTMLInputElement>) {
+    if (isInnerInputReadonly) return;
+    const {
+      currentTarget: { value }
+    } = e;
+    onFocus?.(value, { e });
+    toggleIsFocused(true);
+  }
+
+  function handleBlur(e: React.FocusEvent<HTMLInputElement>) {
+    if (isInnerInputReadonly) return;
+    const {
+      currentTarget: { value }
+    } = e;
+    onBlur?.(value, { e });
+    toggleIsFocused(false);
+  }
+
+  function handlePaste(e: React.ClipboardEvent<HTMLInputElement>) {
+    const clipData = e.clipboardData;
+    const pasteValue = clipData?.getData("text/plain");
+    onPaste?.({ e, pasteValue });
+  }
+
+  function handleMouseEnter(e: React.MouseEvent<HTMLDivElement>) {
+    if (!readonly) {
+      toggleIsHover(true);
+    }
+    onMouseenter?.({ e });
+  }
+
+  function handleMouseLeave(e: React.MouseEvent<HTMLDivElement>) {
+    if (!readonly) {
+      toggleIsHover(false);
+    }
+    onMouseleave?.({ e });
+  }
+
+  useImperativeHandle(ref as InputRef, () => ({
+    currentElement: wrapperRef.current,
+    inputElement: inputRef.current,
+    focus: () => inputRef.current?.focus(),
+    blur: () => inputRef.current?.blur(),
+    select: () => inputRef.current?.select()
+  }));
+
+  return (
+    <div
+      ref={wrapperRef}
+      style={style}
+      className={classNames(`${classPrefix}-input__wrap`, className, {
+        [`${classPrefix}-input--auto-width`]: autoWidth && !keepWrapperWidth
+      })}
+      {...restProps}
+    >
+      {renderInputNode}
+      {tips && <div className={classNames(`${classPrefix}-input__tips`)}>{tips}</div>}
+    </div>
+  );
+});
+Input.displayName = "Input";
+export default Input;

package/input/InputGroup.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef } from "react";
+import classNames from "classnames";
+
+export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * 是否拆分
+   * @default false
+   */
+  separate?: boolean;
+}
+
+const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>((props, ref) => {
+  const { separate, children, className, ...wrapperProps } = props;
+  return (
+    <div
+      ref={ref}
+      className={classNames(`t-input-group`, className, {
+        [`t-input-group--separate`]: separate
+      })}
+      {...wrapperProps}
+    >
+      {children}
+    </div>
+  );
+});
+
+InputGroup.displayName = "InputGroup";
+
+export default InputGroup;

package/input/defaultProps.ts

@@ -0,0 +1,22 @@
+export const inputDefaultProps = {
+  align: "left" as "left" | "center" | "right",
+  allowInputOverMax: false,
+  autoWidth: false,
+  autocomplete: undefined,
+  autofocus: false,
+  borderless: false,
+  // 是否允许输入，默认是 true，表示组件内部的 input 元素允许输入；readonly 为 true 时，此值失效
+  allowInput: true,
+  // 是否可清空，值为 true 时，输入框后会有一个清空按钮，点击后清空输入框；readonly 为 true 时，此值失效
+  clearable: false,
+  placeholder: undefined,
+  // 是否只读，在只读模式下，输入框不能输入，且没有清除按钮，优先级高于 allowInput、clearable
+  readonly: false,
+  showClearIconOnEmpty: false,
+  showLimitNumber: false,
+  size: "medium",
+  spellCheck: false,
+  status: "default",
+  type: "text",
+  defaultValue: ""
+};

package/input/index.ts

@@ -0,0 +1,11 @@
+import _Input from "./Input";
+import _InputGroup from "./InputGroup";
+import "./style/index.js";
+
+export type { InputProps, InputRef } from "./Input";
+
+export * from "./type";
+
+export const Input = _Input;
+export const InputGroup = _InputGroup;
+export default Input;

package/input/style/css.js

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

package/input/style/index.js

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

package/input/type.ts

@@ -0,0 +1,219 @@
+import { TNode, TElement, SizeEnum, ClassName } from "../common";
+import { MouseEvent, KeyboardEvent, ClipboardEvent, FocusEvent, WheelEvent, FormEvent, CompositionEvent } from "react";
+
+export interface TdInputProps {
+  /**
+   * 文本内容位置，居左/居中/居右
+   * @default left
+   */
+  align?: "left" | "center" | "right";
+  /**
+   * 输入框是否可输入内容
+   * @default true
+   */
+  allowInput?: boolean;
+  /**
+   * 超出 `maxlength` 或 `maxcharacter` 之后是否允许继续输入
+   * @default false
+   */
+  allowInputOverMax?: boolean;
+  /**
+   * 宽度随内容自适应
+   * @default false
+   */
+  autoWidth?: boolean;
+  /**
+   * 是否开启自动填充功能，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
+   */
+  autocomplete?: string;
+  /**
+   * 自动聚焦
+   * @default false
+   */
+  autofocus?: boolean;
+  /**
+   * 是否开启无边框模式
+   * @default false
+   */
+  borderless?: boolean;
+  /**
+   * 是否可清空
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * 是否禁用输入框
+   */
+  disabled?: boolean;
+  /**
+   * 指定输入框展示值的格式
+   */
+  format?: InputFormatType;
+  /**
+   * t-input 同级类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`
+   */
+  inputClass?: ClassName;
+  /**
+   * 左侧文本
+   */
+  label?: TNode;
+  /**
+   * 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用
+   */
+  maxcharacter?: number;
+  /**
+   * 用户最多可以输入的文本长度，一个中文等于一个计数长度。值为空，则表示不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用
+   */
+  maxlength?: number;
+  /**
+   * 名称
+   * @default ''
+   */
+  name?: string;
+  /**
+   * 占位符
+   */
+  placeholder?: string;
+  /**
+   * 组件前置图标
+   */
+  prefixIcon?: TElement;
+  /**
+   * 只读状态
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * 输入框内容为空时，悬浮状态是否显示清空按钮，默认不显示
+   * @default false
+   */
+  showClearIconOnEmpty?: boolean;
+  /**
+   * 是否在输入框右侧显示字数统计
+   * @default false
+   */
+  showLimitNumber?: boolean;
+  /**
+   * 输入框尺寸
+   * @default medium
+   */
+  size?: SizeEnum;
+  /**
+   * 是否开启拼写检查，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck)
+   * @default false
+   */
+  spellCheck?: boolean;
+  /**
+   * 输入框状态
+   * @default default
+   */
+  status?: "default" | "success" | "warning" | "error";
+  /**
+   * 后置图标前的后置内容
+   */
+  suffix?: TNode;
+  /**
+   * 组件后置图标
+   */
+  suffixIcon?: TElement;
+  /**
+   * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
+   */
+  tips?: TNode;
+  /**
+   * 输入框类型
+   * @default text
+   */
+  type?: "text" | "number" | "url" | "tel" | "password" | "search" | "submit" | "hidden";
+  /**
+   * 输入框的值
+   * @default ''
+   */
+  value?: InputValue;
+  /**
+   * 输入框的值，非受控属性
+   * @default ''
+   */
+  defaultValue?: InputValue;
+  /**
+   * 失去焦点时触发
+   */
+  onBlur?: (value: InputValue, context: { e: FocusEvent<HTMLInputElement> }) => void;
+  /**
+   * 输入框值发生变化时触发。参数 `trigger=initial` 表示传入的数据不符合预期，组件自动处理后触发 change 告知父组件。如：初始值长度超过 `maxlength` 限制
+   */
+  onChange?: (
+    value: InputValue,
+    context?: {
+      e?: FormEvent<HTMLInputElement> | MouseEvent<Element> | CompositionEvent<HTMLDivElement>;
+      trigger: "input" | "initial" | "clear";
+    }
+  ) => void;
+  /**
+   * 清空按钮点击时触发
+   */
+  onClear?: (context: { e: MouseEvent<SVGElement> }) => void;
+  /**
+   * 点击组件时触发
+   */
+  onClick?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 中文输入结束时触发
+   */
+  onCompositionend?: (value: InputValue, context: { e: CompositionEvent<HTMLDivElement> }) => void;
+  /**
+   * 中文输入开始时触发
+   */
+  onCompositionstart?: (value: InputValue, context: { e: CompositionEvent<HTMLDivElement> }) => void;
+  /**
+   * 回车键按下时触发
+   */
+  onEnter?: (value: InputValue, context: { e: KeyboardEvent<HTMLInputElement> }) => void;
+  /**
+   * 获得焦点时触发
+   */
+  onFocus?: (value: InputValue, context: { e: FocusEvent<HTMLInputElement> }) => void;
+  /**
+   * 键盘按下时触发
+   */
+  onKeydown?: (value: InputValue, context: { e: KeyboardEvent<HTMLDivElement> }) => void;
+  /**
+   * 按下字符键时触发（keydown -> keypress -> keyup）
+   */
+  onKeypress?: (value: InputValue, context: { e: KeyboardEvent<HTMLDivElement> }) => void;
+  /**
+   * 释放键盘时触发
+   */
+  onKeyup?: (value: InputValue, context: { e: KeyboardEvent<HTMLDivElement> }) => void;
+  /**
+   * 进入输入框时触发
+   */
+  onMouseenter?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 离开输入框时触发
+   */
+  onMouseleave?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 粘贴事件，`pasteValue` 表示粘贴板的内容
+   */
+  onPaste?: (context: { e: ClipboardEvent<HTMLDivElement>; pasteValue: string }) => void;
+  /**
+   * 字数超出限制时触发
+   */
+  onValidate?: (context: { error?: "exceed-maximum" | "below-minimum" }) => void;
+  /**
+   * 输入框中滚动鼠标时触发
+   */
+  onWheel?: (context: { e: WheelEvent<HTMLDivElement> }) => void;
+}
+
+export interface TdInputGroupProps {
+  /**
+   * 多个输入框之间是否需要间隔
+   */
+  separate?: boolean;
+}
+
+export type InputFormatType = (value: InputValue) => string;
+
+export type InputValue = string;