From 42cbec8f443a76cc538bcbf1033f2765285521eb Mon Sep 17 00:00:00 2001 From: Ma ke <33743617+jiatianqi@users.noreply.github.com> Date: Thu, 7 Apr 2022 14:11:15 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20combo=E7=BB=84=E4=BB=B6=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E2=80=98=E8=87=AA=E5=AE=9A=E4=B9=89=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E2=80=99=E5=B1=9E=E6=80=A7=20(#3951)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: combo组件增加‘自定义新增按钮’属性 * 调整利用typeof 验证object Co-authored-by: ”jiatianqi“ <”jiatianqi@baidu.com“> --- docs/zh-CN/components/form/combo.md | 45 ++++++++- src/renderers/Form/Combo.tsx | 143 ++++++++++++++-------------- 2 files changed, 114 insertions(+), 74 deletions(-) diff --git a/docs/zh-CN/components/form/combo.md b/docs/zh-CN/components/form/combo.md index dcad46937..985d3766d 100755 --- a/docs/zh-CN/components/form/combo.md +++ b/docs/zh-CN/components/form/combo.md @@ -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` | `"新增"` | 新增按钮文字 | ## 事件表 diff --git a/src/renderers/Form/Combo.tsx b/src/renderers/Form/Combo.tsx index d31cfc59c..206e6ca5b 100644 --- a/src/renderers/Form/Combo.tsx +++ b/src/renderers/Form/Combo.tsx @@ -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 { if ( syncDefaultValue !== false && !nullable && - isObjectShallowModified(value, values) && - setPrinstineValue + isObjectShallowModified(value, values) ) { setPrinstineValue({ ...values @@ -997,43 +997,7 @@ export default class ComboControl extends React.Component { additionBtns={ !disabled ? (
  • - {store.addable && addable !== false ? ( - Array.isArray(conditions) && conditions.length ? ( - render( - 'add-button', - { - type: 'dropdown-button', - icon: addIcon ? ( - - ) : ( - '' - ), - label: __(addButtonText || 'add'), - level: 'info', - size: 'sm', - closeOnClick: true - }, - { - buttons: conditions.map(item => ({ - label: item.label, - onClick: (e: any) => { - this.addItemWith(item); - return false; - } - })) - } - ) - ) : ( - - {addIcon ? : null} - {__(addButtonText || 'add')} - - ) - ) : null} + {this.renderAddBtn()}
    • ) : null } @@ -1192,7 +1156,7 @@ export default class ComboControl extends React.Component { 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 { ); } + 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 ? : '', + 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 ? ( + + {addIcon ? : null} + {__(addButtonText || 'Combo.add')} + + ) : isObject(addBtn) ? ( + render('add-button', { + ...addBtn, + type: 'button', + onClick: () => this.addItem() + }) + ) : ( + + ))} + + ); + } + renderMultipe() { if (this.props.tabsMode) { return this.renderTabsMode(); @@ -1408,38 +1438,7 @@ export default class ComboControl extends React.Component { {!disabled ? (
    - {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; - } - })) - } - ) - ) : ( - - ) - ) : null} + {this.renderAddBtn()} {draggable ? ( {Array.isArray(value) && value.length > 1