Skip to content

Commit

Permalink
Merge branch 'release'
Browse files Browse the repository at this point in the history
  • Loading branch information
@DaiQiangReal
DaiQiangReal committed Jun 24, 2024
2 parents 07c987f + 170393b commit 980e477
Show file tree
Hide file tree
Showing 71 changed files with 1,535 additions and 564 deletions.
3 changes: 2 additions & 1 deletion content/input/form/index-en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2123,7 +2123,8 @@ The table below describes the features available in the formApi.
| setError | Modify the error information of a field | formApi.setError(field: string, fieldErrorMessage: string) |
| getError | Get Error Status of Field | formApi.getError(field: string) |
| getFieldExist | Get whether the field exists in the Form | formApi.getFieldExist(field: string) |
| scrollToField | Scroll to field | formApi.scrollToField(field: string, scrollOpts: [object](<(https://github.com/stipsan/scroll-into-view-if-needed#options)>)) |
| scrollToField | Scroll to the specified field, the second input parameter will be passed to scroll-into-view-if-needed | formApi.scrollToField(field: string, scrollOpts: [ScrollIntoViewOptions](https://github.com/stipsan/scroll-into-view-if-needed#options)) |
| scrollToError | Scroll to the field with validation error. You can pass a specified field or index. If you pass index, scroll to the index-th error DOM. If you do not pass any parameters, scroll to the first validation error position in the DOM tree. Available after v2.61.0 | formApi.scrollToError(<ApiType detail='{field?: string; index?: number; scrollOpts?: ScrollIntoViewOptions }'>ScrollToErrorOptions</ApiType>)
### How to access formApi
Expand Down
3 changes: 2 additions & 1 deletion content/input/form/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2121,7 +2121,8 @@ FormState 存储了所有 Form 内部的状态值，包括各表单控件的值
| setError | 修改 某个 field 的 error 信息 | formApi.setError(field: string, fieldErrorMessage: string) |
| getError | 获取 Field 的 error 状态 | formApi.getError(field: string) |
| getFieldExist | 获取 Form 中是否存在对应的 field | formApi.getFieldExist(field: string) |
| scrollToField | 滚动至指定的 field | formApi.scrollToField(field: string, scrollOpts: object) |
| scrollToField | 滚动至指定的 field, 第二个入参将透传至scroll-into-view-if-needed | formApi.scrollToField(field: string, scrollOpts: [ScrollIntoViewOptions](https://github.com/stipsan/scroll-into-view-if-needed#options)) |
| scrollToError | 滚动至校验错误的field，可传指定 field 或者 index，传入 index 则滚动到第 index 个错误的 DOM，若不传参则滚动到DOM树中第一个校验出错的位置。 v2.61.0后提供 | formApi.scrollToError(<ApiType detail='{field?: string; index?: number; scrollOpts?: ScrollIntoViewOptions }'>ScrollToErrorOptions</ApiType>) |
### 如何获取 formApi

- Form 组件在 ComponentDidMount 阶段，会执行 props 传入的 getFormApi 回调，你可以在回调函数中保存 formApi 的引用，以便后续进行调用(**示例如下代码**)
Expand Down
55 changes: 53 additions & 2 deletions content/input/select/index-en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -616,6 +616,52 @@ import { Select } from '@douyinfe/semi-ui';
);
```
### Search position
The default search input is displayed on the Select Trigger. You can specify different positions through `searchPosition`, and you can choose `dropdown` or `trigger`. Available after `v2.61.0`
If you want to customize the placeholder of the Input search box in the dropdown, you can control it through `searchPlaceholder`
If the `searchPosition` is `trigger`, when `showClear=true`, clicking the clear button of the input will clear the selected items and the search text in the input at the same time
If the `searchPosition` is `dropdown`, when `showClear=true`, clicking the clear button of the trigger will clear the selected items, clicking the clear button in the dropdown input will clear search text
```jsx live=true
import React from 'react';
import { Select } from '@douyinfe/semi-ui';

() => (
<>
<Select
filter
searchPosition='dropdown'
style={{ width: 200 }}
defaultValue={'ulikecam'}
>
<Select.Option value="douyin">Douyin</Select.Option>
<Select.Option value="ulikecam">UlikeCam</Select.Option>
<Select.Option value="jianying">Capcut</Select.Option>
<Select.Option value="xigua">XiguaVideo</Select.Option>
</Select>
<br />
<br />
<Select
filter
searchPosition='dropdown'
multiple
style={{ width: 300 }}
defaultValue={['semi-1']}
autoClearSearchValue={false}
>
<Select.Option value="semi-0">Semi-0</Select.Option>
<Select.Option value="semi-1">Semi-1</Select.Option>
<Select.Option value="semi-2">Semi-2</Select.Option>
<Select.Option value="semi-3">Semi-3</Select.Option>
<Select.Option value="semi-4">Semi-4</Select.Option>
</Select>
</>
);

```
### Remote search
A multi-select example with remote search, request debounce, loading status.
Expand Down Expand Up @@ -1168,6 +1214,8 @@ import { IconAppCenter, IconChevronDown } from '@douyinfe/semi-icons';
value={valList}
triggerRender={triggerRender}
optionList={list}
filter
searchPosition='dropdown'
onChange={value => setValList(value)}
multiple
style={{ width: 240 }}
Expand All @@ -1180,6 +1228,8 @@ import { IconAppCenter, IconChevronDown } from '@douyinfe/semi-icons';
onChange={value => setVal(value)}
triggerRender={triggerRender2}
optionList={list}
filter
searchPosition='dropdown'
style={{ width: 240, marginTop: 20, outline: 0 }}
></Select>
</div>
Expand Down Expand Up @@ -1363,10 +1413,11 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
| renderCreateItem | When allowCreate is true, you can customize the rendering of the creation label | function(inputValue: string) | InputValue => 'Create' + InputValue |
| renderSelectedItem | Customize the rendering of selected tabs in the selection box | function(option) | |
| restTagsPopoverProps | The configuration properties of the [Popover](/en-US/show/popover#API%20Reference) | PopoverProps | {} | 2.22.0 |
| size | Size, optional value `default` / `small` / `large`
| searchPosition | When the filter is turned on, the search box is in the trigger by default. You can set it to 'dropdown' to put the search box at the top of the popup list. | string | 'trigger' | 2.61.0
| showArrow | Whether to show arrow icon | boolean | true |
| showClear | Whether to show the clear button | boolean | false |
| showRestTagsPopover | When the number of tags exceeds maxTagCount and hover reaches +N, whether to display the remaining content through Popover | boolean | false | 2.22.0 |
| size | Size, optional value `default` / `small` / `large` | string | 'default' |
| spacing | Spacing between popup layer and trigger | number | 4 |
| stopPropagation | Whether to prevent click events on the popup layer from bubbling | boolean | true | |
| style | Inline Style | object | |
Expand Down Expand Up @@ -1472,7 +1523,7 @@ Some internal methods provided by Select can be accessed through ref:
<DesignToken/>

## Related Material
<semi-material-list code="3, 4, 58, 62"></semi-material-list>
<semi-material-list code="3, 4, 58, 62, 696"></semi-material-list>

## FAQ

Expand Down
61 changes: 57 additions & 4 deletions content/input/select/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -699,11 +699,58 @@ import { Select } from '@douyinfe/semi-ui';
);
```
### 搜索框位置
默认搜索框展示于 Select 的 Trigger 触发器上。通过 `searchPosition` 可以指定不同的位置，可选 `dropdown`、`trigger`。 在 v2.61.0后提供
若希望定制位于 dropdown 中的 Input 搜索框的 placeholder，可以通过 `searchPlaceholder` 控制
若 `searchPosition` 值为 `trigger`，当showClear=true 时，点击Trigger区域的清空按钮，将同时清空已选项以及搜索框中的文本
若 `searchPosition` 值为 `dropdown`，当showClear=true 时，点击Trigger区域清空按钮，仅清空已选项。点击搜索框中的清空按钮，仅清空搜索文本
```jsx live=true
import React from 'react';
import { Select } from '@douyinfe/semi-ui';

() => (
<>
<Select
filter
searchPosition='dropdown'
style={{ width: 200 }}
defaultValue={'ulikecam'}
placeholder='我的搜索框在下拉菜单中'
searchPlaceholder="带搜索功能的单选"
>
<Select.Option value="douyin">抖音</Select.Option>
<Select.Option value="ulikecam">轻颜相机</Select.Option>
<Select.Option value="jianying">剪映</Select.Option>
<Select.Option value="xigua">西瓜视频</Select.Option>
</Select>
<br />
<br />
<Select
filter
searchPosition='dropdown'
multiple
style={{ width: 300 }}
defaultValue={['semi-1']}
placeholder='我的搜索框在下拉菜单中'
searchPlaceholder="带搜索功能的多选"
autoClearSearchValue={false}
>
<Select.Option value="semi-0">Semi-0</Select.Option>
<Select.Option value="semi-1">Semi-1</Select.Option>
<Select.Option value="semi-2">Semi-2</Select.Option>
<Select.Option value="semi-3">Semi-3</Select.Option>
<Select.Option value="semi-4">Semi-4</Select.Option>
</Select>
</>
);
```
### 远程搜索
带有远程搜索，防抖请求，加载状态的多选示例
通过`filter`开启搜索能力
将`remote`设置为 true 关闭对当前数据的筛选过滤(在 v0.24.0 后提供)
将`remote`设置为 true 关闭对当前数据的筛选过滤
通过动态更新`optionList`更新下拉菜单中的备选项
使用受控的 value 属性
Expand Down Expand Up @@ -1121,7 +1168,8 @@ class VirtualizeDemo extends React.Component {
### 自定义触发器
如果 Select 默认的触发器样式满足不了你的需求，可以用`triggerRender`自定义选择框的展示
如果 Select 默认的触发器样式满足不了你的需求，可以用`triggerRender`自定义选择框的展示
如果想保留搜索筛选能力，又不希望自己渲染 Input 相关的结构，可以同时通过 searchPosition='dropdown'，将默认的搜索框置于下拉列表中
triggerRender 入参如下
Expand Down Expand Up @@ -1230,6 +1278,8 @@ import { IconAppCenter, IconChevronDown } from '@douyinfe/semi-icons';
optionList={list}
onChange={value => setValList(value)}
multiple
filter
searchPosition='dropdown'
style={{ width: 240 }}
></Select>
<br />
Expand All @@ -1240,6 +1290,8 @@ import { IconAppCenter, IconChevronDown } from '@douyinfe/semi-icons';
onChange={value => setVal(value)}
triggerRender={triggerRender2}
optionList={list}
filter
searchPosition='dropdown'
style={{ width: 240, marginTop: 20, outline: 0 }}
></Select>
</div>
Expand Down Expand Up @@ -1394,7 +1446,7 @@ import { Select, Checkbox, Highlight } from '@douyinfe/semi-ui';
| autoFocus | 初始渲染时是否自动 focus | boolean | false |
| borderless | 无边框模式 >=2.33.0 | boolean | |
| className | 类名 | string | |
| clearIcon | 可用于自定义清除按钮, showClear为true时有效 | ReactNode | 2.25.0 |
| clearIcon | 可用于自定义清除按钮, showClear为true时有效 | ReactNode | | 2.25.0
| clickToHide | 已展开时，点击选择框是否自动收起下拉列表 | boolean | false |
| defaultValue | 初始选中的值 | string\|number\|array | |
| defaultOpen | 是否默认展开下拉列表 | boolean | false |
Expand Down Expand Up @@ -1430,6 +1482,7 @@ import { Select, Checkbox, Highlight } from '@douyinfe/semi-ui';
| renderOptionItem | 通过 renderOptionItem 完全自定义下拉列表中候选项的渲染 | function(props) 入参详见 Demo | |
| restTagsPopoverProps | Popover 的配置属性，可以控制 position、zIndex、trigger 等，具体参考[Popover](/zh-CN/show/popover#API%20%E5%8F%82%E8%80%83) | PopoverProps | {} | 2.22.0 |
| remote | 是否开启远程搜索，当 remote 为 true 时，input 内容改变后不会进行本地筛选匹配 | boolean | false |
| searchPosition | filter开启时，搜索框的位置，默认在 trigger中，可以通过设为 'dropdown' 将搜索框置于下拉列表顶部。搭配 triggerRender 使用可以实现更高自由度的交互 | string | 'trigger' | 2.61.0
| size | 大小，可选值 `default`/`small`/`large` | string | 'default' |
| style | 样式 | object | |
| stopPropagation | 是否阻止浮层上的点击事件冒泡 | boolean | true | |
Expand Down Expand Up @@ -1603,4 +1656,4 @@ import { Select, Checkbox, Highlight } from '@douyinfe/semi-ui';
3,4,44,54,58,62,72
``` -->
## 相关物料
<semi-material-list code="3, 4, 58, 62"></semi-material-list>
<semi-material-list code="3, 4, 58, 62, 696"></semi-material-list>
Loading

0 comments on commit 980e477

Please sign in to comment.