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

package/es/components/dashboardMain/components/dropdown-panel/index.js

@@ -0,0 +1,176 @@
+import React, { useState } from 'react';
+import { Overlay, Button, Checkbox, Input, Menu } from '@teamix/ui';
+import { debounce } from 'lodash-es';
+import intl from "../../../../locale";
+import { YunxiaoIcon } from '@alife/devops-ui';
+import "./index.scss";
+var Popup = Overlay.Popup;
+var PREFIX = 'dropdown-panel';
+var DropdownPanel = function DropdownPanel(props) {
+  var trigger = props.trigger,
+    title = props.title,
+    _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+    _props$value = props.value,
+    value = _props$value === void 0 ? [] : _props$value,
+    onOk = props.onOk,
+    _props$multiple = props.multiple,
+    multiple = _props$multiple === void 0 ? true : _props$multiple;
+  var _useState = useState(false),
+    visible = _useState[0],
+    setVisible = _useState[1];
+  var _useState2 = useState(''),
+    searchValue = _useState2[0],
+    setSearchValue = _useState2[1];
+  var _useState3 = useState(value),
+    selectValues = _useState3[0],
+    setSelectValues = _useState3[1];
+  var onSearch = function onSearch() {
+    return dataSource.filter(function (_ref) {
+      var v = _ref.value,
+        name = _ref.name,
+        extra = _ref.extra;
+      return ("" + v).includes(searchValue) || ("" + name).includes(searchValue) || extra && ("" + extra).includes(searchValue);
+    });
+  };
+  var onClose = function onClose() {
+    setVisible(false);
+    var clock = setTimeout(function () {
+      setSearchValue('');
+      setSelectValues([]);
+      clearTimeout(clock);
+    }, 100);
+  };
+  var renderBody = function renderBody() {
+    var list = onSearch(dataSource);
+    if (!list.length) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: PREFIX + "__main__body__empty"
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.components.dropdown-panel.NoResults',
+        defaultMessage: '无结果'
+      }));
+    }
+    if (!multiple) {
+      return /*#__PURE__*/React.createElement(Menu, {
+        selectMode: "single",
+        selectedKeys: selectValues,
+        onSelect: function onSelect(vals) {
+          return setSelectValues(vals);
+        }
+      }, list.map(function (it) {
+        return /*#__PURE__*/React.createElement(Menu.Item, {
+          key: it.value,
+          className: PREFIX + "__main__body__item"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: PREFIX + "__main__body__item__wrap"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: PREFIX + "__main__body__item__text"
+        }, it.name), /*#__PURE__*/React.createElement("div", {
+          className: PREFIX + "__main__body__item__extra"
+        }, it.extra)));
+      }));
+    }
+    return /*#__PURE__*/React.createElement(Checkbox.Group, {
+      value: selectValues,
+      onChange: setSelectValues,
+      style: {
+        width: '100%'
+      }
+    }, list.map(function (it) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: it.value,
+        className: PREFIX + "__main__body__item"
+      }, /*#__PURE__*/React.createElement(Checkbox, {
+        className: PREFIX + "__main__body__item--checkbox",
+        value: it.value
+      }, it.color && /*#__PURE__*/React.createElement("span", {
+        className: PREFIX + "__main__body__item__dot",
+        style: {
+          background: it.color
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: PREFIX + "__main__body__item__wrap"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: PREFIX + "__main__body__item__text"
+      }, it.name), /*#__PURE__*/React.createElement("div", {
+        className: PREFIX + "__main__body__item__extra"
+      }, it.extra))));
+    }));
+  };
+  return /*#__PURE__*/React.createElement(Popup, {
+    visible: visible,
+    trigger: trigger,
+    container: function container(_ref2) {
+      var parentNode = _ref2.parentNode;
+      return parentNode;
+    },
+    beforeOpen: function beforeOpen() {
+      var val = multiple ? value : value.map(function (k) {
+        return String(k);
+      });
+      setSelectValues(val);
+    },
+    onVisibleChange: function onVisibleChange(v) {
+      setVisible(v);
+      !v && onClose();
+    },
+    triggerType: "click"
+  }, /*#__PURE__*/React.createElement("section", {
+    className: PREFIX
+  }, /*#__PURE__*/React.createElement("header", {
+    className: PREFIX + "__header"
+  }, title, /*#__PURE__*/React.createElement(Button, {
+    text: true,
+    size: "small"
+    // name="remove"
+    // color="gray"
+    ,
+    className: PREFIX + "__header--close",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+    type: "false-line"
+  }))), /*#__PURE__*/React.createElement("main", {
+    className: PREFIX + "__main"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: PREFIX + "__main--search"
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: intl.get({
+      id: 'rdc-tb-cd-assets.components.dropdown-panel.EnterAKeyword',
+      defaultMessage: '请输入关键字'
+    }),
+    style: {
+      width: '100%'
+    },
+    onChange: debounce(setSearchValue, 500),
+    addonTextAfter: multiple && /*#__PURE__*/React.createElement(Button, {
+      type: "secondary",
+      size: "xs"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.components.dropdown-panel.SelectedSelectvalueslength',
+      defaultMessage: '已选择{selectValuesLength}'
+    }, {
+      selectValuesLength: selectValues.length
+    }))
+  })), /*#__PURE__*/React.createElement("section", {
+    className: PREFIX + "__main__body"
+  }, renderBody())), /*#__PURE__*/React.createElement("footer", {
+    className: PREFIX + "__footer"
+  }, /*#__PURE__*/React.createElement(Button
+  // size="small"
+  , {
+    type: "primary",
+    disabled: !selectValues.length,
+    style: {
+      width: '100%'
+    },
+    onClick: function onClick() {
+      onOk && onOk(selectValues);
+      onClose();
+    }
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.components.variableGroup.newVariableGroupDialog.Determine',
+    defaultMessage: '确定'
+  })))));
+};
+export default DropdownPanel;

package/es/components/dashboardMain/components/dropdown-panel/index.scss

@@ -0,0 +1,111 @@
+$PREFIX: dropdown-panel;
+
+@include block($PREFIX) {
+  width: 250px;
+  background: var(--color-white, #fff);
+  overflow: hidden;
+  border-radius: var(--popup-local-corner, 4px);
+  box-shadow: var(--popup-local-shadow, 0 6px 24px 0 rgba(0, 0, 0, 0.1));
+
+  @include element(header) {
+    position: relative;
+    padding: 12px 20px;
+    border-bottom: 1px solid var(--color-brand3-1, #f2f5f7);
+    line-height: 24px;
+    font-size: 16px;
+    background: transparent;
+    color: var(--color-text1-4, #292929);
+    font-weight: 500;
+
+    @include modifier_1(close) {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 16px;
+      width: 24px;
+      font-weight: 500;
+    }
+  }
+
+  @include element(main) {
+    @include modifier_1(search) {
+      width: 100%;
+      padding: 12px;
+    }
+
+    @include element(body) {
+      overflow-y: auto;
+      flex: 1;
+      width: 100%;
+      max-height: 230px;
+      @include element(item) {
+        padding: 10px 12px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        .next-checkbox-wrapper {
+          display: flex;
+        }
+
+        &:hover {
+          background-color: var(--color-fill1-2, #f7f7f7);
+        }
+
+        @include element(dot) {
+          width: 8px;
+          height: 8px;
+          margin: 4px 8px 0 0;
+          border-radius: 50%;
+        }
+        
+        @include modifier_1(checkbox) {
+          height: auto;
+          width: 100%;
+          overflow: hidden;
+          // display: flex;
+          align-items: center;
+          cursor: pointer;
+          .next-checkbox-label {
+            height: auto;
+            line-height: inherit;
+            display: flex;
+            align-items: center;
+          }
+        }
+
+        @include element(extra) {
+          font-size: 12px;
+          color: var(--color-text1-7, #8b8b8b);
+        }
+      }
+
+      @include element(empty) {
+        height: 80px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  @include element(footer) {
+    width: 100%;
+    height: 48px;
+    padding: 0 16px;
+    border-top: 1px solid var(--color-brand3-2, #e9edf0);
+    background-color: var(--color-white, #fff);
+    display: flex;
+    align-items: center;
+  }
+}
+
+
+.dropdown-panel__main--search {
+  input {
+    overflow: hidden; /* 隐藏超出的内容 */
+    white-space: nowrap; /* 不换行 */
+    text-overflow: ellipsis; /* 显示省略号 */
+  }
+}

package/es/components/dashboardMain/components/empty/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './index.scss';
+declare const Empty: (props: any) => JSX.Element;
+export default Empty;

package/es/components/dashboardMain/components/empty/index.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["title", "desc", "disabled", "onCreate", "btnText"];
+import React from 'react';
+import { Button, Result } from '@teamix/ui';
+import intl from "../../../../locale";
+import { Perf } from '@alife/yunxiao-common';
+import "./index.scss";
+var PREFIX = 'dashboard-empty';
+var Empty = function Empty(props) {
+  var title = props.title,
+    desc = props.desc,
+    disabled = props.disabled,
+    onCreate = props.onCreate,
+    btnText = props.btnText,
+    others = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Result, _extends({
+    img: "none",
+    title: title,
+    desc: desc,
+    theme: "yunxiao",
+    imageTheme: "yunxiao",
+    size: "medium",
+    className: PREFIX,
+    extra: onCreate && /*#__PURE__*/React.createElement(Button, {
+      onClick: onCreate,
+      type: "primary",
+      disabled: disabled
+    }, btnText || intl.get({
+      id: 'rdc-tb-cd-assets.components.empty.Create',
+      defaultMessage: '创建'
+    }))
+  }, others)), /*#__PURE__*/React.createElement(Perf, null));
+};
+export default Empty;

package/es/components/dashboardMain/components/empty/index.scss

@@ -0,0 +1,17 @@
+$PREFIX: dashboard-empty;
+
+.#{$PREFIX} {
+  flex: 1;
+  &.tag {
+    height: calc(100vh - 136px);
+    .create-tag {
+      margin-left: 8px;
+    }
+    .container {
+      transform: translate(0, -52px);
+    }
+  }
+  .container {
+    transform: translateY(-52px);
+  }
+}

package/es/components/dashboardMain/components/header/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const HeaderWithTooltip: (props: any) => JSX.Element;
+export default HeaderWithTooltip;

package/es/components/dashboardMain/components/header/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Link from "../../../common/teambition/help-link";
+import { Balloon } from '@teamix/ui';
+import { Header, ButtonIcon } from '@alife/devops-ui';
+var HeaderWithTooltip = function HeaderWithTooltip(props) {
+  var name = props.name,
+    extra = props.extra,
+    helpText = props.helpText,
+    helpUrl = props.helpUrl,
+    headerExtra = props.headerExtra;
+  var help = helpText && helpUrl && /*#__PURE__*/React.createElement(Balloon.Tooltip, {
+    align: "t",
+    closable: false,
+    trigger: /*#__PURE__*/React.createElement(ButtonIcon, {
+      name: "question-line",
+      style: {
+        marginLeft: 6
+      }
+    })
+  }, helpText, "\uFF0C", /*#__PURE__*/React.createElement(Link, {
+    href: helpUrl
+  }));
+  return /*#__PURE__*/React.createElement(Header, {
+    title: /*#__PURE__*/React.createElement(React.Fragment, null, name, help, headerExtra),
+    operation: extra
+  });
+};
+export default HeaderWithTooltip;

package/es/components/dashboardMain/components/kubernetes-manage/index.d.ts

@@ -0,0 +1,3 @@
+import './index.scss';
+declare const _default: any;
+export default _default;