mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
feat: combo组件增加‘自定义新增按钮’属性 (#3951)
* feat: combo组件增加‘自定义新增按钮’属性 * 调整利用typeof 验证object Co-authored-by: ”jiatianqi“ <”jiatianqi@baidu.com“>
This commit is contained in:
Ma ke
GitHub
parent
e6411b7630
commit
42cbec8f44
@ -822,6 +822,46 @@ combo 还有一个作用是增加层级，比如返回的数据是一个深层
|
||||
}
|
||||
```
|
||||
|
||||
## 自定义新增按钮
|
||||
|
||||
可以通过配置 `addBtn` 属性自定义新增按钮，在非 Tabs 模式下生效。目前 `addBtn` 支持属性 [Button](../button.md)类型
|
||||
|
||||
如果仅想更改新增按钮文本请使用 `addButtonText`, 仅想增添样式请使用 `addButtonClassName`
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"mode": "horizontal",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"body": [
|
||||
{
|
||||
"type": "combo",
|
||||
"name": "combo",
|
||||
"label": "自定义新增",
|
||||
"multiple": true,
|
||||
"addBtn": {
|
||||
"type": "button",
|
||||
"label": "增加",
|
||||
"level": "default",
|
||||
"block": true
|
||||
},
|
||||
"items": [
|
||||
{
|
||||
"name": "text",
|
||||
"type": "input-text"
|
||||
}
|
||||
],
|
||||
"value": [
|
||||
{
|
||||
"text": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 属性表
|
||||
|
||||
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
@ -829,7 +869,6 @@ combo 还有一个作用是增加层级，比如返回的数据是一个深层
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------------ | ---------------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| formClassName | `string` | | 单组表单项的类名 |
|
||||
| addButtonClassName | `string` | | 新增按钮 CSS 类名 |
|
||||
| items | Array<[表单项](./formitem)> | | 组合展示的表单项 |
|
||||
| items[x].columnClassName | `string` | | 列的类名，可以用它配置列宽度。默认平均分配。 |
|
||||
| items[x].unique | `boolean` | | 设置当前列值是否唯一，即不允许重复选择。 |
|
||||
@ -843,7 +882,6 @@ combo 还有一个作用是增加层级，比如返回的数据是一个深层
|
||||
| joinValues | `boolean` | `true` | 默认为 `true` 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用 array 的方式。 |
|
||||
| delimiter | `string` | `false` | 当扁平化开启并且 joinValues 为 true 时，用什么分隔符。 |
|
||||
| addable | `boolean` | `false` | 是否可新增 |
|
||||
| addButtonText | `string` | `"新增"` | 新增按钮文字 |
|
||||
| removable | `boolean` | `false` | 是否可删除 |
|
||||
| deleteApi | [API](../../../docs/types/api) | | 如果配置了，则删除前会发送一个 api，请求成功才完成删除 |
|
||||
| deleteConfirmText | `string` | `"确认要删除？"` | 当配置 `deleteApi` 才生效！删除时用来做用户确认 |
|
||||
@ -860,6 +898,9 @@ combo 还有一个作用是增加层级，比如返回的数据是一个深层
|
||||
| itemClassName | `string` | | 单组 CSS 类 |
|
||||
| itemsWrapperClassName | `string` | | 组合区域 CSS 类 |
|
||||
| deleteBtn | [Button](../button.md) or `string` | 自定义删除按钮 | 只有当`removable`为 `true` 时有效; 如果为`string`则为按钮的文本；如果为`Button`则根据配置渲染删除按钮。 |
|
||||
| addBtn | [Button](../button.md) | 自定义新增按钮 | 可新增自定义配置渲染新增按钮，在`tabsMode: true`下不生效。 |
|
||||
| addButtonClassName | `string` | | 新增按钮 CSS 类名 |
|
||||
| addButtonText | `string` | `"新增"` | 新增按钮文字 |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@ import {Action, Api} from '../../types';
|
||||
import {ComboStore, IComboStore} from '../../store/combo';
|
||||
import {default as CTabs, Tab} from '../../components/Tabs';
|
||||
import Button from '../../components/Button';
|
||||
import {ButtonSchema} from '../Action';
|
||||
|
||||
import {
|
||||
guid,
|
||||
@ -679,8 +680,7 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
if (
|
||||
syncDefaultValue !== false &&
|
||||
!nullable &&
|
||||
isObjectShallowModified(value, values) &&
|
||||
setPrinstineValue
|
||||
isObjectShallowModified(value, values)
|
||||
) {
|
||||
setPrinstineValue({
|
||||
...values
|
||||
@ -997,43 +997,7 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
additionBtns={
|
||||
!disabled ? (
|
||||
<li className={cx(`Tabs-link ComboTabs-addLink`)}>
|
||||
{store.addable && addable !== false ? (
|
||||
Array.isArray(conditions) && conditions.length ? (
|
||||
render(
|
||||
'add-button',
|
||||
{
|
||||
type: 'dropdown-button',
|
||||
icon: addIcon ? (
|
||||
<Icon icon="plus" className="icon" />
|
||||
) : (
|
||||
''
|
||||
),
|
||||
label: __(addButtonText || 'add'),
|
||||
level: 'info',
|
||||
size: 'sm',
|
||||
closeOnClick: true
|
||||
},
|
||||
{
|
||||
buttons: conditions.map(item => ({
|
||||
label: item.label,
|
||||
onClick: (e: any) => {
|
||||
this.addItemWith(item);
|
||||
return false;
|
||||
}
|
||||
}))
|
||||
}
|
||||
)
|
||||
) : (
|
||||
<a
|
||||
onClick={this.addItem}
|
||||
data-position="left"
|
||||
data-tooltip={__('add')}
|
||||
>
|
||||
{addIcon ? <Icon icon="plus" className="icon" /> : null}
|
||||
<span>{__(addButtonText || 'add')}</span>
|
||||
</a>
|
||||
)
|
||||
) : null}
|
||||
{this.renderAddBtn()}
|
||||
</li>
|
||||
) : null
|
||||
}
|
||||
@ -1192,7 +1156,7 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
type: 'button',
|
||||
className: cx(
|
||||
'Combo-delController',
|
||||
deleteBtn ? deleteBtn.classname : ''
|
||||
deleteBtn ? deleteBtn.className : ''
|
||||
),
|
||||
onClick: (e: any) => {
|
||||
if (!deleteBtn.onClick) {
|
||||
@ -1249,6 +1213,72 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
);
|
||||
}
|
||||
|
||||
renderAddBtn() {
|
||||
const {
|
||||
classPrefix: ns,
|
||||
classnames: cx,
|
||||
render,
|
||||
addButtonClassName,
|
||||
store,
|
||||
addButtonText,
|
||||
addBtn,
|
||||
addable,
|
||||
addIcon,
|
||||
conditions,
|
||||
translate: __,
|
||||
tabsMode
|
||||
} = this.props;
|
||||
|
||||
const hasConditions = Array.isArray(conditions) && conditions.length;
|
||||
return (
|
||||
<>
|
||||
{store.addable &&
|
||||
addable !== false &&
|
||||
(hasConditions ? (
|
||||
render(
|
||||
'add-button',
|
||||
{
|
||||
type: 'dropdown-button',
|
||||
icon: addIcon ? <Icon icon="plus" className="icon" /> : '',
|
||||
label: __(addButtonText || 'Combo.add'),
|
||||
level: 'info',
|
||||
size: 'sm',
|
||||
closeOnClick: true
|
||||
},
|
||||
{
|
||||
buttons: conditions.map(item => ({
|
||||
label: item.label,
|
||||
onClick: (e: any) => {
|
||||
this.addItemWith(item);
|
||||
return false;
|
||||
}
|
||||
}))
|
||||
}
|
||||
)
|
||||
) : tabsMode ? (
|
||||
<a onClick={this.addItem}>
|
||||
{addIcon ? <Icon icon="plus" className="icon" /> : null}
|
||||
<span>{__(addButtonText || 'Combo.add')}</span>
|
||||
</a>
|
||||
) : isObject(addBtn) ? (
|
||||
render('add-button', {
|
||||
...addBtn,
|
||||
type: 'button',
|
||||
onClick: () => this.addItem()
|
||||
})
|
||||
) : (
|
||||
<Button
|
||||
className={cx(`Combo-addBtn`, addButtonClassName)}
|
||||
onClick={this.addItem}
|
||||
>
|
||||
{addIcon ? <Icon icon="plus" className="icon" /> : null}
|
||||
<span>{__(addButtonText || 'Combo.add')}</span>
|
||||
</Button>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
renderMultipe() {
|
||||
if (this.props.tabsMode) {
|
||||
return this.renderTabsMode();
|
||||
@ -1408,38 +1438,7 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
</div>
|
||||
{!disabled ? (
|
||||
<div className={cx(`Combo-toolbar`)}>
|
||||
{store.addable && addable !== false ? (
|
||||
Array.isArray(conditions) && conditions.length ? (
|
||||
render(
|
||||
'add-button',
|
||||
{
|
||||
type: 'dropdown-button',
|
||||
label: __(addButtonText || 'add'),
|
||||
level: 'info',
|
||||
size: 'sm',
|
||||
closeOnClick: true
|
||||
},
|
||||
{
|
||||
buttons: conditions.map(item => ({
|
||||
label: item.label,
|
||||
onClick: (e: any) => {
|
||||
this.addItemWith(item);
|
||||
return false;
|
||||
}
|
||||
}))
|
||||
}
|
||||
)
|
||||
) : (
|
||||
<Button
|
||||
className={cx(`Combo-addBtn`, addButtonClassName)}
|
||||
tooltip={__('add')}
|
||||
onClick={this.addItem}
|
||||
>
|
||||
{addIcon ? <Icon icon="plus" className="icon" /> : null}
|
||||
<span>{__(addButtonText || 'add')}</span>
|
||||
</Button>
|
||||
)
|
||||
) : null}
|
||||
{this.renderAddBtn()}
|
||||
{draggable ? (
|
||||
<span className={cx(`Combo-dragableTip`)} ref={this.dragTipRef}>
|
||||
{Array.isArray(value) && value.length > 1
|
||||
|
||||
Loading…
Reference in New Issue
Block a user