From 2268cf6ad1060bd4e9b8df9b8778f4a9ee9c9f5e Mon Sep 17 00:00:00 2001
From: dengfuping <fuping.dfp@antgroup.com>
Date: Fri, 26 Jul 2024 14:57:13 +0800
Subject: [PATCH] chore(design): Add password, showCount and allowClear demo
 for Input

---
 packages/design/src/input/demo/allowClear.tsx | 17 +++++++++++++++++
 packages/design/src/input/demo/password.tsx   | 16 ++++++++++++++++
 packages/design/src/input/demo/showCount.tsx  | 17 +++++++++++++++++
 packages/design/src/input/index.md            |  3 +++
 4 files changed, 53 insertions(+)
 create mode 100644 packages/design/src/input/demo/allowClear.tsx
 create mode 100644 packages/design/src/input/demo/password.tsx
 create mode 100644 packages/design/src/input/demo/showCount.tsx

diff --git a/packages/design/src/input/demo/allowClear.tsx b/packages/design/src/input/demo/allowClear.tsx
new file mode 100644
index 000000000..61c0e7d22
--- /dev/null
+++ b/packages/design/src/input/demo/allowClear.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Input, Space } from '@oceanbase/design';
+
+const { TextArea } = Input;
+
+const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  console.log(e);
+};
+
+const App: React.FC = () => (
+  <Space direction="vertical" style={{ width: '100%' }}>
+    <Input defaultValue="Input with clear icon" allowClear onChange={onChange} />
+    <TextArea defaultValue="TextArea with clear icon" allowClear onChange={onChange} />
+  </Space>
+);
+
+export default App;
diff --git a/packages/design/src/input/demo/password.tsx b/packages/design/src/input/demo/password.tsx
new file mode 100644
index 000000000..09088aba2
--- /dev/null
+++ b/packages/design/src/input/demo/password.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Input, Space } from 'antd';
+
+const App: React.FC = () => {
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <Input.Password placeholder="auto fill password by default" />
+      <Input.Password
+        autoComplete="new-password"
+        placeholder='not auto fill password with autoComplete="new-password"'
+      />
+    </Space>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/input/demo/showCount.tsx b/packages/design/src/input/demo/showCount.tsx
new file mode 100644
index 000000000..eff54eb41
--- /dev/null
+++ b/packages/design/src/input/demo/showCount.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Input, Space } from '@oceanbase/design';
+
+const { TextArea } = Input;
+
+const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  console.log('Change:', e.target.value);
+};
+
+const App: React.FC = () => (
+  <Space direction="vertical" style={{ width: '100%' }}>
+    <Input showCount maxLength={20} onChange={onChange} />
+    <TextArea showCount maxLength={100} onChange={onChange} />
+  </Space>
+);
+
+export default App;
diff --git a/packages/design/src/input/index.md b/packages/design/src/input/index.md
index d66dadd07..f957d6130 100644
--- a/packages/design/src/input/index.md
+++ b/packages/design/src/input/index.md
@@ -16,6 +16,9 @@ demo:
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx" title="基本使用" description="默认填充 `placeholder`"></code>
 <code src="./demo/search.tsx" title="搜索框"></code>
+<code src="./demo/password.tsx" title="密码输入框" description='设置 `autoComplete="new-password"` 可避免自动填充密码，详见 [MDN 文档](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/autocomplete)。'></code>
+<code src="./demo/showCount.tsx" title="字数提示" description="超出字数长度后无法输入"></code>
+<code src="./demo/allowClear.tsx" title="清除图标" description="用于一键清除输入内容"></code>
 
 ## API