intelicoreact 0.0.84 → 0.0.85

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

@@ -29,22 +29,18 @@ var InputCalendar = function InputCalendar(_ref) {
   var value = _ref.value,
       minDate = _ref.minDate,
       maxDate = _ref.maxDate,
-      onChange = _ref.onChange;
-
-  var _useState = (0, _react.useState)(value),
+      onChange = _ref.onChange,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? 'mm/dd/yyyy' : _ref$placeholder,
+      _ref$mask = _ref.mask,
+      mask = _ref$mask === void 0 ? '99/99/9999' : _ref$mask;
+
+  var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      date = _useState2[0],
-      setDate = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(date),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      inputValue = _useState4[0],
-      setInputValue = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      isOpened = _useState6[0],
-      setIsOpened = _useState6[1];
+      isOpened = _useState2[0],
+      setIsOpened = _useState2[1];
 
   var calendarRef = (0, _react.useRef)(null);
   (0, _useClickOutside.useClickOutside)(calendarRef, function () {
@@ -52,28 +48,20 @@ var InputCalendar = function InputCalendar(_ref) {
   });
 
   var changeInputValue = function changeInputValue(val) {
-    if (!val.includes('_') && val) {
-      setDate((0, _moment.default)(val).format('L'));
-      setInputValue((0, _moment.default)(val).format('L'));
-    } else {
-      setInputValue(val);
-    }
-
-    if (onChange) onChange();
+    if (onChange) onChange(val);
   };
 
   var changeCalendarDay = function changeCalendarDay(val) {
-    setDate(val);
-    setInputValue(val);
     if (onChange) onChange(val);
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "calendar-container",
+    className: "input__wrap calendar-container ".concat(className),
     ref: calendarRef
   }, /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
-    mask: "99/99/9999",
-    value: inputValue,
+    mask: mask,
+    placeholder: placeholder,
+    value: value,
     onChange: function onChange(e) {
       return changeInputValue(e.target.value);
     },
@@ -82,7 +70,7 @@ var InputCalendar = function InputCalendar(_ref) {
       return setIsOpened(!isOpened);
     }
   }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
-    date: date,
+    date: (0, _moment.default)(value).format('L'),
     setDate: function setDate(newDate) {
       return changeCalendarDay(newDate);
     },

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

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Calendar = 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");
@@ -26,14 +32,24 @@ var _default = {
 };
 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) {
-  return /*#__PURE__*/_react.default.createElement(_InputCalendar.default, args);
+  return /*#__PURE__*/_react.default.createElement(_InputCalendar.default, (0, _extends2.default)({}, args, {
+    value: date
+  }));
 };
 
 var Calendar = Template.bind({});
 exports.Calendar = Calendar;
 Calendar.args = {
-  value: '10/14/2021',
+  value: '',
   minDate: '10/14/2020',
-  maxDate: '10/14/2023'
+  maxDate: '10/14/2022',
+  onChange: function onChange(val) {
+    return setDate(val);
+  }
 };

package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.scss

@@ -1,4 +1,4 @@
-.range-calendar {
+.range-calendar, .calendar {
   width: 195px;
   min-height: 195px;
   display: flex;
@@ -12,7 +12,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-  
+
     &__title {
       line-height: 20px;
       font-weight: 500;
@@ -27,7 +27,7 @@
     &__next, &__prev {
       width: 16px;
       height: 16px;
-      background-color: #E2E6F8;
+      //background-color: #E2E6F8;
       border-radius: 5px;
       color: #171D33;
     }
@@ -98,4 +98,4 @@
       }
     }
   }
-}
+}

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

@@ -134,7 +134,7 @@ function _default(props) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "day-of-week_".concat(dayOfWeek),
       className: "calendar__day calendar__day--title"
-    }, (0, _moment.default)().weekday(dayOfWeek).format('dd').charAt(0));
+    }, (0, _moment.default)().weekday(dayOfWeek).format('dd'));
   })), Object.keys(days).map(function (week, index) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "week_".concat(index),

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

@@ -511,15 +511,20 @@
   }
 
   &-container {
-    width: 200px;
+    min-width: 200px;
+    position: relative;
+    .calendar {
+      position: absolute;
+      top: 100%;
+      padding: 10px 16px;
+      border: 1px solid var(--border-color);
+    }
   }
 
   &-dropdown {
     appearance: none;
     background-color: white;
     cursor: pointer;
-    color: gray;
-
     width: 100%;
     height: 28px;
 

package/package.json

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

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

@@ -4,40 +4,31 @@ import InputMask from 'react-input-mask';
 import Calendar from '../../UI/Calendar/Calendar';
 import { useClickOutside } from '../../../Functions/useClickOutside';
 
-const InputCalendar = ({ value, minDate, maxDate, onChange }) => {
-  const [date, setDate] = useState(value);
-  const [inputValue, setInputValue] = useState(date);
+const InputCalendar = ({ value, minDate, maxDate, onChange, className = '', placeholder = 'mm/dd/yyyy', mask = '99/99/9999' }) => {
   const [isOpened, setIsOpened] = useState(false);
   const calendarRef = useRef(null);
 
   useClickOutside(calendarRef, () => setIsOpened(false));
 
   const changeInputValue = val => {
-    if (!val.includes('_') && val) {
-      setDate(moment(val).format('L'));
-      setInputValue(moment(val).format('L'));
-    } else {
-      setInputValue(val);
-    }
-    if(onChange) onChange();
+    if (onChange) onChange(val);
   };
 
   const changeCalendarDay = val => {
-    setDate(val);
-    setInputValue(val);
     if (onChange) onChange(val);
   };
 
   return (
-    <div className="calendar-container" ref={calendarRef}>
+    <div className={`input__wrap calendar-container ${className}`} ref={calendarRef}>
       <InputMask
-        mask="99/99/9999"
-        value={inputValue}
+        mask={mask}
+        placeholder={placeholder}
+        value={value}
         onChange={e => changeInputValue(e.target.value)}
         className="calendar-dropdown"
         onFocus={() => setIsOpened(!isOpened)}
       />
-      {isOpened ? <Calendar date={date} setDate={newDate => changeCalendarDay(newDate)} params={{ minDate, maxDate }} /> : null}
+      {isOpened ? <Calendar date={moment(value).format('L')} setDate={newDate => changeCalendarDay(newDate)} params={{ minDate, maxDate }} /> : null}
     </div>
   );
 };

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

@@ -1,3 +1,4 @@
+import moment from 'moment-timezone';
 import React, { useRef, useState } from 'react';
 import { ref } from 'yup';
 import InputCalendar from './InputCalendar';
@@ -9,14 +10,17 @@ export default {
   component: InputCalendar,
 };
 
+const [date, setDate] = useState('');
+
 const Template = args => {
-  return <InputCalendar {...args} />;
+  return <InputCalendar {...args} value={date} />;
 };
 
 export const Calendar = Template.bind({});
 
 Calendar.args = {
-  value: '10/14/2021',
+  value: '',
   minDate: '10/14/2020',
-  maxDate: '10/14/2023',
+  maxDate: '10/14/2022',
+  onChange: val => setDate(val)
 };

package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.scss

@@ -1,4 +1,4 @@
-.range-calendar {
+.range-calendar, .calendar {
   width: 195px;
   min-height: 195px;
   display: flex;
@@ -12,7 +12,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-  
+
     &__title {
       line-height: 20px;
       font-weight: 500;
@@ -27,7 +27,7 @@
     &__next, &__prev {
       width: 16px;
       height: 16px;
-      background-color: #E2E6F8;
+      //background-color: #E2E6F8;
       border-radius: 5px;
       color: #171D33;
     }
@@ -98,4 +98,4 @@
       }
     }
   }
-}
+}

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

@@ -92,7 +92,7 @@ export default function (props) {
         {[...Array(7).keys()].map((dayOfWeek) => {
           return (
             <div key={`day-of-week_${dayOfWeek}`} className="calendar__day calendar__day--title">
-              {moment().weekday(dayOfWeek).format('dd').charAt(0)}
+              {moment().weekday(dayOfWeek).format('dd')}
             </div>
           );
         })}

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

@@ -511,15 +511,20 @@
   }
 
   &-container {
-    width: 200px;
+    min-width: 200px;
+    position: relative;
+    .calendar {
+      position: absolute;
+      top: 100%;
+      padding: 10px 16px;
+      border: 1px solid var(--border-color);
+    }
   }
 
   &-dropdown {
     appearance: none;
     background-color: white;
     cursor: pointer;
-    color: gray;
-
     width: 100%;
     height: 28px;