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

package/es/components/common/teambition/flow-engine/fields/dropdown.js

@@ -0,0 +1,1093 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["content", "fieldName", "onRef", "createableButton"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/* eslint-disable react/no-unused-state */
+import React, { Component } from 'react';
+import { Balloon, Button, Dialog, Field, Input, Message, Select, MenuButton } from '@teamix/ui';
+import { Title, YunxiaoIcon } from '@alife/devops-ui';
+import CreateServiceConnection from "../../service-connection-create";
+import exceed from "../../../../../utils/apimap";
+import cls from 'classnames';
+import { i18n, getFeature } from "../../../../../utils";
+import { groupBy, get, omit } from 'lodash-es';
+import fetch from "../fetch";
+import { CODEUP_ROOT_PATH } from "../../../../../utils/codeupRootPath";
+import "./field_common.scss";
+import { ENV } from '@alife/yunxiao-common';
+var isVpc = ENV === 'vpc';
+import Dialogs from "../dialogs";
+import intl from "../../../../../locale";
+var Option = Select.Option;
+var Tooltip = Balloon.Tooltip;
+var scGrayEnable = window.YUNXIAO_COMMON.serviceConnectionGrayRegion === 'true'; // 是否灰度
+/**
+ * api: 原始URL定义
+ * globalProps: 流水线全局参数
+ * identifier: 当前组件的identifier
+ * field: 表单field对象
+ */
+var getFetchUrl = function getFetchUrl(_ref) {
+  var api = _ref.api,
+    _ref$globalProps = _ref.globalProps,
+    globalProps = _ref$globalProps === void 0 ? {} : _ref$globalProps,
+    identifier = _ref.identifier,
+    _ref$searchField = _ref.searchField,
+    searchField = _ref$searchField === void 0 ? 'searchField' : _ref$searchField,
+    _ref$searchKey = _ref.searchKey,
+    searchKey = _ref$searchKey === void 0 ? '' : _ref$searchKey,
+    _ref$field = _ref.field,
+    field = _ref$field === void 0 ? {
+      getValue: function getValue() {}
+    } : _ref$field,
+    subscribe = _ref.subscribe,
+    fieldName = _ref.fieldName,
+    onChange = _ref.onChange,
+    id = _ref.id;
+  // todo globalContext
+  api = api.replace('${GLOBAL_CONTEXT.appstackPath}', window.location.origin + "/appstack");
+  var matchResult = api.match(/\$\{[^}]*\}/g);
+  if (matchResult) {
+    matchResult.forEach(function (matched) {
+      var name = matched.replace(/\$\{([^}]*)}/, '$1');
+      // 使用全局参数
+      if (name.indexOf('global_props.') > -1) {
+        api = api.replace(matched, globalProps[name.replace('global_props.', '')]);
+      } else {
+        var parentMatch = name.match(/^parent(\d*)\./i);
+        if (parentMatch) {
+          console.warn('not support parent match rule');
+        } else {
+          var _field$getValue;
+          var value = encodeURIComponent((_field$getValue = field.getValue(identifier + "__" + name)) !== null && _field$getValue !== void 0 ? _field$getValue : '');
+          api = api.replace(matched, value);
+
+          /**
+           * 由于后端一些bug产生了有问题的数据，“构建集群”需要把自身现有值传给后端来解决
+           * 这里就忽略自身依赖
+           */
+          var isSelf = identifier + "__" + name === fieldName;
+          !isSelf && (subscribe === null || subscribe === void 0 ? void 0 : subscribe(identifier + "__" + name, fieldName, function () {
+            window.setTimeout(function () {
+              var _field$validate;
+              // this.field.reset(fieldName);
+              onChange && onChange('');
+              (_field$validate = field.validate) === null || _field$validate === void 0 ? void 0 : _field$validate.call(field);
+            }, 300);
+          }));
+        }
+      }
+    });
+  }
+  var result = '';
+  if (api.includes('?')) {
+    result = api + "&" + searchField + "=" + searchKey + "&id=" + id;
+  } else {
+    result = api + "?" + searchField + "=" + searchKey + "&id=" + id;
+  }
+  return result;
+};
+function getData(_ref2) {
+  var response = _ref2.response,
+    dpath = _ref2.path;
+  // 替换path
+  var currentData = response;
+  if (dpath) {
+    var path = dpath.split('.') || [];
+    path.forEach(function (key) {
+      var keys = Object.keys(currentData);
+      if (!keys.includes(key)) {
+        console.warn("Key " + dpath + " not found in remote response");
+        currentData = [];
+      } else {
+        currentData = currentData[key];
+      }
+    });
+  }
+  if (!(currentData instanceof Array)) {
+    currentData = [];
+  }
+  return currentData;
+}
+
+// 格式化数据
+function formatData(item, datasource, isConnection) {
+  if (isConnection === void 0) {
+    isConnection = false;
+  }
+  if (datasource.dataType === 'string') {
+    return {
+      label: item,
+      value: item
+    };
+  }
+  return scGrayEnable && isConnection ? _extends({}, item, {
+    label: item[datasource.label || 'label'],
+    value: item[datasource.value || 'value'],
+    editable: item.editable || false,
+    viewable: item.viewable || false
+  }) : {
+    label: item[datasource.label || 'label'],
+    value: item[datasource.value || 'value'],
+    editable: item.editable || false,
+    viewable: item.viewable || false,
+    __itemRawData: item
+  };
+}
+
+/**
+ * datasource: {
+ *  searchable: true, 是否启用搜索
+ *  remoteSearch: false, 是否使用远程搜搜
+ *  searchField: searchParams, 远程搜索的关键字
+ * }
+ */
+var Dropdown = /*#__PURE__*/function (_Component) {
+  function Dropdown(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.onChange = function (value) {
+      _this.setState({
+        value: value
+      });
+      _this.props.onChange && _this.props.onChange(value);
+      // return;
+    };
+    _this.onRef = function (ref) {
+      _this.child = ref;
+    };
+    _this.onCreateClick = function () {
+      var _this$field$getValues = _this.field.getValues(),
+        _cb = _this$field$getValues._cb;
+      if (_cb) {
+        _this.setState({
+          dialogRequesting: true
+        });
+        _cb().then(function (data) {
+          var label = data.label,
+            value = data.value;
+          if (!label || !value) {
+            console.error('!!!The onSubmit Should return object like {label: "label", value: "value"}');
+            _this.setState({
+              dialogRequesting: false
+            });
+            _this.props.setCreateDialogVisible(false);
+            return;
+          }
+          var dataSource = Object.assign([], _this.state.dataSource);
+          var itemIndex = dataSource.findIndex(function (item) {
+            return item.value === value;
+          });
+          if (itemIndex === -1) {
+            dataSource.splice(1, 0, {
+              label: label,
+              value: value
+            });
+          } else {
+            dataSource[itemIndex] = {
+              label: label,
+              value: value
+            };
+          }
+          _this.setState({
+            dataSource: dataSource,
+            dialogRequesting: false,
+            createDialogVisible: false
+          });
+          _this.onChange(value);
+        })["catch"](function () {
+          _this.setState({
+            dialogRequesting: false
+          });
+        });
+      } else {
+        console.error('!!!Please implement the DialogComponent');
+        _this.setState({
+          dialogRequesting: false,
+          createDialogVisible: false
+        });
+      }
+    };
+    _this.getDataSource = function (searchKey, initValue, callback) {
+      if (typeof searchKey === 'object') {
+        searchKey = '';
+      }
+      if (_this.timeout) {
+        clearTimeout(_this.timeout);
+      }
+      _this.setState({
+        createDialogVisible: false
+      });
+      var _this$props = _this.props,
+        content = _this$props.content,
+        identifier = _this$props.identifier,
+        field = _this$props.field,
+        subscribe = _this$props.subscribe,
+        fieldName = _this$props.fieldName,
+        value = _this$props.value;
+      var _content$autoComplete = content.autoComplete,
+        autoComplete = _content$autoComplete === void 0 ? false : _content$autoComplete;
+      var _content$datasource = content.datasource,
+        deleteable = _content$datasource.deleteable,
+        editable = _content$datasource.editable,
+        viewable = _content$datasource.viewable;
+      _this.checkPermission(viewable, editable, deleteable);
+      var i18nDatasource = function i18nDatasource(datasource) {
+        return datasource.map(function (item) {
+          return {
+            label: i18n(item, 'label'),
+            value: item.value,
+            __itemRawData: item
+          };
+        });
+      };
+      if (content.datasource.type === 'remote') {
+        // 加载远程数据时使用timeout合并多次输入
+        _this.timeout = window.setTimeout(function () {
+          var datasource = content.datasource;
+          var url = getFetchUrl({
+            api: datasource.api,
+            searchField: datasource.searchField,
+            searchKey: searchKey,
+            globalProps: {},
+            // TODO: 全局参数
+            identifier: identifier,
+            field: field,
+            subscribe: subscribe,
+            fieldName: fieldName,
+            onChange: _this.onChange,
+            id: isNaN(value) ? 0 : value
+          });
+          var _content$datasource$c = content.datasource.createable,
+            createable = _content$datasource$c === void 0 ? {} : _content$datasource$c;
+          var isServiceConnection = false;
+          if (scGrayEnable && (createable === null || createable === void 0 ? void 0 : createable.component) === 'addServiceConnection') {
+            url += '&version=v2';
+            isServiceConnection = true;
+          }
+          _this.setState({
+            loading: 'loading'
+          });
+          // const { crossOrigin = false, withCredentials = false } = datasource || {};
+
+          fetch({
+            url: url,
+            crossOrigin: true,
+            withCredentials: true
+          }).then(function (res) {
+            _this.setState({
+              loading: ''
+            });
+            if (res.successful && res.object) {
+              var data = res.object;
+              var currentData = getData({
+                response: data,
+                path: datasource.path
+              });
+              var dataList = currentData.map(function (item) {
+                return formatData(item, datasource, isServiceConnection);
+              });
+              _this.setState({
+                dataSource: dataList,
+                createDialogVisible: false
+              });
+              if (initValue) {
+                if (scGrayEnable && isServiceConnection) {
+                  // 选中新建的服务连接
+                  if ((createable === null || createable === void 0 ? void 0 : createable.scType) === 'PACKAGES') {
+                    var list = dataList.filter(function (c) {
+                      return c.owner === window.AK_GLOBAL.currentUser.workid;
+                    });
+                    _this.onChange(list.length > 0 ? list[0].value : dataList[0].value);
+                  } else {
+                    var _dataList$;
+                    _this.onChange(((_dataList$ = dataList[0]) === null || _dataList$ === void 0 ? void 0 : _dataList$.value) || '');
+                  }
+                } else {
+                  _this.onChange(dataList[dataList.length - 1].value);
+                }
+              }
+              if (autoComplete && _this.props.initValue && Array.isArray(dataList)) {
+                var curItem = dataList.find(function (i) {
+                  return i.value === _this.props.initValue;
+                });
+                if (!curItem && _this.state.firstFlag) {
+                  _this.setState({
+                    firstFlag: false
+                  });
+                  _this.props.onChangeToInput();
+                }
+              }
+              callback && callback();
+            } else {
+              console.warn("!!!Please check the response of " + url);
+            }
+          })["catch"](function (err) {
+            Message.error({
+              title: intl.get({
+                id: 'rdc-tb-cd-assets.flow-engine.fields.dropdown.AnErrorOccurredWhileLoading',
+                defaultMessage: "加载'{thisPropsContent}'数据时出错"
+              }, {
+                thisPropsContent: _this.props.content.label
+              })
+            });
+            console.error("Error happen when fetch data from " + url, err, _this.props);
+            _this.setState({
+              dataSource: [],
+              loading: ''
+            });
+            if (content.autoComplete) {
+              var _this$props$onChangeT, _this$props2;
+              // 如果是支持 input 切换的，接口又没有数据，切换到 input 展示。
+              (_this$props$onChangeT = (_this$props2 = _this.props).onChangeToInput) === null || _this$props$onChangeT === void 0 ? void 0 : _this$props$onChangeT.call(_this$props2);
+            }
+          });
+        }, 600);
+      } else {
+        _this.setState({
+          dataSource: i18nDatasource(content.datasource),
+          createDialogVisible: false
+        });
+      }
+    };
+    _this.getFooter = function () {
+      if (_this.state.dialogType === 'view' || !_this.state.footerVisible) {
+        return false;
+      }
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+        onClick: function onClick() {
+          return _this.setVisible(false);
+        }
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.fields.dropdown.Cancel',
+        defaultMessage: '取消'
+      })), /*#__PURE__*/React.createElement(Button, {
+        type: "primary",
+        onClick: function onClick() {
+          return _this.onCreateClick();
+        }
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.fields.dropdown.Save',
+        defaultMessage: '保存'
+      })));
+    };
+    _this.setVisible = function (visible) {
+      _this.setState({
+        createDialogVisible: visible,
+        footerVisible: true
+      });
+    };
+    // todo 创建服务连接成功回调
+    _this.initCreate = function () {
+      var createable = _this.props.content.datasource.createable;
+      if (createable.component === 'addServiceConnection') {
+        if (scGrayEnable) {
+          _this.getDataSource('', true);
+        } else {
+          var openedWindow = window.open("/aliyun/oauth/ram/authorization?redirectRam=true&scType=" + createable.scType);
+          var windowChecker = setInterval(function () {
+            if (openedWindow.location.pathname === '/ram/aliyun/success' || openedWindow.closed) {
+              window.clearInterval(windowChecker);
+              if (openedWindow.location.pathname === '/ram/aliyun/success') {
+                Message.success({
+                  title: intl.get({
+                    id: 'rdc-tb-cd-assets.flow-engine.fields.dropdown.ServiceAuthorizationCreated',
+                    defaultMessage: '服务授权创建成功'
+                  })
+                });
+              }
+              _this.getDataSource('', true);
+              if (!openedWindow.closed) {
+                openedWindow.close();
+              }
+            }
+          }, 500);
+        }
+      } else if (createable.component === 'simpleLink') {
+        var simpleUrl = "" + createable.url;
+        if (simpleUrl.indexOf("codeup.aliyun.com")) {
+          simpleUrl = simpleUrl.replace("https://codeup.aliyun.com", CODEUP_ROOT_PATH);
+        }
+        if (createable.replaceParams) {
+          createable.replaceParams.forEach(function (oneItem) {
+            simpleUrl = simpleUrl.replace("${" + oneItem + "}", _this.props.field.getValue(_this.props.identifier + "__" + oneItem));
+          });
+        }
+        window.open(simpleUrl);
+      } else {
+        _this.setState({
+          createDialogVisible: true,
+          dialogType: 'add'
+        });
+      }
+    };
+    _this.checkPermission = function (viewable, editable, deleteable) {
+      _this.setState({
+        canView: viewable && viewable.permission ? window.AK_GLOBAL.currentUser.permissions.includes(viewable.permission) : true,
+        canEdit: editable && editable.permission ? window.AK_GLOBAL.currentUser.permissions.includes(editable.permission) : true,
+        canDelete: deleteable && deleteable.permission ? window.AK_GLOBAL.currentUser.permissions.includes(deleteable.permission) : true
+      });
+    };
+    _this.deleteItem = function (key, url, paramName) {
+      return function (e) {
+        e.stopPropagation();
+        var data = {};
+        data[paramName] = key;
+        fetch({
+          url: url,
+          method: 'post',
+          data: data
+        }).then(function (res) {
+          if (res.successful) {
+            Message.success({
+              title: intl.get({
+                id: 'rdc-tb-cd-assets.flow-engine.fields.dropdown.Deleted',
+                defaultMessage: '已删除'
+              })
+            });
+          }
+          _this.setState({
+            createDialogVisible: false
+          });
+          _this.getDataSource();
+        })["catch"](function (err) {
+          Message.error({
+            title: intl.get({
+              id: 'rdc-tb-cd-assets.flow-engine.fields.dropdown.NotDeleted',
+              defaultMessage: '未删除'
+            })
+          });
+          console.error("Error happen when fetch data from " + url, err, _this.props);
+        });
+      };
+    };
+    _this.showItem = function (key, url, paramName) {
+      return function (e) {
+        e.stopPropagation();
+        var data = {};
+        data[paramName] = key;
+        fetch({
+          url: url,
+          method: 'get',
+          data: data
+        }).then(function (res) {
+          if (res.successful) {
+            _this.setState({
+              dialogType: 'view',
+              viewData: res.object,
+              createDialogVisible: true
+            });
+          }
+        })["catch"](function (err) {
+          console.error("Error happen when fetch data from " + url, err, _this.props);
+        });
+      };
+    };
+    _this.editItem = function (key, url, paramName) {
+      return function (e) {
+        e.stopPropagation();
+        var data = {};
+        data[paramName] = key;
+        fetch({
+          url: url,
+          method: 'get',
+          data: data
+        }).then(function (res) {
+          if (res.successful) {
+            _this.setState({
+              dialogType: 'edit',
+              viewData: res.object,
+              createDialogVisible: true
+            });
+          }
+        })["catch"](function (err) {
+          console.error("Error happen when fetch data from " + url, err, _this.props);
+        });
+      };
+    };
+    _this.deleteCallback = function (key) {
+      var dataSource = _this.state.dataSource;
+      var index = dataSource.findIndex(function (item) {
+        return item.value === key;
+      });
+      var item = dataSource[index];
+      if (item.value === _this.props.value) {
+        _this.onChange('');
+      }
+      dataSource.splice(index, 1);
+      _this.setState({
+        dataSource: dataSource
+      });
+    };
+    _this.tooltip = function (item) {
+      var label = item.label,
+        extraLabel = item.extraLabel;
+      var className = cls('engine-dropdown-option-text', {
+        'ellipsis-right': get(_this.props, 'content.datasource.ellipsis_position') === 'right'
+      });
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        align: "t",
+        trigger: /*#__PURE__*/React.createElement("div", {
+          className: className
+        }, label, extraLabel && extraLabel !== label ? "(" + extraLabel + ")" : ''),
+        popupContainer: function popupContainer() {
+          return document.querySelector('.common-select-popup');
+        }
+      }, label, extraLabel && extraLabel !== label ? "(" + extraLabel + ")" : '');
+    };
+    _this.text = function (item, labelWithValue) {
+      if (labelWithValue === void 0) {
+        labelWithValue = false;
+      }
+      var label = item.label,
+        extraLabel = item.extraLabel,
+        icon = item.icon,
+        value = item.value;
+      var strExtraLabel = "(" + extraLabel + ")";
+      var text = "" + label + (extraLabel && extraLabel !== label ? strExtraLabel : '');
+      var className = cls('field-dropdown', {
+        icon: icon,
+        'ellipsis-right': get(_this.props, 'content.datasource.ellipsis_position') === 'right'
+      });
+      var trigger = /*#__PURE__*/React.createElement("div", {
+        className: className
+      }, icon, /*#__PURE__*/React.createElement("span", {
+        className: "field-dropdown-text"
+      }, text, labelWithValue ? " (" + value + ") " : ''));
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        align: "t",
+        popupContainer: function popupContainer() {
+          return document.querySelector('.common-select-popup');
+        },
+        trigger: trigger
+      }, text);
+    };
+    _this.state = {
+      dataSource: [],
+      canDelete: true,
+      canView: true,
+      canEdit: true,
+      dialogRequesting: false,
+      dialogType: 'add',
+      loading: '',
+      isTextInput: false,
+      firstFlag: true,
+      footerVisible: true,
+      createPackagesFlag: false,
+      initData: false,
+      scKey: 0
+    };
+
+    // 延时处理锁
+    _this.timeout = null;
+    _this.field = new Field(_this);
+    var _this$props3 = _this.props,
+      _content = _this$props3.content,
+      createableButton = _this$props3.createableButton;
+    var _ref3 = _content || {},
+      _createable = _ref3.datasource.createable;
+    if (scGrayEnable && (_createable === null || _createable === void 0 ? void 0 : _createable.component) === 'addServiceConnection' && (_createable === null || _createable === void 0 ? void 0 : _createable.scType) === 'PACKAGES') {
+      // 微组件只在首次渲染时加载
+      _this.createBtn = createableButton(true);
+    }
+    return _this;
+  }
+  _inheritsLoose(Dropdown, _Component);
+  var _proto = Dropdown.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    var _this$props$content,
+      _this2 = this;
+    this.props.onRef(this);
+    var _ref4 = ((_this$props$content = this.props.content) === null || _this$props$content === void 0 ? void 0 : _this$props$content.datasource) || {},
+      createable = _ref4.createable,
+      type = _ref4.type;
+    var _this$props4 = this.props,
+      value = _this$props4.value,
+      parentVisible = _this$props4.parentVisible,
+      _this$props4$content$ = _this$props4.content.multiple,
+      multiple = _this$props4$content$ === void 0 ? false : _this$props4$content$;
+    // 多选空值状态为空数组
+    if (!value && multiple) {
+      this.onChange([]);
+    }
+    if (!parentVisible && type === 'remote') return;
+    // 服务连接默认选中
+    if (scGrayEnable && (createable === null || createable === void 0 ? void 0 : createable.component) === 'addServiceConnection' && !value) {
+      return this.getDataSource('', true, function () {
+        return _this2.setState({
+          initData: true
+        });
+      });
+    } else {
+      this.getDataSource();
+    }
+    this.setState({
+      initData: true
+    });
+  };
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    // 多选空值状态为空数组
+    var _this$props5 = this.props,
+      value = _this$props5.value,
+      _this$props5$content$ = _this$props5.content.multiple,
+      multiple = _this$props5$content$ === void 0 ? false : _this$props5$content$;
+    if (!value && multiple) {
+      this.onChange([]);
+    }
+  };
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
+    var _this$props$content2,
+      _this3 = this;
+    var initData = this.state.initData,
+      value = this.props.value;
+    var _ref5 = ((_this$props$content2 = this.props.content) === null || _this$props$content2 === void 0 ? void 0 : _this$props$content2.datasource) || {},
+      createable = _ref5.createable;
+    if (nextProps.parentVisible && !initData) {
+      if (scGrayEnable && (createable === null || createable === void 0 ? void 0 : createable.component) === 'addServiceConnection' && !value) {
+        return this.getDataSource('', true, function () {
+          return _this3.setState({
+            initData: true
+          });
+        });
+      } else {
+        this.getDataSource();
+      }
+      this.setState({
+        initData: true
+      });
+    }
+  };
+  _proto.evalCondition = function evalCondition(str, defaultValue) {
+    if (str) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      var _this$props6 = this.props,
+        identifier = _this$props6.identifier,
+        field = _this$props6.field;
+      var conditionExpress = str.replace(/\${([^}]*)}/g, function () {
+        return "field.getValue('" + identifier + "__" + (arguments.length <= 1 ? undefined : arguments[1]) + "')";
+      });
+      var result;
+      try {
+        // eslint-disable-next-line no-eval
+        result = eval(conditionExpress);
+      } catch (err) {
+        console.error(false, 'condition error', err);
+        return defaultValue;
+      }
+      return result;
+    }
+    return defaultValue;
+  };
+  _proto.render = function render() {
+    var _this4 = this;
+    var _this$state = this.state,
+      dataSource = _this$state.dataSource,
+      canDelete = _this$state.canDelete,
+      canEdit = _this$state.canEdit,
+      canView = _this$state.canView;
+    // eslint-disable-next-line no-unused-vars
+    var _this$props7 = this.props,
+      content = _this$props7.content,
+      fieldName = _this$props7.fieldName,
+      onRef = _this$props7.onRef,
+      createableButton = _this$props7.createableButton,
+      restProps = _objectWithoutPropertiesLoose(_this$props7, _excluded);
+    var _ref6 = content || {},
+      contentDatasource = _ref6.datasource,
+      _ref6$multiple = _ref6.multiple,
+      multiple = _ref6$multiple === void 0 ? false : _ref6$multiple;
+    var _ref7 = contentDatasource || {},
+      _ref7$searchable = _ref7.searchable,
+      searchable = _ref7$searchable === void 0 ? false : _ref7$searchable,
+      _ref7$filterLocal = _ref7.filterLocal,
+      filterLocal = _ref7$filterLocal === void 0 ? true : _ref7$filterLocal,
+      _ref7$labelWithValue = _ref7.labelWithValue,
+      labelWithValue = _ref7$labelWithValue === void 0 ? false : _ref7$labelWithValue;
+    var customProps = _extends({
+      filterLocal: filterLocal,
+      showSearch: searchable,
+      mode: multiple ? 'multiple' : 'single'
+    }, searchable ? {
+      onSearch: function onSearch(searchKey) {
+        return _this4.getDataSource(searchKey);
+      },
+      onFocus: this.getDataSource
+    } : {
+      filter: function filter(keyword, _ref8) {
+        var value = _ref8.value,
+          title = _ref8.title;
+        return keyword ? String(value).includes(keyword) || String(title).includes(keyword) : true;
+      }
+    });
+    var _ref9 = contentDatasource || {},
+      createable = _ref9.createable,
+      editable = _ref9.editable,
+      viewable = _ref9.viewable,
+      deleteable = _ref9.deleteable;
+
+    // const optionsDisabledInfo = dataSource.map(v => {
+    //   return {
+    //     value: v.value,
+    //     disabled: this.evalCondition(v.__itemRawData?.optionDisabledCondition, false),
+    //   };
+    // });
+
+    // if (optionsDisabledInfo.find(v => v.value === this.props.value)?.disabled) {
+    //   // 如果当前选项不可用，自动选择第一个可用的。
+    //   const firstUseable = optionsDisabledInfo.find((v) => !v.disabled);
+    //   if (firstUseable) {
+    //     setTimeout(() => {
+    //       this.onChange(firstUseable.value);
+    //     }, 100);
+    //   }
+    // }
+
+    var optionRender = function optionRender(item) {
+      var _content$datasource2, _hintContent$message, _item$__itemRawData;
+      var hintContent = (((_content$datasource2 = content.datasource) === null || _content$datasource2 === void 0 ? void 0 : _content$datasource2.optionHints) || []).find(function (hintItem) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        var DATA_ITEM = item.__itemRawData;
+        // eslint-disable-next-line no-eval
+        return eval(hintItem.forOptionItem);
+      });
+      var optionHint = hintContent !== null && hintContent !== void 0 && hintContent.message ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Balloon, {
+        type: "primary",
+        trigger: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+          style: {
+            color: 'var(--message-warning-color-icon-addon,#e28200)'
+          },
+          type: "warning-fill"
+        }),
+        closable: false,
+        triggerType: "hover",
+        align: "tl",
+        followTrigger: "true",
+        popupStyle: {
+          whiteSpace: 'normal',
+          lineHeight: '20px'
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: {
+          __html: (_hintContent$message = hintContent.message) === null || _hintContent$message === void 0 ? void 0 : _hintContent$message.replace('<a', '<a class="engine-help-link" target="_blank" ')
+        }
+      }))) : null;
+      var optionDisabledConditionResult = _this4.evalCondition((_item$__itemRawData = item.__itemRawData) === null || _item$__itemRawData === void 0 ? void 0 : _item$__itemRawData.optionDisabledCondition, false);
+      return /*#__PURE__*/React.createElement(Option, {
+        key: item.key || item.value,
+        value: item.key || item.value,
+        disabled: item.disabled || optionDisabledConditionResult,
+        title: item.label
+      }, deleteable && canDelete || editable && canEdit || viewable && canView ? _this4.tooltip(item) : _this4.text(item, labelWithValue), /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center'
+        },
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }, deleteable && canDelete && /*#__PURE__*/React.createElement(Button, {
+        text: true,
+        size: "small",
+        type: "primary",
+        className: "engine-dropdown-option-item",
+        onClick: _this4.deleteItem((item === null || item === void 0 ? void 0 : item.key) || (item === null || item === void 0 ? void 0 : item.value), deleteable === null || deleteable === void 0 ? void 0 : deleteable.url, deleteable === null || deleteable === void 0 ? void 0 : deleteable.paramName)
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.fields.dropdown.Delete',
+        defaultMessage: '删除'
+      })), scGrayEnable && (createable === null || createable === void 0 ? void 0 : createable.component) === 'addServiceConnection' ? item.viewable && /*#__PURE__*/React.createElement(CreateServiceConnection, {
+        key: item.uuid + item.gmtModified + "-view" + _this4.state.scKey,
+        mode: "view",
+        info: item,
+        btnStyle: {
+          marginLeft: 8
+        }
+      }) : viewable && (canView || item.viewable) && /*#__PURE__*/React.createElement(Button, {
+        size: "small",
+        type: "primary",
+        className: "engine-dropdown-option-item",
+        text: true,
+        onClick: _this4.showItem((item === null || item === void 0 ? void 0 : item.key) || (item === null || item === void 0 ? void 0 : item.value), viewable === null || viewable === void 0 ? void 0 : viewable.url, viewable === null || viewable === void 0 ? void 0 : viewable.paramName)
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.fields.dropdown.See',
+        defaultMessage: '查看'
+      })), scGrayEnable && (createable === null || createable === void 0 ? void 0 : createable.component) === 'addServiceConnection' ? item.editable && /*#__PURE__*/React.createElement(CreateServiceConnection, {
+        onViewEditDialogClose: function onViewEditDialogClose() {
+          _this4.setState({
+            scKey: Date.now()
+          });
+        },
+        key: item.authId + item.connectionName + item.label + "-edit" + _this4.state.scKey,
+        mode: "edit",
+        info: item,
+        onSuccess: _this4.getDataSource,
+        btnStyle: {
+          marginLeft: 8
+        }
+      }) : editable && (canEdit || item.editable) && /*#__PURE__*/React.createElement(Button, {
+        size: "small",
+        type: "primary",
+        className: "engine-dropdown-option-item",
+        text: true,
+        onClick: _this4.editItem((item === null || item === void 0 ? void 0 : item.key) || (item === null || item === void 0 ? void 0 : item.value), viewable === null || viewable === void 0 ? void 0 : viewable.url, viewable === null || viewable === void 0 ? void 0 : viewable.paramName)
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.fields.dropdown.Editing',
+        defaultMessage: '编辑'
+      }))), optionHint);
+    };
+    var options;
+    var needGroup = dataSource.some(function (item) {
+      var _item$__itemRawData2;
+      return (_item$__itemRawData2 = item.__itemRawData) === null || _item$__itemRawData2 === void 0 ? void 0 : _item$__itemRawData2.optionGroup;
+    });
+    if (!needGroup) {
+      options = dataSource.map(optionRender);
+    } else {
+      // 分组
+      var grouped = groupBy(dataSource, function (item) {
+        return item.__itemRawData.optionGroup;
+      });
+      options = Object.entries(grouped).map(function (_ref10) {
+        var groupKey = _ref10[0],
+          group = _ref10[1];
+        var label = groupKey === 'undefined' ? intl.get({
+          id: 'rdc-tb-cd-assets.flow-engine.fields.dropdown.NotGrouped',
+          defaultMessage: '未分组'
+        }) : groupKey;
+        return /*#__PURE__*/React.createElement(Select.OptionGroup, {
+          label: label
+        }, group.map(optionRender));
+      });
+    }
+    var DialogTemplate = null;
+    if (createable) {
+      if (createable.type === 'dialog') {
+        DialogTemplate = Dialogs.get(createable.component);
+      }
+    }
+    var valueRender = function valueRender(item) {
+      var label = Array.isArray(item.label) ? item.label[0] : item.label;
+      return label;
+    };
+    var footer = this.getFooter();
+    var replacedParamsFromCreateable = function replacedParamsFromCreateable() {
+      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 name = value.replace(/\$\{([^}]*)}/, '$1');
+          var paramName = _this4.props.identifier + "__" + name;
+          params[k] = "" + _this4.props.field.getValue(paramName) || '';
+        }
+      });
+      return params;
+    };
+    var dialog = function dialog() {
+      if (!createable) {
+        return null;
+      }
+      var params = replacedParamsFromCreateable();
+      var isKubeConfigConnection = createable.component === 'kubeConfigConnection';
+      return /*#__PURE__*/React.createElement(Dialog, {
+        loading: _this4.state.dialogRequesting,
+        title: i18n(createable, 'title'),
+        visible: _this4.state.createDialogVisible,
+        onClose: function onClose() {
+          return _this4.setVisible(false);
+        },
+        footer: footer,
+        animation: {
+          "in": 'expandInDown',
+          out: 'expandOutUp'
+        },
+        noBodyPadding: isKubeConfigConnection && ['edit', 'view'].includes(_this4.state.dialogType),
+        className: isKubeConfigConnection && ['edit', 'view'].includes(_this4.state.dialogType) ? 'kube-config-connection' : '',
+        style: isKubeConfigConnection && _this4.state.dialogType === 'edit' ? {
+          overflow: 'unset'
+        } : {}
+      }, /*#__PURE__*/React.createElement(DialogTemplate, _extends({
+        onRef: _this4.onRef,
+        setVisible: _this4.setVisible,
+        deleteCallback: _this4.deleteCallback,
+        field: _this4.field
+      }, params, {
+        createable: createable,
+        dialogType: _this4.state.dialogType,
+        viewData: _this4.state.viewData,
+        setFooterVisible: function setFooterVisible(visible) {
+          return _this4.setState({
+            footerVisible: visible
+          });
+        }
+      })));
+    };
+    if (scGrayEnable && (createable === null || createable === void 0 ? void 0 : createable.component) === 'addServiceConnection' && (createable === null || createable === void 0 ? void 0 : createable.scType) === 'PACKAGES') {
+      var getLabel = function getLabel() {
+        var connection = dataSource.find(function (c) {
+          return c.id === restProps.value;
+        });
+        return /*#__PURE__*/React.createElement("div", {
+          className: "menu-label"
+        }, /*#__PURE__*/React.createElement(Title, {
+          trigger: (connection === null || connection === void 0 ? void 0 : connection.connectionName) || intl.get({
+            id: 'rdc-tb-cd-assets.pipeline-source.credential-form-item.PleaseSelectAConnection',
+            defaultMessage: '请选择服务连接'
+          }),
+          align: "t"
+        }, (connection === null || connection === void 0 ? void 0 : connection.connectionName) || intl.get({
+          id: 'rdc-tb-cd-assets.pipeline-source.credential-form-item.PleaseSelectAConnection',
+          defaultMessage: '请选择服务连接'
+        })));
+      };
+      var getBindingActions = function getBindingActions() {
+        if (getFeature('do.not.ini.packages.user.and.repo')) {
+          console.log('not init is true1');
+          return [exceed.fetch({
+            api: 'Packages.binding'
+          })];
+        }
+        console.log('not init is not true1');
+        return [exceed.fetch({
+          api: 'Packages.initRepoAndUser'
+        }), exceed.fetch({
+          api: 'Packages.binding'
+        })];
+      };
+      var createPackagesConnection = /*#__PURE__*/function () {
+        var _ref11 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return Promise.all(getBindingActions());
+              case 2:
+                _this4.getDataSource(null, true);
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function createPackagesConnection() {
+          return _ref11.apply(this, arguments);
+        };
+      }();
+      if (dataSource.length === 0 && !this.state.createPackagesFlag && !restProps.value && this.state.initData) {
+        createPackagesConnection();
+        this.setState({
+          createPackagesFlag: true
+        });
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: "connection-layout-header"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "left",
+        style: {
+          width: 220
+        }
+      }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "member-line"
+      }), /*#__PURE__*/React.createElement(MenuButton, {
+        text: true,
+        popupProps: {
+          shouldUpdatePosition: true,
+          cache: true
+        },
+        popupContainer: function popupContainer(t) {
+          return t.parentNode;
+        },
+        label: getLabel(),
+        disabled: this.props.disabled
+      }, dataSource.length === 0 ? /*#__PURE__*/React.createElement("span", null, intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.fields.dropdown.Packages.ServiceConnection.empty',
+        defaultMessage: '无选项'
+      })) : dataSource.map(function (c) {
+        return /*#__PURE__*/React.createElement(MenuButton.Item, {
+          key: c.id,
+          value: c.id,
+          onClick: function onClick() {
+            _this4.onChange(c.id);
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "menu-btn-option"
+        }, restProps.value === c.id && /*#__PURE__*/React.createElement(YunxiaoIcon, {
+          className: "active-icon",
+          type: "true-line"
+        }), /*#__PURE__*/React.createElement(Title, {
+          trigger: c.connectionName,
+          align: "t"
+        }, c.connectionName), /*#__PURE__*/React.createElement("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            lineHeight: 1
+          },
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          }
+        }, c.viewable && /*#__PURE__*/React.createElement(CreateServiceConnection, {
+          mode: "view",
+          btnStyle: {
+            marginLeft: 8
+          },
+          info: c
+        }), c.editable && /*#__PURE__*/React.createElement(CreateServiceConnection, {
+          mode: "edit",
+          btnStyle: {
+            marginLeft: 8
+          },
+          info: c,
+          onSuccess: _this4.getDataSource
+        }))));
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: "right"
+      }, this.createBtn));
+    }
+
+    /**
+     * 在编辑任务模板，渲染 validatorRole 时候，select 的某些 props 组合导致组件库里
+     * 报了 https://legacy.reactjs.org/docs/error-decoder.html/?invariant=185
+     * Maximum update depth exceeded 这个错，似乎是渲染 select 弹层的问题，具体原因不明，
+     * 这里先对这个字段的 select 删掉 container 和 followTrigger 两个属性
+     */
+    var __isvalidatorRole = this.props.name === 'validatorRole';
+    return /*#__PURE__*/React.createElement("div", {
+      id: "dropdown"
+    }, dialog(), this.props.isTextInput ? /*#__PURE__*/React.createElement(Input, _extends({
+      className: "common-select"
+    }, restProps, {
+      value: restProps.value,
+      onChange: this.onChange
+    }, customProps, {
+      hasClear: true,
+      onFocus: undefined // input 不请求
+    })) : /*#__PURE__*/React.createElement(Select, _extends({
+      popupClassName: "common-select-popup"
+    }, __isvalidatorRole ? omit(restProps, ['container']) : restProps, {
+      value: restProps.value,
+      onChange: function onChange(value, actionType) {
+        var v = actionType === 'clear' ? '' : value;
+        _this4.onChange(v);
+      }
+    }, customProps, {
+      dataSource: dataSource,
+      showSearch: true,
+      onFocus: this.getDataSource,
+      autoWidth: true,
+      valueRender: valueRender
+    }, __isvalidatorRole ? null : {
+      followTrigger: true
+    }, {
+      state: this.state.loading || this.props.state,
+      disabled: this.props.disabled,
+      hasClear: true
+    }), options));
+  };
+  return Dropdown;
+}(Component);
+export { getData, getFetchUrl, formatData };
+export default Dropdown;