@aarhus-university/au-lib-react-components 8.20.2 → 8.80.0

package/src/components/AUCalendarComponent.tsx

@@ -0,0 +1,493 @@
+import React, { useState, FC } from 'react';
+import dayjs from 'dayjs';
+import 'dayjs/locale/da';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+
+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: number, month: number): number => new Date(year, month, 0).getDate();
+
+// eslint-disable-next-line max-len
+const addDays = (days: number, date: Date): Date => new Date(date.getTime() + days * 60 * 24 * 60000);
+
+const calcEaster = (year: number): Date => {
+  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: Date): boolean => {
+  const year = date.getFullYear();
+  const holidays: Date[] = [];
+  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()).filter((x) => x === date.toString()).length > 0;
+};
+
+const dateAllowed = (date: Date, limitStart: Date, limitEnd: Date): boolean => {
+  if (limitStart && !limitEnd) {
+    return date >= limitStart;
+  }
+
+  if (!limitStart && limitEnd) {
+    return date <= limitEnd;
+  }
+
+  if (limitStart && limitEnd) {
+    return date >= limitStart && date <= limitEnd;
+  }
+
+  return true;
+};
+
+const skipDays = [6, 0, 1, 2, 3, 4, 5];
+
+const AUCalendarComponent: FC<AUCalendarComponentProps> = ({
+  lang,
+  day,
+  month,
+  year,
+  hour,
+  minute,
+  selected,
+  onSelected,
+  highlightWeekend,
+  highlightHolidays,
+  yearSpanMinus,
+  yearSpanPlus,
+  minuteInterval,
+  showTime,
+  closeable,
+  onClose,
+  limitStart,
+  limitEnd,
+  controls,
+}: AUCalendarComponentProps) => {
+  dayjs.locale(lang);
+  dayjs.extend(advancedFormat);
+
+  const [calendarState, setCalendarState] = useState<ICalendarState>({
+    day,
+    month,
+    year,
+    hour,
+    minute,
+    selected: selected as Date,
+  });
+
+  const {
+    day: sDay,
+    month: sMonth,
+    year: sYear,
+    hour: sHour,
+    minute: sMinute,
+    selected: sSelected,
+  } = calendarState;
+
+  const goBack = () => {
+    const newMonth = sMonth - 1 < 1 ? 12 : (sMonth - 1);
+    const newYear = newMonth === 12 ? (sYear - 1) : sYear;
+    setCalendarState({
+      ...calendarState,
+      ...{
+        month: newMonth,
+        year: newYear,
+      },
+    });
+  };
+
+  const goForward = () => {
+    const newMonth = sMonth + 1 > 12 ? 1 : (sMonth + 1);
+    const newYear = newMonth === 1 ? (sYear + 1) : sYear;
+    setCalendarState({
+      ...calendarState,
+      ...{
+        month: newMonth,
+        year: newYear,
+      },
+    });
+  };
+
+  const renderMonths = months[lang as string].map(
+    (m: string, i: number) => (
+      <option key={m} value={i + 1}>
+        {m}
+      </option>
+    ),
+  );
+
+  let yearStart = yearSpanMinus;
+  // eslint-disable-next-line max-len
+  if (limitStart && limitStart.getFullYear() > (sSelected.getFullYear() - (yearSpanMinus as number))) {
+    yearStart = sSelected.getFullYear() - limitStart.getFullYear();
+  }
+
+  let yearEnd = yearSpanPlus;
+  if (limitEnd && limitEnd.getFullYear() < (sSelected.getFullYear() + (yearSpanPlus as number))) {
+    yearEnd = limitEnd.getFullYear() + sSelected.getFullYear();
+  }
+
+  const yearArr: number[] = [];
+  for (let y = sYear - (yearStart as number); y <= sYear + (yearEnd as number); y += 1) {
+    yearArr.push(y);
+  }
+
+  const renderYears = yearArr.map(
+    (y) => (
+      <option key={y}>
+        {y}
+      </option>
+    ),
+  );
+
+  const renderWeekDays = dayTitles[lang as string].map(
+    (w: string) => (
+      <span key={w} className="calendar__days__day">
+        {w}
+      </span>
+    ),
+  );
+
+  const firstDayInMonth = new Date(sYear, sMonth - 1, 1);
+  const emptyDays = skipDays[firstDayInMonth.getDay()];
+  const prevYear = sMonth === 1 ? sYear - 1 : sYear;
+  const prevMonth = sMonth === 1 ? 12 : sMonth - 1;
+  const numberOfDaysInPrevMonth = daysInMonth(
+    prevYear, prevMonth,
+  );
+
+  let rowCount = -1;
+  const renderEmptyDaysBefore = Array(emptyDays).fill(null).map((_, 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) as boolean}
+        className={`calendar__days__date ${isWeekend ? 'calendar__days__date--weekend calendar__days__date--empty' : 'calendar__days__date--empty'}`}
+        onClick={() => {
+          goBack();
+        }}
+        aria-label={dayjs(date).format('LL')}
+      >
+        {beforeDay}
+      </button>
+    );
+  });
+
+  const renderDays = Array(daysInMonth(sYear, sMonth)).fill(null).map((_, i) => {
+    const key = i; // suck it
+    if (rowCount === 6) {
+      rowCount = 0;
+    } else {
+      rowCount += 1;
+    }
+    const newDay = i + 1;
+    const isSelected = (
+      newDay === sSelected.getDate()
+      && sYear === sSelected.getFullYear()
+      && sMonth === sSelected.getMonth() + 1
+    );
+    const isWeekend = (highlightWeekend && rowCount > 4)
+      || (highlightHolidays && isHoliday(new Date(sYear, sMonth - 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(sYear, sMonth - 1, newDay, sHour, sMinute);
+    return (
+      <button
+        key={key}
+        disabled={((limitStart && date < limitStart) || (limitEnd && date > limitEnd) as boolean)}
+        type="button"
+        className={className}
+        onClick={() => {
+          const newSelected = date;
+          setCalendarState({
+            ...calendarState,
+            ...{
+              day: newDay,
+              selected: newSelected,
+            },
+          });
+          onSelected(newSelected);
+        }}
+        aria-label={dayjs(date).format('LL')}
+      >
+        {i + 1}
+      </button>
+    );
+  });
+
+  const nextYear = sMonth === 12 ? (sYear + 1) : sYear;
+  const nextMonth = sMonth === 12 ? 1 : (sMonth + 1);
+  const renderEmptyDaysAfter = Array(6 - rowCount).fill(null).map((_, 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) as boolean}
+        className={`calendar__days__date ${isWeekend ? 'calendar__days__date--weekend calendar__days__date--empty' : 'calendar__days__date--empty'}`}
+        onClick={() => {
+          goForward();
+        }}
+        aria-label={dayjs(date).format('LL')}
+      >
+        {afterDay}
+      </button>
+    );
+  });
+
+  const renderHours = Array(24).fill(null).map((_, i) => {
+    const key = i;
+    const optHour = i < 10 ? `0${i}` : i;
+    return (
+      <option key={key} value={i}>
+        {optHour}
+      </option>
+    );
+  });
+
+  const renderMinutes = Array(60).fill(null).map((_, i) => {
+    const key = i;
+    if (i % (minuteInterval as number) === 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={sMonth}
+            title={lang === 'da' ? 'Vælg måned' : 'Select month'}
+            onChange={(e) => {
+              const newMonth = parseInt(e.target.value, 10);
+              const newSelected = new Date(sYear, newMonth - 1, sDay, sHour, sMinute);
+              if (dateAllowed(newSelected, limitStart as Date, limitEnd as Date)) {
+                setCalendarState({
+                  ...calendarState,
+                  ...{
+                    month: newMonth,
+                    selected: newSelected,
+                  },
+                });
+                onSelected(newSelected);
+              } else {
+                setCalendarState({
+                  ...calendarState,
+                  ...{
+                    month: newMonth,
+                  },
+                });
+              }
+            }}
+          >
+            {renderMonths}
+          </select>
+        </div>
+        <div className="form__field">
+          <select
+            value={sYear}
+            title={lang === 'da' ? 'Vælg år' : 'Select year'}
+            onChange={(e) => {
+              const newYear = parseInt(e.target.value, 10);
+              const newSelected = new Date(newYear, sMonth - 1, sDay, sHour, sMinute);
+              if (dateAllowed(newSelected, limitStart as Date, limitEnd as Date)) {
+                setCalendarState({
+                  ...calendarState,
+                  ...{
+                    year: newYear,
+                    selected: newSelected,
+                  },
+                });
+                onSelected(newSelected);
+              } else {
+                setCalendarState({
+                  ...calendarState,
+                  ...{
+                    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={sHour}
+                title={lang === 'da' ? 'Vælg time' : 'Select hour'}
+                onChange={(e) => {
+                  const newHour = parseInt(e.target.value, 10);
+                  const newSelected = new Date(sYear, sMonth - 1, sDay, newHour, sMinute);
+                  if (dateAllowed(newSelected, limitStart as Date, limitEnd as Date)) {
+                    setCalendarState({
+                      ...calendarState,
+                      ...{
+                        hour: newHour,
+                        selected: newSelected,
+                      },
+                    });
+                    onSelected(newSelected);
+                  } else {
+                    setCalendarState({
+                      ...calendarState,
+                      ...{
+                        hour: newHour,
+                      },
+                    });
+                  }
+                }}
+              >
+                {renderHours}
+              </select>
+            </div>
+            <div className="form__field">
+              <select
+                value={sMinute}
+                title={lang === 'da' ? 'Vælg minut' : 'Select minute'}
+                onChange={(e) => {
+                  const newMinute = parseInt(e.target.value, 10);
+                  const newSelected = new Date(sYear, sMonth - 1, sDay, sHour, newMinute);
+                  if (dateAllowed(newSelected, limitStart as Date, limitEnd as Date)) {
+                    setCalendarState({
+                      ...calendarState,
+                      ...{
+                        minute: newMinute,
+                        selected: newSelected,
+                      },
+                    });
+                    onSelected(newSelected);
+                  } else {
+                    setCalendarState({
+                      ...calendarState,
+                      ...{
+                        minute: newMinute,
+                      },
+                    });
+                  }
+                }}
+              >
+                {renderMinutes}
+              </select>
+            </div>
+          </div>
+        )
+      }
+    </div>
+  );
+};
+
+AUCalendarComponent.defaultProps = {
+  lang: 'da',
+  selected: new Date(),
+  // eslint-disable-next-line no-console
+  highlightWeekend: true,
+  highlightHolidays: true,
+  yearSpanMinus: 5,
+  yearSpanPlus: 5,
+  minuteInterval: 5,
+  showTime: true,
+  closeable: false,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onClose: () => { },
+  limitStart: null,
+  limitEnd: null,
+};
+
+AUCalendarComponent.displayName = 'AUCalendarComponent';
+export default AUCalendarComponent;

package/src/components/AUContentToggleComponent.tsx

@@ -0,0 +1,33 @@
+import React, {
+  useEffect,
+  useRef,
+  FC,
+} from 'react';
+import { setContentToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/content-toggle';
+
+const AUContentToggleComponent: FC<AUContentToggleComponentProps> = ({
+  toggled,
+  classNames,
+  children,
+}: AUContentToggleComponentProps) => {
+  const toggleContainer = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const toggle = toggleContainer?.current?.querySelector('.content-toggle__content');
+    if (toggle) {
+      const button = setContentToggle(toggle);
+      button?.setAttribute('aria-expanded', toggled ? 'true' : 'false');
+    }
+  }, []);
+  return (
+    <div ref={toggleContainer} className={classNames}>
+      {children}
+    </div>
+  );
+};
+
+AUContentToggleComponent.defaultProps = {
+  classNames: undefined,
+};
+
+AUContentToggleComponent.displayName = 'AUContentToggleComponent';
+export default AUContentToggleComponent;

package/src/components/AUDatepickerComponent.tsx

@@ -0,0 +1,117 @@
+/* eslint-env browser */
+import React, { FC, useState } from 'react';
+import dayjs from 'dayjs';
+import AUCalendarComponent from './AUCalendarComponent';
+
+const AUDatepickerComponent: FC<AUDatepickerComponentProps> = ({
+  id,
+  lang,
+  date,
+  onDateChange,
+  onHide,
+  format,
+  showTime,
+  showLabel,
+  labelInline,
+  labelText,
+  fullWidth,
+  yearSpanMinus,
+  yearSpanPlus,
+  limitStart,
+  limitEnd,
+  disabled,
+}: AUDatepickerComponentProps) => {
+  const [showCalendar, setShowCalendar] = useState(false);
+  const [sDate, setDate] = useState<Date>(date as Date);
+  const dateFormatted = dayjs(sDate).format(format);
+
+  const hideDatePicker = () => {
+    setShowCalendar(false);
+    onHide(sDate, dateFormatted);
+  };
+
+  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={() => setShowCalendar(!showCalendar)}
+        />
+      </div>
+      {showCalendar && (
+        <div className="datepicker__calendar-container">
+          <AUCalendarComponent
+            key={`${showCalendar}`}
+            minuteInterval={1}
+            selected={date}
+            day={(date as Date).getDate()}
+            month={(date as Date).getMonth() + 1}
+            year={(date as Date).getFullYear()}
+            hour={(date as Date).getHours()}
+            minute={(date as Date).getMinutes()}
+            onSelected={(selected) => {
+              const formatted = dayjs(selected).format(format);
+              setDate(selected);
+              onDateChange(selected, formatted);
+            }}
+            showTime={showTime}
+            yearSpanMinus={yearSpanMinus}
+            yearSpanPlus={yearSpanPlus}
+            closeable
+            onClose={hideDatePicker}
+            controls={id}
+            limitStart={limitStart}
+            limitEnd={limitEnd}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+AUDatepickerComponent.defaultProps = {
+  date: new Date(),
+  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.displayName = 'AUDatepickerComponent';
+export default AUDatepickerComponent;

package/src/components/AUMobilePrefixComponent.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+
+const AUMobilePrefixComponent: FC<AUMobilePrefixComponentProps> = ({
+  countryCodes,
+  important,
+}: AUMobilePrefixComponentProps) => {
+  const renderCountryCodes = (codes: ICountryCode[]) => codes.map(c => <option key={c.da} value={`+${c.code}`}>{`${c.da} (+${c.code})`}</option>);
+  if (important) {
+    return <>{renderCountryCodes(countryCodes.filter(c => c.important))}</>;
+  }
+  return <>{renderCountryCodes(countryCodes)}</>;
+};
+
+AUMobilePrefixComponent.displayName = 'AUMobilePrefixComponent';
+export default AUMobilePrefixComponent;