@tendaui/components 1.3.0 → 1.3.1

package/input-number/useInputNumber.tsx

@@ -1,270 +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
-  };
-}
+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
+  };
+}

package/list/ListItem.tsx

@@ -1,36 +1,36 @@
-import React, { forwardRef } from "react";
-import classNames from "classnames";
-import useConfig from "../hooks/useConfig";
-import { TdListItemProps } from "./type";
-import { StyledProps } from "../common";
-
-export interface ListItemProps extends TdListItemProps, StyledProps {
-  /**
-   * 文本内容
-   */
-  children?: React.ReactNode;
-  content?: React.ReactNode;
-}
-
-/**
- * 列表组件
- */
-const ListItem = forwardRef<HTMLLIElement, ListItemProps>((props, ref) => {
-  const { children, className, style, action, content } = props;
-  const { classPrefix } = useConfig();
-
-  const actionElement = action && <ul className={`${classPrefix}-list-item__action`}>{action}</ul>;
-
-  return (
-    <li ref={ref} className={classNames(`${classPrefix}-list-item`, className)} style={style}>
-      <div className={`${classPrefix}-list-item-main`}>
-        {children ? children : content}
-        {actionElement}
-      </div>
-    </li>
-  );
-});
-
-ListItem.displayName = "ListItem";
-
-export default ListItem;
+import React, { forwardRef } from "react";
+import classNames from "classnames";
+import useConfig from "../hooks/useConfig";
+import { TdListItemProps } from "./type";
+import { StyledProps } from "../common";
+
+export interface ListItemProps extends TdListItemProps, StyledProps {
+  /**
+   * 文本内容
+   */
+  children?: React.ReactNode;
+  content?: React.ReactNode;
+}
+
+/**
+ * 列表组件
+ */
+const ListItem = forwardRef<HTMLLIElement, ListItemProps>((props, ref) => {
+  const { children, className, style, action, content } = props;
+  const { classPrefix } = useConfig();
+
+  const actionElement = action && <ul className={`${classPrefix}-list-item__action`}>{action}</ul>;
+
+  return (
+    <li ref={ref} className={classNames(`${classPrefix}-list-item`, className)} style={style}>
+      <div className={`${classPrefix}-list-item-main`}>
+        {children ? children : content}
+        {actionElement}
+      </div>
+    </li>
+  );
+});
+
+ListItem.displayName = "ListItem";
+
+export default ListItem;