mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:39:05 +08:00
feat: Select, InputTag组件支持限制标签最大展示数量 (#4459)
Co-authored-by: liaoxuezhi <2betop.cn@gmail.com>
This commit is contained in:
RUNZE LU
GitHub
parent
7ac9e800c4
commit
fee28e2794
@ -117,7 +117,7 @@ order: 15
|
||||
| -------- | ---------------------- | -------------------- |
|
||||
| change | `value: string` 时间值 | 值变化 |
|
||||
| focus | `value: string` 时间值 | 获得焦点(非内嵌模式) |
|
||||
| blur | `value: string` 时间值 | 失去焦点(非内嵌模式) |
|
||||
| blur | `value: string` 时间值 | 失去焦点(非内嵌模式) |
|
||||
|
||||
## 动作表
|
||||
|
||||
|
||||
@ -376,8 +376,8 @@ order: 13
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| -------- | ---------------------- | -------------------- |
|
||||
| change | `value: string` 时间值 | 值变化 |
|
||||
| focus | `value: string` 时间值 | 获得焦点(非内嵌模式) |
|
||||
| blur | `value: string` 时间值 | 失去焦点(非内嵌模式) |
|
||||
| focus | `value: string` 时间值 | 获得焦点(非内嵌模式) |
|
||||
| blur | `value: string` 时间值 | 失去焦点(非内嵌模式) |
|
||||
|
||||
## 动作表
|
||||
|
||||
|
||||
@ -29,22 +29,60 @@ order: 55
|
||||
}
|
||||
```
|
||||
|
||||
## 限制标签最大展示数量
|
||||
|
||||
> 1.10.0 及以上版本
|
||||
|
||||
`maxTagCount`可以限制标签的最大展示数量，超出数量的部分会收纳到 Popover 中，可以通过`overflowTagPopover`配置 Popover 相关的[属性](../tooltip#属性表)，注意该属性仅在多选模式开启后生效。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"body": [
|
||||
{
|
||||
"type": "input-tag",
|
||||
"name": "tag",
|
||||
"label": "标签",
|
||||
"maxTagCount": 3,
|
||||
"overflowTagPopover": {
|
||||
"title": "水果"
|
||||
},
|
||||
"value": "Pineapple,Kiwifruit,Banana,Blueberry,Carambola",
|
||||
"options": [
|
||||
{"label": "苹果", "value": "Apple"},
|
||||
{"label": "香蕉", "value": "Banana"},
|
||||
{"label": "黑莓", "value": "Blackberry"},
|
||||
{"label": "蓝莓", "value": "Blueberry"},
|
||||
{"label": "樱桃", "value": "Cherry"},
|
||||
{"label": "杨桃", "value": "Carambola"},
|
||||
{"label": "椰子", "value": "Coconut"},
|
||||
{"label": "猕猴桃", "value": "Kiwifruit"},
|
||||
{"label": "柠檬", "value": "Lemon"},
|
||||
{"label": "菠萝", "value": "Pineapple"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 属性表
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | ----------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| optionsTip | `Array<object>`或`Array<string>` | `"最近您使用的标签"` | 选项提示 |
|
||||
| source | `string`或 [API](../../../docs/types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| delimiter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) |
|
||||
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
|
||||
| clearable | `boolean` | `false` | 在有值的时候是否显示一个删除图标在右侧。 |
|
||||
| resetValue | `string` | `""` | 删除后设置此配置项给定的值。 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------ | ----------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| optionsTip | `Array<object>`或`Array<string>` | `"最近您使用的标签"` | 选项提示 |
|
||||
| source | `string`或 [API](../../../docs/types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| delimiter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) |
|
||||
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
|
||||
| clearable | `boolean` | `false` | 在有值的时候是否显示一个删除图标在右侧。 |
|
||||
| resetValue | `string` | `""` | 删除后设置此配置项给定的值。 |
|
||||
| maxTagCount | `number` | | 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效 |
|
||||
| overflowTagPopover | `TooltipObject` | `{"placement": "top", "trigger": "hover", "showArrow": false, "offset": [0, -10]}` | 收纳浮层的配置属性，详细配置参考[Tooltip](../tooltip#属性表) |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -918,6 +918,45 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le
|
||||
}
|
||||
```
|
||||
|
||||
## 限制标签最大展示数量
|
||||
|
||||
> 1.10.0 及以上版本
|
||||
|
||||
`maxTagCount`可以限制标签的最大展示数量，超出数量的部分会收纳到 Popover 中，可以通过`overflowTagPopover`配置 Popover 相关的[属性](../tooltip#属性表)，注意该属性仅在多选模式开启后生效。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"body": [
|
||||
{
|
||||
"label": "水果",
|
||||
"type": "select",
|
||||
"name": "select",
|
||||
"multiple": true,
|
||||
"maxTagCount": 3,
|
||||
"checkAll": true,
|
||||
"defaultCheckAll": true,
|
||||
"overflowTagPopover": {
|
||||
"title": "水果"
|
||||
},
|
||||
"options": [
|
||||
{"label": "苹果", "value": "Apple"},
|
||||
{"label": "香蕉", "value": "Banana"},
|
||||
{"label": "黑莓", "value": "Blackberry"},
|
||||
{"label": "蓝莓", "value": "Blueberry"},
|
||||
{"label": "樱桃", "value": "Cherry"},
|
||||
{"label": "杨桃", "value": "Carambola"},
|
||||
{"label": "椰子", "value": "Coconut"},
|
||||
{"label": "猕猴桃", "value": "Kiwifruit"},
|
||||
{"label": "柠檬", "value": "Lemon"},
|
||||
{"label": "菠萝", "value": "Pineapple"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## searchApi
|
||||
|
||||
**发送**
|
||||
@ -957,42 +996,44 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | --------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| autoComplete | [API](../../../docs/types/api) | | [自动提示补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) |
|
||||
| delimiter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) |
|
||||
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
|
||||
| checkAll | `boolean` | `false` | 是否支持全选 |
|
||||
| checkAllLabel | `string` | `全选` | 全选的文字 |
|
||||
| checkAllBySearch | `boolean` | `false` | 有检索时只全选检索命中的项 |
|
||||
| defaultCheckAll | `boolean` | `false` | 默认是否全选 |
|
||||
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
|
||||
| multiple | `boolean` | `false` | [多选](./options#多选-multiple) |
|
||||
| searchable | `boolean` | `false` | [检索](./options#检索-searchable) |
|
||||
| createBtnLabel | `string` | `"新增选项"` | [新增选项](./options#%E6%96%B0%E5%A2%9E%E9%80%89%E9%A1%B9) |
|
||||
| addControls | Array<[表单项](./formitem)> | | [自定义新增表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols) |
|
||||
| addApi | [API](../../docs/types/api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) |
|
||||
| editable | `boolean` | `false` | [编辑选项](./options#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable) |
|
||||
| editControls | Array<[表单项](./formitem)> | | [自定义编辑表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols) |
|
||||
| editApi | [API](../../docs/types/api) | | [配置编辑选项接口](./options#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi) |
|
||||
| removable | `boolean` | `false` | [删除选项](./options#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9) |
|
||||
| deleteApi | [API](../../docs/types/api) | | [配置删除选项接口](./options#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi) |
|
||||
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
|
||||
| menuTpl | `string` | | 支持配置自定义菜单 |
|
||||
| clearable | `boolean` | | 单选模式下是否支持清空 |
|
||||
| hideSelected | `boolean` | `false` | 隐藏已选选项 |
|
||||
| mobileClassName | `string` | | 移动端浮层类名 |
|
||||
| selectMode | `string` | `` | 可选：`group`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。 |
|
||||
| searchResultMode | `string` | | 如果不设置将采用 `selectMode` 的值，可以单独配置，参考 `selectMode`，决定搜索结果的展示形式。 |
|
||||
| columns | `Array<Object>` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 |
|
||||
| leftOptions | `Array<Object>` | | 当展示形式为 `associated` 时用来配置左边的选项集。 |
|
||||
| leftMode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 |
|
||||
| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------ | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| autoComplete | [API](../../../docs/types/api) | | [自动提示补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) |
|
||||
| delimiter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) |
|
||||
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
|
||||
| checkAll | `boolean` | `false` | 是否支持全选 |
|
||||
| checkAllLabel | `string` | `全选` | 全选的文字 |
|
||||
| checkAllBySearch | `boolean` | `false` | 有检索时只全选检索命中的项 |
|
||||
| defaultCheckAll | `boolean` | `false` | 默认是否全选 |
|
||||
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
|
||||
| multiple | `boolean` | `false` | [多选](./options#多选-multiple) |
|
||||
| searchable | `boolean` | `false` | [检索](./options#检索-searchable) |
|
||||
| createBtnLabel | `string` | `"新增选项"` | [新增选项](./options#%E6%96%B0%E5%A2%9E%E9%80%89%E9%A1%B9) |
|
||||
| addControls | Array<[表单项](./formitem)> | | [自定义新增表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols) |
|
||||
| addApi | [API](../../docs/types/api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) |
|
||||
| editable | `boolean` | `false` | [编辑选项](./options#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable) |
|
||||
| editControls | Array<[表单项](./formitem)> | | [自定义编辑表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols) |
|
||||
| editApi | [API](../../docs/types/api) | | [配置编辑选项接口](./options#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi) |
|
||||
| removable | `boolean` | `false` | [删除选项](./options#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9) |
|
||||
| deleteApi | [API](../../docs/types/api) | | [配置删除选项接口](./options#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi) |
|
||||
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
|
||||
| menuTpl | `string` | | 支持配置自定义菜单 |
|
||||
| clearable | `boolean` | | 单选模式下是否支持清空 |
|
||||
| hideSelected | `boolean` | `false` | 隐藏已选选项 |
|
||||
| mobileClassName | `string` | | 移动端浮层类名 |
|
||||
| selectMode | `string` | `` | 可选：`group`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。 |
|
||||
| searchResultMode | `string` | | 如果不设置将采用 `selectMode` 的值，可以单独配置，参考 `selectMode`，决定搜索结果的展示形式。 |
|
||||
| columns | `Array<Object>` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 |
|
||||
| leftOptions | `Array<Object>` | | 当展示形式为 `associated` 时用来配置左边的选项集。 |
|
||||
| leftMode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 |
|
||||
| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |
|
||||
| maxTagCount | `number` | | 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效 |
|
||||
| overflowTagPopover | `TooltipObject` | `{"placement": "top", "trigger": "hover", "showArrow": false, "offset": [0, -10]}` | 收纳浮层的配置属性，详细配置参考[Tooltip](../tooltip#属性表) |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -402,9 +402,9 @@
|
||||
--Calendar-cell-bg: var(--white);
|
||||
--Calendar-cell-onActive-bg: var(--info);
|
||||
--Calendar-cell-onBetween-bg: #{rgba($info, 0.1)};
|
||||
--Calendar-cell-onDisabled-bg: #F7F7F9;
|
||||
--Calendar-cell-onHover-bg: #F7F7F9;
|
||||
--Calendar-color: #151b26;;
|
||||
--Calendar-cell-onDisabled-bg: #f7f7f9;
|
||||
--Calendar-cell-onHover-bg: #f7f7f9;
|
||||
--Calendar-color: #151b26;
|
||||
--Calendar-fontSize: var(--fontSizeSm);
|
||||
--Calendar-input-borderColor: var(--borderColor);
|
||||
--Calendar-input-borderRadius: var(--borderRadius);
|
||||
@ -420,7 +420,7 @@
|
||||
var(--Calendar-input-fontSize)
|
||||
) / 2
|
||||
);
|
||||
--Calendar-shortcut-color: #151B26;
|
||||
--Calendar-shortcut-color: #151b26;
|
||||
--Calendar-shortcut-decoration: none;
|
||||
--Calendar-shortcut-onHover-color: #{darken($info, 15%)};
|
||||
--Calendar-shortcut-onHover-decoration: none;
|
||||
@ -595,9 +595,9 @@
|
||||
--DatePicker-borderColor: var(--Form-input-borderColor);
|
||||
--DatePicker-borderRadius: var(--Form-input-borderRadius);
|
||||
--DatePicker-borderWidth: var(--Form-input-borderWidth);
|
||||
--DatePicker-color: #151b26;;
|
||||
--DatePicker-color: #151b26;
|
||||
--DatePicker-header-onHover-color: #{darken($info, 15%)};
|
||||
--DatePicker-arrow-color: #84868C;
|
||||
--DatePicker-arrow-color: #84868c;
|
||||
--DatePicker-fontSize: var(--fontSizeSm);
|
||||
--DatePicker-header-select-borderColor: #fff;
|
||||
--DatePicker-height: var(--Form-input-height);
|
||||
@ -794,8 +794,10 @@
|
||||
--Form-select-popoverGap: 0;
|
||||
--Form-select-search-height: var(--Form-select-menu-height);
|
||||
--Form-select-value-bgColor: var(--Form-input-onDisabled-bg);
|
||||
--Form-select-value-bgColor--dark: #46474f;
|
||||
--Form-select-value-borderColor: var(--Form-select-value-borderColor);
|
||||
--Form-select-valueIcon-color: var(--Form-select-valueIcon-color);
|
||||
--Form-select-valueIcon-color--dark: #e9e9e9;
|
||||
--Form-select-valueIcon-onHover-color: var(--Form-select-color);
|
||||
--Form-selectOption-height: var(--Form-input-height);
|
||||
--Form-selectValue-bg: #{saturate(lighten($info, 40%), 2.5%)};
|
||||
@ -1233,11 +1235,14 @@
|
||||
--Remark-onHover-iconColor: #fff;
|
||||
--Remark-width: 1rem;
|
||||
|
||||
--ResultBox-tag-height: #{px2rem(24px)};
|
||||
--ResultBox-tag-marginBottom: #{px2rem(2px)};
|
||||
--ResultBox-icon--onDisabled-color: #ebebeb;
|
||||
--ResultBox-icon--onHover-color: #666666;
|
||||
--ResultBox-icon-color: #999;
|
||||
--ResultBox-value--onDisabled-color: #cccccc;
|
||||
--ResultBox-value--onHover-bg: rgba(0, 145, 255, 0.1);
|
||||
--ResultBox-value--onHover-bg--dark: #b8babf;
|
||||
--ResultBox-value-bg: #f5f5f5;
|
||||
--ResultBox-value-color: #000;
|
||||
--ResultBox-value-clear-bg: #d4d6d9;
|
||||
|
||||
@ -126,13 +126,14 @@
|
||||
color: var(--ResultBox-value-color);
|
||||
font-size: var(--Form-input-fontSize);
|
||||
padding: 0 var(--gap-xs);
|
||||
min-height: px2rem(24px);
|
||||
min-height: var(--ResultBox-tag-height);
|
||||
flex-wrap: nowrap;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: var(--gap-xs);
|
||||
margin-bottom: px2rem(2px);
|
||||
margin-bottom: var(--ResultBox-tag-marginBottom);
|
||||
user-select: none;
|
||||
border-radius: #{px2rem(2px)};
|
||||
|
||||
> a {
|
||||
cursor: pointer;
|
||||
@ -199,6 +200,37 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-overflow {
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: calc(
|
||||
(var(--ResultBox-tag-height) + var(--ResultBox-tag-marginBottom)) * 5
|
||||
);
|
||||
}
|
||||
|
||||
&.#{$ns}Tooltip--dark {
|
||||
.#{$ns}ResultBox-overflow-wrapper {
|
||||
.#{$ns}ResultBox-value {
|
||||
color: var(--white);
|
||||
background-color: var(--Form-select-value-bgColor--dark);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--ResultBox-value--onHover-bg--dark);
|
||||
}
|
||||
|
||||
& > a {
|
||||
color: var(--Form-select-valueIcon-color--dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-mobile {
|
||||
min-height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
|
||||
border: none;
|
||||
|
||||
@ -1,6 +1,42 @@
|
||||
.#{$ns}Select {
|
||||
display: inline-flex;
|
||||
|
||||
/* select 标签样式 */
|
||||
@mixin select-value {
|
||||
.#{$ns}Select-value {
|
||||
position: static;
|
||||
white-space: normal;
|
||||
user-select: none;
|
||||
line-height: calc(
|
||||
var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(
|
||||
2px
|
||||
)}
|
||||
);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: var(--Form-selectValue-fontSize);
|
||||
background: var(--Form-select-value-bgColor);
|
||||
border: px2rem(1px) solid var(--Form-select-value-borderColor);
|
||||
border-radius: px2rem(2px);
|
||||
margin-right: var(--gap-xs);
|
||||
margin-bottom: var(--gap-xs);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--Form-selectValue-onHover-bgColor);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Select-valueLabel {
|
||||
display: inline-block;
|
||||
max-width: var(--Form-valueLabel-maxWidth);
|
||||
padding: 0 var(--gap-xs);
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&--block {
|
||||
display: flex;
|
||||
}
|
||||
@ -117,38 +153,7 @@
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.#{$ns}Select-value {
|
||||
position: static;
|
||||
white-space: normal;
|
||||
user-select: none;
|
||||
line-height: calc(
|
||||
var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(
|
||||
2px
|
||||
)}
|
||||
);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: var(--Form-selectValue-fontSize);
|
||||
background: var(--Form-select-value-bgColor);
|
||||
border: px2rem(1px) solid var(--Form-select-value-borderColor);
|
||||
border-radius: px2rem(2px);
|
||||
margin-right: var(--gap-xs);
|
||||
margin-bottom: var(--gap-xs);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--Form-selectValue-onHover-bgColor);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Select-valueLabel {
|
||||
display: inline-block;
|
||||
max-width: var(--Form-valueLabel-maxWidth);
|
||||
padding: 0 var(--gap-xs);
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@include select-value();
|
||||
}
|
||||
&-valueIcon {
|
||||
cursor: pointer;
|
||||
@ -390,6 +395,43 @@
|
||||
&-popup {
|
||||
height: px2rem(320px);
|
||||
}
|
||||
|
||||
&-overflow {
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: calc(
|
||||
(
|
||||
var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(
|
||||
2px
|
||||
)} + var(--gap-xs)
|
||||
) * 5
|
||||
);
|
||||
|
||||
@include select-value();
|
||||
}
|
||||
|
||||
&.#{$ns}Tooltip--dark {
|
||||
.#{$ns}Select-overflow-wrapper {
|
||||
.#{$ns}Select-value {
|
||||
background-color: var(--Form-select-value-bgColor--dark);
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--ResultBox-value--onHover-bg--dark);
|
||||
}
|
||||
|
||||
.#{$ns}Select-valueIcon {
|
||||
color: var(--Form-select-valueIcon-color--dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Select-popover {
|
||||
|
||||
@ -185,7 +185,9 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
|
||||
--Form-selectValue-color: var(--primary);
|
||||
--Form-select-value-borderColor: #{$G9};
|
||||
--Form-select-valueIcon-color: #{$G4};
|
||||
--Form-select-valueIcon-color--dark: #{$G8};
|
||||
--Form-select-multiple-bgColor: #{$G10};
|
||||
--Form-select-value-bgColor--dark: #{$G4};
|
||||
|
||||
--InputGroup-select-borderWidth: #{px2rem(1px)};
|
||||
--InputGroup-select-onFocused-bg: #eaf6fe;
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
import {ThemeProps, themeable} from '../theme';
|
||||
import React from 'react';
|
||||
import omit from 'lodash/omit';
|
||||
import isInteger from 'lodash/isInteger';
|
||||
import {InputBoxProps} from './InputBox';
|
||||
import {uncontrollable} from 'uncontrollable';
|
||||
import {Icon} from './icons';
|
||||
import Input from './Input';
|
||||
import {autobind, isMobile, ucFirst} from '../utils/helper';
|
||||
import {LocaleProps, localeable} from '../locale';
|
||||
import TooltipWrapper, {TooltipObject} from './TooltipWrapper';
|
||||
import isPlainObject = require('lodash/isPlainObject');
|
||||
|
||||
export interface ResultBoxProps
|
||||
@ -22,6 +25,8 @@ export interface ResultBoxProps
|
||||
inputPlaceholder: string;
|
||||
useMobileUI?: boolean;
|
||||
hasDropDownArrow?: boolean;
|
||||
maxTagCount?: number;
|
||||
overflowTagPopover?: TooltipObject;
|
||||
}
|
||||
|
||||
export class ResultBox extends React.Component<ResultBoxProps> {
|
||||
@ -94,6 +99,91 @@ export class ResultBox extends React.Component<ResultBoxProps> {
|
||||
onChange?.(e.currentTarget.value);
|
||||
}
|
||||
|
||||
renderMultipeTags(tags: any[]) {
|
||||
const {
|
||||
maxTagCount,
|
||||
overflowTagPopover,
|
||||
itemRender,
|
||||
classnames: cx
|
||||
} = this.props;
|
||||
|
||||
if (
|
||||
maxTagCount != null &&
|
||||
isInteger(Math.floor(maxTagCount)) &&
|
||||
Math.floor(maxTagCount) >= 0 &&
|
||||
Math.floor(maxTagCount) < tags.length
|
||||
) {
|
||||
const maxVisibleCount = Math.floor(maxTagCount);
|
||||
const tooltipProps: TooltipObject = {
|
||||
placement: 'top',
|
||||
trigger: 'hover',
|
||||
showArrow: false,
|
||||
offset: [0, -10],
|
||||
tooltipClassName: cx(
|
||||
'ResultBox-overflow',
|
||||
overflowTagPopover?.tooltipClassName
|
||||
),
|
||||
...omit(overflowTagPopover, ['children', 'content', 'tooltipClassName'])
|
||||
};
|
||||
|
||||
return [
|
||||
...tags.slice(0, maxVisibleCount),
|
||||
{label: `+ ${tags.length - maxVisibleCount} ...`}
|
||||
].map((item, index) => {
|
||||
return index === maxVisibleCount ? (
|
||||
<TooltipWrapper
|
||||
key={tags.length}
|
||||
tooltip={{
|
||||
...tooltipProps,
|
||||
children: () => (
|
||||
<div className={cx('ResultBox-overflow-wrapper')}>
|
||||
{tags
|
||||
.slice(maxVisibleCount, tags.length)
|
||||
.map((item, index) => {
|
||||
const itemIndex = index + maxVisibleCount;
|
||||
|
||||
return (
|
||||
<div className={cx('ResultBox-value')} key={itemIndex}>
|
||||
<span className={cx('ResultBox-valueLabel')}>
|
||||
{itemRender(item)}
|
||||
</span>
|
||||
<a data-index={itemIndex} onClick={this.removeItem}>
|
||||
<Icon icon="close" className="icon" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
>
|
||||
<div className={cx('ResultBox-value')} key={index}>
|
||||
<span className={cx('ResultBox-valueLabel')}>{item.label}</span>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
) : (
|
||||
<div className={cx('ResultBox-value')} key={index}>
|
||||
<span className={cx('ResultBox-valueLabel')}>
|
||||
{itemRender(item)}
|
||||
</span>
|
||||
<a data-index={index} onClick={this.removeItem}>
|
||||
<Icon icon="close" className="icon" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
return tags.map((item, index) => (
|
||||
<div className={cx('ResultBox-value')} key={index}>
|
||||
<span className={cx('ResultBox-valueLabel')}>{itemRender(item)}</span>
|
||||
<a data-index={index} onClick={this.removeItem}>
|
||||
<Icon icon="close" className="icon" />
|
||||
</a>
|
||||
</div>
|
||||
));
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
className,
|
||||
@ -125,6 +215,7 @@ export class ResultBox extends React.Component<ResultBoxProps> {
|
||||
} = this.props;
|
||||
const isFocused = this.state.isFocused;
|
||||
const mobileUI = useMobileUI && isMobile();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cx('ResultBox', className, {
|
||||
@ -144,16 +235,7 @@ export class ResultBox extends React.Component<ResultBoxProps> {
|
||||
onBlur={allowInput ? undefined : onBlur}
|
||||
>
|
||||
{Array.isArray(result) && result.length ? (
|
||||
result.map((item, index) => (
|
||||
<div className={cx('ResultBox-value')} key={index}>
|
||||
<span className={cx('ResultBox-valueLabel')}>
|
||||
{itemRender(item)}
|
||||
</span>
|
||||
<a data-index={index} onClick={this.removeItem}>
|
||||
<Icon icon="close" className="icon" />
|
||||
</a>
|
||||
</div>
|
||||
))
|
||||
this.renderMultipeTags(result)
|
||||
) : result && !Array.isArray(result) ? (
|
||||
<span className={cx('ResultBox-singleValue')}>
|
||||
{isPlainObject(result) ? itemRender(result) : result}
|
||||
@ -174,7 +256,9 @@ export class ResultBox extends React.Component<ResultBoxProps> {
|
||||
placeholder={__(
|
||||
Array.isArray(result) && result.length
|
||||
? inputPlaceholder
|
||||
: (result ? '' : placeholder)
|
||||
: result
|
||||
? ''
|
||||
: placeholder
|
||||
)}
|
||||
onFocus={this.handleFocus}
|
||||
onBlur={this.handleBlur}
|
||||
|
||||
@ -7,6 +7,8 @@
|
||||
|
||||
import {uncontrollable} from 'uncontrollable';
|
||||
import React from 'react';
|
||||
import isInteger from 'lodash/isInteger';
|
||||
import omit from 'lodash/omit';
|
||||
import VirtualList from './virtual-list';
|
||||
import Overlay from './Overlay';
|
||||
import PopOver from './PopOver';
|
||||
@ -24,15 +26,12 @@ import {
|
||||
normalizeNodePath,
|
||||
isMobile
|
||||
} from '../utils/helper';
|
||||
import find from 'lodash/find';
|
||||
import isPlainObject from 'lodash/isPlainObject';
|
||||
import union from 'lodash/union';
|
||||
import {highlight} from '../renderers/Form/Options';
|
||||
import {findDOMNode} from 'react-dom';
|
||||
import {ClassNamesFn, themeable, ThemeProps} from '../theme';
|
||||
import Checkbox from './Checkbox';
|
||||
import Input from './Input';
|
||||
import {Api} from '../types';
|
||||
import {LocaleProps, localeable} from '../locale';
|
||||
import Spinner from './Spinner';
|
||||
import {Option, Options} from '../Schema';
|
||||
@ -40,6 +39,8 @@ import {RemoteOptionsProps, withRemoteConfig} from './WithRemoteConfig';
|
||||
import Picker from './Picker';
|
||||
import PopUp from './PopUp';
|
||||
|
||||
import type {TooltipObject} from '../components/TooltipWrapper';
|
||||
|
||||
export {Option, Options};
|
||||
|
||||
export interface OptionProps {
|
||||
@ -352,6 +353,16 @@ interface SelectProps extends OptionProps, ThemeProps, LocaleProps {
|
||||
* 移动端样式类名
|
||||
*/
|
||||
mobileClassName?: string;
|
||||
|
||||
/**
|
||||
* 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效
|
||||
*/
|
||||
maxTagCount?: number;
|
||||
|
||||
/**
|
||||
* 收纳标签的Popover配置
|
||||
*/
|
||||
overflowTagPopover?: TooltipObject;
|
||||
}
|
||||
|
||||
interface SelectState {
|
||||
@ -726,11 +737,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
||||
placeholder,
|
||||
labelField,
|
||||
disabled,
|
||||
maxTagCount,
|
||||
overflowTagPopover,
|
||||
translate: __
|
||||
} = this.props;
|
||||
|
||||
const selection = this.state.selection;
|
||||
// console.log('selection', selection);
|
||||
|
||||
if (!selection.length) {
|
||||
return (
|
||||
@ -740,6 +751,114 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
multiple &&
|
||||
maxTagCount != null &&
|
||||
isInteger(Math.floor(maxTagCount)) &&
|
||||
Math.floor(maxTagCount) >= 0 &&
|
||||
Math.floor(maxTagCount) < selection.length
|
||||
) {
|
||||
const maxVisibleCount = Math.floor(maxTagCount);
|
||||
const tooltipProps: TooltipObject = {
|
||||
placement: 'top',
|
||||
trigger: 'hover',
|
||||
showArrow: false,
|
||||
offset: [0, -10],
|
||||
tooltipClassName: cx(
|
||||
'Select-overflow',
|
||||
overflowTagPopover?.tooltipClassName
|
||||
),
|
||||
...omit(overflowTagPopover, ['children', 'content', 'tooltipClassName'])
|
||||
};
|
||||
return [
|
||||
...selection.slice(0, maxVisibleCount),
|
||||
{label: `+ ${selection.length - maxVisibleCount} ...`}
|
||||
].map((item, index) => {
|
||||
if (index === maxVisibleCount) {
|
||||
return (
|
||||
<TooltipWrapper
|
||||
key={selection.length}
|
||||
tooltip={{
|
||||
...tooltipProps,
|
||||
children: () => (
|
||||
<div className={cx('Select-overflow-wrapper')}>
|
||||
{selection
|
||||
.slice(maxVisibleCount, selection.length)
|
||||
.map((item, index) => {
|
||||
const itemIndex = index + maxVisibleCount;
|
||||
return (
|
||||
<div
|
||||
key={itemIndex}
|
||||
className={cx('Select-value', {
|
||||
'is-disabled': disabled,
|
||||
'is-invalid': item.__unmatched
|
||||
})}
|
||||
>
|
||||
<span className={cx('Select-valueLabel')}>
|
||||
{item[labelField || 'label']}
|
||||
</span>
|
||||
<span
|
||||
className={cx('Select-valueIcon', {
|
||||
'is-disabled': disabled || item.disabled
|
||||
})}
|
||||
onClick={this.removeItem.bind(this, itemIndex)}
|
||||
>
|
||||
<Icon icon="close" className="icon" />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={cx('Select-value', {
|
||||
'is-disabled': disabled,
|
||||
'is-invalid': item.__unmatched
|
||||
})}
|
||||
onClick={(e: React.MouseEvent) =>
|
||||
e.stopPropagation()
|
||||
} /** 避免点击查看浮窗时呼出下拉菜单 */
|
||||
>
|
||||
<span className={cx('Select-valueLabel')}>
|
||||
{item[labelField || 'label']}
|
||||
</span>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<TooltipWrapper
|
||||
placement={'top'}
|
||||
tooltip={item[labelField || 'label']}
|
||||
trigger={'hover'}
|
||||
key={index}
|
||||
>
|
||||
<div
|
||||
className={cx('Select-value', {
|
||||
'is-disabled': disabled,
|
||||
'is-invalid': item.__unmatched
|
||||
})}
|
||||
>
|
||||
<span className={cx('Select-valueLabel')}>
|
||||
{item[labelField || 'label']}
|
||||
</span>
|
||||
<span
|
||||
className={cx('Select-valueIcon', {
|
||||
'is-disabled': disabled || item.disabled
|
||||
})}
|
||||
onClick={this.removeItem.bind(this, index)}
|
||||
>
|
||||
<Icon icon="close" className="icon" />
|
||||
</span>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
return selection.map((item, index) => {
|
||||
if (!multiple) {
|
||||
return (
|
||||
|
||||
@ -63,7 +63,7 @@ export interface TooltipObject {
|
||||
/**
|
||||
* 浮层内容可通过JSX渲染
|
||||
*/
|
||||
children?: () => JSX.Element | JSX.Element;
|
||||
children?: () => JSX.Element;
|
||||
/**
|
||||
* 挂载容器元素
|
||||
*/
|
||||
@ -98,7 +98,7 @@ export interface TooltipWrapperProps {
|
||||
/**
|
||||
* 显示&隐藏时触发
|
||||
*/
|
||||
onVisibleChange?: (visible: boolean) => void;
|
||||
onVisibleChange?: (visible: boolean) => void;
|
||||
}
|
||||
|
||||
interface TooltipWrapperState {
|
||||
@ -153,25 +153,31 @@ export class TooltipWrapper extends React.Component<
|
||||
}
|
||||
|
||||
show() {
|
||||
this.setState({
|
||||
show: true
|
||||
}, () => {
|
||||
if (this.props.onVisibleChange) {
|
||||
this.props.onVisibleChange(true);
|
||||
this.setState(
|
||||
{
|
||||
show: true
|
||||
},
|
||||
() => {
|
||||
if (this.props.onVisibleChange) {
|
||||
this.props.onVisibleChange(true);
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
}
|
||||
|
||||
hide() {
|
||||
waitToHide = null;
|
||||
this.moutned &&
|
||||
this.setState({
|
||||
show: false
|
||||
}, () => {
|
||||
if (this.props.onVisibleChange) {
|
||||
this.props.onVisibleChange(false);
|
||||
this.setState(
|
||||
{
|
||||
show: false
|
||||
},
|
||||
() => {
|
||||
if (this.props.onVisibleChange) {
|
||||
this.props.onVisibleChange(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
}
|
||||
|
||||
getChildProps() {
|
||||
|
||||
@ -9,6 +9,8 @@ import InputBox from './InputBox';
|
||||
import PopOverContainer from './PopOverContainer';
|
||||
import {isMobile} from '../utils/helper';
|
||||
|
||||
import type {TooltipObject} from './TooltipWrapper';
|
||||
|
||||
export interface TransferDropDownProps extends TransferProps {
|
||||
// 新的属性？
|
||||
multiple?: boolean;
|
||||
@ -16,6 +18,8 @@ export interface TransferDropDownProps extends TransferProps {
|
||||
useMobileUI?: boolean;
|
||||
popOverContainer?: any;
|
||||
itemRender: (value: any) => JSX.Element | string;
|
||||
maxTagCount?: number;
|
||||
overflowTagPopover?: TooltipObject;
|
||||
}
|
||||
|
||||
export class TransferDropDown extends Transfer<TransferDropDownProps> {
|
||||
@ -33,7 +37,9 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
|
||||
multiple,
|
||||
borderMode,
|
||||
useMobileUI,
|
||||
popOverContainer
|
||||
popOverContainer,
|
||||
maxTagCount,
|
||||
overflowTagPopover
|
||||
} = this.props;
|
||||
const {inputValue, searchResult} = this.state;
|
||||
|
||||
@ -109,6 +115,8 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
|
||||
placeholder={__('Select.placeholder')}
|
||||
disabled={disabled}
|
||||
clearable={clearable}
|
||||
maxTagCount={maxTagCount}
|
||||
overflowTagPopover={overflowTagPopover}
|
||||
ref={ref}
|
||||
itemRender={itemRender}
|
||||
useMobileUI={useMobileUI}
|
||||
|
||||
@ -32,6 +32,16 @@ export interface TagControlSchema extends FormOptionsControl {
|
||||
* 是否为下拉模式
|
||||
*/
|
||||
dropdown?: boolean;
|
||||
|
||||
/**
|
||||
* 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效
|
||||
*/
|
||||
maxTagCount?: number;
|
||||
|
||||
/**
|
||||
* 收纳标签的Popover配置
|
||||
*/
|
||||
overflowTagPopover: object;
|
||||
}
|
||||
|
||||
// declare function matchSorter(items:Array<any>, input:any, options:any): Array<any>;
|
||||
@ -316,6 +326,8 @@ export default class TagControl extends React.PureComponent<
|
||||
dropdown,
|
||||
options,
|
||||
optionsTip,
|
||||
maxTagCount,
|
||||
overflowTagPopover,
|
||||
translate: __
|
||||
} = this.props;
|
||||
|
||||
@ -359,6 +371,8 @@ export default class TagControl extends React.PureComponent<
|
||||
onResultChange={this.handleChange}
|
||||
itemRender={this.renderItem}
|
||||
clearable={clearable}
|
||||
maxTagCount={maxTagCount}
|
||||
overflowTagPopover={overflowTagPopover}
|
||||
allowInput
|
||||
>
|
||||
{loading ? <Spinner size="sm" /> : undefined}
|
||||
|
||||
@ -18,6 +18,8 @@ import Spinner from '../../components/Spinner';
|
||||
import {BaseTransferRenderer, TransferControlSchema} from './Transfer';
|
||||
import TransferDropDown from '../../components/TransferDropDown';
|
||||
|
||||
import type {TooltipObject} from '../../components/TooltipWrapper';
|
||||
|
||||
/**
|
||||
* Select 下拉选择框。
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/select
|
||||
@ -110,6 +112,16 @@ export interface SelectControlSchema extends FormOptionsControl {
|
||||
* 可多选条件下，全选项文案，默认 ”全选“
|
||||
*/
|
||||
checkAllLabel?: string;
|
||||
|
||||
/**
|
||||
* 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效
|
||||
*/
|
||||
maxTagCount?: number;
|
||||
|
||||
/**
|
||||
* 收纳标签的Popover配置
|
||||
*/
|
||||
overflowTagPopover: object;
|
||||
}
|
||||
|
||||
export interface SelectProps extends OptionsControlProps {
|
||||
@ -117,6 +129,8 @@ export interface SelectProps extends OptionsControlProps {
|
||||
searchable?: boolean;
|
||||
defaultOpen?: boolean;
|
||||
useMobileUI?: boolean;
|
||||
maxTagCount?: number;
|
||||
overflowTagPopover?: TooltipObject;
|
||||
}
|
||||
|
||||
export type SelectRendererEvent =
|
||||
@ -489,7 +503,9 @@ class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProp
|
||||
leftMode,
|
||||
borderMode,
|
||||
useMobileUI,
|
||||
popOverContainer
|
||||
popOverContainer,
|
||||
maxTagCount,
|
||||
overflowTagPopover
|
||||
} = this.props;
|
||||
|
||||
// 目前 LeftOptions 没有接口可以动态加载
|
||||
@ -533,6 +549,8 @@ class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProp
|
||||
borderMode={borderMode}
|
||||
useMobileUI={useMobileUI}
|
||||
popOverContainer={popOverContainer}
|
||||
maxTagCount={maxTagCount}
|
||||
overflowTagPopover={overflowTagPopover}
|
||||
/>
|
||||
|
||||
<Spinner overlay key="info" show={loading} />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user