amis 1.7.0 → 1.8.0-beta.13

package/lib/renderers/Form/Checkboxes.js

@@ -5,9 +5,9 @@ var tslib_1 = require("tslib");
 var react_1 = (0, tslib_1.__importDefault)(require("react"));
 var Options_1 = require("./Options");
 var Checkbox_1 = (0, tslib_1.__importDefault)(require("../../components/Checkbox"));
-var chunk_1 = (0, tslib_1.__importDefault)(require("lodash/chunk"));
 var icons_1 = require("../../components/icons");
 var helper_1 = require("../../utils/helper");
+var columnsSplit_1 = require("../../utils/columnsSplit");
 var CheckboxesControl = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(CheckboxesControl, _super);
     function CheckboxesControl() {
@@ -33,6 +33,92 @@ var CheckboxesControl = /** @class */ (function (_super) {
         e.stopPropagation();
         onDelete && onDelete(item);
     };
+    CheckboxesControl.prototype.componentDidMount = function () {
+        this.updateBorderStyle();
+        window.addEventListener('resize', this.updateBorderStyle);
+    };
+    CheckboxesControl.prototype.componentWillMount = function () {
+        window.removeEventListener('resize', this.updateBorderStyle);
+    };
+    CheckboxesControl.prototype.updateBorderStyle = function () {
+        if (this.props.optionType !== 'button') {
+            return;
+        }
+        var wrapDom = this.refs.checkboxRef;
+        var wrapWidth = wrapDom.clientWidth;
+        var childs = Array.from(wrapDom.children);
+        childs.forEach(function (child) {
+            child.style.borderRadius = '0';
+            child.style.borderLeftWidth = '1px';
+            child.style.borderTopWidth = '1px';
+        });
+        var childTotalWidth = childs.reduce(function (pre, next) {
+            return pre + next.clientWidth;
+        }, 0);
+        if (childTotalWidth <= wrapWidth) {
+            if (childs.length === 1) {
+                childs[0].style.borderRadius = "4px";
+            }
+            else {
+                childs[0].style.borderRadius = "4px 0 0 4px";
+                childs[childs.length - 1].style.borderRadius = "0 4px 4px 0";
+                childs.forEach(function (child, idx) {
+                    idx !== 0 && (child.style.borderLeftWidth = '0');
+                });
+            }
+        }
+        else {
+            var curRowWidth_1 = 0;
+            var curRow_1 = 0;
+            var rowNum_1 = Math.floor(childTotalWidth / wrapWidth);
+            var rowColArr_1 = [];
+            for (var i = 0; i <= rowNum_1; i++) {
+                var arr = [];
+                rowColArr_1[i] = arr;
+            }
+            childs.forEach(function (child, idx) {
+                curRowWidth_1 += child.clientWidth;
+                if (curRowWidth_1 > wrapWidth) {
+                    curRowWidth_1 = child.clientWidth;
+                    curRow_1++;
+                }
+                if (curRow_1 > rowNum_1) {
+                    return;
+                }
+                rowColArr_1[curRow_1].push(child);
+            });
+            rowColArr_1.forEach(function (row, rowIdx) {
+                if (rowIdx === 0) {
+                    row.forEach(function (r, colIdx) {
+                        r.style.borderRadius = '0';
+                        colIdx !== 0 && (r.style.borderLeftWidth = '0');
+                        row.length > rowColArr_1[rowIdx + 1].length
+                            && (row[row.length - 1].style.borderBottomRightRadius = "4px");
+                    });
+                    row[0].style.borderTopLeftRadius = "4px";
+                    row[row.length - 1].style.borderTopRightRadius = "4px";
+                }
+                else if (rowIdx === rowNum_1) {
+                    row.forEach(function (r, colIdx) {
+                        r.style.borderRadius = '0';
+                        colIdx !== 0 && (r.style.borderLeftWidth = '0');
+                        r.style.borderTopWidth = '0';
+                        row[0].style.borderBottomLeftRadius = "4px";
+                        row[row.length - 1].style.borderBottomRightRadius = "4px";
+                    });
+                }
+                else {
+                    row.forEach(function (r, colIdx) {
+                        r.style.borderRadius = '0';
+                        colIdx !== 0 && (r.style.borderLeftWidth = '0');
+                        r.style.borderTopWidth = '0';
+                        row.length > rowColArr_1[rowIdx + 1].length
+                            && (row[row.length - 1].style.borderBottomRightRadius = "4px");
+                    });
+                }
+            });
+        }
+    };
     CheckboxesControl.prototype.renderGroup = function (option, index) {
         var _this = this;
         var _a;
@@ -49,8 +135,8 @@ var CheckboxesControl = /** @class */ (function (_super) {
         if (option.children) {
             return this.renderGroup(option, index);
         }
-        var _a = this.props, itemClassName = _a.itemClassName, onToggle = _a.onToggle, selectedOptions = _a.selectedOptions, disabled = _a.disabled, inline = _a.inline, labelClassName = _a.labelClassName, labelField = _a.labelField, removable = _a.removable, editable = _a.editable, __ = _a.translate;
-        return (react_1.default.createElement(Checkbox_1.default, { className: itemClassName, key: index, onChange: function () { return onToggle(option); }, checked: !!~selectedOptions.indexOf(option), disabled: disabled || option.disabled, inline: inline, labelClassName: labelClassName, description: option.description },
+        var _a = this.props, itemClassName = _a.itemClassName, onToggle = _a.onToggle, selectedOptions = _a.selectedOptions, disabled = _a.disabled, inline = _a.inline, labelClassName = _a.labelClassName, labelField = _a.labelField, removable = _a.removable, editable = _a.editable, __ = _a.translate, optionType = _a.optionType;
+        return (react_1.default.createElement(Checkbox_1.default, { className: itemClassName, key: index, onChange: function () { return onToggle(option); }, checked: !!~selectedOptions.indexOf(option), disabled: disabled || option.disabled, inline: inline, labelClassName: labelClassName, description: option.description, optionType: optionType },
             String(option[labelField || 'label']),
             removable && (0, helper_1.hasAbility)(option, 'removable') ? (react_1.default.createElement("a", { "data-tooltip": __('Select.clear'), "data-position": "left" },
                 react_1.default.createElement(icons_1.Icon, { icon: "minus", className: "icon", onClick: function (e) { return _this.handleDeleteClick(e, option); } }))) : null,
@@ -59,21 +145,17 @@ var CheckboxesControl = /** @class */ (function (_super) {
     };
     CheckboxesControl.prototype.render = function () {
         var _this = this;
-        var _a = this.props, className = _a.className, disabled = _a.disabled, placeholder = _a.placeholder, options = _a.options, inline = _a.inline, columnsCount = _a.columnsCount, selectedOptions = _a.selectedOptions, onToggle = _a.onToggle, onToggleAll = _a.onToggleAll, checkAll = _a.checkAll, cx = _a.classnames, itemClassName = _a.itemClassName, labelClassName = _a.labelClassName, creatable = _a.creatable, addApi = _a.addApi, createBtnLabel = _a.createBtnLabel, __ = _a.translate;
+        var _a = this.props, className = _a.className, disabled = _a.disabled, placeholder = _a.placeholder, options = _a.options, inline = _a.inline, columnsCount = _a.columnsCount, selectedOptions = _a.selectedOptions, onToggle = _a.onToggle, onToggleAll = _a.onToggleAll, checkAll = _a.checkAll, cx = _a.classnames, itemClassName = _a.itemClassName, labelClassName = _a.labelClassName, creatable = _a.creatable, addApi = _a.addApi, createBtnLabel = _a.createBtnLabel, __ = _a.translate, optionType = _a.optionType;
         var body = [];
         if (options && options.length) {
             body = options.map(function (option, key) { return _this.renderItem(option, key); });
         }
-        if (checkAll && body.length) {
+        if (checkAll && body.length && optionType === 'default') {
             body.unshift(react_1.default.createElement(Checkbox_1.default, { key: "checkall", className: itemClassName, onChange: onToggleAll, checked: !!selectedOptions.length, partial: !!(selectedOptions.length &&
                     selectedOptions.length !== options.length), disabled: disabled, inline: inline, labelClassName: labelClassName }, __('Checkboxes.selectAll')));
         }
-        if (columnsCount > 1) {
-            var weight = 12 / columnsCount;
-            var cellClassName_1 = "Grid-col--sm".concat(weight === Math.round(weight) ? weight : '');
-            body = (0, chunk_1.default)(body, columnsCount).map(function (group, groupIndex) { return (react_1.default.createElement("div", { className: cx('Grid'), key: groupIndex }, Array.from({ length: columnsCount }).map(function (_, index) { return (react_1.default.createElement("div", { key: index, className: cx(cellClassName_1) }, group[index])); }))); });
-        }
-        return (react_1.default.createElement("div", { className: cx("CheckboxesControl", className) },
+        body = (0, columnsSplit_1.columnsSplit)(body, cx, columnsCount);
+        return (react_1.default.createElement("div", { className: cx("CheckboxesControl", className), ref: "checkboxRef" },
             body && body.length ? (body) : (react_1.default.createElement("span", { className: "Form-placeholder" }, __(placeholder))),
             (creatable || addApi) && !disabled ? (react_1.default.createElement("a", { className: cx('Checkboxes-addBtn'), onClick: this.handleAddClick },
                 react_1.default.createElement(icons_1.Icon, { icon: "plus", className: "icon" }),
@@ -86,7 +168,8 @@ var CheckboxesControl = /** @class */ (function (_super) {
         placeholder: 'placeholder.noOption',
         creatable: false,
         inline: true,
-        createBtnLabel: 'Select.createLabel'
+        createBtnLabel: 'Select.createLabel',
+        optionType: 'default'
     };
     (0, tslib_1.__decorate)([
         helper_1.autobind,
@@ -106,6 +189,12 @@ var CheckboxesControl = /** @class */ (function (_super) {
         (0, tslib_1.__metadata)("design:paramtypes", [typeof (_b = typeof Event !== "undefined" && Event) === "function" ? _b : Object, Object]),
         (0, tslib_1.__metadata)("design:returntype", void 0)
     ], CheckboxesControl.prototype, "handleDeleteClick", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", []),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], CheckboxesControl.prototype, "updateBorderStyle", null);
     return CheckboxesControl;
 }(react_1.default.Component));
 exports.default = CheckboxesControl;

package/lib/renderers/Form/Checkboxes.js.map

@@ -6,8 +6,8 @@
         "/src/renderers/Form/Checkboxes.tsx"
     ],
     "names": [],
-    "mappings": "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",
+    "mappings": "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",
     "sourcesContent": [
-        "import React from 'react';\nimport {\n  OptionsControl,\n  OptionsControlProps,\n  Option,\n  FormOptionsControl\n} from './Options';\nimport cx from 'classnames';\nimport Checkbox from '../../components/Checkbox';\nimport chunk from 'lodash/chunk';\nimport {Icon} from '../../components/icons';\nimport {Api} from '../../types';\nimport {autobind, hasAbility} from '../../utils/helper';\n\n/**\n * 复选框\n * 文档：https://baidu.gitee.io/amis/docs/components/form/checkboxes\n */\nexport interface CheckboxesControlSchema extends FormOptionsControl {\n  type: 'checkboxes';\n\n  /**\n   * 是否开启全选功能\n   */\n  checkAll?: boolean;\n\n  /**\n   * 是否默认全选\n   */\n  defaultCheckAll?: boolean;\n\n  /**\n   * 每行显示多少个\n   */\n  columnsCount?: number;\n}\n\nexport interface CheckboxesProps\n  extends OptionsControlProps,\n    Omit<\n      CheckboxesControlSchema,\n      | 'options'\n      | 'type'\n      | 'className'\n      | 'descriptionClassName'\n      | 'inputClassName'\n    > {\n  placeholder?: any;\n  itemClassName?: string;\n  columnsCount?: number;\n  labelClassName?: string;\n  onAdd?: () => void;\n  addApi?: Api;\n  creatable: boolean;\n  createBtnLabel: string;\n  editable?: boolean;\n  removable?: boolean;\n}\n\nexport default class CheckboxesControl extends React.Component<\n  CheckboxesProps,\n  any\n> {\n  static defaultProps = {\n    columnsCount: 1,\n    multiple: true,\n    placeholder: 'placeholder.noOption',\n    creatable: false,\n    inline: true,\n    createBtnLabel: 'Select.createLabel'\n  };\n\n  reload() {\n    const reload = this.props.reloadOptions;\n    reload && reload();\n  }\n\n  @autobind\n  handleAddClick() {\n    const {onAdd} = this.props;\n    onAdd && onAdd();\n  }\n\n  @autobind\n  handleEditClick(e: Event, item: any) {\n    const {onEdit} = this.props;\n    e.preventDefault();\n    e.stopPropagation();\n    onEdit && onEdit(item);\n  }\n\n  @autobind\n  handleDeleteClick(e: Event, item: any) {\n    const {onDelete} = this.props;\n    e.preventDefault();\n    e.stopPropagation();\n    onDelete && onDelete(item);\n  }\n\n  renderGroup(option: Option, index: number) {\n    const {classnames: cx, labelField} = this.props;\n\n    if (!option.children?.length) {\n      return null;\n    }\n\n    return (\n      <div\n        key={index}\n        className={cx('CheckboxesControl-group', option.className)}\n      >\n        <label\n          className={cx('CheckboxesControl-groupLabel', option.labelClassName)}\n        >\n          {option[labelField || 'label']}\n        </label>\n\n        {option.children.map((option, index) => this.renderItem(option, index))}\n      </div>\n    );\n  }\n\n  renderItem(option: Option, index: number) {\n    if (option.children) {\n      return this.renderGroup(option, index);\n    }\n\n    const {\n      itemClassName,\n      onToggle,\n      selectedOptions,\n      disabled,\n      inline,\n      labelClassName,\n      labelField,\n      removable,\n      editable,\n      translate: __\n    } = this.props;\n\n    return (\n      <Checkbox\n        className={itemClassName}\n        key={index}\n        onChange={() => onToggle(option)}\n        checked={!!~selectedOptions.indexOf(option)}\n        disabled={disabled || option.disabled}\n        inline={inline}\n        labelClassName={labelClassName}\n        description={option.description}\n      >\n        {String(option[labelField || 'label'])}\n        {removable && hasAbility(option, 'removable') ? (\n          <a data-tooltip={__('Select.clear')} data-position=\"left\">\n            <Icon\n              icon=\"minus\"\n              className=\"icon\"\n              onClick={(e: any) => this.handleDeleteClick(e, option)}\n            />\n          </a>\n        ) : null}\n        {editable && hasAbility(option, 'editable') ? (\n          <a data-tooltip=\"编辑\" data-position=\"left\">\n            <Icon\n              icon=\"pencil\"\n              className=\"icon\"\n              onClick={(e: any) => this.handleEditClick(e, option)}\n            />\n          </a>\n        ) : null}\n      </Checkbox>\n    );\n  }\n\n  render() {\n    const {\n      className,\n      disabled,\n      placeholder,\n      options,\n      inline,\n      columnsCount,\n      selectedOptions,\n      onToggle,\n      onToggleAll,\n      checkAll,\n      classnames: cx,\n      itemClassName,\n      labelClassName,\n      creatable,\n      addApi,\n      createBtnLabel,\n      translate: __\n    } = this.props;\n\n    let body: Array<React.ReactNode> = [];\n\n    if (options && options.length) {\n      body = options.map((option, key) => this.renderItem(option, key));\n    }\n\n    if (checkAll && body.length) {\n      body.unshift(\n        <Checkbox\n          key=\"checkall\"\n          className={itemClassName}\n          onChange={onToggleAll}\n          checked={!!selectedOptions.length}\n          partial={\n            !!(\n              selectedOptions.length &&\n              selectedOptions.length !== options.length\n            )\n          }\n          disabled={disabled}\n          inline={inline}\n          labelClassName={labelClassName}\n        >\n          {__('Checkboxes.selectAll')}\n        </Checkbox>\n      );\n    }\n\n    if ((columnsCount as number) > 1) {\n      let weight = 12 / (columnsCount as number);\n      let cellClassName = `Grid-col--sm${\n        weight === Math.round(weight) ? weight : ''\n      }`;\n      body = chunk(body, columnsCount).map((group, groupIndex) => (\n        <div className={cx('Grid')} key={groupIndex}>\n          {Array.from({length: columnsCount as number}).map((_, index) => (\n            <div key={index} className={cx(cellClassName)}>\n              {group[index]}\n            </div>\n          ))}\n        </div>\n      ));\n    }\n\n    return (\n      <div className={cx(`CheckboxesControl`, className)}>\n        {body && body.length ? (\n          body\n        ) : (\n          <span className={`Form-placeholder`}>{__(placeholder)}</span>\n        )}\n\n        {(creatable || addApi) && !disabled ? (\n          <a className={cx('Checkboxes-addBtn')} onClick={this.handleAddClick}>\n            <Icon icon=\"plus\" className=\"icon\" />\n            {__(createBtnLabel)}\n          </a>\n        ) : null}\n      </div>\n    );\n  }\n}\n\n@OptionsControl({\n  type: 'checkboxes',\n  sizeMutable: false\n})\nexport class CheckboxesControlRenderer extends CheckboxesControl {}\n"
+        "import React from 'react';\nimport {\n  OptionsControl,\n  OptionsControlProps,\n  Option,\n  FormOptionsControl\n} from './Options';\nimport cx from 'classnames';\nimport Checkbox from '../../components/Checkbox';\n\nimport {Icon} from '../../components/icons';\nimport {Api} from '../../types';\nimport {autobind, hasAbility} from '../../utils/helper';\nimport {columnsSplit} from '../../utils/columnsSplit';\n\n/**\n * 复选框\n * 文档：https://baidu.gitee.io/amis/docs/components/form/checkboxes\n */\nexport interface CheckboxesControlSchema extends FormOptionsControl {\n  type: 'checkboxes';\n\n  /**\n   * 是否开启全选功能\n   */\n  checkAll?: boolean;\n\n  /**\n   * 是否默认全选\n   */\n  defaultCheckAll?: boolean;\n\n  /**\n   * 每行显示多少个\n   */\n  columnsCount?: number | number[];\n}\n\nexport interface CheckboxesProps\n  extends OptionsControlProps,\n    Omit<\n      CheckboxesControlSchema,\n      | 'options'\n      | 'type'\n      | 'className'\n      | 'descriptionClassName'\n      | 'inputClassName'\n    > {\n  placeholder?: any;\n  itemClassName?: string;\n  columnsCount?: number | number[];\n  labelClassName?: string;\n  onAdd?: () => void;\n  addApi?: Api;\n  creatable: boolean;\n  createBtnLabel: string;\n  editable?: boolean;\n  removable?: boolean;\n  optionType?: 'default' | 'button'\n}\n\nexport default class CheckboxesControl extends React.Component<\n  CheckboxesProps,\n  any\n> {\n  static defaultProps = {\n    columnsCount: 1,\n    multiple: true,\n    placeholder: 'placeholder.noOption',\n    creatable: false,\n    inline: true,\n    createBtnLabel: 'Select.createLabel',\n    optionType: 'default'\n  };\n\n  reload() {\n    const reload = this.props.reloadOptions;\n    reload && reload();\n  }\n\n  @autobind\n  handleAddClick() {\n    const {onAdd} = this.props;\n    onAdd && onAdd();\n  }\n\n  @autobind\n  handleEditClick(e: Event, item: any) {\n    const {onEdit} = this.props;\n    e.preventDefault();\n    e.stopPropagation();\n    onEdit && onEdit(item);\n  }\n\n  @autobind\n  handleDeleteClick(e: Event, item: any) {\n    const {onDelete} = this.props;\n    e.preventDefault();\n    e.stopPropagation();\n    onDelete && onDelete(item);\n  }\n\n  componentDidMount() {\n    this.updateBorderStyle();\n    window.addEventListener('resize', this.updateBorderStyle);\n  }\n\n  componentWillMount() {\n    window.removeEventListener('resize', this.updateBorderStyle);\n  }\n\n  @autobind\n  updateBorderStyle() {\n    if (this.props.optionType !== 'button') {\n      return;\n    }\n    const wrapDom = this.refs.checkboxRef as HTMLElement;\n    const wrapWidth = wrapDom.clientWidth;\n    const childs = Array.from(wrapDom.children) as HTMLElement[];\n    \n    childs.forEach(child => {\n      child.style.borderRadius = '0';\n      child.style.borderLeftWidth = '1px';\n      child.style.borderTopWidth = '1px';\n    });\n    const childTotalWidth = childs.reduce((pre, next) =>\n        pre + next.clientWidth, 0);\n    if (childTotalWidth <= wrapWidth) {\n      if (childs.length === 1) {\n        childs[0].style.borderRadius = \"4px\";\n      }\n      else {\n        childs[0].style.borderRadius = \"4px 0 0 4px\";\n        childs[childs.length - 1].style.borderRadius = \"0 4px 4px 0\";\n        childs.forEach((child, idx) => {\n          idx !== 0 && (child.style.borderLeftWidth = '0');\n        });\n      }\n    }\n    else {\n      let curRowWidth = 0;\n      let curRow = 0;\n      const rowNum = Math.floor(childTotalWidth / wrapWidth);\n      const rowColArr: any[] = [];\n      for (let i = 0; i <= rowNum; i++) {\n        const arr: HTMLElement[] = [];\n        rowColArr[i] = arr;\n      }\n      childs.forEach((child: HTMLElement, idx: number) => {\n        curRowWidth += child.clientWidth;\n        if (curRowWidth > wrapWidth) {\n          curRowWidth = child.clientWidth;\n          curRow++;\n        }\n        if (curRow > rowNum) {\n          return;\n        }\n        rowColArr[curRow].push(child);\n      });\n      \n      rowColArr.forEach((row: HTMLElement[], rowIdx: number) => {\n        if (rowIdx === 0) {\n          row.forEach((r: HTMLElement, colIdx: number) => {\n            r.style.borderRadius = '0';\n            colIdx !== 0 && (r.style.borderLeftWidth = '0');\n            row.length > rowColArr[rowIdx + 1].length\n              && (row[row.length - 1].style.borderBottomRightRadius = \"4px\");\n          });\n          row[0].style.borderTopLeftRadius = \"4px\";\n          row[row.length - 1].style.borderTopRightRadius = \"4px\";\n        }\n        else if (rowIdx === rowNum) {\n          row.forEach((r: HTMLElement, colIdx: number) => {\n            r.style.borderRadius = '0';\n            colIdx !== 0 && (r.style.borderLeftWidth = '0');\n            r.style.borderTopWidth = '0';\n            row[0].style.borderBottomLeftRadius = \"4px\";\n            row[row.length - 1].style.borderBottomRightRadius = \"4px\";\n          });\n        }\n        else {\n          row.forEach((r: HTMLElement, colIdx: number) => {\n            r.style.borderRadius = '0';\n            colIdx !== 0 && (r.style.borderLeftWidth = '0');\n            r.style.borderTopWidth = '0';\n            row.length > rowColArr[rowIdx + 1].length\n              && (row[row.length - 1].style.borderBottomRightRadius = \"4px\");\n          });\n        }\n      });\n    }\n  }\n\n  renderGroup(option: Option, index: number) {\n    const {classnames: cx, labelField} = this.props;\n\n    if (!option.children?.length) {\n      return null;\n    }\n\n    return (\n      <div\n        key={index}\n        className={cx('CheckboxesControl-group', option.className)}\n      >\n        <label\n          className={cx('CheckboxesControl-groupLabel', option.labelClassName)}\n        >\n          {option[labelField || 'label']}\n        </label>\n\n        {option.children.map((option, index) => this.renderItem(option, index))}\n      </div>\n    );\n  }\n\n  renderItem(option: Option, index: number) {\n    if (option.children) {\n      return this.renderGroup(option, index);\n    }\n\n    const {\n      itemClassName,\n      onToggle,\n      selectedOptions,\n      disabled,\n      inline,\n      labelClassName,\n      labelField,\n      removable,\n      editable,\n      translate: __,\n      optionType\n    } = this.props;\n\n    return (\n      <Checkbox\n        className={itemClassName}\n        key={index}\n        onChange={() => onToggle(option)}\n        checked={!!~selectedOptions.indexOf(option)}\n        disabled={disabled || option.disabled}\n        inline={inline}\n        labelClassName={labelClassName}\n        description={option.description}\n        optionType={optionType}\n      >\n        {String(option[labelField || 'label'])}\n        {removable && hasAbility(option, 'removable') ? (\n          <a data-tooltip={__('Select.clear')} data-position=\"left\">\n            <Icon\n              icon=\"minus\"\n              className=\"icon\"\n              onClick={(e: any) => this.handleDeleteClick(e, option)}\n            />\n          </a>\n        ) : null}\n        {editable && hasAbility(option, 'editable') ? (\n          <a data-tooltip=\"编辑\" data-position=\"left\">\n            <Icon\n              icon=\"pencil\"\n              className=\"icon\"\n              onClick={(e: any) => this.handleEditClick(e, option)}\n            />\n          </a>\n        ) : null}\n      </Checkbox>\n    );\n  }\n\n  render() {\n    const {\n      className,\n      disabled,\n      placeholder,\n      options,\n      inline,\n      columnsCount,\n      selectedOptions,\n      onToggle,\n      onToggleAll,\n      checkAll,\n      classnames: cx,\n      itemClassName,\n      labelClassName,\n      creatable,\n      addApi,\n      createBtnLabel,\n      translate: __,\n      optionType\n    } = this.props;\n\n    let body: Array<React.ReactNode> = [];\n\n    if (options && options.length) {\n      body = options.map((option, key) => this.renderItem(option, key));\n    }\n\n    if (checkAll && body.length && optionType === 'default') {\n      body.unshift(\n        <Checkbox\n          key=\"checkall\"\n          className={itemClassName}\n          onChange={onToggleAll}\n          checked={!!selectedOptions.length}\n          partial={\n            !!(\n              selectedOptions.length &&\n              selectedOptions.length !== options.length\n            )\n          }\n          disabled={disabled}\n          inline={inline}\n          labelClassName={labelClassName}\n        >\n          {__('Checkboxes.selectAll')}\n        </Checkbox>\n      );\n    }\n\n    body = columnsSplit(body, cx, columnsCount);\n\n    return (\n      <div className={cx(`CheckboxesControl`, className)} ref=\"checkboxRef\">\n        {body && body.length ? (\n          body\n        ) : (\n          <span className={`Form-placeholder`}>{__(placeholder)}</span>\n        )}\n\n        {(creatable || addApi) && !disabled ? (\n          <a className={cx('Checkboxes-addBtn')} onClick={this.handleAddClick}>\n            <Icon icon=\"plus\" className=\"icon\" />\n            {__(createBtnLabel)}\n          </a>\n        ) : null}\n      </div>\n    );\n  }\n}\n\n@OptionsControl({\n  type: 'checkboxes',\n  sizeMutable: false\n})\nexport class CheckboxesControlRenderer extends CheckboxesControl {}\n"
     ]
 }

package/lib/renderers/Form/Combo.d.ts

@@ -184,12 +184,13 @@ export interface ComboControlSchema extends FormBaseControl {
         maxLengthValidateFailed?: string;
     };
 }
+export declare type ComboRendererEvent = 'add' | 'delete' | 'tabsChange';
 export interface ComboProps extends FormControlProps, Omit<ComboControlSchema, 'type' | 'className' | 'descriptionClassName' | 'inputClassName'> {
     store: IComboStore;
     changeImmediately?: boolean;
 }
 export default class ComboControl extends React.Component<ComboProps> {
-    static defaultProps: Pick<ComboProps, 'minLength' | 'maxLength' | 'multiple' | 'multiLine' | 'addButtonClassName' | 'formClassName' | 'subFormMode' | 'draggableTip' | 'addButtonText' | 'canAccessSuperData' | 'addIcon' | 'dragIcon' | 'deleteIcon' | 'tabsMode' | 'tabsStyle' | 'placeholder'>;
+    static defaultProps: Pick<ComboProps, 'minLength' | 'maxLength' | 'multiple' | 'multiLine' | 'addButtonClassName' | 'formClassName' | 'subFormMode' | 'draggableTip' | 'addButtonText' | 'canAccessSuperData' | 'addIcon' | 'dragIcon' | 'deleteIcon' | 'tabsMode' | 'tabsStyle' | 'placeholder' | 'itemClassName' | 'itemsWrapperClassName'>;
     static propsList: Array<string>;
     subForms: Array<any>;
     subFormDefaultValues: Array<{
@@ -210,8 +211,8 @@ export default class ComboControl extends React.Component<ComboProps> {
         children?: React.ReactNode;
     }>): any;
     addItemWith(condition: ComboCondition): void;
-    addItem(): void;
-    removeItem(key: number): Promise<void>;
+    addItem(): Promise<void>;
+    deleteItem(key: number): Promise<void>;
     handleChange(values: any, diff: any, { index }: any): void;
     handleSingleFormChange(values: object): void;
     handleFormInit(values: any, { index }: any): void;
@@ -231,10 +232,11 @@ export default class ComboControl extends React.Component<ComboProps> {
     formatValue(value: any, index?: number): object;
     pickCondition(value: any): ComboCondition | null;
     handleComboTypeChange(index: number, selection: any): void;
-    handleTabSelect(key: number): void;
+    handleTabSelect(key: number): Promise<void>;
     setNull(e: React.MouseEvent): void;
     renderPlaceholder(): JSX.Element;
     renderTabsMode(): JSX.Element;
+    renderDelBtn(value: any, index: number): JSX.Element | null;
     renderMultipe(): JSX.Element;
     renderSingle(): JSX.Element;
     render(): JSX.Element | null;

package/lib/renderers/Form/Combo.js

@@ -4,9 +4,11 @@ exports.KVControlRenderer = exports.ComboControlRenderer = void 0;
 var tslib_1 = require("tslib");
 var react_1 = (0, tslib_1.__importDefault)(require("react"));
 var react_dom_1 = require("react-dom");
+var cloneDeep_1 = (0, tslib_1.__importDefault)(require("lodash/cloneDeep"));
 var Item_1 = require("./Item");
 var combo_1 = require("../../store/combo");
 var Tabs_1 = tslib_1.__importStar(require("../../components/Tabs"));
+var Button_1 = (0, tslib_1.__importDefault)(require("../../components/Button"));
 var helper_1 = require("../../utils/helper");
 var sortablejs_1 = (0, tslib_1.__importDefault)(require("sortablejs"));
 var tpl_1 = require("../../utils/tpl");
@@ -50,7 +52,7 @@ var ComboControl = /** @class */ (function (_super) {
         _this.handleFormInit = _this.handleFormInit.bind(_this);
         _this.handleAction = _this.handleAction.bind(_this);
         _this.addItem = _this.addItem.bind(_this);
-        _this.removeItem = _this.removeItem.bind(_this);
+        _this.deleteItem = _this.deleteItem.bind(_this);
         _this.dragTipRef = _this.dragTipRef.bind(_this);
         _this.flush = _this.flush.bind(_this);
         _this.handleComboTypeChange = _this.handleComboTypeChange.bind(_this);
@@ -131,49 +133,75 @@ var ComboControl = /** @class */ (function (_super) {
         this.props.onChange(value, submitOnChange, true);
     };
     ComboControl.prototype.addItem = function () {
-        var _a = this.props, flat = _a.flat, joinValues = _a.joinValues, delimiter = _a.delimiter, scaffold = _a.scaffold, disabled = _a.disabled, submitOnChange = _a.submitOnChange;
-        if (disabled) {
-            return;
-        }
-        var value = this.getValueAsArray();
-        value.push(flat
-            ? scaffold || ''
-            : (0, tslib_1.__assign)({}, scaffold));
-        this.keys.push((0, helper_1.guid)());
-        if (flat && joinValues) {
-            value = value.join(delimiter || ',');
-        }
-        this.props.onChange(value, submitOnChange, true);
+        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+            var _a, flat, joinValues, delimiter, scaffold, disabled, submitOnChange, data, dispatchEvent, value, rendererEvent;
+            return (0, tslib_1.__generator)(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, flat = _a.flat, joinValues = _a.joinValues, delimiter = _a.delimiter, scaffold = _a.scaffold, disabled = _a.disabled, submitOnChange = _a.submitOnChange, data = _a.data, dispatchEvent = _a.dispatchEvent;
+                        if (disabled) {
+                            return [2 /*return*/];
+                        }
+                        value = this.getValueAsArray();
+                        return [4 /*yield*/, dispatchEvent('add', (0, helper_1.createObject)(data, {
+                                value: flat && joinValues ? value.join(delimiter || ',') : (0, cloneDeep_1.default)(value)
+                            }))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        value.push(flat
+                            ? scaffold || ''
+                            : (0, tslib_1.__assign)({}, scaffold));
+                        this.keys.push((0, helper_1.guid)());
+                        if (flat && joinValues) {
+                            value = value.join(delimiter || ',');
+                        }
+                        this.props.onChange(value, submitOnChange, true);
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
-    ComboControl.prototype.removeItem = function (key) {
+    ComboControl.prototype.deleteItem = function (key) {
         return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
-            var _a, flat, joinValues, delimiter, disabled, deleteApi, deleteConfirmText, data, env, __, value, ctx, confirmed, result;
+            var _a, flat, joinValues, delimiter, disabled, deleteApi, deleteConfirmText, data, env, __, dispatchEvent, value, ctx, rendererEvent, confirmed, result;
             return (0, tslib_1.__generator)(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        _a = this.props, flat = _a.flat, joinValues = _a.joinValues, delimiter = _a.delimiter, disabled = _a.disabled, deleteApi = _a.deleteApi, deleteConfirmText = _a.deleteConfirmText, data = _a.data, env = _a.env, __ = _a.translate;
+                        _a = this.props, flat = _a.flat, joinValues = _a.joinValues, delimiter = _a.delimiter, disabled = _a.disabled, deleteApi = _a.deleteApi, deleteConfirmText = _a.deleteConfirmText, data = _a.data, env = _a.env, __ = _a.translate, dispatchEvent = _a.dispatchEvent;
                         if (disabled) {
                             return [2 /*return*/];
                         }
                         value = this.getValueAsArray();
                         ctx = (0, helper_1.createObject)(data, value[key]);
-                        if (!(0, api_1.isEffectiveApi)(deleteApi, ctx)) return [3 /*break*/, 3];
-                        return [4 /*yield*/, env.confirm(deleteConfirmText ? (0, tpl_1.filter)(deleteConfirmText, ctx) : __('deleteConfirm'))];
+                        return [4 /*yield*/, dispatchEvent('delete', (0, helper_1.createObject)(data, {
+                                key: key,
+                                value: flat && joinValues ? value.join(delimiter || ',') : (0, cloneDeep_1.default)(value)
+                            }))];
                     case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        if (!(0, api_1.isEffectiveApi)(deleteApi, ctx)) return [3 /*break*/, 4];
+                        return [4 /*yield*/, env.confirm(deleteConfirmText ? (0, tpl_1.filter)(deleteConfirmText, ctx) : __('deleteConfirm'))];
+                    case 2:
                         confirmed = _b.sent();
                         if (!confirmed) {
                             // 如果不确认，则跳过！
                             return [2 /*return*/];
                         }
                         return [4 /*yield*/, env.fetcher(deleteApi, ctx)];
-                    case 2:
+                    case 3:
                         result = _b.sent();
                         if (!result.ok) {
                             env.notify('error', __('deleteFailed'));
                             return [2 /*return*/];
                         }
-                        _b.label = 3;
-                    case 3:
+                        _b.label = 4;
+                    case 4:
                         value.splice(key, 1);
                         this.keys.splice(key, 1);
                         if (flat && joinValues) {
@@ -214,7 +242,8 @@ var ComboControl = /** @class */ (function (_super) {
             setted: false
         });
         if (syncDefaultValue === false ||
-            this.subFormDefaultValues.length !== this.subForms.length) {
+            this.subFormDefaultValues.length !==
+                this.subForms.filter(function (item) { return item !== undefined; }).length) {
             return;
         }
         var value = this.getValueAsArray();
@@ -254,7 +283,7 @@ var ComboControl = /** @class */ (function (_super) {
     ComboControl.prototype.handleAction = function (action) {
         var onAction = this.props.onAction;
         if (action.actionType === 'delete') {
-            action.index !== void 0 && this.removeItem(action.index);
+            action.index !== void 0 && this.deleteItem(action.index);
             return;
         }
         onAction && onAction.apply(null, arguments);
@@ -378,8 +407,25 @@ var ComboControl = /** @class */ (function (_super) {
         }
     };
     ComboControl.prototype.handleTabSelect = function (key) {
-        var store = this.props.store;
-        store.setActiveKey(key);
+        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+            var _a, store, data, dispatchEvent, rendererEvent;
+            return (0, tslib_1.__generator)(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, store = _a.store, data = _a.data, dispatchEvent = _a.dispatchEvent;
+                        return [4 /*yield*/, dispatchEvent('tabsChange', (0, helper_1.createObject)(data, {
+                                key: key
+                            }))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        store.setActiveKey(key);
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     ComboControl.prototype.setNull = function (e) {
         e.preventDefault();
@@ -433,7 +479,7 @@ var ComboControl = /** @class */ (function (_super) {
             if (finnalRemovable && // 表达式判断单条是否可删除
                 (!itemRemovableOn ||
                     (0, tpl_1.evalExpression)(itemRemovableOn, value) !== false)) {
-                toolbar = (react_1.default.createElement("div", { onClick: _this.removeItem.bind(_this, index), key: "remove", className: cx("Combo-tab-delBtn ".concat(!store.removable ? 'is-disabled' : '')), "data-tooltip": __('delete'), "data-position": "bottom" }, deleteIcon ? (react_1.default.createElement("i", { className: deleteIcon })) : (react_1.default.createElement(icons_1.Icon, { icon: "status-close", className: "icon" }))));
+                toolbar = (react_1.default.createElement("div", { onClick: _this.deleteItem.bind(_this, index), key: "delete", className: cx("Combo-tab-delBtn ".concat(!store.removable ? 'is-disabled' : '')), "data-tooltip": __('delete'), "data-position": "bottom" }, deleteIcon ? (react_1.default.createElement("i", { className: deleteIcon })) : (react_1.default.createElement(icons_1.Icon, { icon: "status-close", className: "icon" }))));
             }
             if (Array.isArray(conditions) && conditions.length) {
                 condition = _this.pickCondition(data);
@@ -480,30 +526,67 @@ var ComboControl = /** @class */ (function (_super) {
                 })) : (react_1.default.createElement(components_1.Alert2, { level: "warning", className: "m-b-none" }, __('Combo.invalidData'))))));
         })));
     };
+    ComboControl.prototype.renderDelBtn = function (value, index) {
+        var _this = this;
+        var _a = this.props, ns = _a.classPrefix, cx = _a.classnames, render = _a.render, store = _a.store, deleteIcon = _a.deleteIcon, __ = _a.translate, itemRemovableOn = _a.itemRemovableOn, disabled = _a.disabled, removable = _a.removable, deleteBtn = _a.deleteBtn;
+        var finnalRemovable = store.removable !== false && // minLength ?
+            !disabled && // 控件自身是否禁用
+            removable !== false; // 是否可以删除
+        if (!(finnalRemovable && // 表达式判断单条是否可删除
+            (!itemRemovableOn || (0, tpl_1.evalExpression)(itemRemovableOn, value) !== false))) {
+            // 不符合删除条件，则不渲染删除按钮
+            return null;
+        }
+        // deleteBtn是对象，则根据自定义配置渲染按钮
+        if ((0, helper_1.isObject)(deleteBtn)) {
+            return render('delete-btn', (0, tslib_1.__assign)((0, tslib_1.__assign)({}, deleteBtn), { type: 'button', className: cx('Combo-delController', deleteBtn ? deleteBtn.classname : ''), onClick: function (e) {
+                    if (!deleteBtn.onClick) {
+                        _this.deleteItem(index);
+                        return;
+                    }
+                    var originClickHandler = deleteBtn.onClick;
+                    if (typeof originClickHandler === 'string') {
+                        originClickHandler = (0, api_1.str2AsyncFunction)(deleteBtn.onClick, 'e', 'index', 'props');
+                    }
+                    var result = originClickHandler(e, index, _this.props);
+                    if (result && result.then) {
+                        result.then(function () {
+                            _this.deleteItem(index);
+                        });
+                    }
+                    else {
+                        _this.deleteItem(index);
+                    }
+                } }));
+        }
+        // deleteBtn是string，则渲染按钮文本
+        if (typeof deleteBtn === 'string') {
+            return render('delete-btn', {
+                type: 'button',
+                className: cx('Combo-delController'),
+                label: deleteBtn,
+                onClick: this.deleteItem.bind(this, index)
+            });
+        }
+        // 如果上述按钮不满足，则渲染默认按钮
+        return (react_1.default.createElement("a", { onClick: this.deleteItem.bind(this, index), key: "delete", className: cx("Combo-delBtn ".concat(!store.removable ? 'is-disabled' : '')), "data-tooltip": __('delete'), "data-position": "bottom" }, deleteIcon ? (react_1.default.createElement("i", { className: deleteIcon })) : (react_1.default.createElement(icons_1.Icon, { icon: "status-close", className: "icon" }))));
+    };
     ComboControl.prototype.renderMultipe = function () {
         var _this = this;
         if (this.props.tabsMode) {
             return this.renderTabsMode();
         }
-        var _a = this.props, ns = _a.classPrefix, cx = _a.classnames, formClassName = _a.formClassName, render = _a.render, multiLine = _a.multiLine, addButtonClassName = _a.addButtonClassName, disabled = _a.disabled, store = _a.store, flat = _a.flat, subFormMode = _a.subFormMode, draggable = _a.draggable, draggableTip = _a.draggableTip, addButtonText = _a.addButtonText, addable = _a.addable, removable = _a.removable, typeSwitchable = _a.typeSwitchable, itemRemovableOn = _a.itemRemovableOn, delimiter = _a.delimiter, canAccessSuperData = _a.canAccessSuperData, addIcon = _a.addIcon, dragIcon = _a.dragIcon, deleteIcon = _a.deleteIcon, noBorder = _a.noBorder, conditions = _a.conditions, lazyLoad = _a.lazyLoad, changeImmediately = _a.changeImmediately, placeholder = _a.placeholder, __ = _a.translate;
+        var _a = this.props, ns = _a.classPrefix, cx = _a.classnames, formClassName = _a.formClassName, render = _a.render, multiLine = _a.multiLine, addButtonClassName = _a.addButtonClassName, disabled = _a.disabled, store = _a.store, flat = _a.flat, subFormMode = _a.subFormMode, draggable = _a.draggable, draggableTip = _a.draggableTip, addButtonText = _a.addButtonText, addable = _a.addable, removable = _a.removable, typeSwitchable = _a.typeSwitchable, delimiter = _a.delimiter, canAccessSuperData = _a.canAccessSuperData, addIcon = _a.addIcon, dragIcon = _a.dragIcon, noBorder = _a.noBorder, conditions = _a.conditions, lazyLoad = _a.lazyLoad, changeImmediately = _a.changeImmediately, placeholder = _a.placeholder, __ = _a.translate, itemClassName = _a.itemClassName, itemsWrapperClassName = _a.itemsWrapperClassName;
         var items = this.props.items;
         var value = this.props.value;
         if (flat && typeof value === 'string') {
             value = value.split(delimiter || ',');
         }
-        var finnalRemovable = store.removable !== false && // minLength ?
-            !disabled && // 控件自身是否禁用
-            removable !== false; // 是否可以删除
         return (react_1.default.createElement("div", { className: cx("Combo Combo--multi", multiLine ? "Combo--ver" : "Combo--hor", noBorder ? "Combo--noBorder" : '', disabled ? 'is-disabled' : '', !disabled && draggable && Array.isArray(value) && value.length > 1
                 ? 'is-draggable'
                 : '') },
-            react_1.default.createElement("div", { className: cx("Combo-items") }, Array.isArray(value) && value.length ? (value.map(function (value, index, thelist) {
-                var delBtn = null;
-                if (finnalRemovable && // 表达式判断单条是否可删除
-                    (!itemRemovableOn ||
-                        (0, tpl_1.evalExpression)(itemRemovableOn, value) !== false)) {
-                    delBtn = (react_1.default.createElement("a", { onClick: _this.removeItem.bind(_this, index), key: "remove", className: cx("Combo-delBtn ".concat(!store.removable ? 'is-disabled' : '')), "data-tooltip": __('delete'), "data-position": "bottom" }, deleteIcon ? (react_1.default.createElement("i", { className: deleteIcon })) : (react_1.default.createElement(icons_1.Icon, { icon: "status-close", className: "icon" }))));
-                }
+            react_1.default.createElement("div", { className: cx("Combo-items", itemsWrapperClassName) }, Array.isArray(value) && value.length ? (value.map(function (value, index, thelist) {
+                var delBtn = _this.renderDelBtn(value, index);
                 var data = _this.formatValue(value, index);
                 var condition = null;
                 if (Array.isArray(conditions) && conditions.length) {
@@ -515,7 +598,7 @@ var ComboControl = /** @class */ (function (_super) {
                         (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (items && items[0])), { name: 'flat' })
                     ]
                     : items;
-                return (react_1.default.createElement("div", { className: cx("Combo-item"), key: _this.keys[index] || (_this.keys[index] = (0, helper_1.guid)()) },
+                return (react_1.default.createElement("div", { className: cx("Combo-item", itemClassName), key: _this.keys[index] || (_this.keys[index] = (0, helper_1.guid)()) },
                     !disabled && draggable && thelist.length > 1 ? (react_1.default.createElement("div", { className: cx('Combo-itemDrager') },
                         react_1.default.createElement("a", { key: "drag", "data-tooltip": __('Combo.dragDropSort'), "data-position": "bottom" }, dragIcon ? (react_1.default.createElement("i", { className: dragIcon })) : (react_1.default.createElement(icons_1.Icon, { icon: "drag-bar", className: "icon" }))))) : null,
                     condition && typeSwitchable !== false ? (react_1.default.createElement("div", { className: cx('Combo-itemTag') },
@@ -564,7 +647,7 @@ var ComboControl = /** @class */ (function (_super) {
                             return false;
                         }
                     }); })
-                })) : (react_1.default.createElement("button", { type: "button", onClick: this.addItem, className: cx("Button Combo-addBtn", addButtonClassName), "data-tooltip": __('Combo.add') },
+                })) : (react_1.default.createElement(Button_1.default, { className: cx("Combo-addBtn", addButtonClassName), tooltip: __('Combo.add'), onClick: this.addItem },
                     addIcon ? react_1.default.createElement(icons_1.Icon, { icon: "plus", className: "icon" }) : null,
                     react_1.default.createElement("span", null, __(addButtonText || 'Combo.add'))))) : null,
                 draggable ? (react_1.default.createElement("span", { className: cx("Combo-dragableTip"), ref: this.dragTipRef }, Array.isArray(value) && value.length > 1
@@ -572,7 +655,7 @@ var ComboControl = /** @class */ (function (_super) {
                     : '')) : null)) : null));
     };
     ComboControl.prototype.renderSingle = function () {
-        var _a = this.props, conditions = _a.conditions, cx = _a.classnames, render = _a.render, value = _a.value, multiLine = _a.multiLine, formClassName = _a.formClassName, canAccessSuperData = _a.canAccessSuperData, noBorder = _a.noBorder, disabled = _a.disabled, typeSwitchable = _a.typeSwitchable, nullable = _a.nullable, __ = _a.translate;
+        var _a = this.props, conditions = _a.conditions, cx = _a.classnames, render = _a.render, value = _a.value, multiLine = _a.multiLine, formClassName = _a.formClassName, canAccessSuperData = _a.canAccessSuperData, noBorder = _a.noBorder, disabled = _a.disabled, typeSwitchable = _a.typeSwitchable, nullable = _a.nullable, __ = _a.translate, itemClassName = _a.itemClassName;
         var items = this.props.items;
         var data = (0, helper_1.isObject)(value) ? this.formatValue(value) : this.defaultValue;
         var condition = null;
@@ -581,7 +664,7 @@ var ComboControl = /** @class */ (function (_super) {
             items = condition ? condition.items : undefined;
         }
         return (react_1.default.createElement("div", { className: cx("Combo Combo--single", multiLine ? "Combo--ver" : "Combo--hor", noBorder ? "Combo--noBorder" : '', disabled ? 'is-disabled' : '') },
-            react_1.default.createElement("div", { className: cx("Combo-item") },
+            react_1.default.createElement("div", { className: cx("Combo-item", itemClassName) },
                 condition && typeSwitchable !== false ? (react_1.default.createElement("div", { className: cx('Combo-itemTag') },
                     react_1.default.createElement("label", null, __('Combo.type')),
                     react_1.default.createElement(Select_1.default, { onChange: this.handleComboTypeChange.bind(this, 0), options: conditions.map(function (item) { return ({
@@ -627,7 +710,9 @@ var ComboControl = /** @class */ (function (_super) {
         deleteIcon: '',
         tabsMode: false,
         tabsStyle: '',
-        placeholder: 'placeholder.empty'
+        placeholder: 'placeholder.empty',
+        itemClassName: '',
+        itemsWrapperClassName: ''
     };
     ComboControl.propsList = [
         'minLength',
@@ -654,13 +739,15 @@ var ComboControl = /** @class */ (function (_super) {
         'items',
         'conditions',
         'messages',
-        'formStore'
+        'formStore',
+        'itemClassName',
+        'itemsWrapperClassName'
     ];
     (0, tslib_1.__decorate)([
         helper_1.autobind,
         (0, tslib_1.__metadata)("design:type", Function),
         (0, tslib_1.__metadata)("design:paramtypes", [Number]),
-        (0, tslib_1.__metadata)("design:returntype", void 0)
+        (0, tslib_1.__metadata)("design:returntype", Promise)
     ], ComboControl.prototype, "handleTabSelect", null);
     (0, tslib_1.__decorate)([
         helper_1.autobind,