pcm-shared-components 2.0.14 → 2.0.16

package/dist/app/tools/seasonal_dates.js

@@ -0,0 +1,229 @@
+import moment from 'moment';
+export const weeks = {
+  first: 0,
+  second: 1,
+  third: 2,
+  fourth: 3,
+  last: 4
+};
+export const weekdays = {
+  sunday: 0,
+  monday: 1,
+  tuesday: 2,
+  wednesday: 3,
+  thursday: 4,
+  friday: 5,
+  saturday: 6
+};
+export const months = {
+  january: 0,
+  february: 1,
+  march: 2,
+  april: 3,
+  may: 4,
+  june: 5,
+  july: 6,
+  august: 7,
+  september: 8,
+  october: 9,
+  november: 10,
+  december: 11
+};
+export const getSeasonalStartDate = (year, seasonal_object) => {
+  seasonal_object = getWorkingSeasonalObject(year, seasonal_object);
+  if (Number(seasonal_object.use_fix_start_date) === 1) {
+    //use the date defined
+    // const test = moment([ year, months[returnLiteralString(months, seasonal_object.fix_dates.start.month)], seasonal_object.fix_dates.start.day ]).set({ hour: seasonal_object.arrival_hour, minute: seasonal_object.arrival_minute });
+    // console.log('debug Start Date Fixed ', test)
+    return moment([year, months[returnLiteralString(months, seasonal_object.fix_dates.start.month)], seasonal_object.fix_dates.start.day]).set({
+      hour: seasonal_object.arrival_hour,
+      minute: seasonal_object.arrival_minute
+    });
+  } else {
+    //need to find the date base on the literal date
+    // const test =  getVariableDate(year, months[returnLiteralString(months, seasonal_object.variable_dates.start.month)], weeks[returnLiteralString(weeks, seasonal_object.variable_dates.start.week)], weekdays[returnLiteralString(weekdays, seasonal_object.variable_dates.start.weekday)]).set({ hour: seasonal_object.arrival_hour, minute: seasonal_object.arrival_minute });
+    // console.log('debug Start Variable Date ', test)
+    return getVariableDate(year, months[returnLiteralString(months, seasonal_object.variable_dates.start.month)], weeks[returnLiteralString(weeks, seasonal_object.variable_dates.start.week)], weekdays[returnLiteralString(weekdays, seasonal_object.variable_dates.start.weekday)]).set({
+      hour: seasonal_object.arrival_hour,
+      minute: seasonal_object.arrival_minute
+    });
+  }
+};
+export const getSeasonalEndDate = (year, seasonal_object) => {
+  seasonal_object = getWorkingSeasonalObject(year, seasonal_object);
+  const end_year = getSeasonalEndDateYear(year, seasonal_object);
+  if (Number(seasonal_object.use_fix_end_date) === 1) {
+    //use the date defined
+    return moment([end_year, months[returnLiteralString(months, seasonal_object.fix_dates.end.month)], seasonal_object.fix_dates.end.day]).set({
+      hour: seasonal_object.departure_hour,
+      minute: seasonal_object.departure_minute
+    });
+  } else {
+    //need to find the date base on the literal date
+    return getVariableDate(end_year, months[returnLiteralString(months, seasonal_object.variable_dates.end.month)], weeks[returnLiteralString(weeks, seasonal_object.variable_dates.end.week)], weekdays[returnLiteralString(weekdays, seasonal_object.variable_dates.end.weekday)]).set({
+      hour: seasonal_object.departure_hour,
+      minute: seasonal_object.departure_minute
+    });
+  }
+};
+const getSeasonalEndDateYear = (year, seasonal_object) => {
+  //This is used to make sure that we don't reuse the current year for the end date when our end month is > than the starting month.
+  // Meaning: Start month is December and End month is April.  Because the start and end date are stored inside the same year object I need to increase the end year when this happens
+  /*
+  	2020----------Dec=11-----------------April=3---------------------
+  	  		       ^ start date         ^ end date
+  
+  	So the above seasonal object would return and end date before the start date making the selection invalid because what we need is
+  			- Start date Dec 2020
+  		- End date April 2021
+  			Returns the end date year to be used example: 2021 in the example above
+  	*/
+  let start_month,
+    end_month,
+    start_day,
+    end_day,
+    has_variable_date = false;
+
+  // Get the starting and ending month and day index value
+  if (Number(seasonal_object.use_fix_start_date) === 1) {
+    start_month = returnIndexPosition(months, seasonal_object.fix_dates.start.month);
+    start_day = returnIndexPosition(weekdays, seasonal_object.fix_dates.start.day);
+  } else {
+    has_variable_date = true;
+    start_month = returnIndexPosition(months, seasonal_object.variable_dates.start.month);
+    start_day = returnIndexPosition(weekdays, seasonal_object.variable_dates.start.weekday);
+  }
+  if (Number(seasonal_object.use_fix_end_date) === 1) {
+    end_month = returnIndexPosition(months, seasonal_object.fix_dates.end.month);
+    end_day = returnIndexPosition(weekdays, seasonal_object.fix_dates.end.day);
+  } else {
+    has_variable_date = true;
+    end_month = returnIndexPosition(months, seasonal_object.variable_dates.end.month);
+    end_day = returnIndexPosition(weekdays, seasonal_object.variable_dates.end.weekday);
+  }
+
+  // Now check to see if we need to increase our year by one
+  if (Number(end_month) < Number(start_month)) {
+    // Ending month is smaller than starting month we are automatically in a new year
+    year = Number(year) + 1;
+  } else if (Number(end_month) === Number(start_month) && has_variable_date) {
+    // Same month and we have a variable date for one or both dates.
+    // Automatically the ending year should be increased
+    year = Number(year) + 1;
+  } else if (Number(end_month) === Number(start_month) && Number(end_day) <= Number(start_day)) {
+    // Ending month is the same as the starting month and we have the same or smaller day.
+    // 2020----------Dec 2st-----------------Dec 2nd--------------------- We want a full year date to date
+    // 2020----------Dec 2st-----------------Dec 1nd--------------------- We want a full year minus one day
+    year = Number(year) + 1;
+  }
+  return year;
+};
+const getVariableDate = (year, month, week_number, week_day) => {
+  let loop_end = true;
+  let week_number_i = week_number;
+  //let leep_week = 0; //used to compensate for the start of the previous months when week 0 = previous month
+  // Check if we are not in the current month based on the week number and adjust accordingly
+  while (loop_end) {
+    let new_month = moment([year, month]).day(week_day + week_number_i * 7).month();
+    if (new_month === 11 && month === 0) {
+      //This is the cross over from January to December, need to bring it back to January
+      week_number_i++;
+    } else if (new_month === 0 && month === 11) {
+      //This is the cross over from December to January, need to bring it back to December
+      week_number_i--;
+    } else if (new_month < month) {
+      week_number_i++;
+    } else if (new_month > month) {
+      week_number_i--;
+    } else {
+      loop_end = false;
+    }
+  }
+  //condition to ensure we are not in the previous month
+  let condition1 = moment([year, month]).day(week_day + week_number_i * 7 - 7 * week_number_i).month() !== month;
+
+  //condition to ensure we are still in the specified month
+  let condition2 = week_number > 0 && (week_number < 5 && moment([year, month]).day(week_day + (week_number_i + 1) * 7).month()) === month;
+  if (condition1 && condition2) {
+    // if (moment([ year, month ]).day(week_day + week_number_i * 7 - 7 * week_number_i).month() !== month && (week_number > 0 && week_number < 5)) {
+    week_number_i++;
+  }
+  return moment([year, month]).day(week_day + week_number_i * 7);
+};
+
+//Makes it possible to store 'may' or 4 in the database and still return the proper month,week etc...
+export const returnLiteralString = (object, item) => {
+  //verify if object/month,weekdays etc is a string or int, so that i can support both example 'may' or 4=may
+  //get the literal string for the object/month,weekdays etc based on the zero based object/month,weekdays etc position 0=jan, 1=feb etc..
+  try {
+    if (parseInt(item, 10) || item === 0) {
+      item = Object.keys(object).find((m, idx) => idx === item);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+  return item;
+};
+
+//Makes it possible to store 'may' or 4 in the database and still return the proper month,week index value etc...
+export const returnIndexPosition = (object, item) => {
+  //verify if object/month,weekdays etc is a string or int, so that i can support both example 'may' or 4=may
+  //get the index position for the object/month,weekdays etc based on the zero based object/month,weekdays etc position 0=jan, 1=feb etc..
+  try {
+    if (parseInt(item, 10) || item === 0) {
+      //nothing to convert we already have the number index
+    } else {
+      //get the index position of the string literal
+      item = object[item];
+      // item = Object.keys(object).find((m, idx) => m === item);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+  return item;
+};
+
+/**
+ * Returns the seasonal date object to use based on the year provided
+ */
+const getWorkingSeasonalObject = (year, seasonal_object) => {
+  //get the date object based on the requested year
+  let seasonal_object_working = seasonal_object.find(so => Number(so.seasonal_year) === Number(year));
+
+  //If no results returned then get the default date object and use it's parameters
+  if (!seasonal_object_working) {
+    seasonal_object_working = seasonal_object.find(so => Number(so.is_default) === 1);
+  }
+  return seasonal_object_working;
+};
+
+/**
+ * Returns the week in a nice sorted array example [first,second....] so the index position relates to the week etc...
+ * Returns the months in a nice sorted array example [january,february....] so the index position relates to the month etc...
+ * Returns the weekdays in a nice sorted array example [monday,tuesday....] so the index position relates to the weekdays etc...
+ *
+ * @returns
+ */
+export const sortedArray = array_months_weekdays_weekdays => {
+  let new_object = [];
+  let sorted = Object.keys(array_months_weekdays_weekdays).sort(function (a, b) {
+    return a.value - b.value;
+  });
+
+  // eslint-disable-next-line no-unused-vars
+  for (const [key, value] of Object.entries(sorted)) {
+    // console.log(`${key}: ${value}`);
+    new_object = [...new_object, value];
+  }
+  return new_object;
+};
+
+// Month here is 1-indexed (January is 1, February is 2, etc). This is
+// because we're using 0 as the day so that it returns the last day
+// of the last month, so you have to add 1 to the month number 
+// so it returns the correct amount of days
+//!Converting months to base zero (+1) the month since i'm used to using base zero
+export const daysInMonth = (year, month) => {
+  // console.log('123 month: ', month, ' days: ', Number(new Date(year, month+1, 0).getDate())+1, ' date: ',new Date(year, month+1, 0))
+  return Number(new Date(year, month + 1, 0).getDate()) + 1;
+};

package/dist/components/Buttons/CustomFab/index.js

@@ -7,45 +7,34 @@ import clsx from 'clsx';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { ThemeProvider } from '@mui/system';
 import { createTheme, useTheme } from '@mui/material/styles';
-
 const getSize = size => {
   switch (size) {
     case 'x-small':
       return 28;
-
     case 'small':
       return 40;
-
     case 'medium':
       return 48;
-
     case 'large':
       return 56;
-
     default:
       return 56;
   }
 };
-
 const getPadding = size => {
   switch (size) {
     case 'x-small':
       return '0px 8px 0px 8px';
-
     case 'small':
       return '0px 16px 0px 16px';
-
     case 'medium':
       return '0px 16px 0px 16px';
-
     case 'large':
       return '0px 16px 0px 16px';
-
     default:
       return '0px 16px 0px 16px';
   }
 };
-
 const useStyles = makeStyles(() => ({
   rootFabElement: {
     margin: 2,
@@ -173,54 +162,38 @@ CustomFab.defaultProps = {
 CustomFab.propTypes = {
   /** onClick function passed to the button */
   onClick: PropTypes.object,
-
   /** Icon to be used in the button */
   Icon: PropTypes.element,
-
   /** Controls the size of the icon in pixels */
   iconSize: PropTypes.number,
-
   /** Controls the border radius of the button's rounded ends */
   borderRadius: PropTypes.number,
-
   /** Text inside of the button */
   buttonText: PropTypes.string,
   //** Font size of the button text */
   buttonFontSize: PropTypes.number,
-
   /** Either [circular or extended] if including text */
   variant: PropTypes.oneOf(['extended', 'circular']),
-
   /** Either [left or right] controls the location of the icon*/
   iconLocation: PropTypes.oneOf(['left', 'right']),
-
   /** The text to display in the tooltip */
   tooltipText: PropTypes.string,
-
   /** Display the drop shadow or not [none or undefined] */
   boxShadow: PropTypes.bool,
-
   /** Background color */
   backgroundColor: PropTypes.string,
-
   /** On hover background color. */
   hoverBackgroundColor: PropTypes.string,
-
   /** Font color */
   textColor: PropTypes.string,
-
   /** The color of the text and icon on hover */
   hoverTextColor: PropTypes.string,
-
   /** Size of the FAB icon ['small','medium','large'] */
   size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
-
   /** Classes to override */
   className: PropTypes.string,
-
   /** Theme colors if not using backgroundColor ['primary','secondary'] */
   color: PropTypes.oneOf(['primary', 'secondary']),
-
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
   theme: PropTypes.object
 };

package/dist/components/Buttons/DropdownButton/index.js

@@ -1,13 +1,13 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { ThemeProvider } from '@mui/system';
-import { createTheme, useTheme } from '@mui/material/styles'; // import { CustomFab } from '../CustomFab';
-
+import { createTheme, useTheme } from '@mui/material/styles';
+// import { CustomFab } from '../CustomFab';
 import { ReusablePopupMenu } from '../../Menus/ReusablePopupMenu';
 import Button from '@mui/material/Button';
+
 /**
  * Creates a generic button with a drop down.
  * Uses:
@@ -22,7 +22,6 @@ import Button from '@mui/material/Button';
  
  ```
  */
-
 export const DropdownButton = props => {
   const {
     name,
@@ -63,25 +62,18 @@ DropdownButton.defaultProps = {
 DropdownButton.propTypes = {
   /** Name of the till being used. Note: if till name exist then inUse is true */
   name: PropTypes.string,
-
   /** Classes applied to the button */
   className: PropTypes.string,
-
   /** Type of button to use*/
   variant: PropTypes.oneOf(['text', 'contained', 'outlined']),
-
   /** Color of the button*/
   color: PropTypes.oneOf(['primary', 'secondary']),
-
   /** Menu items for the dropdown, see the ReusablePopupMenu component for a better understanding of the props parameters */
   menuData: PropTypes.array,
-
   /** Supported size of the button ['x-small', 'small','medium'] */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
   theme: PropTypes.object,
-
   /** Controls the location of the dropdown popup menu */
   menuAnchorLocation: PropTypes.oneOf(['left', 'center', 'right'])
 };

package/dist/components/Buttons/HelpButton/index.js

@@ -45,22 +45,17 @@ HelpButton.defaultProps = {
 HelpButton.propTypes = {
   /** On click link, it's the URL to navigate too */
   onClickLink: PropTypes.string.isRequired,
-
   /** className override */
   className: PropTypes.string,
-
   /** Theme color primary or secondary */
   color: PropTypes.oneOf(['primary', 'secondary']),
-
   /** Just a tooltip text */
   tooltipText: PropTypes.string,
-
   /** The size of the Icon in pixel*/
   iconSize: PropTypes.number,
-
   /** The size of the button ['small','medium','large'] */
   size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
-
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
+
   theme: PropTypes.object
 };

package/dist/components/Buttons/ProductItemButton/index.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { ThemeProvider } from '@mui/system';
 import { createTheme, useTheme } from '@mui/material/styles';
 import clsx from 'clsx';
-import Button from '@mui/material/Button'; // import { toFloat_2_decimal } from '../../../tools/string_formatter';
-
+import Button from '@mui/material/Button';
+// import { toFloat_2_decimal } from '../../../tools/string_formatter';
 import IconButton from '@mui/material/IconButton';
-import EditIcon from '@mui/icons-material/Edit'; // import { limitStringLength } from 'app/tools/string_formatter';
+import EditIcon from '@mui/icons-material/Edit';
+// import { limitStringLength } from 'app/tools/string_formatter';
 // import { RiBarcodeLine } from 'react-icons/ri';
-
 import ImageStack from '../../Images/ImageStack';
 import InfoIcon from '@mui/icons-material/Info';
 import Tooltip from '@mui/material/Tooltip';
@@ -125,6 +125,7 @@ const useStyles = makeStyles(theme => ({
     fontSize: 10
   }
 }));
+
 /**
  * ## Importing the component in your project
  * 
@@ -135,7 +136,6 @@ const useStyles = makeStyles(theme => ({
  ```
  * 
  */
-
 export const ProductItemButton = props => {
   const {
     productData,
@@ -160,7 +160,9 @@ export const ProductItemButton = props => {
     hasFooterSection: FooterSection ? true : false
   });
   const compTheme = theme ? theme : useTheme();
-  const defaultTheme = createTheme(compTheme); //---------------------------------------------------
+  const defaultTheme = createTheme(compTheme);
+
+  //---------------------------------------------------
   // Local Component 
   //---------------------------------------------------
 
@@ -172,7 +174,6 @@ export const ProductItemButton = props => {
       fontSize: 14
     }
   }))(Tooltip);
-
   const TierPricing = ({
     price,
     sub_title
@@ -192,7 +193,6 @@ export const ProductItemButton = props => {
       className: clsx(classes.tierPriceSubtitle, '')
     }, String(sub_title).substring(0, 2))))) : /*#__PURE__*/React.createElement(React.Fragment, null));
   };
-
   const toFloat_2_decimal = value => {
     try {
       if (value) {
@@ -201,10 +201,8 @@ export const ProductItemButton = props => {
     } catch (e) {
       console.error(e.message);
     }
-
     return value;
   };
-
   const toFloat_0_decimal = value => {
     try {
       if (value) {
@@ -213,10 +211,8 @@ export const ProductItemButton = props => {
     } catch (e) {
       console.error(e.message);
     }
-
     return value;
   };
-
   return /*#__PURE__*/React.createElement("div", {
     key: `product_list_items_${productData.product_id}`,
     className: clsx(classes.productButtonWrapper, 'flex flex-row')
@@ -343,34 +339,24 @@ ProductItemButton.defaultProps = {
 ProductItemButton.propTypes = {
   /** Displays the edit button  */
   showEdit: PropTypes.bool,
-
   /** Gutter around the button */
   PRODUCT_BUTTON_GUTTER: PropTypes.number,
-
   /** The hight of the button */
   PRODUCT_BUTTON_HEIGHT: PropTypes.number,
-
   /** Length of the small button when we are displaying a unit price */
   PRODUCT_SMALL_BUTTON_WIDTH: PropTypes.number,
-
   /** Product button width use to display a larger button however now it's by default the same length as the small button width */
   PRODUCT_LARGE_BUTTON_WIDTH: PropTypes.number,
-
   /** Any component to display on the footer of the button */
   FooterSection: PropTypes.any,
-
   /** The call back when the edit button is clicked. Returns the productData passed to the button when initialized */
   onEditClick: PropTypes.any,
-
   /** The onclick callback when the button is clicked. Returns the productData passed to the button when initialized */
   onClick: PropTypes.any,
-
   /** This is the product object */
   productData: PropTypes.any,
-
   /** The i18next needs to be passed in by the component or else they will be blank */
   i18next: PropTypes.any,
-
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
   theme: PropTypes.object
 };

package/dist/components/Buttons/TillButton/index.js

@@ -1,13 +1,13 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; // import { ThemeProvider } from '@mui/system';
-
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+// import { ThemeProvider } from '@mui/system';
 import { createTheme, useTheme } from '@mui/material/styles';
 import { ReusablePopupMenu } from '../../Menus/ReusablePopupMenu';
 import Button from '@mui/material/Button';
 import i18next from 'i18next';
+
 /**
  * Creates a till button from other PCM components to simplify the component.
  * Uses:
@@ -25,7 +25,6 @@ import i18next from 'i18next';
  ```
  * 
  */
-
 export const TillButton = props => {
   const {
     inUse,
@@ -61,22 +60,16 @@ TillButton.defaultProps = {
 TillButton.propTypes = {
   /** Determines if a till is currently being used */
   inUse: PropTypes.bool,
-
   /** Name of the till being used. Note: if till name exist then inUse is true */
   name: PropTypes.string,
-
   /** Text used to identify the string in front of the till name. example: Till : Some name */
   defaultText: PropTypes.string,
-
   /** Menu items for the dropdown, see the ReusablePopupMenu component for a better understanding of the props parameters */
   menuData: PropTypes.object,
-
   /** Classes applied to the button */
   className: PropTypes.string,
-
   /** Supported size of the button ['x-small', 'small','medium'] */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
   theme: PropTypes.object
 };

package/dist/components/Date/DateRangeCalendar/index.js

@@ -4,6 +4,7 @@ import { orange } from '@mui/material/colors';
 import { DateRangeInput } from '@datepicker-react/styled';
 import { ThemeProvider } from 'styled-components';
 import './css/style.css';
+
 /**
  * example with styling https://codesandbox.io/s/react-date-picker-rangeinput-jw726?from-embed=&file=/src/index.js:2503-2537 
  * 
@@ -14,7 +15,6 @@ import './css/style.css';
  ```
  *
  */
-
 export const DateRangeCalendar = props => {
   const {
     minBookingDate,
@@ -33,13 +33,11 @@ export const DateRangeCalendar = props => {
     zIndex,
     i18next
   } = props;
-
   const handleOnDayRender = date => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, onDayRender ? /*#__PURE__*/React.createElement(React.Fragment, null, onDayRender(date)) : /*#__PURE__*/React.createElement("span", {
       className: ""
     }, new Date(date).getDate()));
   };
-
   const handleIsDateBlocked = date => {
     try {
       if (typeof isDateBlocked === 'function') {
@@ -48,10 +46,8 @@ export const DateRangeCalendar = props => {
     } catch (error) {
       console.error(error);
     }
-
     return false;
   };
-
   const handleOnDatesChange = data => {
     try {
       if (typeof onDatesChange === 'function') {
@@ -61,7 +57,6 @@ export const DateRangeCalendar = props => {
       console.error(error);
     }
   };
-
   const handleOnFocusChange = data => {
     try {
       if (typeof onFocusChange === 'function') {
@@ -71,7 +66,6 @@ export const DateRangeCalendar = props => {
       console.error(error);
     }
   };
-
   return /*#__PURE__*/React.createElement("div", {
     className: `m-auto pt-12 md:pt-0 ${variant === 'standard' ? 'bottom_border' : undefined}`,
     style: {
@@ -152,46 +146,32 @@ DateRangeCalendar.defaultProps = {
 DateRangeCalendar.propTypes = {
   /** Used to provide the minimum booking date.  To allow date selection past todays date simply pas it an old past date example 'new Date('1999-10-02')' */
   minBookingDate: PropTypes.instanceOf(Date),
-
   /** Number of calendar months to display.*/
   numberOfMonthsVisible: PropTypes.number,
-
   /** Date format to use when displaying the selected dates in the text boxes.*/
   dateFormat: PropTypes.string,
-
   /** Min booking days allowing the user to select a valid date range.*/
   minBookingDays: PropTypes.number,
-
   /** Provides a (date:date) props to the function and expects a React.ReactNode component to be returned */
   onDayRender: PropTypes.func,
-
   /** Provides a (date:date) props to the function and expects a boolean value returned which tells the calendar to either block or not that day*/
   isDateBlocked: PropTypes.func,
-
   /** Provides a (data) props to the function and doesn't expect any return value*/
   onDatesChange: PropTypes.func,
-
   /** Provides a instance of focusedInput ('START_DATE','END_DATE',null) prop to the function and doesn't expect any return value*/
   onFocusChange: PropTypes.func,
-
   /** The stat date of the calendar */
   startDate: PropTypes.instanceOf(Date),
-
   /** The end date of the calendar */
   endDate: PropTypes.instanceOf(Date),
-
   /** Determines on which input the calendar will be focused on.  Null = nothing meaning the calendar should be closed if null*/
   focusedInput: PropTypes.oneOf(['startDate', 'endDate', null]),
-
   /** Controls the type of border to display around the date input boxes*/
   variant: PropTypes.oneOf(['outlined', 'standard', 'none']),
-
   /** Controls the orientation of the calendar */
   vertical: PropTypes.bool,
-
   /** Controls the z-index of the calendar dropdown date selection */
   zIndex: PropTypes.number,
-
   /** i18next localization to use for the component. Don't use the library localization or else it won't load properly on the consuming application */
   i18next: PropTypes.any
 };