intelicoreact 0.0.87 → 0.0.93

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

@@ -4,27 +4,39 @@ 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' }) => {
+import './InputCalendar.scss';
+
+const InputCalendar = ({
+  value,
+  minDate,
+  maxDate,
+  onChange,
+  className = '',
+  placeholder = 'mm/dd/yyyy',
+  mask = '99/99/9999',
+  isDontLimitFuture,
+  isListTop,
+}) => {
   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,11 +44,20 @@ 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)}
       />
-      {isOpened ? <Calendar date={getCalendarValue(value)} setDate={newDate => changeCalendarDay(newDate)} params={{ minDate, maxDate }} /> : null}
+      {isOpened ? (
+        <Calendar
+          className={isListTop ? '' : ''}
+          date={getCalendarValue(value)}
+          setDate={(newDate) => changeCalendarDay(newDate)}
+          params={{ minDate, maxDate }}
+          isDontLimitFuture={isDontLimitFuture}
+          isListTop={isListTop}
+        />
+      ) : null}
     </div>
   );
 };

package/src/Atomic/FormElements/InputCalendar/InputCalendar.scss

@@ -0,0 +1,18 @@
+.calendar-container {
+  min-width: 200px;
+  position: relative;
+
+  .calendar {
+    position: absolute;
+    z-index: 9;
+    top: 100%;
+    padding: 10px 16px;
+    border: 1px solid var(--border-color);
+
+    &_list-top {
+      bottom: calc(100% + 4px);
+      top: auto;
+      box-shadow: 0 -3px 15px rgb(0 0 0 / 15%);
+    }
+  }
+}

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

@@ -3,28 +3,28 @@ 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: '01/01/1900',
+  maxDate: '01/01/2100',
+  isDontLimitFuture: true,
+  // isListTop: true,
 };

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

@@ -1,22 +1,31 @@
+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, isDontLimitFuture, isListTop } = 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]);
+
   useEffect(() => {
     const result = {};
     const day = selectedDay.startOf('month');
@@ -43,7 +52,7 @@ export default function (props) {
     const classNames = cn(
       'calendar__day',
       { 'calendar__day--clickable': day },
-      { 'calendar__day--disabled': isFutureDay },
+      { 'calendar__day--disabled': !isDontLimitFuture && isFutureDay },
       { 'calendar__day--disabled': isBeforeDay },
       { 'calendar__day--selected': moment(date).format() === moment(day.date).format() }
     );
@@ -52,7 +61,7 @@ export default function (props) {
       <div
         key={`${week}_${dayOfWeek}`}
         className={classNames}
-        onClick={day && !isFutureDay ? () => setDate(moment(day.date).format('L')) : null}
+        onClick={day && (isDontLimitFuture || !isFutureDay) ? () => setDate(moment(day.date).format('L')) : null}
         // onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
         // onMouseLeave={() => onHover(null)}
       >
@@ -69,8 +78,39 @@ 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={cn('calendar', className, {
+        'calendar_list-top': isListTop,
+      })}
+    >
       <div className="calendar-header">
         <div className="calendar-header__prev">
           {allowPrev && (
@@ -79,7 +119,31 @@ 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) => setInputYearValue(e.target.value)}
+              />
+            ) : (
+              `${showYear}`
+            )}
+          </span>
+        </div>
         <div className="calendar-header__next">
           {allowNext && (
             <div onClick={handleNext}>

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

@@ -425,23 +425,25 @@
 //     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;
-  }
-}
 .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 +451,63 @@
   flex-direction: column;
   user-select: none;
 
+  &-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    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;
+        }
+      }
+    }
+
+    &__prev,
+    &__next {
+      display: flex;
+      height: auto;
+      cursor: pointer;
+    }
+  }
+
   &__week {
     display: flex;
   }
@@ -516,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/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: ''