@aarhus-university/au-lib-react-components 9.11.17 → 10.0.0

package/src/components/delphinus/AUCalendarComponent.js

@@ -1,487 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import moment from 'moment';
-
-const months = {
-  da: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'],
-  en: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-};
-const dayTitles = {
-  da: ['Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør', 'Søn'],
-  en: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-};
-
-const daysInMonth = (year, month) => new Date(year, month, 0).getDate();
-
-const addDays = (days, date) => new Date(date.getTime() + days * 60 * 24 * 60000);
-
-const 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;
-};
-
-const isHoliday = (date) => {
-  const year = date.getFullYear();
-  const holidays = [];
-  const newYear = new Date(year, 0, 1);
-  holidays.push(newYear);
-  const easter = calcEaster(year);
-  holidays.push(easter);
-  const easterThu = addDays(-3, easter);
-  holidays.push(easterThu);
-  const easterFri = addDays(-2, easter);
-  holidays.push(easterFri);
-  const easter2 = addDays(1, easter);
-  holidays.push(easter2);
-  const stBededag = addDays(26, easter);
-  holidays.push(stBededag);
-  const kristiHf = addDays(39, easter);
-  holidays.push(kristiHf);
-  const whitsun = addDays(49, easter);
-  holidays.push(whitsun);
-  const whitsun2 = 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 = addDays(1, christmas);
-  holidays.push(christmas2);
-
-  return holidays.map((h) => h.toString()).find((x) => x === date.toString());
-};
-
-const dateAllowed = (date, limitStart, limitEnd) => {
-  if (limitStart && !limitEnd) {
-    return date >= limitStart;
-  }
-
-  if (!limitStart && limitEnd) {
-    return date <= limitEnd;
-  }
-
-  if (limitStart && limitEnd) {
-    return date >= limitStart && date <= limitEnd;
-  }
-
-  return true;
-}
-
-class AUCalendarComponent extends React.Component {
-  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);
-
-    moment.locale(props.lang);
-  }
-
-  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 {
-      lang,
-      onSelected,
-      highlightWeekend,
-      highlightHolidays,
-      yearSpanMinus,
-      yearSpanPlus,
-      minuteInterval,
-      showTime,
-      closeable,
-      onClose,
-      controls,
-      limitStart,
-      limitEnd,
-    } = this.props;
-
-    const renderMonths = months[lang].map(
-      (m, i) => (
-        <option key={m} value={i + 1}>
-          {m}
-        </option>
-      ),
-    );
-
-    let yearStart = yearSpanMinus;
-    if (limitStart && limitStart.getFullYear() > (selected.getFullYear() - yearSpanMinus)) {
-      yearStart = selected.getFullYear() - limitStart.getFullYear();
-    }
-
-    let yearEnd = yearSpanPlus;
-    if (limitEnd && limitEnd.getFullYear() < (selected.getFullYear() + yearSpanPlus)) {
-      yearEnd = limitEnd.getFullYear() + selected.getFullYear();
-    }
-
-    const yearArr = [];
-    for (let y = year - yearStart; y <= year + yearEnd; y += 1) {
-      yearArr.push(y);
-    }
-
-    const renderYears = yearArr.map(
-      (y) => (
-        <option key={y}>
-          {y}
-        </option>
-      ),
-    );
-
-    const renderWeekDays = dayTitles[lang].map(
-      (w) => (
-        <span key={w} className="calendar__days__day">
-          {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 = daysInMonth(
-      prevYear, prevMonth,
-    );
-
-    let rowCount = -1;
-    const renderEmptyDaysBefore = Array(emptyDays).fill().map((e, i) => {
-      rowCount = i;
-      const beforeDay = numberOfDaysInPrevMonth - emptyDays + i + 1;
-      const date = new Date(prevYear, prevMonth - 1, beforeDay);
-      const isWeekend = (highlightWeekend && rowCount > 4)
-        || (highlightHolidays
-          && isHoliday(date));
-      return (
-        <button
-          type="button"
-          key={rowCount}
-          disabled={limitStart && date < limitStart}
-          className={`calendar__days__date ${isWeekend ? 'calendar__days__date--weekend calendar__days__date--empty' : 'calendar__days__date--empty'}`}
-          onClick={() => {
-            this.goBack();
-          }}
-          aria-label={moment(date).format('LL')}
-        >
-          {beforeDay}
-        </button>
-      );
-    });
-
-    const renderDays = Array(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 && isHoliday(new Date(year, month - 1, newDay)));
-      let className = 'calendar__days__date';
-      if (isSelected) {
-        className = `${className} calendar__days__date--selected`;
-      }
-      if (isWeekend) {
-        className = `${className} calendar__days__date--weekend`;
-      }
-      const date = new Date(year, month - 1, newDay, hour, minute);
-      return (
-        <button
-          key={key}
-          disabled={(limitStart && date < limitStart) || (limitEnd && date > limitEnd)}
-          type="button"
-          className={className}
-          onClick={() => {
-            const newSelected = date;
-            this.setState({
-              day: newDay,
-              selected: newSelected,
-            }, () => {
-              onSelected(newSelected);
-            });
-          }}
-          aria-label={moment(date).format('LL')}
-        >
-          {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 date = new Date(nextYear, nextMonth - 1, afterDay);
-      const isWeekend = (highlightWeekend && rowCount > 4)
-        || (highlightHolidays
-          && isHoliday(date));
-      return (
-        <button
-          type="button"
-          key={key}
-          disabled={limitEnd && date > limitEnd}
-          className={`calendar__days__date ${isWeekend ? 'calendar__days__date--weekend calendar__days__date--empty' : 'calendar__days__date--empty'}`}
-          onClick={() => {
-            this.goForward();
-          }}
-          aria-label={moment(date).format('LL')}
-        >
-          {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 id={`${controls}-calendar`} className="calendar" aria-controls={controls}>
-        <div className="calendar__year-month">
-          <div className="form__field">
-            <select
-              value={month}
-              title={lang === 'da' ? 'Vælg måned' : 'Select month'}
-              onChange={(e) => {
-                const newMonth = parseInt(e.target.value, 10);
-                const newSelected = new Date(year, newMonth - 1, day, hour, minute);
-                if (dateAllowed(newSelected, limitStart, limitEnd)) {
-                  this.setState({
-                    month: newMonth,
-                    selected: newSelected,
-                  }, () => {
-                    onSelected(newSelected);
-                  });
-                } else {
-                  this.setState({
-                    month: newMonth,
-                  });
-                }
-              }}
-            >
-              {renderMonths}
-            </select>
-          </div>
-          <div className="form__field">
-            <select
-              value={year}
-              title={lang === 'da' ? 'Vælg år' : 'Select year'}
-              onChange={(e) => {
-                const newYear = parseInt(e.target.value, 10);
-                const newSelected = new Date(newYear, month - 1, day, hour, minute);
-                if (dateAllowed(newSelected, limitStart, limitEnd)) {
-                  this.setState({
-                    year: newYear,
-                    selected: newSelected,
-                  }, () => {
-                    onSelected(newSelected);
-                  });
-                } else {
-                  this.setState({
-                    year: newYear,
-                  });
-                }
-              }}
-            >
-              {renderYears}
-            </select>
-          </div>
-          {
-            closeable && (
-              <button
-                className="button button--icon--hide-label button--small button--icon"
-                type="button"
-                data-icon=""
-                onClick={onClose}
-              >
-                {lang === 'da' ? 'Luk' : 'Close'}
-              </button>
-            )
-          }
-        </div>
-        <div className="calendar__days">
-          {renderWeekDays}
-          {renderEmptyDaysBefore}
-          {renderDays}
-          {renderEmptyDaysAfter}
-        </div>
-        {
-          showTime && (
-            <div className="calendar__time">
-              <div className="form__field">
-                <select
-                  value={hour}
-                  title={lang === 'da' ? 'Vælg time' : 'Select hour'}
-                  onChange={(e) => {
-                    const newHour = parseInt(e.target.value, 10);
-                    const newSelected = new Date(year, month - 1, day, newHour, minute);
-                    if (dateAllowed(newSelected, limitStart, limitEnd)) {
-                      this.setState({
-                        hour: newHour,
-                        selected: newSelected,
-                      }, () => {
-                        onSelected(newSelected);
-                      });
-                    } else {
-                      this.setState({
-                        hour: newHour,
-                      });
-                    }
-                  }}
-                >
-                  {renderHours}
-                </select>
-              </div>
-              <div className="form__field">
-                <select
-                  value={minute}
-                  title={lang === 'da' ? 'Vælg minut' : 'Select minute'}
-                  onChange={(e) => {
-                    const newMinute = parseInt(e.target.value, 10);
-                    const newSelected = new Date(year, month - 1, day, hour, newMinute);
-                    if (dateAllowed(newSelected, limitStart, limitEnd)) {
-                      this.setState({
-                        minute: newMinute,
-                        selected: newSelected,
-                      }, () => {
-                        onSelected(newSelected);
-                      });
-                    } else {
-                      this.setState({
-                        minut: newMinute,
-                      });
-                    }
-                  }}
-                >
-                  {renderMinutes}
-                </select>
-              </div>
-            </div>
-          )
-        }
-      </div>
-    );
-  }
-}
-
-AUCalendarComponent.defaultProps = {
-  lang: 'da',
-  selected: new Date(),
-  onSelected: () => { },
-  highlightWeekend: true,
-  highlightHolidays: true,
-  yearSpanMinus: 5,
-  yearSpanPlus: 5,
-  minuteInterval: 5,
-  showTime: true,
-  closeable: false,
-  onClose: () => { },
-  limitStart: null,
-  limitEnd: null,
-};
-
-AUCalendarComponent.propTypes = {
-  lang: PropTypes.string,
-  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,
-  yearSpanMinus: PropTypes.number,
-  yearSpanPlus: PropTypes.number,
-  minuteInterval: PropTypes.number,
-  showTime: PropTypes.bool,
-  closeable: PropTypes.bool,
-  onClose: PropTypes.func,
-  controls: PropTypes.string.isRequired,
-  limitStart: PropTypes.instanceOf(Date),
-  limitEnd: PropTypes.instanceOf(Date),
-};
-
-AUCalendarComponent.displayName = 'AUCalendarComponent';
-export default AUCalendarComponent;

package/src/components/delphinus/AUContentToggleComponent.js

@@ -1,32 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { setContentToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/content-toggle';
-
-const AUContentToggleComponent = ({ toggled, classNames, children }) => {
-  const toggleContainer = useRef();
-  useEffect(() => {
-    const toggle = toggleContainer.current.querySelector('.content-toggle__content');
-    if (toggle) {
-      const button = setContentToggle(toggle);
-      button.setAttribute('aria-expanded', toggled);
-    }
-  }, []);
-  return (
-    <div ref={toggleContainer} className={classNames}>
-      {children}
-    </div>
-  );
-};
-
-AUContentToggleComponent.defaultProps = {
-  children: null,
-  classNames: null,
-};
-
-AUContentToggleComponent.propTypes = {
-  children: PropTypes.element,
-  toggled: PropTypes.bool.isRequired,
-  classNames: PropTypes.string,
-};
-AUContentToggleComponent.displayName = 'AUContentToggleComponent';
-export default AUContentToggleComponent;

package/src/components/delphinus/AUDatepickerComponent.js

@@ -1,164 +0,0 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-import moment from 'moment';
-import AUCalendarComponent from './AUCalendarComponent';
-
-class AUDatepickerComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      showCalendar: false,
-      date: props.date,
-      dateFormatted: props.date ? moment(props.date).format(props.format) : '',
-    };
-
-    this.hideDatePicker = this.hideDatePicker.bind(this);
-  }
-
-  hideDatePicker() {
-    const { onHide } = this.props;
-    const { date, dateFormatted } = this.state;
-    this.setState({
-      showCalendar: false,
-    }, () => {
-      onHide(date, dateFormatted);
-    });
-  }
-
-  render() {
-    const { showCalendar, dateFormatted } = this.state;
-    let { date } = this.state;
-    if (!date) {
-      date = new Date();
-    }
-    const {
-      onDateChange,
-      format,
-      showTime,
-      id,
-      lang,
-      showLabel,
-      labelInline,
-      labelText,
-      fullWidth,
-      yearSpanMinus,
-      yearSpanPlus,
-      limitStart,
-      limitEnd,
-      disabled,
-    } = this.props;
-
-    let className = 'form__field';
-    if (fullWidth) {
-      className = `${className} form__field--full-width`;
-    }
-
-    if (labelInline) {
-      className = `${className} form__field--inline-label`;
-    }
-
-    if (disabled) {
-      className = `${className} visually-disabled`;
-    }
-
-    return (
-      <div className="datepicker" aria-owns={`${id}-calendar`} aria-haspopup="true" aria-expanded={showCalendar}>
-        <div className={className}>
-          {
-            showLabel && (
-              <label htmlFor={id}>{labelText}</label>
-            )
-          }
-          <input
-            id={id}
-            type="text"
-            value={dateFormatted}
-            title={lang === 'da' ? 'Klik for at åbne datovælger' : 'Click to open datepicker'}
-            readOnly
-            disabled={disabled}
-            onClick={() => {
-              this.setState((prevState) => ({
-                showCalendar: !prevState.showCalendar,
-              }));
-            }}
-          />
-        </div>
-        {
-          showCalendar && (
-            <div className="datepicker__calendar-container">
-              <AUCalendarComponent
-                key={showCalendar}
-                minuteInterval={1}
-                selected={date}
-                day={date.getDate()}
-                month={date.getMonth() + 1}
-                year={date.getFullYear()}
-                hour={date.getHours()}
-                minute={date.getMinutes()}
-                onSelected={(selected) => {
-                  const formatted = moment(selected).format(format);
-                  this.setState({
-                    date: selected,
-                    dateFormatted: formatted,
-                  }, () => {
-                    onDateChange(selected, formatted);
-                  });
-                }}
-                showTime={showTime}
-                yearSpanMinus={yearSpanMinus}
-                yearSpanPlus={yearSpanPlus}
-                closeable
-                onClose={this.hideDatePicker}
-                controls={id}
-                limitStart={limitStart}
-                limitEnd={limitEnd}
-              />
-            </div>
-          )
-        }
-      </div>
-    );
-  }
-}
-
-AUDatepickerComponent.defaultProps = {
-  date: null,
-  onDateChange: () => { },
-  onHide: () => { },
-  format: 'YYYY-MM-DD HH:mm',
-  showTime: true,
-  lang: 'da',
-  showLabel: false,
-  labelInline: false,
-  labelText: 'Vælg dato:',
-  fullWidth: true,
-  yearSpanMinus: 5,
-  yearSpanPlus: 5,
-  limitStart: null,
-  limitEnd: null,
-  disabled: false,
-};
-
-AUDatepickerComponent.propTypes = {
-  id: PropTypes.string.isRequired,
-  lang: PropTypes.string,
-  date: PropTypes.instanceOf(Date),
-  onDateChange: PropTypes.func,
-  onHide: PropTypes.func,
-  format: PropTypes.string,
-  showTime: PropTypes.bool,
-  showLabel: PropTypes.bool,
-  labelInline: PropTypes.bool,
-  labelText: PropTypes.string,
-  fullWidth: PropTypes.bool,
-  yearSpanMinus: PropTypes.bool,
-  yearSpanPlus: PropTypes.bool,
-  limitStart: PropTypes.instanceOf(Date),
-  limitEnd: PropTypes.instanceOf(Date),
-  disabled: PropTypes.bool,
-};
-
-AUDatepickerComponent.displayName = 'AUDatepickerComponent';
-export default AUDatepickerComponent;