Merge pull request #135 from lfester/ImproveCalendar

Fix propTypes, README and crash

Author: JonasGossens

src/react-chayns-calendar/README.md

@@ -26,7 +26,7 @@ The component got the following properties:
 | Property   | Description                                                                                        | Type   | Default | Required
 |------------|-----------------------------------------------------------------------------------------------------|--------|-------|------|
 | startDate | The *startDate* defines the first month which can be displayed.    | date |      | |
-| endDate | The *end* defines the last month which can be displayed.             | bool |      | |
+| endDate | The *end* defines the last month which can be displayed.             | date |      | |
 | selected | The current selected date   | date | today | |
 | activated | If activateAll is false this array defines the activated dates | array of date | |
 | highlighted | This is an array of special, highlighted dates | array of object | |

src/react-chayns-calendar/component/Calendar.jsx

@@ -22,9 +22,9 @@ function getMonthNames(language = chayns.env.language) {
 
 export default class Calendar extends Component {
     static propTypes = {
-        startDate: PropTypes.instanceOf(Date).isRequired,
-        endDate: PropTypes.instanceOf(Date).isRequired,
-        onDateSelect: PropTypes.func.isRequired,
+        startDate: PropTypes.instanceOf(Date),
+        endDate: PropTypes.instanceOf(Date),
+        onDateSelect: PropTypes.func,
         selected: PropTypes.instanceOf(Date),
         activated: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
         highlighted: PropTypes.oneOfType([
@@ -44,6 +44,9 @@ export default class Calendar extends Component {
 
     static defaultProps = {
         selected: TODAY,
+        startDate: null,
+        endDate: null,
+        onDateSelect: null,
         activateAll: true,
         activated: null,
         highlighted: null,
@@ -299,7 +302,7 @@ export default class Calendar extends Component {
                             });
                         }
                     }
-                } else {
+                } else if (_highlighted) {
                     tempDates.push({
                         dates: _highlighted.dates,
                         style: _highlighted.style,

src/react-chayns-calendar/component/DayItem.jsx

@@ -9,8 +9,8 @@ class DayItem extends PureComponent {
     static propTypes = {
         date: PropTypes.instanceOf(Date).isRequired,
         inMonth: PropTypes.bool.isRequired,
-        onDateSelect: PropTypes.func.isRequired,
-        activateAll: PropTypes.func,
+        onDateSelect: PropTypes.func,
+        activateAll: PropTypes.bool,
         selected: PropTypes.instanceOf(Date),
         activated: PropTypes.bool,
         highlighted: PropTypes.bool,
@@ -23,6 +23,7 @@ class DayItem extends PureComponent {
         highlighted: false,
         activateAll: null,
         highlightStyle: null,
+        onDateSelect: null,
     };
 
     constructor(props) {

src/react-chayns-calendar/component/Month.jsx

@@ -33,22 +33,40 @@ const Month = ({
 Month.propTypes = {
     title: PropTypes.string,
     className: PropTypes.string,
-    onDateSelect: PropTypes.func.isRequired,
-    activateAll: PropTypes.func,
-    startDate: PropTypes.instanceOf(Date).isRequired,
-    endDate: PropTypes.instanceOf(Date).isRequired,
+    onDateSelect: PropTypes.func,
+    activateAll: PropTypes.bool,
+    startDate: PropTypes.instanceOf(Date),
+    endDate: PropTypes.instanceOf(Date),
     selected: PropTypes.instanceOf(Date),
-    activated: PropTypes.bool,
-    highlighted: PropTypes.bool,
+    activated: PropTypes.arrayOf(Date),
+    highlighted: PropTypes.oneOfType([
+        PropTypes.shape({
+            dates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
+            style: PropTypes.shape({
+                color: PropTypes.string,
+                backgroundColor: PropTypes.string,
+            }),
+        }),
+        PropTypes.arrayOf(PropTypes.shape({
+            dates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
+            style: PropTypes.shape({
+                color: PropTypes.string,
+                backgroundColor: PropTypes.string,
+            }),
+        })),
+    ]),
 };
 
 Month.defaultProps = {
     title: '',
     className: '',
     selected: null,
-    activated: false,
+    activated: null,
+    startDate: null,
+    endDate: null,
     highlighted: false,
-    activateAll: null,
+    activateAll: true,
+    onDateSelect: null,
 };
 
 export default Month;

src/react-chayns-calendar/component/MonthTable.jsx

@@ -16,19 +16,24 @@ function getDayNames(language = chayns.env.language) {
 
 export default class MonthTable extends PureComponent {
     static propTypes = {
-        onDateSelect: PropTypes.func.isRequired,
-        activateAll: PropTypes.func,
-        startDate: PropTypes.instanceOf(Date).isRequired,
+        onDateSelect: PropTypes.func,
+        activateAll: PropTypes.bool,
+        startDate: PropTypes.instanceOf(Date),
         selected: PropTypes.instanceOf(Date),
-        activated: PropTypes.bool,
-        highlighted: PropTypes.bool,
+        activated: PropTypes.arrayOf(Date),
+        highlighted: PropTypes.arrayOf(PropTypes.shape({
+            dates: PropTypes.arrayOf(Date).isRequired,
+            style: PropTypes.object,
+        })),
     };
 
     static defaultProps = {
         selected: null,
-        activated: false,
-        highlighted: false,
-        activateAll: null,
+        activated: null,
+        highlighted: null,
+        startDate: null,
+        activateAll: true,
+        onDateSelect: null,
     };
 
     static isActivated(activated, date) {