@aarhus-university/au-lib-react-components 9.11.18 → 10.0.1

package/src/components/AUCalendarComponent.js

@@ -1,393 +0,0 @@
-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;

package/src/components/AUDatepickerComponent.js

@@ -1,105 +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 } = this.props;
-    return (
-      <div className="au-datepicker">
-        <input
-          type="text"
-          value={dateFormatted}
-          readOnly
-          onClick={() => {
-            this.setState((prevState) => ({
-              showCalendar: !prevState.showCalendar,
-            }));
-          }}
-        />
-        {
-          showCalendar && [
-            <div key={0} className="au-calendar-close">
-              <button
-                type="button"
-                onClick={() => {
-                  this.hideDatePicker();
-                }}
-              >
-                c
-              </button>
-            </div>,
-            <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}
-            />,
-          ]
-        }
-      </div>
-    );
-  }
-}
-
-AUDatepickerComponent.defaultProps = {
-  date: null,
-  onDateChange: () => { },
-  onHide: () => { },
-  format: 'YYYY-MM-DD HH:mm',
-  showTime: true,
-};
-
-AUDatepickerComponent.propTypes = {
-  date: PropTypes.instanceOf(Date),
-  onDateChange: PropTypes.func,
-  onHide: PropTypes.func,
-  format: PropTypes.string,
-  showTime: PropTypes.bool,
-};
-
-AUDatepickerComponent.displayName = 'AUDatepickerComponent';
-export default AUDatepickerComponent;

package/src/components/AUFilterCheckboxComponent.js

@@ -1,122 +0,0 @@
-/* eslint jsx-a11y/label-has-associated-control: 0 */
-/* eslint jsx-a11y/label-has-for: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-class AUFilterCheckboxComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      filter: props.value,
-    };
-  }
-
-  componentDidMount() {
-    this.input.focus();
-  }
-
-  render() {
-    const { filter } = this.state;
-    const {
-      items,
-      onFilterSelect,
-      onFilterType,
-      lang,
-    } = this.props;
-    const renderFiltered = items.map((_f, i) => {
-      const f = _f;
-      const key = i;
-      const liClassName = f.visible ? 'visible' : null;
-      const labelClassName = f.selected ? 'selected' : null;
-      return (
-        <li key={key} className={liClassName}>
-          <label className={labelClassName}>
-            <input
-              type="checkbox"
-              value={f.value}
-              checked={f.selected}
-              onChange={(e) => {
-                f.selected = e.target.checked;
-                if (typeof onFilterSelect === 'function') {
-                  onFilterSelect(items.filter(x => x.selected));
-                }
-              }}
-            />
-            {f.name}
-          </label>
-        </li>
-      );
-    });
-
-    const allSelected = items.filter(x => x.selected).length === 0;
-
-    return (
-      <div className="au-filter-checkbox">
-        <input
-          ref={(node) => { this.input = node; }}
-          type="text"
-          value={filter}
-          onChange={(e) => {
-            const { value } = e.target;
-            items.forEach((_f) => {
-              const f = _f;
-              f.visible = (`${f.name}`).toLowerCase().indexOf(value.toLowerCase().trim()) > -1;
-            });
-            this.setState({
-              filter: value,
-            }, () => {
-              if (typeof onFilterType === 'function') {
-                onFilterType(value);
-              }
-            });
-          }}
-        />
-        <ul className="resetlist">
-          <li className={filter === '' ? 'visible' : null}>
-            <label className={allSelected ? 'selected' : null}>
-              <input
-                type="checkbox"
-                value=""
-                checked={allSelected}
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    items.forEach((_f) => {
-                      const f = _f;
-                      f.selected = false;
-                    });
-                    if (typeof onFilterSelect === 'function') {
-                      onFilterSelect(items.filter(x => x.selected));
-                    }
-                  }
-                }}
-              />
-              {lang === 'da' ? 'Vælg alle' : 'Select all'}
-            </label>
-          </li>
-          {renderFiltered}
-        </ul>
-      </div>
-    );
-  }
-}
-
-AUFilterCheckboxComponent.defaultProps = {
-  onFilterSelect: null,
-  onFilterType: null,
-  lang: 'da',
-  value: '',
-};
-
-AUFilterCheckboxComponent.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.shape({
-
-  })).isRequired,
-  onFilterSelect: PropTypes.func,
-  onFilterType: PropTypes.func,
-  lang: PropTypes.string,
-  value: PropTypes.string,
-};
-
-AUFilterCheckboxComponent.displayName = 'AUFilterCheckboxComponent';
-export default AUFilterCheckboxComponent;

package/src/components/AUFocusComponent.js

@@ -1,55 +0,0 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * AU Focus Komponent
- *
- * Eksempel:
- * ```jsx
- *  <AUFocusComponent
-            key="focus"
-            header={<h1>Fokusfelt</h1>}
-            text={<p>Noget tekst</p>}
-            links={<ul><li style={{ backgroundColor: 'rgba(0, 61, 133, .75)' }}><a href="http://www.au.dk">Link</a></li></ul>}
-            style={{
-              backgroundImage: 'url(http://ps.au.dk/uploads/tx_templavoila/BSS_Foto_outdoor-51_fokusfelt_72ppi_04.jpg)',
-              height: '270px',
-            }}
-          />
- * ```
- */
-
-const AUFocusComponent = (props) => {
-  const {
-    style,
-    header,
-    text,
-    links,
-  } = props;
-  return (
-    <div className="au_focus" style={style}>
-      <div className="au_focus_content">
-        {header}
-        {text}
-        {links}
-      </div>
-    </div>
-  );
-};
-
-AUFocusComponent.defaultProps = {
-  text: null,
-  header: null,
-  links: null,
-};
-
-AUFocusComponent.propTypes = {
-  header: PropTypes.element,
-  text: PropTypes.element,
-  style: PropTypes.shape({}).isRequired,
-  links: PropTypes.element,
-};
-
-AUFocusComponent.displayName = 'AUFocusComponent';
-export default AUFocusComponent;