@steroidsjs/bootstrap 3.0.0-beta.4 → 3.0.0-beta.40

package/form/CheckboxField/CheckboxFieldView.scss

@@ -1,46 +1,193 @@
 .CheckboxFieldView {
-  display: inline-block;
+    $root: &;
 
-  &__label {
-    &-text {
-      &_required:after {
-        display: inline-block;
-        content: '*';
-        color: $danger;
-        margin: 0 0 0 3px;
-      }
-    }
-  }
-  .custom-control-label {
-    &::before, &::after {
-      top: 0;
+    display: inline-block;
+
+    font-family: $font-family-nunito;
+
+    &__input + &__label {
+        display: inline-flex;
+        align-items: center;
+        user-select: none;
     }
-  }
-
-  .custom-control-input {
-    &:checked ~ .custom-control-label {
-      &::before {
-        border-color: $primary;
-        background: $primary;
-      }
-      &:hover {
+
+    &__label {
+        position: relative;
+        cursor: pointer;
+
+        //Сам кастомный checkbox
         &::before {
-          background: $primary-dark;
+            content: "";
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            flex-shrink: 0;
+            flex-grow: 0;
+
+            border: 1px solid $gray;
+            border-radius: $radius-small;
+            margin-right: 8px;
+
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 50% 50%;
         }
-      }
-      &:active {
-        &::before {
-          background: $primary-light;
+
+        //Псевдоэлемент который служит для применения эффектов на чекбокс
+        &::after {
+            content: "";
+            display: inline-block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 26px;
+            height: 26px;
+
+            transform: translate(-12%, -11.5%);
+            transition: opacity 150ms ease-in-out;
+            opacity: 0;
+
+            border-radius: $radius-large;
+            border: 4px solid $primary-light;
+        }
+
+        &-text {
+            color: $text-color;
+            font-size: $font-size-sm;
+            font-weight: $font-weight-md;
+            transform: translateY(1px);
+        }
+    }
+
+    &__input {
+        position: absolute;
+        z-index: -1;
+        opacity: 0;
+
+        //HOVER
+        &:not(:focus):not(:disabled):not(:checked):not(:active) + #{$root}__label:hover::before {
+            border-color: #d0d0d0;
+        }
+
+        //ACTIVE
+        &:not(:disabled):not(:checked):active + #{$root}__label::before {
+            border-color: $primary;
+        }
+
+        &:active:checked + #{$root}__label::after {
+            opacity: 0;
+        }
+
+        &:checked:active + #{$root}__label::before {
+            background-color: $primary-light;
+            border-color: transparent;
+        }
+
+        //FOCUS
+        &:focus + #{$root}__label::after {
+            opacity: 1;
+        }
+
+        //CHECKED
+        &:checked + #{$root}__label::before {
+            border-color: $primary;
+            background-color: $primary;
+            background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.20898 1L3.70898 7L1.20898 4.27273' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+        }
+
+        //DISABLED
+        &:disabled + #{$root}__label {
+            cursor: not-allowed;
+            span {
+                color: $black-30;
+            }
+
+            &::before {
+                background: $background-disabled-color;
+                border: none;
+            }
+        }
+
+        &:disabled:checked #{$root}__label::before {
+            background-color: $background-disabled-color;
+            border-color: none;
+            background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.8584 1.48401L4.3584 7.48401L1.8584 4.75674' stroke='black' stroke-opacity='0.1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+        }
+    }
+
+    &_size {
+        &_lg {
+            #{$root}__label {
+                &::before {
+                    width: 24px;
+                    height: 24px;
+                    border-radius: $radius-small;
+                    margin-right: 12px;
+                }
+                &::after {
+                    width: 26px;
+                    height: 26px;
+                    border-radius: $radius-large;
+                }
+
+                &-text {
+                    font-size: $font-size-lg;
+                    line-height: 24px;
+                }
+            }
+        }
+
+        &_md {
+            #{$root}__label {
+                &::before {
+                    width: 20px;
+                    height: 20px;
+                    border-radius: 6px;
+                }
+
+                &::after {
+                    width: 22px;
+                    height: 22px;
+                    border-radius: $radius-medium;
+                    transform: translate(-13.5%, -13.5%);
+                }
+
+                &-text {
+                    font-size: $font-size-base;
+                    line-height: 22px;
+                }
+            }
+        }
+
+        &_sm {
+            #{$root}__label {
+                &::before {
+                    width: 16px;
+                    height: 16px;
+                    border-radius: 6px;
+                }
+
+                &::after {
+                    width: 18px;
+                    height: 18px;
+                    border-radius: $radius-medium;
+                    transform: translate(-15.5%, -15.5%);
+                }
+
+                &-text {
+                    font-size: $font-size-sm;
+                    line-height: 18px;
+                }
+            }
         }
-      }
     }
-    &:disabled ~ .custom-control-label {
-      color: $border-default;
+}
+.has-errors label {
+    &::before {
+        border-color: $danger;
+    }
 
-      &::before {
-        border: unset;
-        background-color: $back-disabled;
-      }
+    span {
+        color: $danger;
     }
-  }
 }

package/form/CheckboxListField/CheckboxListFieldView.js

@@ -1,15 +1,4 @@
 "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);
@@ -41,11 +30,26 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"));
 function CheckboxListFieldView(props) {
+    var _a;
     var bem = (0, hooks_1.useBem)('CheckboxListFieldView');
     var prefix = (0, useUniqueId_1["default"])('checkbox');
-    return (React.createElement("div", { className: bem(bem.block({ 'is-invalid': !!props.errors }), props.className) }, props.items.map(function (item) { return (React.createElement("div", { key: item.id, className: "custom-control custom-checkbox" },
-        React.createElement("input", __assign({}, props.inputProps, { disabled: props.disabled, required: props.required, id: "".concat(prefix, "_").concat(item.id), className: bem(bem.element('input'), 'custom-control-input', !!props.errors && 'is-invalid'), checked: props.selectedIds.includes(item.id), onChange: function () { return props.onItemSelect(item.id); }, onMouseOver: function () { return props.onItemHover(item.id); } })),
-        React.createElement("label", { className: bem(bem.element('label'), 'custom-control-label'), htmlFor: "".concat(prefix, "_").concat(item.id) },
-            React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, item.label)))); })));
+    return (React.createElement("div", { className: bem(bem.block((_a = {},
+            _a["".concat(props.orientation)] = !!props.orientation,
+            _a))) }, props.items.map(function (checkbox, checkboxIndex) { return props.renderCheckbox({
+        inputProps: {
+            name: "".concat(prefix, "_").concat(checkbox.id),
+            checked: null,
+            type: 'checkbox',
+            disabled: false,
+            onChange: function () {
+                props.onItemSelect(checkbox.id);
+            }
+        },
+        disabled: props.disabled,
+        checked: props.selectedIds.includes(checkbox.id),
+        label: checkbox.label,
+        id: "".concat(prefix, "_").concat(checkbox.id),
+        key: checkboxIndex
+    }); })));
 }
 exports["default"] = CheckboxListFieldView;

package/form/CheckboxListField/CheckboxListFieldView.scss

@@ -1,47 +1,13 @@
 .CheckboxListFieldView {
-  &__label {
-    &-text {
-      &_required:after {
-        display: inline-block;
-        content: '*';
-        color: $danger;
-        margin: 0 0 0 3px;
-      }
-    }
-  }
-
-  .custom-control-label {
-    &::before, &::after {
-      border-color: $border-default;
-      top: 0;
-    }
-  }
+    display: flex;
 
-  .custom-control-input {
-    &:checked ~ .custom-control-label {
-      &::before {
-        border-color: $primary;
-        background: $primary;
-      }
-      &:hover {
-        &::before {
-          background: $primary-dark;
-        }
-      }
-      &:active {
-        &::before {
-          background: $primary-light;
-        }
-      }
+    &_vertical {
+        flex-flow: column wrap;
+        row-gap: 8px;
     }
-    &:disabled ~ .custom-control-label {
-      color: $border-default;
 
-      &::before {
-        border: unset;
-        background-color: $back-disabled;
-      }
+    &_horizontal {
+        flex-flow: row nowrap;
+        column-gap: 8px;
     }
-  }
-
 }

package/form/DropDownField/DropDownFieldView.js

@@ -33,20 +33,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
+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 hooks_1 = require("@steroidsjs/core/hooks");
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+var utils_1 = require("./utils");
 function DropDownFieldView(props) {
+    var _a;
     var bem = (0, hooks_1.useBem)('DropDownFieldView');
     var inputRef = (0, react_1.useRef)(null);
     // Auto focus on search
@@ -55,48 +52,35 @@ 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); }), true);
-        }
-        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));
-    };
-    return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block({ size: props.size }), props.className), style: props.style },
+    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 = {
+                size: props.size
+            },
+            _a["".concat(props.color)] = !!props.color && !props.outline,
+            _a["outline_".concat(props.color)] = props.outline,
+            _a.opened = props.isOpened,
+            _a)), props.className), onKeyPress: function (e) { return e.key === 'Enter' && props.onOpen(); }, style: props.style, role: "button", tabIndex: 0 },
         React.createElement("div", { className: bem.element('selected-items', {
                 reset: props.showReset,
-                'no-border': props.noBorder,
-                'is-invalid': !!props.errors,
                 disabled: props.disabled
-            }), onClick: props.onOpen, onKeyPress: props.onOpen, tabIndex: 0, role: 'button' }, props.selectedItems.map(function (item) { return (props.multiple
-            ? (React.createElement("span", { key: String(item.id), className: bem.element('selected-item-multiple') },
-                React.createElement(React.Fragment, null,
-                    item.label,
-                    React.createElement("span", { className: bem.element('selected-item-multiple-remove'), onClick: function (e) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            props.onItemRemove(item[props.primaryKey]);
-                        }, onKeyPress: function (e) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            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" }))))))
-            : (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": __('Сбросить') })),
+            }), 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: "field-close", className: bem.element('icon-close'), tabIndex: -1, onClick: props.onReset, "aria-label": __('Сбросить') })),
+        React.createElement(Icon_1["default"], { name: 'accordion-chevron', 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') },
-                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 renderItem(item); }))))));
+            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: inputRef, 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.items.map(function (item) { return props.renderItem(item); }))))));
 }
 exports["default"] = DropDownFieldView;