diginet-core-ui 1.3.78 → 1.3.79

package/components/form-control/calendar/function.js

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/core';
 import { render } from 'react-dom';
 import { Button, ButtonIcon, Typography } from '../..';
@@ -31,6 +31,7 @@ const {
   danger8,
   info8
 } = colors;
+
 /**
  * START STYLE
  */
@@ -41,7 +42,6 @@ const {
  * @param {Boolean} boxShadow
  * @returns
  */
-
 const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) => css`
     ${borderRadius4px}
     ${borderBox}
@@ -253,8 +253,6 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
  * @param {String} className
  * @returns {Object} props of the typography
  */
-
-
 const typographyProps = className => {
   return {
     className,
@@ -278,8 +276,6 @@ const typographyProps = className => {
  * @param {String} className
  * @returns {Object} props of the button icon
  */
-
-
 const buttonIconProps = className => {
   return {
     className,
@@ -296,8 +292,6 @@ const buttonIconProps = className => {
  * @param {Function} fn
  * @returns {Object} props of the button text
  */
-
-
 const buttonTextProps = fn => {
   return {
     onClick: fn,
@@ -311,13 +305,12 @@ const buttonTextProps = fn => {
     }
   };
 };
+
 /**
  * @description detect value is a Date object
  * @param {String | Number | Array} value
  * @returns boolean
  */
-
-
 const isValidDate = value => {
   return new Date(value) instanceof Date && !isNaN(new Date(value));
 };
@@ -327,8 +320,6 @@ const isValidDate = value => {
  * @param {Date} date
  * @returns number of day from 0 (Monday) to 6 (Sunday).
  */
-
-
 const getDateOfWeek = date => {
   let day = date.getDay();
   if (day === 0) day = 7;
@@ -342,8 +333,6 @@ const getDateOfWeek = date => {
  * @param {String} className
  * @returns {Boolean} is today
  */
-
-
 const isToday = (day, today, className) => {
   return +moment(day).diff(today) === 0 ? className : '';
 };
@@ -355,19 +344,15 @@ const isToday = (day, today, className) => {
  * @param {String} className
  * @returns {Boolean} is active day
  */
-
-
 const isActive = (day, active, className) => {
   if (Array.isArray(active)) {
     if (+moment(day).diff(active[0]) === 0 || +moment(day).diff(active[1]) === 0) {
       return className;
     }
   }
-
   if (+moment(day).diff(active) === 0) {
     return className;
   }
-
   return '';
 };
 /**
@@ -379,32 +364,24 @@ const isActive = (day, active, className) => {
  * @param {Object} className
  * @returns {Boolean} is limited day
  */
-
-
 const isLimit = (day, max, min, className) => {
   return isBeforeLimit(min, day) || isAfterLimit(max, day) ? className : '';
 };
-
 const isBetween = (day, from, to, className) => {
   if (from && isValidDate(from) && +moment(day).diff(from) === 0) {
     return className.from;
   }
-
   if (to && isValidDate(to) && +moment(day).diff(to) === 0) {
     return className.to;
   }
-
   if (from && to && isValidDate(from) && isValidDate(to) && +moment(day).diff(from) > 0 && +moment(day).diff(to) < 0) {
     return className.between;
   }
-
   return '';
 };
-
 const isBeforeLimit = (min, time) => {
   return min && isValidDate(min) && moment(time).diff(new Date(min).setHours(0, 0, 0, 0)) < 0;
 };
-
 const isAfterLimit = (max, time) => {
   return max && isValidDate(max) && moment(time).diff(new Date(max).setHours(0, 0, 0, 0)) > 0;
 };
@@ -420,46 +397,40 @@ const isAfterLimit = (max, time) => {
  * @param {Date} max
  * @returns {Element}
  */
-
-
 const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTableDataClick, min, max) => {
   time = new Date(time);
   const firstDay = new Date(new Date(time).setDate(1)),
-        lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0),
-        prevDay = new Date(firstDay.getFullYear(), firstDay.getMonth(), 0),
-        today = new Date().setHours(0, 0, 0, 0),
-        lastDate = lastDay.getDate(),
-        prevDate = prevDay.getDate();
+    lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0),
+    prevDay = new Date(firstDay.getFullYear(), firstDay.getMonth(), 0),
+    today = new Date().setHours(0, 0, 0, 0),
+    lastDate = lastDay.getDate(),
+    prevDate = prevDay.getDate();
   let active = Array.isArray(activeValue) ? new Date(activeValue[0]) : new Date(activeValue);
   let tableBody = [],
-      tableRaw = [],
-      tableData = [],
-      weekDateFirst = getDateOfWeek(firstDay),
-      weekDateLast = getDateOfWeek(lastDay);
-
+    tableRaw = [],
+    tableData = [],
+    weekDateFirst = getDateOfWeek(firstDay),
+    weekDateLast = getDateOfWeek(lastDay);
   if (activeValue && Array.isArray(activeValue) && activeValue.length === 2 && activeValue[0] !== activeValue[1]) {
     /**
      * days of previous month
      */
     active = activeValue;
-
     for (let i = weekDateFirst; i > 0; i--) {
-      const day = new Date(time.getFullYear(), time.getMonth() - 1, // displayAnotherMonth ? prevDate - i + 1 : 1
+      const day = new Date(time.getFullYear(), time.getMonth() - 1,
+      // displayAnotherMonth ? prevDate - i + 1 : 1
       1);
       tableData.push(jsx("td", {
         key: `previous_month-${prevDate - i + 1}`,
-        "data-time": Date.parse(day) - 1
-        /*(displayAnotherMonth ? 0 : 1)*/
-        ,
+        "data-time": Date.parse(day) - 1 /*(displayAnotherMonth ? 0 : 1)*/,
         className: `${[className.table.data, 'previous_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isBetween(day, active[0], active[1], className.day)].join(' ')}`
-      }, jsx(Typography, { ...typographyProps(className.day.day)
+      }, jsx(Typography, {
+        ...typographyProps(className.day.day)
       }, '')));
     }
     /**
      * days of this month
      */
-
-
     for (let i = 0; i < lastDate; i++) {
       const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
       tableData.push(jsx("td", {
@@ -467,24 +438,23 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         "data-time": Date.parse(day),
         className: `${[className.table.data, 'this_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit), isBetween(day, active[0], active[1], className.day)].join(' ')}`,
         onClick: onTableDataClick
-      }, jsx(Typography, { ...typographyProps(className.day.day)
+      }, jsx(Typography, {
+        ...typographyProps(className.day.day)
       }, i + 1)));
     }
     /**
      * days of next month
      */
-
-
     for (let i = 0; i < 20 - weekDateLast; i++) {
-      const day = new Date(time.getFullYear(), time.getMonth() + 1, // displayAnotherMonth ? i + 1 : 6 - weekDateLast
+      const day = new Date(time.getFullYear(), time.getMonth() + 1,
+      // displayAnotherMonth ? i + 1 : 6 - weekDateLast
       6 - weekDateLast);
       tableData.push(jsx("td", {
         key: `next_month-${i + 1}`,
-        "data-time": Date.parse(day) + 1
-        /*(displayAnotherMonth ? 0 : 1)*/
-        ,
+        "data-time": Date.parse(day) + 1 /*(displayAnotherMonth ? 0 : 1)*/,
         className: `${[className.table.data, 'next_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isBetween(day, active[0], active[1], className.day)].join(' ')}`
-      }, jsx(Typography, { ...typographyProps(className.day.day)
+      }, jsx(Typography, {
+        ...typographyProps(className.day.day)
       }, '')));
     }
   } else {
@@ -498,14 +468,13 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         "data-time": Date.parse(day) - (displayAnotherMonth ? 0 : 1),
         className: `${[className.table.data, 'previous_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit)].join(' ')}`,
         onClick: onTableDataClick
-      }, jsx(Typography, { ...typographyProps(className.day.day)
+      }, jsx(Typography, {
+        ...typographyProps(className.day.day)
       }, displayAnotherMonth ? prevDate - i + 1 : '')));
     }
     /**
      * days of this month
      */
-
-
     for (let i = 0; i < lastDate; i++) {
       const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
       tableData.push(jsx("td", {
@@ -513,14 +482,13 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         "data-time": Date.parse(day),
         className: `${[className.table.data, 'this_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit)].join(' ')}`,
         onClick: onTableDataClick
-      }, jsx(Typography, { ...typographyProps(className.day.day)
+      }, jsx(Typography, {
+        ...typographyProps(className.day.day)
       }, i + 1)));
     }
     /**
      * days of next month
      */
-
-
     for (let i = 0; i < 20 - weekDateLast; i++) {
       const day = new Date(time.getFullYear(), time.getMonth() + 1, displayAnotherMonth ? i + 1 : 6 - weekDateLast);
       tableData.push(jsx("td", {
@@ -528,23 +496,21 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         "data-time": Date.parse(day) + (displayAnotherMonth ? 0 : 1),
         className: `${[className.table.data, 'next_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit)].join(' ')}`,
         onClick: onTableDataClick
-      }, jsx(Typography, { ...typographyProps(className.day.day)
+      }, jsx(Typography, {
+        ...typographyProps(className.day.day)
       }, displayAnotherMonth ? i + 1 : '')));
     }
   }
-
   for (let i = 0; i < 6; i++) {
     for (let j = 0; j < 7; j++) {
       tableRaw.push(tableData[7 * i + j]);
     }
-
     tableBody.push(jsx("tr", {
       key: i,
       className: className.day.week
     }, tableRaw));
     tableRaw = [];
   }
-
   return tableBody;
 };
 /**
@@ -552,12 +518,9 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
  * @param {Object} className
  * @returns
  */
-
-
 const renderHeader = className => {
   const weekdays = getGlobal(['weekdaysLong']);
   const tableHeader = [];
-
   for (let i in weekdays) {
     tableHeader.push(jsx("th", {
       key: i,
@@ -567,7 +530,6 @@ const renderHeader = className => {
       type: 'h6'
     }, weekdays[i])));
   }
-
   const header = jsx("thead", null, jsx("tr", {
     className: className.table.raw
   }, tableHeader));
@@ -583,34 +545,37 @@ const renderHeader = className => {
  * @param {Function} dbRightFn
  * @returns navigator
  */
-
-
 const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn, fn) => jsx("div", {
   className: className.navigator.navigator
 }, jsx("div", {
   className: className.navigator.around
-}, jsx(ButtonIcon, { ...buttonIconProps(className.icon),
+}, jsx(ButtonIcon, {
+  ...buttonIconProps(className.icon),
   name: 'ArrowDoubleLeft',
   onClick: dbLeftFn,
   ref: refs.doubleLeft
-}), jsx(ButtonIcon, { ...buttonIconProps(className.icon),
+}), jsx(ButtonIcon, {
+  ...buttonIconProps(className.icon),
   name: 'ArrowLeft',
   onClick: leftFn,
   ref: refs.left
 })), jsx("div", {
   className: className.navigator.center
-}, jsx(Button, { ...buttonTextProps(fn)
+}, jsx(Button, {
+  ...buttonTextProps(fn)
 }, jsx(Typography, {
   color: 'primary',
   type: 'h3',
   ref: refs.content
 }))), jsx("div", {
   className: className.navigator.around
-}, jsx(ButtonIcon, { ...buttonIconProps(className.icon),
+}, jsx(ButtonIcon, {
+  ...buttonIconProps(className.icon),
   name: 'ArrowRight',
   onClick: rightFn,
   ref: refs.right
-}), jsx(ButtonIcon, { ...buttonIconProps(className.icon),
+}), jsx(ButtonIcon, {
+  ...buttonIconProps(className.icon),
   name: 'ArrowDoubleRight',
   onClick: dbRightFn,
   ref: refs.doubleRight
@@ -620,8 +585,6 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
  * @param {Date} time
  * @returns {String} month year
  */
-
-
 const renderNavigatorContent = time => {
   const value = new Date(time);
   const months = getGlobal(['months', 'full']);
@@ -634,51 +597,38 @@ const renderNavigatorContent = time => {
  * @param {Date} min
  * @param {Date} max
  */
-
-
 const onUpdateNavigator = (time, refs, min, max) => {
   var _refs$doubleLeft$curr, _refs$doubleLeft$curr2, _refs$doubleRight$cur, _refs$doubleRight$cur2, _refs$left$current, _refs$left$current$in, _refs$right$current, _refs$right$current$i;
-
   const el = refs.content.current;
   const vl = renderNavigatorContent(time);
   const year = locale.get() === 'vi' ? ` ${getGlobal(['year'])} ` : '';
-
   if (el) {
     el.innerHTML = `${vl[0]} ${year}${vl[1]}`;
   }
-
   const firstDayOfMin = new Date(new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0));
   const firstDayOfMax = new Date(new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0));
   (_refs$doubleLeft$curr = refs.doubleLeft.current) === null || _refs$doubleLeft$curr === void 0 ? void 0 : (_refs$doubleLeft$curr2 = _refs$doubleLeft$curr.instance) === null || _refs$doubleLeft$curr2 === void 0 ? void 0 : _refs$doubleLeft$curr2.option('disabled', false);
   (_refs$doubleRight$cur = refs.doubleRight.current) === null || _refs$doubleRight$cur === void 0 ? void 0 : (_refs$doubleRight$cur2 = _refs$doubleRight$cur.instance) === null || _refs$doubleRight$cur2 === void 0 ? void 0 : _refs$doubleRight$cur2.option('disabled', false);
   (_refs$left$current = refs.left.current) === null || _refs$left$current === void 0 ? void 0 : (_refs$left$current$in = _refs$left$current.instance) === null || _refs$left$current$in === void 0 ? void 0 : _refs$left$current$in.option('disabled', false);
   (_refs$right$current = refs.right.current) === null || _refs$right$current === void 0 ? void 0 : (_refs$right$current$i = _refs$right$current.instance) === null || _refs$right$current$i === void 0 ? void 0 : _refs$right$current$i.option('disabled', false);
-
   if (min && isValidDate(min)) {
     if (moment(time).diff(firstDayOfMin) < 365) {
       var _refs$doubleLeft$curr3, _refs$doubleLeft$curr4;
-
       (_refs$doubleLeft$curr3 = refs.doubleLeft.current) === null || _refs$doubleLeft$curr3 === void 0 ? void 0 : (_refs$doubleLeft$curr4 = _refs$doubleLeft$curr3.instance) === null || _refs$doubleLeft$curr4 === void 0 ? void 0 : _refs$doubleLeft$curr4.option('disabled', true);
     }
-
     if (moment(time).diff(firstDayOfMin) <= 28) {
       var _refs$doubleLeft$curr5, _refs$doubleLeft$curr6, _refs$left$current2, _refs$left$current2$i;
-
       (_refs$doubleLeft$curr5 = refs.doubleLeft.current) === null || _refs$doubleLeft$curr5 === void 0 ? void 0 : (_refs$doubleLeft$curr6 = _refs$doubleLeft$curr5.instance) === null || _refs$doubleLeft$curr6 === void 0 ? void 0 : _refs$doubleLeft$curr6.option('disabled', true);
       (_refs$left$current2 = refs.left.current) === null || _refs$left$current2 === void 0 ? void 0 : (_refs$left$current2$i = _refs$left$current2.instance) === null || _refs$left$current2$i === void 0 ? void 0 : _refs$left$current2$i.option('disabled', true);
     }
   }
-
   if (max && isValidDate(max)) {
     if (moment(time).diff(firstDayOfMax) > -334) {
       var _refs$doubleRight$cur3, _refs$doubleRight$cur4;
-
       (_refs$doubleRight$cur3 = refs.doubleRight.current) === null || _refs$doubleRight$cur3 === void 0 ? void 0 : (_refs$doubleRight$cur4 = _refs$doubleRight$cur3.instance) === null || _refs$doubleRight$cur4 === void 0 ? void 0 : _refs$doubleRight$cur4.option('disabled', true);
     }
-
     if (moment(time).diff(firstDayOfMax) > -1) {
       var _refs$doubleRight$cur5, _refs$doubleRight$cur6, _refs$right$current2, _refs$right$current2$;
-
       (_refs$doubleRight$cur5 = refs.doubleRight.current) === null || _refs$doubleRight$cur5 === void 0 ? void 0 : (_refs$doubleRight$cur6 = _refs$doubleRight$cur5.instance) === null || _refs$doubleRight$cur6 === void 0 ? void 0 : _refs$doubleRight$cur6.option('disabled', true);
       (_refs$right$current2 = refs.right.current) === null || _refs$right$current2 === void 0 ? void 0 : (_refs$right$current2$ = _refs$right$current2.instance) === null || _refs$right$current2$ === void 0 ? void 0 : _refs$right$current2$.option('disabled', true);
     }
@@ -697,17 +647,13 @@ const onUpdateNavigator = (time, refs, min, max) => {
  * @param {Function} onTableDataClick
  * @param {Function} onUpdateNavigatorValue
  */
-
-
 const onUpdateCalendar = (time, navigatorRefs, min, max, table, activeValue, className, displayAnotherMonth, onTableDataClick, onUpdateNavigatorValue) => {
   onUpdateNavigator(time, navigatorRefs, min, max);
   onUpdateNavigatorValue(time);
-
   if (table) {
     const child = renderTableBody(time, activeValue, className, displayAnotherMonth, onTableDataClick, min, max);
     table.querySelector('tbody').remove();
     render(child, table.appendChild(document.createElement('tbody')));
   }
 };
-
 export { renderTableBody, renderHeader, renderNavigator, onUpdateNavigator, renderNavigatorContent, onUpdateCalendar, isBeforeLimit, isAfterLimit, isValidDate, generateCalendarCSS };

package/components/form-control/calendar/index.js

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
+
 import { jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
@@ -41,10 +41,10 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       limit: 'DGN-UI-Calendar-Day-limit'
     }
   };
+
   /**
    * START REFERENCE
    */
-
   const ref = useRef(null);
   const tableRef = useRef(null);
   const activeValue = useRef(null);
@@ -68,7 +68,6 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /**
    * START FUNCTION
    */
-
   const onUpdateNavigatorValue = useCallback(value => {
     navigatorValue.current = value;
     setNavigatorValue();
@@ -77,18 +76,15 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     activeValue.current = value;
     setActiveValue();
   }, [activeValue]);
-
   const onUpdate = value => {
     const newValue = new Date(value).setHours(0, 0, 0, 0);
     onUpdateActiveValue(newValue);
     onUpdateCalendar(newValue, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
   };
-
   const getCurrentTime = () => {
     const time = new Date(navigatorValue.current);
     return [time.getDate(), time.getMonth(), time.getFullYear()];
   };
-
   const onDayClick = e => {
     const node = e.currentTarget;
     tableRef.current.querySelectorAll(`td.${unique.day.active}`).forEach(element => {
@@ -97,61 +93,50 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     node.classList.add(unique.day.active);
     const timeStamp = Number(node.dataset.time);
     const objNewDate = new Date(timeStamp);
-
     const _navigatorValue = new Date(navigatorValue.current);
-
     const objNewDateMonth = objNewDate.getMonth() + 1;
     const objNewDateYear = objNewDate.getFullYear();
     const navigatorMonth = _navigatorValue.getMonth() + 1;
-
     const navigatorYear = _navigatorValue.getFullYear();
-
     onUpdateActiveValue(objNewDate);
     if (objNewDateMonth > navigatorMonth || objNewDateYear > navigatorYear) setNextMonth();else if (objNewDateMonth < navigatorMonth || objNewDateYear < navigatorYear) setPrevMonth();
     !!onClick && onClick({
       value: objNewDate
     });
   };
-
   const setPrevYear = e => {
     const time = new Date(getCurrentTime()[2] - 1, getCurrentTime()[1]);
-
     if (min && isValidDate(min) && moment(time).diff(firstDayOfMin) < 0) {
       e.preventDefault();
     } else {
       onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
     }
   };
-
   const setNextYear = e => {
     const time = new Date(getCurrentTime()[2] + 1, getCurrentTime()[1]);
-
     if (max && isValidDate(max) && moment(time).diff(firstDayOfMax) > 0) {
       e.preventDefault();
     } else {
       onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
     }
   };
-
   const setPrevMonth = e => {
     const time = new Date(getCurrentTime()[2], getCurrentTime()[1] - 1);
-
     if (min && isValidDate(min) && moment(time).diff(firstDayOfMin) < 0) {
       e.preventDefault();
     } else {
       onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
     }
   };
-
   const setNextMonth = e => {
     const time = new Date(getCurrentTime()[2], getCurrentTime()[1] + 1);
-
     if (max && isValidDate(max) && moment(time).diff(firstDayOfMax) > 0) {
       e.preventDefault();
     } else {
       onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
     }
   };
+
   /**
    * END FUNCTION
    */
@@ -159,8 +144,6 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /**
    * START EFFECT
    */
-
-
   useEffect(() => {
     if (defaultValue && defaultValue !== '' && isValidDate(defaultValue)) {
       if (isBeforeLimit(min, defaultValue)) {
@@ -205,7 +188,6 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /**
    * START COMPONENT
    */
-
   const tableMemo = jsx("div", {
     className: unique.table.container
   }, jsx("table", {
@@ -215,8 +197,8 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /**
    * END COMPONENT
    */
-
-  return jsx("div", { ...props,
+  return jsx("div", {
+    ...props,
     className: [unique.container, className].join(' ').trim().replace(/\s+/g, ' '),
     css: generateCalendarCSS(unique),
     ref: ref
@@ -230,25 +212,18 @@ Calendar.defaultProps = {
 Calendar.propTypes = {
   /** the footer actions */
   actions: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
-
   /** class for calendar */
   className: PropTypes.string,
-
   /** the default value of the calendar */
   defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
-
   /** display days of previous or next month */
   displayAnotherMonth: PropTypes.bool,
-
   /** the last date that can be selected within the UI component. */
   max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
-
   /** the minimum date that can be selected within the UI component. */
   min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
-
   /** a callback function when click on a day of calendar */
   onClick: PropTypes.func,
-
   /** value of the calendar */
   value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array])
 };