intelicoreact 0.0.93 → 0.0.96

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

@@ -102,7 +102,7 @@ var Template = function Template(args) {
 var DropdownTemplate = Template.bind({});
 exports.DropdownTemplate = DropdownTemplate;
 DropdownTemplate.args = {
-  isListTop: true,
+  // isListTop: true,
   entity: 'entity',
   value: 'drop6',
   placeholder: 'Placeholder',

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js

@@ -17,6 +17,8 @@ var _moment = _interopRequireDefault(require("moment"));
 
 var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _Calendar = _interopRequireDefault(require("../../UI/Calendar/Calendar"));
 
 var _useClickOutside = require("../../../Functions/useClickOutside");
@@ -31,6 +33,9 @@ var InputCalendar = function InputCalendar(_ref) {
   var value = _ref.value,
       minDate = _ref.minDate,
       maxDate = _ref.maxDate,
+      _ref$format = _ref.format,
+      format = _ref$format === void 0 ? 'MM/DD/YYYY' : _ref$format,
+      isDontLimitFuture = _ref.isDontLimitFuture,
       onChange = _ref.onChange,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
@@ -38,8 +43,8 @@ var InputCalendar = function InputCalendar(_ref) {
       placeholder = _ref$placeholder === void 0 ? 'mm/dd/yyyy' : _ref$placeholder,
       _ref$mask = _ref.mask,
       mask = _ref$mask === void 0 ? '99/99/9999' : _ref$mask,
-      isDontLimitFuture = _ref.isDontLimitFuture,
-      isListTop = _ref.isListTop;
+      isListTop = _ref.isListTop,
+      disabled = _ref.disabled;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -47,6 +52,10 @@ var InputCalendar = function InputCalendar(_ref) {
       setIsOpened = _useState2[1];
 
   var calendarRef = (0, _react.useRef)(null);
+  var formatedMinDate = (0, _moment.default)(minDate).format(format) !== 'Invalid date' ? (0, _moment.default)(minDate).format(format) : null;
+  var formatedMaxDate = (0, _moment.default)(maxDate).format(format) !== 'Invalid date' ? (0, _moment.default)(maxDate).format(format) : null;
+  var momentMinDate = (0, _moment.default)(formatedMinDate, format).startOf('day');
+  var momentMaxDate = (0, _moment.default)(formatedMaxDate, format).startOf('day');
   (0, _useClickOutside.useClickOutside)(calendarRef, function () {
     return setIsOpened(false);
   });
@@ -65,8 +74,15 @@ var InputCalendar = function InputCalendar(_ref) {
     return (0, _moment.default)(new Date()).format('L');
   };
 
+  var handleBlur = function handleBlur(e) {
+    var value = e.target.value;
+    if ((0, _moment.default)(value).format(format) === 'Invalid date') onChange('');else if ((0, _moment.default)(value).startOf('day').isBefore(momentMinDate, 'days')) onChange(formatedMinDate);else if ((0, _moment.default)(value).endOf('day').isAfter(momentMaxDate, 'days')) onChange(formatedMaxDate);else onChange((0, _moment.default)(value).format(format));
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "input__wrap calendar-container ".concat(className),
+    className: (0, _classnames.default)('input__wrap calendar-container', className, {
+      'calendar-container_disabled': disabled
+    }),
     ref: calendarRef
   }, /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
     mask: mask,
@@ -77,20 +93,28 @@ var InputCalendar = function InputCalendar(_ref) {
     },
     className: "calendar-dropdown",
     onFocus: function onFocus() {
-      return setIsOpened(!isOpened);
+      return setIsOpened(true);
+    },
+    onBlur: !isOpened ? handleBlur : function () {},
+    onKeyUp: function onKeyUp(e) {
+      if (e.key === 'Enter') e.target.blur();
+      setIsOpened(false);
     }
   }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
-    className: isListTop ? '' : '',
     date: getCalendarValue(value),
     setDate: function setDate(newDate) {
       return changeCalendarDay(newDate);
     },
     params: {
-      minDate: minDate,
-      maxDate: maxDate
+      format: format,
+      minDate: formatedMinDate,
+      maxDate: formatedMaxDate,
+      momentMinDate: momentMinDate,
+      momentMaxDate: momentMaxDate,
+      isDontLimitFuture: isDontLimitFuture
     },
-    isDontLimitFuture: isDontLimitFuture,
-    isListTop: isListTop
+    isListTop: isListTop,
+    setIsOpened: setIsOpened
   }) : null);
 };
 

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.scss

@@ -2,6 +2,11 @@
   min-width: 200px;
   position: relative;
 
+  &_disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
   .calendar {
     position: absolute;
     z-index: 9;

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

@@ -39,20 +39,41 @@ var Template = function Template(args) {
       date = _useState2[0],
       setDate = _useState2[1];
 
-  return /*#__PURE__*/_react.default.createElement(_InputCalendar.default, (0, _extends2.default)({}, args, {
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      disabled = _useState4[0],
+      setDisabled = _useState4[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InputCalendar.default, (0, _extends2.default)({}, args, {
     value: date,
     onChange: function onChange(val) {
       return setDate(val);
+    },
+    disabled: disabled
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexFlow: 'row nowrap',
+      justifyContent: 'flex-end',
+      marginTop: '10px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    style: {
+      border: 'solid 1px black',
+      padding: '10px',
+      width: '80px'
+    },
+    onClick: function onClick() {
+      return setDisabled(!disabled);
     }
-  }));
+  }, disabled ? 'Enable' : 'Disable')));
 };
 
 var CalendarTemplate = Template.bind({});
 exports.CalendarTemplate = CalendarTemplate;
 CalendarTemplate.args = {
-  value: '',
-  minDate: '01/01/1900',
-  maxDate: '01/01/2100',
-  isDontLimitFuture: true // isListTop: true,
+  minDate: '01/10/2022',
+  maxDate: '04/20/2022' // isDontLimitFuture: true,
+  // isListTop: true,
 
 };

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

@@ -59,7 +59,14 @@ var InputDateRange = function InputDateRange(props) {
       _props$minDate = props.minDate,
       minDate = _props$minDate === void 0 ? null : _props$minDate,
       _props$maxDate = props.maxDate,
-      maxDate = _props$maxDate === void 0 ? null : _props$maxDate;
+      maxDate = _props$maxDate === void 0 ? null : _props$maxDate,
+      _props$format = props.format,
+      format = _props$format === void 0 ? 'MM/DD/YYYY' : _props$format,
+      isDontLimitFuture = props.isDontLimitFuture;
+  var formatedMinDate = (0, _momentTimezone.default)(minDate).format(format) !== 'Invalid date' ? (0, _momentTimezone.default)(minDate).format(format) : null;
+  var formatedMaxDate = (0, _momentTimezone.default)(maxDate).format(format) !== 'Invalid date' ? (0, _momentTimezone.default)(maxDate).format(format) : null;
+  var momentMinDate = (0, _momentTimezone.default)(formatedMinDate, format).startOf('day');
+  var momentMaxDate = (0, _momentTimezone.default)(formatedMaxDate, format).startOf('day');
   var actualValues = (0, _dependencies.getActualDateRange)(value);
 
   var _useToggle = (0, _dependencies.useToggle)(false),
@@ -86,14 +93,14 @@ var InputDateRange = function InputDateRange(props) {
 
     var formatedValue = _objectSpread(_objectSpread(_objectSpread({
       intervalKey: newValue.intervalKey,
-      start: newValue.start ? (0, _momentTimezone.default)(newValue.start).format('YYYY-MM-DDTHH:mm') : newValue.start,
-      end: newValue.end ? (0, _momentTimezone.default)(newValue.end).format('YYYY-MM-DDTHH:mm') : newValue.end
+      start: newValue.start ? (0, _momentTimezone.default)(newValue.start).format(format || 'YYYY-MM-DDTHH:mm') : newValue.start,
+      end: newValue.end ? (0, _momentTimezone.default)(newValue.end).format(format || 'YYYY-MM-DDTHH:mm') : newValue.end
     }, newValue.compare ? {
       compare: newValue.compare
     } : {}), newValue.startPrevDate ? {
-      startPrevDate: (0, _momentTimezone.default)(newValue.startPrevDate).format('YYYY-MM-DDTHH:mm')
+      startPrevDate: (0, _momentTimezone.default)(newValue.startPrevDate).format(format || 'YYYY-MM-DDTHH:mm')
     } : {}), newValue.endPrevDate ? {
-      endPrevDate: (0, _momentTimezone.default)(newValue.endPrevDate).format('YYYY-MM-DDTHH:mm')
+      endPrevDate: (0, _momentTimezone.default)(newValue.endPrevDate).format(format || 'YYYY-MM-DDTHH:mm')
     } : {});
 
     onChange(formatedValue);
@@ -211,14 +218,14 @@ var InputDateRange = function InputDateRange(props) {
     onClick: function onClick() {
       return handleArrowClick('left');
     },
-    disabled: disabled || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === _dependencies.ALL_TIME_KEY
+    disabled: disabled || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === _dependencies.ALL_TIME_KEY || formatedMinDate && (0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.start).subtract((0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).diff(actualValues === null || actualValues === void 0 ? void 0 : actualValues.start, 'hours'), 'hours').isBefore(momentMinDate)
   }), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
     type: "right",
     className: "date-range-input__arrow",
     onClick: function onClick() {
       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'))
+    disabled: disabled || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === _dependencies.ALL_TIME_KEY || !isDontLimitFuture && (formatedMaxDate ? (0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).endOf('day').subtract((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(momentMaxDate.startOf('day')) : (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, {
     ref: internalContainerRef,
     actualValues: actualValues,
@@ -228,8 +235,12 @@ var InputDateRange = function InputDateRange(props) {
     setIsCompare: setIsCompare,
     toggleOff: toggleOff,
     onChange: handleChange,
-    minDate: minDate ? (0, _momentTimezone.default)(minDate) : null,
-    maxDate: maxDate ? (0, _momentTimezone.default)(maxDate) : null
+    minDate: formatedMinDate,
+    maxDate: formatedMaxDate,
+    format: format,
+    momentMinDate: momentMinDate,
+    momentMaxDate: momentMaxDate,
+    isDontLimitFuture: isDontLimitFuture
   })))), error && /*#__PURE__*/_react.default.createElement("span", {
     className: "date-range-input__error-block"
   }, error));

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

@@ -17,6 +17,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+
 var _InputDateRange = _interopRequireDefault(require("./InputDateRange"));
 
 var _Table = _interopRequireDefault(require("../Table/Table"));
@@ -48,9 +50,7 @@ var Template = function Template(args) {
   var _useState = (0, _react.useState)(dateRange),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       value = _useState2[0],
-      setValue = _useState2[1]; // useEffect(() => console.log(value), [value]);
-  // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
-
+      setValue = _useState2[1];
 
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "mb20"
@@ -77,8 +77,10 @@ InputDateRangeTemplate.args = {
   error: false,
   disabled: false,
   isHoverable: false,
-  minDate: "",
-  maxDate: "",
+  // format: 'DD/MM/YYYY',
+  minDate: '01/10/2022',
+  maxDate: '04/20/2022',
+  // isDontLimitFuture: true,
   // short: true,
   isCompact: false,
   // isFocused: true,

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

@@ -68,10 +68,12 @@ var Datepicker = function Datepicker(props) {
       handleItemClick = props.handleItemClick,
       setActiveInterval = props.setActiveInterval,
       isShortWeekNames = props.isShortWeekNames,
-      _props$minDate = props.minDate,
-      minDate = _props$minDate === void 0 ? null : _props$minDate,
-      _props$maxDate = props.maxDate,
-      maxDate = _props$maxDate === void 0 ? null : _props$maxDate;
+      minDate = props.minDate,
+      maxDate = props.maxDate,
+      momentMinDate = props.momentMinDate,
+      momentMaxDate = props.momentMaxDate,
+      isDontLimitFuture = props.isDontLimitFuture,
+      format = props.format;
   var _values$start = values.start,
       start = _values$start === void 0 ? null : _values$start,
       _values$end = values.end,
@@ -348,18 +350,15 @@ var Datepicker = function Datepicker(props) {
     var newDate;
 
     if (!(0, _momentTimezone.default)(startDateInput).isValid()) {
-      newDate = startDate;
+      newDate = (0, _momentTimezone.default)(startDate);
     } else {
-      if (minDate && !(0, _momentTimezone.default)(startDateInput).isSameOrAfter(minDate)) {
-        newDate = minDate;
-      } else if (maxDate && !(0, _momentTimezone.default)(startDateInput).isSameOrBefore(maxDate)) {
-        newDate = maxDate;
-      } else {
-        newDate = (0, _momentTimezone.default)(startDateInput);
-      }
+      if (minDate && (0, _momentTimezone.default)(startDateInput).isBefore(minDate)) newDate = momentMinDate;else if (!isDontLimitFuture) {
+        var edge = maxDate ? momentMaxDate : (0, _momentTimezone.default)().add(1, 'day').startOf('day');
+        if ((0, _momentTimezone.default)(startDateInput).isAfter(edge)) newDate = edge;else newDate = (0, _momentTimezone.default)(startDateInput);
+      } else newDate = (0, _momentTimezone.default)(startDateInput);
     }
 
-    setStartDateInput(newDate);
+    setStartDateInput(newDate.format(format));
     setStartDate(newDate.set('hour', parseInt(startHour, 10)).toDate());
     doBlur('start', e);
     setDate1((0, _momentTimezone.default)(newDate).isSameOrAfter((0, _momentTimezone.default)(date2), 'month') ? (0, _momentTimezone.default)(date2).subtract(1, 'month') : (0, _momentTimezone.default)(newDate));
@@ -377,19 +376,16 @@ var Datepicker = function Datepicker(props) {
     var newDate;
 
     if (!(0, _momentTimezone.default)(endDateInput).isValid()) {
-      newDate = endDate;
+      newDate = (0, _momentTimezone.default)(endDate);
     } else {
-      if (minDate && !(0, _momentTimezone.default)(endDateInput).isSameOrAfter(minDate)) {
-        newDate = minDate;
-      } else if (maxDate && !(0, _momentTimezone.default)(endDateInput).isSameOrBefore(maxDate)) {
-        newDate = maxDate;
-      } else {
-        newDate = (0, _momentTimezone.default)(endDateInput);
-      }
+      if (minDate && (0, _momentTimezone.default)(endDateInput).isBefore(minDate)) newDate = momentMinDate;else if (!isDontLimitFuture) {
+        var edge = maxDate ? momentMaxDate : (0, _momentTimezone.default)().endOf('day');
+        if ((0, _momentTimezone.default)(endDateInput).isAfter(edge)) newDate = maxDate ? edge : edge.startOf('day');else newDate = (0, _momentTimezone.default)(startDateInput);
+      } else newDate = (0, _momentTimezone.default)(startDateInput);
     }
 
     setEndDate(addDay(newDate.set('hour', parseInt(endHour, 10)).toDate()));
-    setEndDateInput(newDate);
+    setEndDateInput(newDate.format(format));
     doBlur('end', e);
     setDate2(newDate);
   };
@@ -480,7 +476,11 @@ var Datepicker = function Datepicker(props) {
     onClick: handleClick,
     onHover: handleHover,
     limitRange: limitRange,
-    isShortWeekNames: isShortWeekNames
+    isShortWeekNames: isShortWeekNames,
+    minDate: minDate,
+    maxDate: maxDate,
+    momentMinDate: momentMinDate,
+    momentMaxDate: momentMaxDate
   }), /*#__PURE__*/_react.default.createElement(_RangeCalendar.default, {
     className: "date-picker__calendar",
     date: date2,
@@ -492,7 +492,12 @@ var Datepicker = function Datepicker(props) {
     endPrevDate: endPrevDate,
     onClick: handleClick,
     onHover: handleHover,
-    isShortWeekNames: isShortWeekNames
+    isShortWeekNames: isShortWeekNames,
+    minDate: minDate,
+    maxDate: maxDate,
+    momentMinDate: momentMinDate,
+    momentMaxDate: momentMaxDate,
+    isDontLimitFuture: isDontLimitFuture
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('date-picker__footer', {
       'date-picker__footer_once-element': isCompareHidden

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

@@ -57,10 +57,12 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       setIsCompare = props.setIsCompare,
       toggleOff = props.toggleOff,
       isShortWeekNames = props.isShortWeekNames,
-      _props$minDate = props.minDate,
-      minDate = _props$minDate === void 0 ? null : _props$minDate,
-      _props$maxDate = props.maxDate,
-      maxDate = _props$maxDate === void 0 ? null : _props$maxDate;
+      minDate = props.minDate,
+      maxDate = props.maxDate,
+      format = props.format,
+      momentMinDate = props.momentMinDate,
+      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]);
 
@@ -118,7 +120,7 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     // { 'form-select-options--hoverable': isHoverable },
     )
   }, items.map(function (item, index) {
-    var _intervals$item;
+    var _intervals$item, _intervals$item2, _intervals$item2$star, _intervals$item2$star2, _intervals$item2$star3;
 
     return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
       key: index,
@@ -128,7 +130,7 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onItemClick: function onItemClick() {
         return handleItemClick(item.value || item);
       },
-      disabled: item === _dependencies.CUSTOM_INTERVAL_KEY
+      disabled: item === _dependencies.CUSTOM_INTERVAL_KEY || minDate && ((_intervals$item2 = _dependencies.INTERVALS[item]) === null || _intervals$item2 === void 0 ? void 0 : (_intervals$item2$star = _intervals$item2.start) === null || _intervals$item2$star === void 0 ? void 0 : (_intervals$item2$star2 = _intervals$item2$star.call(_intervals$item2)) === null || _intervals$item2$star2 === void 0 ? void 0 : (_intervals$item2$star3 = _intervals$item2$star2.isBefore) === null || _intervals$item2$star3 === void 0 ? void 0 : _intervals$item2$star3.call(_intervals$item2$star2, momentMinDate))
     });
   })), !isCompact && /*#__PURE__*/_react.default.createElement(_Datepicker.default, {
     className: (0, _classnames.default)('opened-part__date-picker'),
@@ -154,7 +156,11 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setActiveInterval: setActiveInterval,
     isShortWeekNames: isShortWeekNames,
     minDate: minDate,
-    maxDate: maxDate
+    maxDate: maxDate,
+    format: format,
+    momentMinDate: momentMinDate,
+    momentMaxDate: momentMaxDate,
+    isDontLimitFuture: isDontLimitFuture
   })));
 });