@tendaui/components 1.0.0 → 1.0.2

package/input-number/type.ts

@@ -0,0 +1,147 @@
+import { InputProps } from "../input";
+import { TNode } from "../common";
+import { MouseEvent, KeyboardEvent, FocusEvent, FormEvent, CompositionEvent } from "react";
+
+export interface TdInputNumberProps<T = InputNumberValue> {
+  /**
+   * 文本内容位置，居左/居中/居右
+   */
+  align?: "left" | "center" | "right";
+  /**
+   * 是否允许输入超过 `max` `min` 范围外的数字。为保障用户体验，仅在失去焦点时进行数字范围矫正。默认允许超出，数字超出范围时，输入框变红提醒
+   * @default true
+   */
+  allowInputOverLimit?: boolean;
+  /**
+   * 宽度随内容自适应
+   * @default false
+   */
+  autoWidth?: boolean;
+  /**
+   * [小数位数](https://en.wiktionary.org/wiki/decimal_place)
+   */
+  decimalPlaces?: InputNumberDecimalPlaces;
+  /**
+   * 禁用组件
+   */
+  disabled?: boolean;
+  /**
+   * 格式化输入框展示值。第二个事件参数 `context.fixedNumber` 表示处理过小数位数 `decimalPlaces` 的数字
+   */
+  format?: (value: InputNumberValue, context?: { fixedNumber?: InputNumberValue }) => InputNumberValue;
+  /**
+   * 透传 Input 输入框组件全部属性
+   */
+  inputProps?: InputProps;
+  /**
+   * 左侧文本
+   */
+  label?: TNode;
+  /**
+   * 是否作为大数使用。JS 支持的最大数字位数是 16 位，超过 16 位的数字需作为字符串大数处理。此时，数据类型必须保持为字符串，否则会丢失数据
+   * @default false
+   */
+  largeNumber?: boolean;
+  /**
+   * 最大值。如果是大数，请传入字符串
+   * @default Infinity
+   */
+  max?: InputNumberValue;
+  /**
+   * 最小值。如果是大数，请传入字符串
+   * @default -Infinity
+   */
+  min?: InputNumberValue;
+  /**
+   * 占位符
+   */
+  placeholder?: string;
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
+  /**
+   * 组件尺寸
+   * @default medium
+   */
+  size?: "small" | "medium" | "large";
+  /**
+   * 文本框状态
+   * @default default
+   */
+  status?: "default" | "success" | "warning" | "error";
+  /**
+   * 数值改变步数，可以是小数。如果是大数，请保证数据类型为字符串
+   * @default 1
+   */
+  step?: InputNumberValue;
+  /**
+   * 后置内容
+   */
+  suffix?: TNode;
+  /**
+   * 按钮布局
+   * @default row
+   */
+  theme?: "column" | "row" | "normal";
+  /**
+   * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
+   */
+  tips?: TNode;
+  /**
+   * 数字输入框的值。当值为 '' 时，输入框显示为空
+   */
+  value?: T;
+  /**
+   * 数字输入框的值。当值为 '' 时，输入框显示为空，非受控属性
+   */
+  defaultValue?: T;
+  /**
+   * 失去焦点时触发
+   */
+  onBlur?: (value: InputNumberValue, context: { e: FocusEvent<HTMLDivElement> }) => void;
+  /**
+   * 值变化时触发，`type` 表示触发本次变化的来源
+   */
+  onChange?: (value: T, context: ChangeContext) => void;
+  /**
+   * 回车键按下时触发
+   */
+  onEnter?: (value: InputNumberValue, context: { e: KeyboardEvent<HTMLDivElement> }) => void;
+  /**
+   * 获取焦点时触发
+   */
+  onFocus?: (value: InputNumberValue, context: { e: FocusEvent<HTMLDivElement> }) => void;
+  /**
+   * 键盘按下时触发
+   */
+  onKeydown?: (value: InputNumberValue, context: { e: KeyboardEvent<HTMLDivElement> }) => void;
+  /**
+   * 按下字符键时触发（keydown -> keypress -> keyup）
+   */
+  onKeypress?: (value: InputNumberValue, context: { e: KeyboardEvent<HTMLDivElement> }) => void;
+  /**
+   * 释放键盘时触发
+   */
+  onKeyup?: (value: InputNumberValue, context: { e: KeyboardEvent<HTMLDivElement> }) => void;
+  /**
+   * 最大值或最小值校验结束后触发，`exceed-maximum` 表示超出最大值，`below-minimum` 表示小于最小值
+   */
+  onValidate?: (context: { error?: "exceed-maximum" | "below-minimum" }) => void;
+}
+
+export type InputNumberDecimalPlaces = number | { enableRound: boolean; places: number };
+
+export type InputNumberValue = number | string;
+
+export interface ChangeContext {
+  type: ChangeSource;
+  e:
+    | FormEvent<HTMLInputElement>
+    | MouseEvent<HTMLDivElement | SVGElement>
+    | FocusEvent<HTMLDivElement>
+    | KeyboardEvent<HTMLDivElement>
+    | CompositionEvent<HTMLDivElement>;
+}
+
+export type ChangeSource = "add" | "reduce" | "input" | "blur" | "enter" | "clear" | "props";

package/input-number/useInputNumber.tsx

@@ -0,0 +1,270 @@
+import React, { useState, useRef, useEffect } from "react";
+import classNames from "classnames";
+import {
+  canAddNumber,
+  canInputNumber,
+  canReduceNumber,
+  formatUnCompleteNumber,
+  canSetValue,
+  getMaxOrMinValidateResult,
+  getStepValue,
+  formatThousandths,
+  largeNumberToFixed
+} from "../utils/input-number/number";
+import useConfig from "../hooks/useConfig";
+import useControlled from "../hooks/useControlled";
+import useCommonClassName from "../hooks/useCommonClassName";
+import { InputNumberValue, TdInputNumberProps } from "./type";
+import { InputProps } from "../input";
+
+export const specialCode = ["-", ".", "e", "E"];
+
+/**
+ * 独立一个组件 Hook 方便用户直接使用相关逻辑 自定义任何样式的数字输入框
+ */
+export default function useInputNumber<T extends InputNumberValue = InputNumberValue>(props: TdInputNumberProps<T>) {
+  const { SIZE, STATUS } = useCommonClassName();
+  const { classPrefix } = useConfig();
+  const [tValue, onChange] = useControlled(props, "value", props.onChange);
+  const [userInput, setUserInput] = useState("");
+  const [isError, setIsError] = useState<"exceed-maximum" | "below-minimum">();
+
+  const inputRef = useRef(null);
+
+  const { max, min, largeNumber, decimalPlaces, allowInputOverLimit, onValidate } = props;
+
+  const disabledReduce = props.disabled || !canReduceNumber(tValue, props.min, props.largeNumber);
+  const disabledAdd = props.disabled || !canAddNumber(tValue, props.max, props.largeNumber);
+
+  const wrapClasses = classNames(`${classPrefix}-input-number`, SIZE[props.size], {
+    [STATUS.disabled]: props.disabled,
+    [`${classPrefix}-is-controls-right`]: props.theme === "column",
+    [`${classPrefix}-input-number--${props.theme}`]: props.theme,
+    [`${classPrefix}-input-number--auto-width`]: props.autoWidth
+  });
+
+  const reduceClasses = classNames(`${classPrefix}-input-number__decrease`, { [STATUS.disabled]: disabledReduce });
+  const addClasses = classNames(`${classPrefix}-input-number__increase`, { [STATUS.disabled]: disabledAdd });
+
+  const getUserInput = (value: InputNumberValue) => {
+    if (!value && value !== 0) return "";
+    let inputStr = value || value === 0 ? String(value) : "";
+    if (!inputRef.current.currentElement.contains?.(document.activeElement)) {
+      const num = formatUnCompleteNumber(inputStr, {
+        decimalPlaces,
+        largeNumber,
+        isToFixed: true
+      });
+      inputStr = num || num === 0 ? String(num) : "";
+      if (props.format) {
+        inputStr = String(props.format(value, { fixedNumber: inputStr }));
+      }
+    }
+    return inputStr;
+  };
+
+  useEffect(() => {
+    const inputValue = [undefined, null].includes(tValue) ? "" : String(tValue);
+    // userInput.value 为非合法数字，则表示用户正在输入，此时无需处理
+    if (!largeNumber && !Number.isNaN(userInput)) {
+      if (parseFloat(userInput) !== tValue) {
+        setUserInput(getUserInput(inputValue));
+      }
+      const fixedNumber = Number(largeNumberToFixed(inputValue, decimalPlaces, largeNumber));
+      if (
+        decimalPlaces !== undefined &&
+        ![undefined, null].includes(tValue) &&
+        Number(fixedNumber) !== Number(tValue)
+      ) {
+        onChange(fixedNumber as T, { type: "props", e: undefined });
+      }
+    }
+    if (largeNumber) {
+      const tmpUserInput = getUserInput(inputValue);
+      setUserInput(tmpUserInput);
+      if (decimalPlaces !== undefined && largeNumberToFixed(inputValue, decimalPlaces, largeNumber) !== tValue) {
+        onChange(tmpUserInput as T, { type: "props", e: undefined });
+      }
+    }
+    // eslint-disable-next-line
+  }, [tValue]);
+
+  useEffect(() => {
+    // @ts-ignore
+    if ([undefined, "", null].includes(tValue)) return;
+    const error = getMaxOrMinValidateResult({
+      value: tValue as InputNumberValue,
+      max,
+      min,
+      largeNumber
+    });
+    setIsError(error);
+    onValidate?.({ error });
+  }, [tValue, max, min, largeNumber, onValidate]);
+
+  const handleStepValue = (op: "add" | "reduce") => {
+    const newValue = getStepValue({
+      op,
+      step: props.step,
+      max: props.max,
+      min: props.min,
+      lastValue: tValue,
+      largeNumber: props.largeNumber
+    });
+    const { largeNumber, max, min } = props;
+    const overLimit = getMaxOrMinValidateResult({
+      value: newValue,
+      largeNumber,
+      max,
+      min
+    });
+    return {
+      overLimit,
+      newValue
+    };
+  };
+
+  const handleReduce = (e: any) => {
+    if (disabledReduce || props.readonly) return;
+    const r = handleStepValue("reduce");
+    if (r.overLimit && !allowInputOverLimit) return;
+    onChange(r.newValue, { type: "reduce", e });
+  };
+
+  const handleAdd = (e: any) => {
+    if (disabledAdd || props.readonly) return;
+    const r = handleStepValue("add");
+    if (r.overLimit && !allowInputOverLimit) return;
+    onChange(r.newValue, { type: "add", e });
+  };
+
+  // 1.2 -> 1. -> 1
+  const onInnerInputChange: InputProps["onChange"] = (inputValue, { e }) => {
+    // 处理千分位
+    const val = formatThousandths(inputValue);
+    if (!canInputNumber(val, largeNumber)) return;
+
+    setUserInput(val);
+
+    if (largeNumber) {
+      onChange(val as T, { type: "input", e: e as any });
+      return;
+    }
+
+    if (canSetValue(String(val), Number(tValue))) {
+      const newVal = val === "" ? undefined : Number(val);
+      onChange(newVal as T, { type: "input", e: e as any });
+    }
+  };
+
+  const handleBlur = (value: string, ctx: { e: React.FocusEvent<HTMLDivElement, Element> }) => {
+    if (!props.allowInputOverLimit && value !== undefined) {
+      const r = getMaxOrMinValidateResult({
+        value: tValue,
+        largeNumber,
+        max,
+        min
+      });
+      if (r === "below-minimum") {
+        onChange(min as T, { type: "blur", e: ctx.e });
+        return;
+      }
+      if (r === "exceed-maximum") {
+        onChange(max as T, { type: "blur", e: ctx.e });
+        return;
+      }
+    }
+    const newValue = formatUnCompleteNumber(value, {
+      decimalPlaces,
+      largeNumber
+    });
+    setUserInput(getUserInput(newValue));
+    if (newValue !== tValue) {
+      setUserInput(tValue as string);
+      onChange(newValue as T, { type: "blur", e: ctx.e });
+    }
+    props.onBlur?.(newValue, ctx);
+  };
+
+  const handleFocus = (_: string, ctx: { e: React.FocusEvent<HTMLDivElement, Element> }) => {
+    setUserInput(tValue as string);
+    props.onFocus?.(tValue as string, ctx);
+  };
+
+  const handleKeydown = (value: string, ctx: { e: React.KeyboardEvent<HTMLDivElement> }) => {
+    const { e } = ctx;
+    const keyEvent = {
+      ArrowUp: handleAdd,
+      ArrowDown: handleReduce
+    };
+
+    if (keyEvent[e.key] !== undefined) {
+      keyEvent[e.key](e);
+    }
+    props.onKeydown?.(value, ctx);
+  };
+
+  const handleKeyup = (value: string, ctx: { e: React.KeyboardEvent<HTMLDivElement> }) => {
+    props.onKeyup?.(value, ctx);
+  };
+
+  const handleKeypress = (value: string, ctx: { e: React.KeyboardEvent<HTMLDivElement> }) => {
+    props.onKeypress?.(value, ctx);
+  };
+
+  const handleEnter = (value: string, ctx: { e: React.KeyboardEvent<HTMLDivElement> }) => {
+    setUserInput(getUserInput(value));
+    const newValue = formatUnCompleteNumber(value, {
+      decimalPlaces: props.decimalPlaces,
+      largeNumber: props.largeNumber
+    });
+    if (newValue !== value && String(newValue) !== value) {
+      onChange(newValue as T, { type: "enter", e: ctx.e });
+    }
+    props.onEnter?.(newValue, ctx);
+  };
+
+  const handleClear: InputProps["onClear"] = ({ e }) => {
+    onChange(undefined, { type: "clear", e });
+    setUserInput("");
+  };
+
+  const focus = () => {
+    inputRef.current.focus();
+  };
+
+  const blur = () => {
+    inputRef.current.blur();
+  };
+
+  const listeners = {
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onKeydown: handleKeydown,
+    onKeyup: handleKeyup,
+    onKeypress: handleKeypress,
+    onEnter: handleEnter,
+    onClick: focus,
+    onClear: handleClear
+  };
+
+  return {
+    classPrefix,
+    wrapClasses,
+    reduceClasses,
+    addClasses,
+    inputRef,
+    listeners,
+    isError,
+    setIsError,
+    userInput,
+    setUserInput,
+    tValue,
+    focus,
+    blur,
+    onChange,
+    handleReduce,
+    handleAdd,
+    onInnerInputChange
+  };
+}