@nokecy/qc-ui 0.1.18 → 0.1.21

package/dist/cjs/dashboard/dashboard/index.js

@@ -0,0 +1,607 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
+
+var _isArray2 = _interopRequireDefault(require("lodash/isArray"));
+
+var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _icons = require("@ant-design/icons");
+
+var _antd = require("antd");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactGridLayout = require("react-grid-layout");
+
+var _reactKeyevent = _interopRequireDefault(require("react-keyevent"));
+
+var _utils = require("../utils");
+
+var _widget = _interopRequireDefault(require("../widget"));
+
+var _selector = _interopRequireDefault(require("../widget/selector"));
+
+var _utils2 = require("../widget/utils");
+
+var _components = require("./components");
+
+require("./index.less");
+
+var _service = require("./service");
+
+var _utils3 = require("./utils");
+
+var _excluded = ["storageKey", "editMode", "widgets", "defaultLayout", "widgetWrapClassName", "widgetWrapStyle", "layout", "minHeight", "maxWidgetLength", "toolbar", "onLayoutChange", "onReset", "onReload", "onRemoveWidget", "onAddWidget", "onCancelEdit", "onEdit", "onRevert", "onSave"];
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, catch: function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
+
+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); }); }; }
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["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; }
+
+var ResponsiveReactGridLayout = (0, _reactGridLayout.WidthProvider)(_reactGridLayout.Responsive);
+var Dashboard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$storageKey = props.storageKey,
+      storageKey = _props$storageKey === void 0 ? 'default' : _props$storageKey,
+      _props$editMode = props.editMode,
+      editMode = _props$editMode === void 0 ? false : _props$editMode,
+      widgets = props.widgets,
+      _props$defaultLayout = props.defaultLayout,
+      defaultLayout = _props$defaultLayout === void 0 ? [] : _props$defaultLayout,
+      widgetWrapClassName = props.widgetWrapClassName,
+      widgetWrapStyle = props.widgetWrapStyle,
+      _props$layout = props.layout,
+      customLayout = _props$layout === void 0 ? null : _props$layout,
+      _props$minHeight = props.minHeight,
+      minHeight = _props$minHeight === void 0 ? 300 : _props$minHeight,
+      _props$maxWidgetLengt = props.maxWidgetLength,
+      maxWidgetLength = _props$maxWidgetLengt === void 0 ? 20 : _props$maxWidgetLengt,
+      _props$toolbar = props.toolbar,
+      toolbar = _props$toolbar === void 0 ? true : _props$toolbar,
+      _onLayoutChange = props.onLayoutChange,
+      onReset = props.onReset,
+      onReload = props.onReload,
+      onRemoveWidget = props.onRemoveWidget,
+      onAddWidget = props.onAddWidget,
+      onCancelEdit = props.onCancelEdit,
+      onEdit = props.onEdit,
+      onRevert = props.onRevert,
+      onSave = props.onSave,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var _useState = (0, _react.useState)(editMode),
+      _useState2 = _slicedToArray(_useState, 2),
+      stateEditMode = _useState2[0],
+      setStateEditMode = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(editMode),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var _useReducer = (0, _react.useReducer)(_utils.reducer, {
+    currentLayout: [],
+    dirtyCurrentLayout: []
+  }),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var _state$currentLayout = state.currentLayout,
+      currentLayout = _state$currentLayout === void 0 ? [] : _state$currentLayout,
+      _state$dirtyCurrentLa = state.dirtyCurrentLayout,
+      dirtyCurrentLayout = _state$dirtyCurrentLa === void 0 ? [] : _state$dirtyCurrentLa;
+  var dom = (0, _react.useRef)(null); //获取操作
+
+  var fetch = (0, _react.useCallback)((0, _debounce2.default)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var response, _layout, resArr, data;
+
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return (0, _service.fetch)({
+              id: storageKey
+            });
+
+          case 3:
+            response = _context.sent;
+            _layout = (0, _isArray2.default)(defaultLayout) ? defaultLayout : [];
+
+            if (response) {
+              resArr = JSON.parse(response).currentLayout;
+
+              if (!(0, _isEmpty2.default)(resArr)) {
+                _layout = resArr;
+              }
+            }
+
+            if (_layout) {
+              data = (0, _utils3.calcMinAndMax)(_layout, widgets);
+              dispatch({
+                type: 'save',
+                payload: {
+                  currentLayout: data,
+                  dirtyCurrentLayout: data
+                }
+              });
+            }
+
+            setLoading(false);
+            _context.next = 12;
+            break;
+
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](0);
+
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[0, 10]]);
+  })), 200), [storageKey, widgets]); //刷新
+
+  var reload = (0, _react.useCallback)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            setLoading(true);
+            onReload && onReload((0, _utils3.formatLayout)(currentLayout));
+
+            if (!customLayout) {
+              _context2.next = 4;
+              break;
+            }
+
+            return _context2.abrupt("return");
+
+          case 4:
+            fetch();
+
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })), [fetch, customLayout]); //设置布局信息
+
+  var update = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(payload) {
+      var callback,
+          layout,
+          response,
+          _args3 = arguments;
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              callback = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : function () {};
+              layout = payload['layout'];
+              _context3.prev = 2;
+              _context3.next = 5;
+              return (0, _service.update)({
+                id: storageKey,
+                data: {
+                  currentLayout: layout
+                }
+              });
+
+            case 5:
+              response = _context3.sent;
+
+              if (response) {
+                _context3.next = 8;
+                break;
+              }
+
+              return _context3.abrupt("return");
+
+            case 8:
+              callback();
+              _context3.next = 13;
+              break;
+
+            case 11:
+              _context3.prev = 11;
+              _context3.t0 = _context3["catch"](2);
+
+            case 13:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[2, 11]]);
+    }));
+
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [storageKey, widgets]); //改变布局触发
+
+  var onLayoutChange = (0, _react.useCallback)((0, _debounce2.default)(function (layout, layouts, callback) {
+    window.dispatchEvent(new Event('resize'));
+
+    if (!stateEditMode) {
+      return;
+    }
+
+    dispatch({
+      type: 'save',
+      payload: {
+        dirtyCurrentLayout: layout
+      }
+    });
+    _onLayoutChange && _onLayoutChange((0, _utils3.formatLayout)(layout));
+    callback && callback();
+  }, 300), [stateEditMode]); //添加小程序
+
+  var addWidget = (0, _react.useCallback)(function (widget) {
+    if (dirtyCurrentLayout.length >= maxWidgetLength) {
+      _antd.message.warning("\u8D85\u8FC7\u4E86\u6700\u5927\u9650\u5236\u6570\u91CF".concat(maxWidgetLength) + ',' + '不能再添加了');
+    }
+
+    var lastItem = dirtyCurrentLayout[dirtyCurrentLayout.length - 1];
+    var newLayout = [].concat(_toConsumableArray(dirtyCurrentLayout), [{
+      w: widget.size.defaultWidth,
+      h: widget.size.defaultHeight,
+      x: 0,
+      y: lastItem ? lastItem['y'] + lastItem['h'] : 0,
+      i: widget.name + '-' + (0, _utils.generateUuid)(),
+      minW: widget.size.minWidth,
+      maxW: widget.size.maxWidth,
+      minH: widget.size.minHeight,
+      maxH: widget.size.maxHeight
+    }]);
+    onAddWidget && onAddWidget(widget, (0, _utils3.formatLayout)(dirtyCurrentLayout), (0, _utils3.formatLayout)(newLayout));
+    onLayoutChange(newLayout);
+
+    _antd.message.success('添加成功');
+  }, [dirtyCurrentLayout, onLayoutChange, maxWidgetLength]); //删除小程序
+
+  var removeWidget = (0, _react.useCallback)(function (widgetKey) {
+    var removedWidget;
+    var newLayout = (0, _cloneDeep2.default)(dirtyCurrentLayout);
+    newLayout.map(function (item, index) {
+      if (item['i'] === widgetKey) {
+        removedWidget = item;
+        newLayout.splice(index, 1);
+      }
+    });
+    onRemoveWidget && onRemoveWidget(removedWidget, (0, _utils3.formatLayout)(dirtyCurrentLayout), (0, _utils3.formatLayout)(newLayout));
+    dispatch({
+      type: 'save',
+      payload: {
+        dirtyCurrentLayout: newLayout
+      }
+    });
+  }, [dirtyCurrentLayout, onLayoutChange]); //重置
+
+  var reset = (0, _react.useCallback)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            onReset && onReset([], (0, _utils3.formatLayout)(currentLayout));
+            onLayoutChange([]);
+
+          case 2:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })), [onLayoutChange]); //最终的布局数据
+
+  var finLayout = (0, _react.useMemo)(function () {
+    return stateEditMode ? dirtyCurrentLayout : currentLayout;
+  }, [stateEditMode, dirtyCurrentLayout, currentLayout]); //取消编辑
+
+  var cancelEdit = (0, _react.useCallback)(function () {
+    setStateEditMode(false);
+    onCancelEdit && onCancelEdit((0, _utils3.formatLayout)(dirtyCurrentLayout), (0, _utils3.formatLayout)(currentLayout));
+    dispatch({
+      type: 'save',
+      payload: {
+        dirtyCurrentLayout: currentLayout
+      }
+    });
+  }, [dirtyCurrentLayout, currentLayout]);
+  var revert = (0, _react.useCallback)(function () {
+    onRevert && onRevert((0, _utils3.formatLayout)(dirtyCurrentLayout), (0, _utils3.formatLayout)(currentLayout));
+    dispatch({
+      type: 'save',
+      payload: {
+        dirtyCurrentLayout: currentLayout
+      }
+    });
+  }, [dirtyCurrentLayout, currentLayout]);
+
+  var edit = function edit() {
+    return setStateEditMode(true);
+  };
+
+  var save = (0, _react.useCallback)(function () {
+    dispatch({
+      type: 'save',
+      payload: {
+        currentLayout: dirtyCurrentLayout,
+        widgets: widgets
+      }
+    });
+    onSave && onSave((0, _utils3.formatLayout)(dirtyCurrentLayout));
+    setStateEditMode(false);
+
+    if (customLayout) {
+      return;
+    }
+
+    update({
+      layout: dirtyCurrentLayout
+    });
+  }, [dirtyCurrentLayout, update, customLayout]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: dom.current,
+      reset: reset,
+      //清空
+      removeWidget: removeWidget,
+      //删除
+      addWidget: addWidget,
+      //新增
+      reload: reload,
+      // 刷新
+      cancelEdit: cancelEdit,
+      //取消编辑
+      edit: edit,
+      //编辑
+      revert: revert,
+      //重置
+      save: save //保存
+
+    };
+  }); //打印布局数据
+
+  var onCtrlShiftC = (0, _react.useCallback)(function () {
+    var res = (0, _utils3.formatLayout)(currentLayout);
+    (0, _utils3.copy)(JSON.stringify(res));
+
+    _antd.message.success('已复制布局数据到剪切板');
+
+    console.log('currentLayout', res);
+  }, [currentLayout]); //默认存储
+
+  (0, _react.useEffect)(function () {
+    if (customLayout) {
+      return;
+    }
+
+    fetch();
+  }, [customLayout]); //编辑状态改变副作用
+
+  (0, _react.useEffect)(function () {
+    setStateEditMode(editMode);
+  }, [editMode]); //响应外部数据
+
+  (0, _react.useEffect)(function () {
+    if (!(0, _isArray2.default)(customLayout)) {
+      return;
+    }
+
+    var data = (0, _utils3.calcMinAndMax)(customLayout, widgets);
+    dispatch({
+      type: 'save',
+      payload: {
+        customLayout: data,
+        dirtyCurrentLayout: data
+      }
+    });
+  }, [customLayout, widgets]);
+  return /*#__PURE__*/_react.default.createElement(_antd.Spin, {
+    spinning: loading,
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactKeyevent.default, {
+    style: {
+      width: '100%'
+    },
+    events: {
+      onCtrlShiftC: onCtrlShiftC
+    },
+    needFocusing: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%'
+    },
+    ref: dom
+  }, /*#__PURE__*/_react.default.createElement(ResponsiveReactGridLayout, {
+    className: "react-dashboard-layout",
+    layouts: {
+      lg: finLayout
+    },
+    rowHeight: 30,
+    isDraggable: stateEditMode,
+    breakpoints: {
+      lg: 1200,
+      md: 800,
+      sm: 600,
+      xs: 400,
+      xxs: 300
+    },
+    cols: {
+      lg: 12,
+      md: 12,
+      sm: 2,
+      xs: 2,
+      xxs: 2
+    } // onBreakpointChange={onBreakpointChange} //断点回调
+    ,
+    onLayoutChange: onLayoutChange //布局改变回调
+    ,
+    isResizable: stateEditMode //准许改变大小
+    // onWidthChange={()=>onWidthChange()}  //宽度改变回调
+    ,
+    measureBeforeMount: true //动画相关
+
+  }, finLayout.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: item.i,
+      className: (0, _classnames.default)('react-dashboard-item', stateEditMode ? 'react-dashboard-item-edit' : '')
+    }, widgets[(0, _utils2.getWidgetType)(item.i, widgets)] ? /*#__PURE__*/_react.default.createElement(_widget.default, _extends({}, restProps, {
+      widgetKey: item.i,
+      widgetType: (0, _utils2.getWidgetType)(item.i, widgets),
+      height: item.h * 40 - 10,
+      editMode: stateEditMode,
+      onDeleteWidget: function onDeleteWidget() {
+        return removeWidget(item.i);
+      },
+      widgets: widgets,
+      widgetWrapClassName: widgetWrapClassName,
+      widgetWrapStyle: widgetWrapStyle
+    })) : /*#__PURE__*/_react.default.createElement("div", {
+      className: "react-dashboard-aligncenter react-dashboard-full"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        textAlign: 'center'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", null, '数据有误', " ", item.i), stateEditMode && /*#__PURE__*/_react.default.createElement(_antd.Button, {
+      icon: /*#__PURE__*/_react.default.createElement(_icons.DeleteOutlined, null),
+      size: "small",
+      style: {
+        margin: '10px 0'
+      },
+      onClick: function onClick() {
+        return removeWidget(item.i);
+      }
+    }, '删除'))));
+  })), toolbar && finLayout.length > 0 ? !stateEditMode && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      margin: '0 10px',
+      marginBottom: '10px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    size: "small",
+    icon: /*#__PURE__*/_react.default.createElement(_icons.ReloadOutlined, null),
+    loading: loading,
+    style: {
+      marginRight: '10px'
+    },
+    onClick: function onClick() {
+      return reload();
+    }
+  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    size: "small",
+    type: "default",
+    style: {
+      flex: 1
+    },
+    onClick: edit
+  }, /*#__PURE__*/_react.default.createElement(_icons.DashboardOutlined, null), '编辑仪表板')) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !stateEditMode ? /*#__PURE__*/_react.default.createElement(_antd.Spin, {
+    spinning: loading
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "react-dashboard-emptyContent",
+    style: {
+      minHeight: minHeight
+    }
+  }, !loading && /*#__PURE__*/_react.default.createElement(_antd.Empty, {
+    description: /*#__PURE__*/_react.default.createElement("span", null, '当前仪表板没有小程序')
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    size: "small",
+    type: "primary",
+    onClick: edit
+  }, /*#__PURE__*/_react.default.createElement(_icons.DashboardOutlined, null), '编辑仪表板')))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('react-dashboard-full', 'react-dashboard-aligncenter'),
+    style: {
+      minHeight: minHeight
+    }
+  }, /*#__PURE__*/_react.default.createElement(_selector.default, {
+    widgets: widgets,
+    currentLayout: finLayout,
+    addWidget: addWidget
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    title: '添加'
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "dashed",
+    shape: "circle",
+    icon: /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, null),
+    size: "large"
+  })))))), toolbar && stateEditMode && /*#__PURE__*/_react.default.createElement(_components.Toolbar, {
+    fixed: false,
+    extraRight: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+      size: "small",
+      onClick: cancelEdit,
+      icon: /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, null)
+    }, '取消'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+      size: "small",
+      onClick: revert,
+      icon: /*#__PURE__*/_react.default.createElement(_icons.RetweetOutlined, null)
+    }, '恢复'), !(0, _isEmpty2.default)(finLayout) && /*#__PURE__*/_react.default.createElement(_antd.Button, {
+      size: "small",
+      danger: true,
+      onClick: reset,
+      icon: /*#__PURE__*/_react.default.createElement(_icons.DeleteOutlined, null)
+    }, '清空'), /*#__PURE__*/_react.default.createElement(_selector.default, {
+      widgets: widgets,
+      currentLayout: finLayout,
+      addWidget: addWidget
+    }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+      size: "small",
+      onClick: save,
+      type: "primary",
+      icon: /*#__PURE__*/_react.default.createElement(_icons.CheckOutlined, null)
+    }, '保存'))
+  }))));
+});
+var _default = Dashboard;
+exports.default = _default;