intelicoreact 0.1.15 → 0.1.16

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

@@ -43,7 +43,6 @@ var Template = function Template(args) {
     if (value === null) setTimeout(function () {
       return setValue(args.value);
     }, 1500);
-    console.log(value);
   }, [value]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AdvancedStatus.default, (0, _extends2.default)({}, args, {
     value: value,

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

@@ -2,9 +2,9 @@
   --input-height: 28px;
   --label-line-height: 16px;
   // --border-color: rgba(0, 0, 0, 0.3);
-  --border-color: #E2E5EC;
+  --border-color: #e2e5ec;
   --calendar-range-point-color: #6b81dd;
-  --font-family: 'Roboto';
+  --font-family: "Roboto";
   --font-size: 13px;
   --line-height: 20px;
   --border-radius: 3px;
@@ -22,7 +22,7 @@
 
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
+    -webkit-appearance: none;
   }
 
   &__label {
@@ -42,27 +42,21 @@
   &__absolut-wraper {
     width: 100%;
     height: fit-content;
-
-    position: absolute;
-    top: 0;
-    left: 0;
+    position: relative;
     display: flex;
     flex-flow: column nowrap;
     justify-content: flex-start;
     align-items: flex-start;
-
     background: transparent;
     z-index: 1;
 
-
     &_right-position {
       left: auto;
       right: 0;
     }
-
   }
 
-  &__static-part{
+  &__static-part {
     box-sizing: border-box;
     width: 100%;
     height: var(--input-height);
@@ -73,7 +67,7 @@
     justify-content: flex-end;
     align-items: flex-start;
 
-    background: #FFFFFF;
+    background: #ffffff;
     border: 1px solid var(--border-color);
   }
 
@@ -107,7 +101,7 @@
     pointer-events: none;
   }
 
-  &__range{
+  &__range {
     display: inline-block;
     pointer-events: none;
     word-wrap: break-word;
@@ -130,7 +124,7 @@
     }
   }
 
-  &__arrows-block{
+  &__arrows-block {
     box-sizing: border-box;
     width: fit-content;
     height: 100%;
@@ -164,7 +158,7 @@
 
   &_error {
     .date-range-input__wraper {
-      border-color: #FA564C;
+      border-color: #fa564c;
     }
   }
 
@@ -185,18 +179,21 @@
     bottom: -20px;
     font-size: var(--font-size);
     line-height: var(--line-height);
-    color: #FA564C;
+    color: #fa564c;
   }
 
   &__opened-part {
     width: fit-content;
     height: fit-content;
-    padding-top: 6px;
     background-color: transparent;
   }
 }
 
 .opened-part {
+  position: absolute;
+  top: 31px;
+  left: 0;
+
   &__wrapper {
     display: flex;
     flex-flow: row nowrap;
@@ -204,7 +201,7 @@
     align-items: stretch;
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
-    background: #FFFFFF;
+    background: #ffffff;
     box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
     &_right-position-once-element {
       justify-content: flex-end;
@@ -240,7 +237,7 @@
 
     &:hover {
       // background-color: rgba(128, 128, 128, 0.1);
-      background-color: #F2F2F8;
+      background-color: #f2f2f8;
     }
     &_active {
       background: #f2f2f8;
@@ -262,6 +259,23 @@
     width: fit-content;
     border: none;
   }
+
+  &--left {
+    left: auto;
+    right: 0
+  }
+
+  &--top {
+    top: auto;
+    bottom: 31px;
+  }
+
+  &--top-left {
+    left: auto;
+    top: auto;
+    bottom: 31px;
+    right: 0;
+  }
 }
 
 .date-picker {
@@ -276,7 +290,7 @@
     height: fit-content;
     padding: 7.5px 15px;
     border: none;
-    background-color: #F7FAFC;
+    background-color: #f7fafc;
 
     display: flex;
     flex-flow: column nowrap;
@@ -294,7 +308,7 @@
     font-size: var(--font-size);
     line-height: var(--line-height);
 
-    &>div:not(.date-picker__inputs-separator) {
+    & > div:not(.date-picker__inputs-separator) {
       width: 110px;
       min-height: 100%;
       margin-right: 9px;
@@ -318,7 +332,7 @@
       }
     }
 
-    &>div.dropdown {
+    & > div.dropdown {
       width: 80px;
       border-radius: var(--border-radius);
     }
@@ -352,7 +366,7 @@
     height: fit-content;
     border-radius: var(--border-radius);
 
-    &>.dropdown__trigger {
+    & > .dropdown__trigger {
       width: 100%;
       height: 28px;
       padding-left: 10px;
@@ -371,7 +385,7 @@
       border: none;
     }
 
-    & .dropdown__list-item{
+    & .dropdown__list-item {
       font-family: inherit;
       font-style: inherit;
       font-weight: inherit;
@@ -393,7 +407,7 @@
     padding: 10px 16px;
     border-top: 1px solid var(--border-color);
     border-bottom: 1px solid var(--border-color);
-    background-color: #FFFFFF;
+    background-color: #ffffff;
 
     display: flex;
     flex-flow: row nowrap;
@@ -410,7 +424,7 @@
     }
 
     .date-picker__calendar {
-      &:first-child{
+      &:first-child {
         margin-right: 10px;
       }
     }
@@ -438,7 +452,8 @@
           text-align: center;
         }
 
-        &__next, &__prev {
+        &__next,
+        &__prev {
           background-color: transparent;
           cursor: pointer;
         }
@@ -474,7 +489,7 @@
           cursor: pointer;
 
           &:hover {
-            background: #E2E6F8;
+            background: #e2e6f8;
           }
         }
 
@@ -513,30 +528,31 @@
         //   }
         // }
 
-        &--range-start, &--range-end {
+        &--range-start,
+        &--range-end {
           background: var(--calendar-range-point-color);
           border: 1px solid var(--calendar-range-point-color);
           box-sizing: border-box;
           border-radius: var(--border-radius);
-          color: #F8FBFF;
+          color: #f8fbff;
 
           &:hover {
             background: var(--calendar-range-point-color);
-            color: #F8FBFF;
+            color: #f8fbff;
           }
         }
 
         &--range-inside {
-          background: #EAF2FF;
+          background: #eaf2ff;
         }
 
         &--prev-range-end {
-          background: #E2E5EC;
+          background: #e2e5ec;
           border-radius: var(--border-radius);
         }
 
         &--prev-range-inside {
-          background: #F7F8FA;
+          background: #f7f8fa;
         }
 
         &--title {
@@ -557,14 +573,14 @@
     padding: 8px 16px;
     border-radius: 0 0 var(--border-radius) 0;
     border: none;
-    background-color: #F7FAFC;
+    background-color: #f7fafc;
 
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-between;
     align-items: center;
 
-    &_once-element{
+    &_once-element {
       justify-content: flex-end;
     }
   }
@@ -581,8 +597,8 @@
     &:first-child {
       width: 80px;
       margin-right: 16px;
-      background-color: #FFFFFF;
-      border: 1px solid #A6ACB1;
+      background-color: #ffffff;
+      border: 1px solid #a6acb1;
       border-radius: var(--border-radius);
     }
 
@@ -611,14 +627,14 @@
   }
 
   .date-picker__header {
-    flex-flow: row wrap
+    flex-flow: row wrap;
   }
   .date-picker__calendars-wrapper {
     display: block;
     margin: auto;
   }
   .date-picker__calendars .range-calendar {
-    margin: 0!important;
+    margin: 0 !important;
     width: 100%;
   }
 }

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

@@ -9,12 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
@@ -27,6 +27,8 @@ var _SelectItem = _interopRequireDefault(require("./SelectItem"));
 
 var _Datepicker = _interopRequireDefault(require("./Datepicker"));
 
+var _utils = require("../../../../Functions/utils");
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -35,6 +37,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+var classNames = require('classnames');
+
 var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var txt = props.txt,
       buttonsTypes = props.buttonsTypes,
@@ -64,12 +68,23 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       momentMaxDate = props.momentMaxDate,
       isDontLimitFuture = props.isDontLimitFuture;
 
-  var items = isCompact ? (0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)) : [].concat((0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)), [_dependencies.CUSTOM_INTERVAL_KEY]);
+  var boxRef = (0, _react.useRef)();
 
-  var _useState = (0, _react.useState)(actualValues.intervalKey),
+  var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      activeInterval = _useState2[0],
-      setActiveInterval = _useState2[1];
+      elemPosition = _useState2[0],
+      setElemPosition = _useState2[1];
+
+  var openedPartClass = classNames('date-range-input__opened-part', 'opened-part', (0, _defineProperty2.default)({}, "opened-part--".concat(elemPosition), elemPosition));
+  var openedPartWrapperClass = classNames('opened-part__wrapper', {
+    'opened-part__wrapper_right-position-once-element': isOptionsRight && (isCompact || isIntervalsHidden)
+  });
+  var items = isCompact ? (0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)) : [].concat((0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)), [_dependencies.CUSTOM_INTERVAL_KEY]);
+
+  var _useState3 = (0, _react.useState)(actualValues.intervalKey),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      activeInterval = _useState4[0],
+      setActiveInterval = _useState4[1];
 
   var handleItemClick = function handleItemClick(item) {
     if (item !== _dependencies.CUSTOM_INTERVAL_KEY) {
@@ -107,13 +122,14 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return _dependencies.CUSTOM_INTERVAL_KEY;
   };
 
+  (0, _react.useLayoutEffect)(function () {
+    setElemPosition((0, _utils.defineBoxPositionByScreen)(boxRef));
+  }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('date-range-input__opened-part', 'opened-part') // style={styles}
-
+    className: openedPartClass,
+    ref: boxRef
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('opened-part__wrapper', {
-      'opened-part__wrapper_right-position-once-element': isOptionsRight && (isCompact || isIntervalsHidden)
-    })
+    className: openedPartWrapperClass
   }, !isIntervalsHidden && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('opened-part__intervals-list' // 'form-select-options',
     // { 'form-select-options--short': short },

package/dist/Functions/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
+exports.defineBoxPositionByScreen = exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
 
 var _react = require("react");
 
@@ -63,4 +63,21 @@ var getStyles = function getStyles(el, prop) {
   return window.getComputedStyle(el).getPropertyValue(prop);
 };
 
-exports.getStyles = getStyles;
+exports.getStyles = getStyles;
+
+var defineBoxPositionByScreen = function defineBoxPositionByScreen(ref) {
+  var elemRightPosition = ref.current.getBoundingClientRect().right;
+  var elemBottomPosition = ref.current.getBoundingClientRect().bottom;
+  var screenWidth = document.documentElement.clientWidth;
+  var screenHeight = document.documentElement.clientHeight;
+
+  if (elemRightPosition > screenWidth && elemBottomPosition < screenHeight) {
+    return 'left';
+  } else if (elemBottomPosition > screenHeight && elemRightPosition < screenWidth) {
+    return 'top';
+  } else if (elemRightPosition > screenWidth && elemBottomPosition > screenHeight) {
+    return 'top-left';
+  }
+};
+
+exports.defineBoxPositionByScreen = defineBoxPositionByScreen;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "add postfix in dropdown",
   "main": "dist/index.js",
   "files": ["dist/*", "node_modules/anme/*", "node_modules/moment/*", "node_modules/moment-timezone/*"],