intelicoreact 0.0.92 → 0.0.95

package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js

@@ -2,145 +2,151 @@ import React, { useEffect, useMemo, useState } from 'react';
 import cn from 'classnames';
 import moment from 'moment-timezone';
 
-import Arrow from '../../UI/Arrow/Arrow'
+import Arrow from '../../UI/Arrow/Arrow';
 
-import './RangeCalendar.scss'
+import './RangeCalendar.scss';
 
-const RangeCalendar = props => {
-    const {
-        className,
-        date,
-        setDate,
-        startDate,
-        endDate,
-        allowPrev = true,
-        allowNext = true,
-        onClick = () => {},
-        onHover = () => {},
-        startPrevDate,
-        endPrevDate,
-        limitRange,
-        isShortWeekNames
-    } = props;
+const RangeCalendar = (props) => {
+  const {
+    className,
+    date,
+    setDate,
+    startDate,
+    endDate,
+    allowPrev = true,
+    allowNext = true,
+    onClick = () => {},
+    onHover = () => {},
+    startPrevDate,
+    endPrevDate,
+    limitRange,
+    isShortWeekNames,
+    minDate,
+    maxDate,
+    momentMinDate,
+    momentMaxDate,
+    isDontLimitFuture,
+  } = props;
 
-    const [days, setDays] = useState({});
+  const [days, setDays] = useState({});
 
-    const title = useMemo(() => `${moment(date).format('MMM')} ${moment(date).format('YYYY')}`, [date]);
+  const title = useMemo(() => `${moment(date).format('MMM')} ${moment(date).format('YYYY')}`, [date]);
 
-    useEffect(() => {
-        const result = {};
-        const day = moment(date).startOf('month');
-        const daysInMonth = day.daysInMonth();
-        for (let d = 0; d < daysInMonth; d += 1) {
-            let week = day.week();
-            if (day.month() === 11 && week === 1) week = 53;
-            if (day.month() === 0 && week === 53) week = 0;
-            if (!Object.prototype.hasOwnProperty.call(result, week)) {
-                result[week] = {};
-            }
-            result[week][day.weekday()] = { date: day.toDate() };
-            day.add(1, 'd');
-        }
-        setDays(result);
-    }, [date]);
+  useEffect(() => {
+    const result = {};
+    const day = moment(date).startOf('month');
+    const daysInMonth = day.daysInMonth();
+    for (let d = 0; d < daysInMonth; d += 1) {
+      let week = day.week();
+      if (day.month() === 11 && week === 1) week = 53;
+      if (day.month() === 0 && week === 53) week = 0;
+      if (!Object.prototype.hasOwnProperty.call(result, week)) {
+        result[week] = {};
+      }
+      result[week][day.weekday()] = { date: day.toDate() };
+      day.add(1, 'd');
+    }
+    setDays(result);
+  }, [date]);
 
-    const renderDay = (week, dayOfWeek) => {
-        const day = days[week][dayOfWeek];
-        const isFutureDay = day && moment(day.date).isAfter(moment(), 'day');
-        const isPastDay = limitRange
-            ? day && moment(day.date).isBefore(moment().subtract(limitRange, 'days'), 'day')
-            : null;
-        const isRangeStart = day && moment(day.date).isSame(startDate, 'day');
-        const isRangeEnd = day && moment(day.date).isSame(moment(endDate).subtract(1, 'hour'), 'day');
-        const isRangeInside =
-            day &&
-            startDate &&
-            endDate &&
-            moment(day.date).isAfter(startDate, 'day') &&
-            moment(day.date).isBefore(moment(endDate).subtract(1, 'hour'), 'day');
-        const isPrevRangeEnd =
-            day &&
-            (moment(day.date).isSame(startPrevDate, 'day') ||
-                moment(day.date).isSame(moment(endPrevDate).subtract(1, 'day'), 'day'));
-        const isPrevRangeInside =
-            day &&
-            startPrevDate &&
-            endPrevDate &&
-            moment(day.date).isAfter(startPrevDate, 'day') &&
-            moment(day.date).isBefore(moment(endPrevDate).subtract(1, 'day'), 'day');
-        const classNames = cn(
-            'range-calendar__day',
-            { 'range-calendar__day--clickable': day },
-            { 'range-calendar__day--disabled': isFutureDay },
-            { 'range-calendar__day--disabled': isPastDay },
-            { 'range-calendar__day--range-start': isRangeStart },
-            { 'range-calendar__day--range-end': isRangeEnd },
-            { 'range-calendar__day--range-inside': isRangeInside },
-            { 'range-calendar__day--prev-range-end': isPrevRangeEnd },
-            { 'range-calendar__day--prev-range-inside': isPrevRangeInside }
-        );
-
-        return (
-            <div
-                key={`${week}_${dayOfWeek}`}
-                className={classNames}
-                onClick={day && !isFutureDay ? e => onClick(day.date, e) : null}
-                onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
-                onMouseLeave={() => onHover(null)}
-            >
-              <span className="calendar__day-num">{day && day.date.getDate()}</span>
-            </div>
-        );
-    };
+  const renderDay = (week, dayOfWeek) => {
+    const day = days[week][dayOfWeek];
+    const isFutureDay = day && moment(day.date).isAfter(moment(), 'day');
+    const isPastDay = limitRange ? day && moment(day.date).isBefore(moment().subtract(limitRange, 'days'), 'day') : null;
+    const isRangeStart = day && moment(day.date).isSame(startDate, 'day');
+    const isRangeEnd = day && moment(day.date).isSame(moment(endDate).subtract(1, 'hour'), 'day');
+    const isRangeInside =
+      day &&
+      startDate &&
+      endDate &&
+      moment(day.date).isAfter(startDate, 'day') &&
+      moment(day.date).isBefore(moment(endDate).subtract(1, 'hour'), 'day');
+    const isPrevRangeEnd =
+      day && (moment(day.date).isSame(startPrevDate, 'day') || moment(day.date).isSame(moment(endPrevDate).subtract(1, 'day'), 'day'));
+    const isPrevRangeInside =
+      day &&
+      startPrevDate &&
+      endPrevDate &&
+      moment(day.date).isAfter(startPrevDate, 'day') &&
+      moment(day.date).isBefore(moment(endPrevDate).subtract(1, 'day'), 'day');
+    const classNames = cn(
+      'range-calendar__day',
+      { 'range-calendar__day--clickable': day },
+      {
+        'range-calendar__day--disabled':
+          isPastDay ||
+          (minDate && moment(day?.date).isBefore(minDate, 'day')) ||
+          (!isDontLimitFuture && (maxDate ? moment(day?.date).isAfter(momentMaxDate) : isFutureDay)),
+      },
+      { 'range-calendar__day--range-start': isRangeStart },
+      { 'range-calendar__day--range-end': isRangeEnd },
+      { 'range-calendar__day--range-inside': isRangeInside },
+      { 'range-calendar__day--prev-range-end': isPrevRangeEnd },
+      { 'range-calendar__day--prev-range-inside': isPrevRangeInside }
+    );
 
-    const handlePrev = () => {
-        setDate(moment(date).subtract(1, 'month').toDate());
-    };
+    return (
+      <div
+        key={`${week}_${dayOfWeek}`}
+        className={classNames}
+        onClick={day ? (e) => onClick(day.date, e) : null}
+        onMouseOver={day ? () => onHover(day.date) : null}
+        onMouseLeave={() => onHover(null)}
+      >
+        <span className="calendar__day-num">{day && day.date.getDate()}</span>
+      </div>
+    );
+  };
 
-    const handleNext = () => {
-        setDate(moment(date).add(1, 'month').toDate());
-    };
+  const handlePrev = () => {
+    setDate(moment(date).subtract(1, 'month').toDate());
+  };
 
-    const getFormatedWeekName = input => isShortWeekNames ? input.charAt(0) : input;
+  const handleNext = () => {
+    setDate(moment(date).add(1, 'month').toDate());
+  };
 
-    return (
-        <div className={cn('range-calendar', className)}>
-            <div className="range-calendar-header">
-                <Arrow type="left" disabled={!allowPrev} onClick={handlePrev} className="range-calendar-header__prev" />
-                {/* <div className="range-calendar-header__prev">
-                    {allowPrev && (
-                        <div onClick={handlePrev}>
-                            <Arrow type="left" disabled={!allowPrev} />
-                        </div>
-                    )}
-                </div> */}
-                <div className="range-calendar-header__title">{title}</div>
-                <Arrow type="right" disabled={!allowNext} onClick={handleNext} className="range-calendar-header__next" />
+  const getFormatedWeekName = (input) => (isShortWeekNames ? input.charAt(0) : input);
 
-                {/* <div className="range-calendar-header__next">
-                    {allowNext && (
-                        <div onClick={handleNext}>
-                            <Arrow type="right" disabled={!allowNext} />
-                        </div>
-                    )}
-                </div> */}
+  return (
+    <div className={cn('range-calendar', className)}>
+      <div className="range-calendar-header">
+        <Arrow
+          type="left"
+          disabled={!allowPrev || (minDate && moment(date).startOf('month').isSameOrBefore(momentMinDate, 'months'))}
+          onClick={handlePrev}
+          className="range-calendar-header__prev"
+        />
+        <div className="range-calendar-header__title">{title}</div>
+        <Arrow
+          type="right"
+          disabled={
+            !allowNext ||
+            (
+              !isDontLimitFuture &&
+              moment(date).startOf('month').isSameOrAfter(maxDate ? momentMaxDate : moment().add(1, 'day').startOf('day'), 'months')
+            )
+          }
+          onClick={handleNext}
+          className="range-calendar-header__next"
+        />
+      </div>
+      <div className="range-calendar__week range-calendar__week-title">
+        {[...Array(7).keys()].map((dayOfWeek) => {
+          return (
+            <div key={`day-of-week_${dayOfWeek}`} className="range-calendar__day range-calendar__day--title">
+              {getFormatedWeekName(moment().weekday(dayOfWeek).format('dd'))}
             </div>
-            <div className="range-calendar__week range-calendar__week-title">
-                {[...Array(7).keys()].map(dayOfWeek => {
-                    return (
-                        <div key={`day-of-week_${dayOfWeek}`} className="range-calendar__day range-calendar__day--title">
-                            {getFormatedWeekName(moment().weekday(dayOfWeek).format('dd'))}
-                        </div>
-                    );
-                })}
-            </div>
-            {Object.keys(days).map((week, index) => (
-                <div key={`week_${index}`} className="range-calendar__week">
-                    {[...Array(7).keys()].map(dayOfWeek => renderDay(week, dayOfWeek))}
-                </div>
-            ))}
+          );
+        })}
+      </div>
+      {Object.keys(days).map((week, index) => (
+        <div key={`week_${index}`} className="range-calendar__week">
+          {[...Array(7).keys()].map((dayOfWeek) => renderDay(week, dayOfWeek))}
         </div>
-    );
+      ))}
+    </div>
+  );
 };
 
 export default RangeCalendar;

package/src/Atomic/UI/Calendar/Calendar.js

@@ -6,9 +6,18 @@ import { ChevronLeft, ChevronRight } from 'react-feather';
 import './Calendar.scss';
 
 export default function (props) {
-  const { date, setDate, allowPrev = true, allowNext = true, params, className, dontLimitFuture } = props;
+  const { 
+    date, 
+    setDate, 
+    setIsOpened, 
+    allowPrev = true, 
+    allowNext = true, 
+    params, 
+    className, 
+    isListTop,
+  } = props;
   // const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
-  const { minDate, maxDate } = params;
+  const { format, minDate, maxDate, momentMinDate, momentMaxDate, isDontLimitFuture } = params;
   const [days, setDays] = useState({});
   const [showDate, setShowDate] = useState(date);
   const [isChangeYear, setIsChangeYear] = useState(false);
@@ -18,16 +27,14 @@ export default function (props) {
   const selectedDay = moment(showDate);
   const isError = 'Invalid date';
 
-  // const title = useMemo(
-  //   () => (selectedDay.format('MMM') === isError ? isError : `${selectedDay.format('MMM')} ${moment(showDate).format('YYYY')}`),
-  //   [date, showDate]
-  // );
-
   const showMonth = useMemo(() => moment(showDate).format('MMM'), [date, showDate]);
   const showYear = useMemo(() => moment(showDate).format('YYYY'), [date, showDate]);
 
-  console.log('date - ', date);
-  console.log('showDate - ', showDate);
+  const isShovPrevArrow = allowPrev && !(minDate && moment(showDate).startOf('month').isSameOrBefore(momentMinDate, 'months'));
+  const isShovNextArrow = allowNext && (
+    isDontLimitFuture ||
+    !moment(showDate).startOf('month').isSameOrAfter(maxDate ? momentMaxDate : moment().add(1, 'day').startOf('day'), 'months')
+  );
 
   useEffect(() => {
     const result = {};
@@ -49,16 +56,13 @@ export default function (props) {
   const renderDay = (week, dayOfWeek) => {
     const day = days[week][dayOfWeek];
     if (!day) return <div className="calendar__day" />;
-    const isFutureDay = day && maxDate ? moment(day.date).isAfter(moment(maxDate || ''), 'day') : moment(day.date).isAfter(moment(), 'day');
-    const isBeforeDay = day && moment(day.date).isBefore(moment(minDate || ''), 'day');
-
-    console.log('isFutureDay - ', isFutureDay);
-    console.log('isBeforeDay - ', isBeforeDay);
+    const isFutureDay = day && !isDontLimitFuture && maxDate ? moment(day.date).isAfter(momentMaxDate || moment().add(1, 'days'), 'day') : moment(day.date).isAfter(moment(), 'day');
+    const isBeforeDay = day && moment(day.date).isBefore((momentMinDate || ''), 'day');
 
     const classNames = cn(
       'calendar__day',
       { 'calendar__day--clickable': day },
-      { 'calendar__day--disabled': !dontLimitFuture && isFutureDay },
+      { 'calendar__day--disabled': !isDontLimitFuture && isFutureDay },
       { 'calendar__day--disabled': isBeforeDay },
       { 'calendar__day--selected': moment(date).format() === moment(day.date).format() }
     );
@@ -67,7 +71,14 @@ export default function (props) {
       <div
         key={`${week}_${dayOfWeek}`}
         className={classNames}
-        onClick={day && (dontLimitFuture || !isFutureDay) ? () => setDate(moment(day.date).format('L')) : null}
+        onClick={
+          day && (isDontLimitFuture || !isFutureDay)
+            ? () => {
+                setDate(moment(day.date).format('L'));
+                setIsOpened(false);
+              }
+            : null
+        }
         // onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
         // onMouseLeave={() => onHover(null)}
       >
@@ -112,10 +123,14 @@ export default function (props) {
   }, [isChangeYear]);
 
   return (
-    <div className={`calendar ${className ? className : ''}`}>
+    <div
+      className={cn('calendar', className, {
+        'calendar_list-top': isListTop,
+      })}
+    >
       <div className="calendar-header">
         <div className="calendar-header__prev">
-          {allowPrev && (
+          {isShovPrevArrow && (
             <div onClick={handlePrev}>
               <ChevronLeft />
             </div>
@@ -139,10 +154,7 @@ export default function (props) {
                   if (e.key === 'Escape') setIsChangeYear(false);
                   if (e.key === 'Enter') closeYearInput();
                 }}
-                onChange={(e) => {
-                  console.log(e.target.value);
-                  setInputYearValue(e.target.value);
-                }}
+                onChange={(e) => setInputYearValue(e.target.value)}
               />
             ) : (
               `${showYear}`
@@ -150,7 +162,7 @@ export default function (props) {
           </span>
         </div>
         <div className="calendar-header__next">
-          {allowNext && (
+          {isShovNextArrow && (
             <div onClick={handleNext}>
               <ChevronRight />
             </div>

package/src/Atomic/UI/Calendar/Calendar.scss

@@ -425,18 +425,19 @@
 //     box-shadow: 0 0 3px 0 rgb(0 123 255 / 50%);
 //   }
 // }
-.calendar-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+// .calendar-header {
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+
+//   &__prev,
+//   &__next {
+//     display: flex;
+//     height: auto;
+//     cursor: pointer;
+//   }
+// }
 
-  &__prev,
-  &__next {
-    display: flex;
-    height: auto;
-    cursor: pointer;
-  }
-}
 .calendar {
   background: #ffffff;
   border: 1px solid #e2e5ec;
@@ -451,6 +452,10 @@
   user-select: none;
 
   &-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     box-sizing: border-box;
     &__title {
       &-month {
@@ -494,6 +499,13 @@
         }
       }
     }
+
+    &__prev,
+    &__next {
+      display: flex;
+      height: auto;
+      cursor: pointer;
+    }
   }
 
   &__week {
@@ -563,18 +575,6 @@
     }
   }
 
-  &-container {
-    min-width: 200px;
-    position: relative;
-    .calendar {
-      position: absolute;
-      z-index: 9;
-      top: 100%;
-      padding: 10px 16px;
-      border: 1px solid var(--border-color);
-    }
-  }
-
   &-dropdown {
     appearance: none;
     background-color: white;

package/src/Functions/customEventListener.js

@@ -0,0 +1,58 @@
+(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/src/Functions/useMouseUpOutside.js

@@ -0,0 +1,14 @@
+import React, { useEffect } from 'react'
+
+export default function useMouseUpOutside(ref, setOut, open) {
+  function handleMouseUpOutside(event) {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setOut(open);
+    }
+  }
+  useEffect(() => {
+    document.addEventListener('mouseup', handleMouseUpOutside);
+    return () => {
+      document.removeEventListener('mouseup', handleMouseUpOutside);
+    };
+  }, [ref]);

package/dist/Functions/useToggle.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = require("react");
-
-var useToggle = function useToggle(initialState) {
-  var _useState = (0, _react.useState)(!!initialState),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isToggled = _useState2[0],
-      setToggle = _useState2[1];
-
-  var toggle = (0, _react.useCallback)(function () {
-    return setToggle(function (isOn) {
-      return !isOn;
-    });
-  }, []);
-  var toggleOn = (0, _react.useCallback)(function () {
-    return setToggle(true);
-  }, []);
-  var toggleOff = (0, _react.useCallback)(function () {
-    return setToggle(false);
-  }, []);
-  return {
-    isToggled: isToggled,
-    toggle: toggle,
-    toggleOn: toggleOn,
-    toggleOff: toggleOff
-  };
-};
-
-var _default = useToggle;
-exports.default = _default;

package/dist/Functions/utils.js

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
-
-var _react = require("react");
-
-/* eslint-disable guard-for-in, no-unused-vars */
-var handleObjectChange = function handleObjectChange(updateObject, updateFunction) {
-  return function (data) {
-    var prop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    var isNumber = arguments.length > 2 ? arguments[2] : undefined;
-    var value;
-
-    if (data !== null && data !== void 0 && data.target) {
-      value = data.target.type === 'checkbox' ? data.target.checked : data.target.value;
-    } else value = data;
-
-    value = isNumber ? +value : value;
-    var props = prop.split('.');
-    var currentObject = props.reduce(function (res, chapter, index) {
-      if (props.length !== index + 1) res = res[chapter];
-      return res;
-    }, updateObject);
-    currentObject[props.pop()] = value;
-    updateFunction();
-  };
-};
-
-exports.handleObjectChange = handleObjectChange;
-
-var useOutsideToggle = function useOutsideToggle(ref, setOut, open) {
-  function handleClickOutside(event) {
-    if (ref.current && !ref.current.contains(event.target)) {
-      setOut(open);
-    }
-  }
-
-  (0, _react.useEffect)(function () {
-    document.addEventListener('mouseup', handleClickOutside);
-    return function () {
-      // Unbind the event listener on clean up
-      document.removeEventListener('mouseup', handleClickOutside);
-    };
-  }, [ref]);
-};
-
-exports.useOutsideToggle = useOutsideToggle;
-
-var logout = function logout() {
-  window.localStorage.removeItem('accessToken');
-  window.localStorage.removeItem('tokenExpires');
-  window.location.reload();
-};
-
-exports.logout = logout;
-
-var getStyles = function getStyles(el, prop) {
-  if (!el) return null;
-  if (!prop) return window.getComputedStyle(el);
-  return window.getComputedStyle(el).getPropertyValue(prop);
-};
-
-exports.getStyles = getStyles;