diff --git a/src/input/demos/input/basic.tsx b/src/input/demos/input/basic.tsx new file mode 100644 index 000000000..4543fdc1a --- /dev/null +++ b/src/input/demos/input/basic.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Space } from 'antd'; +import { Input } from 'dt-react-component'; + +export default () => { + return ( + + alert('触发')} + /> + alert('触发')} + /> + + ); +}; diff --git a/src/input/demos/basic.tsx b/src/input/demos/match/basic.tsx similarity index 100% rename from src/input/demos/basic.tsx rename to src/input/demos/match/basic.tsx diff --git a/src/input/demos/filterOptions.tsx b/src/input/demos/match/filterOptions.tsx similarity index 100% rename from src/input/demos/filterOptions.tsx rename to src/input/demos/match/filterOptions.tsx diff --git a/src/input/index.$tab-match.md b/src/input/index.$tab-match.md new file mode 100644 index 000000000..4f8398b21 --- /dev/null +++ b/src/input/index.$tab-match.md @@ -0,0 +1,41 @@ +--- +title: Match 输入框 +group: 组件 +toc: content +demo: + cols: 2 +--- + +# Match 输入框 + +## 何时使用 + +需要用户输入表单域内容时。 + +## 示例 + + + + +## 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 | 尾部匹配 | diff --git a/src/input/index.md b/src/input/index.md index 164458d46..e298bfe7e 100644 --- a/src/input/index.md +++ b/src/input/index.md @@ -1,41 +1,28 @@ --- -title: Input.Match 输入框 +title: Input 输入框 group: 组件 toc: content demo: cols: 2 --- -# Input.Match 输入框 +# Input 输入框 ## 何时使用 -需要用户输入表单域内容时。 +需要用户输入内容时。 ## 示例 - - + ## 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) diff --git a/src/input/index.tsx b/src/input/index.tsx index 86e366601..ac5758233 100644 --- a/src/input/index.tsx +++ b/src/input/index.tsx @@ -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; diff --git a/src/input/internalInput.tsx b/src/input/internalInput.tsx new file mode 100644 index 000000000..31b715065 --- /dev/null +++ b/src/input/internalInput.tsx @@ -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 ( + { + if (e.keyCode === 13) { + onPressEnter?.(e); + } + onPressEnterNative?.(e); + }} + /> + ); +}