@steroidsjs/bootstrap 3.0.0-beta.68 → 3.0.0-beta.69

package/form/TimeRangeField/TimeRangeFieldView.d.ts

@@ -0,0 +1,2 @@
+import { ITimeRangeFieldViewProps } from '@steroidsjs/core/ui/form/TimeRangeField/TimeRangeField';
+export default function TimeRangeFieldView(props: ITimeRangeFieldViewProps): JSX.Element;

package/form/TimeRangeField/TimeRangeFieldView.js

@@ -0,0 +1,67 @@
+"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);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var TimePanelView_1 = __importDefault(require("../TimeField/TimePanelView"));
+function TimeRangeFieldView(props) {
+    var bem = (0, useBem_1["default"])('TimeRangeFieldView');
+    var hasValue = props.inputPropsFrom.value || props.inputPropsTo.value;
+    var renderTimeRange = (0, react_1.useCallback)(function () { return (react_1["default"].createElement("div", { className: bem.element('panel-container') },
+        react_1["default"].createElement(TimePanelView_1["default"], __assign({}, props.timePanelFromViewProps)),
+        react_1["default"].createElement(TimePanelView_1["default"], __assign({}, props.timePanelToViewProps)))); }, [bem, props.timePanelFromViewProps, props.timePanelToViewProps]);
+    return (react_1["default"].createElement(content_1.DropDown, { position: "bottomLeft", content: renderTimeRange, onClose: props.onClose, visible: props.isOpened, className: bem.element('dropdown'), hasArrow: false },
+        react_1["default"].createElement("div", { className: bem(bem.block({
+                disabled: props.disabled,
+                size: props.size,
+                'is-invalid': !!props.errors
+            }), props.className), style: props.style },
+            react_1["default"].createElement("div", { className: bem.element('body') },
+                react_1["default"].createElement("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input')), onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })),
+                react_1["default"].createElement("input", __assign({}, props.inputPropsTo, { className: bem.element('input'), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })),
+                react_1["default"].createElement("div", { className: bem.element('icon-container') },
+                    props.icon && !hasValue && (react_1["default"].createElement(content_1.Icon, { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),
+                    props.showRemove && hasValue && (react_1["default"].createElement(content_1.Icon, { className: bem.element('close-icon'), onClick: function (e) {
+                            e.preventDefault();
+                            props.onClear();
+                        }, name: 'cross_8x8' }))),
+                react_1["default"].createElement("span", { className: bem.element('effect') })))));
+}
+exports["default"] = TimeRangeFieldView;

package/form/TimeRangeField/TimeRangeFieldView.scss

@@ -0,0 +1,77 @@
+.TimeRangeFieldView {
+    $root: &;
+    
+    @include icon-container($root);
+
+    @include date-range-body($root);
+
+    &__body {
+        > * {
+            &:nth-child(1) {
+                width: 140px;
+            }
+        }
+    }
+
+    &_size {
+        @each $size, $size-map in $date-sizes {
+            &_#{$size} {
+                #{$root}__body {
+                    #{$root}__input {
+                        &:nth-child(1) {
+                            width: calc(map-get($size-map, first-input-width) + 60px);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    @include date-range-input();
+
+    @include date-range-sizes($root);
+
+    @include date-range-effects($root);
+
+    @include date-time-panel($root);
+
+    &__dropdown { 
+        background-color: $element-background-color;
+
+        display: flex;
+    }
+
+    &__panel-container {
+        display: flex;
+        flex-flow: row nowrap;
+        column-gap: 47px;
+
+        .TimePanelView__footer { 
+            padding: 0;
+            padding-top: 10px;
+            display: flex;
+            flex-flow: row nowrap;
+            column-gap: 10px;
+        }
+
+        .TimePanelView:nth-child(1) {
+            position: relative;
+
+            &::before {
+                content: "";
+                position: absolute;
+                display: block;
+                top: 0;
+                right: -23px;
+                transform: translateX(-50%);
+                height: 100%;
+                width: 1px;
+                background-color: $date-range-separator-color;
+            }
+        }
+
+        .TimePanelView__button_ok { 
+            display: none;
+        }
+    }
+}

package/index.d.ts

@@ -131,6 +131,9 @@ declare const _default: {
     'form.TimeFieldView': {
         lazy: () => any;
     };
+    'form.TimeRangeFieldView': {
+        lazy: () => any;
+    };
     'format.BooleanFormatterView': {
         lazy: () => any;
     };

package/index.js

@@ -134,6 +134,9 @@ exports["default"] = {
     'form.TimeFieldView': {
         lazy: function () { return require('./form/TimeField/TimeFieldView')["default"]; }
     },
+    'form.TimeRangeFieldView': {
+        lazy: function () { return require('./form/TimeRangeField/TimeRangeFieldView')["default"]; }
+    },
     'format.BooleanFormatterView': {
         lazy: function () { return require('./format/BooleanFormatter/BooleanFormatterView')["default"]; }
     },

package/index.scss

@@ -27,6 +27,7 @@
 @import './form/DateRangeField/DateRangeFieldView';
 @import './form/DateTimeField/DateTimeFieldView';
 @import './form/DateTimeRangeField/DateTimeRangeFieldView';
+@import './form/TimeRangeField//TimeRangeFieldView';
 @import './form/DropDownFieldItem/DropDownFieldItemView';
 @import './form/DropDownField/DropDownFieldView';
 @import './form/FieldLayout/FieldLayoutView';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.68",
+    "version": "3.0.0-beta.69",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.46",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.47",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
@@ -53,6 +53,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.46"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.47"
     }
 }

package/scss/mixins/date.scss

@@ -192,7 +192,7 @@ $date-sizes: map-merge(
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
-        background-color: $element-background-color;
+        background-color: $element-field-background-color;
         color: $text-color;
         column-gap: 8px;