@agilemotion/oui-react-js 1.6.8 → 1.7.0

package/dist/components/Toolbar.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Observable = _interopRequireDefault(require("../event/Observable"));
 var _core = require("@material-ui/core");
 var _ToggleButtonGroup = _interopRequireDefault(require("@material-ui/lab/ToggleButtonGroup"));
@@ -13,8 +13,34 @@ var _Button = _interopRequireDefault(require("./Button"));
 var _Utils = _interopRequireDefault(require("../Utils"));
 var _styles = require("@material-ui/core/styles");
 var _Icon = _interopRequireDefault(require("./Icon"));
+var _ToolbarButton = _interopRequireDefault(require("./media/ToolbarButton"));
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
+var _MenuList = _interopRequireDefault(require("@material-ui/core/MenuList"));
+var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
+var _MenuItem = _interopRequireDefault(require("./menu/MenuItem"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const useStyles = (0, _styles.makeStyles)(theme => ({
+  root: {
+    display: 'flex'
+  },
+  paper: {
+    marginRight: theme.spacing(2)
+  },
+  MuiButtonWhite: {
+    color: '#fff'
+  },
+  wrapper: {
+    maxHeight: "32px",
+    minwidth: "60px",
+    zIndex: 2
+  },
   spacer: {
     borderLeft: '2px solid' + theme.palette.secondary.main,
     height: '100%'
@@ -33,13 +59,39 @@ const StyledToggleButtonGroup = (0, _core.withStyles)(theme => ({
     }
   }
 }))(_ToggleButtonGroup.default);
-const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Toolbar = props => {
   const classes = useStyles();
-  const [itemHandles] = _react.default.useState([]);
-  const [alignment] = _react.default.useState(_Utils.default.getComponentAttribute(props.config, 'alignment', 'left'));
+  const [buttonItemHandles] = _react.default.useState({});
+  const [menuItemHandles] = _react.default.useState({});
   const [config, setConfig] = _react.default.useState(null);
-  let itemKeyCounter = 0;
+  const [buttonVisibility, setButtonVisibility] = (0, _react.useState)({});
+  const [allButtonsVisible, setAllButtonsVisible] = (0, _react.useState)(false);
+  const [allItems] = (0, _react.useState)([]);
+  const [open, setOpen] = _react.default.useState(false);
+  const anchorRef = _react.default.useRef(null);
+  const ref = (0, _react.useRef)();
+  const sectionContainerRef = (0, _react.useRef)();
   let sectionKeyCounter = 0;
+  const handleVisibilityChange = (id, visible) => {
+    buttonVisibility[id] = visible;
+    let allVisible = true;
+    Object.keys(buttonVisibility).forEach(key => {
+      if (buttonVisibility[key] === false) {
+        allVisible = false;
+      }
+    });
+    setAllButtonsVisible(allVisible);
+    setButtonVisibility(JSON.parse(JSON.stringify(buttonVisibility)));
+  };
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = event => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
   _react.default.useEffect(() => {
     props.handle.api = api();
   });
@@ -49,6 +101,11 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       let parsedConfig = _Utils.default.parseConfig(config, props.viewId);
       _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
       _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
+      for (const section of config.sections) {
+        for (const item of section.items) {
+          allItems.push(item);
+        }
+      }
     }
   }, [config]);
   _react.default.useEffect(() => {
@@ -57,11 +114,27 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       id: props.config.id + '_' + props.tableRow.id?.replaceAll('-', '')
     } : props.config);
   }, []);
-  function createItemHandle() {
+  function createButtonItemHandle(id) {
+    let _id = props.tableRow ? id + '_' + props.tableRow.id?.replaceAll('-', '') : id;
+    if (buttonItemHandles[_id]) {
+      return buttonItemHandles[_id];
+    }
     let handle = {};
-    itemHandles.push(handle);
+    buttonItemHandles[_id] = handle;
     return handle;
   }
+  function createMenuItemHandle(id) {
+    let _id = props.tableRow ? id + '_' + props.tableRow.id?.replaceAll('-', '') : id;
+    if (menuItemHandles[_id]) {
+      return menuItemHandles[_id];
+    }
+    let handle = {};
+    menuItemHandles[_id] = handle;
+    return handle;
+  }
+  const handleToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
   function getDefaultStyle(item) {
     return {
       height: item.type === 'toolbarSpacer' ? item.attributes?.style?.height ? item.attributes?.style?.height : '100%' : null,
@@ -77,23 +150,35 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     if (_Utils.default.isNull(item.id)) {
       item.id = defaultId;
     }
-    return item.type === 'menuButton' ? /*#__PURE__*/_react.default.createElement(_MenuButton.default, {
+    return item.type === 'menuButton' ? /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+      root: sectionContainerRef,
+      onVisibilityChange: visible => handleVisibilityChange(item.id, visible)
+    }, /*#__PURE__*/_react.default.createElement(_MenuButton.default, {
       config: item,
-      handle: createItemHandle(),
+      handle: createButtonItemHandle(item.id),
       ref: /*#__PURE__*/_react.default.createRef(),
       tableRow: props.tableRow,
       viewId: props.viewId
-    }) : item.type === 'button' ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    })) : item.type === 'button' ? /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+      root: sectionContainerRef,
+      onVisibilityChange: visible => handleVisibilityChange(item.id, visible)
+    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
       config: item,
-      handle: createItemHandle(),
+      handle: createButtonItemHandle(item.id),
       ref: /*#__PURE__*/_react.default.createRef(),
       tableRow: props.tableRow,
       viewId: props.viewId
-    }) : item.type === 'toolbarSpacer' ? /*#__PURE__*/_react.default.createElement("div", {
+    })) : item.type === 'toolbarSpacer' ? /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+      root: sectionContainerRef,
+      onVisibilityChange: visible => handleVisibilityChange(item.id, visible)
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: classes.spacer
-    }, "\xA0") : item.type === 'icon' ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    }, "\xA0")) : item.type === 'icon' ? /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+      root: sectionContainerRef,
+      onVisibilityChange: visible => handleVisibilityChange(item.id, visible)
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
       id: _Utils.default.getComponentAttribute(item, 'iconId', null)
-    }) : /*#__PURE__*/_react.default.createElement("div", null, "Unsupported toolbar item type " + item.type);
+    })) : /*#__PURE__*/_react.default.createElement("div", null, "Unsupported toolbar item type " + item.type);
   }
   function renderSection(section, counter) {
     let itemCounter = 0;
@@ -104,18 +189,22 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       "aria-label": "text alignment",
       style: _Utils.default.mergeStyles({
         minWidth: '128px',
+        maxWidth: '100%',
         height: '100%',
         marginLeft: 0,
-        marginRight: 0
+        marginRight: 0,
+        position: 'relative'
       }, section)
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "row"
+      className: "row flex-nowrap"
     }, section.items.map((item, index) => {
+      let defaultId = 'toolbar_item_' + counter + '_' + itemCounter++;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: 'col-*-*',
+        id: item.id ? item.id : defaultId,
         key: index,
         style: getDefaultStyle(item)
-      }, renderItem(item, 'toolbar_item_' + counter + '_' + itemCounter++));
+      }, renderItem(item, defaultId));
     })));
   }
   const api = () => {
@@ -128,31 +217,116 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         return props.tableRow;
       },
       getChildren: () => {
-        return itemHandles;
+        let children = [];
+        let properties = Object.getOwnPropertyNames(buttonItemHandles);
+        for (const property of properties) {
+          let itemHandle = buttonItemHandles[property];
+          children.push(itemHandle);
+        }
+        properties = Object.getOwnPropertyNames(menuItemHandles);
+        for (const property of properties) {
+          let itemHandle = menuItemHandles[property];
+          children.push(itemHandle);
+        }
+        return children;
       }
     };
   };
   function render(toolbar) {
     let counter = 0;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "row no-margin no-padding",
+      className: "row no-margin no-padding flex-nowrap",
       ref: ref
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: 'calc(100% - 40px)'
+      },
+      ref: sectionContainerRef
     }, toolbar.sections.map((section, index) => {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "col no-margin no-padding",
         key: index,
         style: {
-          textAlign: section.halign ? section.halign.toLowerCase() : null
+          textAlign: section.halign ? section.halign.toLowerCase() : null,
+          maxWidth: '100%'
         }
       }, renderSection(section, counter++));
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: '32px',
+        height: '44px',
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, !allButtonsVisible && /*#__PURE__*/_react.default.createElement("div", {
+      className: 'col-*-* more-button-wrapper',
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+      title: "More"
+    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      style: {
+        marginRight: '4px',
+        width: '20px',
+        height: '20px'
+      },
+      ref: anchorRef,
+      "aria-controls": "menu-list-grow",
+      "aria-haspopup": "true",
+      onClick: handleToggle
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'MORE'
+    }))))), /*#__PURE__*/_react.default.createElement(_Popper.default, {
+      open: open,
+      anchorEl: anchorRef.current,
+      keepMounted: true,
+      transition: true,
+      disablePortal: true,
+      style: {
+        zIndex: 1000
+      }
+    }, _ref => {
+      let {
+        TransitionProps,
+        placement
+      } = _ref;
+      return /*#__PURE__*/_react.default.createElement(_Grow.default, _extends({}, TransitionProps, {
+        style: {
+          transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
+        }
+      }), /*#__PURE__*/_react.default.createElement(_Paper.default, {
+        id: "menu-list-grow"
+      }, /*#__PURE__*/_react.default.createElement(_ClickAwayListener.default, {
+        onClickAway: handleClose
+      }, /*#__PURE__*/_react.default.createElement(_MenuList.default, {
+        style: {
+          background: "#ffffff",
+          opacity: "1"
+        }
+      }, allItems.map((item, index) => {
+        if (!buttonVisibility[item.id]) {
+          return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+            config: item,
+            viewId: props.viewId,
+            key: index,
+            handle: createMenuItemHandle(item.id),
+            tableRow: props.tableRow,
+            ref: /*#__PURE__*/_react.default.createRef()
+          });
+        }
+      })))));
     }));
   }
   return /*#__PURE__*/_react.default.createElement("div", {
+    id: props.config.id,
     ref: ref,
     style: _Utils.default.mergeStyles({
       borderBottom: '1px solid #e2e2e2',
-      padding: '8px 0 16px 0'
+      padding: '4px 0 0 0',
+      overflow: 'hidden'
     }, props.config)
   }, render(props.config));
-});
+};
 var _default = exports.default = Toolbar;

package/dist/components/UseIsVisible.js

@@ -6,18 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.useIsVisible = useIsVisible;
 var _react = require("react");
 function useIsVisible(ref) {
+  let root = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   const [isIntersecting, setIntersecting] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
-    const observer = new IntersectionObserver(_ref => {
-      let [entry] = _ref;
-      return setIntersecting(entry.isIntersecting);
-    }, {
-      threshold: 1
-    });
-    observer.observe(ref.current);
-    return () => {
-      observer.disconnect();
-    };
-  }, [ref]);
+    if (ref && root) {
+      const observer = new IntersectionObserver(_ref => {
+        let [entry] = _ref;
+        setIntersecting(entry.isIntersecting);
+      }, {
+        threshold: 1,
+        root
+      });
+      observer.observe(ref.current);
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [ref, root]);
   return isIntersecting;
 }

package/dist/components/dashboard/FoldingSideTabDashboard.js

@@ -125,7 +125,6 @@ const FoldingSideTabDashboard = props => {
       newRoute.level = 0;
       newRoute.isParent = true;
       newRoutes.push(newRoute);
-      console.log(props.settings.systemProfileDto);
       if (!_Utils.default.isNull(props.settings.systemProfileDto.modules)) {
         for (let i = 0; i < props.settings.systemProfileDto.modules.length; i++) {
           let module = props.settings.systemProfileDto.modules[i];