@steroidsjs/bootstrap 3.0.30 → 3.0.34

package/form/SwitcherListField/SwitcherListFieldView.scss

@@ -0,0 +1,9 @@
+@use "sass:map";
+@use "../../scss/variables";
+
+.SwitcherListFieldView {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    row-gap: 10px;
+}

package/hooks/index.d.ts

@@ -0,0 +1,2 @@
+import useHideScroll from './useHideScroll';
+export { useHideScroll };

package/hooks/index.js

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

package/hooks/useHideScroll.d.ts

@@ -0,0 +1 @@
+export default function useHideScroll(): void;

package/hooks/useHideScroll.js

@@ -0,0 +1,37 @@
+"use strict";
+exports.__esModule = true;
+var react_1 = require("react");
+var react_use_1 = require("react-use");
+var onlyNumbersRegExp = /^\D/g;
+/*
+* Хук устанавливает padding-right для body при открытии модальных окон.
+* Помогает избежать нежелательного смещения контента, когда для body задается свойство overflow: hidden (убирается скролл)
+* */
+var BODY_HIDE_SCROLL_CLASS_NAME = 'body-hide-scroll';
+function useHideScroll() {
+    var defaultPadding = (0, react_1.useRef)(null);
+    (0, react_use_1.useMount)(function () {
+        if (process.env.IS_SSR) {
+            return;
+        }
+        var fullWindowWidth = window.innerWidth; // полная ширина окна;
+        var windowWidthWithoutScrollbar = document.documentElement.clientWidth; // ширина окна за вычетом скролла
+        defaultPadding.current = document.body.style.paddingRight;
+        if (windowWidthWithoutScrollbar < fullWindowWidth) {
+            var defaultPaddingInt = defaultPadding.current
+                ? Number(defaultPadding.current.replace(onlyNumbersRegExp, ''))
+                : 0;
+            var paddingRight = "".concat(fullWindowWidth - windowWidthWithoutScrollbar + defaultPaddingInt, "px");
+            document.body.style.paddingRight = paddingRight;
+            document.body.classList.add(BODY_HIDE_SCROLL_CLASS_NAME);
+        }
+    });
+    (0, react_use_1.useUnmount)(function () {
+        if (process.env.IS_SSR) {
+            return;
+        }
+        document.body.style.paddingRight = defaultPadding.current;
+        document.body.classList.remove(BODY_HIDE_SCROLL_CLASS_NAME);
+    });
+}
+exports["default"] = useHideScroll;

package/icons/index.js

@@ -28,6 +28,8 @@ exports["default"] = (function (customIcons) {
         'arrow_right_24x24',
         'arrow_up_18x18',
         'arrow_up_24x24',
+        'long-arrow-alt-down',
+        'long-arrow-alt-up',
         'blank',
         'calendar_check',
         'chart',

package/icons/svgs/long-arrow-alt-down.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9.44916L5 13.4492M5 13.4492L9 9.44916M5 13.4492L5 1.44916" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/long-arrow-alt-up.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 5.44916L5 1.44916M5 1.44916L1 5.44916M5 1.44916L5 13.4492" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/index.d.ts

@@ -161,6 +161,9 @@ declare const _default: {
     'form.SwitcherFieldView': {
         lazy: () => any;
     };
+    'form.SwitcherListFieldView': {
+        lazy: () => any;
+    };
     'form.TextFieldView': {
         lazy: () => any;
     };

package/index.js

@@ -164,6 +164,9 @@ exports["default"] = {
     'form.SwitcherFieldView': {
         lazy: function () { return require('./form/SwitcherField/SwitcherFieldView')["default"]; }
     },
+    'form.SwitcherListFieldView': {
+        lazy: function () { return require('./form/SwitcherListField/SwitcherListFieldView')["default"]; }
+    },
     'form.TextFieldView': {
         lazy: function () { return require('./form/TextField/TextFieldView')["default"]; }
     },

package/index.scss

@@ -65,6 +65,7 @@
 @include meta.load-css('form/ReCaptchaField/ReCaptchaFieldView');
 @include meta.load-css('form/SliderField/SliderFieldView');
 @include meta.load-css('form/SwitcherField/SwitcherFieldView');
+@include meta.load-css('form/SwitcherListField/SwitcherListFieldView');
 @include meta.load-css('form/TextField/TextFieldView');
 @include meta.load-css('form/TimeField/TimeFieldView');
 @include meta.load-css('form/TimeField/TimePanelView');

package/list/Grid/GridView.js

@@ -62,9 +62,8 @@ function GridView(props) {
         })));
     }, [props.searchForm, props.columns]);
     var renderSortButton = (0, react_1.useCallback)(function (attribute, direction) {
-        var _a;
         var sortKey = (direction === 'desc' ? '-' : '') + attribute;
-        var isActive = [].concat(((_a = props.list) === null || _a === void 0 ? void 0 : _a.sort) || []).includes(sortKey);
+        var isActive = [].concat((props === null || props === void 0 ? void 0 : props.sort) || []).includes(sortKey);
         return (React.createElement(Button_1["default"], { icon: direction === 'asc' ? 'long-arrow-alt-up' : 'long-arrow-alt-down', className: bem.element('sort-button', {
                 'is-active': isActive
             }), link: true, onClick: function (e) {
@@ -86,7 +85,7 @@ function GridView(props) {
             React.createElement("thead", null,
                 React.createElement("tr", null, props.columns.map(function (column, columnIndex) { return (React.createElement("th", { key: columnIndex, className: column.headerClassName },
                     column.label,
-                    column.sortable && column.attribute && (React.createElement("span", null,
+                    column.sortable && column.attribute && (React.createElement("span", { className: bem.element('sort-buttons') },
                         column.label && React.createElement("span", null, "\u00A0"),
                         renderSortButton(column.attribute, 'asc'),
                         renderSortButton(column.attribute, 'desc'))))); })),

package/list/Grid/GridView.scss

@@ -6,6 +6,9 @@
 
     --grid-td-background-color: #FFFFFF;
     --grid-td-alternating-color: var(--additional-light-gray);
+
+    --sort-button-color: var(--graphite);
+    --sort-button-color-active: var(--graphite-dark);
 }
 
 html[data-theme="dark"] {
@@ -14,6 +17,10 @@ html[data-theme="dark"] {
 
     --grid-td-background-color: var(--graphite);
     --grid-td-alternating-color: var(--graphite-dark);
+
+
+    --sort-button-color: var(--secondary-dark);
+    --sort-button-color-active: var(--secondary);
 }
 
 $grid-header-background-color: var(--grid-header-background-color);
@@ -97,6 +104,13 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             td:not(#{$root}__column_isDiagram) {
                 padding: 24px 16px;
             }
+
+            &:has(#{$root}__sort-buttons) {
+                th {
+                    position: relative;
+                    padding: 24px 30px 24px 16px;
+                }
+            }
         }
 
         &_md {
@@ -109,6 +123,13 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             td:not(#{$root}__column_isDiagram) {
                 padding: 21px 12px;
             }
+
+            &:has(#{$root}__sort-buttons) {
+                th {
+                    position: relative;
+                    padding: 21px 30px 21px 12px;
+                }
+            }
         }
 
         &_sm {
@@ -121,6 +142,13 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             td:not(#{$root}__column_isDiagram) {
                 padding: 16px 8px;
             }
+
+            &:has(#{$root}__sort-buttons) {
+                th {
+                    position: relative;
+                    padding: 16px 30px 16px 8px;
+                }
+            }
         }
     }
 
@@ -171,4 +199,22 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             width: 100%;
         }
     }
+
+    &__sort-buttons {
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    &__sort-button {
+        path {
+            stroke: var(--sort-button-color);
+        }
+        &_is-active {
+            path {
+                stroke: var(--sort-button-color-active);
+                stroke-width: 2px;
+            }
+        }
+    }
 }

package/modal/Modal/ModalView.js

@@ -42,14 +42,16 @@ var react_modal_1 = __importDefault(require("react-modal"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var content_1 = require("@steroidsjs/core/ui/content");
 var form_1 = require("@steroidsjs/core/ui/form");
+var hooks_2 = require("../../hooks");
 function ModalView(props) {
     var bem = (0, hooks_1.useBem)('ModalView');
+    (0, hooks_2.useHideScroll)();
     var overrideDefaultClasses = {
         base: bem.block('overlay'),
         afterOpen: 'ModalView_overlay-after',
         beforeClose: 'ModalView_overlay-before'
     };
-    return (React.createElement(react_modal_1["default"], __assign({}, props, { ariaHideApp: false, bodyOpenClassName: 'ModalView_body-hide-scroll', className: bem(bem.element('body', { size: props.size }), props.className), closeTimeoutMS: props.closeTimeoutMs, isOpen: !props.isClosing, onRequestClose: props.onClose, overlayClassName: overrideDefaultClasses, shouldCloseOnEsc: props.shouldCloseOnEsc, shouldCloseOnOverlayClick: props.shouldCloseOnOverlayClick }),
+    return (React.createElement(react_modal_1["default"], __assign({}, props, { ariaHideApp: false, className: bem(bem.element('body', { size: props.size }), props.className), closeTimeoutMS: props.closeTimeoutMs, isOpen: !props.isClosing, onRequestClose: props.onClose, overlayClassName: overrideDefaultClasses, shouldCloseOnEsc: props.shouldCloseOnEsc, shouldCloseOnOverlayClick: props.shouldCloseOnOverlayClick }),
         React.createElement("div", { className: bem.element('header') },
             React.createElement("span", { className: bem.element('title') }, props.title),
             React.createElement(content_1.Icon, { name: 'cross_12x12', className: bem.element('close'), onClick: props.onClose })),

package/modal/Modal/ModalView.scss

@@ -148,8 +148,3 @@ $modal-background-color: var(--modal-background-color);
         opacity: 0;
     }
 }
-
-// Class to hide body scroll, when Modal is opened
-.ModalView_body-hide-scroll {
-    overflow: hidden;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.30",
+    "version": "3.0.34",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "3.0.52",
+        "@steroidsjs/core": "3.0.59",
         "@steroidsjs/eslint-config": "^2.1.6",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",

package/scss/normalize.scss

@@ -23,3 +23,8 @@ button {
 input {
     outline: none;
 }
+
+// Class to hide body scroll, when Modal is opened
+.body-hide-scroll {
+    overflow: hidden;
+}