@tendaui/components 1.2.4 → 1.3.1

package/input/_example/disabled-readonly.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Input } from "../index";
+
+const DisabledReadonlyInput = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "500px" }}>
+    <Input placeholder="正常状态" />
+    <Input disabled placeholder="禁用状态" defaultValue="禁用内容" />
+    <Input readonly placeholder="只读状态" defaultValue="只读内容" />
+  </div>
+);
+
+export default DisabledReadonlyInput;

package/input/_example/events.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { Input } from "../index";
+
+const EventsInput = () => {
+  const [log, setLog] = useState<string[]>([]);
+
+  const addLog = (msg: string) => {
+    setLog((prev) => [...prev.slice(-4), msg]);
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "500px" }}>
+      <Input
+        placeholder="触发各种事件（查看下方日志）"
+        clearable
+        onChange={(val) => addLog(`onChange: ${val}`)}
+        onFocus={() => addLog("onFocus")}
+        onBlur={() => addLog("onBlur")}
+        onEnter={(val) => addLog(`onEnter: ${val}`)}
+        onClear={() => addLog("onClear")}
+      />
+      <div
+        style={{
+          padding: "12px",
+          background: "var(--tendaui-color-primary-1)",
+          borderRadius: "4px",
+          fontSize: "12px",
+          fontFamily: "monospace"
+        }}
+      >
+        <div style={{ marginBottom: "8px", fontWeight: "bold" }}>事件日志：</div>
+        {log.length === 0 ? (
+          <div style={{ color: "#999" }}>暂无事件触发</div>
+        ) : (
+          log.map((item, index) => <div key={index}>{item}</div>)
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EventsInput;

package/input/_example/group.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Input, InputGroup } from "../index";
+import { IconUser, IconLock } from "@tendaui/icons";
+
+const InputGroupExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "500px" }}>
+    <InputGroup separate>
+      <Input placeholder="用户名" prefixIcon={<IconUser />} />
+      <Input type="password" placeholder="密码" prefixIcon={<IconLock />} />
+    </InputGroup>
+  </div>
+);
+
+export default InputGroupExample;

package/input/_example/label-suffix.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Input } from "../index";
+
+const LabelSuffixInput = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "500px" }}>
+    <Input label="http://" placeholder="请输入网址" />
+    <Input suffix=".com" placeholder="请输入域名" />
+    <Input label="http://" suffix=".com" placeholder="请输入域名" />
+  </div>
+);
+
+export default LabelSuffixInput;

package/input/_example/max-length.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Input } from "../index";
+
+const MaxLengthInput = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "500px" }}>
+    <Input maxlength={10} placeholder="最多输入10个字符" />
+    <Input maxcharacter={20} placeholder="最多输入20个字符（中文算2个）" />
+  </div>
+);
+
+export default MaxLengthInput;

package/input/_example/password.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import { Input } from "../index";
+import { IconLock, IconEyeOpened, IconEyeClosed } from "@tendaui/icons";
+
+const PasswordInput = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <div style={{ width: 500 }}>
+      <Input type={visible ? "text" : "password"} prefixIcon={<IconLock />} placeholder="请输入密码" />
+    </div>
+  );
+};
+
+export default PasswordInput;

package/input/_example/sizes.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Input } from "../index";
+
+const SizesInput = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "500px" }}>
+    <Input size="small" placeholder="小尺寸" />
+    <Input size="medium" placeholder="中尺寸（默认）" />
+    <Input size="large" placeholder="大尺寸" />
+  </div>
+);
+
+export default SizesInput;

package/input/_example/status.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Input } from "../index";
+
+const StatusInput = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "24px", width: "500px", margin: "8px 0" }}>
+    <Input status="default" placeholder="默认状态" tips="这是一条提示信息" />
+    <Input status="success" placeholder="成功状态" tips="校验通过" />
+    <Input status="warning" placeholder="警告状态" tips="请注意输入内容" />
+    <Input status="error" placeholder="错误状态" tips="输入内容有误" />
+  </div>
+);
+
+export default StatusInput;

package/input/_example/text-align.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Input } from "../index";
+
+const TextAlignInput = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: 500 }}>
+    <Input align="left" placeholder="左对齐" defaultValue="左对齐内容" />
+    <Input align="center" placeholder="居中对齐" defaultValue="居中对齐内容" />
+    <Input align="right" placeholder="右对齐" defaultValue="右对齐内容" />
+  </div>
+);
+
+export default TextAlignInput;

package/input/_example/with-icon.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Input } from "../index";
+import { IconSearch, IconUser } from "@tendaui/icons";
+
+const WithIconInput = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "500px" }}>
+    <Input prefixIcon={<IconSearch />} placeholder="前置图标" />
+    <Input suffixIcon={<IconSearch />} placeholder="后置图标" />
+    <Input prefixIcon={<IconUser />} suffixIcon={<IconSearch />} placeholder="前后图标" />
+  </div>
+);
+
+export default WithIconInput;

package/input/type.ts

@@ -64,6 +64,9 @@ export interface TdInputProps {
    * 用户最多可以输入的文本长度，一个中文等于一个计数长度。值为空，则表示不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用
    */
   maxlength?: number;
+
+  allowInputOverMax?: boolean;
+  showLimitNumber?: boolean;
   /**
    * 名称
    * @default ''

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/_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;

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/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;