@steroidsjs/bootstrap 3.0.0-beta.1 → 3.0.0-beta.100

package/form/DateTimeRangeField/DateTimeRangeFieldView.scss

@@ -1,102 +1,47 @@
-.DateTimeRangeFieldView {
-  $root: &;
-
-  padding: 0 8px;
-  position: relative;
+@use "sass:map";
+@use "../../scss/variables";
+@use '../../scss/mixins';
 
-  background-color: $white;
-  border: 1px solid $border-default;
-  border-radius: 4px;
 
-  &:focus-within{
-    outline: 0;
-    border-color: $border-action;
-    box-shadow: 0 0 0 1px $border-typing;
-  }
-  *:focus {
-    outline: none;
-  }
+.DateTimeRangeFieldView {
+    $root: &;
 
-  &_disabled {
-    opacity: .7;
-    color: rgba(0, 0, 0, .25);
-    background-color: $back-disabled;
-    cursor: not-allowed;
-    input {
-      cursor: inherit;
-    }
-  }
-  &_no-border {
-    border: unset;
-  }
+    @include mixins.icon-container($root);
 
-  &__panel-container {
-    display: flex;
-    flex-flow: row nowrap;
-  }
-  &__calendar {
-    .DayPicker-Footer {
-      justify-content: flex-start !important;
-    }
-  }
-  &__time-panel {
-    .TimePanelView__column {
-      height: 291px;
+    @include mixins.date-range-body($root);
 
-      &:first-child {
-        border-left: 1px solid $border-default;
-      }
+    &__body {
+        > * {
+            &:nth-child(1) {
+                width: 140px;
+            }
+        }
     }
-  }
 
-  &__body {
-    height: 100%;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-
-    &:hover #{$root}__icon_close {
-      opacity: 1;
+    &_size {
+        @each $size, $size-map in mixins.$date-sizes {
+            &_#{$size} {
+                #{$root}__body {
+                    #{$root}__input {
+                        &:nth-child(1) {
+                            width: calc(map.get($size-map, first-input-width) + 60px);
+                        }
+                    }
+                }
+            }
+        }
     }
-  }
-
-  &__input {
-    width: 100%;
-    flex-grow: 1;
-    border: none;
-    outline: none;
-    background-color: transparent;
 
-    padding: 10px 5px;
-  }
+    @include mixins.date-range-input();
 
-  &__icon-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  &__icon {
-    display: flex;
-    height: 16px;
+    @include mixins.date-range-sizes($root);
 
-    path {
-      fill: $grey-light;
-      transition: fill .1s ease-in;
-    }
-
-    &_close{
-      position: absolute;
-      background-color: $white;
+    @include mixins.date-range-effects($root);
 
-      opacity: 0;
-      transition: opacity .2s ease-in;
+    @include mixins.date-time-panel($root);
 
-      &:hover {
-        path {
-          fill: $grey-dark;
-        }
-      }
+    &__dropdown { 
+        @include mixins.calendar-border();
+        background-color: variables.$element-background-color;
     }
-  }
 }

package/form/DropDownField/DropDownFieldView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IDropDownFieldViewProps } from '@steroidsjs/core/ui/form/DropDownField/DropDownField';
 export default function DropDownFieldView(props: IDropDownFieldViewProps): JSX.Element;

package/form/DropDownField/DropDownFieldView.js

@@ -33,20 +33,18 @@ 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
     (0, react_1.useEffect)(function () {
@@ -54,48 +52,39 @@ 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));
-    };
-    var bem = (0, hooks_1.useBem)('DropDownFieldView');
-    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') },
-                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: "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') },
-                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.multiple
+                    && props.itemToSelectAll
+                    && props.renderItem(props.itemToSelectAll),
+                props.items.map(function (item) { return props.renderItem(item); }))))));
 }
 exports["default"] = DropDownFieldView;