Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions src/input/demos/input/basic.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react';
import { Space } from 'antd';
import { Input } from 'dt-react-component';

export default () => {
return (
<Space direction="vertical">
<Input
style={{ width: 500 }}
placeholder="输入中文回车不会触发 onPressEnter 事件"
onPressEnter={() => alert('触发')}
/>
<Input
style={{ width: 500 }}
placeholder="任意回车均触发 onPressEnterNative 事件"
onPressEnterNative={() => alert('触发')}
/>
</Space>
);
};
File renamed without changes.
41 changes: 41 additions & 0 deletions src/input/index.$tab-match.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
---
title: Match 输入框
group: 组件
toc: content
demo:
cols: 2
---

# Match 输入框

## 何时使用

需要用户输入表单域内容时。

## 示例

<code src="./demos/match/basic.tsx" title="基础使用" description="通过回车键触发 onSearch 事件"></code>
<code src="./demos/match/filterOptions.tsx" title="控制匹配项" description="仅支持头部匹配"></code>

## API

### 类型

| 参数 | 说明 | 类型 | 默认值 |
| ------------- | -------------------- | -------------------------------------------------- | -------------- |
| searchType | 当前匹配项 | `SearchType` |
| filterOptions | 过滤匹配项数组 | `SearchType[]` | `SearchType[]` |
| onTypeChange | 匹配项修改的回调函数 | `(type: SearchType) => void;` | - |
| onSearch | 搜索的回调函数 | `(value: string, searchType: SearchType) => void;` | - |

### SearchType

`type SearchType = 'fuzzy' | 'caseSensitive' | 'precise' | 'front' | 'tail';`

| 参数 | 说明 |
| ------------- | ---------- |
| fuzzy | 无选中状态 |
| caseSensitive | 大小写敏感 |
| precise | 精准查询 |
| front | 头部匹配 |
| tail | 尾部匹配 |
31 changes: 9 additions & 22 deletions src/input/index.md
Original file line number Diff line number Diff line change
@@ -1,41 +1,28 @@
---
title: Input.Match 输入框
title: Input 输入框
group: 组件
toc: content
demo:
cols: 2
---

# Input.Match 输入框
# Input 输入框

## 何时使用

需要用户输入表单域内容时
需要用户输入内容时

## 示例

<code src="./demos/basic.tsx" title="基础使用" description="通过回车键触发 onSearch 事件"></code>
<code src="./demos/filterOptions.tsx" title="控制匹配项" description="仅支持头部匹配"></code>
<code src="./demos/input/basic.tsx" title="基础使用" description="通过回车键触发 onSearch 事件"></code>

## API

### 类型

| 参数 | 说明 | 类型 | 默认值 |
| ------------- | -------------------- | -------------------------------------------------- | -------------- |
| searchType | 当前匹配项 | `SearchType` |
| filterOptions | 过滤匹配项数组 | `SearchType[]` | `SearchType[]` |
| onTypeChange | 匹配项修改的回调函数 | `(type: SearchType) => void;` | - |
| onSearch | 搜索的回调函数 | `(value: string, searchType: SearchType) => void;` | - |
| 参数 | 说明 | 类型 | 默认值 |
| ------------------ | ---------------------- | ---------- | ------ |
| onPressEnter | 输入英文回车的回调函数 | `Function` |
| onPressEnterNative | 输入任意回车的回调函数 | `Function` | |

### SearchType

`type SearchType = 'fuzzy' | 'caseSensitive' | 'precise' | 'front' | 'tail';`

| 参数 | 说明 |
| ------------- | ---------- |
| fuzzy | 无选中状态 |
| caseSensitive | 大小写敏感 |
| precise | 精准查询 |
| front | 头部匹配 |
| tail | 尾部匹配 |
其余属性均继承自 `Input` 组件,参考 [Input API](https://4x.ant.design/components/input-cn/#Input)
7 changes: 3 additions & 4 deletions src/input/index.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import { Input } from 'antd';

import InternalInput from './internalInput';
import InternalMatch from './match';

type OriginInputType = typeof Input;
type OriginInputType = typeof InternalInput;
interface InputInterface extends OriginInputType {
Match: typeof InternalMatch;
}

const WrapperInput = Input;
const WrapperInput = InternalInput;

(WrapperInput as InputInterface).Match = InternalMatch;

Expand Down
24 changes: 24 additions & 0 deletions src/input/internalInput.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react';
import { Input, type InputProps } from 'antd';

export interface IInternalInputProps extends InputProps {
onPressEnterNative?: InputProps['onPressEnter'];
}

export default function InternalInput({
onPressEnterNative,
onPressEnter,
...rest
}: IInternalInputProps) {
return (
<Input
{...rest}
onPressEnter={(e) => {
if (e.keyCode === 13) {
onPressEnter?.(e);
}
onPressEnterNative?.(e);
}}
/>
);
}
Loading