intelicoreact 0.0.93 → 0.0.96

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, isDontLimitFuture, isListTop } = 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,14 +27,15 @@ 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]);
 
+  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 = {};
     const day = selectedDay.startOf('month');
@@ -46,8 +56,8 @@ 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');
+    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',
@@ -61,7 +71,14 @@ export default function (props) {
       <div
         key={`${week}_${dayOfWeek}`}
         className={classNames}
-        onClick={day && (isDontLimitFuture || !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)}
       >
@@ -113,7 +130,7 @@ export default function (props) {
     >
       <div className="calendar-header">
         <div className="calendar-header__prev">
-          {allowPrev && (
+          {isShovPrevArrow && (
             <div onClick={handlePrev}>
               <ChevronLeft />
             </div>
@@ -145,7 +162,7 @@ export default function (props) {
           </span>
         </div>
         <div className="calendar-header__next">
-          {allowNext && (
+          {isShovNextArrow && (
             <div onClick={handleNext}>
               <ChevronRight />
             </div>

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,16 @@
+import { 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]);
+}