@steroidsjs/bootstrap 3.0.0-beta.12 → 3.0.0-beta.120

package/layout/Loader/LoaderView.js

@@ -25,9 +25,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var content_1 = require("@steroidsjs/core/ui/content");
 function LoaderView(props) {
     var bem = (0, hooks_1.useBem)('LoaderView');
-    return (React.createElement("div", { className: bem.block() },
-        React.createElement("div", { className: bem.element('loader') })));
+    return (React.createElement("div", { className: bem.block({
+            color: props.color,
+            size: props.size
+        }) },
+        React.createElement(content_1.Icon, { className: bem.element('icon'), name: 'loading_purple' })));
 }
 exports["default"] = LoaderView;

package/layout/Loader/LoaderView.scss

@@ -1,27 +1,75 @@
+@use "../../scss/variables";
+@use '../../scss/mixins';
+
+:root {
+  --gradient-color-primary-first: #651FFF;
+  --gradient-color-primary-second: #BA9BFF;
+}
+
+html[data-theme="dark"] { 
+  --gradient-color-primary-first: #9362FF;
+  --gradient-color-primary-second: #B898FF;
+}
+
+$gradient-color-primary-first: var(--gradient-color-primary-first);
+$gradient-color-primary-second: var(--gradient-color-primary-second);
+
 .LoaderView {
-  position: relative;
-  width: 100%;
-
-  &__loader {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin: -27px 0 0 -27px;
-    z-index: 20;
-    font-size: 10px;
-    text-indent: -9999em;
-    border-top: .9em solid rgba(246, 168, 33, 0.2);
-    border-right: .9em solid rgba(246, 168, 33, 0.2);
-    border-bottom: .9em solid rgba(246, 168, 33, 0.2);
-    border-left: .9em solid #db001f;
-    transform: translateZ(0);
+  $root: &;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &_size {
+    &_sm {
+      svg {
+        height: 33px;
+        width: 33px;
+        path {
+          stroke-width: 4px;
+        }
+      }
+    }
+    &_md {
+      svg {
+        height: 44px;
+        width: 44px;
+        path {
+          stroke-width: 6px;
+        }
+      }
+    }
+    &_lg {
+      svg {
+        height: 55px;
+        width: 55px;
+        path {
+          stroke-width: 7px;
+        }
+      }
+    }
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     animation: Loader-spin 1.1s infinite linear;
-    opacity: 1 !important;
+  }
 
-    &, &::after {
-      border-radius: 50%;
-      width: 5em;
-      height: 5em;
+  &_color_gradient {
+    svg stop:first-child {
+      stop-color: $gradient-color-primary-first;
+    }
+    svg stop:last-child {
+      stop-color: $gradient-color-primary-second;
+    }
+  }
+
+  @each $colorName, $colorMap in variables.$color-themes {
+    &_color_#{$colorName} {
+        @include mixins.loader-color($colorMap, $colorName, $root);
     }
   }
 }
@@ -35,4 +83,4 @@
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
-}
+}

package/layout/Notifications/NotificationsItemView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INotificationsItemViewProps } from '@steroidsjs/core/ui/layout/Notifications/Notifications';
-export default function NotificationsItemView(props: INotificationsItemViewProps & IBemHocOutput): JSX.Element;
+export default function NotificationsItemView(props: INotificationsItemViewProps): JSX.Element;

package/layout/Notifications/NotificationsItemView.js

@@ -22,11 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var react_transition_group_1 = require("react-transition-group");
 var hooks_1 = require("@steroidsjs/core/hooks");
+var AlertView_1 = __importDefault(require("../../content/Alert/AlertView"));
 function NotificationsItemView(props) {
     var _a, _b;
     var _c = (0, react_1.useState)(false), isShow = _c[0], setIsShow = _c[1];
@@ -34,15 +38,12 @@ function NotificationsItemView(props) {
         setIsShow(!props.isClosing);
     }, [props.isClosing]);
     var bem = (0, hooks_1.useBem)('NotificationsItemView');
-    return (React.createElement(react_transition_group_1.CSSTransition, { "in": isShow, timeout: 1000, classNames: bem(bem.block((_a = {},
+    return (React.createElement(react_transition_group_1.CSSTransition, { "in": isShow, timeout: 1000, classNames: bem.block((_a = {},
             _a[props.position] = true,
-            _a))), unmountOnExit: true },
-        React.createElement("div", { className: bem(bem.block((_b = {},
-                _b[props.level] = true,
+            _a)), unmountOnExit: true },
+        React.createElement("div", { className: bem.block((_b = {},
                 _b[props.position] = true,
-                _b)), 'alert', 'alert-' + props.level) },
-            React.createElement("div", { className: bem.element('body') },
-                React.createElement("div", { className: bem.element('message') }, props.message),
-                React.createElement("button", { className: bem.element('close'), onClick: props.onClose })))));
+                _b)) },
+            React.createElement(AlertView_1["default"], { onClose: props.onClose, message: props.message, type: props.level, showClose: true, isExist: true, isVisible: true, showIcon: true }))));
 }
 exports["default"] = NotificationsItemView;

package/layout/Notifications/NotificationsItemView.scss

@@ -1,94 +1,66 @@
-.NotificationsItemView {
-  overflow: hidden;
-  max-height: 120px;
-  padding: 0;
-
-  border-width: 0;
-  box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.1);
-
-  transition: opacity .6s, transform .4s,
-  max-height .6s .4s, margin .6s .6s;
-
-  &__body{
-    width: 100%;
-    height: 100%;
+@use "style/variables";
 
-    padding: 0.75rem 1.8rem 0.75rem 1.25rem;
-    border: 1px solid transparent;
-    border-color: inherit;
-  }
-
-  &__close{
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 25px;
-    height: 25px;
+.NotificationsItemView {
+    overflow: hidden;
+    max-height: 120px;
+    padding: 0;
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    border-width: 0;
 
-    .IconView{
-      svg{
-        width: 10px;
-      }
-    }
+    transition:
+        opacity 0.6s,
+        transform 0.4s,
+        max-height 0.6s 0.4s,
+        margin 0.6s 0.6s;
+    // Styles for React-Transition-Groups
+    ////////////////////////////////////////
+    ///
 
-    svg{
-      opacity: 0.4;
-      transition: opacity .1s ease-in;
-    }
-    &:hover svg{
-      opacity: 1;
+    // Opacity + Size
+    &_top-right,
+    &_bottom-right,
+    &_top-left,
+    &_bottom-left {
+        &-enter {
+            opacity: 0;
+        }
+        &-enter-active {
+            opacity: 1;
+        }
+        &-exit {
+            opacity: 1;
+        }
+        &-exit-active {
+            opacity: 0;
+            max-height: 0;
+            margin: 0;
+        }
     }
-  }
 
-
-  // Styles for React-Transition-Groups
-  ////////////////////////////////////////
-
-  // Opacity + Size
-  &_top-right,&_bottom-right,&_top-left,&_bottom-left{
-    &-enter {
-      opacity: 0;
-    }
-    &-enter-active {
-      opacity: 1;
-    }
-    &-exit {
-      opacity: 1;
+    // Transform-Translate
+    &_top-right,
+    &_bottom-right {
+        &-enter {
+            transform: translateX(450px);
+        }
+        &-enter-active {
+            transform: translateX(0px);
+        }
+        &-exit-active {
+            transform: translateX(450px);
+        }
     }
-    &-exit-active {
-      opacity: 0;
-      max-height: 0;
-      margin: 0;
-    }
-  }
-
-  // Transform-Translate
-  &_top-right,&_bottom-right{
-     &-enter {
-       transform: translateX(450px);
-     }
-     &-enter-active {
-       transform: translateX(0px);
-     }
-     &-exit-active {
-       transform: translateX(450px);
-     }
-   }
 
-  &_top-left,&_bottom-left{
-    &-enter {
-      transform: translateX(-450px);
-    }
-    &-enter-active {
-      transform: translateX(0px);
-    }
-    &-exit-active {
-      transform: translateX(-450px);
+    &_top-left,
+    &_bottom-left {
+        &-enter {
+            transform: translateX(-450px);
+        }
+        &-enter-active {
+            transform: translateX(0px);
+        }
+        &-exit-active {
+            transform: translateX(-450px);
+        }
     }
-  }
 }

package/layout/Notifications/NotificationsView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INotificationsViewProps } from '@steroidsjs/core/ui/layout/Notifications/Notifications';
-export default function NotificationsView(props: INotificationsViewProps & IBemHocOutput): JSX.Element;
+export default function NotificationsView(props: INotificationsViewProps): JSX.Element;

package/layout/Notifications/NotificationsView.scss

@@ -1,7 +1,10 @@
 .NotificationsView {
   z-index: 9999;
   position: fixed;
-  width: 400px;
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  min-width: 300px;
 
   margin: 0;
 

package/layout/ProgressBar/CircleProgressBarView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IProgressBarViewProps } from '@steroidsjs/core/ui/layout/ProgressBar/ProgressBar';
-export default function CircleProgressBarView(props: IProgressBarViewProps & IBemHocOutput): JSX.Element;
+export default function CircleProgressBarView(props: IProgressBarViewProps): JSX.Element;

package/layout/ProgressBar/CircleProgressBarView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables";
+
 .CircleProgressBarView{
   $root: &;
 
@@ -84,31 +86,31 @@
   &_status{
     &_success{
       #{$root}__progressCircle{
-        stroke: $success;
+        stroke: variables.$success;
       }
 
       #{$root}__content{
         svg{
-          fill: $success;
+          fill: variables.$success;
         }
       }
     }
 
     &_exception{
       #{$root}__progressCircle{
-        stroke: $danger;
+        stroke: variables.$danger;
       }
 
       #{$root}__content{
         svg{
-          fill: $danger;
+          fill: variables.$danger;
         }
       }
     }
 
     &_normal{
       #{$root}__progressCircle{
-        stroke: $primary;
+        stroke: variables.$primary;
       }
     }
   }
@@ -123,7 +125,7 @@
 
 
     #{$root}__emptyCircle{
-      stroke: $back-disabled;
+      stroke: variables.$back-disabled;
       stroke-dashoffset: 0;
     }
 
@@ -142,7 +144,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: $secondary-dark;
+    color: variables.$secondary-dark;
     font-weight: bold;
     transform: rotate(90deg);
   }

package/layout/ProgressBar/LineProgressBarView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IProgressBarViewProps } from '@steroidsjs/core/ui/layout/ProgressBar/ProgressBar';
-export default function LineProgressBarView(props: IProgressBarViewProps & IBemHocOutput): JSX.Element;
+export default function LineProgressBarView(props: IProgressBarViewProps): JSX.Element;

package/layout/ProgressBar/LineProgressBarView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables";
+
 .LineProgressBarView{
   $root: &;
 
@@ -35,27 +37,27 @@
   &_status{
     &_success{
       #{$root}__progressLine{
-        background-color: $success;
+        background-color: variables.$success;
       }
 
       svg{
-          fill: $success;
+          fill: variables.$success;
       }
     }
 
     &_exception{
       #{$root}__progressLine{
-        background-color: $danger;
+        background-color: variables.$danger;
       }
 
       svg{
-        fill: $danger;
+        fill: variables.$danger;
       }
     }
 
     &_normal{
       #{$root}__progressLine{
-        background-color: $primary;
+        background-color: variables.$primary;
       }
     }
 
@@ -63,7 +65,7 @@
 
   &__emptyLine{
     position: relative;
-    background-color: $back-disabled;
+    background-color: variables.$back-disabled;
     border-radius: 20px;
   }
 
@@ -85,7 +87,7 @@
         content: "";
         position: absolute;
         transform: translateX(-100%);
-        background: linear-gradient(90deg, transparent, rgba($white, 0.5), transparent);
+        background: linear-gradient(90deg, transparent, rgba(variables.$white, 0.5), transparent);
         animation: wave-animation 1.6s linear 0.5s infinite;
     }
 
@@ -109,7 +111,7 @@
   }
 
   &__text{
-    color: $dark;
+    color: variables.$graphite;
     margin-left: 8px;
   }
 }

package/layout/Sidebar/FooterIcons/FooterIcons.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IIconProps } from '@steroidsjs/core/ui/content/Icon/Icon';
+import './FooterIcons.scss';
+interface IFooterIconsProps {
+    footerIcons?: IIconProps[];
+    isShink?: boolean;
+}
+declare function FooterIcons(props: IFooterIconsProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FooterIcons>;
+export default _default;

package/layout/Sidebar/FooterIcons/FooterIcons.js

@@ -0,0 +1,54 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon/Icon"));
+var renderIcon_1 = __importDefault(require("../../../utils/renderIcon"));
+require("./FooterIcons.scss");
+function FooterIcons(props) {
+    var _a;
+    var bem = (0, useBem_1["default"])('FooterIcons');
+    return (react_1["default"].createElement("ul", { className: bem(bem.block({
+            isShrink: props.isShink
+        })) }, props.isShink
+        ? (react_1["default"].createElement(Icon_1["default"], { name: 'share', className: bem.element('item') }))
+        : (_a = props.footerIcons) === null || _a === void 0 ? void 0 : _a.map(function (icon, iconIndex) { return (react_1["default"].createElement("li", { key: iconIndex, className: bem.element('item') }, (0, renderIcon_1["default"])(icon === null || icon === void 0 ? void 0 : icon.name, __assign({}, icon)))); })));
+}
+exports["default"] = (0, react_1.memo)(FooterIcons);

package/layout/Sidebar/FooterIcons/FooterIcons.scss

@@ -0,0 +1,36 @@
+@use "style/variables";
+
+:root {
+    --footer-shrink-icon-color: #626262;
+}
+
+html[data-theme="dark"] {
+    --footer-shrink-icon-color: #adacac;
+}
+
+$footer-shrink-icon-color: var(--footer-shrink-icon-color);
+
+.FooterIcons {
+    padding: 16px 12px;
+
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+
+    &__item {
+        cursor: pointer;
+    }
+
+    &_isShrink {
+        justify-content: center;
+        align-items: center;
+
+        .IconView {
+            svg path,
+            rect,
+            circle {
+                stroke: $footer-shrink-icon-color;
+            }
+        }
+    }
+}

package/layout/Sidebar/FooterIcons/index.d.ts

@@ -0,0 +1,2 @@
+import FooterIcons from './FooterIcons';
+export default FooterIcons;

package/layout/Sidebar/FooterIcons/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var FooterIcons_1 = __importDefault(require("./FooterIcons"));
+exports["default"] = FooterIcons_1["default"];

package/layout/Sidebar/SidebarLogo/SidebarLogo.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './SidebarLogo.scss';
+interface ISidebarLogoProps {
+    icon: string | React.ReactElement;
+    label: string;
+    toggleSidebar: () => void;
+}
+declare function SidebarLogo(props: ISidebarLogoProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof SidebarLogo>;
+export default _default;

package/layout/Sidebar/SidebarLogo/SidebarLogo.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var renderIcon_1 = __importDefault(require("../../../utils/renderIcon"));
+require("./SidebarLogo.scss");
+function SidebarLogo(props) {
+    var bem = (0, useBem_1["default"])('SidebarLogo');
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement("div", { className: bem.element('left') },
+            (0, renderIcon_1["default"])(props.icon, {
+                className: bem.element('icon')
+            }),
+            react_1["default"].createElement("h3", { className: bem.element('label') }, props.label)),
+        react_1["default"].createElement(content_1.Icon, { name: 'menu_left', className: bem.element('right'), onClick: props.toggleSidebar })));
+}
+exports["default"] = (0, react_1.memo)(SidebarLogo);