@tendaui/components 1.2.4 → 1.3.0

package/input/useLengthLimit.ts

@@ -0,0 +1,122 @@
+import { useEffect, useMemo } from 'react';
+import { isNumber } from 'lodash-es';
+import { TdInputProps } from './type';
+
+// 计算字符长度，中文算两个字符
+function getCharacterLength(str: string): number;
+function getCharacterLength(str: string, maxCharacter?: number): { length: number; characters: string }
+function getCharacterLength(str: string, maxCharacter?: number) {
+  const hasMaxCharacter = isNumber(maxCharacter);
+  if (!str || str.length === 0) {
+    if (hasMaxCharacter) {
+      return {
+        length: 0,
+        characters: str,
+      };
+    }
+    return 0;
+  }
+  let len = 0;
+  for (let i = 0; i < str.length; i++) {
+    let currentStringLength = 0;
+    if (str.charCodeAt(i) > 127) {
+      currentStringLength = 2;
+    } else {
+      currentStringLength = 1;
+    }
+    if (hasMaxCharacter && len + currentStringLength > maxCharacter) {
+      return {
+        length: len,
+        characters: str.slice(0, i),
+      };
+    }
+    len += currentStringLength;
+  }
+  if (hasMaxCharacter) {
+    return {
+      length: len,
+      characters: str,
+    };
+  }
+  return len;
+}
+
+// 计算 Unicode 长度
+function getUnicodeLength(str: string): number {
+  return Array.from(str).length;
+}
+
+// 限制 Unicode 最大长度
+function limitUnicodeMaxLength(str: string, maxLength: number): string {
+  return Array.from(str).slice(0, maxLength).join('');
+}
+
+export interface UseLengthLimitParams {
+  value: string | undefined;
+  maxlength: number;
+  maxcharacter: number;
+  allowInputOverMax: boolean;
+  status: TdInputProps['status'];
+  onValidate: TdInputProps['onValidate'];
+}
+
+export default function useLengthLimit(params: UseLengthLimitParams) {
+  // 文本超出数量限制时，是否允许继续输入
+  const getValueByLimitNumber = (inputValue: string) => {
+    const { allowInputOverMax, maxlength, maxcharacter } = params;
+    if (!(maxlength || maxcharacter) || allowInputOverMax || !inputValue) return inputValue;
+    if (maxlength) {
+      // input value could be unicode 😊
+      return limitUnicodeMaxLength(inputValue, maxlength);
+    }
+    if (maxcharacter) {
+      const r = getCharacterLength(inputValue, maxcharacter);
+      if (typeof r === 'object') {
+        return r.characters;
+      }
+    }
+    return inputValue;
+  };
+
+  const limitNumber = useMemo(() => {
+    const { maxlength, maxcharacter, value } = params;
+    if (typeof value === 'number') return String(value);
+    if (maxlength && maxcharacter) {
+      console.warn('Input', 'Pick one of maxlength and maxcharacter please.');
+    }
+    if (maxlength) {
+      const length = value?.length ? getUnicodeLength(value) : 0;
+      return `${length}/${maxlength}`;
+    }
+    if (maxcharacter) {
+      return `${getCharacterLength(value || '')}/${maxcharacter}`;
+    }
+    return '';
+  }, [params.maxcharacter, params.maxlength, params.value]);
+
+  const innerStatus = useMemo(() => {
+    if (limitNumber) {
+      const [current, total] = limitNumber.split('/');
+      return Number(current) > Number(total) ? 'error' : '';
+    }
+    return '';
+  }, [limitNumber]);
+
+  const tStatus = useMemo(() => params.status || innerStatus, [params.status, innerStatus]);
+
+  const onValidateChange = () => {
+    params.onValidate?.({
+      error: innerStatus ? 'exceed-maximum' : undefined,
+    });
+  };
+
+  useEffect(() => {
+    onValidateChange();
+  }, [innerStatus]);
+
+  return {
+    tStatus,
+    limitNumber,
+    getValueByLimitNumber,
+  };
+}

package/input-number/InputNumber.tsx

@@ -1,124 +1,124 @@
-import React, { forwardRef, useImperativeHandle, useRef, ForwardedRef } from "react";
-import {
-  IconChevronDown as TdChevronDownIcon,
-  IconMinusStroked as TdRemoveIcon,
-  IconChevronUp as TdChevronUpIcon,
-  IconPlus as TdAddIcon
-} from "@tendaui/icons";
-import classNames from "classnames";
-import Input from "../input";
-import Button from "../button";
-import useInputNumber from "./useInputNumber";
-import useGlobalIcon from "../hooks/useGlobalIcon";
-import { inputNumberDefaultProps } from "./defaultProps";
-import { InputNumberValue, TdInputNumberProps } from "./type";
-import { StyledProps } from "../common";
-import useDefaultProps from "../hooks/useDefaultProps";
-
-export interface InputNumberProps<T = InputNumberValue> extends TdInputNumberProps<T>, StyledProps {}
-
-export interface InputNumberRef {
-  currentElement: ForwardedRef<HTMLDivElement>;
-  inputElement: ForwardedRef<HTMLDivElement>;
-}
-
-// https://fettblog.eu/typescript-react-generic-forward-refs/
-function TdInputNumber<T extends InputNumberValue = InputNumberValue>(
-  originalProps: InputNumberProps<T>,
-  ref: ForwardedRef<InputNumberRef>
-) {
-  const { ChevronDownIcon, RemoveIcon, ChevronUpIcon, AddIcon } = useGlobalIcon({
-    ChevronDownIcon: TdChevronDownIcon,
-    RemoveIcon: TdRemoveIcon,
-    ChevronUpIcon: TdChevronUpIcon,
-    AddIcon: TdAddIcon
-  });
-  const props = useDefaultProps<InputNumberProps<T>>(
-    originalProps,
-    inputNumberDefaultProps as Partial<InputNumberProps<T>>
-  );
-  const {
-    classPrefix,
-    wrapClasses,
-    addClasses,
-    reduceClasses,
-    listeners,
-    isError,
-    inputRef,
-    userInput,
-    handleAdd,
-    handleReduce,
-    onInnerInputChange
-  } = useInputNumber(props);
-
-  const wrapRef = useRef(null);
-
-  const status = isError ? "error" : props.status;
-  const iconSize = props.size === "medium" ? "default" : props.size;
-  const addIcon =
-    props.theme === "column" ? <ChevronUpIcon size={iconSize as any} /> : <AddIcon size={iconSize as any} />;
-  const reduceIcon =
-    props.theme === "column" ? <ChevronDownIcon size={iconSize as any} /> : <RemoveIcon size={iconSize as any} />;
-
-  useImperativeHandle(ref, () => ({
-    currentElement: wrapRef.current,
-    inputElement: inputRef.current
-  }));
-
-  return (
-    <div className={classNames(wrapClasses, props.className)} style={props.style} ref={wrapRef}>
-      {props.theme !== "normal" && (
-        <Button
-          className={reduceClasses}
-          disabled={props.disabled}
-          onClick={handleReduce}
-          variant="outline"
-          shape="square"
-          icon={reduceIcon}
-        />
-      )}
-      <Input
-        ref={inputRef}
-        autocomplete="off"
-        disabled={props.disabled}
-        readonly={props.readonly}
-        placeholder={props.placeholder}
-        autoWidth={props.autoWidth}
-        align={props.align || (props.theme === "row" ? "center" : undefined)}
-        status={status}
-        label={props.label}
-        suffix={props.suffix}
-        value={userInput}
-        onChange={onInnerInputChange}
-        size={props.size}
-        {...listeners}
-        {...(props.inputProps || {})}
-      />
-      {props.theme !== "normal" && (
-        <Button
-          className={addClasses}
-          disabled={props.disabled}
-          onClick={handleAdd}
-          variant="outline"
-          shape="square"
-          icon={addIcon}
-        />
-      )}
-      {props.tips && (
-        <div className={classNames(`${classPrefix}-input__tips`, `${classPrefix}-input__tips--${status}`)}>
-          {props.tips}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export type InputNumberOuterForwardRef = {
-  <T>(props: InputNumberProps<T> & { ref?: ForwardedRef<InputNumberRef> }): ReturnType<typeof TdInputNumber>;
-} & React.ForwardRefExoticComponent<InputNumberProps>;
-
-const InputNumber = forwardRef<InputNumberRef, InputNumberProps<InputNumberValue>>(TdInputNumber);
-
-InputNumber.displayName = "InputNumber";
-
-export default InputNumber;
+import React, { forwardRef, useImperativeHandle, useRef, ForwardedRef } from "react";
+import {
+  IconChevronDown as TdChevronDownIcon,
+  IconMinusStroked as TdRemoveIcon,
+  IconChevronUp as TdChevronUpIcon,
+  IconPlus as TdAddIcon
+} from "@tendaui/icons";
+import classNames from "classnames";
+import Input from "../input";
+import Button from "../button";
+import useInputNumber from "./useInputNumber";
+import useGlobalIcon from "../hooks/useGlobalIcon";
+import { inputNumberDefaultProps } from "./defaultProps";
+import { InputNumberValue, TdInputNumberProps } from "./type";
+import { StyledProps } from "../common";
+import useDefaultProps from "../hooks/useDefaultProps";
+
+export interface InputNumberProps<T = InputNumberValue> extends TdInputNumberProps<T>, StyledProps {}
+
+export interface InputNumberRef {
+  currentElement: ForwardedRef<HTMLDivElement>;
+  inputElement: ForwardedRef<HTMLDivElement>;
+}
+
+// https://fettblog.eu/typescript-react-generic-forward-refs/
+function TdInputNumber<T extends InputNumberValue = InputNumberValue>(
+  originalProps: InputNumberProps<T>,
+  ref: ForwardedRef<InputNumberRef>
+) {
+  const { ChevronDownIcon, RemoveIcon, ChevronUpIcon, AddIcon } = useGlobalIcon({
+    ChevronDownIcon: TdChevronDownIcon,
+    RemoveIcon: TdRemoveIcon,
+    ChevronUpIcon: TdChevronUpIcon,
+    AddIcon: TdAddIcon
+  });
+  const props = useDefaultProps<InputNumberProps<T>>(
+    originalProps,
+    inputNumberDefaultProps as Partial<InputNumberProps<T>>
+  );
+  const {
+    classPrefix,
+    wrapClasses,
+    addClasses,
+    reduceClasses,
+    listeners,
+    isError,
+    inputRef,
+    userInput,
+    handleAdd,
+    handleReduce,
+    onInnerInputChange
+  } = useInputNumber(props);
+
+  const wrapRef = useRef(null);
+
+  const status = isError ? "error" : props.status;
+  const iconSize = props.size === "medium" ? "default" : props.size;
+  const addIcon =
+    props.theme === "column" ? <ChevronUpIcon size={iconSize as any} /> : <AddIcon size={iconSize as any} />;
+  const reduceIcon =
+    props.theme === "column" ? <ChevronDownIcon size={iconSize as any} /> : <RemoveIcon size={iconSize as any} />;
+
+  useImperativeHandle(ref, () => ({
+    currentElement: wrapRef.current,
+    inputElement: inputRef.current
+  }));
+
+  return (
+    <div className={classNames(wrapClasses, props.className)} style={props.style} ref={wrapRef}>
+      {props.theme !== "normal" && (
+        <Button
+          className={reduceClasses}
+          disabled={props.disabled}
+          onClick={handleReduce}
+          variant="outline"
+          shape="square"
+          icon={reduceIcon}
+        />
+      )}
+      <Input
+        ref={inputRef}
+        autocomplete="off"
+        disabled={props.disabled}
+        readonly={props.readonly}
+        placeholder={props.placeholder}
+        autoWidth={props.autoWidth}
+        align={props.align || (props.theme === "row" ? "center" : undefined)}
+        status={status}
+        label={props.label}
+        suffix={props.suffix}
+        value={userInput}
+        onChange={onInnerInputChange}
+        size={props.size}
+        {...listeners}
+        {...(props.inputProps || {})}
+      />
+      {props.theme !== "normal" && (
+        <Button
+          className={addClasses}
+          disabled={props.disabled}
+          onClick={handleAdd}
+          variant="outline"
+          shape="square"
+          icon={addIcon}
+        />
+      )}
+      {props.tips && (
+        <div className={classNames(`${classPrefix}-input__tips`, `${classPrefix}-input__tips--${status}`)}>
+          {props.tips}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export type InputNumberOuterForwardRef = {
+  <T>(props: InputNumberProps<T> & { ref?: ForwardedRef<InputNumberRef> }): ReturnType<typeof TdInputNumber>;
+} & React.ForwardRefExoticComponent<InputNumberProps>;
+
+const InputNumber = forwardRef<InputNumberRef, InputNumberProps<InputNumberValue>>(TdInputNumber);
+
+InputNumber.displayName = "InputNumber";
+
+export default InputNumber;

package/input-number/_example/align.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import InputNumber from "../index";
+
+const AlignInputNumber = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+    <div style={{ display: "flex", gap: "16px" }}>
+      <div>
+        <div style={{ marginBottom: "4px", fontSize: "12px", color: "#999" }}>左对齐</div>
+        <InputNumber align="left" defaultValue={100} />
+      </div>
+      <div>
+        <div style={{ marginBottom: "4px", fontSize: "12px", color: "#999" }}>居中对齐</div>
+        <InputNumber align="center" defaultValue={200} />
+      </div>
+      <div>
+        <div style={{ marginBottom: "4px", fontSize: "12px", color: "#999" }}>右对齐</div>
+        <InputNumber align="right" defaultValue={300} />
+      </div>
+    </div>
+  </div>
+);
+
+export default AlignInputNumber;

package/input-number/_example/auto-width.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import InputNumber from "../index";
+
+const AutoWidthInputNumber = () => (
+  <InputNumber autoWidth min={-5} defaultValue={1} />
+);
+
+export default AutoWidthInputNumber;

package/input-number/_example/default.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import InputNumber from "../index";
+
+const DefaultInputNumber = () => (
+  <InputNumber min={-5} max={15} defaultValue={1} placeholder="请输入数字" />
+);
+
+export default DefaultInputNumber;

package/input-number/_example/events.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useMemo } from "react";
+import InputNumber from "../index";
+
+type InputNumberValue = string | number;
+type ErrorType = "exceed-maximum" | "below-minimum";
+
+const EventsInputNumber = () => {
+  const [value, setValue] = useState<InputNumberValue>(100);
+  const [error, setError] = useState<ErrorType>();
+
+  const tips = useMemo(() => {
+    if (error === "exceed-maximum") return "数值不能超过最大值";
+    if (error === "below-minimum") return "数值不能小于最小值";
+    return undefined;
+  }, [error]);
+
+  const handleChange = (v: InputNumberValue, ctx: any) => {
+    console.info("change", v, ctx);
+    setValue(v);
+  };
+  const onValidate = (ctx: { error: ErrorType }) => {
+    setError(ctx.error);
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <InputNumber
+        value={value}
+        max={15}
+        min={-2}
+        inputProps={{ tips }}
+        suffix="个"
+        style={{ width: 300 }}
+        onChange={handleChange}
+        onValidate={onValidate}
+        onBlur={(v, ctx) => console.info("blur", v, ctx)}
+        onFocus={(v, ctx) => console.info("focus", v, ctx)}
+        onEnter={(v, ctx) => console.info("enter", v, ctx)}
+      />
+      <div style={{ color: "#666", fontSize: "12px" }}>范围: -2 ~ 15, 查看控制台输出</div>
+    </div>
+  );
+};
+
+export default EventsInputNumber;

package/input-number/_example/format.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import InputNumber from "../index";
+
+const FormatInputNumber = () => {
+  const [value, setValue] = useState(50);
+  const [value2, setValue2] = useState(1000);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>百分比格式</div>
+        <InputNumber format={(val) => `${val} %`} value={value} onChange={setValue} style={{ width: 250 }} />
+      </div>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>货币格式（保留2位小数）</div>
+        <InputNumber
+          decimalPlaces={2}
+          format={(_, { fixedNumber }) => `¥ ${fixedNumber}`}
+          value={value2}
+          onChange={setValue2}
+          style={{ width: 250 }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default FormatInputNumber;

package/input-number/_example/large-number.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import InputNumber from "../index";
+
+const LargeNumberInputNumber = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>大整数</div>
+      <InputNumber defaultValue="19999999999999999" largeNumber decimalPlaces={2} step={1} style={{ width: 350 }} />
+    </div>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>大小数</div>
+      <InputNumber defaultValue="0.8975527383412673418" largeNumber step={0.888} style={{ width: 350 }} />
+    </div>
+  </div>
+);
+
+export default LargeNumberInputNumber;

package/input-number/_example/min-max.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import InputNumber from "../index";
+
+const MinMaxInputNumber = () => {
+  const [value, setValue] = useState(5);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <InputNumber min={0} max={10} value={value} onChange={setValue} />
+      <div style={{ color: "#666", fontSize: "12px" }}>范围: 0 ~ 10, 当前值: {value}</div>
+    </div>
+  );
+};
+
+export default MinMaxInputNumber;

package/input-number/_example/sizes.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import InputNumber from "../index";
+
+const SizesInputNumber = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+    <div style={{ display: "flex", gap: "16px", alignItems: "flex-start" }}>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>row 主题</div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+          <InputNumber size="small" defaultValue={3} />
+          <InputNumber size="medium" defaultValue={6} />
+          <InputNumber size="large" defaultValue={9} />
+        </div>
+      </div>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>column 主题</div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+          <InputNumber theme="column" size="small" defaultValue={3} />
+          <InputNumber theme="column" size="medium" defaultValue={6} />
+          <InputNumber theme="column" size="large" defaultValue={9} />
+        </div>
+      </div>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>normal 主题</div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+          <InputNumber theme="normal" size="small" defaultValue={3} />
+          <InputNumber theme="normal" size="medium" defaultValue={6} />
+          <InputNumber theme="normal" size="large" defaultValue={9} />
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export default SizesInputNumber;

package/input-number/_example/status.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import InputNumber from "../index";
+import { Form } from "../../form";
+import { Radio } from "../../radio";
+
+const { FormItem } = Form;
+
+type AlignType = "hide" | "align-left" | "align-input";
+
+const StatusInputNumber = () => {
+  const [type, setType] = useState<AlignType>("align-input");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <Radio.Group value={type} onChange={(val: AlignType) => setType(val)} variant="default-filled">
+        <Radio.Button value="hide">隐藏文本提示</Radio.Button>
+        <Radio.Button value="align-left">文本提示左对齐</Radio.Button>
+        <Radio.Button value="align-input">文本提示对齐输入框</Radio.Button>
+      </Radio.Group>
+
+      <Form>
+        {type === "hide" && (
+          <>
+            <FormItem label="禁用">
+              <InputNumber style={{ width: 300 }} disabled />
+            </FormItem>
+            <FormItem label="只读">
+              <InputNumber style={{ width: 300 }} readonly />
+            </FormItem>
+            <FormItem label="正常">
+              <InputNumber style={{ width: 300 }} />
+            </FormItem>
+            <FormItem label="成功">
+              <InputNumber style={{ width: 300 }} status="success" />
+            </FormItem>
+            <FormItem label="警告">
+              <InputNumber style={{ width: 300 }} status="warning" />
+            </FormItem>
+            <FormItem label="错误">
+              <InputNumber style={{ width: 300 }} status="error" />
+            </FormItem>
+          </>
+        )}
+
+        {(type === "align-left" || type === "align-input") && (
+          <>
+            <FormItem label="正常提示">
+              <InputNumber style={{ width: 300 }} tips="这是普通文本提示" />
+            </FormItem>
+            <FormItem label="成功提示">
+              <InputNumber style={{ width: 300 }} status="success" tips="校验通过文本提示" />
+            </FormItem>
+            <FormItem label="警告提示">
+              <InputNumber style={{ width: 300 }} status="warning" tips="校验不通过文本提示" />
+            </FormItem>
+            <FormItem label="错误提示">
+              <InputNumber style={{ width: 300 }} status="error" tips="校验存在严重问题文本提示" />
+            </FormItem>
+          </>
+        )}
+      </Form>
+    </div>
+  );
+};
+
+export default StatusInputNumber;

package/input-number/_example/step-and-decimal.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import InputNumber from "../index";
+
+const StepAndDecimalInputNumber = () => {
+  const [value, setValue] = useState(3.2);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <InputNumber step={1.2} decimalPlaces={2} value={value} onChange={setValue} />
+      <div style={{ color: "#666", fontSize: "12px" }}>步长: 1.2, 保留2位小数, 当前值: {value}</div>
+    </div>
+  );
+};
+
+export default StepAndDecimalInputNumber;

package/input-number/_example/themes.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import InputNumber from "../index";
+
+const ThemesInputNumber = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>row - 横向按钮（默认）</div>
+      <InputNumber theme="row" defaultValue={5} />
+    </div>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>column - 纵向按钮</div>
+      <InputNumber theme="column" defaultValue={5} />
+    </div>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>normal - 无按钮</div>
+      <InputNumber theme="normal" defaultValue={5} />
+    </div>
+  </div>
+);
+
+export default ThemesInputNumber;