intelicoreact 0.0.83 → 0.0.84

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

@@ -26,10 +26,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 var InputCalendar = function InputCalendar(_ref) {
-  var data = _ref.data,
-      params = _ref.params;
+  var value = _ref.value,
+      minDate = _ref.minDate,
+      maxDate = _ref.maxDate,
+      onChange = _ref.onChange;
 
-  var _useState = (0, _react.useState)(data),
+  var _useState = (0, _react.useState)(value),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       date = _useState2[0],
       setDate = _useState2[1];
@@ -49,18 +51,21 @@ var InputCalendar = function InputCalendar(_ref) {
     return setIsOpened(false);
   });
 
-  var changeInputValue = function changeInputValue(value) {
-    if (!value.includes('_') && value) {
-      setDate((0, _moment.default)(value).format('L'));
-      setInputValue((0, _moment.default)(value).format('L'));
+  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(value);
+      setInputValue(val);
     }
+
+    if (onChange) onChange();
   };
 
-  var changeCalendarDay = function changeCalendarDay(value) {
-    setDate(value);
-    setInputValue(value);
+  var changeCalendarDay = function changeCalendarDay(val) {
+    setDate(val);
+    setInputValue(val);
+    if (onChange) onChange(val);
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -81,7 +86,10 @@ var InputCalendar = function InputCalendar(_ref) {
     setDate: function setDate(newDate) {
       return changeCalendarDay(newDate);
     },
-    params: params
+    params: {
+      minDate: minDate,
+      maxDate: maxDate
+    }
   }) : null);
 };
 

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

@@ -27,20 +27,13 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  var params = {
-    minDate: args === null || args === void 0 ? void 0 : args.minDate,
-    maxDate: args === null || args === void 0 ? void 0 : args.maxDate
-  };
-  return /*#__PURE__*/_react.default.createElement(_InputCalendar.default, {
-    data: args.date,
-    params: params
-  });
+  return /*#__PURE__*/_react.default.createElement(_InputCalendar.default, args);
 };
 
 var Calendar = Template.bind({});
 exports.Calendar = Calendar;
 Calendar.args = {
-  date: '10/14/2021',
-  minDate: '10/11/2021',
-  maxDate: '10/25/2021'
+  value: '10/14/2021',
+  minDate: '10/14/2020',
+  maxDate: '10/14/2023'
 };

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

@@ -36,8 +36,10 @@ function _default(props) {
       allowNext = _props$allowNext === void 0 ? true : _props$allowNext,
       params = props.params,
       className = props.className;
-  var minDate = params.minDate,
-      maxDate = params.maxDate;
+  var _params$minDate = params.minDate,
+      minDate = _params$minDate === void 0 ? '01/01/1900' : _params$minDate,
+      _params$maxDate = params.maxDate,
+      maxDate = _params$maxDate === void 0 ? (0, _moment.default)().format('MM/DD/YYYY') : _params$maxDate;
 
   var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),

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

@@ -425,7 +425,11 @@
 //     box-shadow: 0 0 3px 0 rgb(0 123 255 / 50%);
 //   }
 // }
-
+.calendar-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .calendar {
   background: #ffffff;
     border: 1px solid #e2e5ec;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.83",
-  "description": "",
+  "version": "0.0.84",
+  "description": "fix input-calendar",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

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

@@ -4,26 +4,28 @@ import InputMask from 'react-input-mask';
 import Calendar from '../../UI/Calendar/Calendar';
 import { useClickOutside } from '../../../Functions/useClickOutside';
 
-const InputCalendar = ({ data, params }) => {
-  const [date, setDate] = useState(data);
+const InputCalendar = ({ value, minDate, maxDate, onChange }) => {
+  const [date, setDate] = useState(value);
   const [inputValue, setInputValue] = useState(date);
   const [isOpened, setIsOpened] = useState(false);
   const calendarRef = useRef(null);
 
   useClickOutside(calendarRef, () => setIsOpened(false));
 
-  const changeInputValue = value => {
-    if (!value.includes('_') && value) {
-      setDate(moment(value).format('L'));
-      setInputValue(moment(value).format('L'));
+  const changeInputValue = val => {
+    if (!val.includes('_') && val) {
+      setDate(moment(val).format('L'));
+      setInputValue(moment(val).format('L'));
     } else {
-      setInputValue(value);
+      setInputValue(val);
     }
+    if(onChange) onChange();
   };
 
-  const changeCalendarDay = value => {
-    setDate(value);
-    setInputValue(value);
+  const changeCalendarDay = val => {
+    setDate(val);
+    setInputValue(val);
+    if (onChange) onChange(val);
   };
 
   return (
@@ -35,7 +37,7 @@ const InputCalendar = ({ data, params }) => {
         className="calendar-dropdown"
         onFocus={() => setIsOpened(!isOpened)}
       />
-      {isOpened ? <Calendar date={date} setDate={(newDate) => changeCalendarDay(newDate)} params={params} /> : null}
+      {isOpened ? <Calendar date={date} setDate={newDate => changeCalendarDay(newDate)} params={{ minDate, maxDate }} /> : null}
     </div>
   );
 };

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

@@ -9,19 +9,14 @@ export default {
   component: InputCalendar,
 };
 
-const Template = (args) => {
-  const params = {
-    minDate: args?.minDate,
-    maxDate: args?.maxDate,
-  };
-
-  return <InputCalendar data={args.date} params={params} />;
+const Template = args => {
+  return <InputCalendar {...args} />;
 };
 
 export const Calendar = Template.bind({});
 
 Calendar.args = {
-  date: '10/14/2021',
-  minDate: '10/11/2021',
-  maxDate: '10/25/2021',
+  value: '10/14/2021',
+  minDate: '10/14/2020',
+  maxDate: '10/14/2023',
 };

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

@@ -6,7 +6,7 @@ import './Calendar.scss';
 
 export default function (props) {
   const { date, setDate, allowPrev = true, allowNext = true, params, className } = props;
-  const { minDate, maxDate } = params;
+  const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
   const [days, setDays] = useState({});
   const [showDate, setShowDate] = useState(date);
 

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

@@ -425,7 +425,11 @@
 //     box-shadow: 0 0 3px 0 rgb(0 123 255 / 50%);
 //   }
 // }
-
+.calendar-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .calendar {
   background: #ffffff;
     border: 1px solid #e2e5ec;