intelicoreact 0.0.86 → 0.0.92

package/src/Atomic/FormElements/Input/Input.js

@@ -29,7 +29,7 @@ const Input = ({
   icon,
   symbolsLimit,
   blinkTime,
-  isFocusDefault = false
+  isFocusDefault = false,
 }) => {
   const DEFAULT_BLINK_TIME = 100;
   // STATES
@@ -42,6 +42,8 @@ const Input = ({
 
   const { onlyNumbers, onlyString } = formatInput;
   const { addCommas, removeComma } = formatInput.priceInput;
+  const isUseErrorsBlink = !isNotBlinkErrors && !mask;
+
   // HANDLES
   const handle = {
     change: (e) => {
@@ -50,8 +52,7 @@ const Input = ({
         inputValue = inputValue.substring(0, +symbolsLimit);
       }
 
-      if (isOnlyNumber && !isTwoDigitAfterDot)
-        inputValue = onlyNumbers(inputValue);
+      if (isOnlyNumber && !isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue);
       if (isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue, true);
       if (isOnlyString) inputValue = onlyString(inputValue);
 
@@ -79,28 +80,47 @@ const Input = ({
       if (onBlur) onBlur(e);
     },
     keyUp: (e) => {
-      if (!isNotBlinkErrors) {
+      if (isUseErrorsBlink) {
         const changedValue = '' + (value ?? '');
         const previousValue = '' + (previousValueRef.current ?? '');
-        const currentSet = (() => {
-          if (previousValue.length < changedValue.length)
-            return value.slice(previousValue.length - changedValue.length);
-          else return changedValue.includes(e.key) ? e.key : '';
-        })();
-
-        if (
-          !KEYBOARD_SERVICE_KEYS.includes(e.key) &&
-          changedValue === previousValue
-        )
-          setIsAttemptToChange(true);
-
-        if (KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet)
-          previousValueRef.current = value;
-        else previousValueRef.current = previousValue + currentSet[0];
+
+        const short = previousValue.length <= changedValue.length ? previousValue : changedValue;
+        const long = previousValue.length > changedValue.length ? previousValue : changedValue;
+
+        const infoAboutDifferencesSameness = short.split('').reduce(
+          (acc, symbol, idx) => {
+            if (acc.countOn && symbol === long[idx]) acc.same.push(symbol);
+            else {
+              acc.countOn = false;
+              acc.differences.push([idx, symbol]);
+            }
+            return acc;
+          },
+          { same: [], countOn: true, differences: [] }
+        );
+
+        const samePart = infoAboutDifferencesSameness.same.join('');
+        const differencesLength = infoAboutDifferencesSameness.differences.length;
+        const currentSet = changedValue.replace(samePart, '');
+
+        const getNext = (inputPartToAdd, correctedSamePart) => {
+          const partToAdd = inputPartToAdd || currentSet;
+          const currentSamePart = correctedSamePart || samePart;
+          return changedValue.includes(e.key) && e.key !== changedValue[changedValue.length - 1]
+            ? currentSamePart + (partToAdd[0] || '')
+            : changedValue;
+        };
+
+        if (!KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue)
+          setIsAttemptToChange(!(!differencesLength && e.key === changedValue[changedValue.length - 2]));
+
+        if (!previousValueRef.current || KEYBOARD_SERVICE_KEYS.includes(e.key)) previousValueRef.current = getNext();
+        else if (changedValue === samePart) previousValueRef.current = getNext(changedValue, changedValue.slice(0, -1));
+        else previousValueRef.current = getNext();
       }
 
       if (onKeyUp) onKeyUp(e.keyCode, e);
-    }
+    },
   };
 
   function cutOffsingleDot(value) {
@@ -121,7 +141,7 @@ const Input = ({
     onBlur: handle.blur,
     onKeyUp: handle.keyUp,
     ...(maskChar ? { maskChar } : {}),
-    ...(formatChars ? { formatChars } : {})
+    ...(formatChars ? { formatChars } : {}),
   };
 
   function renderInput() {
@@ -129,13 +149,11 @@ const Input = ({
       return <InputMask {...uniProps} ref={inputRef} mask={mask} />;
     }
 
-    return (
-      <input {...uniProps} ref={inputRef} type={isPriceInput ? 'text' : type} />
-    );
+    return <input {...uniProps} ref={inputRef} type={isPriceInput ? 'text' : type} />;
   }
 
   useEffect(() => {
-    if (!isNotBlinkErrors && isAttemptToChange) {
+    if (isUseErrorsBlink && isAttemptToChange) {
       setIsAttemptToChange(null);
       setIsToHighlightError(true);
       setTimeout(() => {
@@ -145,8 +163,8 @@ const Input = ({
   }, [isAttemptToChange]);
 
   useEffect(() => {
-    if (inputRef?.current && typeof isFocusDefault === 'boolean')
-      setIsFocused(isFocusDefault);
+    if (inputRef?.current && typeof isFocusDefault === 'boolean') setIsFocused(isFocusDefault);
+    setEditing(isFocusDefault);
   }, [inputRef, isFocusDefault]);
 
   return (
@@ -160,12 +178,7 @@ const Input = ({
     >
       {renderInput()}
       {icon}
-      {withDelete && (
-        <span
-          className={cn(`input__close`, { hidden: !value })}
-          onClick={handle.toggleEdit}
-        />
-      )}
+      {withDelete && <span className={cn(`input__close`, { hidden: !value })} onClick={handle.toggleEdit} />}
     </div>
   );
 };

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

@@ -4,27 +4,27 @@ import InputMask from 'react-input-mask';
 import Calendar from '../../UI/Calendar/Calendar';
 import { useClickOutside } from '../../../Functions/useClickOutside';
 
-const InputCalendar = ({ value, minDate, maxDate, onChange, className = '', placeholder = 'mm/dd/yyyy', mask = '99/99/9999' }) => {
+const InputCalendar = ({ value, minDate, maxDate, onChange, className = '', placeholder = 'mm/dd/yyyy', mask = '99/99/9999', dontLimitFuture }) => {
   const [isOpened, setIsOpened] = useState(false);
   const calendarRef = useRef(null);
 
   useClickOutside(calendarRef, () => setIsOpened(false));
 
-  const changeInputValue = val => {
+  const changeInputValue = (val) => {
     if (onChange) onChange(val);
   };
 
-  const changeCalendarDay = val => {
+  const changeCalendarDay = (val) => {
     if (onChange) onChange(val);
   };
 
   const getCalendarValue = (value) => {
     const date = moment(value).format('L');
 
-    if(date !== "Invalid date") return date;
+    if (date !== 'Invalid date') return date;
 
     return moment(new Date()).format('L');
-  }
+  };
 
   return (
     <div className={`input__wrap calendar-container ${className}`} ref={calendarRef}>
@@ -32,12 +32,18 @@ const InputCalendar = ({ value, minDate, maxDate, onChange, className = '', plac
         mask={mask}
         placeholder={placeholder}
         value={value}
-        onChange={e => changeInputValue(e.target.value)}
+        onChange={(e) => changeInputValue(e.target.value)}
         className="calendar-dropdown"
         onFocus={() => setIsOpened(!isOpened)}
       />
-      {console.log(value, getCalendarValue(value))}
-      {isOpened ? <Calendar date={getCalendarValue(value)} setDate={newDate => changeCalendarDay(newDate)} params={{ minDate, maxDate }} /> : null}
+      {isOpened ? (
+        <Calendar
+          date={getCalendarValue(value)}
+          setDate={(newDate) => changeCalendarDay(newDate)}
+          params={{ minDate, maxDate }}
+          dontLimitFuture={dontLimitFuture}
+        />
+      ) : null}
     </div>
   );
 };

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

@@ -3,28 +3,27 @@ import InputCalendar from './InputCalendar';
 
 global.lng = 'en';
 
-
 export default {
   title: 'Form Elements/Input Calendar',
   component: InputCalendar,
   argTypes: {
     value: {
-      description: 'string (mm.dd.yyyy)'
+      description: 'string (mm.dd.yyyy)',
     },
-  }
+  },
 };
 
-const Template = args => {
+const Template = (args) => {
   const [date, setDate] = useState('');
 
-  return <InputCalendar {...args} value={date} onChange={val => setDate(val)} />;
+  return <InputCalendar {...args} value={date} onChange={(val) => setDate(val)} />;
 };
 
 export const CalendarTemplate = Template.bind({});
 
 CalendarTemplate.args = {
   value: '',
-  minDate: '10/14/2020',
-  maxDate: '10/14/2022',
-
+  // minDate: '10/14/2020',
+  // maxDate: '10/14/2022',
+  dontLimitFuture: true,
 };

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

@@ -24,6 +24,8 @@ const InputDateRange = props => {
     hideArrows = false,
     isOptionsRight,
     isUseAbs,
+    minDate = null,
+    maxDate = null,
   } = props;
 
   const actualValues = getActualDateRange(value);
@@ -35,6 +37,7 @@ const InputDateRange = props => {
   const internalContainerRef = useRef(null);
 
   const handleChange = input => {
+
     const newValue = getActualDateRange(input);
     const formatedValue = {
       intervalKey: newValue.intervalKey,
@@ -202,6 +205,8 @@ const InputDateRange = props => {
               setIsCompare={setIsCompare}
               toggleOff={toggleOff}
               onChange={handleChange}
+              minDate={minDate ? moment(minDate) : null}
+              maxDate={maxDate ? moment(maxDate) : null}
             />
           )}
         </div>

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

@@ -47,6 +47,8 @@ InputDateRangeTemplate.args = {
   error: false,
   disabled: false,
   isHoverable: false,
+  minDate: "",
+  maxDate: "",
   // short: true,
   isCompact: false,
   // isFocused: true,

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

@@ -41,7 +41,9 @@ const Datepicker = props => {
         limitRange,
         handleItemClick,
         setActiveInterval,
-        isShortWeekNames
+        isShortWeekNames,
+        minDate = null,
+        maxDate = null
     } = props;
     const { start = null, end = null, compare = false } = values;
     const startDateInputRef = useRef(null);
@@ -191,7 +193,7 @@ const Datepicker = props => {
     const handleChangeStartHour = val => {
         setStartHour(+val);
         setStartDate(
-            moment(startDate)
+            moment(startDate || moment())
                 .set('hour', +val)
                 .toDate(),
         );
@@ -200,14 +202,16 @@ const Datepicker = props => {
     const handleChangeEndHour = val => {
         const newHour = +val;
         setEndHour(newHour);
-        let newEndDate;
-        if (prevEndHour.current === 0 && newHour !== 0) {
-            newEndDate = moment(endDate).subtract(1, 'days');
-        } else if (prevEndHour.current !== 0 && newHour === 0) {
-            newEndDate = moment(endDate).add(1, 'days');
-        } else {
-            newEndDate = endDate;
+        let newEndDate = moment();
+
+        if(endDate){
+          if (prevEndHour.current === 0 && newHour !== 0) {
+              newEndDate = moment(endDate).subtract(1, 'days');
+          } else if (prevEndHour.current !== 0 && newHour === 0) {
+              newEndDate = moment(endDate).add(1, 'days');
+          }
         }
+
         prevEndHour.current = newHour;
         setEndDate(moment(newEndDate).set('hour', newHour).toDate());
     };
@@ -256,13 +260,22 @@ const Datepicker = props => {
 
     const handleStartDateBlur = e => {
         let newDate;
-        if (moment(startDateInput).isValid()) {
-            newDate = moment(startDateInput).set('hour', parseInt(startHour, 10)).toDate();
-            setStartDate(newDate);
+
+        if(!moment(startDateInput).isValid()){
+          newDate = startDate;
         } else {
-            newDate = startDate;
-            setStartDateInput(newDate);
+          if(minDate && !moment(startDateInput).isSameOrAfter(minDate)){
+            newDate = minDate;
+          } else if(maxDate && !moment(startDateInput).isSameOrBefore(maxDate)){
+            newDate = maxDate;
+          } else {
+            newDate = moment(startDateInput);
+          }
         }
+
+        setStartDateInput(newDate);
+        setStartDate(newDate.set('hour', parseInt(startHour, 10)).toDate());
+
         doBlur('start', e);
         setDate1(
             moment(newDate).isSameOrAfter(moment(date2), 'month') ? moment(date2).subtract(1, 'month') : moment(newDate),
@@ -277,16 +290,24 @@ const Datepicker = props => {
 
     const handleEndDateBlur = e => {
         let newDate;
-        if (moment(endDateInput).isValid()) {
-            newDate = moment(endDateInput).set('hour', parseInt(endHour, 10)).toDate();
-            setEndDate(addDay(newDate));
+
+        if(!moment(endDateInput).isValid()){
+          newDate = endDate;
         } else {
-            newDate = endDate;
-            setEndDateInput(newDate);
+          if(minDate && !moment(endDateInput).isSameOrAfter(minDate)){
+            newDate = minDate;
+          } else if(maxDate && !moment(endDateInput).isSameOrBefore(maxDate)){
+            newDate = maxDate;
+          } else {
+            newDate = moment(endDateInput);
+          }
         }
+
+        setEndDate(addDay(newDate.set('hour', parseInt(endHour, 10)).toDate()));
+        setEndDateInput(newDate);
+
         doBlur('end', e);
         setDate2(newDate);
-        setEndDateInput();
     };
 
     const handleKeyPressed = (code, e, type) => {

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

@@ -25,7 +25,9 @@ const OpenedPart = React.forwardRef((props, ref) => {
         isCompare,
         setIsCompare,
         toggleOff,
-        isShortWeekNames
+        isShortWeekNames,
+        minDate = null,
+        maxDate = null
     } = props;
 
     const items = isCompact ? [...Object.keys(intervals)] : [...Object.keys(intervals), customKey];
@@ -105,6 +107,8 @@ const OpenedPart = React.forwardRef((props, ref) => {
                         limitRange={limitRange}
                         setActiveInterval={setActiveInterval}
                         isShortWeekNames={isShortWeekNames}
+                        minDate={minDate}
+                        maxDate={maxDate}
                     />
                 )}
             </div>

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

@@ -89,7 +89,7 @@ export const INTERVALS = {
         end: () => moment().startOf('month'),
     },
     last6Months: {
-        label: 'Last 6 Months',
+        label: '6 Months',
         start: () => moment().subtract(6, 'month').startOf('month'),
         end: () => moment().startOf('month'),
     },

package/src/Atomic/FormElements/NumericInput/NumericInput.js

@@ -192,6 +192,7 @@ const NumericInput = ({
   useEffect(() => {
     if (inputRef?.current && typeof isFocusDefault === 'boolean')
       setIsFocused(isFocusDefault);
+      setEditing(isFocusDefault)
   }, [inputRef, isFocusDefault]);
 
   function renderInput() {

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

@@ -1,22 +1,34 @@
+import React, { useEffect, useMemo, useState, useRef } from 'react';
 import cn from 'classnames';
-import React, { useEffect, useMemo, useState } from 'react';
 import moment from 'moment';
+import InputMask from 'react-input-mask';
 import { ChevronLeft, ChevronRight } from 'react-feather';
 import './Calendar.scss';
 
 export default function (props) {
-  const { date, setDate, allowPrev = true, allowNext = true, params, className } = props;
-  const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
+  const { date, setDate, allowPrev = true, allowNext = true, params, className, dontLimitFuture } = props;
+  // const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
+  const { minDate, maxDate } = params;
   const [days, setDays] = useState({});
   const [showDate, setShowDate] = useState(date);
+  const [isChangeYear, setIsChangeYear] = useState(false);
+  const [inputYearValue, setInputYearValue] = useState(moment(showDate).format('YYYY'));
+  const yearInputRef = useRef(null);
 
   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 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);
+
   useEffect(() => {
     const result = {};
     const day = selectedDay.startOf('month');
@@ -40,10 +52,13 @@ export default function (props) {
     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 classNames = cn(
       'calendar__day',
       { 'calendar__day--clickable': day },
-      { 'calendar__day--disabled': isFutureDay },
+      { 'calendar__day--disabled': !dontLimitFuture && isFutureDay },
       { 'calendar__day--disabled': isBeforeDay },
       { 'calendar__day--selected': moment(date).format() === moment(day.date).format() }
     );
@@ -52,7 +67,7 @@ export default function (props) {
       <div
         key={`${week}_${dayOfWeek}`}
         className={classNames}
-        onClick={day && !isFutureDay ? () => setDate(moment(day.date).format('L')) : null}
+        onClick={day && (dontLimitFuture || !isFutureDay) ? () => setDate(moment(day.date).format('L')) : null}
         // onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
         // onMouseLeave={() => onHover(null)}
       >
@@ -69,8 +84,35 @@ export default function (props) {
     setShowDate(moment(showDate).add(1, 'month').format('L'));
   };
 
+  const closeYearInput = () => {
+    const newDate = (() => {
+      const dateArr = showDate.split('/');
+      const oldYear = dateArr[2];
+      dateArr[2] = inputYearValue;
+      return moment(dateArr.join('/')).format('MM/DD/YYYY') === isError ? showDate : moment(dateArr.join('/')).format('MM/DD/YYYY');
+    })();
+    let resultDate = newDate;
+    if (minDate && moment(minDate) > moment(newDate)) resultDate = moment(showDate).format('MM/DD/YYYY');
+    else if (maxDate && moment(maxDate) < moment(newDate)) resultDate = moment(showDate).format('MM/DD/YYYY');
+
+    setIsChangeYear(false);
+    setShowDate(resultDate);
+    setInputYearValue(resultDate);
+  };
+
+  useEffect(() => {
+    if (isChangeYear && yearInputRef.current) {
+      const input = yearInputRef.current.getElementsByTagName('input')[0];
+      setInputYearValue(showYear);
+      setTimeout(() => {
+        input.focus();
+        input.select();
+      }, 0);
+    }
+  }, [isChangeYear]);
+
   return (
-    <div className={`calendar ${className ? className : ""}`}>
+    <div className={`calendar ${className ? className : ''}`}>
       <div className="calendar-header">
         <div className="calendar-header__prev">
           {allowPrev && (
@@ -79,7 +121,34 @@ export default function (props) {
             </div>
           )}
         </div>
-        <div className="calendar-header__title">{title}</div>
+        <div className={cn('calendar-header__title')} ref={yearInputRef}>
+          <span className="calendar-header__title-month">{`${showMonth} `}</span>
+          <span
+            className={cn('calendar-header__title-year', {
+              'calendar-header__title-year_change-mode': isChangeYear,
+            })}
+            onClick={() => setIsChangeYear(true)}
+          >
+            {isChangeYear ? (
+              <InputMask
+                className="calendar-header__title-year-change-input"
+                value={inputYearValue}
+                mask="9999"
+                onBlur={(e) => closeYearInput()}
+                onKeyUp={(e) => {
+                  if (e.key === 'Escape') setIsChangeYear(false);
+                  if (e.key === 'Enter') closeYearInput();
+                }}
+                onChange={(e) => {
+                  console.log(e.target.value);
+                  setInputYearValue(e.target.value);
+                }}
+              />
+            ) : (
+              `${showYear}`
+            )}
+          </span>
+        </div>
         <div className="calendar-header__next">
           {allowNext && (
             <div onClick={handleNext}>

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

@@ -431,17 +431,18 @@
   align-items: center;
 
   &__prev,
-  &__next{
+  &__next {
     display: flex;
     height: auto;
+    cursor: pointer;
   }
 }
 .calendar {
   background: #ffffff;
-    border: 1px solid #e2e5ec;
-    box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
-    margin-top: 4px;
-    padding: 5px 0;
+  border: 1px solid #e2e5ec;
+  box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
+  margin-top: 4px;
+  padding: 5px 0;
 
   min-height: 195px;
   width: 260px;
@@ -449,6 +450,52 @@
   flex-direction: column;
   user-select: none;
 
+  &-header {
+    box-sizing: border-box;
+    &__title {
+      &-month {
+        margin-right: 5px;
+      }
+      &-year {
+        box-sizing: border-box;
+        width: 45px;
+        height: 100%;
+        padding: 0 5px;
+        cursor: pointer;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+        align-items: center;
+
+        &:hover:not(.calendar-header__title-year_change-mode) {
+          text-decoration: underline;
+        }
+
+        &.calendar-header__title-year_change-mode {
+          height: 24px;
+          padding: 0 3px;
+          border-style: solid;
+          border-width: 1px;
+          border-color: inherit;
+          border-radius: var(--border-radius);
+        }
+
+        &-change-input {
+          box-sizing: border-box;
+          width: 100%;
+          border: none;
+          outline: none;
+          margin: 0;
+          padding: 0;
+          display: inline;
+          font-size: inherit;
+          line-height: inherit;
+          font-weight: inherit;
+        }
+      }
+    }
+  }
+
   &__week {
     display: flex;
   }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Calendar from './Calendar';
 
 global.lng = 'en';
@@ -8,16 +8,18 @@ export default {
   component: Calendar,
 };
 
-const Template = args => (
-  <div style={{ width: '320px' }}>
-    <Calendar {...args} />
-  </div>
-);
+const Template = args => {
+  const [date, setDate] = useState('12/03/2021');
+  return (
+    <div style={{ width: '320px' }}>
+      <Calendar {...args} date={date} setDate={setDate} />
+    </div>
+  );
+};
 
 export const CalendarTemplate = Template.bind({});
 
 CalendarTemplate.args = {
-  date: '12/03/2021',
   params: {},
   setDate: () => null,
   className: ''