@steroidsjs/bootstrap 3.0.30 → 3.0.34

package/form/DateTimeRangeField/DateTimeRangeFieldView.js

@@ -44,13 +44,22 @@ var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var DropDown_1 = __importDefault(require("@steroidsjs/core/ui/content/DropDown"));
 var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar"));
 var TimePanelView_1 = __importDefault(require("../TimeField/TimePanelView"));
+var RangeButtons_1 = __importDefault(require("../DateRangeField/views/RangeButtons"));
 function DateTimeRangeFieldView(props) {
     var bem = (0, hooks_1.useBem)('DateTimeRangeFieldView');
     var hasValue = props.inputPropsFrom.value || props.inputPropsTo.value;
-    var renderCalendar = (0, react_1.useCallback)(function () { return (React.createElement("div", { className: bem.element('panel-container') },
-        React.createElement(Calendar_1["default"], __assign({}, props.calendarProps, { className: bem.element('calendar') })),
+    var calendarComponent = React.useMemo(function () { return (React.createElement("div", { className: bem.element('panel-container') },
+        React.createElement(Calendar_1["default"], __assign({}, props.calendarProps, { className: bem.element('calendar'), showTodayButton: !props.withRangeButtons })),
         React.createElement("div", { className: bem.element('separator') }),
-        React.createElement(TimePanelView_1["default"], __assign({}, props.timePanelViewProps, { className: bem.element('time-panel') })))); }, [bem, props.calendarProps, props.timePanelViewProps]);
+        React.createElement(TimePanelView_1["default"], __assign({}, props.timePanelViewProps, { className: bem.element('time-panel') })))); }, [bem, props.calendarProps, props.timePanelViewProps, props.withRangeButtons]);
+    var renderCalendar = (0, react_1.useCallback)(function () { return (props.withRangeButtons ? (React.createElement("div", { className: bem.element('calendar-wrapper', {
+            position: props.rangeButtonsPosition
+        }) },
+        React.createElement("div", { className: bem.element('additional-buttons') },
+            React.createElement(RangeButtons_1["default"], { config: props.withRangeButtons, changeTo: props.inputPropsTo.onChange, changeFrom: props.inputPropsFrom.onChange, position: props.rangeButtonsPosition, format: props.displayFormat })),
+        React.createElement("div", { className: bem.element('calendar') }, calendarComponent)))
+        : calendarComponent); }, [bem, calendarComponent, props.inputPropsFrom.onChange, props.inputPropsTo.onChange,
+        props.rangeButtonsPosition, props.displayFormat, props.withRangeButtons]);
     return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose, hasArrow: false, className: bem.element('dropdown') },
         React.createElement("div", { className: bem(bem.block({
                 disabled: props.disabled,

package/form/DateTimeRangeField/DateTimeRangeFieldView.scss

@@ -2,6 +2,26 @@
 @use "../../scss/variables";
 @use '../../scss/mixins';
 
+$positions: (
+  top: (
+    direction: column,
+    responsive: top
+  ),
+  bottom: (
+    direction: column-reverse,
+    responsive: bottom
+  ),
+  left: (
+    direction: row,
+    responsive: left
+  ),
+  right: (
+    direction: row-reverse,
+    responsive: right
+  )
+);
+
+$all-directions: top, bottom, left, right;
 
 .DateTimeRangeFieldView {
     $root: &;
@@ -44,4 +64,38 @@
         @include mixins.calendar-border();
         background-color: variables.$element-background-color;
     }
+    
+    &__calendar-wrapper {
+        display: flex;
+        width: min-content;
+
+        &_position {
+            @each $pos, $config in $positions {
+                &_#{$pos} {
+                    flex-direction: map-get($config, direction);
+                    align-items: center;
+                
+                    @media (max-width: variables.$tablet-width) {
+                        flex-direction: map-get($config, responsive);
+                        align-items: center;
+                    }
+                }
+            }
+            @each $dir1 in $all-directions {
+                @each $dir2 in $all-directions {
+                    @if $dir1 != $dir2 {
+                    &_#{$dir1}-#{$dir2} {
+                        flex-direction: map-get(map-get($positions, $dir1), direction);
+                        align-items: center;
+                
+                        @media (max-width: variables.$tablet-width) {
+                            flex-direction: map-get(map-get($positions, $dir2), direction);
+                            align-items: center;
+                        }
+                    }
+                    }
+                }
+            }
+        }
+    }
 }

package/form/DropDownField/DropDownFieldView.js

@@ -38,54 +38,73 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+var content_1 = require("@steroidsjs/core/ui/content");
 var utils_1 = require("./utils");
 function DropDownFieldView(props) {
     var _a;
     var bem = (0, hooks_1.useBem)('DropDownFieldView');
-    // Auto focus on search
-    (0, react_1.useEffect)(function () {
-        var _a;
-        if (props.isSearchAutoFocus && props.isAutoComplete && props.isOpened && ((_a = props.forwardedInputRef) === null || _a === void 0 ? void 0 : _a.current)) {
-            props.forwardedInputRef.current.focus();
+    var onClose = props.onClose;
+    var setFocusOnAutoCompleteInput = React.useCallback(function (isComponentVisible) {
+        if (isComponentVisible && props.autoCompleteInputForwardedRef.current && props.isSearchAutoFocus) {
+            props.autoCompleteInputForwardedRef.current.focus();
         }
-    }, [props.forwardedInputRef, props.isAutoComplete, props.isOpened, props.isSearchAutoFocus]);
+    }, [props.autoCompleteInputForwardedRef, props.isSearchAutoFocus]);
     var renderPlaceholder = React.useCallback(function () {
         var _a;
         return props.placeholder && !((_a = props.selectedIds) === null || _a === void 0 ? void 0 : _a.length)
             ? (React.createElement("div", { className: bem.element('placeholder') }, props.placeholder))
             : null;
     }, [bem, props.placeholder, props.selectedIds]);
-    return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block((_a = {
+    var fieldRef = React.useRef(null);
+    var menuWidth = React.useMemo(function () {
+        if (!fieldRef.current) {
+            return 0;
+        }
+        return fieldRef.current.getBoundingClientRect().width;
+        // Отключена проверка, т.к. необходимо пересчитывать ширину меню, когда меняется fieldRef.current
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [fieldRef.current, props.isOpened]);
+    var renderList = React.useCallback(function () { return (React.createElement("div", { className: bem.element('drop-down'), style: {
+            '--width': menuWidth + 'px',
+            '--maxHeight': props.maxHeight
+        } },
+        props.isAutoComplete && (React.createElement("div", { className: bem.element('search', {
                 size: props.size
-            },
-            _a["".concat(props.color)] = !!props.color && !props.outline,
-            _a["outline_".concat(props.color)] = props.outline,
-            _a.opened = props.isOpened,
-            _a['is-invalid'] = !!props.errors,
-            _a.disabled = props.disabled,
-            _a)), props.className), onKeyPress: function (e) { return e.key === 'Enter' && !props.disabled && props.onOpen(); }, style: props.style, role: "button", tabIndex: 0 },
-        React.createElement("div", { className: bem.element('selected-items', {
-                reset: props.showReset
-            }), onClick: props.onOpen, tabIndex: -1, role: 'button' },
-            renderPlaceholder(),
-            React.createElement("span", { className: bem.element('selected-items') }, props.showEllipses
-                ? (0, utils_1.getSelectedItemsLabel)(props.selectedItems)
-                : (0, utils_1.getSelectedItemsCount)(props.selectedItems))),
-        props.showReset && props.selectedIds.length > 0 && (React.createElement(Icon_1["default"], { name: "cross_8x8", className: bem.element('icon-close'), tabIndex: -1, onClick: props.onReset, "aria-label": __('Сбросить') })),
-        React.createElement(Icon_1["default"], { name: 'arrow_down_24x24', className: bem.element('icon-chevron'), tabIndex: -1, onClick: props.onOpen }),
-        props.isOpened && (React.createElement("div", { className: bem.element('drop-down') },
-            props.isAutoComplete && (React.createElement("div", { className: bem.element('search', {
-                    size: props.size
-                }) },
-                React.createElement(Icon_1["default"], { name: 'search', className: bem.element('search-icon') }),
-                React.createElement("input", __assign({}, props.searchInputProps, { ref: props.forwardedInputRef, onChange: function (e) { return props.searchInputProps.onChange(e.target.value); }, className: bem(bem.element('search-input'), props.searchInputProps.className) })))),
-            React.createElement("div", { className: bem.element('drop-down-list') },
-                props.multiple
-                    && props.itemToSelectAll
-                    && props.renderItem(props.itemToSelectAll),
-                props.items.map(function (item) { return props.renderItem(item); }))))));
+            }) },
+            React.createElement(Icon_1["default"], { name: 'search', className: bem.element('search-icon') }),
+            React.createElement("input", __assign({}, props.searchInputProps, { ref: props.autoCompleteInputForwardedRef, onChange: function (e) { return props.searchInputProps.onChange(e.target.value); }, className: bem(bem.element('search-input'), props.searchInputProps.className) })))),
+        React.createElement("div", { className: bem.element('drop-down-list') },
+            props.multiple
+                && props.itemToSelectAll
+                && props.renderItem(props.itemToSelectAll),
+            props.items.map(function (item) { return props.renderItem(item); })))); }, [bem, menuWidth, props]);
+    var closeIfOpened = React.useCallback(function () {
+        if (props.isOpened) {
+            onClose();
+        }
+    }, [onClose, props.isOpened]);
+    return (React.createElement(content_1.DropDown, __assign({ content: renderList, onVisibleChange: setFocusOnAutoCompleteInput, visible: props.isOpened, onClose: onClose, hasArrow: false, className: bem.element('wrapper') }, props.dropDownProps),
+        React.createElement("div", null,
+            React.createElement("div", { className: bem(bem.block((_a = {
+                        size: props.size
+                    },
+                    _a["".concat(props.color)] = !!props.color && !props.outline,
+                    _a["outline_".concat(props.color)] = props.outline,
+                    _a.opened = props.isOpened,
+                    _a['is-invalid'] = !!props.errors,
+                    _a.disabled = props.disabled,
+                    _a)), props.className), onKeyPress: function (e) { return e.key === 'Enter' && !props.disabled && props.onOpen(); }, style: props.style, role: "button", tabIndex: 0, onClick: closeIfOpened, ref: fieldRef },
+                React.createElement("div", { className: bem.element('selected-items', {
+                        reset: props.showReset
+                    }), onClick: props.onOpen, tabIndex: -1, role: 'button' },
+                    renderPlaceholder(),
+                    React.createElement("span", { className: bem.element('selected-items') }, props.showEllipses
+                        ? (0, utils_1.getSelectedItemsLabel)(props.selectedItems)
+                        : (0, utils_1.getSelectedItemsCount)(props.selectedItems)),
+                    React.createElement("input", { className: bem.element('input'), ref: props.inputRef })),
+                props.showReset && props.selectedIds.length > 0 && (React.createElement(Icon_1["default"], { name: "cross_8x8", className: bem.element('icon-close'), tabIndex: -1, onClick: props.onReset, "aria-label": __('Сбросить') })),
+                React.createElement(Icon_1["default"], { name: 'arrow_down_24x24', className: bem.element('icon-chevron'), tabIndex: -1, onClick: props.onOpen })))));
 }
 exports["default"] = DropDownFieldView;

package/form/DropDownField/DropDownFieldView.scss

@@ -9,13 +9,13 @@
     --chevron-background-color: #ffffff;
     --chevron-background-color-outline: #f5f8fa;
     --chevron-inner-color: #323232;
-    --drop-down-border-color: #e9e9e9;
-    --search-color: #626262;
-    --search-background-color: #f5f8fa;
-    --search-hover-background-color: #eef1f2;
 
     --drop-down-item-hover-background-color: #f5f8fa;
     --drop-down-item-select-background-color: #eef1f2;
+    --drop-down-border-color: #e9e9e9;
+    --search-background-color: #f5f8fa;
+    --search-hover-background-color: #eef1f2;
+    --search-color: #626262;
 }
 
 html[data-theme="dark"] {
@@ -25,13 +25,13 @@ html[data-theme="dark"] {
     --chevron-background-color: #16171b;
     --chevron-background-color-outline: #191b1f;
     --chevron-inner-color: #ffffff;
-    --drop-down-border-color: #595959;
-    --search-color: #adacac;
-    --search-background-color: #4e4f57;
-    --search-hover-background-color: #5b5c6b;
 
     --drop-down-item-select-background-color: #5b5c6b;
     --drop-down-item-hover-background-color: #4e4f57;
+    --drop-down-border-color: #595959;
+    --search-background-color: #4e4f57;
+    --search-hover-background-color: #5b5c6b;
+    --search-color: #adacac;
 }
 
 $basic-color: var(--basic-color);
@@ -40,13 +40,13 @@ $basic-active-color: var(--basic-active-color);
 $chevron-background-color: var(--chevron-background-color);
 $chevron-background-color-outline: var(--chevron-background-color-outline);
 $chevron-inner-color: var(--chevron-inner-color);
-$drop-down-border-color: var(--drop-down-border-color);
-$search-color: var(--search-color);
-$search-background-color: var(--search-background-color);
-$search-hover-background-color: var(--search-hover-background-color);
 
 $drop-down-item-select-background-color: var(--drop-down-item-select-background-color);
 $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-color);
+$drop-down-border-color: var(--drop-down-border-color);
+$search-background-color: var(--search-background-color);
+$search-hover-background-color: var(--search-hover-background-color);
+$search-color: var(--search-color);
 
 $drop-down-color-themes: () !default;
 $drop-down-color-themes: map.merge(
@@ -291,48 +291,20 @@ $drop-down-color-themes: map.merge(
         }
     }
 
-    &__selected-items {
-        position: absolute;
-        width: calc(100% - 29px);
-        height: 100%;
-        top: 0;
-        left: 0;
-        overflow: hidden;
-        padding-left: 8px;
-        outline: none;
-
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-    }
-
     &__drop-down {
-        position: absolute;
-        z-index: 2;
-        width: 100%;
+        width: var(--width);
+        max-height: var(--maxHeight);
         height: fit-content;
-        top: calc(100% + 8px);
-        left: 0;
-
+    
         background-color: variables.$element-background-color;
-
-        border: 1px solid $drop-down-border-color;
+    
         overflow: hidden;
-        border-radius: 12px;
-
+    
         &-list {
             @include mixins.scrollWrapper(240px, 0, variables.$scroll-thumb-color, variables.$scroll-track-color);
         }
     }
 
-    &_opened {
-        #{$root}__icon-chevron {
-            svg {
-                transform: rotate(180deg);
-            }
-        }
-    }
-
     &__search {
         width: 100%;
         padding: 9px;
@@ -402,6 +374,29 @@ $drop-down-color-themes: map.merge(
         }
     }
 
+    &__selected-items {
+        position: absolute;
+        width: calc(100% - 29px);
+        height: 100%;
+        top: 0;
+        left: 0;
+        overflow: hidden;
+        padding-left: 8px;
+        outline: none;
+
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    &_opened {
+        #{$root}__icon-chevron {
+            svg {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
     &__placeholder {
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -435,4 +430,21 @@ $drop-down-color-themes: map.merge(
         border-color: transparent;
         pointer-events: none;
     }
+
+    &__input {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        cursor: default;
+        pointer-events: none;
+        user-select: none;
+    }
+    &__wrapper {
+        padding: unset;
+        overflow: hidden;
+        min-width: unset;
+    }
 }

package/form/InputField/InputFieldView.js

@@ -58,9 +58,9 @@ function InputFieldView(props) {
             hasTextAddonBefore: !!props.textBefore,
             hasTextAddonAfter: !!props.textAfter
         }), props.className), style: props.style },
-        props.addonBefore && (React.createElement("span", { className: bem.element('addon-before') }, props.addonBefore)),
         props.textBefore && (React.createElement("span", { className: bem.element('text-before') }, props.textBefore)),
         React.createElement("div", { className: bem.element('input-wrapper') },
+            props.addonBefore && (React.createElement("span", { className: bem.element('addon-before') }, props.addonBefore)),
             props.leadIcon && (0, renderIcon_1["default"])(props.leadIcon, {
                 className: bem.element('lead-icon'),
                 tabIndex: -1
@@ -72,8 +72,8 @@ function InputFieldView(props) {
                 : (React.createElement("input", __assign({ className: bem(bem.element('input', {
                         size: props.size
                     })) }, props.inputProps, { type: props.inputProps.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef }))),
-            !props.disabled && props.showClear && !props.maskProps && !!props.inputProps.value && (React.createElement(Icon_1["default"], { name: 'cross_8x8', className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear }))),
-        props.textAfter && (React.createElement("span", { className: bem.element('text-after') }, props.textAfter)),
-        props.addonAfter && (React.createElement("span", { className: bem.element('addon-after') }, props.addonAfter))));
+            !props.disabled && props.showClear && !props.maskProps && !!props.inputProps.value && (React.createElement(Icon_1["default"], { name: 'cross_8x8', className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear })),
+            props.addonAfter && (React.createElement("span", { className: bem.element('addon-after') }, props.addonAfter))),
+        props.textAfter && (React.createElement("span", { className: bem.element('text-after') }, props.textAfter))));
 }
 exports["default"] = InputFieldView;