blue-react 8.0.0-next.1 → 8.0.0-next.5

package/dist/components/Layout.js

@@ -41,16 +41,23 @@ window.toggleSidebarEvent = new CustomEvent("toggleSidebar");
 
 /**
  * The main component. As soon this component is mounted, it is globally available under `window.blueLayoutRef`.
- * Also you can append your own event listeners with `blueLayoutRef.addEventListener(eventName, (prevProps, prevState) => { })`.
+ * You can also append your own event listeners.
  *
- * Allowed event listeners:
+ * Allowed events:
  *
  * * **componentDidUpdate** - Component was updated.
- *   Example: `blueLayoutRef.addEventListener("componentDidUpdate", (prevProps, prevState) => { })`
+ *   Example: `window.blueLayoutRef.addEventListener("componentDidUpdate", (prevProps, prevState) => { })`
  * * **pageDidShowAgain** - Page appeared again with the same old state. In the callback function you can reinitialize things.
- *   Example: `blueLayoutRef.addEventListener("pageDidShowAgain", "home", (prevProps, prevState) => { })`
+ *   Example: `window.blueLayoutRef.addEventListener("pageDidShowAgain", "home", (prevProps, prevState) => { })`
  * * **pageDidHide** - This page disappeared and another page appears instead.
- *   Example: `blueLayoutRef.addEventListener("pageDidHide", "home", (prevProps, prevState) => { })`
+ *   Example: `window.blueLayoutRef.addEventListener("pageDidHide", "home", (prevProps, prevState) => { })`
+ *
+ * Method to add event listeners:
+ * * `window.blueLayoutRef.`**addEventListener**`(eventName: string, param2: any, param3: any, listenerId?: string)`
+ *
+ * Methods to remove event listeners:
+ * * `window.blueLayoutRef.`**removeEventListener**`(eventName: string, listenerId: string)`
+ * * `window.blueLayoutRef.`**removeDuplicatedEventListeners**`()` - Will automatically be called when running `addEventListener`
  */
 var Layout = /*#__PURE__*/function (_Component) {
   _inherits(Layout, _Component);
@@ -198,8 +205,29 @@ var Layout = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "addEventListener",
-    value: function addEventListener(param1, param2, param3) {
-      this.eventListeners.push([param1, param2, param3]);
+    value: function addEventListener(param1, param2, param3, listenerId) {
+      this.eventListeners.push([param1, param2, param3, listenerId]);
+      this.removeDuplicatedEventListeners();
+    }
+  }, {
+    key: "removeEventListener",
+    value: function removeEventListener(type, listenerId) {
+      this.eventListeners = this.eventListeners.filter(function (param) {
+        if (param[0] !== type) {
+          return param;
+        } else if (param[0] === type && param[3] !== listenerId) {
+          return param;
+        }
+      });
+    }
+  }, {
+    key: "removeDuplicatedEventListeners",
+    value: function removeDuplicatedEventListeners() {
+      this.eventListeners = this.eventListeners.filter(function (value, index, self) {
+        return index === self.findIndex(function (t) {
+          return t[3] === value[3] && t[0] === value[0];
+        });
+      });
     }
   }, {
     key: "render",

package/dist/components/Modal.js

@@ -33,7 +33,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * Simple modal/dialog. Designed to work as an alternative to JavaScript's native `alert()`, `prompt()` and `confirm()` functions.
  * It uses Bootstrap's Modal components.
  *
- * For easy use, you should use the hook `useModal` together with `ModalProvider`. See the example below.
+ * For easy use, you should use the hook `useModal` together with `ModalProvider`. See the example there.
  */
 function Modal(_ref) {
   var modalContent = _ref.modalContent,
@@ -75,6 +75,17 @@ function Modal(_ref) {
   var btnStyle = {
     maxWidth: "10rem"
   };
+
+  var focusFirstControl = function focusFirstControl() {
+    var myModal = modalRef.current;
+    myModal.removeEventListener("shown.bs.modal", focusFirstControl);
+    var firstControl = myModal.querySelector(".btn, .form-control");
+
+    if (firstControl) {
+      firstControl.focus();
+    }
+  };
+
   (0, _react.useEffect)(function () {
     setInput(defaultInput || "");
   }, [defaultInput]);
@@ -91,7 +102,10 @@ function Modal(_ref) {
         cancel();
       });
     } else {
-      modalContent !== undefined ? bsModal.show() : bsModal.hide();
+      modalContent !== undefined ? bsModal.show() : bsModal.hide(); // Will focus first button or text field inside of modal when it is shown.
+      // For accessibility: This way you can control the modal actions with a keyboard.
+
+      myModal.addEventListener("shown.bs.modal", focusFirstControl);
     }
   }, [modalContent]);
   return /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/Outside.js

@@ -14,13 +14,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-/**
- * Hook that alerts clicks outside of the passed ref
+/**
+ * Hook that alerts clicks outside of the passed ref
  */
 function useOutside(ref, callback) {
   (0, _react.useEffect)(function () {
-    /**
-     * Alert if clicked on outside of element
+    /**
+     * Alert if clicked on outside of element
      */
     function handleClickOutside(event) {
       if (ref.current && !ref.current.contains(event.target) && callback) {
@@ -37,8 +37,8 @@ function useOutside(ref, callback) {
   }, [ref]);
 }
 
-/**
- * Component that fires an event if you click outside of it
+/**
+ * Component that fires an event if you click outside of it
  */
 function Outside(_ref) {
   var children = _ref.children,

package/dist/components/Page.js

@@ -29,8 +29,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-/**
- * Main component for each page.
+/**
+ * Main component for each page.
  */
 function Page(_ref) {
   var children = _ref.children,

package/dist/components/SidebarMenu.js

@@ -25,8 +25,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-/**
- * Sidebar for the `Layout` component.
+/**
+ * Sidebar for the `Layout` component.
  */
 function SidebarMenu(props) {
   var _useState = (0, _react.useState)(false),

package/dist/components/Switch.js

@@ -13,8 +13,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-/**
- * Switch.
+/**
+ * Switch.
  */
 function Switch(_ref) {
   var className = _ref.className,