intelicoreact 0.0.92 → 0.0.93

package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-require("./Loader.scss");
+require("./DropdownLoader.scss");
 
 var DropdownLoader = function DropdownLoader(_ref) {
   var variant = _ref.variant;

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js

@@ -21,6 +21,8 @@ var _Calendar = _interopRequireDefault(require("../../UI/Calendar/Calendar"));
 
 var _useClickOutside = require("../../../Functions/useClickOutside");
 
+require("./InputCalendar.scss");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -36,7 +38,8 @@ var InputCalendar = function InputCalendar(_ref) {
       placeholder = _ref$placeholder === void 0 ? 'mm/dd/yyyy' : _ref$placeholder,
       _ref$mask = _ref.mask,
       mask = _ref$mask === void 0 ? '99/99/9999' : _ref$mask,
-      dontLimitFuture = _ref.dontLimitFuture;
+      isDontLimitFuture = _ref.isDontLimitFuture,
+      isListTop = _ref.isListTop;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -77,6 +80,7 @@ var InputCalendar = function InputCalendar(_ref) {
       return setIsOpened(!isOpened);
     }
   }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
+    className: isListTop ? '' : '',
     date: getCalendarValue(value),
     setDate: function setDate(newDate) {
       return changeCalendarDay(newDate);
@@ -85,7 +89,8 @@ var InputCalendar = function InputCalendar(_ref) {
       minDate: minDate,
       maxDate: maxDate
     },
-    dontLimitFuture: dontLimitFuture
+    isDontLimitFuture: isDontLimitFuture,
+    isListTop: isListTop
   }) : null);
 };
 

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

@@ -51,7 +51,8 @@ var CalendarTemplate = Template.bind({});
 exports.CalendarTemplate = CalendarTemplate;
 CalendarTemplate.args = {
   value: '',
-  // minDate: '10/14/2020',
-  // maxDate: '10/14/2022',
-  dontLimitFuture: true
+  minDate: '01/01/1900',
+  maxDate: '01/01/2100',
+  isDontLimitFuture: true // isListTop: true,
+
 };

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

@@ -38,7 +38,8 @@ function _default(props) {
       allowNext = _props$allowNext === void 0 ? true : _props$allowNext,
       params = props.params,
       className = props.className,
-      dontLimitFuture = props.dontLimitFuture; // const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
+      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;
@@ -76,8 +77,6 @@ function _default(props) {
   var showYear = (0, _react.useMemo)(function () {
     return (0, _moment.default)(showDate).format('YYYY');
   }, [date, showDate]);
-  console.log('date - ', date);
-  console.log('showDate - ', showDate);
   (0, _react.useEffect)(function () {
     var result = {};
     var day = selectedDay.startOf('month');
@@ -108,12 +107,10 @@ function _default(props) {
     });
     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');
-    console.log('isFutureDay - ', isFutureDay);
-    console.log('isBeforeDay - ', isBeforeDay);
     var classNames = (0, _classnames.default)('calendar__day', {
       'calendar__day--clickable': day
     }, {
-      'calendar__day--disabled': !dontLimitFuture && isFutureDay
+      'calendar__day--disabled': !isDontLimitFuture && isFutureDay
     }, {
       'calendar__day--disabled': isBeforeDay
     }, {
@@ -122,7 +119,7 @@ function _default(props) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "".concat(week, "_").concat(dayOfWeek),
       className: classNames,
-      onClick: day && (dontLimitFuture || !isFutureDay) ? function () {
+      onClick: day && (isDontLimitFuture || !isFutureDay) ? function () {
         return setDate((0, _moment.default)(day.date).format('L'));
       } : null // onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
       // onMouseLeave={() => onHover(null)}
@@ -164,7 +161,9 @@ function _default(props) {
     }
   }, [isChangeYear]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "calendar ".concat(className ? className : '')
+    className: (0, _classnames.default)('calendar', className, {
+      'calendar_list-top': isListTop
+    })
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "calendar-header"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -195,8 +194,7 @@ function _default(props) {
       if (e.key === 'Enter') closeYearInput();
     },
     onChange: function onChange(e) {
-      console.log(e.target.value);
-      setInputYearValue(e.target.value);
+      return setInputYearValue(e.target.value);
     }
   }) : "".concat(showYear))), /*#__PURE__*/_react.default.createElement("div", {
     className: "calendar-header__next"

package/dist/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/package.json

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

package/src/Atomic/FormElements/Dropdown/components/DropdownLoader.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import './Loader.scss';
+import './DropdownLoader.scss';
 
 const DropdownLoader = function ({ variant }) {
   return (

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

@@ -4,7 +4,19 @@ 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', dontLimitFuture }) => {
+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);
 
@@ -38,10 +50,12 @@ const InputCalendar = ({ value, minDate, maxDate, onChange, className = '', plac
       />
       {isOpened ? (
         <Calendar
+          className={isListTop ? '' : ''}
           date={getCalendarValue(value)}
           setDate={(newDate) => changeCalendarDay(newDate)}
           params={{ minDate, maxDate }}
-          dontLimitFuture={dontLimitFuture}
+          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

@@ -23,7 +23,8 @@ export const CalendarTemplate = Template.bind({});
 
 CalendarTemplate.args = {
   value: '',
-  // minDate: '10/14/2020',
-  // maxDate: '10/14/2022',
-  dontLimitFuture: true,
+  minDate: '01/01/1900',
+  maxDate: '01/01/2100',
+  isDontLimitFuture: true,
+  // isListTop: true,
 };

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

@@ -6,7 +6,7 @@ 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, 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({});
@@ -26,9 +26,6 @@ export default function (props) {
   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');
@@ -52,13 +49,10 @@ 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': !dontLimitFuture && isFutureDay },
+      { 'calendar__day--disabled': !isDontLimitFuture && isFutureDay },
       { 'calendar__day--disabled': isBeforeDay },
       { 'calendar__day--selected': moment(date).format() === moment(day.date).format() }
     );
@@ -67,7 +61,7 @@ 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')) : null}
         // onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
         // onMouseLeave={() => onHover(null)}
       >
@@ -112,7 +106,11 @@ 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 && (
@@ -139,10 +137,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}`

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;