@aarhus-university/au-lib-react-components 9.18.0 → 9.18.2

package/src/components/AUCalendarComponent.js

@@ -1,393 +1,393 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const months = ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'];
-const dayTitles = ['Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør', 'Søn'];
-
-/**
- * AU Kalender Komponent
- *
- * Eksempel:
- * ```jsx
- *  <AUCalendarComponent />
- * ```
- */
-
-class AUCalendarComponent extends React.Component {
-  static daysInMonth(year, month) {
-    return new Date(year, month, 0).getDate();
-    // Month er 0-index, så det, man returnerer, er reelt sidste dag i foregående måned:
-    // Fx er juni = 5, så første dag i måned 5 er 1. juni, mens 0. dag i måned 5 er 31. maj.
-  }
-
-  static calcEaster(year) {
-    const a = year % 19;
-    const b = Math.floor(year / 100);
-    const c = year % 100;
-    const d = Math.floor(b / 4);
-    const e = b % 4;
-    const f = Math.floor((b + 8) / 25);
-    const g = Math.floor((b - f + 1) / 3);
-    const h = (19 * a + b - d - g + 15) % 30;
-    const i = Math.floor(c / 4);
-    const k = c % 4;
-    const l = (32 + 2 * e + 2 * i - h - k) % 7;
-    const m = Math.floor((a + 11 * h + 22 * l) / 451);
-    const n0 = (h + l + 7 * m + 114);
-    const n = Math.floor(n0 / 31) - 1;
-    const p = (n0 % 31) + 1;
-    const date = new Date(year, n, p);
-    return date;
-  }
-
-  static addDays(days, date) {
-    return new Date(date.getTime() + days * 60 * 24 * 60000);
-  }
-
-  static isHoliday(date) {
-    const year = date.getFullYear();
-    const holidays = [];
-    const newYear = new Date(year, 0, 1);
-    holidays.push(newYear);
-    const easter = AUCalendarComponent.calcEaster(year);
-    holidays.push(easter);
-    const easterThu = AUCalendarComponent.addDays(-3, easter);
-    holidays.push(easterThu);
-    const easterFri = AUCalendarComponent.addDays(-2, easter);
-    holidays.push(easterFri);
-    const easter2 = AUCalendarComponent.addDays(1, easter);
-    holidays.push(easter2);
-    const stBededag = AUCalendarComponent.addDays(26, easter);
-    holidays.push(stBededag);
-    const kristiHf = AUCalendarComponent.addDays(39, easter);
-    holidays.push(kristiHf);
-    const whitsun = AUCalendarComponent.addDays(49, easter);
-    holidays.push(whitsun);
-    const whitsun2 = AUCalendarComponent.addDays(1, whitsun);
-    holidays.push(whitsun2);
-    const grundlov = new Date(year, 5, 5);
-    holidays.push(grundlov);
-    const christmas = new Date(year, 11, 25);
-    holidays.push(christmas);
-    const christmas2 = AUCalendarComponent.addDays(1, christmas);
-    holidays.push(christmas2);
-
-    return holidays.map((h) => h.toString()).find((x) => x === date.toString());
-  }
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      day: props.day,
-      month: props.month,
-      year: props.year,
-      hour: props.hour,
-      minute: props.minute,
-      selected: props.selected,
-    };
-
-    this.skipDays = [6, 0, 1, 2, 3, 4, 5];
-    this.goBack = this.goBack.bind(this);
-    this.goForward = this.goForward.bind(this);
-  }
-
-  goBack() {
-    const { month, year } = this.state;
-    const newMonth = month - 1 < 1 ? 12 : (month - 1);
-    const newYear = newMonth === 12 ? (year - 1) : year;
-    this.setState({
-      month: newMonth,
-      year: newYear,
-    });
-  }
-
-  goForward() {
-    const { month, year } = this.state;
-    const newMonth = month + 1 > 12 ? 1 : (month + 1);
-    const newYear = newMonth === 1 ? (year + 1) : year;
-    this.setState({
-      month: newMonth,
-      year: newYear,
-    });
-  }
-
-  render() {
-    const {
-      day,
-      month,
-      year,
-      hour,
-      minute,
-      selected,
-    } = this.state;
-    const {
-      onSelected,
-      highlightWeekend,
-      highlightHolidays,
-      yearSpan,
-      minuteInterval,
-      showTime,
-    } = this.props;
-
-    const renderMonths = months.map(
-      (m, i) => (
-        <option key={m} value={i + 1}>
-          {m}
-        </option>
-      ),
-    );
-
-    const yearArr = [];
-    for (let y = year - yearSpan; y <= year + yearSpan; y += 1) {
-      yearArr.push(y);
-    }
-
-    const renderYears = yearArr.map(
-      (y) => (
-        <option key={y}>
-          {y}
-        </option>
-      ),
-    );
-
-    const renderWeekDays = dayTitles.map(
-      (w) => (
-        <span key={w}>
-          {w}
-        </span>
-      ),
-    );
-
-    const firstDayInMonth = new Date(year, month - 1, 1);
-    const emptyDays = this.skipDays[firstDayInMonth.getDay()];
-    const prevYear = month === 1 ? year - 1 : year;
-    const prevMonth = month === 1 ? 12 : month - 1;
-    const numberOfDaysInPrevMonth = AUCalendarComponent.daysInMonth(
-      prevYear, prevMonth,
-    );
-
-    let rowCount = -1;
-    const renderEmptyDaysBefore = Array(emptyDays).fill().map((e, i) => {
-      rowCount = i;
-      const beforeDay = numberOfDaysInPrevMonth - emptyDays + i + 1;
-      const isWeekend = (highlightWeekend && rowCount > 4)
-        || (highlightHolidays
-          && AUCalendarComponent.isHoliday(new Date(prevYear, prevMonth - 1, beforeDay)));
-      return (
-        <button
-          type="button"
-          key={rowCount}
-          className={isWeekend ? 'weekend empty' : 'empty'}
-          onClick={() => {
-            this.goBack();
-          }}
-        >
-          {beforeDay}
-        </button>
-      );
-    });
-
-    const renderDays = Array(AUCalendarComponent.daysInMonth(year, month)).fill().map((d, i) => {
-      const key = i; // suck it
-      if (rowCount === 6) {
-        rowCount = 0;
-      } else {
-        rowCount += 1;
-      }
-      const newDay = i + 1;
-      const isSelected = (
-        newDay === selected.getDate()
-        && year === selected.getFullYear()
-        && month === selected.getMonth() + 1
-      );
-      const isWeekend = (highlightWeekend && rowCount > 4)
-        || (highlightHolidays && AUCalendarComponent.isHoliday(new Date(year, month - 1, newDay)));
-      let className = '';
-      if (isSelected) {
-        className = 'selected';
-      }
-      if (isWeekend) {
-        className += `${isSelected ? ' ' : ''}weekend`;
-      }
-      return (
-        <button
-          key={key}
-          type="button"
-          className={isWeekend || isSelected ? className : null}
-          onClick={() => {
-            const newSelected = new Date(year, month - 1, newDay, hour, minute);
-            this.setState({
-              day: newDay,
-              selected: newSelected,
-            }, () => {
-              onSelected(newSelected);
-            });
-          }}
-        >
-          {i + 1}
-        </button>
-      );
-    });
-
-    const nextYear = month === 12 ? (year + 1) : year;
-    const nextMonth = month === 12 ? 1 : (month + 1);
-    const renderEmptyDaysAfter = Array(6 - rowCount).fill().map((e, i) => {
-      const key = i;
-      const afterDay = i + 1;
-      if (rowCount === 6) {
-        rowCount = 0;
-      } else {
-        rowCount += 1;
-      }
-      const isWeekend = (highlightWeekend && rowCount > 4)
-        || (highlightHolidays
-          && AUCalendarComponent.isHoliday(new Date(nextYear, nextMonth - 1, afterDay)));
-      return (
-        <button
-          type="button"
-          key={key}
-          className={isWeekend ? 'weekend empty' : 'empty'}
-          onClick={() => {
-            this.goForward();
-          }}
-        >
-          {afterDay}
-        </button>
-      );
-    });
-
-    const renderHours = Array(24).fill().map((h, i) => {
-      const key = i;
-      const optHour = i < 10 ? `0${i}` : i;
-      return (
-        <option key={key} value={i}>
-          {optHour}
-        </option>
-      );
-    });
-
-    const renderMinutes = Array(60).fill().map((h, i) => {
-      const key = i;
-      if (i % minuteInterval === 0) {
-        const optMinute = i < 10 ? `0${i}` : i;
-        return (
-          <option key={key} value={i}>
-            {optMinute}
-          </option>
-        );
-      }
-      return null;
-    });
-
-    return (
-      <div className="au-calendar">
-        <div className="au-calendar-year-month">
-          <select
-            value={month}
-            onChange={(e) => {
-              const newMonth = parseInt(e.target.value, 10);
-              const newSelected = new Date(year, newMonth - 1, day, hour, minute);
-              this.setState({
-                month: newMonth,
-                selected: newSelected,
-              }, () => {
-                onSelected(newSelected);
-              });
-            }}
-          >
-            {renderMonths}
-          </select>
-          <select
-            value={year}
-            onChange={(e) => {
-              const newYear = parseInt(e.target.value, 10);
-              const newSelected = new Date(newYear, month - 1, day, hour, minute);
-              this.setState({
-                year: newYear,
-                selected: newSelected,
-              }, () => {
-                onSelected(newSelected);
-              });
-            }}
-          >
-            {renderYears}
-          </select>
-        </div>
-        <div className="au-calendar-days">
-          {renderWeekDays}
-          {renderEmptyDaysBefore}
-          {renderDays}
-          {renderEmptyDaysAfter}
-        </div>
-        {(() => {
-          if (showTime) {
-            return (
-              <div className="au-calendar-time">
-                <select
-                  value={hour}
-                  onChange={(e) => {
-                    const newHour = parseInt(e.target.value, 10);
-                    const newSelected = new Date(year, month - 1, day, newHour, minute);
-                    this.setState({
-                      hour: newHour,
-                      selected: newSelected,
-                    }, () => {
-                      onSelected(newSelected);
-                    });
-                  }}
-                >
-                  {renderHours}
-                </select>
-                <select
-                  value={minute}
-                  onChange={(e) => {
-                    const newMinute = parseInt(e.target.value, 10);
-                    const newSelected = new Date(year, month - 1, day, hour, newMinute);
-                    this.setState({
-                      minute: parseInt(e.target.value, 10),
-                      selected: newSelected,
-                    }, () => {
-                      onSelected(newSelected);
-                    });
-                  }}
-                >
-                  {renderMinutes}
-                </select>
-              </div>
-            );
-          }
-          return null;
-        })()}
-      </div>
-    );
-  }
-}
-
-AUCalendarComponent.defaultProps = {
-  selected: new Date(),
-  onSelected: () => { },
-  highlightWeekend: true,
-  highlightHolidays: true,
-  yearSpan: 5,
-  minuteInterval: 5,
-  showTime: true,
-};
-
-AUCalendarComponent.propTypes = {
-  selected: PropTypes.instanceOf(Date),
-  day: PropTypes.number.isRequired,
-  month: PropTypes.number.isRequired,
-  year: PropTypes.number.isRequired,
-  hour: PropTypes.number.isRequired,
-  minute: PropTypes.number.isRequired,
-  highlightWeekend: PropTypes.bool,
-  highlightHolidays: PropTypes.bool,
-  onSelected: PropTypes.func,
-  yearSpan: PropTypes.number,
-  minuteInterval: PropTypes.number,
-  showTime: PropTypes.bool,
-};
-
-AUCalendarComponent.displayName = 'AUCalendarComponent';
-export default AUCalendarComponent;
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const months = ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'];
+const dayTitles = ['Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør', 'Søn'];
+
+/**
+ * AU Kalender Komponent
+ *
+ * Eksempel:
+ * ```jsx
+ *  <AUCalendarComponent />
+ * ```
+ */
+
+class AUCalendarComponent extends React.Component {
+  static daysInMonth(year, month) {
+    return new Date(year, month, 0).getDate();
+    // Month er 0-index, så det, man returnerer, er reelt sidste dag i foregående måned:
+    // Fx er juni = 5, så første dag i måned 5 er 1. juni, mens 0. dag i måned 5 er 31. maj.
+  }
+
+  static calcEaster(year) {
+    const a = year % 19;
+    const b = Math.floor(year / 100);
+    const c = year % 100;
+    const d = Math.floor(b / 4);
+    const e = b % 4;
+    const f = Math.floor((b + 8) / 25);
+    const g = Math.floor((b - f + 1) / 3);
+    const h = (19 * a + b - d - g + 15) % 30;
+    const i = Math.floor(c / 4);
+    const k = c % 4;
+    const l = (32 + 2 * e + 2 * i - h - k) % 7;
+    const m = Math.floor((a + 11 * h + 22 * l) / 451);
+    const n0 = (h + l + 7 * m + 114);
+    const n = Math.floor(n0 / 31) - 1;
+    const p = (n0 % 31) + 1;
+    const date = new Date(year, n, p);
+    return date;
+  }
+
+  static addDays(days, date) {
+    return new Date(date.getTime() + days * 60 * 24 * 60000);
+  }
+
+  static isHoliday(date) {
+    const year = date.getFullYear();
+    const holidays = [];
+    const newYear = new Date(year, 0, 1);
+    holidays.push(newYear);
+    const easter = AUCalendarComponent.calcEaster(year);
+    holidays.push(easter);
+    const easterThu = AUCalendarComponent.addDays(-3, easter);
+    holidays.push(easterThu);
+    const easterFri = AUCalendarComponent.addDays(-2, easter);
+    holidays.push(easterFri);
+    const easter2 = AUCalendarComponent.addDays(1, easter);
+    holidays.push(easter2);
+    const stBededag = AUCalendarComponent.addDays(26, easter);
+    holidays.push(stBededag);
+    const kristiHf = AUCalendarComponent.addDays(39, easter);
+    holidays.push(kristiHf);
+    const whitsun = AUCalendarComponent.addDays(49, easter);
+    holidays.push(whitsun);
+    const whitsun2 = AUCalendarComponent.addDays(1, whitsun);
+    holidays.push(whitsun2);
+    const grundlov = new Date(year, 5, 5);
+    holidays.push(grundlov);
+    const christmas = new Date(year, 11, 25);
+    holidays.push(christmas);
+    const christmas2 = AUCalendarComponent.addDays(1, christmas);
+    holidays.push(christmas2);
+
+    return holidays.map((h) => h.toString()).find((x) => x === date.toString());
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      day: props.day,
+      month: props.month,
+      year: props.year,
+      hour: props.hour,
+      minute: props.minute,
+      selected: props.selected,
+    };
+
+    this.skipDays = [6, 0, 1, 2, 3, 4, 5];
+    this.goBack = this.goBack.bind(this);
+    this.goForward = this.goForward.bind(this);
+  }
+
+  goBack() {
+    const { month, year } = this.state;
+    const newMonth = month - 1 < 1 ? 12 : (month - 1);
+    const newYear = newMonth === 12 ? (year - 1) : year;
+    this.setState({
+      month: newMonth,
+      year: newYear,
+    });
+  }
+
+  goForward() {
+    const { month, year } = this.state;
+    const newMonth = month + 1 > 12 ? 1 : (month + 1);
+    const newYear = newMonth === 1 ? (year + 1) : year;
+    this.setState({
+      month: newMonth,
+      year: newYear,
+    });
+  }
+
+  render() {
+    const {
+      day,
+      month,
+      year,
+      hour,
+      minute,
+      selected,
+    } = this.state;
+    const {
+      onSelected,
+      highlightWeekend,
+      highlightHolidays,
+      yearSpan,
+      minuteInterval,
+      showTime,
+    } = this.props;
+
+    const renderMonths = months.map(
+      (m, i) => (
+        <option key={m} value={i + 1}>
+          {m}
+        </option>
+      ),
+    );
+
+    const yearArr = [];
+    for (let y = year - yearSpan; y <= year + yearSpan; y += 1) {
+      yearArr.push(y);
+    }
+
+    const renderYears = yearArr.map(
+      (y) => (
+        <option key={y}>
+          {y}
+        </option>
+      ),
+    );
+
+    const renderWeekDays = dayTitles.map(
+      (w) => (
+        <span key={w}>
+          {w}
+        </span>
+      ),
+    );
+
+    const firstDayInMonth = new Date(year, month - 1, 1);
+    const emptyDays = this.skipDays[firstDayInMonth.getDay()];
+    const prevYear = month === 1 ? year - 1 : year;
+    const prevMonth = month === 1 ? 12 : month - 1;
+    const numberOfDaysInPrevMonth = AUCalendarComponent.daysInMonth(
+      prevYear, prevMonth,
+    );
+
+    let rowCount = -1;
+    const renderEmptyDaysBefore = Array(emptyDays).fill().map((e, i) => {
+      rowCount = i;
+      const beforeDay = numberOfDaysInPrevMonth - emptyDays + i + 1;
+      const isWeekend = (highlightWeekend && rowCount > 4)
+        || (highlightHolidays
+          && AUCalendarComponent.isHoliday(new Date(prevYear, prevMonth - 1, beforeDay)));
+      return (
+        <button
+          type="button"
+          key={rowCount}
+          className={isWeekend ? 'weekend empty' : 'empty'}
+          onClick={() => {
+            this.goBack();
+          }}
+        >
+          {beforeDay}
+        </button>
+      );
+    });
+
+    const renderDays = Array(AUCalendarComponent.daysInMonth(year, month)).fill().map((d, i) => {
+      const key = i; // suck it
+      if (rowCount === 6) {
+        rowCount = 0;
+      } else {
+        rowCount += 1;
+      }
+      const newDay = i + 1;
+      const isSelected = (
+        newDay === selected.getDate()
+        && year === selected.getFullYear()
+        && month === selected.getMonth() + 1
+      );
+      const isWeekend = (highlightWeekend && rowCount > 4)
+        || (highlightHolidays && AUCalendarComponent.isHoliday(new Date(year, month - 1, newDay)));
+      let className = '';
+      if (isSelected) {
+        className = 'selected';
+      }
+      if (isWeekend) {
+        className += `${isSelected ? ' ' : ''}weekend`;
+      }
+      return (
+        <button
+          key={key}
+          type="button"
+          className={isWeekend || isSelected ? className : null}
+          onClick={() => {
+            const newSelected = new Date(year, month - 1, newDay, hour, minute);
+            this.setState({
+              day: newDay,
+              selected: newSelected,
+            }, () => {
+              onSelected(newSelected);
+            });
+          }}
+        >
+          {i + 1}
+        </button>
+      );
+    });
+
+    const nextYear = month === 12 ? (year + 1) : year;
+    const nextMonth = month === 12 ? 1 : (month + 1);
+    const renderEmptyDaysAfter = Array(6 - rowCount).fill().map((e, i) => {
+      const key = i;
+      const afterDay = i + 1;
+      if (rowCount === 6) {
+        rowCount = 0;
+      } else {
+        rowCount += 1;
+      }
+      const isWeekend = (highlightWeekend && rowCount > 4)
+        || (highlightHolidays
+          && AUCalendarComponent.isHoliday(new Date(nextYear, nextMonth - 1, afterDay)));
+      return (
+        <button
+          type="button"
+          key={key}
+          className={isWeekend ? 'weekend empty' : 'empty'}
+          onClick={() => {
+            this.goForward();
+          }}
+        >
+          {afterDay}
+        </button>
+      );
+    });
+
+    const renderHours = Array(24).fill().map((h, i) => {
+      const key = i;
+      const optHour = i < 10 ? `0${i}` : i;
+      return (
+        <option key={key} value={i}>
+          {optHour}
+        </option>
+      );
+    });
+
+    const renderMinutes = Array(60).fill().map((h, i) => {
+      const key = i;
+      if (i % minuteInterval === 0) {
+        const optMinute = i < 10 ? `0${i}` : i;
+        return (
+          <option key={key} value={i}>
+            {optMinute}
+          </option>
+        );
+      }
+      return null;
+    });
+
+    return (
+      <div className="au-calendar">
+        <div className="au-calendar-year-month">
+          <select
+            value={month}
+            onChange={(e) => {
+              const newMonth = parseInt(e.target.value, 10);
+              const newSelected = new Date(year, newMonth - 1, day, hour, minute);
+              this.setState({
+                month: newMonth,
+                selected: newSelected,
+              }, () => {
+                onSelected(newSelected);
+              });
+            }}
+          >
+            {renderMonths}
+          </select>
+          <select
+            value={year}
+            onChange={(e) => {
+              const newYear = parseInt(e.target.value, 10);
+              const newSelected = new Date(newYear, month - 1, day, hour, minute);
+              this.setState({
+                year: newYear,
+                selected: newSelected,
+              }, () => {
+                onSelected(newSelected);
+              });
+            }}
+          >
+            {renderYears}
+          </select>
+        </div>
+        <div className="au-calendar-days">
+          {renderWeekDays}
+          {renderEmptyDaysBefore}
+          {renderDays}
+          {renderEmptyDaysAfter}
+        </div>
+        {(() => {
+          if (showTime) {
+            return (
+              <div className="au-calendar-time">
+                <select
+                  value={hour}
+                  onChange={(e) => {
+                    const newHour = parseInt(e.target.value, 10);
+                    const newSelected = new Date(year, month - 1, day, newHour, minute);
+                    this.setState({
+                      hour: newHour,
+                      selected: newSelected,
+                    }, () => {
+                      onSelected(newSelected);
+                    });
+                  }}
+                >
+                  {renderHours}
+                </select>
+                <select
+                  value={minute}
+                  onChange={(e) => {
+                    const newMinute = parseInt(e.target.value, 10);
+                    const newSelected = new Date(year, month - 1, day, hour, newMinute);
+                    this.setState({
+                      minute: parseInt(e.target.value, 10),
+                      selected: newSelected,
+                    }, () => {
+                      onSelected(newSelected);
+                    });
+                  }}
+                >
+                  {renderMinutes}
+                </select>
+              </div>
+            );
+          }
+          return null;
+        })()}
+      </div>
+    );
+  }
+}
+
+AUCalendarComponent.defaultProps = {
+  selected: new Date(),
+  onSelected: () => { },
+  highlightWeekend: true,
+  highlightHolidays: true,
+  yearSpan: 5,
+  minuteInterval: 5,
+  showTime: true,
+};
+
+AUCalendarComponent.propTypes = {
+  selected: PropTypes.instanceOf(Date),
+  day: PropTypes.number.isRequired,
+  month: PropTypes.number.isRequired,
+  year: PropTypes.number.isRequired,
+  hour: PropTypes.number.isRequired,
+  minute: PropTypes.number.isRequired,
+  highlightWeekend: PropTypes.bool,
+  highlightHolidays: PropTypes.bool,
+  onSelected: PropTypes.func,
+  yearSpan: PropTypes.number,
+  minuteInterval: PropTypes.number,
+  showTime: PropTypes.bool,
+};
+
+AUCalendarComponent.displayName = 'AUCalendarComponent';
+export default AUCalendarComponent;