diff --git a/docs/zh-CN/components/form/combo.md b/docs/zh-CN/components/form/combo.md index 3604ff941..82cfe6a0f 100755 --- a/docs/zh-CN/components/form/combo.md +++ b/docs/zh-CN/components/form/combo.md @@ -783,3 +783,5 @@ combo 还有一个作用是增加层级,比如返回的数据是一个深层 | strictMode | `boolean` | `true` | 默认为严格模式,设置为 false 时,当其他表单项更新是,里面的表单项也可以及时获取,否则不会。 | | syncFields | `Array` | `[]` | 配置同步字段。只有 `strictMode` 为 `false` 时有效。如果 Combo 层级比较深,底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式:`["os"]` | | nullable | `boolean` | `false` | 允许为空,如果子表单项里面配置验证器,且又是单条模式。可以允许用户选择清空(不填)。 | +| itemClassName | `string` | | 单组 CSS 类 | +| itemsWrapperClassName | `string` | | 组合区域 CSS 类 | diff --git a/src/components/icons.tsx b/src/components/icons.tsx index d1deceaa5..630fe5409 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -83,6 +83,7 @@ import AlertDanger from '../icons/alert-danger.svg'; import FunctionIcon from '../icons/function.svg'; import InputClearIcon from '../icons/input-clear.svg'; import SliderHandleIcon from '../icons/slider-handle-icon.svg'; +import TrashIcon from '../icons/trash.svg'; // 兼容原来的用法,后续不直接试用。 @@ -192,6 +193,7 @@ registerIcon('slider-handle', SliderHandleIcon); registerIcon('cloud-upload', CloudUploadIcon); registerIcon('image', ImageIcon); registerIcon('refresh', RefreshIcon); +registerIcon('trash', TrashIcon); export function Icon({ icon, diff --git a/src/icons/trash.svg b/src/icons/trash.svg new file mode 100644 index 000000000..442627172 --- /dev/null +++ b/src/icons/trash.svg @@ -0,0 +1,8 @@ + + + 4.图标元件/3.操作/删除 + + + + + \ No newline at end of file diff --git a/src/renderers/Form/Combo.tsx b/src/renderers/Form/Combo.tsx index 841ae402c..ade11e1b8 100644 --- a/src/renderers/Form/Combo.tsx +++ b/src/renderers/Form/Combo.tsx @@ -10,6 +10,7 @@ import { import {Schema, Action, Api} from '../../types'; import {ComboStore, IComboStore} from '../../store/combo'; import {default as CTabs, Tab} from '../../components/Tabs'; +import Button from '../../components/Button'; import { guid, @@ -294,6 +295,8 @@ export default class ComboControl extends React.Component { | 'tabsMode' | 'tabsStyle' | 'placeholder' + | 'itemClassName' + | 'itemsWrapperClassName' > = { minLength: 0, maxLength: 0, @@ -310,7 +313,9 @@ export default class ComboControl extends React.Component { deleteIcon: '', tabsMode: false, tabsStyle: '', - placeholder: 'placeholder.empty' + placeholder: 'placeholder.empty', + itemClassName: '', + itemsWrapperClassName: '' }; static propsList: Array = [ 'minLength', @@ -337,7 +342,9 @@ export default class ComboControl extends React.Component { 'items', 'conditions', 'messages', - 'formStore' + 'formStore', + 'itemClassName', + 'itemsWrapperClassName' ]; subForms: Array = []; @@ -1186,7 +1193,9 @@ export default class ComboControl extends React.Component { lazyLoad, changeImmediately, placeholder, - translate: __ + translate: __, + itemClassName, + itemsWrapperClassName } = this.props; let items = this.props.items; @@ -1213,7 +1222,7 @@ export default class ComboControl extends React.Component { : '' )} > -
+
{Array.isArray(value) && value.length ? ( value.map((value, index, thelist) => { let delBtn: any = null; @@ -1224,21 +1233,20 @@ export default class ComboControl extends React.Component { evalExpression(itemRemovableOn, value) !== false) ) { delBtn = ( - {deleteIcon ? ( ) : ( )} - + ); } @@ -1262,7 +1270,7 @@ export default class ComboControl extends React.Component { return (
{!disabled && draggable && thelist.length > 1 ? ( @@ -1363,15 +1371,16 @@ export default class ComboControl extends React.Component { } ) ) : ( - + ) ) : null} {draggable ? ( @@ -1400,7 +1409,8 @@ export default class ComboControl extends React.Component { disabled, typeSwitchable, nullable, - translate: __ + translate: __, + itemClassName } = this.props; let items = this.props.items; @@ -1421,7 +1431,7 @@ export default class ComboControl extends React.Component { disabled ? 'is-disabled' : '' )} > -
+
{condition && typeSwitchable !== false ? (