@riil-frontend/component-topology 2.1.5-dev.3 → 2.1.9

package/es/components/ResourceList/ResourceSelectConnect.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["store"];
+import React, { useState, useEffect, useRef, useCallback, useImperativeHandle } from 'react';
+import { isAvailableArray } from "@riil-frontend/utils";
+import ResourceList from "./ResourceSelect";
+
+function ResourceSelectConnect(props, ref) {
+  var pageStore = props.store,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _pageStore$useModel = pageStore.useModel('ciModel'),
+      pageState = _pageStore$useModel[0],
+      pageDispatchers = _pageStore$useModel[1];
+
+  var typeDicts = pageState.typeDicts;
+  useEffect(function () {
+    if (!isAvailableArray(typeDicts)) {
+      pageDispatchers.getTypeDicts();
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(ResourceList, _extends({
+    ref: ref
+  }, otherProps, {
+    typeDicts: typeDicts
+  }));
+}
+
+export default /*#__PURE__*/React.forwardRef(ResourceSelectConnect);

package/es/components/ResourceList/index.js

@@ -1,203 +1,2 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useEffect, useImperativeHandle } from 'react';
-import _ from 'lodash';
-import { isAvailableArray } from '@riil-frontend/utils';
-import useNextFormTable from '@ahooksjs/next-form-table';
-import useFilterPlugin from '@ahooksjs/use-filter-plugin';
-import useSortablePlugin from '@ahooksjs/use-sortable-plugin';
-import useSelectionPlugin from '@riil-frontend/component-topology-utils/es/plugins/useSelectionPlugin';
-import { fetchCommonQuery } from '@riil-frontend/component-topology-utils/es/services/cmdb';
-import { getTitleCell } from '@riil-frontend/component-topology-utils/es/utils/table';
-import { DICT } from '@riil-frontend/component-topology-utils/es/utils/storage';
-import { formatDataForTable, getIp } from '../../utils/format';
-import RiilTable from '../FormTable';
-var PRIMARY_KEY = 'ciId';
-
-var getTableData = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(params) {
-    var _params$current, current, _params$pageSize, pageSize, _params$sortBy, sortBy, _params$sortOrder, sortOrder, like, typeCode, condition, ciType, data, dataSource;
-
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _params$current = params.current, current = _params$current === void 0 ? 1 : _params$current, _params$pageSize = params.pageSize, pageSize = _params$pageSize === void 0 ? 20 : _params$pageSize, _params$sortBy = params.sortBy, sortBy = _params$sortBy === void 0 ? 'displayName' : _params$sortBy, _params$sortOrder = params.sortOrder, sortOrder = _params$sortOrder === void 0 ? 'asc' : _params$sortOrder, like = params.like, typeCode = params.typeCode;
-            condition = 'category(\'resource\')';
-
-            if (like) {
-              condition = {
-                conditions: condition,
-                searchValue: like,
-                searchIndexArray: ['displayName', 'ipAddress']
-              };
-            }
-
-            if (typeCode) {
-              ciType = typeCode.split(',');
-
-              if (typeof condition === 'string') {
-                condition = {
-                  conditions: condition,
-                  ciType: ciType
-                };
-              } else {
-                condition.ciType = ciType;
-              }
-            }
-
-            _context.next = 6;
-            return fetchCommonQuery(condition, sortBy, sortOrder, current, pageSize, '', {
-              usingExtraConditions: false // 绕过权限过滤
-
-            });
-
-          case 6:
-            data = _context.sent;
-            dataSource = data.content && data.content.map(function (item) {
-              var _item$operation;
-
-              return {
-                ciId: item.id,
-                displayName: item.attributes.displayName,
-                ipAddress: item.attributes.ipAddress,
-                company: item.attributes.company,
-                typeCode: item.typeCode,
-                operation: (_item$operation = item.operation) !== null && _item$operation !== void 0 ? _item$operation : null // 权限字段
-
-              };
-            });
-            return _context.abrupt("return", formatDataForTable(dataSource, data.total, data.page, data.pageSize));
-
-          case 9:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  }));
-
-  return function getTableData(_x) {
-    return _ref.apply(this, arguments);
-  };
-}();
-
-var ResourceList = function ResourceList(props, ref) {
-  var pageStore = props.store;
-
-  var _pageStore$useModel = pageStore.useModel('ciModel'),
-      pageState = _pageStore$useModel[0],
-      pageDispatchers = _pageStore$useModel[1];
-
-  var typeDicts = pageState.typeDicts;
-  useEffect(function () {
-    if (!isAvailableArray(typeDicts)) {
-      pageDispatchers.getTypeDicts();
-    }
-  }, []);
-  var initialData = props.initialData,
-      selectionMode = props.selectionMode,
-      className = props.className,
-      children = props.children;
-  var _initialData$selected = initialData.selected,
-      selectedByMe = _initialData$selected === void 0 ? [] : _initialData$selected,
-      _initialData$total = initialData.total,
-      total = _initialData$total === void 0 ? selectedByMe : _initialData$total;
-
-  var disabledKeys = _.difference(total, selectedByMe);
-
-  var plugins = [useSortablePlugin({
-    resetWhenQuery: false,
-    defaultValue: {
-      displayName: 'asc'
-    }
-  }), useFilterPlugin(), useSelectionPlugin({
-    primaryKey: PRIMARY_KEY,
-    mode: selectionMode,
-    checkIsNeedReset: function checkIsNeedReset() {
-      return false;
-    },
-    checkIsDisabled: function checkIsDisabled(record) {
-      return disabledKeys.some(function (item) {
-        return item === record[PRIMARY_KEY];
-      });
-    }
-  })];
-
-  var _useNextFormTable = useNextFormTable(getTableData, {
-    plugins: plugins
-  }),
-      formProps = _useNextFormTable.formProps,
-      tableProps = _useNextFormTable.tableProps,
-      paginationProps = _useNextFormTable.paginationProps,
-      getSelectedRowKeys = _useNextFormTable.getSelectedRowKeys,
-      setSelectedRowKeys = _useNextFormTable.setSelectedRowKeys;
-
-  useEffect(function () {
-    if (setSelectedRowKeys) {
-      setSelectedRowKeys(selectedByMe);
-    }
-  }, [selectedByMe]);
-  var selectedKeys = getSelectedRowKeys && getSelectedRowKeys();
-  useImperativeHandle(ref, function () {
-    return {
-      getSelectedData: function getSelectedData() {
-        return selectedKeys;
-      }
-    };
-  });
-
-  if (selectedKeys) {
-    paginationProps.checkedLen = selectedKeys.length;
-  }
-
-  var filters = {
-    typeCode: typeDicts // company: [],
-
-  };
-  var columns = [{
-    title: '设备名称',
-    dataIndex: 'displayName',
-    sortable: true,
-    cell: getTitleCell
-  }, {
-    title: 'IP地址',
-    dataIndex: 'ipAddress',
-    sortable: true,
-    cell: function cell(ip) {
-      return getTitleCell(getIp(ip));
-    }
-  }, {
-    title: '类型',
-    dataIndex: 'typeCode',
-    filters: filters.typeCode,
-    cell: function cell(code) {
-      var dict = typeDicts && typeDicts.find(function (item) {
-        return item.value === code;
-      });
-      var name = dict && dict.label || code;
-      return getTitleCell(name);
-    }
-  }, {
-    title: '厂商',
-    sortable: true,
-    dataIndex: 'company',
-    cell: function cell(code) {
-      var dict = DICT.get(code);
-      var name = dict && dict.name || code;
-      return getTitleCell(name);
-    }
-  }];
-  return /*#__PURE__*/React.createElement(RiilTable, {
-    className: className,
-    formProps: formProps,
-    tableProps: tableProps,
-    paginationProps: paginationProps,
-    filters: filters,
-    columns: columns,
-    showChecked: !!selectionMode,
-    showPageSizeSelector: true
-  }, children);
-};
-
-export default /*#__PURE__*/React.forwardRef(ResourceList);
+import ResourceSelectConnect from './ResourceSelectConnect';
+export default ResourceSelectConnect;

package/es/components/ResourceSelect/DefaultResourceSelectDrawer.js

@@ -0,0 +1,5 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+export default function DefaultResourceSelectDrawer(props) {
+  return /*#__PURE__*/React.createElement("div", null);
+}
+;

package/es/components/ResourceSelect/ResourceSelectDrawer.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["visible", "setVisible", "onAdd", "getTableData", "onOk"];
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import ResourceTable from "../../common/components/ResourceTable/ResourceTable";
+import Drawer from "../Drawer";
+export default function ResourceSelectDrawer(props) {
+  var visible = props.visible,
+      setVisible = props.setVisible,
+      onAdd = props.onAdd,
+      getTableData = props.getTableData,
+      onOk = props.onOk,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var tableRef = useRef(); // TODO 默认处理
+
+  var defaultAddResource = function defaultAddResource() {
+    setVisible(false);
+  };
+
+  var handleOk = function handleOk() {
+    var selected = tableRef.current.getSelectedData();
+
+    if (onOk) {
+      onOk(selected);
+      return;
+    }
+
+    defaultAddResource(selected);
+  };
+
+  var onClose = function onClose() {
+    setVisible(false);
+  };
+
+  return /*#__PURE__*/React.createElement(Drawer, {
+    title: "\u6DFB\u52A0\u8D44\u6E90",
+    visible: visible,
+    onSave: handleOk,
+    onClose: onClose,
+    drawerProps: {
+      width: '840px'
+    }
+  }, /*#__PURE__*/React.createElement(ResourceTable, _extends({
+    ref: tableRef,
+    typeDicts: []
+  }, otherProps, {
+    getTableData: getTableData
+  })));
+}
+;

package/es/components/TopoView/settings/GroupNodeList/ResourceList.js

@@ -1,8 +1,6 @@
-import _Button from "@alifd/next/es/button";
 import _List from "@alifd/next/es/list";
 import _Avatar from "@alifd/next/es/avatar";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import SelectResource from './SelectResource';
 import styles from './ResourceList.module.scss';
 
 function ResourceList(props) {
@@ -26,25 +24,4 @@ function ResourceList(props) {
   }));
 }
 
-ResourceList.Select = function Select(props) {
-  var _useState = useState(false),
-      isSelectResource = _useState[0],
-      setIsSelectResource = _useState[1];
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, {
-    text: true,
-    type: "primary",
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      setIsSelectResource(true);
-    }
-  }, "\u9009\u62E9"), /*#__PURE__*/React.createElement(SelectResource // mode="single"
-  , {
-    visible: isSelectResource,
-    onVisibleChange: function onVisibleChange(visible) {
-      return setIsSelectResource(visible);
-    }
-  }));
-};
-
 export default ResourceList;

package/es/components/TopoView/settings/GroupNodeList/ResourceSelectButton.js

@@ -0,0 +1,37 @@
+import _Button from "@alifd/next/es/button";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import ResourceSelectDrawer from "../../../ResourceSelect/ResourceSelectDrawer";
+export default function ResourceSelectButton(props) {
+  var topo = props.topo,
+      layer = props.layer,
+      resourceSelectComponent = props.resourceSelectComponent,
+      onAdd = props.onAdd;
+
+  var _useState = useState(false),
+      isSelectResource = _useState[0],
+      setIsSelectResource = _useState[1];
+
+  var ResourceSelectComponent = resourceSelectComponent || ResourceSelectDrawer; // const ResourceSelectComponent = ResourceSelectDrawer;
+  // TODO
+
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement(_Button, {
+    text: true,
+    type: "primary",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      setIsSelectResource(true);
+    }
+  }, "\u9009\u62E9"), /*#__PURE__*/React.createElement(ResourceSelectComponent, {
+    layer: layer,
+    visible: isSelectResource,
+    setVisible: setIsSelectResource,
+    topo: topo,
+    existedIds: [],
+    onAdd: onAdd
+  }));
+}
+;

package/es/components/TopoView/settings/LayerSettingsForm.js

@@ -8,11 +8,9 @@ import _Select from "@alifd/next/es/select";
 import _Grid from "@alifd/next/es/grid";
 import _Form from "@alifd/next/es/form";
 import React, { useState, useEffect } from 'react';
-import isEqual from 'lodash/isEqual';
 import ColorPicker from '../../edit/LinkDynamicStyleSettingDrawer/rule/ColorPicker';
-import styles from '../../edit/LinkDynamicStyleSettingDrawer/rule/RuleStyle.module.scss';
-import ResourceList from './GroupNodeList/ResourceList';
 import GroupNodeList from "./GroupNodeList/GroupNodeList";
+import ResourceSelectButton from "./GroupNodeList/ResourceSelectButton";
 var FormItem = _Form.Item;
 var Row = _Grid.Row,
     Col = _Grid.Col;
@@ -80,7 +78,8 @@ function parseValues(values) {
 export default function LayerSettingsForm(props) {
   var topo = props.topo,
       values = props.values,
-      _onChange = props.onChange;
+      _onChange = props.onChange,
+      editorProps = props.editorProps;
 
   var field = _Field.useField({
     autoUnmount: false,
@@ -121,7 +120,14 @@ export default function LayerSettingsForm(props) {
         style: {
           flex: 1
         }
-      }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/React.createElement(ResourceList.Select, null))
+      }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/React.createElement(ResourceSelectButton, {
+        topo: topo,
+        layer: values,
+        onAdd: function onAdd() {
+          /*TODO 刷新列表 refreshList*/
+        },
+        resourceSelectComponent: editorProps === null || editorProps === void 0 ? void 0 : editorProps.layerResourceSelectComponent
+      }))
     }, /*#__PURE__*/React.createElement(GroupNodeList, {
       topo: topo,
       group: values

package/es/components/TopoView/settings/Settings.js

@@ -4,16 +4,22 @@ import SettingsForm from './SettingsForm';
 import LayerSettingsForm from './LayerSettingsForm';
 import styles from './Settings.module.scss';
 export default function Settings(props) {
+  var _selection$;
+
   var topo = props.topo,
-      selection = props.selection;
+      selection = props.selection,
+      editorProps = props.editorProps;
   var size = selection.length;
+  var selectionIds = selection.map(function (item) {
+    return item.id;
+  }).join(',');
   useEffect(function () {// const selectionModel = topo.getSelectionModel();
     // console.info('selection change', selection)
   }, [selection]);
   var attrTypes = ['attrObject', 'position', 'styleMap'];
   var updateElementProperty = useCallback(function (name, value) {
-    // console.info('updateElementProperty', name, value)
-    var element = topo.getDataModel().getDataById(selection[0].id);
+    // const element = topo.getDataModel().getDataById(selection[0].id);
+    var element = topo.getSelectionModel().getFirstData(); // console.info('updateElementProperty', {selection, element, name, value});
 
     if (name.startsWith('attrObject.')) {
       element.setAttr(name.replace('attrObject.', ''), value);
@@ -22,7 +28,7 @@ export default function Settings(props) {
     } else if (name.startsWith('styleMap.')) {
       element.setStyle(name.replace('styleMap.', ''), value);
     }
-  }, [selection]);
+  }, [(_selection$ = selection[0]) === null || _selection$ === void 0 ? void 0 : _selection$.id]);
 
   if (!size) {
     // 未选择元素
@@ -65,8 +71,10 @@ export default function Settings(props) {
     className: styles.settings
   }, /*#__PURE__*/React.createElement(Component, {
     topo: topo,
+    selection: selection,
     values: values,
-    onChange: updateElementProperty
+    onChange: updateElementProperty,
+    editorProps: editorProps
   })));
 }
 ;

package/es/components/TopoView/topoView.js

@@ -214,7 +214,8 @@ var TopoView = function TopoView(props) {
     }
   }), isEditMode && /*#__PURE__*/React.createElement(Settings, {
     topo: topoApp,
-    selection: selection
+    selection: selection,
+    editorProps: props.editorProps
   })), /*#__PURE__*/React.createElement(SingleResDrawer, {
     visible: showSingleResDrawer,
     loading: topoLoading,