@dhis2/analytics 25.2.3 → 26.0.0

package/build/cjs/__demo__/FileMenu.stories.js

@@ -8,6 +8,8 @@ var _react2 = _interopRequireDefault(require("react"));
 
 var _FileMenu = require("../components/FileMenu/FileMenu.js");
 
+var _index = require("../components/Toolbar/index.js");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const configMock = {
@@ -60,19 +62,19 @@ const visReadonlyObject = { ...visObject,
 };
 (0, _react.storiesOf)('FileMenu', module).add('Simple', () => /*#__PURE__*/_react2.default.createElement(_appRuntime.Provider, {
   config: configMock
-}, /*#__PURE__*/_react2.default.createElement(_FileMenu.FileMenu, {
+}, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuBar, null, /*#__PURE__*/_react2.default.createElement(_FileMenu.FileMenu, {
   currentUser: user,
   fileType: "visualization"
-}))).add('With AO', () => /*#__PURE__*/_react2.default.createElement(_appRuntime.Provider, {
+})))).add('With AO', () => /*#__PURE__*/_react2.default.createElement(_appRuntime.Provider, {
   config: configMock
-}, /*#__PURE__*/_react2.default.createElement(_FileMenu.FileMenu, {
+}, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuBar, null, /*#__PURE__*/_react2.default.createElement(_FileMenu.FileMenu, {
   currentUser: user,
   fileType: "visualization",
   fileObject: visObject
-}))).add('With readonly AO', () => /*#__PURE__*/_react2.default.createElement(_appRuntime.Provider, {
+})))).add('With readonly AO', () => /*#__PURE__*/_react2.default.createElement(_appRuntime.Provider, {
   config: configMock
-}, /*#__PURE__*/_react2.default.createElement(_FileMenu.FileMenu, {
+}, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuBar, null, /*#__PURE__*/_react2.default.createElement(_FileMenu.FileMenu, {
   currentUser: user,
   fileType: "visualization",
   fileObject: visReadonlyObject
-})));
+}))));

package/build/cjs/__demo__/Toolbar.stories.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _react = require("@storybook/react");
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+var _index = require("../components/Toolbar/index.js");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 ToolbarWithState() {
+  const [isHidden, setIsHidden] = (0, _react2.useState)(false);
+  const [isSidebarShowing, setIsSidebarShowing] = (0, _react2.useState)(false);
+  return /*#__PURE__*/_react2.default.createElement(_index.Toolbar, null, /*#__PURE__*/_react2.default.createElement(_index.ToolbarSidebar, {
+    isHidden: isHidden
+  }, /*#__PURE__*/_react2.default.createElement("span", null, "Toolbar side bar"), /*#__PURE__*/_react2.default.createElement("a", {
+    style: {
+      paddingLeft: 12,
+      textDecoration: 'underline',
+      cursor: 'pointer'
+    },
+    onClick: () => setIsHidden(true)
+  }, "click to hide")), /*#__PURE__*/_react2.default.createElement(_index.UpdateButton, null), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuBar, null, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuDropdown, {
+    label: "Menu A"
+  }, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, null, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item A.1"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item A.2"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item A.3"
+  }))), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuDropdown, {
+    label: "Menu B"
+  }, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, null, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.1"
+  }, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.1.1"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.1.2"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.1.3"
+  })), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.2"
+  }, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.2.1"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.2.2"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.2.3"
+  })), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.3",
+    disabled: true
+  }, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.3.1"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.3.2"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item B.3.3"
+  })))), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuDropdown, {
+    label: "Menu C",
+    disabled: true
+  }, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, null, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item C.1"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item C.2"
+  }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+    label: "Menu item C.3"
+  })))), /*#__PURE__*/_react2.default.createElement(_index.InterpretationsAndDetailsToggler, {
+    isShowing: isSidebarShowing,
+    onClick: () => setIsSidebarShowing(current => !current)
+  }));
+}
+
+(0, _react.storiesOf)('Toolbar', module).add('default', () => {
+  return /*#__PURE__*/_react2.default.createElement(ToolbarWithState, null);
+});

package/build/cjs/components/FileMenu/FileMenu.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.FileMenu = void 0;
 
-var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _ui = require("@dhis2/ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,11 +15,11 @@ var _index = _interopRequireDefault(require("../../locales/index.js"));
 
 var _OpenFileDialog = require("../OpenFileDialog/OpenFileDialog.js");
 
-var _index2 = require("../TranslationDialog/index.js");
+var _index2 = require("../Toolbar/index.js");
 
-var _DeleteDialog = require("./DeleteDialog.js");
+var _index3 = require("../TranslationDialog/index.js");
 
-var _FileMenuStyles = require("./FileMenu.styles.js");
+var _DeleteDialog = require("./DeleteDialog.js");
 
 var _GetLinkDialog = require("./GetLinkDialog.js");
 
@@ -56,24 +54,14 @@ const FileMenu = _ref => {
     onError,
     onTranslate
   } = _ref;
-  const [menuIsOpen, setMenuIsOpen] = (0, _react.useState)(false);
-  const [currentDialog, setCurrentDialog] = (0, _react.useState)(null); // Escape key press closes the menu
-
-  const onKeyDown = e => {
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 27) {
-      setMenuIsOpen(false);
-    }
-  };
+  const [currentDialog, setCurrentDialog] = (0, _react.useState)(null);
 
   const onMenuItemClick = dialogToOpen => () => {
-    setMenuIsOpen(false);
     setCurrentDialog(dialogToOpen);
   };
 
   const onDialogClose = () => setCurrentDialog(null);
 
-  const toggleMenu = () => setMenuIsOpen(!menuIsOpen);
-
   const onDeleteConfirm = () => {
     // The dialog must be closed before calling the callback
     // otherwise the fileObject is changed to null before the
@@ -83,8 +71,6 @@ const FileMenu = _ref => {
     onDelete();
   };
 
-  const buttonRef = /*#__PURE__*/(0, _react.createRef)();
-
   const renderDialog = () => {
     switch (currentDialog) {
       case 'rename':
@@ -97,7 +83,7 @@ const FileMenu = _ref => {
         });
 
       case 'translate':
-        return /*#__PURE__*/_react.default.createElement(_index2.TranslationDialog, {
+        return /*#__PURE__*/_react.default.createElement(_index3.TranslationDialog, {
           objectToTranslate: fileObject,
           fieldsToTranslate: ['name', 'description'],
           onClose: onDialogClose,
@@ -146,19 +132,7 @@ const FileMenu = _ref => {
 
   const iconActiveColor = _ui.colors.grey700;
   const iconInactiveColor = _ui.colors.grey500;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    onKeyDown: onKeyDown,
-    className: "jsx-".concat(_FileMenuStyles.fileMenuStyles.__hash)
-  }, /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: _FileMenuStyles.fileMenuStyles.__hash
-  }, _FileMenuStyles.fileMenuStyles), /*#__PURE__*/_react.default.createElement("div", {
-    ref: buttonRef,
-    className: "jsx-".concat(_FileMenuStyles.fileMenuStyles.__hash)
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    onClick: toggleMenu,
-    "data-test": "file-menu-toggle",
-    className: "jsx-".concat(_FileMenuStyles.fileMenuStyles.__hash) + " " + "menu-toggle"
-  }, _index.default.t('File'))), /*#__PURE__*/_react.default.createElement(_OpenFileDialog.OpenFileDialog, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OpenFileDialog.OpenFileDialog, {
     open: currentDialog === 'open',
     type: fileType,
     filterVisTypes: filterVisTypes,
@@ -170,45 +144,33 @@ const FileMenu = _ref => {
     },
     onNew: onNew,
     currentUser: currentUser
-  }), menuIsOpen && /*#__PURE__*/_react.default.createElement(_ui.Layer, {
-    onBackdropClick: toggleMenu,
-    position: "fixed",
-    level: 2000,
-    dataTest: "file-menu-toggle-layer"
-  }, /*#__PURE__*/_react.default.createElement(_ui.Popper, {
-    reference: buttonRef,
-    placement: "bottom-start"
-  }, /*#__PURE__*/_react.default.createElement(_ui.FlyoutMenu, {
+  }), /*#__PURE__*/_react.default.createElement(_index2.HoverMenuDropdown, {
+    label: _index.default.t('File')
+  }, /*#__PURE__*/_react.default.createElement(_index2.HoverMenuList, {
     dataTest: "file-menu-container"
-  }, /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
+  }, /*#__PURE__*/_react.default.createElement(_index2.HoverMenuListItem, {
     label: _index.default.t('New'),
     icon: /*#__PURE__*/_react.default.createElement(_ui.IconAdd24, {
       color: iconActiveColor
     }),
-    onClick: () => {
-      toggleMenu();
-      onNew();
-    },
+    onClick: onNew,
     dataTest: "file-menu-new"
-  }), /*#__PURE__*/_react.default.createElement(_ui.MenuDivider, null), /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
+  }), /*#__PURE__*/_react.default.createElement(_ui.MenuDivider, null), /*#__PURE__*/_react.default.createElement(_index2.HoverMenuListItem, {
     label: _index.default.t('Open…'),
     icon: /*#__PURE__*/_react.default.createElement(_ui.IconLaunch24, {
       color: iconActiveColor
     }),
     onClick: onMenuItemClick('open'),
     dataTest: "file-menu-open"
-  }), /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
+  }), /*#__PURE__*/_react.default.createElement(_index2.HoverMenuListItem, {
     label: fileObject !== null && fileObject !== void 0 && fileObject.id ? _index.default.t('Save') : _index.default.t('Save…'),
     icon: /*#__PURE__*/_react.default.createElement(_ui.IconSave24, {
       color: !onSave || !(!(fileObject !== null && fileObject !== void 0 && fileObject.id) || fileObject !== null && fileObject !== void 0 && (_fileObject$access = fileObject.access) !== null && _fileObject$access !== void 0 && _fileObject$access.update) ? iconInactiveColor : iconActiveColor
     }),
     disabled: !onSave || !(!(fileObject !== null && fileObject !== void 0 && fileObject.id) || fileObject !== null && fileObject !== void 0 && (_fileObject$access2 = fileObject.access) !== null && _fileObject$access2 !== void 0 && _fileObject$access2.update),
-    onClick: fileObject !== null && fileObject !== void 0 && fileObject.id ? () => {
-      toggleMenu();
-      onSave();
-    } : onMenuItemClick('saveas'),
+    onClick: fileObject !== null && fileObject !== void 0 && fileObject.id ? onSave : onMenuItemClick('saveas'),
     dataTest: "file-menu-save"
-  }), /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
+  }), /*#__PURE__*/_react.default.createElement(_index2.HoverMenuListItem, {
     label: _index.default.t('Save as…'),
     icon: /*#__PURE__*/_react.default.createElement(_ui.IconSave24, {
       color: !(onSaveAs && fileObject !== null && fileObject !== void 0 && fileObject.id) ? iconInactiveColor : iconActiveColor
@@ -216,7 +178,7 @@ const FileMenu = _ref => {
     disabled: !(onSaveAs && fileObject !== null && fileObject !== void 0 && fileObject.id),
     onClick: onMenuItemClick('saveas'),
     dataTest: "file-menu-saveas"
-  }), /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
+  }), /*#__PURE__*/_react.default.createElement(_index2.HoverMenuListItem, {
     label: _index.default.t('Rename…'),
     icon: /*#__PURE__*/_react.default.createElement(_ui.IconEdit24, {
       color: fileObject !== null && fileObject !== void 0 && fileObject.id && fileObject !== null && fileObject !== void 0 && (_fileObject$access3 = fileObject.access) !== null && _fileObject$access3 !== void 0 && _fileObject$access3.update ? iconActiveColor : iconInactiveColor
@@ -224,7 +186,7 @@ const FileMenu = _ref => {
     disabled: !(fileObject !== null && fileObject !== void 0 && fileObject.id && fileObject !== null && fileObject !== void 0 && (_fileObject$access4 = fileObject.access) !== null && _fileObject$access4 !== void 0 && _fileObject$access4.update),
     onClick: onMenuItemClick('rename'),
     dataTest: "file-menu-rename"
-  }), /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
+  }), /*#__PURE__*/_react.default.createElement(_index2.HoverMenuListItem, {
     label: _index.default.t('Translate…'),
     icon: /*#__PURE__*/_react.default.createElement(_ui.IconTranslate24, {
       color: fileObject !== null && fileObject !== void 0 && fileObject.id && fileObject !== null && fileObject !== void 0 && (_fileObject$access5 = fileObject.access) !== null && _fileObject$access5 !== void 0 && _fileObject$access5.update ? iconActiveColor : iconInactiveColor
@@ -232,7 +194,7 @@ const FileMenu = _ref => {
     disabled: !(fileObject !== null && fileObject !== void 0 && fileObject.id && fileObject !== null && fileObject !== void 0 && (_fileObject$access6 = fileObject.access) !== null && _fileObject$access6 !== void 0 && _fileObject$access6.update),
     onClick: onMenuItemClick('translate'),
     dataTest: "file-menu-translate"
-  }), /*#__PURE__*/_react.default.createElement(_ui.MenuDivider, null), /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
+  }), /*#__PURE__*/_react.default.createElement(_ui.MenuDivider, null), /*#__PURE__*/_react.default.createElement(_index2.HoverMenuListItem, {
     label: _index.default.t('Share…'),
     icon: /*#__PURE__*/_react.default.createElement(_ui.IconShare24, {
       color: fileObject !== null && fileObject !== void 0 && fileObject.id && fileObject !== null && fileObject !== void 0 && (_fileObject$access7 = fileObject.access) !== null && _fileObject$access7 !== void 0 && _fileObject$access7.manage ? iconActiveColor : iconInactiveColor
@@ -240,7 +202,7 @@ const FileMenu = _ref => {
     disabled: !(fileObject !== null && fileObject !== void 0 && fileObject.id && fileObject !== null && fileObject !== void 0 && (_fileObject$access8 = fileObject.access) !== null && _fileObject$access8 !== void 0 && _fileObject$access8.manage),
     onClick: onMenuItemClick('sharing'),
     dataTest: "file-menu-sharing"
-  }), /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
+  }), /*#__PURE__*/_react.default.createElement(_index2.HoverMenuListItem, {
     label: _index.default.t('Get link…'),
     icon: /*#__PURE__*/_react.default.createElement(_ui.IconLink24, {
       color: fileObject !== null && fileObject !== void 0 && fileObject.id ? iconActiveColor : iconInactiveColor
@@ -248,7 +210,7 @@ const FileMenu = _ref => {
     disabled: !(fileObject !== null && fileObject !== void 0 && fileObject.id),
     onClick: onMenuItemClick('getlink'),
     dataTest: "file-menu-getlink"
-  }), /*#__PURE__*/_react.default.createElement(_ui.MenuDivider, null), /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
+  }), /*#__PURE__*/_react.default.createElement(_ui.MenuDivider, null), /*#__PURE__*/_react.default.createElement(_index2.HoverMenuListItem, {
     label: _index.default.t('Delete'),
     destructive: true,
     icon: /*#__PURE__*/_react.default.createElement(_ui.IconDelete24, {
@@ -257,7 +219,7 @@ const FileMenu = _ref => {
     disabled: !(fileObject !== null && fileObject !== void 0 && fileObject.id && fileObject !== null && fileObject !== void 0 && (_fileObject$access10 = fileObject.access) !== null && _fileObject$access10 !== void 0 && _fileObject$access10.delete),
     onClick: onMenuItemClick('delete'),
     dataTest: "file-menu-delete"
-  })))), renderDialog());
+  }))), renderDialog());
 };
 
 exports.FileMenu = FileMenu;