@steroidsjs/bootstrap 2.1.3 → 2.1.6

package/form/DropDownField/DropDownFieldView.js

@@ -29,10 +29,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
+var useDataSelect_1 = require("@steroidsjs/core/hooks/useDataSelect");
 function DropDownFieldView(props) {
     var inputRef = react_1.useRef(null);
     // Auto focus on search
@@ -41,6 +47,22 @@ function DropDownFieldView(props) {
             inputRef.current.focus();
         }
     }, [props.isAutoComplete, props.isOpened, props.isSearchAutoFocus]);
+    var renderItem = function (item, level) {
+        if (level === void 0) { level = 0; }
+        if (props.groupAttribute && Array.isArray(item[props.groupAttribute])) {
+            return __spreadArray([
+                (React.createElement("div", { key: String(item[props.primaryKey]), className: bem.element('drop-down-item', 'group') }, item.label))
+            ], item[props.groupAttribute].map(function (subItem) { return renderItem(subItem, level + 1); }));
+        }
+        return (React.createElement("div", { key: String(item[props.primaryKey]), className: bem.element('drop-down-item', {
+                hover: props.hoveredId === item[props.primaryKey],
+                select: props.selectedIds.includes(item[props.primaryKey]),
+                level: level
+            }), onClick: function (e) {
+                e.preventDefault();
+                props.onItemSelect(item[props.primaryKey]);
+            }, onFocus: function () { return props.onItemHover(item[props.primaryKey]); }, onMouseOver: function () { return props.onItemHover(item[props.primaryKey]); } }, item.label));
+    };
     var bem = hooks_1.useBem('DropDownFieldView');
     return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block({ size: props.size }), props.className), style: props.style },
         React.createElement("div", { className: bem.element('selected-items', {
@@ -48,11 +70,11 @@ function DropDownFieldView(props) {
                 'no-border': props.noBorder,
                 'is-invalid': !!props.errors,
                 disabled: props.disabled
-            }), onClick: props.onOpen, onKeyPress: props.onOpen, tabIndex: 0, role: 'button' }, props.multiple
-            ? props.selectedIds
-                .map(function (id) { return props.items.find(function (item) { return item[props.primaryKey] === id; }); })
-                .filter(Boolean)
-                .map(function (item) { return (React.createElement("span", { key: String(item.id), className: bem.element('selected-item-multiple') },
+            }), onClick: props.onOpen, onKeyPress: props.onOpen, tabIndex: 0, role: 'button' }, props.selectedIds
+            .map(function (id) { return useDataSelect_1.getLinearItems(props.items, props.groupAttribute).find(function (item) { return item[props.primaryKey] === id; }); })
+            .filter(Boolean)
+            .map(function (item) { return (props.multiple
+            ? (React.createElement("span", { key: String(item.id), className: bem.element('selected-item-multiple') },
                 item.label,
                 React.createElement("span", { className: bem.element('selected-item-multiple-remove'), onClick: function (e) {
                         e.preventDefault();
@@ -64,21 +86,12 @@ function DropDownFieldView(props) {
                         props.onItemRemove(item[props.primaryKey]);
                     }, tabIndex: 0, role: 'button' },
                     React.createElement("svg", { viewBox: "64 64 896 896", className: "", width: "1em", height: "1em" },
-                        React.createElement("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3\n                                         5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4\n                                         512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3\n                                          3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" }))))); })
-            : props.selectedIds
-                .map(function (id) { return props.items.find(function (item) { return item[props.primaryKey] === id; }); })
-                .filter(Boolean)
-                .map(function (item) { return (React.createElement("span", { key: item.id, className: bem.element('selected-item') }, item.label)); })),
+                        React.createElement("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3\n                                             5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4\n                                             512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3\n                                              3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" })))))
+            : (React.createElement("span", { key: item.id, className: bem.element('selected-item') }, item.label))); })),
         props.showReset && props.selectedIds.length > 0 && (React.createElement("button", { className: bem.element('reset'), onClick: props.onReset, "aria-label": __('Сбросить') })),
         props.isOpened && (React.createElement("div", { className: bem.element('drop-down') },
             props.isAutoComplete && (React.createElement("div", { className: bem.element('search') },
                 React.createElement("input", __assign({}, props.searchInputProps, { ref: inputRef, onChange: function (e) { return props.searchInputProps.onChange(e.target.value); }, className: bem('form-control', 'form-control-' + props.size, bem.element('search-input'), props.searchInputProps.className) })))),
-            React.createElement("div", { className: bem.element('drop-down-list') }, props.items.map(function (item) { return (React.createElement("button", { key: String(item[props.primaryKey]), type: 'button', className: bem.element('drop-down-item', {
-                    hover: props.hoveredId === item[props.primaryKey],
-                    select: props.selectedIds.includes(item[props.primaryKey])
-                }), onClick: function (e) {
-                    e.preventDefault();
-                    props.onItemSelect(item[props.primaryKey]);
-                }, onFocus: function () { return props.onItemHover(item[props.primaryKey]); }, onMouseOver: function () { return props.onItemHover(item[props.primaryKey]); } }, item.label)); }))))));
+            React.createElement("div", { className: bem.element('drop-down-list') }, props.items.map(function (item) { return renderItem(item); }))))));
 }
 exports["default"] = DropDownFieldView;

package/form/DropDownField/DropDownFieldView.scss

@@ -7,6 +7,7 @@
   &_size_sm {
     font-size: 0.7875rem;
   }
+
   &_size_lg {
     font-size: 1.25rem;
   }
@@ -73,12 +74,14 @@
       opacity: .5;
     }
   }
+
   &_size_sm &__selected-items {
     padding: 0.25rem 0.5rem;
     line-height: 1.5;
     border-radius: 0.2rem;
     height: 31px;
   }
+
   &_size_lg &__selected-items {
     padding: 0.5rem 1rem;
     line-height: 1.5;
@@ -86,7 +89,7 @@
     height: 48px;
   }
 
-  &__selected-item-multiple{
+  &__selected-item-multiple {
     cursor: default;
     margin-right: 5px;
     padding: 0 4px 0 8px;
@@ -96,21 +99,22 @@
     border-radius: 2px;
     background: #f5f5f5;
   }
-  &__selected-item-multiple-remove{
+
+  &__selected-item-multiple-remove {
     cursor: pointer;
     margin-left: 6px;
 
     display: flex;
     align-items: center;
 
-    svg{
+    svg {
       width: 10px;
       opacity: .5;
       transition: opacity .1s ease-in;
     }
 
-    &:hover{
-      svg{
+    &:hover {
+      svg {
         opacity: 1;
       }
     }
@@ -126,8 +130,7 @@
     cursor: pointer;
 
     &::before,
-    &::after
-    {
+    &::after {
       display: block;
       position: absolute;
       top: 50%;
@@ -176,6 +179,7 @@
       width: 100%;
     }
   }
+
   &_size_sm &__search {
     padding: 0.1rem 0.2rem;
   }
@@ -189,6 +193,14 @@
     background-color: transparent;
     border: unset;
 
+    &_group {
+      font-weight: bold;
+    }
+
+    &_level_1 {
+      padding-left: 1.25rem
+    }
+
     &_hover {
       background-color: $dropdown-divider-bg;
     }
@@ -198,12 +210,15 @@
       color: #152536;
     }
   }
+
   &_size_sm &__drop-down-item {
     padding: 0.25rem 0.5rem;
   }
+
   &_size_lg &__drop-down-item {
     padding: 0.5rem 1rem;
   }
+
   &__placeholder {
     color: #fff;
   }

package/form/NumberField/NumberFieldView.js

@@ -50,7 +50,7 @@ function NumberFieldView(props) {
         }), 'form-control', 'form-control-' + props.size, !!props.errors && 'is-invalid', props.className) },
         React.createElement("input", __assign({ ref: inputRef, className: bem(bem.element('input', {
                 size: props.size
-            }), !!props.errors && 'is-invalid') }, props.inputProps)),
+            }), !!props.errors && 'is-invalid') }, props.inputProps, { onChange: function (e) { return props.onChange(e.target.value); } })),
         !props.disabled && !props.errors && (React.createElement("div", { className: bem.element('arrows-container') },
             React.createElement("button", { className: bem.element('arrow', {
                     disabled: props.inputProps.max && props.inputProps.value >= props.inputProps.max

package/nav/Breadcrubms/BreadcrumbsView.scss

@@ -3,6 +3,7 @@
 
   &__list {
     display: flex;
+    flex-wrap: wrap;
     list-style: none;
     padding: 0;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steroidsjs/bootstrap",
-  "version": "2.1.3",
+  "version": "2.1.6",
   "description": "",
   "main": "index.js",
   "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -19,7 +19,7 @@
   "dependencies": {
     "@ckeditor/ckeditor5-react": "^3.0.2",
     "@steroidsjs/ckeditor5": "^27.0.2-rc.2",
-    "@steroidsjs/core": "^2.2.9",
+    "@steroidsjs/core": "^2.2.19",
     "bootstrap": "^4.5.2",
     "lodash": "^4.17.20",
     "lodash-es": "^4.17.20",