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

package/dist/styles/mixins/_sidebar.scss

@@ -1,142 +1,142 @@
-@mixin openSidebarMenu() {
-    .blue-sidebar-hidden-on-open {
-        display: none;
-    }
-
-    .blue-sidebar-visible-on-open {
-        animation: fade-in 1s;
-        display: flex;
-    }
-
-    .blue-menu-item-label {
-        display: inline-block;
-    }
-
-    .blue-sidebar {
-        z-index: 42;
-        box-shadow: 0.6rem 6rem 6rem rgba(0, 0, 0, 0.4);
-        // background-color: darken($theme, 30%);
-    }
-
-    .blue-sidebar,
-    .blue-sidebar .blue-menu-item {
-        width: $bla-sidebar-width;
-    }
-
-    .blue-sidebar .blue-menu-item {
-        & > * {
-            width: auto;
-        }
-    }
-
-    .blue-sub-sidebar {
-        left: $bla-sidebar-width;
-    }
-
-    .blue-menu-item-dropdown-caret.caret {
-        display: flex;
-    }
-
-    .blue-menu-item-dropdown {
-        .blue-menu-item {
-            width: 100%;
-        }
-    }
-
-    /* search */
-    .blue-search {
-        background-color: $sidebar-search-bg;
-    }
-
-    .blue-search-btn {
-        display: none;
-    }
-
-    .blue-search-input-group {
-        display: flex;
-        align-items: center;
-    }
-
-    .blue-header-logo.sidebar {
-        transform: translateX(0);
-    }
-}
-
-@mixin blue-sidebar($width) {
-    .blue-menu-item {
-        color: $sidebar-color;
-        width: $normal-size;
-        height: $normal-size;
-        padding: 0.25rem 0.75rem;
-        font-size: $bla-btn-font-size;
-        display: flex;
-        align-items: center;
-        border-color: transparent;
-        @include slide-transition();
-
-        &:hover,
-        &:active {
-            color: $sidebar-color;
-            background-color: $sidebar-control-bg-hover !important;
-            border-color: transparent;
-        }
-
-        &.active::before {
-            content: "";
-            position: absolute;
-            top: 0.625rem;
-            bottom: 0.625rem;
-            left: 0;
-            width: 0.25rem;
-            background-color: $sidebar-indicator-color;
-            border-top-right-radius: 1rem;
-            border-bottom-right-radius: 1rem;
-            animation: sidebar-menu-item-indicator-in 0.2s ease-in-out;
-        }
-
-        & > * + .blue-menu-item-label {
-            margin-left: 0.5rem;
-        }
-    }
-
-    .blue-sidebar {
-        width: $width;
-        color: $sidebar-color;
-        background: var(--sidebar-bg);
-        position: fixed;
-        left: 0;
-        top: $normal-size;
-        bottom: 0;
-        z-index: 3;
-        display: flex;
-        flex-direction: column;
-        @include slide-transition();
-
-        .blue-menu {
-            overflow-y: auto;
-            flex: 1;
-            @include scroll-shadow(var(--sidebar-bg), $sidebar-bg);
-        }
-
-        &:hover {
-            .blue-menu-item {
-                background-color: var(--sidebar-bg);
-            }
-        }
-
-        .blue-menu-item {
-            & > * {
-                width: 100%;
-            }
-        }
-    }
-}
-
-@keyframes sidebar-menu-item-indicator-in {
-    from {
-        transform: translateX(-100%);
-    }
-    to {
-        transform: translateX(1);
-    }
-}
+@mixin openSidebarMenu() {
+    .blue-sidebar-hidden-on-open {
+        display: none;
+    }
+
+    .blue-sidebar-visible-on-open {
+        animation: fade-in 1s;
+        display: flex;
+    }
+
+    .blue-menu-item-label {
+        display: inline-block;
+    }
+
+    .blue-sidebar {
+        z-index: 42;
+        box-shadow: 0.6rem 6rem 6rem rgba(0, 0, 0, 0.4);
+        // background-color: darken($theme, 30%);
+    }
+
+    .blue-sidebar,
+    .blue-sidebar .blue-menu-item {
+        width: $bla-sidebar-width;
+    }
+
+    .blue-sidebar .blue-menu-item {
+        & > * {
+            width: auto;
+        }
+    }
+
+    .blue-sub-sidebar {
+        left: $bla-sidebar-width;
+    }
+
+    .blue-menu-item-dropdown-caret.caret {
+        display: flex;
+    }
+
+    .blue-menu-item-dropdown {
+        .blue-menu-item {
+            width: 100%;
+        }
+    }
+
+    /* search */
+    .blue-search {
+        background-color: $sidebar-search-bg;
+    }
+
+    .blue-search-btn {
+        display: none;
+    }
+
+    .blue-search-input-group {
+        display: flex;
+        align-items: center;
+    }
+
+    .blue-header-logo.sidebar {
+        transform: translateX(0);
+    }
+}
+
+@mixin blue-sidebar($width) {
+    .blue-menu-item {
+        color: $sidebar-color;
+        width: $normal-size;
+        height: $normal-size;
+        padding: 0.25rem 0.75rem;
+        font-size: $bla-btn-font-size;
+        display: flex;
+        align-items: center;
+        border-color: transparent;
+        @include slide-transition();
+
+        &:hover,
+        &:active {
+            color: $sidebar-color;
+            background-color: $sidebar-control-bg-hover !important;
+            border-color: transparent;
+        }
+
+        &.active::before {
+            content: "";
+            position: absolute;
+            top: 0.625rem;
+            bottom: 0.625rem;
+            left: 0;
+            width: 0.25rem;
+            background-color: $sidebar-indicator-color;
+            border-top-right-radius: 1rem;
+            border-bottom-right-radius: 1rem;
+            animation: sidebar-menu-item-indicator-in 0.2s ease-in-out;
+        }
+
+        & > * + .blue-menu-item-label {
+            margin-left: 0.5rem;
+        }
+    }
+
+    .blue-sidebar {
+        width: $width;
+        color: $sidebar-color;
+        background: var(--sidebar-bg);
+        position: fixed;
+        left: 0;
+        top: $normal-size;
+        bottom: 0;
+        z-index: 3;
+        display: flex;
+        flex-direction: column;
+        @include slide-transition();
+
+        .blue-menu {
+            overflow-y: auto;
+            flex: 1;
+            @include scroll-shadow(var(--sidebar-bg), $sidebar-bg);
+        }
+
+        &:hover {
+            .blue-menu-item {
+                background-color: var(--sidebar-bg);
+            }
+        }
+
+        .blue-menu-item {
+            & > * {
+                width: 100%;
+            }
+        }
+    }
+}
+
+@keyframes sidebar-menu-item-indicator-in {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(1);
+    }
+}

package/dist/styles/mixins/_switch.scss

@@ -1,85 +1,85 @@
-@mixin switch(
-    $width: 35px,
-    $height: 20px,
-    $padding: 3px,
-    $color: $body-color,
-    $color-active: $success
-) {
-    $slider-size: $height - ($padding * 2);
-
-    & {
-        position: relative;
-        display: inline-block;
-        width: $width;
-        height: $height;
-
-        input {
-            display: none;
-        }
-
-        &.disabled {
-            opacity: 0.8;
-        }
-
-        &:not(.disabled) {
-            .slider {
-                cursor: pointer;
-            }
-        }
-
-        .slider {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: $input-group-addon-bg;
-            transition: 0.4s;
-            box-shadow: inset 0 0 0 1px rgba($color, 0.5);
-
-            &::before {
-                content: "";
-                position: absolute;
-                height: $slider-size;
-                width: $slider-size;
-                left: $padding;
-                bottom: $padding;
-                background-color: $color;
-                transition: 0.4s;
-            }
-
-            &::after {
-                content: attr(data-label);
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                margin-left: ($slider-size / 2);
-                transition: margin-left 0.4s;
-                color: $color;
-            }
-        }
-
-        input:checked {
-            & + .slider {
-                background-color: $color-active;
-                box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3);
-
-                &::before {
-                    transform: translateX(
-                        $width - $slider-size - ($padding * 2)
-                    );
-                    background-color: white;
-                }
-
-                &::after {
-                    color: white;
-                    margin-left: ($slider-size / 2) * -1;
-                }
-            }
-        }
-        input:focus + .slider {
-            box-shadow: 0 0 1px $color-active;
-        }
-    }
-}
+@mixin switch(
+    $width: 35px,
+    $height: 20px,
+    $padding: 3px,
+    $color: $body-color,
+    $color-active: $success
+) {
+    $slider-size: $height - ($padding * 2);
+
+    & {
+        position: relative;
+        display: inline-block;
+        width: $width;
+        height: $height;
+
+        input {
+            display: none;
+        }
+
+        &.disabled {
+            opacity: 0.8;
+        }
+
+        &:not(.disabled) {
+            .slider {
+                cursor: pointer;
+            }
+        }
+
+        .slider {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: $input-group-addon-bg;
+            transition: 0.4s;
+            box-shadow: inset 0 0 0 1px rgba($color, 0.5);
+
+            &::before {
+                content: "";
+                position: absolute;
+                height: $slider-size;
+                width: $slider-size;
+                left: $padding;
+                bottom: $padding;
+                background-color: $color;
+                transition: 0.4s;
+            }
+
+            &::after {
+                content: attr(data-label);
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                margin-left: ($slider-size * 0.5);
+                transition: margin-left 0.4s;
+                color: $color;
+            }
+        }
+
+        input:checked {
+            & + .slider {
+                background-color: $color-active;
+                box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3);
+
+                &::before {
+                    transform: translateX(
+                        $width - $slider-size - ($padding * 2)
+                    );
+                    background-color: white;
+                }
+
+                &::after {
+                    color: white;
+                    margin-left: ($slider-size * 0.5) * -1;
+                }
+            }
+        }
+        input:focus + .slider {
+            box-shadow: 0 0 1px $color-active;
+        }
+    }
+}

package/dist/types/components/Layout.d.ts

@@ -70,16 +70,23 @@ export interface LayoutState {
 }
 /**
  * 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`
  */
 export default class Layout extends Component<LayoutProps, LayoutState> {
     defaultMatch: string[];
@@ -105,6 +112,8 @@ export default class Layout extends Component<LayoutProps, LayoutState> {
     toggleSidebar(event: any): void;
     hideSidebar(e: any): void;
     initMatch(): void;
-    addEventListener(param1: any, param2: any, param3: any): void;
+    addEventListener(param1: any, param2: any, param3: any, listenerId?: string): void;
+    removeEventListener(type: string, listenerId: string): void;
+    removeDuplicatedEventListeners(): void;
     render(): JSX.Element;
 }

package/dist/types/components/Modal.d.ts

@@ -19,6 +19,6 @@ export interface ModalProps {
  * 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.
  */
 export default function Modal({ modalContent, unSetModalContent, onSubmit, defaultInput, type }: ModalProps): JSX.Element;