@devops-flow/devops-flow-pipeline-detail 0.0.37

package/es/components/common/teambition/flow-engine/template.js

@@ -0,0 +1,617 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["scenario"],
+  _excluded2 = ["identifier"];
+/* eslint-disable import/no-cycle */
+import React, { Component } from 'react';
+import { Form, Balloon, Button, Message } from '@teamix/ui';
+import { YunxiaoIcon } from '@alife/devops-ui';
+import { pick, every, get } from 'lodash-es';
+import track from "../../../../utils/track";
+import { i18n } from "../../../../utils";
+import transformRules from "./rules";
+import { transformType, transformExtraComponent } from "./config";
+import docs from "../docs";
+import Toolbars from "./toolbars";
+import ShellMagnifying from "./dialogs/shell-magnifying";
+import CreateServiceConnection from "../service-connection-create";
+import intl, { getLang } from "../../../../locale";
+import "./fields/index.scss";
+var _window = window,
+  AK_GLOBAL = _window.AK_GLOBAL;
+var scGrayEnable = window.YUNXIAO_COMMON.serviceConnectionGrayRegion === 'true'; // 是否灰度
+
+var FormItem = Form.Item;
+var transformTemplate = function transformTemplate(template, scenarioidentifier) {
+  if (!(template.scenario && template.scenario.length && scenarioidentifier)) {
+    return template;
+  }
+  var _ref = template || {},
+    _ref$scenario = _ref.scenario,
+    scenario = _ref$scenario === void 0 ? [] : _ref$scenario,
+    others = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return scenario.reduce(function (prev, _ref2) {
+    var identifier = _ref2.identifier,
+      innerOthers = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    if (identifier === scenarioidentifier) {
+      return Object.assign({}, prev, innerOthers);
+    }
+    return prev;
+  }, others);
+};
+var simpleField = function simpleField(props) {
+  return pick(props, ['initValue', 'onChange', 'size', 'name', 'state', 'onBlur']);
+};
+var minimize = function minimize(type, props) {
+  switch (type) {
+    case 'textarea':
+    case 'input':
+    case 'password':
+    case 'select':
+    case 'dropdown':
+    case 'shell':
+    case 'deployShell':
+      return simpleField(props);
+    default:
+      return props;
+  }
+};
+var getDescription = function getDescription(desc) {
+  if (!desc) {
+    return;
+  }
+  var matchResult = desc.match(/\$\{[^}]*\}/g);
+  if (matchResult) {
+    matchResult.forEach(function (matched) {
+      var name = matched.replace(/\$\{([^}]*)}/, '$1');
+      if (name.startsWith('docs.')) {
+        var doc = name.replace('docs.', '');
+        desc = desc.replace(matched, docs.getHTMLLink(doc));
+      }
+    });
+    return desc;
+  }
+  var httpRegx = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&:/~+#]*[\w\-@?^=%&/~+#])?/g;
+  var httpMachResultArr = desc.match(httpRegx);
+  if (httpMachResultArr) {
+    var matched = httpMachResultArr[0];
+    desc = desc.replace(matched, intl.get({
+      id: 'rdc-tb-cd-assets.teambition.flow-engine.template.SpanAClassEngineHelp',
+      defaultMessage: '\n      <span>\n        <a class="engine-help-link" href={matched} target="_blank" rel="noopener noreferrer">\n          查看帮助\n        </a>\n      </span>\n      '
+    }, {
+      matched: matched
+    })).replace(/\\n/g, '');
+  }
+  return desc;
+};
+var Template = /*#__PURE__*/function (_Component) {
+  function Template(_props) {
+    var _this;
+    _this = _Component.call(this, _props) || this;
+    /**
+     * onChange表单内容改变时触发
+     * @param value: 当前表单Field对象的Value，简单类型或者复杂类型
+     * @param outputs: 当前Field对象对用的一组动态出参
+     * @param removeIdentifiers：删除的标志位
+     */
+    _this.onChange = function (value, outputs, removeIdentifiers) {
+      if (outputs === void 0) {
+        outputs = [];
+      }
+      if (removeIdentifiers === void 0) {
+        removeIdentifiers = [];
+      }
+      _this.props.onChange && _this.props.onChange(value, outputs, removeIdentifiers);
+    };
+    _this.onClickCreate = function () {
+      _this.child.initCreate();
+    };
+    _this.onPropChange = function (props) {
+      var visiable = _this.calTemplateVisiable(props);
+      var disable = _this.calTemplateDisable(props);
+      var description = _this.generateDescription(props);
+      _this.setState({
+        visiable: visiable,
+        disable: disable,
+        description: description
+      });
+    };
+    _this.onRef = function (ref) {
+      _this.child = ref;
+    };
+    _this.getConditionsVal = function (conditions) {
+      if (!Object.keys(conditions || {}).length) return;
+      var condition = _this.props.field.getValue(_this.props.identifier + "__" + conditions.conditionKey);
+      return condition;
+    };
+    _this.getCustomComponent = function (extra) {
+      var component = extra.component,
+        title = extra.title,
+        desc = extra.desc;
+      var ExtraComponent = transformExtraComponent(component);
+      if (ExtraComponent.none) return null;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, ExtraComponent && /*#__PURE__*/React.createElement(ExtraComponent, {
+        title: title,
+        desc: desc
+      }));
+    };
+    _this.calTemplateVisiable = function (props) {
+      var _props$template$showC = props.template.showConditions,
+        showConditions = _props$template$showC === void 0 ? {} : _props$template$showC;
+      var visible;
+      if (Object.keys(showConditions || {}).length) {
+        visible = _this.evalConditions(props, 'showConditions', true);
+      } else {
+        visible = _this.evalCondition(props, 'showCondition', true);
+      }
+      return !!visible;
+    };
+    _this.calTemplateDisable = function (props) {
+      var _props$template$disab = props.template.disabledConditions,
+        disabledConditions = _props$template$disab === void 0 ? {} : _props$template$disab;
+      var isBatchUpdateTemplate = props.isBatchUpdateTemplate,
+        template = props.template;
+      if (isBatchUpdateTemplate && !template.freeInTaskGroupMode && template.name !== 'source') {
+        return true;
+      }
+      var disabled;
+      if (Object.keys(disabledConditions || {}).length) {
+        disabled = _this.evalConditions(props, 'disabledConditions', false);
+      } else {
+        disabled = _this.evalCondition(props, 'disableCondition', false);
+      }
+      return disabled;
+    };
+    _this.evalCondition = function (props, condition, defaultValue, conditionName) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      var template = props.template,
+        identifier = props.identifier,
+        field = props.field;
+      var result = defaultValue;
+      if (template[condition] || conditionName) {
+        var conditionExpress = (template[condition] || conditionName).replace(/\${([^}]*)}/g, function () {
+          return "field.getValue('" + identifier + "__" + (arguments.length <= 1 ? undefined : arguments[1]) + "')";
+        });
+        var express = "result = " + conditionExpress;
+        try {
+          // eslint-disable-next-line no-eval
+          eval(express);
+        } catch (err) {
+          console.error(false, condition + " condition error", err);
+          return defaultValue;
+        }
+      }
+      return result;
+    };
+    _this.evalConditions = function (props, conditions, defaultValue) {
+      var template = props.template;
+      var result = defaultValue;
+      if (!template[conditions]) return result;
+      var conditionVal = _this.getConditionsVal(template[conditions]);
+      if (!conditionVal) return result;
+      var condition = get(template, conditions + "." + conditionVal, '');
+      if (typeof condition === 'boolean') {
+        result = !!condition;
+      } else {
+        var conditionExpress = condition.replace(/\${([^}]*)}/g, function () {
+          for (var _len = arguments.length, arg = new Array(_len), _key = 0; _key < _len; _key++) {
+            arg[_key] = arguments[_key];
+          }
+          return template[arg[1]];
+        });
+        var express = "result = " + conditionExpress;
+        try {
+          // eslint-disable-next-line no-eval
+          eval(express);
+        } catch (err) {
+          console.error(false, condition + " condition error", err);
+          return defaultValue;
+        }
+      }
+      return result;
+    };
+    _this.generateDescription = function (_ref3) {
+      var template = _ref3.template,
+        identifier = _ref3.identifier,
+        field = _ref3.field;
+      var _ref4 = template || {},
+        _ref4$conditionDescri = _ref4.conditionDescription,
+        conditionDescription = _ref4$conditionDescri === void 0 ? {} : _ref4$conditionDescri;
+      var description = i18n(template, 'description');
+      var _ref5 = conditionDescription || {},
+        c_identifier = _ref5.identifier,
+        conditions = _ref5.conditions;
+
+      // 根据约束条件获取
+      if (c_identifier && conditions) {
+        var constraintKey = field.getValue(identifier + "__" + c_identifier);
+        if (conditions["" + constraintKey]) {
+          return conditions["" + constraintKey];
+        }
+      }
+      return getDescription(description);
+    };
+    _this.getCustomComponent = function (extra) {
+      var component = extra.component,
+        title = extra.title,
+        desc = extra.desc;
+      var ExtraComponent = transformExtraComponent(component);
+      if (ExtraComponent.none) return null;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, ExtraComponent && /*#__PURE__*/React.createElement(ExtraComponent, {
+        title: title,
+        desc: desc
+      }));
+    };
+    _this.getConditionClasses = function () {
+      var template = _this.props.template;
+      if (!template.classConditions) return '';
+      var conditionVal = _this.getConditionsVal(template.classConditions);
+      if (!conditionVal) return '';
+      var condition = get(template, "classConditions." + conditionVal, '');
+      if (!condition) return '';
+      return condition.split(' ').map(function (c) {
+        return "template-container--" + c;
+      }).join(' ');
+    };
+    _this.hintTooltip = function () {
+      var desc = i18n(_this.state, 'description');
+      var type = 'primary';
+      if (desc.includes('href=')) {
+        type = 'normal';
+      }
+      var tooltip = /*#__PURE__*/React.createElement(Balloon.Tooltip, {
+        align: "tr",
+        type: type,
+        closable: false,
+        trigger: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "question-line"
+        }),
+        popupStyle: _extends({
+          fontSizi: 14
+        }, getLang().toLocaleLowerCase().includes('en') ? {
+          maxWidth: 270
+        } : {}),
+        popupContainer: _this.props.popupContainer || 'menu-wrapper-body',
+        popupProps: {
+          offset: [-16, -12]
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "formFieldHint"
+        // eslint-disable-next-line react/no-danger
+        ,
+        dangerouslySetInnerHTML: {
+          __html: i18n(_this.state, 'description')
+        }
+      }));
+      return tooltip;
+    };
+    _this.sourceSelectRule = function (sources, initValue, template) {
+      return [{
+        validator: function validator(rule, value, callback) {
+          if (template.sourceType && template.type === 'sourceSelect') {
+            try {
+              var val = JSON.parse(initValue);
+              var name = val.name,
+                sign = val.sign;
+              sources.forEach(function (item) {
+                if (item.sign === sign && item.name !== name) {
+                  callback('代码源错误');
+                }
+              });
+              var findSource = sources.find(function (obj) {
+                return obj.sign === sign;
+              });
+              if (!findSource) {
+                callback('代码源不存在');
+              }
+            } catch (e) {
+              callback();
+            }
+          }
+          callback();
+        }
+      }];
+    };
+    var offsetX = _props.container === 'create-task-config' ? 420 : 300;
+    _this.state = {
+      visiable: _this.calTemplateVisiable(_props),
+      disable: _this.calTemplateDisable(_props),
+      description: _this.generateDescription(_props),
+      isTextInput: false,
+      switchTip: intl.get({
+        id: 'rdc-tb-cd-assets.teambition.flow-engine.template.DirectInput',
+        defaultMessage: '直接输入'
+      }),
+      btnStyle: {
+        position: 'absolute',
+        right: 0,
+        top: 0
+      },
+      tipsPopupStyle: {
+        transform: "translate(" + offsetX + "px, -10px)"
+      }
+    };
+    return _this;
+  }
+  _inheritsLoose(Template, _Component);
+  var _proto = Template.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
+    this.onPropChange(nextProps);
+  };
+  _proto.render = function render() {
+    var _this2 = this;
+    var _ref6 = this.props || {},
+      field = _ref6.field,
+      name = _ref6.name,
+      initValue = _ref6.initValue,
+      originalTemplate = _ref6.template,
+      _ref6$identifier = _ref6.identifier,
+      identifier = _ref6$identifier === void 0 ? '' : _ref6$identifier,
+      _ref6$sources = _ref6.sources,
+      sources = _ref6$sources === void 0 ? [] : _ref6$sources,
+      subscribe = _ref6.subscribe,
+      trackPage = _ref6.trackPage,
+      container = _ref6.popupContainer,
+      scenarioidentifier = _ref6.scenarioidentifier,
+      updateHelpLink = _ref6.updateHelpLink;
+    var _this$state = this.state,
+      disable = _this$state.disable,
+      visiable = _this$state.visiable,
+      isTextInput = _this$state.isTextInput,
+      switchTip = _this$state.switchTip;
+    var template = transformTemplate(originalTemplate, scenarioidentifier) || {};
+    var _ref7 = template || {},
+      type = _ref7.type,
+      groupItem = _ref7.groupItem,
+      _ref7$toolbars = _ref7.toolbars,
+      toolbars = _ref7$toolbars === void 0 ? [] : _ref7$toolbars;
+    var groupLabel = i18n(template, 'groupLabel');
+    var ComponentInst = transformType(type);
+    if (!visiable) {
+      return null;
+    }
+    var rules = transformRules(template.rules, i18n(template, 'label'), template.type, _extends({}, this.props, {
+      disable: disable,
+      conditionCb: function conditionCb(conditionName) {
+        return _this2.evalCondition(_this2.props, '', false, conditionName);
+      }
+    }));
+    var fieldName = identifier + "__" + name;
+    var _template$datasource = template.datasource,
+      datasource = _template$datasource === void 0 ? {} : _template$datasource,
+      _template$autoComplet = template.autoComplete,
+      autoComplete = _template$autoComplet === void 0 ? false : _template$autoComplet,
+      extra = template.extra;
+    var createable = datasource.createable;
+    var hasPermisson = true;
+    if (createable && createable.permission) {
+      hasPermisson = AK_GLOBAL.currentUser.permissions.includes(createable.permission);
+    }
+    var errorMsg = field.getError(fieldName) ? field.getError(fieldName).join(',') : '';
+    var help = datasource.notShowErrorHelp ? '' : errorMsg;
+    var createableButton = function createableButton(isPkgs) {
+      if (isPkgs === void 0) {
+        isPkgs = false;
+      }
+      var paramsAllMeet = function paramsAllMeet() {
+        var _createable$params = createable.params,
+          params = _createable$params === void 0 ? {} : _createable$params;
+        Object.keys(params).forEach(function (k) {
+          var value = params[k];
+          var match = value.match(/\$\{[^}]*\}/g);
+          if (match) {
+            var varName = value.replace(/\$\{([^}]*)}/, '$1');
+            var paramName = _this2.props.identifier + "__" + varName;
+            params[k] = "" + _this2.props.field.getValue(paramName) || '';
+          }
+        });
+        for (var varName in params) {
+          if (!params[varName]) {
+            return false;
+          }
+        }
+        return true;
+      };
+      if (scGrayEnable && (createable === null || createable === void 0 ? void 0 : createable.component) === 'addServiceConnection') {
+        return /*#__PURE__*/React.createElement(CreateServiceConnection, {
+          type: createable.scType,
+          defaultConnectionTypes: [createable.scType],
+          disabled: !hasPermisson || !paramsAllMeet() || disable,
+          onSuccess: _this2.onClickCreate,
+          btnStyle: isPkgs ? {} : _this2.state.btnStyle,
+          tipsPopupStyle: isPkgs ? {} : _this2.state.tipsPopupStyle
+        });
+      }
+      return /*#__PURE__*/React.createElement(Button, {
+        text: true,
+        type: "primary",
+        disabled: !hasPermisson || !paramsAllMeet() || disable,
+        className: "template-container-create-btn",
+        onClick: _this2.onClickCreate
+      }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "add-fill"
+      }), i18n(createable, 'desc') || intl.get({
+        id: 'rdc-tb-cd-assets.teambition.flow-engine.template.New',
+        defaultMessage: '新建'
+      }));
+    };
+    if (!Array.isArray(rules)) {
+      rules = [rules];
+    }
+    var componentInst = ComponentInst && /*#__PURE__*/React.createElement(ComponentInst, _extends({}, minimize(template.type, this.props), {
+      content: template,
+      identifier: identifier,
+      field: field,
+      fieldName: fieldName,
+      description: i18n(template, 'description'),
+      placeholder: i18n(template, 'placeholder'),
+      sources: sources,
+      disabled: disable,
+      subscribe: subscribe,
+      onRef: this.onRef,
+      trackPage: trackPage,
+      isTextInput: isTextInput,
+      container: container,
+      createableButton: createableButton,
+      parentVisible: this.props.parentVisible,
+      onChangeToInput: function onChangeToInput() {
+        _this2.setState({
+          // isTextInput: true,
+          switchTip: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.flow-engine.template.SelectFromDataSource',
+            defaultMessage: '从数据源选择'
+          })
+        });
+      }
+    }, template.type === 'deployShell' ? {
+      deployShellMaxNumber: 1000
+    } : {}, {
+      updateHelpLink: updateHelpLink
+    }, field.init(fieldName, {
+      rules: [].concat(rules, this.sourceSelectRule(sources, initValue, template)),
+      initValue: initValue,
+      props: {
+        onChange: this.onChange
+      }
+    })));
+    var getLabelText = function getLabelText() {
+      if (scGrayEnable && template.label === intl.get({
+        id: 'rdc-tb-cd-assets.teambition.flow-engine.template.SelectAuthorization',
+        defaultMessage: '选择授权'
+      })) {
+        return intl.get({
+          id: 'rdc-tb-cd-assets.pipeline-source.credential-form-item.SelectAConnection',
+          defaultMessage: '选择服务连接'
+        });
+      } else {
+        return template.label === intl.get({
+          id: 'rdc-tb-cd-assets.teambition.flow-engine.template.BuildProcedure',
+          defaultMessage: '构建步骤'
+        }) ? intl.get({
+          id: 'rdc-tb-cd-assets.teambition.flow-engine.template.TaskSteps',
+          defaultMessage: '任务步骤'
+        }) : i18n(template, 'label');
+      }
+    };
+    var renderUrlWithParams = function renderUrlWithParams(str) {
+      // todo globalContext
+      str = str.replace('${GLOBAL_CONTEXT.appstackPath}', window.location.origin + "/appstack");
+      return str.replace(/\${([^}]*)}/g, function () {
+        return field.getValue(identifier + "__" + (arguments.length <= 1 ? undefined : arguments[1]));
+      });
+    };
+    var varsInUrlAreSet = function varsInUrlAreSet(url) {
+      if (!url) return true;
+      // todo globalContext
+      if (url.includes('${GLOBAL_CONTEXT.')) {
+        return true;
+      }
+      var matchedVars = url.match(/\${([^}]*)}/g);
+      return every(matchedVars, function (v) {
+        var varName = v.replace(/\${([^}]*)}/, '$1');
+        var varValue = field.getValue(identifier + "__" + varName);
+        return varValue;
+      });
+    };
+    var extraLabelCls;
+    try {
+      // eslint-disable-next-line no-eval
+      extraLabelCls = eval(template.labelClass) || '';
+    } catch (e) {
+      extraLabelCls = '';
+    }
+    var label = /*#__PURE__*/React.createElement("div", {
+      className: "template-label-container " + extraLabelCls
+    }, /*#__PURE__*/React.createElement("span", null, getLabelText(), template.description && /*#__PURE__*/React.createElement("div", {
+      className: "hint-icon block"
+    }, this.hintTooltip())), extra && extra.type === 'link-button' && /*#__PURE__*/React.createElement(Button, {
+      disabled: disable || !varsInUrlAreSet(extra.url),
+      className: "template-container-link-btn",
+      text: true,
+      type: "primary",
+      onClick: function onClick() {
+        extra.url && window.open(renderUrlWithParams(extra.url));
+        track({
+          action: 'create aliyun serve',
+          page: 'edit page',
+          type: extra.identifier
+        });
+      }
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "add-fill"
+    })), extra && extra.type === 'custom-component' && this.getCustomComponent(extra), toolbars && /*#__PURE__*/React.createElement(Toolbars, {
+      items: toolbars,
+      identifier: identifier,
+      field: field,
+      disabled: disable
+    }), createable && createableButton(), autoComplete && /*#__PURE__*/React.createElement(Button, {
+      disabled: disable,
+      text: true,
+      type: "primary",
+      key: isTextInput,
+      id: (isTextInput ? 'input' : 'select') + "-" + extraLabelCls,
+      className: "template-container-create-btn",
+      onClick: function onClick() {
+        if (isTextInput) {
+          field.reset([fieldName]);
+        }
+        var curSwitchTip = switchTip === intl.get({
+          id: 'rdc-tb-cd-assets.teambition.flow-engine.template.DirectInput',
+          defaultMessage: '直接输入'
+        }) ? intl.get({
+          id: 'rdc-tb-cd-assets.teambition.flow-engine.template.SelectFromDataSource',
+          defaultMessage: '从数据源选择'
+        }) : intl.get({
+          id: 'rdc-tb-cd-assets.teambition.flow-engine.template.DirectInput',
+          defaultMessage: '直接输入'
+        });
+        _this2.setState({
+          isTextInput: !_this2.state.isTextInput,
+          switchTip: curSwitchTip
+        });
+      }
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "sort2-line"
+    }), switchTip), ['deployShell', 'shell'].includes(template.type) && /*#__PURE__*/React.createElement(ShellMagnifying, {
+      title: i18n(template, 'label'),
+      onRefresh: function onRefresh() {
+        _this2.child && _this2.child.onUpdateState && _this2.child.onUpdateState(field.getValue(fieldName));
+      }
+    }, componentInst));
+    var compoInline = ComponentInst.inline;
+    var defaultClasses = ['next-top', "template-container--" + (template.hidden ? 'hidden' : 'visiable'), "template-container__" + template.type, "template-container--" + (compoInline ? 'inline' : 'block'), this.getConditionClasses()];
+    var classes = template.customClass && Array.isArray(template.customClass) ? template.customClass.concat(defaultClasses).join(' ') : defaultClasses.join(' ');
+    var isPackages = scGrayEnable && (createable === null || createable === void 0 ? void 0 : createable.component) === 'addServiceConnection' && (createable === null || createable === void 0 ? void 0 : createable.scType) === 'PACKAGES';
+    return /*#__PURE__*/React.createElement("div", {
+      className: "template"
+    }, groupLabel && /*#__PURE__*/React.createElement("div", {
+      className: "template-group-label"
+    }, groupLabel), /*#__PURE__*/React.createElement("div", {
+      className: groupItem ? 'template-group-item' : ''
+    }, /*#__PURE__*/React.createElement(FormItem, {
+      className: classes.trim() + " " + (isPackages ? 'service-connection-pkgs' : ''),
+      label: template.label ? label : null,
+      validateState: field.getError(fieldName) ? 'error' : '',
+      help: help
+    }, template.help && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Message, {
+      shape: "inline",
+      title: /*#__PURE__*/React.createElement("span", {
+        dangerouslySetInnerHTML: {
+          __html: template.help
+        }
+      }),
+      type: "help",
+      style: {
+        marginTop: 8,
+        marginBottom: 8
+      }
+    }), ' '), componentInst, /*#__PURE__*/React.createElement("span", {
+      className: "text"
+    }, i18n(template, 'label')), i18n(template, 'description') && /*#__PURE__*/React.createElement("div", {
+      className: "hint-icon inline"
+    }, this.hintTooltip()))));
+  };
+  return Template;
+}(Component);
+export default Template;

package/es/components/common/teambition/flow-engine/toolbars/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const Toolbars: ({ items, field, identifier, disabled }: {
+    items: any;
+    field: any;
+    identifier: any;
+    disabled: any;
+}) => JSX.Element;
+export default Toolbars;

package/es/components/common/teambition/flow-engine/toolbars/index.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import ShortcutAcrCreate from "./shortcutAcrCreate";
+var toolbars = {
+  shortcutAcrCreate: ShortcutAcrCreate
+};
+var Toolbars = function Toolbars(_ref) {
+  var items = _ref.items,
+    field = _ref.field,
+    identifier = _ref.identifier,
+    disabled = _ref.disabled;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, items.map(function (toolbar, index) {
+    var _toolbar$params = toolbar.params,
+      params = _toolbar$params === void 0 ? {} : _toolbar$params;
+    Object.keys(params).forEach(function (k) {
+      var value = params[k];
+      var match = value.match(/\$\{[^}]*\}/g);
+      if (match) {
+        var name = value.replace(/\$\{([^}]*)}/, '$1');
+        var paramName = identifier + "__" + name;
+        params[k] = "" + field.getValue(paramName) || '';
+      }
+    });
+    var Toolbar = toolbars[toolbar.type];
+    return /*#__PURE__*/React.createElement(Toolbar, _extends({
+      key: toolbar + "-" + index
+    }, params, {
+      disabled: disabled
+    }));
+  }));
+};
+export default Toolbars;

package/es/components/common/teambition/flow-engine/toolbars/shortcutAcrCreate.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare class AcrCreate extends React.Component {
+    constructor(props: any);
+    componentDidUpdate(nextProps: any): void;
+    setVisible: (visible: any) => void;
+    onSubmit: () => void;
+    help: (fieldName: any) => any;
+    render(): JSX.Element;
+}
+export default AcrCreate;