intelicoreact 0.0.52 → 0.0.53

package/dist/Atomic/FormElements/Calendar/Calendar.js

@@ -43,11 +43,16 @@ function _default(props) {
       days = _useState2[0],
       setDays = _useState2[1];
 
-  var selectedDay = (0, _moment.default)(date);
+  var _useState3 = (0, _react.useState)(date),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showDate = _useState4[0],
+      setShowDate = _useState4[1];
+
+  var selectedDay = (0, _moment.default)(showDate);
   var isError = 'Invalid date';
   var title = (0, _react.useMemo)(function () {
-    return selectedDay.format('MMM') === isError ? isError : "".concat(selectedDay.format('MMM'), " ").concat((0, _moment.default)(date).format('YYYY'));
-  }, [date]);
+    return selectedDay.format('MMM') === isError ? isError : "".concat(selectedDay.format('MMM'), " ").concat((0, _moment.default)(showDate).format('YYYY'));
+  }, [date, showDate]);
   (0, _react.useEffect)(function () {
     var result = {};
     var day = selectedDay.startOf('month');
@@ -69,7 +74,7 @@ function _default(props) {
     }
 
     setDays(result);
-  }, [date]);
+  }, [showDate]);
 
   var renderDay = function renderDay(week, dayOfWeek) {
     var day = days[week][dayOfWeek];
@@ -85,9 +90,8 @@ function _default(props) {
     }, {
       'calendar__day--disabled': isBeforeDay
     }, {
-      'calendar__day--selected': selectedDay.format() === (0, _moment.default)(day.date).format()
-    }); // console.log(isMaxDate, isMinDate);
-
+      'calendar__day--selected': (0, _moment.default)(date).format() === (0, _moment.default)(day.date).format()
+    });
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "".concat(week, "_").concat(dayOfWeek),
       className: classNames,
@@ -100,11 +104,11 @@ function _default(props) {
   };
 
   var handlePrev = function handlePrev() {
-    setDate((0, _moment.default)(date).subtract(1, 'month').format('L'));
+    setShowDate((0, _moment.default)(showDate).subtract(1, 'month').format('L'));
   };
 
   var handleNext = function handleNext() {
-    setDate((0, _moment.default)(date).add(1, 'month').format('L'));
+    setShowDate((0, _moment.default)(showDate).add(1, 'month').format('L'));
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarTemplate = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Calendar = _interopRequireDefault(require("./Calendar"));
+
+global.lng = 'en';
+var _default = {
+  title: 'UI/Calendar',
+  component: _Calendar.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_Calendar.default, args);
+};
+
+var CalendarTemplate = Template.bind({});
+exports.CalendarTemplate = CalendarTemplate;
+CalendarTemplate.args = {
+  date: '12/03/2021',
+  params: {},
+  setDate: function setDate() {
+    return null;
+  }
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.52",
-  "description": "Add symbols limit in input",
+  "version": "0.0.53",
+  "description": "Fix Calendar",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/Atomic/FormElements/Calendar/Calendar.js

@@ -8,13 +8,14 @@ export default function (props) {
   const { date, setDate, allowPrev = true, allowNext = true, params } = props;
   const { minDate, maxDate } = params;
   const [days, setDays] = useState({});
+  const [showDate, setShowDate] = useState(date);
 
-  const selectedDay = moment(date);
+  const selectedDay = moment(showDate);
   const isError = 'Invalid date';
 
   const title = useMemo(
-    () => (selectedDay.format('MMM') === isError ? isError : `${selectedDay.format('MMM')} ${moment(date).format('YYYY')}`),
-    [date]
+    () => (selectedDay.format('MMM') === isError ? isError : `${selectedDay.format('MMM')} ${moment(showDate).format('YYYY')}`),
+    [date, showDate]
   );
   useEffect(() => {
     const result = {};
@@ -31,7 +32,7 @@ export default function (props) {
       day.add(1, 'd');
     }
     setDays(result);
-  }, [date]);
+  }, [showDate]);
 
   const renderDay = (week, dayOfWeek) => {
     const day = days[week][dayOfWeek];
@@ -44,11 +45,9 @@ export default function (props) {
       { 'calendar__day--clickable': day },
       { 'calendar__day--disabled': isFutureDay },
       { 'calendar__day--disabled': isBeforeDay },
-      { 'calendar__day--selected': selectedDay.format() === moment(day.date).format() }
+      { 'calendar__day--selected': moment(date).format() === moment(day.date).format() }
     );
 
-    // console.log(isMaxDate, isMinDate);
-
     return (
       <div
         key={`${week}_${dayOfWeek}`}
@@ -63,11 +62,11 @@ export default function (props) {
   };
 
   const handlePrev = () => {
-    setDate(moment(date).subtract(1, 'month').format('L'));
+    setShowDate(moment(showDate).subtract(1, 'month').format('L'));
   };
 
   const handleNext = () => {
-    setDate(moment(date).add(1, 'month').format('L'));
+    setShowDate(moment(showDate).add(1, 'month').format('L'));
   };
 
   return (

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import Calendar from './Calendar';
+
+global.lng = 'en';
+
+export default {
+  title: 'UI/Calendar',
+  component: Calendar,
+};
+
+const Template = args => <Calendar {...args} />;
+
+export const CalendarTemplate = Template.bind({});
+
+CalendarTemplate.args = {
+  date: '12/03/2021',
+  params: {},
+  setDate: () => null,
+};