@luck-design-biz/luckda 0.0.24-2 → 0.0.25-2

package/es/lowcode/painter/DesignToolbar.js

@@ -1,15 +1,41 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useEffect, useState } from 'react';
+var _excluded = ["key", "label"];
+import React, { useRef, useEffect, useState } from 'react';
+import { useLocation } from 'umi';
 import classNames from 'classnames';
-import { Select, Button, Icon, Divider } from 'luck-design/antd';
-import { useLDContext } from "../engine/provider/ContextProvider";
-import { CELL_KEY } from "../constants";
+import { useMemoizedFn, useRequest, useDebounceFn, useCookieState } from 'ahooks';
+import { Select, Button, Icon, Divider, Modal, message, Drawer } from 'luck-design/antd';
+import { showPop, formatMessage } from '@luck-design-biz/base/utils';
+import { useContext, usePageData, useRemoteSource } from "../engine/provider/ContextProvider";
+import JsonEditor from "../painter/components/code-editor/JsonEditor";
+import Preview from "../preview";
+import { LC_BUILDIN_UNIT_KEY, COOKIE_VIRTUAL_ACCOUNT_KEY } from "../constants";
 import styles from "./style/design.less";
+import { fetchClearCache, fetchUpdatePageData } from "../constants/api-url";
+import { readAllUser } from '@luck-design-biz/base/lib/sys/services';
 var DesignToolbar = function DesignToolbar(_ref) {
   var locale = _ref.locale,
     onLangChange = _ref.onLangChange;
-  var context = useLDContext();
+  var location = useLocation();
+  var editorRef = useRef();
+  var context = useContext();
+  var _usePageData = usePageData(),
+    _usePageData2 = _slicedToArray(_usePageData, 2),
+    pageData = _usePageData2[0],
+    _usePageData2$ = _usePageData2[1],
+    setPageData = _usePageData2$.setPageData,
+    back = _usePageData2$.back,
+    forward = _usePageData2$.forward,
+    backLength = _usePageData2$.backLength,
+    forwardLength = _usePageData2$.forwardLength;
+  var _ref2 = useRemoteSource() || {},
+    pageinfo = _ref2.pageinfo;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     langList = _useState2[0],
@@ -18,16 +44,144 @@ var DesignToolbar = function DesignToolbar(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     activedTarget = _useState4[0],
     setActivedTarget = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    show = _useState6[0],
+    setShow = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showPreview = _useState8[0],
+    setShowPreview = _useState8[1];
+  var _useState9 = useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    userOptions = _useState10[0],
+    setUserOptions = _useState10[1];
+  var _useCookieState = useCookieState(COOKIE_VIRTUAL_ACCOUNT_KEY),
+    _useCookieState2 = _slicedToArray(_useCookieState, 2),
+    userId = _useCookieState2[0],
+    setUserId = _useCookieState2[1];
+  var _useRequest = useRequest(fetchClearCache, {
+      manual: true
+    }),
+    clearCacheLoading = _useRequest.loading,
+    runClearCache = _useRequest.run;
+  var _useRequest2 = useRequest(fetchUpdatePageData, {
+      manual: true,
+      debounceWait: 300
+    }),
+    updatePageDataLoading = _useRequest2.loading,
+    runAsync = _useRequest2.runAsync;
   useEffect(function () {
-    var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref2) {
-      var _langList = _ref2.langList;
+    var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref3) {
+      var _langList = _ref3.langList;
       return setLangList(_langList);
     }).watch();
     return function () {
       return context.$unsubscriber(context.topics.LANG_SETTING_SELECT, topicId);
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  useEffect(function () {
+    if (!showPreview) {
+      setUserId(void 0);
+    }
+  }, [showPreview]);
+  var handleSave = useMemoizedFn( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _pageinfo$relationshi;
+    var _yield$runAsync, code;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return runAsync({
+            pageData: JSON.stringify(pageData),
+            pageCode: pageinfo === null || pageinfo === void 0 || (_pageinfo$relationshi = pageinfo.relationship) === null || _pageinfo$relationshi === void 0 ? void 0 : _pageinfo$relationshi.pageCode
+          });
+        case 2:
+          _yield$runAsync = _context.sent;
+          code = _yield$runAsync.code;
+          if (code === 1) {
+            showPop(formatMessage({
+              id: 'app.base.tip.operate.success'
+            }), null, 'success');
+          }
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), []);
+  var handleClearCache = useMemoizedFn(function () {
+    Modal.confirm({
+      title: formatMessage({
+        id: 'luckda.lowcode.design.toolbar.clear.tip',
+        label: '清除提示'
+      }),
+      content: formatMessage({
+        id: 'luckda.lowcode.design.toolbar.clear',
+        label: '确定清除当前页面及模块缓存么？'
+      }),
+      getContainer: function getContainer() {
+        return document.getElementById('lc-design-workspace');
+      },
+      zIndex: 3000,
+      onOk: function onOk() {
+        return runClearCache({
+          moduleCode: pageinfo.relationship.moduleCode
+        });
+      }
+    });
+  });
+  var handleOk = useMemoizedFn(function () {
+    var code = editorRef.current.editor.getValue();
+    try {
+      var data = JSON.parse(code);
+      setPageData(data);
+      setShow(false);
+    } catch (e) {
+      message.warning(formatMessage({
+        id: 'luckda.lowcode.error.pagedata',
+        label: '页面数据错误'
+      }));
+    }
+  });
+  var _useDebounceFn = useDebounceFn( /*#__PURE__*/function () {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(value) {
+        var _yield$readAllUser, code, list, detail;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return readAllUser({
+                sname: value
+              });
+            case 2:
+              _yield$readAllUser = _context2.sent;
+              code = _yield$readAllUser.code;
+              list = _yield$readAllUser.list;
+              detail = _yield$readAllUser.detail;
+              if (code === 1) {
+                setUserOptions(list.map(function (id) {
+                  var item = detail[id];
+                  return _objectSpread(_objectSpread({}, item), {}, {
+                    key: "".concat(item.indocno),
+                    label: item.sname
+                  });
+                }));
+              }
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function (_x) {
+        return _ref5.apply(this, arguments);
+      };
+    }(), {
+      wait: 500
+    }),
+    handleSearch = _useDebounceFn.run;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-design-toolbar']
   }, /*#__PURE__*/React.createElement(Select, {
     size: "small",
@@ -58,6 +212,35 @@ var DesignToolbar = function DesignToolbar(_ref) {
     type: "mobile"
   })), /*#__PURE__*/React.createElement(Divider, {
     type: "vertical"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: classNames(styles['toolbar-item'], _defineProperty({}, styles.disabled, backLength < 1)),
+    onClick: function onClick() {
+      return backLength > 0 && back();
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 1024 1024",
+    width: "20",
+    height: "20",
+    fill: "currentColor",
+    style: {
+      transform: 'rotateY(180deg)'
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M946.8 420L651.9 125.1c-19.5-19.5-52.7-5.7-52.7 21.8v174c-79.3-1.8-501.8 14.9-532.3 569.6-0.9 17.2 22.1 24.3 30.6 9.3C255 621 396.6 553.3 599.1 561.5v175.2c0 27.5 33.3 41.3 52.8 21.9l294.8-294.9c12.1-12.1 12.1-31.6 0.1-43.7z"
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: classNames(styles['toolbar-item'], _defineProperty({}, styles.disabled, forwardLength < 1)),
+    onClick: function onClick() {
+      return forwardLength > 0 && forward();
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 1024 1024",
+    width: "20",
+    height: "20",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M946.8 420L651.9 125.1c-19.5-19.5-52.7-5.7-52.7 21.8v174c-79.3-1.8-501.8 14.9-532.3 569.6-0.9 17.2 22.1 24.3 30.6 9.3C255 621 396.6 553.3 599.1 561.5v175.2c0 27.5 33.3 41.3 52.8 21.9l294.8-294.9c12.1-12.1 12.1-31.6 0.1-43.7z"
+  }))), /*#__PURE__*/React.createElement(Divider, {
+    type: "vertical"
   }), /*#__PURE__*/React.createElement("span", {
     style: {
       width: 'auto',
@@ -66,26 +249,151 @@ var DesignToolbar = function DesignToolbar(_ref) {
     className: styles['toolbar-item'],
     onClick: function onClick() {
       context.$publisher(context.topics.COMPONENT_ACTIVE, {
-        id: CELL_KEY.PAGE_ROOT
+        id: LC_BUILDIN_UNIT_KEY.PAGE_ROOT
       });
     }
-  }, "\u9875\u9762\u5C5E\u6027"), /*#__PURE__*/React.createElement(Divider, {
+  }, formatMessage({
+    id: 'luckda.lowcode.design.toolbar.pageAttrs',
+    label: '页面属性'
+  })), /*#__PURE__*/React.createElement(Divider, {
     type: "vertical"
   }), /*#__PURE__*/React.createElement(Button, {
     size: "small",
     style: {
       fontSize: 12,
-      margin: '0 2px'
+      margin: '0 4px 0 2px'
+    },
+    loading: clearCacheLoading,
+    onClick: handleClearCache
+  }, formatMessage({
+    id: 'luckda.lowcode.design.toolbar.clear',
+    label: '清除缓存'
+  })), /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    style: {
+      fontSize: 12,
+      margin: '0 4px 0 2px'
+    },
+    onClick: function onClick() {
+      return setShowPreview(true);
     }
-  }, "\u9884\u89C8"), /*#__PURE__*/React.createElement(Divider, {
-    type: "vertical"
-  }), /*#__PURE__*/React.createElement(Button, {
+  }, formatMessage({
+    id: 'luckda.lowcode.design.toolbar.preview',
+    label: '预览'
+  })), /*#__PURE__*/React.createElement(Button, {
     size: "small",
     type: "primary",
     style: {
       fontSize: 12,
-      margin: '0 0 0 2px'
+      padding: '0 7px 0 0'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'inline-block',
+      padding: '0 7px'
+    },
+    onClick: handleSave
+  }, formatMessage({
+    id: 'luckda.lowcode.design.toolbar.save',
+    label: '保存'
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'inline-block'
+    },
+    onClick: function onClick() {
+      return setShow(true);
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: updatePageDataLoading ? 'loading' : 'eye'
+  })))), /*#__PURE__*/React.createElement(Modal, {
+    visible: show,
+    width: 1024,
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    zIndex: 3000,
+    bodyStyle: {
+      height: '70vh'
+    },
+    onOk: handleOk,
+    onCancel: function onCancel() {
+      return setShow(false);
+    }
+  }, /*#__PURE__*/React.createElement(JsonEditor, {
+    ref: editorRef
+  }, JSON.stringify(pageData, null, '\t'))), /*#__PURE__*/React.createElement(Drawer, {
+    title: /*#__PURE__*/React.createElement("div", {
+      id: "preview-drawer-header",
+      style: {
+        display: 'flex',
+        height: 54,
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        marginBottom: 0
+      }
+    }, formatMessage({
+      id: 'luckda.lowcode.design.toolbar.pagePreview',
+      label: '页面预览'
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
+      placeholder: formatMessage({
+        id: 'luckda.lowcode.design.toolbar.selectUser',
+        label: '请选择模拟登录人'
+      }),
+      allowClear: true,
+      style: {
+        width: 180
+      },
+      dropdownStyle: {
+        zIndex: 3100
+      },
+      filterOption: false,
+      labelInValue: true,
+      showSearch: true,
+      getPopupContainer: function getPopupContainer() {
+        return document.getElementById('preview-drawer-header').closest('.ant-drawer-wrapper-body');
+      },
+      onSearch: handleSearch,
+      onChange: function onChange(_, _opt) {
+        if (_opt) {
+          setUserId(_opt.props.sloginid);
+        } else {
+          setUserId(void 0);
+        }
+      }
+    }, userOptions.map(function (_ref6) {
+      var key = _ref6.key,
+        label = _ref6.label,
+        rest = _objectWithoutProperties(_ref6, _excluded);
+      return /*#__PURE__*/React.createElement(Select.Option, _extends({
+        key: key,
+        value: key
+      }, rest), label);
+    })))),
+    placement: "bottom",
+    height: "94vh",
+    footer: false,
+    zIndex: 3000,
+    headerStyle: {
+      padding: '0 48px 0 24px'
+    },
+    bodyStyle: {
+      height: 'calc(100% - 54px)',
+      backgroundColor: '#F0F2F5'
+    },
+    visible: showPreview,
+    destroyOnClose: true,
+    onClose: function onClose() {
+      return setShowPreview(false);
+    },
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
     }
-  }, "\u4FDD\u5B58"));
+  }, /*#__PURE__*/React.createElement(Preview, {
+    code: location.query.code,
+    userId: userId || 'no-user'
+  })));
 };
 export default DesignToolbar;

package/es/lowcode/painter/I18n.js

@@ -11,7 +11,7 @@ import { GridTable } from 'luck-design';
 import { reduce, remove, cloneDeep, debounce } from 'lodash';
 import { Input, Button, Icon } from 'luck-design/antd';
 import { formatMessage, suid } from '@luck-design-biz/base/utils';
-import { useLDContext } from "../engine/provider/ContextProvider";
+import { useContext } from "../engine/provider/ContextProvider";
 import { readAllLang, doAddLang, doUpdateLang, doDeleteLang } from "./services/I18n";
 var Search = Input.Search;
 var _getDvaApp$_store = (_getDvaApp = getDvaApp()) === null || _getDvaApp === void 0 ? void 0 : _getDvaApp._store,
@@ -26,7 +26,7 @@ var formatDataFunc = function formatDataFunc(data) {
   }, {}));
 };
 var I18n = function I18n() {
-  var context = useLDContext();
+  var context = useContext();
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     langList = _useState2[0],

package/es/lowcode/painter/Outline.js

@@ -9,16 +9,19 @@ import { uniq, split, reduce } from 'lodash';
 import classNames from 'classnames';
 import { Card, Tree, Icon } from 'luck-design/antd';
 import { formatMessage } from '@luck-design-biz/base/utils';
-import { useLDContext } from "../engine/provider/ContextProvider";
-import { CELL_KEY } from "../constants";
+import { useContext, usePageData } from "../engine/provider/ContextProvider";
+import { LC_BUILDIN_UNIT_KEY, LC_BUILDIN_UNIT_KEY_LIST } from "../constants";
 import { getPathById } from "../engine/tools/dataProcess";
 import styles from "./style/outline.less";
+import TreeEditor from "./components/TreeEditor";
 var TreeNode = Tree.TreeNode;
-var PAGE_CELL = [CELL_KEY.PAGE_HEADER, CELL_KEY.PAGE_CONTENT, CELL_KEY.PAGE_FOOTER];
 var Outline = function Outline(_ref) {
   var open = _ref.open;
   var clickBySelf = useRef(false);
-  var context = useLDContext();
+  var ctx = useContext();
+  var _usePageData = usePageData(),
+    _usePageData2 = _slicedToArray(_usePageData, 1),
+    pageData = _usePageData2[0];
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     pageAndModal = _useState2[0],
@@ -38,28 +41,28 @@ var Outline = function Outline(_ref) {
   var latestModalExpandedKeysRef = useLatest(modalExpandedKeys);
   var lastPageExpandedKeysRef = useLatest(pageExpandedKeys);
   useEffect(function () {
-    var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+    var _id = ctx.$subscriber(ctx.topics.COMPONENT_ACTIVE).on(function (payload) {
       setSelectedKey(payload.id);
       if (clickBySelf.current) {
         clickBySelf.current = false;
         return;
       }
-      var _split = split(getPathById(context.pageData, payload.id), '/'),
+      var _split = split(getPathById(pageData, payload.id), '/'),
         _split2 = _slicedToArray(_split, 1),
         _root = _split2[0];
-      if (!PAGE_CELL.includes(_root)) {
-        setModalExpandedKeys(uniq([].concat(_toConsumableArray(latestModalExpandedKeysRef.current), _toConsumableArray(split(getPathById(context.pageData, payload.id), '/')))));
+      if (!LC_BUILDIN_UNIT_KEY_LIST.includes(_root)) {
+        setModalExpandedKeys(uniq([].concat(_toConsumableArray(latestModalExpandedKeysRef.current), _toConsumableArray(split(getPathById(pageData, payload.id), '/')))));
       } else {
-        setPageExpandedKeys(uniq([].concat(_toConsumableArray(lastPageExpandedKeysRef.current), _toConsumableArray(split(getPathById(context.pageData, payload.id), '/')))));
+        setPageExpandedKeys(uniq([].concat(_toConsumableArray(lastPageExpandedKeysRef.current), _toConsumableArray(split(getPathById(pageData, payload.id), '/')))));
       }
     }).watch();
     return function () {
-      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
+      ctx.$unsubscriber(ctx.topics.COMPONENT_ACTIVE, _id);
     };
-  }, [context.pageData]);
+  }, [pageData]);
   var handleSelect = useMemoizedFn(function (_key) {
     clickBySelf.current = true;
-    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
+    ctx.$publisher(ctx.topics.COMPONENT_ACTIVE, _key ? {
       id: _key
     } : null);
   });
@@ -72,7 +75,9 @@ var Outline = function Outline(_ref) {
         icon: /*#__PURE__*/React.createElement(Icon, {
           type: "layout"
         }),
-        title: props.name,
+        title: /*#__PURE__*/React.createElement(TreeEditor, {
+          item: props
+        }),
         key: props.id
       }, (children === null || children === void 0 ? void 0 : children.length) && children.map(function (_id) {
         return render(childrenMap[_id]);
@@ -83,12 +88,12 @@ var Outline = function Outline(_ref) {
     });
   });
   useDeepCompareLayoutEffect(function () {
-    if (!context.pageData) {
+    if (!pageData) {
       return;
     }
-    var _reduce = reduce(context.pageData.children, function (result, _id) {
-        var resultKey = PAGE_CELL.includes(_id) ? 'page' : 'modal';
-        result[resultKey][_id] = context.pageData[_id];
+    var _reduce = reduce(pageData.children, function (result, _id) {
+        var resultKey = LC_BUILDIN_UNIT_KEY_LIST.includes(_id) ? 'page' : 'modal';
+        result[resultKey][_id] = pageData[_id];
         if (!result[resultKey].children) {
           result[resultKey].children = [];
         }
@@ -104,13 +109,13 @@ var Outline = function Outline(_ref) {
       page: render(page),
       modal: render(modal)
     });
-  }, [context.pageData]);
+  }, [pageData]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-outline']
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles['page-node'], _defineProperty({}, styles['page-node-active'], selectedKey === CELL_KEY.PAGE_ROOT)),
+    className: classNames(styles['page-node'], _defineProperty({}, styles['page-node-active'], selectedKey === LC_BUILDIN_UNIT_KEY.PAGE_ROOT)),
     onClick: function onClick() {
-      return handleSelect(CELL_KEY.PAGE_ROOT);
+      return handleSelect(LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
     }
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "layout"
@@ -150,14 +155,14 @@ var Outline = function Outline(_ref) {
         node = _ref4.node;
       if (selected && node.props.pos.split('-').length === 2) {
         // 选中节点是模态视图，则打开模态视图组件
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
           toggle: true,
           id: _key
         });
         handleSelect(_key);
       } else if (!selected && node.props.pos.split('-').length === 2) {
         // 取消选中节点是模态视图，则关闭模态视图
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
           toggle: false,
           id: _key
         });
@@ -165,10 +170,10 @@ var Outline = function Outline(_ref) {
       } else {
         // 选中节点是模态视图下的子组件，则打开该组件的模态视图组件
         handleSelect(node.props.eventKey);
-        var _split3 = split(getPathById(context.pageData, node.props.eventKey), '/'),
+        var _split3 = split(getPathById(pageData, node.props.eventKey), '/'),
           _split4 = _slicedToArray(_split3, 1),
           parentModal = _split4[0];
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
           toggle: true,
           id: parentModal
         });
@@ -180,7 +185,7 @@ var Outline = function Outline(_ref) {
         node = _ref6.node;
       if (expanded && node.props.pos.split('-').length === 2) {
         handleSelect(null);
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
           toggle: true,
           id: node.props.eventKey
         });
@@ -199,7 +204,7 @@ var Outline = function Outline(_ref) {
       var _ref9 = _slicedToArray(_ref7, 1),
         _key = _ref9[0];
       var node = _ref8.node;
-      context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+      ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
         toggle: false
       });
       handleSelect(node.props.eventKey);