@nocobase/plugin-graph-collection-manager 0.10.0-alpha.2 → 0.10.0-alpha.4

package/lib/client/GraphDrawPage.js

@@ -298,9 +298,6 @@ function getEdges(edges) {
     }
   });
 }
-const getPopupContainer = () => {
-  return document.getElementById('graph_container');
-};
 const CollapsedContext = (0, _react2().createContext)({});
 const formatNodeData = () => {
   const layoutNodes = [];
@@ -1211,9 +1208,7 @@ const GraphDrawPage = _react2().default.memo(() => {
   }, _react2().default.createElement(_client().SchemaComponent, {
     components: {
       Select: props => _react2().default.createElement(_client().Select, _objectSpread(_objectSpread({}, props), {}, {
-        getPopupContainer: () => {
-          return document.getElementById('graph_container');
-        }
+        getPopupContainer: _utils.getPopupContainer
       })),
       AddCollectionAction: _AddCollectionAction.AddCollectionAction
     },
@@ -1268,7 +1263,7 @@ const GraphDrawPage = _react2().default.memo(() => {
                         toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
                       return _react2().default.createElement(_antd().Tooltip, {
                         title: t('Full Screen'),
-                        getPopupContainer: getPopupContainer
+                        getPopupContainer: _utils.getPopupContainer
                       }, _react2().default.createElement(_antd().Button, {
                         onClick: () => {
                           toggleFullscreen();
@@ -1284,7 +1279,7 @@ const GraphDrawPage = _react2().default.memo(() => {
                 },
                 collectionList: {
                   type: 'void',
-                  'x-component': () => {
+                  'x-component': function Com() {
                     const _useContext = (0, _react2().useContext)(CollapsedContext),
                       handleSearchCollection = _useContext.handleSearchCollection,
                       collectionList = _useContext.collectionList;
@@ -1312,28 +1307,32 @@ const GraphDrawPage = _react2().default.memo(() => {
                         maxHeight: '70vh',
                         overflowY: 'auto',
                         border: 'none'
-                      }
-                    }, _react2().default.createElement(_antd().Menu.Divider, null), collectionList.map(v => {
-                      return _react2().default.createElement(_antd().Menu.Item, {
-                        key: v.name,
-                        onClick: e => {
-                          if (e.key !== selectedKeys[0]) {
-                            setSelectKey([e.key]);
-                            handleFiterCollections(e.key);
-                          } else {
-                            targetGraph.filterConfig = null;
-                            handleFiterCollections(false);
-                            setSelectKey([]);
+                      },
+                      items: [{
+                        type: 'divider'
+                      }, ...collectionList.map(v => {
+                        return {
+                          key: v.name,
+                          label: compile(v.title),
+                          onClick: e => {
+                            if (e.key !== selectedKeys[0]) {
+                              setSelectKey([e.key]);
+                              handleFiterCollections(e.key);
+                            } else {
+                              targetGraph.filterConfig = null;
+                              handleFiterCollections(false);
+                              setSelectKey([]);
+                            }
                           }
-                        }
-                      }, _react2().default.createElement("span", null, compile(v.title)));
-                    })));
+                        };
+                      })]
+                    }));
                     return _react2().default.createElement(_antd().Popover, {
                       content: content,
                       autoAdjustOverflow: true,
                       placement: "bottomRight",
                       trigger: ['click'],
-                      getPopupContainer: getPopupContainer,
+                      getPopupContainer: _utils.getPopupContainer,
                       overlayClassName: (0, _css().css)`
                                       .ant-popover-inner-content {
                                         padding: 0;
@@ -1357,7 +1356,7 @@ const GraphDrawPage = _react2().default.memo(() => {
                     component: (0, _react2().forwardRef)(() => {
                       return _react2().default.createElement(_antd().Tooltip, {
                         title: t('Auto layout'),
-                        getPopupContainer: getPopupContainer
+                        getPopupContainer: _utils.getPopupContainer
                       }, _react2().default.createElement(_antd().Button, {
                         onClick: () => {
                           handelResetLayout();
@@ -1397,25 +1396,29 @@ const GraphDrawPage = _react2().default.memo(() => {
                         maxHeight: '70vh',
                         overflowY: 'auto',
                         border: 'none'
-                      }
-                    }, _react2().default.createElement(_antd().Menu.Divider, null), menuItems.map(v => {
-                      return _react2().default.createElement(_antd().Menu.Item, {
-                        key: v.key,
-                        onClick: e => {
-                          targetGraph.connectionType = v.key;
-                          const _targetGraph8 = targetGraph,
-                            filterConfig = _targetGraph8.filterConfig;
-                          filterConfig && handleFiterCollections(filterConfig.key);
-                          handleSetRelationshipType(v.key);
-                        }
-                      }, _react2().default.createElement("span", null, t(v.label)));
-                    })));
+                      },
+                      items: [{
+                        type: 'divider'
+                      }, ...menuItems.map(v => {
+                        return {
+                          key: v.key,
+                          label: t(v.label),
+                          onClick: e => {
+                            targetGraph.connectionType = v.key;
+                            const _targetGraph8 = targetGraph,
+                              filterConfig = _targetGraph8.filterConfig;
+                            filterConfig && handleFiterCollections(filterConfig.key);
+                            handleSetRelationshipType(v.key);
+                          }
+                        };
+                      })]
+                    }));
                     return _react2().default.createElement(_antd().Popover, {
                       content: content,
                       autoAdjustOverflow: true,
                       placement: "bottomRight",
                       trigger: ['click'],
-                      getPopupContainer: getPopupContainer,
+                      getPopupContainer: _utils.getPopupContainer,
                       overlayClassName: (0, _css().css)`
                                       .ant-popover-inner-content {
                                         padding: 0;
@@ -1458,26 +1461,30 @@ const GraphDrawPage = _react2().default.memo(() => {
                         maxHeight: '70vh',
                         overflowY: 'auto',
                         border: 'none'
-                      }
-                    }, _react2().default.createElement(_antd().Menu.Divider, null), menuItems.map(v => {
-                      return _react2().default.createElement(_antd().Menu.Item, {
-                        key: v.key,
-                        onClick: e => {
-                          targetGraph.direction = v.key;
-                          const _targetGraph9 = targetGraph,
-                            filterConfig = _targetGraph9.filterConfig;
-                          if (filterConfig) {
-                            handleFiterCollections(filterConfig.key);
+                      },
+                      items: [{
+                        type: 'divider'
+                      }, ...menuItems.map(v => {
+                        return {
+                          key: v.key,
+                          label: t(v.label),
+                          onClick: e => {
+                            targetGraph.direction = v.key;
+                            const _targetGraph9 = targetGraph,
+                              filterConfig = _targetGraph9.filterConfig;
+                            if (filterConfig) {
+                              handleFiterCollections(filterConfig.key);
+                            }
                           }
-                        }
-                      }, _react2().default.createElement("span", null, t(v.label)));
-                    })));
+                        };
+                      })]
+                    }));
                     return _react2().default.createElement(_antd().Popover, {
                       content: content,
                       autoAdjustOverflow: true,
                       placement: "bottomRight",
                       trigger: ['click'],
-                      getPopupContainer: getPopupContainer,
+                      getPopupContainer: _utils.getPopupContainer,
                       overlayClassName: (0, _css().css)`
                                       .ant-popover-inner-content {
                                         padding: 0;

package/lib/client/components/AddCollectionAction.js

@@ -18,21 +18,22 @@ function _client() {
   };
   return data;
 }
-function _react() {
-  const data = _interopRequireDefault(require("react"));
-  _react = function _react() {
+function _antd() {
+  const data = require("antd");
+  _antd = function _antd() {
     return data;
   };
   return data;
 }
-function _antd() {
-  const data = require("antd");
-  _antd = function _antd() {
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function _react() {
     return data;
   };
   return data;
 }
 var _actionHooks = require("../action-hooks");
+var _utils = require("../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const AddCollectionAction = ({
   item: record
@@ -49,7 +50,7 @@ const AddCollectionAction = ({
     scope: {
       useCancelAction: _actionHooks.useCancelAction
     },
-    getContainer: () => document.getElementById('graph_container')
+    getContainer: _utils.getPopupContainer
   }, _react().default.createElement(_antd().Button, {
     type: "primary"
   }, _react().default.createElement(_icons().PlusOutlined, null)));

package/lib/client/components/AddFieldAction.js

@@ -26,6 +26,7 @@ function _react() {
   return data;
 }
 var _actionHooks = require("../action-hooks");
+var _utils = require("../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -57,7 +58,7 @@ const AddFieldAction = ({
       useCancelAction: _actionHooks.useCancelAction,
       useCreateCollectionField: () => _useCreateCollectionField(record)
     },
-    getContainer: () => document.getElementById('graph_container')
+    getContainer: _utils.getPopupContainer
   }, _react().default.createElement(_icons().PlusOutlined, {
     className: "btn-add",
     id: "graph_btn_add_field"

package/lib/client/components/EditCollectionAction.js

@@ -11,6 +11,13 @@ function _icons() {
   };
   return data;
 }
+function _css() {
+  const data = require("@emotion/css");
+  _css = function _css() {
+    return data;
+  };
+  return data;
+}
 function _client() {
   const data = require("@nocobase/client");
   _client = function _client() {
@@ -25,14 +32,8 @@ function _react() {
   };
   return data;
 }
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
-    return data;
-  };
-  return data;
-}
 var _actionHooks = require("../action-hooks");
+var _utils = require("../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const EditCollectionAction = ({
   item: record
@@ -44,7 +45,7 @@ const EditCollectionAction = ({
       useUpdateCollectionActionAndRefreshCM: _actionHooks.useUpdateCollectionActionAndRefreshCM,
       createOnly: false
     },
-    getContainer: () => document.getElementById('graph_container')
+    getContainer: _utils.getPopupContainer
   }, _react().default.createElement(_icons().EditOutlined, {
     className: (0, _css().css)`
           border-color: transparent;

package/lib/client/components/EditFieldAction.js

@@ -26,6 +26,7 @@ function _react() {
   return data;
 }
 var _actionHooks = require("../action-hooks");
+var _utils = require("../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -54,7 +55,7 @@ const EditFieldAction = ({
       useCancelAction: _actionHooks.useCancelAction,
       useUpdateCollectionField: () => _useUpdateCollectionField(record)
     },
-    getContainer: () => document.getElementById('graph_container')
+    getContainer: _utils.getPopupContainer
   }, _react().default.createElement(_icons().EditOutlined, {
     className: "btn-edit"
   }));

package/lib/client/components/Entity.js

@@ -214,9 +214,7 @@ const Entity = props => {
                           `,
             confirm: {
               title: "{{t('Delete record')}}",
-              getContainer: () => {
-                return document.getElementById('graph_container');
-              },
+              getContainer: _utils.getPopupContainer,
               collectionConten: "{{t('Are you sure you want to delete it?')}}"
             },
             useAction: () => (0, _actionHooks.useDestroyActionAndRefreshCM)({
@@ -306,9 +304,7 @@ const PortsCom = _react().default.memo(({
         Form: _client().Form,
         ResourceActionProvider: _client().ResourceActionProvider,
         Select: props => _react().default.createElement(_client().Select, _objectSpread(_objectSpread({}, props), {}, {
-          getPopupContainer: () => {
-            return document.getElementById('graph_container');
-          }
+          getPopupContainer: _utils.getPopupContainer
         })),
         Checkbox: _client().Checkbox,
         Radio: _client().Radio,
@@ -388,9 +384,7 @@ const PortsCom = _react().default.memo(({
                       `,
               confirm: {
                 title: "{{t('Delete record')}}",
-                getContainer: () => {
-                  return document.getElementById('graph_container');
-                },
+                getContainer: _utils.getPopupContainer,
                 collectionConten: "{{t('Are you sure you want to delete it?')}}"
               },
               useAction: () => (0, _actionHooks.useDestroyFieldActionAndRefreshCM)({
@@ -460,9 +454,7 @@ const PortsCom = _react().default.memo(({
     var _property$uiSchema, _getInterface, _property$uiSchema2, _getInterface2;
     return property.uiSchema && _react().default.createElement(_antd().Popover, {
       content: CollectionConten(property),
-      getPopupContainer: () => {
-        return document.getElementById('graph_container');
-      },
+      getPopupContainer: _utils.getPopupContainer,
       mouseLeaveDelay: 0,
       zIndex: 100,
       title: _react().default.createElement("div", null, compile((_property$uiSchema = property.uiSchema) === null || _property$uiSchema === void 0 ? void 0 : _property$uiSchema.title), _react().default.createElement("span", {
@@ -495,9 +487,7 @@ const PortsCom = _react().default.memo(({
     var _property$uiSchema3, _getInterface3, _property$uiSchema4, _getInterface4;
     return property.uiSchema && _react().default.createElement(_antd().Popover, {
       content: CollectionConten(property),
-      getPopupContainer: () => {
-        return document.getElementById('graph_container');
-      },
+      getPopupContainer: _utils.getPopupContainer,
       mouseLeaveDelay: 0,
       zIndex: 100,
       title: _react().default.createElement("div", null, compile((_property$uiSchema3 = property.uiSchema) === null || _property$uiSchema3 === void 0 ? void 0 : _property$uiSchema3.title), _react().default.createElement("span", {

package/lib/client/components/OverrideFieldAction.js

@@ -26,6 +26,7 @@ function _react() {
   return data;
 }
 var _actionHooks = require("../action-hooks");
+var _utils = require("../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -55,7 +56,7 @@ const OverrideFieldAction = ({
       useCancelAction: _actionHooks.useCancelAction,
       useOverridingCollectionField: () => _useOverridingCollectionField(record)
     },
-    getContainer: () => document.getElementById('graph_container')
+    getContainer: _utils.getPopupContainer
   }, _react().default.createElement(_icons().CopyOutlined, {
     className: "btn-override"
   }));

package/lib/client/components/ViewFieldAction.js

@@ -25,6 +25,7 @@ function _react() {
   };
   return data;
 }
+var _utils = require("../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -36,7 +37,7 @@ const ViewFieldAction = ({
 }) => {
   return _react().default.createElement(_client().ViewFieldAction, {
     item: _objectSpread({}, record),
-    getContainer: () => document.getElementById('graph_container')
+    getContainer: _utils.getPopupContainer
   }, _react().default.createElement(_icons().EyeOutlined, {
     className: "btn-view"
   }));

package/lib/client/utils.d.ts

@@ -10,3 +10,8 @@ export declare const formatPortData: (ports: any) => import("lodash").Dictionary
 export declare const formatInheritEdgeData: (collections: any) => any[];
 export declare const getDiffNode: (newNodes: any, oldNodes: any) => any[];
 export declare const getDiffEdge: (newEdges: any, oldEdges: any) => any[];
+/**
+ * 所有的 getPopupContainer 都需要保证返回的是唯一的 div。React 18 concurrent 下会反复调用该方法
+ * 参考：https://ant.design/docs/react/migration-v5-cn#%E5%8D%87%E7%BA%A7%E5%87%86%E5%A4%87
+ */
+export declare const getPopupContainer: () => any;

package/lib/client/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGCMTranslation = exports.getInheritCollections = exports.getDiffNode = exports.getDiffEdge = exports.getChildrenCollections = exports.formatPortData = exports.formatInheritEdgeData = exports.formatData = void 0;
+exports.useGCMTranslation = exports.getPopupContainer = exports.getInheritCollections = exports.getDiffNode = exports.getDiffEdge = exports.getChildrenCollections = exports.formatPortData = exports.formatInheritEdgeData = exports.formatData = void 0;
 function _lodash() {
   const data = require("lodash");
   _lodash = function _lodash() {
@@ -521,4 +521,16 @@ const getDiffEdge = (newEdges, oldEdges) => {
   }
   return edges;
 };
-exports.getDiffEdge = getDiffEdge;
+exports.getDiffEdge = getDiffEdge;
+let graphContainer;
+/**
+ * 所有的 getPopupContainer 都需要保证返回的是唯一的 div。React 18 concurrent 下会反复调用该方法
+ * 参考：https://ant.design/docs/react/migration-v5-cn#%E5%8D%87%E7%BA%A7%E5%87%86%E5%A4%87
+ */
+const getPopupContainer = () => {
+  if (graphContainer) {
+    return graphContainer;
+  }
+  return graphContainer = document.getElementById('graph_container');
+};
+exports.getPopupContainer = getPopupContainer;

package/package.json

@@ -4,7 +4,7 @@
   "displayName.zh-CN": "数据库可视化管理",
   "description": "database collection manage",
   "description.zh-CN": "数据库管理。",
-  "version": "0.10.0-alpha.2",
+  "version": "0.10.0-alpha.4",
   "license": "AGPL-3.0",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -14,8 +14,8 @@
     "dagre": "^0.8.5"
   },
   "devDependencies": {
-    "@nocobase/client": "0.10.0-alpha.2",
-    "@nocobase/test": "0.10.0-alpha.2"
+    "@nocobase/client": "0.10.0-alpha.4",
+    "@nocobase/test": "0.10.0-alpha.4"
   },
-  "gitHead": "85028ae1733fcbd46ecd5d291dacbdc175f7f073"
+  "gitHead": "62dacadb2a83d30cb36dda9074f2f3a072a37484"
 }