@nocobase/plugin-charts 0.10.0-alpha.2 → 0.10.0-alpha.3

package/lib/client/ChartQueryBlockInitializer.js

@@ -32,6 +32,13 @@ function _client() {
   };
   return data;
 }
+function _client2() {
+  const data = require("@nocobase/utils/client");
+  _client2 = function _client2() {
+    return data;
+  };
+  return data;
+}
 function _react2() {
   const data = _interopRequireWildcard(require("react"));
   _react2 = function _react2() {
@@ -52,20 +59,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const ChartQueryBlockInitializer = props => {
-  const defaultItems = [{
-    type: 'itemGroup',
-    title: (0, _locale.lang)('Select query data'),
-    children: []
-  }];
   const templateWrap = props.templateWrap,
     onCreateBlockSchema = props.onCreateBlockSchema,
     componentType = props.componentType,
@@ -74,14 +70,10 @@ const ChartQueryBlockInitializer = props => {
     others = _objectWithoutProperties(props, _excluded);
   const _useContext = (0, _react2().useContext)(_client().SchemaInitializerButtonContext),
     setVisible = _useContext.setVisible;
-  const _useState = (0, _react2().useState)(defaultItems),
-    _useState2 = _slicedToArray(_useState, 2),
-    items = _useState2[0],
-    setItems = _useState2[1];
   const apiClient = (0, _client().useAPIClient)();
   const ctx = (0, _ChartQueryMetadataProvider.useChartQueryMetadataContext)();
   const options = (0, _react2().useContext)(_react().SchemaOptionsContext);
-  const onAddQuery = info => {
+  const onAddQuery = (0, _react2().useCallback)(info => {
     (0, _antd().FormDialog)({
       sql: (0, _locale.lang)('Add SQL query'),
       json: (0, _locale.lang)('Add JSON query')
@@ -112,37 +104,50 @@ const ChartQueryBlockInitializer = props => {
     }).then( /*#__PURE__*/function () {
       var _ref = _asyncToGenerator(function* (values) {
         try {
-          var _apiClient$resource, _apiClient$resource$c;
-          const _yield$apiClient$reso = yield (_apiClient$resource = apiClient.resource('chartsQueries')) === null || _apiClient$resource === void 0 ? void 0 : (_apiClient$resource$c = _apiClient$resource.create) === null || _apiClient$resource$c === void 0 ? void 0 : _apiClient$resource$c.call(_apiClient$resource, {
-              values
-            }),
-            data = _yield$apiClient$reso.data;
-          const items = yield ctx.refresh();
-          const item = items.find(item => {
-            var _data$data;
-            return item.id === (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.id);
-          });
-          onCreateBlockSchema({
-            item
-          });
+          var _apiClient$resource;
+          if ((_apiClient$resource = apiClient.resource('chartsQueries')) === null || _apiClient$resource === void 0 ? void 0 : _apiClient$resource.create) {
+            const _yield$apiClient$reso = yield apiClient.resource('chartsQueries').create({
+                values
+              }),
+              data = _yield$apiClient$reso.data;
+            const items = yield ctx.refresh();
+            const item = items.find(item => {
+              var _data$data;
+              return item.id === (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.id);
+            });
+            onCreateBlockSchema({
+              item
+            });
+          }
           setVisible(false);
-        } catch (error) {}
+        } catch (err) {
+          (0, _client2().error)(err);
+        }
       });
-      return function (_x2) {
+      return function (_x) {
         return _ref.apply(this, arguments);
       };
-    }()).catch(() => {});
-  };
-  (0, _react2().useEffect)(() => {
+    }()).catch(err => {
+      (0, _client2().error)(err);
+    });
+  }, [apiClient, ctx, onCreateBlockSchema, options.components, options.scope, setVisible]);
+  const items = (0, _react2().useMemo)(() => {
+    const defaultItems = [{
+      type: 'itemGroup',
+      title: (0, _locale.lang)('Select query data'),
+      children: []
+    }];
     const chartQueryMetadata = ctx.data;
     if (chartQueryMetadata && Array.isArray(chartQueryMetadata)) {
-      setItems([chartQueryMetadata.length > 0 ? {
+      const item1 = chartQueryMetadata.length > 0 ? {
         type: 'itemGroup',
         title: '{{t("Select chart query", {ns: "charts"})}}',
         children: chartQueryMetadata
-      } : null, chartQueryMetadata.length > 0 ? {
+      } : null;
+      const item2 = chartQueryMetadata.length > 0 ? {
         type: 'divider'
-      } : null,, {
+      } : null;
+      return [item1, item2, {
         type: 'subMenu',
         title: (0, _locale.lang)('Add chart query'),
         // component: AddChartQuery,
@@ -157,9 +162,10 @@ const ChartQueryBlockInitializer = props => {
           title: 'JSON',
           onClick: onAddQuery
         }]
-      }].filter(Boolean));
+      }].filter(Boolean);
     }
-  }, []);
+    return defaultItems;
+  }, [ctx.data, onAddQuery]);
   return _react2().default.createElement(_client().SchemaInitializer.Item, _objectSpread(_objectSpread({
     icon: _react2().default.createElement(_icons().TableOutlined, null)
   }, others), {}, {
@@ -172,7 +178,7 @@ const ChartQueryBlockInitializer = props => {
         });
         setVisible(false);
       });
-      function onClick(_x3) {
+      function onClick(_x2) {
         return _onClick.apply(this, arguments);
       }
       return onClick;

package/lib/client/settings/AddNewQuery.js

@@ -54,8 +54,8 @@ function _react2() {
   return data;
 }
 var _ChartQueryMetadataProvider = require("../ChartQueryMetadataProvider");
-var _queryTypes = require("./queryTypes");
 var _locale = require("../locale");
+var _queryTypes = require("./queryTypes");
 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; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -188,36 +188,44 @@ const AddNewQuery = () => {
     schema = _useState4[0],
     setSchema = _useState4[1];
   const form = (0, _react2().useMemo)(() => (0, _core().createForm)(), []);
-  const menu = _react2().default.createElement(_antd().Menu, {
-    onClick: info => {
-      setVisible(true);
-      form.setValues({
-        type: info.key
-      });
-      setSchema(getSchema({
-        type: info.key
+  const menu = (0, _react2().useMemo)(() => {
+    return {
+      onClick: info => {
+        setVisible(true);
+        form.setValues({
+          type: info.key
+        });
+        setSchema(getSchema({
+          type: info.key
+        }, {
+          form,
+          isNewRecord: true
+        }));
+      },
+      items: [{
+        key: 'json',
+        label: 'JSON'
       }, {
-        form,
-        isNewRecord: true
-      }));
-    }
-  }, _react2().default.createElement(_antd().Menu.Item, {
-    key: 'json'
-  }, "JSON"), _react2().default.createElement(_antd().Menu.Item, {
-    key: 'sql'
-  }, "SQL"), _react2().default.createElement(_antd().Menu.Item, {
-    disabled: true,
-    key: 'api'
-  }, "API"), _react2().default.createElement(_antd().Menu.Item, {
-    disabled: true
-  }, "Collection"));
+        key: 'sql',
+        label: 'SQL'
+      }, {
+        key: 'api',
+        label: 'API',
+        disabled: true
+      }, {
+        key: 'collection',
+        label: 'Collection',
+        disabled: true
+      }]
+    };
+  }, [form]);
   return _react2().default.createElement(_client().ActionContextProvider, {
     value: {
       visible,
       setVisible
     }
   }, _react2().default.createElement(_antd().Dropdown, {
-    overlay: menu
+    menu: menu
   }, _react2().default.createElement(_antd().Button, {
     icon: _react2().default.createElement(_icons().PlusOutlined, null),
     type: 'primary'

package/package.json

@@ -4,15 +4,15 @@
   "displayName.zh-CN": "图表",
   "description": "Out-of-the-box, feature-rich chart plugins.",
   "description.zh-CN": "开箱即用、丰富的报表。",
-  "version": "0.10.0-alpha.2",
+  "version": "0.10.0-alpha.3",
   "main": "lib/server/index.js",
   "devDependencies": {
-    "@nocobase/client": "0.10.0-alpha.2",
-    "@nocobase/server": "0.10.0-alpha.2",
-    "@nocobase/test": "0.10.0-alpha.2"
+    "@nocobase/client": "0.10.0-alpha.3",
+    "@nocobase/server": "0.10.0-alpha.3",
+    "@nocobase/test": "0.10.0-alpha.3"
   },
   "dependencies": {
     "json5": "^2.2.3"
   },
-  "gitHead": "85028ae1733fcbd46ecd5d291dacbdc175f7f073"
+  "gitHead": "1f0b27fc9ab2398cd41c308a6b01a986e025cd20"
 }

package/src/client/ChartQueryBlockInitializer.tsx

@@ -8,7 +8,8 @@ import {
   SchemaInitializerButtonContext,
   useAPIClient,
 } from '@nocobase/client';
-import React, { useContext, useEffect, useState } from 'react';
+import { error } from '@nocobase/utils/client';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { useChartQueryMetadataContext } from './ChartQueryMetadataProvider';
 import { lang } from './locale';
 import { getQueryTypeSchema } from './settings/queryTypes';
@@ -21,107 +22,121 @@ export interface ChartQueryMetadata {
 }
 
 export const ChartQueryBlockInitializer = (props) => {
-  const defaultItems: any = [
-    {
-      type: 'itemGroup',
-      title: lang('Select query data'),
-      children: [],
-    },
-  ];
   const { templateWrap, onCreateBlockSchema, componentType, createBlockSchema, insert, ...others } = props;
   const { setVisible } = useContext(SchemaInitializerButtonContext);
-  const [items, setItems] = useState(defaultItems);
   const apiClient = useAPIClient();
   const ctx = useChartQueryMetadataContext();
   const options = useContext(SchemaOptionsContext);
-  const onAddQuery = (info) => {
-    FormDialog(
-      {
-        sql: lang('Add SQL query'),
-        json: lang('Add JSON query'),
-      }[info.key],
-      () => {
-        return (
-          <div>
-            <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
-              <FormLayout layout={'vertical'}>
-                <SchemaComponent
-                  schema={{
-                    type: 'object',
-                    properties: {
-                      title: {
-                        title: lang('Title'),
-                        required: true,
-                        'x-component': 'Input',
-                        'x-decorator': 'FormItem',
+  const onAddQuery = useCallback(
+    (info) => {
+      FormDialog(
+        {
+          sql: lang('Add SQL query'),
+          json: lang('Add JSON query'),
+        }[info.key],
+        () => {
+          return (
+            <div>
+              <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
+                <FormLayout layout={'vertical'}>
+                  <SchemaComponent
+                    schema={{
+                      type: 'object',
+                      properties: {
+                        title: {
+                          title: lang('Title'),
+                          required: true,
+                          'x-component': 'Input',
+                          'x-decorator': 'FormItem',
+                        },
+                        options: getQueryTypeSchema(info.key),
                       },
-                      options: getQueryTypeSchema(info.key),
-                    },
-                  }}
-                />
-              </FormLayout>
-            </SchemaComponentOptions>
-          </div>
-        );
-      },
-    )
-      .open({
-        initialValues: {
-          type: info.key,
+                    }}
+                  />
+                </FormLayout>
+              </SchemaComponentOptions>
+            </div>
+          );
         },
-      })
-      .then(async (values) => {
-        try {
-          const { data } = await apiClient.resource('chartsQueries')?.create?.({ values });
-          const items = (await ctx.refresh()) as any;
-          const item = items.find((item) => item.id === data?.data?.id);
-          onCreateBlockSchema({ item });
-          setVisible(false);
-        } catch (error) {}
-      })
-      .catch(() => {});
-  };
-  useEffect(() => {
+      )
+        .open({
+          initialValues: {
+            type: info.key,
+          },
+        })
+        .then(async (values) => {
+          try {
+            if (apiClient.resource('chartsQueries')?.create) {
+              const { data } = await apiClient.resource('chartsQueries').create({ values });
+              const items = (await ctx.refresh()) as any;
+              const item = items.find((item) => item.id === data?.data?.id);
+              onCreateBlockSchema({ item });
+            }
+            setVisible(false);
+          } catch (err) {
+            error(err);
+          }
+        })
+        .catch((err) => {
+          error(err);
+        });
+    },
+    [apiClient, ctx, onCreateBlockSchema, options.components, options.scope, setVisible],
+  );
+
+  const items = useMemo(() => {
+    const defaultItems: any = [
+      {
+        type: 'itemGroup',
+        title: lang('Select query data'),
+        children: [],
+      },
+    ];
     const chartQueryMetadata = ctx.data;
     if (chartQueryMetadata && Array.isArray(chartQueryMetadata)) {
-      setItems(
-        [
-          chartQueryMetadata.length > 0
-            ? {
-                type: 'itemGroup',
-                title: '{{t("Select chart query", {ns: "charts"})}}',
-                children: chartQueryMetadata,
-              }
-            : null,
-          chartQueryMetadata.length > 0
-            ? {
-                type: 'divider',
-              }
-            : null,
-          ,
-          {
-            type: 'subMenu',
-            title: lang('Add chart query'),
-            // component: AddChartQuery,
-            children: [
-              {
-                key: 'sql',
-                type: 'item',
-                title: 'SQL',
-                onClick: onAddQuery,
-              },
-              {
-                key: 'json',
-                type: 'item',
-                title: 'JSON',
-                onClick: onAddQuery,
-              },
-            ],
-          },
-        ].filter(Boolean),
-      );
+      const item1 =
+        chartQueryMetadata.length > 0
+          ? {
+              type: 'itemGroup',
+              title: '{{t("Select chart query", {ns: "charts"})}}',
+              children: chartQueryMetadata,
+            }
+          : null;
+      const item2 =
+        chartQueryMetadata.length > 0
+          ? {
+              type: 'divider',
+            }
+          : null;
+
+      return [
+        item1,
+        item2,
+        {
+          type: 'subMenu',
+          title: lang('Add chart query'),
+          // component: AddChartQuery,
+          children: [
+            {
+              key: 'sql',
+              type: 'item',
+              title: 'SQL',
+              onClick: onAddQuery,
+            },
+            {
+              key: 'json',
+              type: 'item',
+              title: 'JSON',
+              onClick: onAddQuery,
+            },
+          ],
+        },
+      ].filter(Boolean);
     }
-  }, []);
+
+    return defaultItems;
+  }, [ctx.data, onAddQuery]);
+
   return (
     <SchemaInitializer.Item
       icon={<TableOutlined />}

package/src/client/settings/AddNewQuery.tsx

@@ -10,11 +10,11 @@ import {
   useResourceActionContext,
   useResourceContext,
 } from '@nocobase/client';
-import { Button, Dropdown, Menu } from 'antd';
+import { Button, Dropdown, MenuProps } from 'antd';
 import React, { useMemo, useState } from 'react';
 import { useChartQueryMetadataContext } from '../ChartQueryMetadataProvider';
-import { getQueryTypeSchema } from './queryTypes';
 import { lang } from '../locale';
+import { getQueryTypeSchema } from './queryTypes';
 
 const useCreateAction = () => {
   const { setVisible } = useActionContext();
@@ -112,25 +112,40 @@ export const AddNewQuery = () => {
   const [visible, setVisible] = useState(false);
   const [schema, setSchema] = useState({});
   const form = useMemo(() => createForm(), []);
-  const menu = (
-    <Menu
-      onClick={(info) => {
+
+  const menu = useMemo<MenuProps>(() => {
+    return {
+      onClick: (info) => {
         setVisible(true);
         form.setValues({ type: info.key });
         setSchema(getSchema({ type: info.key }, { form, isNewRecord: true }));
-      }}
-    >
-      <Menu.Item key={'json'}>JSON</Menu.Item>
-      <Menu.Item key={'sql'}>SQL</Menu.Item>
-      <Menu.Item disabled key={'api'}>
-        API
-      </Menu.Item>
-      <Menu.Item disabled>Collection</Menu.Item>
-    </Menu>
-  );
+      },
+      items: [
+        {
+          key: 'json',
+          label: 'JSON',
+        },
+        {
+          key: 'sql',
+          label: 'SQL',
+        },
+        {
+          key: 'api',
+          label: 'API',
+          disabled: true,
+        },
+        {
+          key: 'collection',
+          label: 'Collection',
+          disabled: true,
+        },
+      ],
+    };
+  }, [form]);
+
   return (
     <ActionContextProvider value={{ visible, setVisible }}>
-      <Dropdown overlay={menu}>
+      <Dropdown menu={menu}>
         <Button icon={<PlusOutlined />} type={'primary'}>
           {lang('Add query')} <DownOutlined />
         </Button>