intelicoreact 0.0.93 → 0.0.96

package/dist/Atomic/UI/Calendar/Calendar.js

@@ -32,17 +32,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _default(props) {
   var date = props.date,
       setDate = props.setDate,
+      setIsOpened = props.setIsOpened,
       _props$allowPrev = props.allowPrev,
       allowPrev = _props$allowPrev === void 0 ? true : _props$allowPrev,
       _props$allowNext = props.allowNext,
       allowNext = _props$allowNext === void 0 ? true : _props$allowNext,
       params = props.params,
       className = props.className,
-      isDontLimitFuture = props.isDontLimitFuture,
       isListTop = props.isListTop; // const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
 
-  var minDate = params.minDate,
-      maxDate = params.maxDate;
+  var format = params.format,
+      minDate = params.minDate,
+      maxDate = params.maxDate,
+      momentMinDate = params.momentMinDate,
+      momentMaxDate = params.momentMaxDate,
+      isDontLimitFuture = params.isDontLimitFuture;
 
   var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -66,17 +70,15 @@ function _default(props) {
 
   var yearInputRef = (0, _react.useRef)(null);
   var selectedDay = (0, _moment.default)(showDate);
-  var isError = 'Invalid date'; // const title = useMemo(
-  //   () => (selectedDay.format('MMM') === isError ? isError : `${selectedDay.format('MMM')} ${moment(showDate).format('YYYY')}`),
-  //   [date, showDate]
-  // );
-
+  var isError = 'Invalid date';
   var showMonth = (0, _react.useMemo)(function () {
     return (0, _moment.default)(showDate).format('MMM');
   }, [date, showDate]);
   var showYear = (0, _react.useMemo)(function () {
     return (0, _moment.default)(showDate).format('YYYY');
   }, [date, showDate]);
+  var isShovPrevArrow = allowPrev && !(minDate && (0, _moment.default)(showDate).startOf('month').isSameOrBefore(momentMinDate, 'months'));
+  var isShovNextArrow = allowNext && (isDontLimitFuture || !(0, _moment.default)(showDate).startOf('month').isSameOrAfter(maxDate ? momentMaxDate : (0, _moment.default)().add(1, 'day').startOf('day'), 'months'));
   (0, _react.useEffect)(function () {
     var result = {};
     var day = selectedDay.startOf('month');
@@ -105,8 +107,8 @@ function _default(props) {
     if (!day) return /*#__PURE__*/_react.default.createElement("div", {
       className: "calendar__day"
     });
-    var isFutureDay = day && maxDate ? (0, _moment.default)(day.date).isAfter((0, _moment.default)(maxDate || ''), 'day') : (0, _moment.default)(day.date).isAfter((0, _moment.default)(), 'day');
-    var isBeforeDay = day && (0, _moment.default)(day.date).isBefore((0, _moment.default)(minDate || ''), 'day');
+    var isFutureDay = day && !isDontLimitFuture && maxDate ? (0, _moment.default)(day.date).isAfter(momentMaxDate || (0, _moment.default)().add(1, 'days'), 'day') : (0, _moment.default)(day.date).isAfter((0, _moment.default)(), 'day');
+    var isBeforeDay = day && (0, _moment.default)(day.date).isBefore(momentMinDate || '', 'day');
     var classNames = (0, _classnames.default)('calendar__day', {
       'calendar__day--clickable': day
     }, {
@@ -120,7 +122,8 @@ function _default(props) {
       key: "".concat(week, "_").concat(dayOfWeek),
       className: classNames,
       onClick: day && (isDontLimitFuture || !isFutureDay) ? function () {
-        return setDate((0, _moment.default)(day.date).format('L'));
+        setDate((0, _moment.default)(day.date).format('L'));
+        setIsOpened(false);
       } : null // onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
       // onMouseLeave={() => onHover(null)}
 
@@ -168,7 +171,7 @@ function _default(props) {
     className: "calendar-header"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "calendar-header__prev"
-  }, allowPrev && /*#__PURE__*/_react.default.createElement("div", {
+  }, isShovPrevArrow && /*#__PURE__*/_react.default.createElement("div", {
     onClick: handlePrev
   }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronLeft, null))), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('calendar-header__title'),
@@ -198,7 +201,7 @@ function _default(props) {
     }
   }) : "".concat(showYear))), /*#__PURE__*/_react.default.createElement("div", {
     className: "calendar-header__next"
-  }, allowNext && /*#__PURE__*/_react.default.createElement("div", {
+  }, isShovNextArrow && /*#__PURE__*/_react.default.createElement("div", {
     onClick: handleNext
   }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronRight, null)))), /*#__PURE__*/_react.default.createElement("div", {
     className: "calendar__week"

package/dist/Functions/customEventListener.js

@@ -0,0 +1,66 @@
+"use strict";
+
+(function () {
+  Element.prototype._addEventListener = Element.prototype.addEventListener;
+
+  Element.prototype.addEventListener = function (a, b, c) {
+    if (c == undefined) c = false;
+
+    this._addEventListener(a, b, c);
+
+    if (!this.eventListenerList) this.eventListenerList = {};
+    if (!this.eventListenerList[a]) this.eventListenerList[a] = []; //this.removeEventListener(a,b,c); // TODO - handle duplicates..
+
+    this.eventListenerList[a].push({
+      listener: b,
+      useCapture: c
+    });
+  };
+
+  Element.prototype.getEventListeners = function (a) {
+    if (!this.eventListenerList) this.eventListenerList = {};
+    if (a == undefined) return this.eventListenerList;
+    return this.eventListenerList[a];
+  };
+
+  Element.prototype.clearEventListeners = function (a) {
+    if (!this.eventListenerList) this.eventListenerList = {};
+
+    if (a == undefined) {
+      for (var x in this.getEventListeners()) {
+        this.clearEventListeners(x);
+      }
+
+      return;
+    }
+
+    var el = this.getEventListeners(a);
+    if (el == undefined) return;
+
+    for (var i = el.length - 1; i >= 0; --i) {
+      var ev = el[i];
+      this.removeEventListener(a, ev.listener, ev.useCapture);
+    }
+  };
+
+  Element.prototype._removeEventListener = Element.prototype.removeEventListener;
+
+  Element.prototype.removeEventListener = function (a, b, c) {
+    if (c == undefined) c = false;
+
+    this._removeEventListener(a, b, c);
+
+    if (!this.eventListenerList) this.eventListenerList = {};
+    if (!this.eventListenerList[a]) this.eventListenerList[a] = []; // Find the event in the list
+
+    for (var i = 0; i < this.eventListenerList[a].length; i++) {
+      if (this.eventListenerList[a][i].listener == b, this.eventListenerList[a][i].useCapture == c) {
+        // Hmm..
+        this.eventListenerList[a].splice(i, 1);
+        break;
+      }
+    }
+
+    if (this.eventListenerList[a].length == 0) delete this.eventListenerList[a];
+  };
+})();

package/dist/Functions/useMouseUpOutside.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useMouseUpOutside;
+
+var _react = require("react");
+
+function useMouseUpOutside(ref, setOut, open) {
+  function handleMouseUpOutside(event) {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setOut(open);
+    }
+  }
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener('mouseup', handleMouseUpOutside);
+    return function () {
+      document.removeEventListener('mouseup', handleMouseUpOutside);
+    };
+  }, [ref]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.93",
+  "version": "0.0.96",
   "description": "fix input-calendar",
   "main": "dist/index.js",
   "scripts": {

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

@@ -54,7 +54,7 @@ const Template = (args) => {
 export const DropdownTemplate = Template.bind({});
 
 DropdownTemplate.args = {
-  isListTop: true,
+  // isListTop: true,
   entity: 'entity',
   value: 'drop6',
   placeholder: 'Placeholder',

package/src/Atomic/FormElements/InputCalendar/InputCalendar.js

@@ -1,6 +1,8 @@
 import React, { useState, useRef } from 'react';
 import moment from 'moment';
 import InputMask from 'react-input-mask';
+import cn from 'classnames';
+
 import Calendar from '../../UI/Calendar/Calendar';
 import { useClickOutside } from '../../../Functions/useClickOutside';
 
@@ -10,16 +12,29 @@ const InputCalendar = ({
   value,
   minDate,
   maxDate,
+  format = 'MM/DD/YYYY',
+  isDontLimitFuture,
   onChange,
   className = '',
   placeholder = 'mm/dd/yyyy',
   mask = '99/99/9999',
-  isDontLimitFuture,
   isListTop,
+  disabled,
 }) => {
   const [isOpened, setIsOpened] = useState(false);
   const calendarRef = useRef(null);
 
+  const formatedMinDate = moment(minDate).format(format) !== 'Invalid date' 
+    ? moment(minDate).format(format) 
+    : null;
+
+  const formatedMaxDate = moment(maxDate).format(format) !== 'Invalid date' 
+    ? moment(maxDate).format(format) 
+    : null;
+      
+  const momentMinDate =  moment(formatedMinDate, format).startOf('day');
+  const momentMaxDate =  moment(formatedMaxDate, format).startOf('day');
+
   useClickOutside(calendarRef, () => setIsOpened(false));
 
   const changeInputValue = (val) => {
@@ -38,24 +53,48 @@ const InputCalendar = ({
     return moment(new Date()).format('L');
   };
 
+  const handleBlur = (e) => {
+    const value = e.target.value;
+    if (moment(value).format(format) === 'Invalid date') onChange('');
+    else if (moment(value).startOf('day').isBefore(momentMinDate, 'days')) onChange(formatedMinDate);
+    else if (moment(value).endOf('day').isAfter(momentMaxDate, 'days')) onChange(formatedMaxDate);
+    else onChange(moment(value).format(format));
+  };
+
   return (
-    <div className={`input__wrap calendar-container ${className}`} ref={calendarRef}>
+    <div
+      className={cn('input__wrap calendar-container', className, {
+        'calendar-container_disabled': disabled,
+      })}
+      ref={calendarRef}
+    >
       <InputMask
         mask={mask}
         placeholder={placeholder}
         value={value}
         onChange={(e) => changeInputValue(e.target.value)}
         className="calendar-dropdown"
-        onFocus={() => setIsOpened(!isOpened)}
+        onFocus={() => setIsOpened(true)}
+        onBlur={!isOpened ? handleBlur : () => {}}
+        onKeyUp={e => {
+          if (e.key === 'Enter') e.target.blur();
+          setIsOpened(false);
+        }}
       />
       {isOpened ? (
         <Calendar
-          className={isListTop ? '' : ''}
           date={getCalendarValue(value)}
           setDate={(newDate) => changeCalendarDay(newDate)}
-          params={{ minDate, maxDate }}
-          isDontLimitFuture={isDontLimitFuture}
+          params={{
+            format,
+            minDate: formatedMinDate, 
+            maxDate: formatedMaxDate, 
+            momentMinDate, 
+            momentMaxDate, 
+            isDontLimitFuture 
+          }}
           isListTop={isListTop}
+          setIsOpened={setIsOpened}
         />
       ) : null}
     </div>

package/src/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/src/Atomic/FormElements/InputCalendar/InputCalendar.stories.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import InputCalendar from './InputCalendar';
 
 global.lng = 'en';
@@ -15,16 +15,25 @@ export default {
 
 const Template = (args) => {
   const [date, setDate] = useState('');
+  const [disabled, setDisabled] = useState(false);
 
-  return <InputCalendar {...args} value={date} onChange={(val) => setDate(val)} />;
+  return (
+    <>
+      <InputCalendar {...args} value={date} onChange={(val) => setDate(val)} disabled={disabled} />
+      <div style={{ display: 'flex', flexFlow: 'row nowrap', justifyContent: 'flex-end', marginTop: '10px' }}>
+        <button style={{ border: 'solid 1px black', padding: '10px', width: '80px' }} onClick={() => setDisabled(!disabled)}>
+          {disabled ? 'Enable' : 'Disable'}
+        </button>
+      </div>
+    </>
+  );
 };
 
 export const CalendarTemplate = Template.bind({});
 
 CalendarTemplate.args = {
-  value: '',
-  minDate: '01/01/1900',
-  maxDate: '01/01/2100',
-  isDontLimitFuture: true,
+  minDate: '01/10/2022',
+  maxDate: '04/20/2022',
+  // isDontLimitFuture: true,
   // isListTop: true,
 };

package/src/Atomic/FormElements/InputDateRange/InputDateRange.js

@@ -9,7 +9,7 @@ import Arrow from '../../UI/Arrow/Arrow';
 
 import './InputDateRange.scss';
 
-const InputDateRange = props => {
+const InputDateRange = (props) => {
   const {
     txt,
     id,
@@ -26,8 +26,21 @@ const InputDateRange = props => {
     isUseAbs,
     minDate = null,
     maxDate = null,
+    format = 'MM/DD/YYYY',
+    isDontLimitFuture,
   } = props;
 
+  const formatedMinDate = moment(minDate).format(format) !== 'Invalid date' 
+    ? moment(minDate).format(format) 
+    : null;
+
+  const formatedMaxDate = moment(maxDate).format(format) !== 'Invalid date' 
+    ? moment(maxDate).format(format) 
+    : null;
+
+  const momentMinDate =  moment(formatedMinDate, format).startOf('day');
+  const momentMaxDate =  moment(formatedMaxDate, format).startOf('day');
+
   const actualValues = getActualDateRange(value);
   const { isToggled, toggle, toggleOn, toggleOff } = useToggle(false);
   const [current, setCurrent] = useState(actualValues?.intervalKey);
@@ -36,16 +49,15 @@ const InputDateRange = props => {
   const ref = !isUseAbs ? useClickOutside(toggleOff) : useRef(null);
   const internalContainerRef = useRef(null);
 
-  const handleChange = input => {
-
+  const handleChange = (input) => {
     const newValue = getActualDateRange(input);
     const formatedValue = {
       intervalKey: newValue.intervalKey,
-      start: newValue.start ? moment(newValue.start).format('YYYY-MM-DDTHH:mm') : newValue.start,
-      end: newValue.end ? moment(newValue.end).format('YYYY-MM-DDTHH:mm') : newValue.end,
+      start: newValue.start ? moment(newValue.start).format(format || 'YYYY-MM-DDTHH:mm') : newValue.start,
+      end: newValue.end ? moment(newValue.end).format(format || 'YYYY-MM-DDTHH:mm') : newValue.end,
       ...(newValue.compare ? { compare: newValue.compare } : {}),
-      ...(newValue.startPrevDate ? { startPrevDate: moment(newValue.startPrevDate).format('YYYY-MM-DDTHH:mm') } : {}),
-      ...(newValue.endPrevDate ? { endPrevDate: moment(newValue.endPrevDate).format('YYYY-MM-DDTHH:mm') } : {})
+      ...(newValue.startPrevDate ? { startPrevDate: moment(newValue.startPrevDate).format(format || 'YYYY-MM-DDTHH:mm') } : {}),
+      ...(newValue.endPrevDate ? { endPrevDate: moment(newValue.endPrevDate).format(format || 'YYYY-MM-DDTHH:mm') } : {}),
     };
 
     onChange(formatedValue);
@@ -69,9 +81,9 @@ const InputDateRange = props => {
       endTime !== '00:00' ? `(${endTime})` : ''
     }`;
 
-    const getClasses = base =>
+    const getClasses = (base) =>
       cn('date-range-input__range-text', {
-        'date-range-input__range-text_little': base.length > SYMBOLS_QUANTITY_IF_TIME_ADDED
+        'date-range-input__range-text_little': base.length > SYMBOLS_QUANTITY_IF_TIME_ADDED,
       });
 
     return (
@@ -113,16 +125,16 @@ const InputDateRange = props => {
       ...value,
       intervalKey: getActualDateRange({
         start: newStart,
-        end: newEnd
+        end: newEnd,
       })?.intervalKey,
       start: newStart,
       end: newEnd,
       startPrevDate,
-      endPrevDate
+      endPrevDate,
     });
   };
 
-  const handleArrowClick = type => {
+  const handleArrowClick = (type) => {
     slideInterval(type === 'right' ? 'forward' : 'back');
     toggleOff();
   };
@@ -135,7 +147,7 @@ const InputDateRange = props => {
         'date-range-input_hide-arrows': hideArrows,
         'date-range-input_focused': isToggled,
         'date-range-input_error': error,
-        'date-range-input_disabled': disabled
+        'date-range-input_disabled': disabled,
       })}
     >
       <span className="date-range-input__label">{label}</span>
@@ -147,7 +159,7 @@ const InputDateRange = props => {
       >
         <div
           className={cn('date-range-input__absolut-wraper', {
-            'date-range-input__absolut-wraper_right-position': isOptionsRight
+            'date-range-input__absolut-wraper_right-position': isOptionsRight,
           })}
         >
           <div className={cn('date-range-input__static-part')}>
@@ -160,7 +172,7 @@ const InputDateRange = props => {
               <div className="date-range-input__interval-key">
                 <span>
                   {(txt?.labels && txt.labels[actualValues?.intervalKey]) ??
-                  (INTERVALS[actualValues?.intervalKey]?.label || CUSTOM_INTERVAL_KEY_TEXT)}
+                    (INTERVALS[actualValues?.intervalKey]?.label || CUSTOM_INTERVAL_KEY_TEXT)}
                 </span>
                 {current !== ALL_TIME_KEY && <span>:</span>}
               </div>
@@ -176,7 +188,15 @@ const InputDateRange = props => {
                   type="left"
                   className="date-range-input__arrow"
                   onClick={() => handleArrowClick('left')}
-                  disabled={disabled || actualValues?.intervalKey === ALL_TIME_KEY}
+                  disabled={
+                    disabled ||
+                    actualValues?.intervalKey === ALL_TIME_KEY ||
+                    (formatedMinDate &&
+                      moment(actualValues?.start)
+                        .subtract(moment(actualValues?.end).diff(actualValues?.start, 'hours'), 'hours')
+                        .isBefore(momentMinDate)
+                    )
+                  }
                 />
                 <Arrow
                   type="right"
@@ -185,10 +205,21 @@ const InputDateRange = props => {
                   disabled={
                     disabled ||
                     actualValues?.intervalKey === ALL_TIME_KEY ||
-                    actualValues?.intervalKey === 'today' ||
-                    moment(actualValues?.end)
-                      .add(moment(actualValues?.end).diff(actualValues?.start, 'hours'), 'hours')
-                      .isAfter(moment().add(1, 'day').startOf('day'))
+                    (!isDontLimitFuture &&
+                      (formatedMaxDate
+                        ? (
+                            moment(actualValues?.end)
+                              .endOf('day')
+                              .subtract(moment(actualValues?.end).diff(actualValues?.start, 'hours'), 'hours')
+                              .isAfter(momentMaxDate.startOf('day'))
+                          )
+                        : (
+                            moment(actualValues?.end)
+                              .add(moment(actualValues?.end).diff(actualValues?.start, 'hours'), 'hours')
+                              .isAfter(moment().add(1, 'day').startOf('day'))
+                          )
+                      )
+                    )
                   }
                 />
               </div>
@@ -205,8 +236,12 @@ const InputDateRange = props => {
               setIsCompare={setIsCompare}
               toggleOff={toggleOff}
               onChange={handleChange}
-              minDate={minDate ? moment(minDate) : null}
-              maxDate={maxDate ? moment(maxDate) : null}
+              minDate={formatedMinDate}
+              maxDate={formatedMaxDate}
+              format={format}
+              momentMinDate={momentMinDate}
+              momentMaxDate={momentMaxDate}
+              isDontLimitFuture={isDontLimitFuture}
             />
           )}
         </div>

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

@@ -1,4 +1,6 @@
 import React, { /* useEffect, */ useState } from 'react';
+import moment from 'moment-timezone';
+
 import InputDateRange from './InputDateRange';
 import Table from '../Table/Table';
 
@@ -14,15 +16,13 @@ export default {
     //     options: ['admin', 'user']
     //   }
     // }
-  }
+  },
 };
 
-const Template = args => {
+const Template = (args) => {
   const { dateRange, ...restOfProps } = args;
   const [value, setValue] = useState(dateRange);
-  // useEffect(() => console.log(value), [value]);
 
-  // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
   return (
     <div>
       <div className="mb20">
@@ -38,7 +38,7 @@ InputDateRangeTemplate.args = {
   txt: {},
   buttonsTypes: {
     // apply: 'ellipse-apply',
-    cancel: 'bark-outline'
+    cancel: 'bark-outline',
   },
   label: 'Date Range',
   dateRange: { intervalKey: 'today' },
@@ -47,8 +47,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,
@@ -56,7 +58,7 @@ InputDateRangeTemplate.args = {
   isCompareHidden: true,
   hideArrows: false,
   isOptionsRight: false,
-  isShortWeekNames: false
+  isShortWeekNames: false,
   // limitRange,
   // isUseAbs,
   // absTooltip