intelicoreact 0.0.7 → 0.0.8

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -21,8 +21,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _reactFeather = require("react-feather");
 
-var _Label = _interopRequireDefault(require("../Label/Label"));
-
 require("./Dropdown.scss");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -38,7 +36,8 @@ var RC = 'dropdown';
 var Dropdown = function Dropdown(_ref) {
   var _options$find, _filteredOptions$find;
 
-  var options = _ref.options,
+  var _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
       value = _ref.value,
       error = _ref.error,
       onChange = _ref.onChange,
@@ -58,6 +57,7 @@ var Dropdown = function Dropdown(_ref) {
       setSearchValue = _useState4[1];
 
   var dropdownRef = (0, _react.useRef)(null);
+  if (!options) return null;
   var filteredGroups = options.filter(function (item) {
     var _item$items;
 
@@ -85,28 +85,35 @@ var Dropdown = function Dropdown(_ref) {
     return item === null || item === void 0 ? void 0 : (_item$label = item.label) === null || _item$label === void 0 ? void 0 : _item$label.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || '');
   });
   var filteredOptions = [].concat((0, _toConsumableArray2.default)(filteredItems), (0, _toConsumableArray2.default)(filteredGroups));
-  var modalBtnTrigger = entity && entity !== '' && typeof entity === 'string'; //decorator
+  var modalBtnTrigger = entity && entity !== '' && typeof entity === 'string';
+
+  var onChangeHandler = function onChangeHandler(item) {
+    setIsOpen(false);
+    setSearchValue(null);
+    onChange(item.value);
+  }; // decorator
+
 
-  var getDepends = function getDepends(modalBtnTrigger, item) {
-    var newOnChange = function newOnChange(item) {
-      if (item.value === 'open_modal') {
+  var getDepends = function getDepends(getDependsTrigger) {
+    var newOnChange = function newOnChange(e) {
+      if (e.value === 'open_modal') {
         onChange('open_modal');
       } else {
-        onChangeHandler(item);
+        onChangeHandler(e);
       }
-    }; //add pseudo option
+    }; // add pseudo option
 
 
     var newOptions = [{
-      label: 'New ' + entity,
+      label: "New ".concat(entity),
       value: 'open_modal',
       className: 'dropdown__list-item--modal'
     }].concat((0, _toConsumableArray2.default)(filteredOptions));
     return {
-      onChange: function onChange(item) {
-        return modalBtnTrigger ? newOnChange(item) : onChangeHandler(item);
+      onChange: function onChange(changeItem) {
+        return getDependsTrigger ? newOnChange(changeItem) : onChangeHandler(changeItem);
       },
-      options: modalBtnTrigger ? newOptions : options
+      options: getDependsTrigger ? newOptions : options
     };
   };
 
@@ -117,12 +124,6 @@ var Dropdown = function Dropdown(_ref) {
     }
   };
 
-  var onChangeHandler = function onChangeHandler(item) {
-    setIsOpen(false);
-    setSearchValue(null);
-    onChange(item.value);
-  };
-
   var onSearchHandler = function onSearchHandler(name) {
     setSearchValue(name);
   };

package/dist/Atomic/FormElements/Input/Input.js

@@ -19,10 +19,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _reactFeather = require("react-feather");
-
 var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
 
+var _index = require("../../../Constants/index.constants");
+
+var _inputExecutor = require("../../../Functions/inputExecutor");
+
 require("./Input.scss");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -35,30 +37,30 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var Input = function Input(_ref) {
   var onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      onKeyUp = _ref.onKeyUp,
+      isNotBlinkErrors = _ref.isNotBlinkErrors,
+      isPriceInput = _ref.isPriceInput,
+      isOnlyNumber = _ref.isOnlyNumber,
+      isOnlyString = _ref.isOnlyString,
+      isTwoDigitAfterDot = _ref.isTwoDigitAfterDot,
       disabled = _ref.disabled,
       withDelete = _ref.withDelete,
-      isNumeric = _ref.isNumeric,
-      _ref$numStep = _ref.numStep,
-      numStep = _ref$numStep === void 0 ? 1 : _ref$numStep,
-      _ref$min = _ref.min,
-      min = _ref$min === void 0 ? 0 : _ref$min,
-      max = _ref.max,
       value = _ref.value,
       placeholder = _ref.placeholder,
       className = _ref.className,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'text' : _ref$type,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      onKeyUp = _ref.onKeyUp,
       mask = _ref.mask,
       maskChar = _ref.maskChar,
       formatChars = _ref.formatChars,
       error = _ref.error,
       icon = _ref.icon,
-      symbolsLimit = _ref.symbolsLimit;
+      symbolsLimit = _ref.symbolsLimit,
+      blinkTime = _ref.blinkTime;
+  var DEFAULT_BLINK_TIME = 100; // STATES
 
-  // STATES
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isFocused = _useState2[0],
@@ -69,20 +71,36 @@ var Input = function Input(_ref) {
       isEditing = _useState4[0],
       setEditing = _useState4[1];
 
-  var inputRef = (0, _react.useRef)(null); // HANDLES
+  var inputRef = (0, _react.useRef)(null);
+  var previousValueRef = (0, _react.useRef)(value);
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isAttemptToChange = _useState6[0],
+      setIsAttemptToChange = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      isToHighlightError = _useState8[0],
+      setIsToHighlightError = _useState8[1];
+
+  var onlyNumbers = _inputExecutor.formatInput.onlyNumbers,
+      onlyString = _inputExecutor.formatInput.onlyString;
+  var _formatInput$priceInp = _inputExecutor.formatInput.priceInput,
+      addCommas = _formatInput$priceInp.addCommas,
+      removeComma = _formatInput$priceInp.removeComma; // HANDLES
 
   var handle = {
     change: function change(e) {
       var inputValue = e.target ? e.target.value : e;
 
-      if (isNumeric || type === 'number' && inputValue !== '') {
-        inputValue = parseFloat(inputValue) || '';
-
-        if (min && +min > inputValue) {
-          inputValue = min;
-        } else if (max && +max < inputValue) inputValue = max;
-      } else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
+      if (symbolsLimit && inputValue.length > +symbolsLimit) {
+        inputValue = inputValue.substring(0, +symbolsLimit);
+      }
 
+      if (isOnlyNumber && !isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue);
+      if (isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue, true);
+      if (isOnlyString) inputValue = onlyString(inputValue);
       onChange(inputValue.toString());
     },
     toggleEdit: function toggleEdit() {
@@ -91,17 +109,47 @@ var Input = function Input(_ref) {
     },
     focus: function focus(e) {
       setIsFocused(true);
+      if (isPriceInput && isOnlyNumber && !isTwoDigitAfterDot) onChange(removeComma(value));
       if (onFocus) onFocus(e);
     },
     blur: function blur(e) {
       setIsFocused(false);
       setEditing(false);
+
+      if (isPriceInput && isOnlyNumber && !isTwoDigitAfterDot) {
+        onChange(addCommas(value));
+      }
+
+      if (isTwoDigitAfterDot && !isPriceInput) {
+        onChange(cutOffsingleDot(value));
+      }
+
       if (onBlur) onBlur(e);
     },
     keyUp: function keyUp(e) {
-      return onKeyUp ? onKeyUp(e.keyCode, event) : null;
+      if (!isNotBlinkErrors) {
+        var _previousValueRef$cur;
+
+        var changedValue = '' + (value !== null && value !== void 0 ? value : '');
+        var previousValue = '' + ((_previousValueRef$cur = previousValueRef.current) !== null && _previousValueRef$cur !== void 0 ? _previousValueRef$cur : '');
+
+        var currentSet = function () {
+          if (previousValue.length < changedValue.length) return value.slice(previousValue.length - changedValue.length);else return changedValue.includes(e.key) ? e.key : '';
+        }();
+
+        if (!_index.KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue) setIsAttemptToChange(true);
+        console.log(changedValue, previousValue);
+        if (_index.KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet) previousValueRef.current = value;else previousValueRef.current = previousValue + currentSet[0];
+      }
+
+      if (onKeyUp) onKeyUp(e.keyCode, e);
     }
   };
+
+  function cutOffsingleDot(value) {
+    return value.slice(-1) === '.' ? value.slice(0, -1) : value;
+  }
+
   (0, _react.useEffect)(function () {
     if (isEditing) inputRef.current.focus();
   }, [isEditing, isFocused]);
@@ -114,9 +162,7 @@ var Input = function Input(_ref) {
     onChange: handle.change,
     onFocus: handle.focus,
     onBlur: handle.blur,
-    onKeyUp: handle.keyUp,
-    min: min,
-    max: max
+    onKeyUp: handle.keyUp
   }, maskChar ? {
     maskChar: maskChar
   } : {}), formatChars ? {
@@ -131,31 +177,24 @@ var Input = function Input(_ref) {
       }));
     }
 
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
+    return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
       ref: inputRef,
-      type: isNumeric ? 'number' : type
-    })), isNumeric && /*#__PURE__*/_react.default.createElement("div", {
-      className: "input__nums"
-    }, /*#__PURE__*/_react.default.createElement("button", {
-      onClick: function onClick() {
-        return handle.change(value - numStep);
-      },
-      className: (0, _classnames.default)("input__num-btn", {
-        disabled: value <= min
-      })
-    }, /*#__PURE__*/_react.default.createElement(_reactFeather.Minus, null)), /*#__PURE__*/_react.default.createElement("button", {
-      onClick: function onClick() {
-        return handle.change(+value + +numStep);
-      },
-      className: (0, _classnames.default)("input__num-btn", {
-        disabled: value >= max
-      })
-    }, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, null))));
+      type: isPriceInput ? 'text' : type
+    }));
   }
 
+  (0, _react.useEffect)(function () {
+    if (!isNotBlinkErrors && isAttemptToChange) {
+      setIsAttemptToChange(null);
+      setIsToHighlightError(true);
+      setTimeout(function () {
+        setIsToHighlightError(false);
+      }, blinkTime || DEFAULT_BLINK_TIME);
+    }
+  }, [isAttemptToChange]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("input__wrap", (0, _defineProperty2.default)({}, "input__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input__wrap_error", error), (0, _defineProperty2.default)({}, "input__wrap_disabled", disabled))
-  }, renderInput(), icon, withDelete && !isNumeric && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("input__wrap", (0, _defineProperty2.default)({}, "input__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input__wrap_error", error || isToHighlightError), (0, _defineProperty2.default)({}, "input__wrap_disabled", disabled))
+  }, renderInput(), icon, withDelete && /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("input__close", {
       hidden: !value
     }),

package/dist/Atomic/FormElements/Input/Input.stories.js

@@ -34,20 +34,20 @@ var _default = {
     error: {
       description: 'text - coloring input if is errored'
     },
+    isPriceInput: {
+      description: 'boolean - if true, the input will be styled as PriceInput'
+    },
     withDelete: {
       description: 'boolean - add clear-cross by hover'
     },
-    isNumeric: {
-      description: 'boolean - add plus/minus buttons, force input to numeric type'
-    },
-    numStep: {
-      description: 'number/text - plus/minus buttons factor (default: 1)'
+    isOnlyNumber: {
+      description: 'boolean - only numbers'
     },
-    min: {
-      description: 'number/text - minimal number for numeric input'
+    isOnlyString: {
+      description: 'boolean - only strings'
     },
-    max: {
-      description: 'number/text - maximal number for numeric input'
+    isTwoDigitAfterDot: {
+      description: 'boolean - only two digits after dot'
     },
     placeholder: {
       description: 'text'
@@ -103,21 +103,15 @@ var InputTemplate = Template.bind({});
 exports.InputTemplate = InputTemplate;
 InputTemplate.args = {
   type: 'text',
+  isOnlyNumber: false,
+  isOnlyString: false,
+  isPriceInput: false,
+  isTwoDigitAfterDot: false,
   disabled: false,
   error: '',
+  mask: '',
   withDelete: true,
-  isNumeric: false,
-  numStep: 1,
-  min: '0',
-  max: '5',
+  symbolsLimit: 255,
   placeholder: 'Placeholder',
-  // mask: 'nnnnn0129',
-  // maskChar: '_',
-  // formatChars: {
-  //   'n': '[0-9]',
-  //   's': '[A-Za-z]',
-  //   '*': '[A-Za-z0-9]'
-  // },
-  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null),
-  symbolsLimit: 225
+  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null)
 };

package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js

@@ -44,27 +44,18 @@ var InputDateRange = function InputDateRange(props) {
       id = props.id,
       label = props.label,
       className = props.className,
-      buttonsTypes = props.buttonsTypes,
       value = props.value,
       _props$onChange = props.onChange,
       onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
       error = props.error,
       disabled = props.disabled,
       isHoverable = props.isHoverable,
-      short = props.short,
       _props$isCompact = props.isCompact,
       isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
-      _props$isIntervalsHid = props.isIntervalsHidden,
-      isIntervalsHidden = _props$isIntervalsHid === void 0 ? false : _props$isIntervalsHid,
-      _props$isCompareHidde = props.isCompareHidden,
-      isCompareHidden = _props$isCompareHidde === void 0 ? false : _props$isCompareHidde,
       _props$hideArrows = props.hideArrows,
       hideArrows = _props$hideArrows === void 0 ? false : _props$hideArrows,
       isOptionsRight = props.isOptionsRight,
-      limitRange = props.limitRange,
-      isShortWeekNames = props.isShortWeekNames,
-      isUseAbs = props.isUseAbs,
-      absTooltip = props.absTooltip;
+      isUseAbs = props.isUseAbs;
   var actualValues = (0, _dependencies.getActualDateRange)(value);
 
   var _useToggle = (0, _dependencies.useToggle)(false),
@@ -85,7 +76,6 @@ var InputDateRange = function InputDateRange(props) {
 
   var ref = !isUseAbs ? (0, _dependencies.useClickOutside)(toggleOff) : (0, _react.useRef)(null);
   var internalContainerRef = (0, _react.useRef)(null);
-  var isEndDateNearFuture = (0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).isSameOrAfter((0, _momentTimezone.default)());
 
   var handleChange = function handleChange(input) {
     var newValue = (0, _dependencies.getActualDateRange)(input);
@@ -108,6 +98,12 @@ var InputDateRange = function InputDateRange(props) {
 
   var Range = function Range() {
     var SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
+
+    if (!actualValues.start && value.start) {
+      actualValues.start = value.start;
+      actualValues.end = value.end || '';
+    }
+
     var start = actualValues.start,
         end = actualValues.end;
     if (!start || !end) return null;
@@ -136,7 +132,8 @@ var InputDateRange = function InputDateRange(props) {
     var start = actualValues.start,
         end = actualValues.end;
     var intervalHoursCount = (0, _momentTimezone.default)(end).diff(start, 'hours');
-    var newEnd, newStart;
+    var newEnd;
+    var newStart;
     var endHours = (0, _momentTimezone.default)(end).hours();
     var startHours = (0, _momentTimezone.default)(start).hours();
 
@@ -165,33 +162,7 @@ var InputDateRange = function InputDateRange(props) {
   var handleArrowClick = function handleArrowClick(type) {
     slideInterval(type === 'right' ? 'forward' : 'back');
     toggleOff();
-  }; // const absData = useMemo(
-  //     () => ({
-  //         body: OpenedPart,
-  //         props: {
-  //             ...props,
-  //             key: `${actualValues.start}-${actualValues.end}-${actualValues.intervalKey}-${current}-${isCompare}`,
-  //             actualValues,
-  //             current,
-  //             setCurrent,
-  //             isCompare,
-  //             setIsCompare,
-  //             toggleOff,
-  //             onChange,
-  //         },
-  //         clickOutsideCallback: () => toggleOff(),
-  //         top: internalContainerRef.current?.getBoundingClientRect()?.bottom || 0,
-  //         left: internalContainerRef.current?.getBoundingClientRect()?.left || 0,
-  //     }),
-  //     [isToggled, value, actualValues, current, isCompare],
-  // );
-  // useEffect(() => {
-  //     if (current && isUseAbs && absTooltip) onChange(current, 'absTooltip/props/current');
-  // }, [current]);
-  // useEffect(() => {
-  //     if (isUseAbs) onChange(isToggled ? absData : null, 'absTooltip');
-  // }, [isToggled]);
-
+  };
 
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: internalContainerRef,
@@ -207,8 +178,12 @@ var InputDateRange = function InputDateRange(props) {
   }, label), /*#__PURE__*/_react.default.createElement("div", {
     className: "date-range-input__wraper",
     ref: ref,
-    onMouseEnter: isHoverable && toggleOn,
-    onMouseLeave: isHoverable && toggleOff
+    onMouseEnter: isHoverable ? toggleOn : function () {
+      return null;
+    },
+    onMouseLeave: isHoverable ? toggleOff : function () {
+      return null;
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('date-range-input__absolut-wraper', {
       'date-range-input__absolut-wraper_right-position': isOptionsRight
@@ -230,14 +205,14 @@ var InputDateRange = function InputDateRange(props) {
     type: "left",
     className: "date-range-input__arrow",
     onClick: function onClick() {
-      return handleArrowClick("left");
+      return handleArrowClick('left');
     },
     disabled: disabled || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === _dependencies.ALL_TIME_KEY
   }), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
     type: "right",
     className: "date-range-input__arrow",
     onClick: function onClick() {
-      return handleArrowClick("right");
+      return handleArrowClick('right');
     },
     disabled: disabled || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === _dependencies.ALL_TIME_KEY || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === 'today' || (0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).add((0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).diff(actualValues === null || actualValues === void 0 ? void 0 : actualValues.start, 'hours'), 'hours').isAfter((0, _momentTimezone.default)().add(1, 'day').startOf('day'))
   }))), isToggled && !isUseAbs && /*#__PURE__*/_react.default.createElement(_OpenedPart.default, (0, _extends2.default)({}, props, {

package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss

@@ -1,3 +1,5 @@
+@import "../../node_modules/anme/scss/anme-mixins-media";
+
 :root {
   --input-height: 28px;
   --label-line-height: 16px;
@@ -11,14 +13,14 @@
 }
 
 .date-range-input {
-  position: relative;
+  /*position: relative;
   width: 335px;
-  height: calc(var(--input-height) + var(--label-line-height));
+  //height: calc(var(--input-height) + var(--label-line-height));
 
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-end;
-  align-items: flex-start;
+  align-items: flex-start;*/
 
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
@@ -205,7 +207,7 @@
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
     background: #FFFFFF;
-
+    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
     &_right-position-once-element {
       justify-content: flex-end;
     }
@@ -222,15 +224,15 @@
     position: relative;
 
     width: 100%;
-    padding: 4px 8px 4px 32px;
+    padding: 0 20px 0 30px;
 
     text-transform: capitalize;
     white-space: nowrap;
     font-style: normal;
     font-weight: 300;
     font-family: var(--font-family);
-    font-size: var(--font-size);
-    line-height: var(--line-height);
+    font-size: 12px;
+    line-height: 24px;
     cursor: pointer;
 
     display: flex;
@@ -242,6 +244,9 @@
       // background-color: rgba(128, 128, 128, 0.1);
       background-color: #F2F2F8;
     }
+    &_active {
+      background: #f2f2f8;
+    }
 
     &-icon-active {
       position: absolute;
@@ -293,7 +298,7 @@
 
     &>div:not(.date-picker__inputs-separator) {
       width: 110px;
-      height: 100%;
+      min-height: 100%;
       margin-right: 9px;
 
       border: 1px solid var(--border-color);
@@ -323,6 +328,9 @@
     .date-picker__inputs-separator {
       margin-right: 9px;
     }
+    input {
+      font-weight: 300;
+    }
   }
 
   &__date-input {
@@ -348,7 +356,7 @@
 
     &>.dropdown__trigger {
       width: 100%;
-      height: 100%;
+      height: 28px;
       padding-left: 10px;
       padding-right: 15px;
 
@@ -420,7 +428,7 @@
 
         font-size: calc(var(--font-size) + 2px);
         line-height: calc(var(--line-height) + 4px);
-        
+
         font-style: normal;
         font-weight: 500;
 
@@ -592,3 +600,27 @@
     height: 100%;
   }
 }
+
+@include lgDown {
+  .opened-part__intervals-list {
+    display: none;
+  }
+}
+
+@include mdDown {
+  .date-picker__inputs-block {
+    flex-flow: wrap;
+  }
+
+  .date-picker__header {
+    flex-flow: row wrap
+  }
+  .date-picker__calendars-wrapper {
+    display: block;
+    margin: auto;
+  }
+  .date-picker__calendars .range-calendar {
+    margin: 0!important;
+    width: 100%;
+  }
+}