@riil-frontend/component-topology 6.0.0-alpha.6 → 6.0.0-alpha.60

package/lib/core/editor/components/Toolbar/widgets/IconSelect/constant.js

@@ -0,0 +1,69 @@
+"use strict";
+
+exports.__esModule = true;
+exports.iconList = void 0;
+var iconList = [{
+  id: '1',
+  name: '图片库1',
+  icons: [{
+    id: '001',
+    name: '图片一',
+    url: '/img/model/switch.svg',
+    icon: 'switch'
+  }, {
+    id: '002',
+    name: '图片二',
+    url: '/img/model/backupOnError.svg',
+    icon: 'res_terminal'
+  }, {
+    id: '003',
+    name: '图片三',
+    url: '/img/model/linuxServer.svg',
+    icon: 'res_linux'
+  }, {
+    id: '004',
+    name: '图片一',
+    url: '/img/model/switch.svg',
+    icon: 'switch'
+  }, {
+    id: '005',
+    name: '图片二',
+    url: '/img/model/backupOnError.svg',
+    icon: 'res_terminal'
+  }, {
+    id: '005',
+    name: '图片三',
+    url: '/img/model/linuxServer.svg',
+    icon: 'res_linux'
+  }, {
+    id: '006',
+    name: '图片一',
+    url: '/img/model/switch.svg',
+    icon: 'switch'
+  }, {
+    id: '007',
+    name: '图片二',
+    url: '/img/model/backupOnError.svg',
+    icon: 'res_terminal'
+  }, {
+    id: '008',
+    name: '图片三',
+    url: '/img/model/linuxServer.svg',
+    icon: 'res_linux'
+  }]
+}, {
+  id: '2',
+  name: '图片库2',
+  icons: [{
+    id: '004',
+    name: '图片四',
+    url: '/img/model/tree_child.svg',
+    icon: 'tree_child'
+  }, {
+    id: '005',
+    name: '图片五',
+    url: '/img/model/commonNetwork.svg',
+    icon: 'res_storage'
+  }]
+}];
+exports.iconList = iconList;

package/lib/core/editor/components/Toolbar/widgets/IconSelect/index.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+
+var _popUpContent = _interopRequireDefault(require("./popUpContent"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var TopoIconSelect = function TopoIconSelect(props, ref) {
+  // 传入参数
+  var value = props.value,
+      iconList = props.iconList,
+      onChange = props.onChange;
+
+  var _useState = (0, _react.useState)(value),
+      valueData = _useState[0],
+      setValue = _useState[1];
+
+  var _useState2 = (0, _react.useState)(),
+      selectItem = _useState2[0],
+      setSelect = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      visible = _useState3[0],
+      setVisible = _useState3[1];
+
+  (0, _react.useEffect)(function () {
+    if (value) {
+      for (var i = 0; i < iconList.length; i++) {
+        var icons = iconList[i].icons;
+        var flag = false;
+
+        for (var m = 0; m < icons.length; m++) {
+          if (value === icons[m].id) {
+            flag = true;
+            setSelect(icons[m]);
+            break;
+          }
+        }
+
+        if (flag) {
+          break;
+        }
+      }
+    }
+  }, [value]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      getSelectData: getSelectData
+    };
+  });
+
+  var handleChange = function handleChange(v) {
+    console.log('handleChange: ', v);
+
+    if (typeof onChange === 'function') {
+      onChange(v.id);
+    }
+
+    setSelect(v);
+    setValue(v.id);
+    setVisible(false);
+  };
+
+  var getSelectData = function getSelectData() {
+    return valueData;
+  };
+
+  var valueRender = function valueRender(v) {
+    return selectItem ? /*#__PURE__*/_react["default"].createElement("span", {
+      className: _indexModule["default"].selected
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: _indexModule["default"].iconImgWrapper
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      className: _indexModule["default"].iconImg,
+      alt: "",
+      src: selectItem === null || selectItem === void 0 ? void 0 : selectItem.url
+    })), /*#__PURE__*/_react["default"].createElement("span", {
+      className: _indexModule["default"].icontitle
+    }, selectItem === null || selectItem === void 0 ? void 0 : selectItem.name)) : null;
+  };
+
+  var onVisibleChange = function onVisibleChange(v) {
+    setVisible(v);
+  };
+
+  var popupContent = /*#__PURE__*/_react["default"].createElement(_popUpContent["default"], {
+    iconList: iconList,
+    selectedId: selectItem === null || selectItem === void 0 ? void 0 : selectItem.id,
+    onChange: handleChange
+  });
+
+  var popupProps = {
+    triggerClickKeycode: [13, 32, 40] // space, enter, down-arrow
+
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].TopoIconSelect
+  }, /*#__PURE__*/_react["default"].createElement(_popUpContent["default"], {
+    iconList: iconList,
+    selectedId: selectItem === null || selectItem === void 0 ? void 0 : selectItem.id,
+    onChange: handleChange
+  }));
+};
+
+var _default = /*#__PURE__*/_react["default"].forwardRef(TopoIconSelect);
+
+exports["default"] = _default;

package/lib/core/editor/components/Toolbar/widgets/IconSelect/index.module.scss

@@ -0,0 +1,153 @@
+@import "@alifd/next/variables";
+
+.TopoIconSelect {
+
+
+  .iconSelect {}
+
+
+
+}
+
+.iconCollapse {
+  width: 240px;
+  max-height: 218px;
+  overflow-y: auto;
+  border: none;
+
+  :global {
+    .#{$css-prefix}collapse-panel-expanded {
+      .#{$css-prefix}collapse-panel-content {
+        padding: 0px 0px 5px 0px;
+      }
+    }
+
+    .#{$css-prefix}collapse-panel {
+      border-top: none;
+      background-color: #FFF;
+    }
+
+    .#{$css-prefix}collapse-panel-title {
+      background: none;
+      font-size: 12px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #4D6277;
+      line-height: 17px;
+    }
+
+    .#{$css-prefix}collapse-panel:not(:first-child) {
+      border-top: none;
+    }
+
+    .#{$css-prefix}collapse-panel-content {
+      padding: 0px 0px 5px 0px;
+    }
+  }
+}
+
+.iconSelect {
+  width: 100%;
+
+  .selected {
+    height: 26px;
+    display: block;
+
+    .iconImgWrapper {
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      text-align: center;
+      // vertical-align: middle;
+    }
+
+    .iconImg {
+      display: inline-block;
+      width: auto;
+      height: auto;
+      max-width: 18px;
+      max-height: 18px;
+      vertical-align: middle;
+    }
+
+    .icontitle {
+      text-align: left;
+      vertical-align: top;
+      display: inline-block;
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #4D6277;
+      //margin-top: 2px;
+      line-height: 26px;
+      margin-left: 7px;
+    }
+
+    :global {
+      .#{$css-prefix}tag {
+        background: none;
+      }
+    }
+  }
+}
+
+
+
+.collPanel {
+  padding: 5px;
+}
+
+
+
+
+.iconli {
+  width: 52px;
+  height: 68px;
+  text-align: center;
+  //border: 2px solid #FFF;
+  overflow: hidden;
+  cursor: pointer;
+
+  .iconImgWrapper {
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    margin: 5px 8px 5px 8px;
+  }
+
+  .iconImg {
+    display: inline-block;
+    width: auto;
+    height: auto;
+    max-width: 32px;
+    max-height: 32px;
+    vertical-align: middle;
+  }
+
+  .icontitle {
+    width: 48px;
+    max-width: 50px;
+    text-align: center;
+    font-size: 12px;
+    -webkit-text-size-adjust: none;
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #4D6277;
+    line-height: 11px;
+  }
+
+
+  // float: left;
+}
+
+.selectedTag {
+  border-radius: 4px;
+  // border: 2px solid #4C89FF;
+  background-color: #F2F7FD;
+}

package/lib/core/editor/components/Toolbar/widgets/IconSelect/popUpContent.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
+
+var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+
+var Panel = _collapse["default"].Panel;
+
+function PopUpContent(props) {
+  var iconList = props.iconList,
+      onChange = props.onChange,
+      selectedId = props.selectedId;
+
+  var itemOnClick = function itemOnClick(e) {
+    onChange(e);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
+    className: _indexModule["default"].iconCollapse
+  }, iconList.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(Panel, {
+      title: item.name,
+      key: index,
+      className: _indexModule["default"].collPanel
+    }, /*#__PURE__*/_react["default"].createElement(_box["default"], {
+      spacing: 4,
+      direction: "row",
+      wrap: true
+    }, item.icons.map(function (icon, idx) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: idx,
+        className: _indexModule["default"].iconli + " " + (selectedId === icon.id ? _indexModule["default"].selectedTag : ''),
+        onClick: function onClick() {
+          itemOnClick(icon);
+        },
+        title: icon.name
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: _indexModule["default"].iconImgWrapper
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        className: _indexModule["default"].iconImg,
+        alt: "",
+        src: icon.url,
+        size: "xxl"
+      })), /*#__PURE__*/_react["default"].createElement("span", {
+        className: _indexModule["default"].icontitle
+      }, icon.name));
+    })));
+  })));
+}
+
+var _default = PopUpContent;
+exports["default"] = _default;

package/lib/core/editor/components/Toolbar/widgets/Layout/components/LayoutSettings.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
+
+var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _LayoutTagImageSelect = _interopRequireDefault(require("./LayoutTagImageSelect"));
+
+var _LayoutSettingsModule = _interopRequireDefault(require("./LayoutSettings.module.scss"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var LAYOUTS = {
+  circular: '星型布局',
+  hierarchical: '均衡布局',
+  toward: '树形布局',
+  rectangle: '分层排布'
+};
+var TREE_LAYOUT_OPTIONS = [{
+  value: 'east',
+  label: '横向'
+}, {
+  value: 'south',
+  label: '纵向'
+}];
+
+var LayoutSettings = function LayoutSettings(props) {
+  var _props$layout = props.layout,
+      layout = _props$layout === void 0 ? {} : _props$layout,
+      onChange = props.onChange,
+      regionId = props.regionId,
+      size = props.size,
+      disabled = props.disabled;
+  var layoutId = layout.id,
+      layoutOptions = layout.options; // const [value, setValue] = useState();
+
+  var handleChange = function handleChange(data) {
+    onChange && onChange(data);
+  };
+
+  var onLayoutSelect = function onLayoutSelect(id) {
+    // console.log("onLayoutSelect", id, layout, value);
+    var options;
+
+    if (id === 'toward') {
+      options = {
+        subId: TREE_LAYOUT_OPTIONS[0].value
+      };
+    } // setValue(id);
+
+
+    handleChange({
+      id: id,
+      options: options
+    });
+  };
+
+  var layoutGroup = Object.keys(LAYOUTS).map(function (id) {
+    return {
+      id: id,
+      name: LAYOUTS[id],
+      icon: "layout_" + id,
+      selected: layoutId === id
+    };
+  });
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _LayoutSettingsModule["default"]['layout-setting-template-group']
+  }, /*#__PURE__*/_react["default"].createElement(_LayoutTagImageSelect["default"], {
+    dataSource: layoutGroup,
+    value: layoutId,
+    size: size,
+    disabled: disabled,
+    onChange: onLayoutSelect,
+    boxProps: {
+      spacing: 12,
+      className: _LayoutSettingsModule["default"].tagBox
+    },
+    tagProps: {
+      className: _LayoutSettingsModule["default"].tag,
+      style: {
+        background: '#FFF'
+      },
+      type: 'primary'
+    },
+    itemProps: {
+      className: _LayoutSettingsModule["default"].card,
+      iconClassName: _LayoutSettingsModule["default"].icon,
+      textClassName: _LayoutSettingsModule["default"].text
+    }
+  }), layoutId === 'toward' ? /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u5E03\u5C40\u65B9\u5411"
+  }, /*#__PURE__*/_react["default"].createElement(_radio["default"].Group, {
+    dataSource: TREE_LAYOUT_OPTIONS,
+    defaultValue: layoutOptions.subId || TREE_LAYOUT_OPTIONS[0].value,
+    onChange: function onChange(subId) {
+      return handleChange({
+        id: layoutId,
+        options: {
+          subId: subId
+        }
+      });
+    }
+  })) : null);
+};
+
+var _default = LayoutSettings;
+exports["default"] = _default;

package/lib/core/editor/components/Toolbar/widgets/Layout/components/LayoutSettings.module.scss

@@ -0,0 +1,70 @@
+@import "@alifd/next/variables";
+@import '@alifd/next/reset.scss';
+
+.label {
+  margin: 0 10px;
+}
+
+.tagBox {
+  color: #4D6277;
+
+
+  :global {
+    .checked {
+      // border: 2px solid $color-brand1-5 !important;
+      color: #4D6277 !important;
+      border-color: #fff !important;
+      background:#F2F7FD !important;
+    }
+  }
+}
+
+.tag {
+  // border: 2px solid $color-gitfill1-1 !important;
+  border-color: #fff !important;
+  color: #4D6277;
+
+  &:hover {
+    background-color: $color-brand1-1 !important;
+    border-color: #fff !important;
+    // border: 2px solid #FFFFFF;
+  }
+
+  &:active {
+    background-color: rgba(76, 137, 255, 0.1) !important;
+    border-color: #fff !important;
+    // border: 2px solid $color-brand1-5 !important;
+    color: $color-fill1-1;
+  }
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  width: 64px;
+  height: 76px;
+  border: none;
+  padding-top: 12px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $color-brand1-1;
+  }
+
+  &:active {
+    background-color: rgba(76, 137, 255, 0.1);
+  }
+}
+
+.icon {
+  width: 30px;
+}
+
+.text {
+  height: 12px;
+  line-height: 12px;
+  font-size: 12px;
+  margin-top: 8px;
+  color: $color-text1-3;
+  outline: none;
+}

package/lib/core/editor/components/Toolbar/widgets/Layout/components/LayoutTagImageSelect/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _LayoutTemplateButton = _interopRequireDefault(require("../LayoutTemplateButton"));
+
+var _LayoutTagSelect = _interopRequireDefault(require("../LayoutTagSelect"));
+
+var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+
+var _excluded = ["dataSource", "onChange", "size", "boxProps", "tagProps", "itemProps", "ItemComponent", "disabled", "value"];
+
+var TagImageSelect = function TagImageSelect(props) {
+  var dataSource = props.dataSource,
+      onChange = props.onChange,
+      size = props.size,
+      boxProps = props.boxProps,
+      tagProps = props.tagProps,
+      itemProps = props.itemProps,
+      ItemComponent = props.ItemComponent,
+      disabled = props.disabled,
+      value = props.value,
+      otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+  var Item = ItemComponent || _LayoutTemplateButton["default"];
+  return /*#__PURE__*/_react["default"].createElement(_LayoutTagSelect["default"], (0, _extends2["default"])({}, otherProps, {
+    onChange: onChange,
+    className: _indexModule["default"].tagSelect,
+    value: value,
+    disabled: disabled,
+    dataSource: dataSource.map(function (item) {
+      return {
+        key: item.id,
+        content: /*#__PURE__*/_react["default"].createElement(Item, (0, _extends2["default"])({
+          key: item.id
+        }, item, {
+          size: size
+        }, itemProps), item.name)
+      };
+    }),
+    boxProps: boxProps,
+    tagProps: tagProps
+  }));
+};
+
+var _default = TagImageSelect;
+exports["default"] = _default;

package/lib/core/editor/components/Toolbar/widgets/Layout/components/LayoutTagImageSelect/index.module.scss

@@ -0,0 +1,7 @@
+.name {
+  margin: 20px 0 0 10px;
+}
+
+.tagSelect {
+  border: none;
+}