@steroidsjs/bootstrap 2.1.0-beta.2 → 2.1.0-beta.7

package/README.md

@@ -0,0 +1,7 @@
+
+# Bootstrap views for Steroids
+
+Эта библиотека содержит представления (views) для компонентов из [Steroids](https://github.com/steroids/react/),
+стилизованные под UI-фреймворк [Bootstrap](https://getbootstrap.com/).
+
+Подробнее о том как создавать и использовать эти view-файлы можно узнать в [документации Steroids](https://github.com/steroids/react/blob/master/docs/index.md)

package/content/Alert/AlertView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IAlertViewProps } from '@steroidsjs/core/ui/content/Alert/Alert';
+export default function Alert(props: IAlertViewProps): JSX.Element;

package/content/Alert/AlertView.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+function Alert(props) {
+    var _a, _b;
+    var bem = hooks_1.useBem('AlertView');
+    return (props.isExist && (react_1["default"].createElement("div", { className: bem(bem.block((_a = {},
+            _a[props.type] = !!props.type,
+            _a['has-description'] = !!props.description,
+            _a['close-animation'] = !props.isVisible,
+            _a)), props.className), style: props.style },
+        props.showIcon && (react_1["default"].createElement(Icon_1["default"], { name: props.type, className: bem.element('icon', (_b = {},
+                _b[props.type] = !!props.type,
+                _b)) })),
+        typeof props.showIcon === 'string' && (react_1["default"].createElement(Icon_1["default"], { name: props.showIcon, className: bem.element('icon') })),
+        react_1["default"].createElement("div", { className: bem.element('content-wrapper') },
+            react_1["default"].createElement("div", { className: bem.element('content') },
+                props.message && (react_1["default"].createElement("div", { className: bem.element('message') }, props.message)),
+                props.description && (react_1["default"].createElement("div", { className: bem.element('description') }, props.description))),
+            props.action && (react_1["default"].createElement("div", { className: bem.element('action') }, props.action))),
+        props.showClose && (react_1["default"].createElement(Icon_1["default"], { className: bem.element('icon-close', {
+                large: !!props.description
+            }), name: 'times', onClick: function (e) {
+                e.preventDefault();
+                props.onClose();
+            } })))));
+}
+exports["default"] = Alert;

package/content/Alert/AlertView.scss

@@ -0,0 +1,120 @@
+.AlertView {
+    $root: &;
+
+    position: relative;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: $alert-padding-y $alert-padding-x;
+
+    border-radius: $alert-border-radius;
+    border: 1px solid transparent;
+
+    &_close-animation {
+        animation: hide_slide .4s ease-in;
+    }
+
+    @keyframes hide_slide {
+      0% {
+        transform: translateX(-10px);
+      }
+      40% {
+        transform: translateX(0%);
+      }
+      80% {
+        transform: translateX(-10%);
+      }
+      100% {
+        transform: translateX(100%);
+      }
+    }
+
+    &_has-description {
+        align-items: flex-start;
+
+        #{$root}__message {
+            font-size: $alert-description-font-size;
+        }
+    }
+
+    &_success {
+        background: $back-success;
+        border-color: $success;
+
+        #{$root}__icon.IconView {
+            fill: $success;
+        }
+    }
+    &_info {
+        background: $back-info;
+        border-color: $info;
+
+        #{$root}__icon.IconView {
+            fill: $info;
+        }
+    }
+    &_warning {
+        background: $back-warning;
+        border-color: $warning;
+
+        #{$root}__icon.IconView {
+            fill: $warning;
+        }
+    }
+    &_error {
+        background: $back-error;
+        border-color: $danger;
+
+        #{$root}__icon.IconView {
+            fill: $danger;
+        }
+    }
+
+    &__icon.IconView svg {
+        width: $alert-icon-size;
+        height: $alert-icon-size;
+        margin-right: 12px;
+    }
+
+    &__action {
+        display: flex;
+        flex-direction: column;
+        padding: 0 35px 0 15px;
+    }
+
+    &__message {
+        flex-grow: 1;
+        font-size: $alert-message-font-size;
+    }
+
+    &__content-wrapper {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &__content {
+        display: grid;
+        grid-gap: 12px;
+    }
+
+    &__description {
+        font-size: $alert-description-font-size;
+    }
+
+    &__icon-close.IconView {
+        position: absolute;
+        right: 20px;
+
+        svg {
+            width: $alert-close-icon-size;
+            height: $alert-close-icon-size;
+        }
+
+        fill: rgba($heading, .6);
+        transition: fill .1s ease-in;
+        &:hover {
+            fill: $heading;
+        }
+    }
+}

package/content/Avatar/AvatarGroupView.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 import { IAvatarGroupViewProps } from '@steroidsjs/core/ui/content/Avatar/AvatarGroup';
-import './AvatarGroupView.scss';
 export default function Avatar(props: IAvatarGroupViewProps): JSX.Element;

package/content/Avatar/AvatarGroupView.js

@@ -1,29 +1,28 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
 };
 exports.__esModule = true;
-var react_1 = __importDefault(require("react"));
+var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
-require("./AvatarGroupView.scss");
 function Avatar(props) {
     var bem = hooks_1.useBem('AvatarGroupView');
-    //   const childrenWithProps = (props.children).map((child, index) =>
-    // );;
-    // if (props.maxCount && props.maxCount < count) {
-    //     const childrenShow = childrenWithProps.slice(0, props.maxCount);
-    //     const childrenHidden = childrenWithProps.slice(props.maxCount, count);
-    //     childrenShow.push(
-    //       <div>
-    //         <Avatar /*style={maxStyle}*/>{`+${count - props.maxCount}`}</Avatar>
-    //       </div>
-    //     );
-    //     return (
-    //         <div /*{className={cls}}*/ style={props.style}>
-    //           {childrenShow}
-    //         </div>
-    //     );
-    //   }
-    return (react_1["default"].createElement("div", { className: bem.block() }, props.children));
+    return (React.createElement("div", { className: bem.block() }, props.children));
 }
 exports["default"] = Avatar;

package/content/Avatar/AvatarGroupView.scss

@@ -3,4 +3,8 @@
     display: inline-flex;
     box-sizing: border-box;
     align-items: center;
-}
+
+    & > :not(:first-child) {
+        margin-left: -8px;
+    }
+}

package/content/Avatar/AvatarView.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 import { IAvatarViewProps } from '@steroidsjs/core/ui/content/Avatar/Avatar';
-import './AvatarView.scss';
 export default function Avatar(props: IAvatarViewProps): JSX.Element;

package/content/Avatar/AvatarView.js

@@ -10,64 +10,31 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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 react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
-require("./AvatarView.scss");
 function Avatar(props) {
-    var _a;
     var bem = hooks_1.useBem('AvatarView');
-    var _b = react_1.useState(true), isImgExist = _b[0], setIsImgExist = _b[1];
     var customSize = typeof props.size === 'number'
         ? {
             width: props.size,
             height: props.size,
             lineHeight: props.size + "px",
-            fontSize: props.size / 3
+            fontSize: props.size / 2
         }
         : {};
-    var hasImageElement = react_1.isValidElement(props.src);
-    var renderingChildren;
-    if (typeof props.src === 'string' && isImgExist) {
-        renderingChildren = (react_1["default"].createElement("img", { src: props.src, srcSet: props.srcSet, alt: props.alt }));
-    }
-    else if (hasImageElement) {
-        renderingChildren = props.src;
-    }
-    else if (props.children) {
-        renderingChildren = (react_1["default"].createElement("span", null, props.children));
-    }
-    else if (typeof props.alt === 'string') {
-        renderingChildren = (react_1["default"].createElement("span", null, props.alt));
-    }
-    else if (props.src && props.children === "") {
-        renderingChildren = (react_1["default"].createElement("img", { src: "https://hh.ru/employer-logo/3775460.png", srcSet: props.srcSet }));
-    }
-    return (react_1["default"].createElement("span", { className: bem.block((_a = {},
-            _a["large"] = props.size === 'large',
-            _a["medium"] = props.size === 'medium',
-            _a["small"] = props.size === 'small',
-            _a["square"] = props.shape === 'square',
-            _a["circle"] = props.shape === 'circle',
-            _a)), style: __assign({}, customSize) }, renderingChildren));
+    var renderImage = function () { return ((props.isError && (react_1["default"].createElement("span", null, props.formattedTitle))) || (react_1["default"].createElement("img", { alt: props.alt, src: props.src, title: props.title, srcSet: props.srcSet, onError: props.onError }))); };
+    return (react_1["default"].createElement("div", { className: bem(bem.block({
+            size: props.size,
+            shape: props.shape,
+            'has-image': !!props.src && !props.isError,
+            'has-status': props.status
+        }), props.className) },
+        react_1["default"].createElement("span", { className: bem.element('body'), style: __assign(__assign({}, props.style), customSize) },
+            (props.src && renderImage()) || (react_1["default"].createElement("span", null, props.formattedTitle)),
+            props.children)));
 }
 exports["default"] = Avatar;

package/content/Avatar/AvatarView.scss

@@ -1,44 +1,103 @@
 
 .AvatarView {
-  color: aqua;
-  background: red;
-  position: relative;
+  $root: &;
+
   display: inline-block;
-  overflow: hidden;
-  white-space: nowrap;
-  text-align: center;
-  justify-content: center;
-  vertical-align: middle;
-  // border-radius: 50%;
-  &_square {
-    border-radius: none;
-  }
+  position: relative;
+
+  &_size {
+    &_x-large {
+      #{$root}__body {
+        height: $avatar-x-large-size;
+        width: $avatar-x-large-size;
+        line-height: $avatar-x-large-size;
+        font-size: $avatar-x-large-font-size;
+      }
+    }
 
-  &_circle {
-    border-radius: 50%;
+    &_large {
+      #{$root}__body {
+        height: $avatar-large-size;
+        width: $avatar-large-size;
+        line-height: $avatar-large-size;
+        font-size: $avatar-large-font-size;
+      }
+    }
+
+    &_middle {
+      #{$root}__body {
+        height: $avatar-middle-size;
+        width: $avatar-middle-size;
+        line-height: $avatar-middle-size;
+        font-size: $avatar-middle-font-size;
+      }
+    }
+
+    &_small {
+      #{$root}__body {
+        height: $avatar-small-size;
+        width: $avatar-small-size;
+        line-height: $avatar-small-size;
+        font-size: $avatar-small-font-size;
+      }
+    }
   }
-  &_large {
-    height: 40px;
-    width: 40px;
-    line-height: 40px;
-    font-size: 20px;
+
+  &_shape {
+    &_square {
+      #{$root}__body{
+        border-radius: unset;
+      }
+    }
+
+    &_circle {
+      #{$root}__body{
+        border-radius: 50%;
+      }
+    }
   }
-  &_medium {
-    height: 32px;
-    width: 32px;
-    line-height: 32px;
-    font-size: 8px;
+
+  &_has-image {
+    #{$root}__body{
+      background-color: unset;
+    }
   }
-  &_small {
-    height: 24px;
-    width: 24px;
-    line-height: 24px;
-    font-size: 12px;
+
+  &_has-status {
+    ::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 25%;
+      height: 25%;
+      z-index: 10;
+
+      color: $avatar-status-color;
+      font-size: 6px;
+
+      border-radius: 50%;
+      background-color: $avatar-status-color;
+      border: $avatar-status-border;
+    }
   }
-  & > img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+
+  &__body {
+    display: inline-block;
+    overflow: hidden;
+
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+
+    color: $avatar-text-color;
+    background-color: $avatar-background-color;
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
   }
 }

package/content/Calendar/CalendarView.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 import { ICalendarViewProps } from '@steroidsjs/core/ui/content/Calendar/Calendar';
-import './CalendarView.scss';
 export default function CalendarView(props: ICalendarViewProps): JSX.Element;

package/content/Calendar/CalendarView.js

@@ -28,7 +28,6 @@ var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 var react_day_picker_1 = __importStar(require("react-day-picker"));
 var CaptionElement_1 = __importDefault(require("./CaptionElement"));
-require("./CalendarView.scss");
 function CalendarView(props) {
     var bem = hooks_1.useBem('CalendarView');
     var month = props.month, toYear = props.toYear, fromYear = props.fromYear, showFooter = props.showFooter, onDaySelect = props.onDaySelect, selectedDates = props.selectedDates, onMonthSelect = props.onMonthSelect, numberOfMonths = props.numberOfMonths, toggleCaptionPanel = props.toggleCaptionPanel, isCaptionPanelVisible = props.isCaptionPanelVisible;

package/content/Calendar/CalendarView.scss

@@ -2,8 +2,8 @@
   $root: &;
 
   position: relative;
-  color: #152536;
-  font-weight: 500;
+  color: $calendar-text-color;
+  font-weight: $calendar-font-weight;
   user-select: none;
 
   .DayPicker-wrapper {
@@ -55,7 +55,7 @@
     display: table-cell;
 
     padding: 0;
-    border-radius: 10px;
+    border-radius: $calendar-day-border-radius;
 
     vertical-align: middle;
     text-align: center;
@@ -77,12 +77,12 @@
     }
 
     &--outside {
-      color: #ccc;
+      color: $calendar-secondary-color;
     }
 
     &--today {
       #{$root}__day {
-        box-shadow: 0 0 0 3px #d8ccf6;
+        box-shadow: $calendar-today-shadow;
       }
     }
   }
@@ -98,7 +98,7 @@
     justify-content: center;
     padding: 0 10px;
 
-    border-top: 1px solid #ccc;
+    border-top: 1px solid $calendar-secondary-color;
   }
   .DayPicker-TodayButton {
     border: none;
@@ -107,24 +107,24 @@
     box-shadow: none;
     font-size: 0.875em;
     cursor: pointer;
-    color: #651fff;
-    font-weight: 500;
+    color: $calendar-primary-color;
+    font-weight: $calendar-font-weight;
   }
 
   // Days selection
 
   // Selected day
   .DayPicker-Day--selected:not(.DayPicker-Day--inRange) {
-    color: #fff;
-    border-radius: 10px;
-    background-color: #651fff;
-    box-shadow: 0 0 0 3px #d8ccf6;
+    color: $calendar-selected-text-color;
+    border-radius: $calendar-day-border-radius;
+    background-color: $calendar-primary-color;
+    box-shadow: $calendar-selected-shadow;
   }
 
   // Hover
   .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
-    background-color: #f4f4f4 !important;
-    box-shadow: 0 0 0 3px #e2e6ea;
+    background-color: $calendar-secondary-light-color !important;
+    box-shadow: $calendar-hover-shadow;
   }
 
   &__day {
@@ -133,22 +133,22 @@
     width: 30px;
     height: 30px;
     line-height: 30px;
-    border-radius: 10px;
+    border-radius: $calendar-day-border-radius;
   }
 
   &_ranged {
 
     .DayPicker-Day {
       &--start {
-        color: #fff;
+        color: $white;
 
         #{$root}__day {
-          background-color: #651fff;
-          box-shadow: 0 0 0 3px #d8ccf6;
+          background-color: $calendar-primary-color;
+          box-shadow: $calendar-selected-shadow;
         }
 
         &::before {
-          background-color: #e3eaf9;
+          background-color: $calendar-primary-light-color;
           width: 10px;
           transform: translate(25px, -50%);
         }
@@ -158,12 +158,12 @@
         color: #fff;
 
         #{$root}__day {
-          background-color: #651fff;
-          box-shadow: 0 0 0 3px #d8ccf6;
+          background-color: $calendar-primary-color;
+          box-shadow: $calendar-selected-shadow;
         }
 
         &::before {
-          background-color: #e3eaf9;
+          background-color: $calendar-primary-light-color;
           width: 10px;
         }
       }
@@ -171,14 +171,14 @@
 
       &--inRange {
         &::before {
-          background-color: #e3eaf9;
+          background-color: $calendar-primary-light-color;
         }
       }
 
       &--outRange {
         pointer-events: none;
         &::before {
-          background-color: #f4f4f4;
+          background-color: $calendar-primary-light-color;
         }
       }
 

package/content/Calendar/CaptionElement.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { CaptionElementProps } from 'react-day-picker/types/Props';
 import { ICalendarViewProps } from '@steroidsjs/core/ui/content/Calendar/Calendar';
-import './CaptionElement.scss';
 interface ICaptionElementProps extends CaptionElementProps, Pick<ICalendarViewProps, 'fromYear' | 'toYear' | 'isCaptionPanelVisible' | 'toggleCaptionPanel'> {
     onChange: (value: any) => void;
     showCalendarFooter?: boolean;

package/content/Calendar/CaptionElement.js

@@ -27,7 +27,6 @@ var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
 var upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
-require("./CaptionElement.scss");
 function CaptionElement(props) {
     var bem = hooks_1.useBem('CaptionElement');
     var localeUtils = props.localeUtils, locale = props.locale, fromYear = props.fromYear, toYear = props.toYear, date = props.date, isCaptionPanelVisible = props.isCaptionPanelVisible, toggleCaptionPanel = props.toggleCaptionPanel;
@@ -82,8 +81,8 @@ function CaptionElement(props) {
                     handleYearChange(currentYear + 1);
                 }, name: 'angle-double-right' })),
         isCaptionPanelVisible && (React.createElement("div", { className: bem.element('panel', { 'full-height': !props.showCalendarFooter }) },
-            React.createElement("div", { className: bem.element('panel-header', 'months') }, __('Год')),
-            React.createElement("div", { className: bem.element('panel-header', 'years') }, __('Месяц')),
+            React.createElement("div", { className: bem.element('panel-header', 'months') }, __('Месяц')),
+            React.createElement("div", { className: bem.element('panel-header', 'years') }, __('Год')),
             React.createElement("div", { className: bem.element('panel-column-months', 'first') },
                 React.createElement("div", { className: bem.element('content-column') }, months.slice(0, 6).map(function (value, index) { return (React.createElement("div", { key: index, className: bem.element('panel-cell', {
                         selected: value.id === currentMonth