intelicoreact 0.0.85 → 0.0.86

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

@@ -55,6 +55,12 @@ var InputCalendar = function InputCalendar(_ref) {
     if (onChange) onChange(val);
   };
 
+  var getCalendarValue = function getCalendarValue(value) {
+    var date = (0, _moment.default)(value).format('L');
+    if (date !== "Invalid date") return date;
+    return (0, _moment.default)(new Date()).format('L');
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "input__wrap calendar-container ".concat(className),
     ref: calendarRef
@@ -69,8 +75,8 @@ var InputCalendar = function InputCalendar(_ref) {
     onFocus: function onFocus() {
       return setIsOpened(!isOpened);
     }
-  }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
-    date: (0, _moment.default)(value).format('L'),
+  }), console.log(value, getCalendarValue(value)), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
+    date: getCalendarValue(value),
     setDate: function setDate(newDate) {
       return changeCalendarDay(newDate);
     },

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

@@ -7,18 +7,14 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Calendar = exports.default = void 0;
+exports.CalendarTemplate = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _yup = require("yup");
-
 var _InputCalendar = _interopRequireDefault(require("./InputCalendar"));
 
 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); }
@@ -27,29 +23,34 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 global.lng = 'en';
 var _default = {
-  title: 'Form Elements/InputCalendar',
-  component: _InputCalendar.default
+  title: 'Form Elements/Input Calendar',
+  component: _InputCalendar.default,
+  argTypes: {
+    value: {
+      description: 'string (mm.dd.yyyy)'
+    }
+  }
 };
 exports.default = _default;
 
-var _useState = (0, _react.useState)(''),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    date = _useState2[0],
-    setDate = _useState2[1];
-
 var Template = function Template(args) {
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      date = _useState2[0],
+      setDate = _useState2[1];
+
   return /*#__PURE__*/_react.default.createElement(_InputCalendar.default, (0, _extends2.default)({}, args, {
-    value: date
+    value: date,
+    onChange: function onChange(val) {
+      return setDate(val);
+    }
   }));
 };
 
-var Calendar = Template.bind({});
-exports.Calendar = Calendar;
-Calendar.args = {
+var CalendarTemplate = Template.bind({});
+exports.CalendarTemplate = CalendarTemplate;
+CalendarTemplate.args = {
   value: '',
   minDate: '10/14/2020',
-  maxDate: '10/14/2022',
-  onChange: function onChange(val) {
-    return setDate(val);
-  }
+  maxDate: '10/14/2022'
 };

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

@@ -115,7 +115,7 @@ function _default(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "calendar ".concat(className)
+    className: "calendar ".concat(className ? className : "")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "calendar-header"
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/Atomic/UI/Calendar/Calendar.scss

@@ -429,6 +429,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  &__prev,
+  &__next{
+    display: flex;
+    height: auto;
+  }
 }
 .calendar {
   background: #ffffff;
@@ -515,6 +521,7 @@
     position: relative;
     .calendar {
       position: absolute;
+      z-index: 9;
       top: 100%;
       padding: 10px 16px;
       border: 1px solid var(--border-color);

package/package.json

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

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

@@ -18,6 +18,14 @@ const InputCalendar = ({ value, minDate, maxDate, onChange, className = '', plac
     if (onChange) onChange(val);
   };
 
+  const getCalendarValue = (value) => {
+    const date = moment(value).format('L');
+
+    if(date !== "Invalid date") return date;
+
+    return moment(new Date()).format('L');
+  }
+
   return (
     <div className={`input__wrap calendar-container ${className}`} ref={calendarRef}>
       <InputMask
@@ -28,7 +36,8 @@ const InputCalendar = ({ value, minDate, maxDate, onChange, className = '', plac
         className="calendar-dropdown"
         onFocus={() => setIsOpened(!isOpened)}
       />
-      {isOpened ? <Calendar date={moment(value).format('L')} setDate={newDate => changeCalendarDay(newDate)} params={{ minDate, maxDate }} /> : null}
+      {console.log(value, getCalendarValue(value))}
+      {isOpened ? <Calendar date={getCalendarValue(value)} setDate={newDate => changeCalendarDay(newDate)} params={{ minDate, maxDate }} /> : null}
     </div>
   );
 };

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

@@ -1,26 +1,30 @@
-import moment from 'moment-timezone';
-import React, { useRef, useState } from 'react';
-import { ref } from 'yup';
+import React, { useState } from 'react';
 import InputCalendar from './InputCalendar';
 
 global.lng = 'en';
 
+
 export default {
-  title: 'Form Elements/InputCalendar',
+  title: 'Form Elements/Input Calendar',
   component: InputCalendar,
+  argTypes: {
+    value: {
+      description: 'string (mm.dd.yyyy)'
+    },
+  }
 };
 
-const [date, setDate] = useState('');
-
 const Template = args => {
-  return <InputCalendar {...args} value={date} />;
+  const [date, setDate] = useState('');
+
+  return <InputCalendar {...args} value={date} onChange={val => setDate(val)} />;
 };
 
-export const Calendar = Template.bind({});
+export const CalendarTemplate = Template.bind({});
 
-Calendar.args = {
+CalendarTemplate.args = {
   value: '',
   minDate: '10/14/2020',
   maxDate: '10/14/2022',
-  onChange: val => setDate(val)
+
 };

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

@@ -70,7 +70,7 @@ export default function (props) {
   };
 
   return (
-    <div className={`calendar ${className}`}>
+    <div className={`calendar ${className ? className : ""}`}>
       <div className="calendar-header">
         <div className="calendar-header__prev">
           {allowPrev && (

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

@@ -429,6 +429,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  &__prev,
+  &__next{
+    display: flex;
+    height: auto;
+  }
 }
 .calendar {
   background: #ffffff;
@@ -515,6 +521,7 @@
     position: relative;
     .calendar {
       position: absolute;
+      z-index: 9;
       top: 100%;
       padding: 10px 16px;
       border: 1px solid var(--border-color);