@tendaui/components 1.2.4 → 1.3.0

package/input-number/_example/with-suffix.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import InputNumber from "../index";
+
+const WithSuffixInputNumber = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+    <InputNumber suffix="个" defaultValue={10} style={{ width: 200 }} />
+    <InputNumber suffix="元" defaultValue={100} style={{ width: 200 }} />
+    <InputNumber suffix="kg" defaultValue={50} style={{ width: 200 }} />
+  </div>
+);
+
+export default WithSuffixInputNumber;

package/input-number/defaultProps.ts

@@ -1,17 +1,17 @@
-import { TdInputNumberProps } from "./type";
-
-export const inputNumberDefaultProps: TdInputNumberProps = {
-  allowInputOverLimit: true,
-  autoWidth: false,
-  decimalPlaces: undefined,
-  disabled: undefined,
-  largeNumber: false,
-  max: Infinity,
-  min: -Infinity,
-  placeholder: undefined,
-  readonly: undefined,
-  size: "medium",
-  status: "default",
-  step: 1,
-  theme: "row"
-};
+import { TdInputNumberProps } from "./type";
+
+export const inputNumberDefaultProps: TdInputNumberProps = {
+  allowInputOverLimit: true,
+  autoWidth: false,
+  decimalPlaces: undefined,
+  disabled: undefined,
+  largeNumber: false,
+  max: Infinity,
+  min: -Infinity,
+  placeholder: undefined,
+  readonly: undefined,
+  size: "medium",
+  status: "default",
+  step: 1,
+  theme: "row"
+};

package/input-number/index.ts

@@ -1,9 +1,9 @@
-import _InputNumber from "./InputNumber";
-
-import "./style/index.js";
-
-export type { InputNumberProps } from "./InputNumber";
-export * from "./type";
-
-export const InputNumber = _InputNumber;
-export default InputNumber;
+import _InputNumber from "./InputNumber";
+
+import "./style/index.js";
+
+export type { InputNumberProps } from "./InputNumber";
+export * from "./type";
+
+export const InputNumber = _InputNumber;
+export default InputNumber;

package/input-number/style/css.js

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

package/input-number/style/index.js

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

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/ip-input/_example/controlled.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import IPInput from "../IPInput";
+import { Button } from "@tendaui/react";
+
+const ControlledExample = () => {
+  const [value, setValue] = useState("192.168.1.1");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <IPInput value={value} onChange={setValue} allowCIDR={true} showClear={true} />
+      <div style={{ color: "#666", fontSize: "12px" }}>当前值: {value || "(空)"}</div>
+      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+        <Button size="small" onClick={() => setValue("10.0.0.1")}>
+          设为 10.0.0.1
+        </Button>
+        <Button size="small" onClick={() => setValue("172.16.0.1/24")}>
+          设为 172.16.0.1/24
+        </Button>
+        <Button size="small" onClick={() => setValue("")}>
+          清空
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ControlledExample;

package/ip-input/_example/default.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import IPInput from "../IPInput";
+
+const DefaultExample = () => (
+  <IPInput
+    placeholder="192.168.0.1"
+    allowIPv6={false}
+    allowCIDR={false}
+  />
+);
+
+export default DefaultExample;