@aarhus-university/au-lib-react-components 9.11.19 → 10.0.2

package/src/components/delphinus/AULoginComponent.js

@@ -1,65 +0,0 @@
-/* eslint-env browser */
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-
-const mitstudieLabels = {
-  da: {
-    frontHeadline: 'Mit studie',
-    frontText: 'En samlet indgang til dit studieoverblik, studieinformation<br />og selvbetjeningssystemer.',
-    signIn: 'Log ind',
-  },
-  en: {
-    frontHeadline: 'My studies',
-    frontText: 'A single point of access to study information and self-service systems.',
-    signIn: 'Sign in',
-  },
-};
-
-const AULoginComponent = ({ labels, signInUri, notification }) => {
-  useEffect(() => {
-    document.querySelector('main').classList.remove('theme--normal');
-    const pageNavTop = document.querySelector('.page__navigation-top');
-    if (pageNavTop) {
-      pageNavTop.classList.remove('theme--normal');
-    }
-  }, []);
-  const redirectUri = window.location.pathname;
-  return (
-    <>
-      <div className="page__content__block">
-        <h1>
-          <strong>
-            {labels[window.appLang].frontHeadline}
-          </strong>
-        </h1>
-        <p className="text--intro" dangerouslySetInnerHTML={{ __html: labels[window.appLang].frontText }} />
-        <a
-          className="button button--large"
-          href={`/${window.appLang}/${signInUri}?redirectUri=${redirectUri}`}
-        >
-          {labels[window.appLang].signIn}
-        </a>
-      </div>
-      {notification}
-    </>
-  );
-};
-
-AULoginComponent.defaultProps = {
-  labels: mitstudieLabels,
-  signInUri: 'account/signin',
-  notification: null,
-};
-
-AULoginComponent.propTypes = {
-  labels: PropTypes.shape({
-    frontHeadline: PropTypes.string.isRequired,
-    frontText: PropTypes.string.isRequired,
-    signIn: PropTypes.string.isRequired,
-  }),
-  signInUri: PropTypes.string,
-  notification: PropTypes.element,
-};
-
-AULoginComponent.displayName = 'AULoginComponent';
-export default AULoginComponent;

package/src/components/delphinus/AUSpinnerComponent.js

@@ -1,114 +0,0 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { isElementInViewport } from '../../lib/helpers';
-
-class AUSpinnerComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      loading: true,
-      visible: props.visible,
-    };
-
-    this.lazyLoad = this.lazyLoad.bind(this);
-  }
-
-  componentDidMount() {
-    this.lazyLoad();
-    window.addEventListener('scroll', () => {
-      this.lazyLoad();
-    });
-  }
-
-  componentDidUpdate() {
-    this.lazyLoad();
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.visible !== prevState.visible) {
-      return {
-        visible: nextProps.visible,
-      };
-    }
-
-    return null;
-  }
-
-  lazyLoad() {
-    const {
-      loadingCondition,
-      loaded,
-      domID,
-      onLoad,
-    } = this.props;
-    const { loading, visible } = this.state;
-
-    const element = document.getElementById(domID);
-    if (!loaded && loading && loadingCondition && (visible || isElementInViewport(element))) {
-      this.setState({
-        loading: false,
-      }, () => {
-        onLoad();
-      });
-    }
-  }
-
-  render() {
-    const {
-      className, content, loaded, domID, children, height, init,
-    } = this.props;
-
-    if (!loaded) {
-      if (init === 'table') {
-        return (
-          <div id={domID} className={`processing-state processing-state--init-table ${className}`} style={{ minHeight: height }} />
-        );
-      }
-      if (init === 'box') {
-        return (
-          <div id={domID} className={`processing-state processing-state--init-box ${className}`} style={{ minHeight: height }} />
-        );
-      }
-      return (
-        <div id={domID} className={`processing-state ${className}`} style={{ minHeight: height }} />
-      );
-    }
-
-    return children || content;
-  }
-}
-
-AUSpinnerComponent.defaultProps = {
-  domID: 'au-spinner-component',
-  visible: false,
-  className: '',
-  content: null,
-  children: null,
-  onLoad: () => { },
-  height: 'auto',
-  init: '',
-};
-
-AUSpinnerComponent.propTypes = {
-  /**
-   * Relevant ved mere end en spinner per side
-   */
-  domID: PropTypes.string,
-  /**
-   * Om den er synlig på skærmen ved indlæsning
-   */
-  visible: PropTypes.bool,
-  className: PropTypes.string,
-  content: PropTypes.element,
-  children: PropTypes.element,
-  loaded: PropTypes.bool.isRequired,
-  loadingCondition: PropTypes.bool.isRequired,
-  onLoad: PropTypes.func,
-  height: PropTypes.string,
-  init: PropTypes.string,
-};
-
-AUSpinnerComponent.displayName = 'AUSpinnerComponent';
-export default AUSpinnerComponent;

package/src/components/form/AUMobilePrefixComponent.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const AUMobilePrefixComponent = ({ countryCodes, important }) => {
-  const renderCountryCodes = codes => 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.propTypes = {
-  countryCodes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  important: PropTypes.bool.isRequired,
-};
-
-AUMobilePrefixComponent.displayName = 'AUMobilePrefixComponent';
-export default AUMobilePrefixComponent;

package/src/components/news/EventLayout1Component.js

@@ -1,94 +0,0 @@
-/* eslint jsx-a11y/control-has-associated-label: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import NewsSubHeaderComponent from './NewsSubHeaderComponent';
-import { newsLabels as labels } from '../../lib/i18n';
-import { AUNewsHelpers } from '../../lib/au-news';
-
-const EventLayout1Component = (props) => {
-  const {
-    item,
-    listid,
-    setPopupItem,
-    lang,
-  } = props;
-  if (!item) {
-    return <div />;
-  }
-
-  const i = AUNewsHelpers.setExternal(item);
-
-  const domID = `news-${listid}-${i.id}`;
-  const {
-    fromDate,
-    toDate,
-    fromDateSplit,
-    toDateSplit,
-  } = AUNewsHelpers.getEventDates(i, lang);
-  const multipleDates = fromDate.getTime() !== toDate.getTime();
-  const showYear = i.showyear === '1'; // Oh ffs...
-  const className = `au_news_eventlist1-calendar ${(multipleDates ? 'multiple' : 'single')}`;
-
-  return (
-    <div id={domID} className="au_news-eventlist1-item">
-      <div className={className}>
-        <span className="au_news_events_weekday">
-          {labels[lang].news.weekdaysShort[fromDate.getDay()]}
-        </span>
-        <span className="au_news_events_date">
-          {fromDateSplit[lang === 'da' ? 0 : 2]}
-        </span>
-        <span className="au_news_events_month">
-          {labels[lang].news.monthsShort[fromDate.getMonth()] + (showYear ? (` ${(`${fromDate.getFullYear()}`).substring(2)}`) : '')}
-        </span>
-        <span className="au_news_events_weekday_end multiple">
-          {labels[lang].news.weekdaysShort[toDate.getDay()]}
-        </span>
-        <span className="au_news_events_date_end multiple">
-          {toDateSplit[lang === 'da' ? 0 : 2]}
-        </span>
-        <span className="au_news_events_month_end multiple">
-          {labels[lang].news.monthsShort[toDate.getMonth()] + (showYear ? (` ${(`${toDate.getFullYear()}`).substring(2)}`) : '')}
-        </span>
-      </div>
-      <div className="au_news_eventlist1-text">
-        <p>
-          <span className="au_news_events_time">
-            {`${(multipleDates ? `${i.event_from.date} ` : '')} ${`${i.event_from.time} `} ${(multipleDates ? `${i.event_to.date} ` : '')} ${i.event_to.time}`}
-          </span>
-          {'  |  '}
-          <span className="au_news_events_place">
-            {i.event_where}
-          </span>
-          <br />
-          <a
-            onClick={() => {
-              if (!i.external) {
-                setPopupItem(props.item);
-              }
-            }}
-            href={i.url}
-            title={i.header}
-            dangerouslySetInnerHTML={{ __html: i.header }}
-          />
-        </p>
-        <NewsSubHeaderComponent subheader={i.subheader} trim={350} />
-      </div>
-      <div className="au_news_clear" />
-    </div>
-  );
-};
-
-EventLayout1Component.propTypes = {
-  lang: PropTypes.string.isRequired,
-  item: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    url: PropTypes.string.isRequired,
-    header: PropTypes.string.isRequired,
-  }).isRequired,
-  listid: PropTypes.number.isRequired,
-  setPopupItem: PropTypes.func.isRequired,
-};
-
-EventLayout1Component.displayName = 'EventLayout1Component';
-export default EventLayout1Component;

package/src/components/news/EventLayout2Component.js

@@ -1,90 +0,0 @@
-/* eslint jsx-a11y/control-has-associated-label: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import NewsSubHeaderComponent from './NewsSubHeaderComponent';
-import { newsLabels as labels } from '../../lib/i18n';
-import { AUNewsHelpers } from '../../lib/au-news';
-
-const EventLayout2Component = (props) => {
-  const {
-    item,
-    listid,
-    setPopupItem,
-    lang,
-  } = props;
-  if (!item) {
-    return <div />;
-  }
-
-  const i = AUNewsHelpers.setExternal(item);
-
-  const domID = `news-${listid}-${i.id}`;
-  const { fromDate, toDate, fromDateSplit } = AUNewsHelpers.getEventDates(i, lang);
-  const multipleDates = fromDate.getTime() !== toDate.getTime();
-  const showYear = i.showyear === '1';
-  const classNameOuter = `au_news-eventlist2-item ${(i.featured ? 'au_event-featured' : '')}`;
-  const classNameInner = `au_news_eventlist2-calendar ${(multipleDates ? 'multiple' : 'single') + (showYear ? ' show-year' : '')}`;
-  const style = i.image.list === '' ? {} : {
-    backgroundImage: `url('${i.image.list}')`,
-    backgroundPosition: 'top center',
-    backgroundRepeat: 'no-repeat',
-  };
-
-  return (
-    <div id={domID} className={classNameOuter}>
-      <div className="au_padding">
-        <div className={classNameInner} style={style}>
-          <span className="au_news_events_weekday">
-            {labels[lang].news.weekdaysShort[fromDate.getDay()]}
-          </span>
-          <span className="au_news_events_date">
-            {fromDateSplit[lang === 'da' ? 0 : 2]}
-          </span>
-          <span className="au_news_events_month">
-            {labels[lang].news.monthsShort[fromDate.getMonth()] + (showYear ? (` ${(`${fromDate.getFullYear()}`).substring(2)}`) : '')}
-          </span>
-        </div>
-        <div className="au_news_eventlist2-text">
-          <h2>
-            <a
-              onClick={() => {
-                if (!i.external) {
-                  setPopupItem(props.item);
-                }
-              }}
-              href={i.url}
-              title={i.header}
-              dangerouslySetInnerHTML={{ __html: i.header }}
-            />
-          </h2>
-          <div>
-            <span className="au_news_events_time">
-              {`${(multipleDates ? `${i.event_from.date} ` : '')} ${`${i.event_from.time} `} ${(multipleDates ? `${i.event_to.date} ` : '')} ${i.event_to.time}`}
-            </span>
-            {'  |  '}
-            <span className="au_news_events_place">
-              {i.event_where}
-            </span>
-            <br />
-            <NewsSubHeaderComponent subheader={i.subheader} trim={350} />
-          </div>
-        </div>
-        <div className="au_news_clear" />
-      </div>
-    </div>
-  );
-};
-
-EventLayout2Component.propTypes = {
-  lang: PropTypes.string.isRequired,
-  item: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    url: PropTypes.string.isRequired,
-    header: PropTypes.string.isRequired,
-  }).isRequired,
-  listid: PropTypes.number.isRequired,
-  setPopupItem: PropTypes.func.isRequired,
-};
-
-EventLayout2Component.displayName = 'EventLayout2Component';
-export default EventLayout2Component;

package/src/components/news/EventLayout3Component.js

@@ -1,68 +0,0 @@
-/* eslint jsx-a11y/control-has-associated-label: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { AUNewsHelpers } from '../../lib/au-news';
-
-const EventLayout3Component = (props) => {
-  const {
-    items,
-    listid,
-    setPopupItem,
-    lang,
-  } = props;
-  const renderItems = items.map((_i, j) => {
-    let i = _i;
-    const key = j;
-    if (i) {
-      i = AUNewsHelpers.setExternal(i);
-      const { fromDate, toDate } = AUNewsHelpers.getEventDates(i, lang);
-      const multipleDates = fromDate.getTime() !== toDate.getTime();
-      const domID = `news-${listid}-${i.id}`;
-      return (
-        <li
-          key={key}
-          id={domID}
-        >
-          <a
-            onClick={() => {
-              if (!i.external) {
-                setPopupItem(i);
-              }
-            }}
-            href={i.url}
-            title={i.header}
-            dangerouslySetInnerHTML={{ __html: i.header }}
-          />
-          {' ('}
-          <span className="au_news_events_time">
-            {`${i.event_from.date} ${i.event_from.time} - ${(multipleDates ? `${i.event_to.date} ` : '')} ${i.event_to.time}`}
-          </span>
-          {`, ${i.event_where}) `}
-        </li>
-      );
-    }
-    return null;
-  });
-
-  return (
-    <div className="au_news-header-list">
-      <ul>
-        {renderItems}
-      </ul>
-    </div>
-  );
-};
-
-EventLayout3Component.propTypes = {
-  lang: PropTypes.string.isRequired,
-  items: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    url: PropTypes.string.isRequired,
-    header: PropTypes.string.isRequired,
-  })).isRequired,
-  listid: PropTypes.number.isRequired,
-  setPopupItem: PropTypes.func.isRequired,
-};
-
-EventLayout3Component.displayName = 'EventLayout3Component';
-export default EventLayout3Component;

package/src/components/news/NewsCategoriesComponent.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const NewsCategoriesComponent = (props) => {
-  const { categories } = props;
-  const renderCategories = categories.slice(0, 1).map((cat, i) => {
-    const key = i;
-    return <span key={key}>{(i > 0 ? ', ' : '') + cat.category}</span>;
-  });
-
-  return <span className="au_news-list-news-category">{renderCategories}</span>;
-};
-
-NewsCategoriesComponent.propTypes = {
-  categories: PropTypes.arrayOf(PropTypes.shape({
-    category: PropTypes.string.isRequired,
-  })).isRequired,
-};
-
-NewsCategoriesComponent.displayName = 'NewsCategoriesComponent';
-export default NewsCategoriesComponent;

package/src/components/news/NewsCollageBannerComponent.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { AUNewsHelpers } from '../../lib/au-news';
-
-const NewsCollageBannerComponent = (props) => {
-  const {
-    lang,
-    item,
-    title,
-    type,
-  } = props;
-  const className = `aubanner hastext aubanner-2 ${(type === 'events' ? 'bg-dark-magenta' : 'bg-dark-staff')}`;
-  const isEvent = AUNewsHelpers.typeIdToText(item.type) === 'event';
-  let multipleDates = false;
-  let dateStr = item.date;
-  if (isEvent) {
-    const { fromDate, toDate } = AUNewsHelpers.getEventDates(item, lang);
-    multipleDates = fromDate.getTime() !== toDate.getTime();
-    dateStr = `${item.event_from.date} ${item.event_from.time} - ${(multipleDates ? `${item.event_to.date} ` : '')}${item.event_to.time}`;
-  }
-
-  return (
-    <div className={className}>
-      <a href={item.url} className="au_noborder">
-        {(() => {
-          if (item.image.href !== '') {
-            return <img src={item.image.href} alt="" />;
-          }
-          return null;
-        })()}
-        <div className="aubanner-content">
-          <h3>{title}</h3>
-          <h2 dangerouslySetInnerHTML={{ __html: item.header }} />
-          <p dangerouslySetInnerHTML={{ __html: item.subheader }} />
-          <p>
-            <span>{dateStr}</span>
-            <span>{item.event_where}</span>
-          </p>
-        </div>
-      </a>
-    </div>
-  );
-};
-
-NewsCollageBannerComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  item: PropTypes.shape({
-    image: PropTypes.shape({
-      href: PropTypes.string.isRequired,
-    }).isRequired,
-    header: PropTypes.string.isRequired,
-    event_from: PropTypes.shape({
-      date: PropTypes.string.isRequired,
-      time: PropTypes.string.isRequired,
-    }).isRequired,
-    event_to: PropTypes.shape({
-      date: PropTypes.string.isRequired,
-      time: PropTypes.string.isRequired,
-    }).isRequired,
-    event_where: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-    date: PropTypes.string.isRequired,
-    subheader: PropTypes.string.isRequired,
-  }).isRequired,
-  title: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-};
-
-NewsCollageBannerComponent.displayName = 'NewsCollageBannerComponent';
-export default NewsCollageBannerComponent;

package/src/components/news/NewsCollageBannerRSSComponent.js

@@ -1,79 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const appendZero = (datePart) => `${datePart < 10 ? '0' : ''}${datePart}`;
-const strDateTime = (dateTime, lang, showTime = false) => {
-  if (lang === 'da') {
-    if (showTime) {
-      return `${appendZero(dateTime.getDate())}.${appendZero(dateTime.getMonth() + 1)}.${dateTime.getFullYear()} ${appendZero(dateTime.getHours())}:${appendZero(dateTime.getMinutes())}`;
-    }
-    return `${appendZero(dateTime.getDate())}.${appendZero(dateTime.getMonth() + 1)}.${dateTime.getFullYear()}`;
-  }
-
-  if (showTime) {
-    return `${appendZero(dateTime.getMonth() + 1)}.${appendZero(dateTime.getDate())}.${dateTime.getFullYear()} ${appendZero(dateTime.getHours())}:${appendZero(dateTime.getMinutes())}`;
-  }
-
-  return `${appendZero(dateTime.getMonth() + 1)}.${appendZero(dateTime.getDate())}.${dateTime.getFullYear()}`;
-};
-
-const NewsCollageBannerComponent = (props) => {
-  const {
-    lang,
-    item,
-    title,
-    type,
-  } = props;
-  const className = `aubanner hastext aubanner-2 ${(type === 'events' ? 'bg-dark-magenta' : 'bg-dark-staff')}`;
-  const isEvent = item.Type === 1; // Enum fra C#
-  const published = new Date(item.Published);
-  let dateStr = strDateTime(published, lang);
-
-  if (isEvent) {
-    const eventFrom = new Date(item.EventFrom);
-    const eventTo = new Date(item.EventTo);
-    const multipleDates = eventFrom !== eventTo;
-    dateStr = `${strDateTime(eventFrom, lang, true)}${multipleDates ? ` – ${strDateTime(eventTo, lang, true)}` : ''}`;
-  }
-
-  return (
-    <div className={className}>
-      <a href={item.Uri} className="au_noborder">
-        {
-          !!item.Image && (
-            <img src={item.Image} alt={item.Header} />
-          )
-        }
-        <div className="aubanner-content">
-          <h3>{title}</h3>
-          <h2 dangerouslySetInnerHTML={{ __html: item.Header }} />
-          <p dangerouslySetInnerHTML={{ __html: item.SubHeader }} />
-          <p>
-            <span>{dateStr}</span>
-            <span>{item.EventWhere}</span>
-          </p>
-        </div>
-      </a>
-    </div>
-  );
-};
-
-NewsCollageBannerComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  item: PropTypes.shape({
-    Published: PropTypes.instanceOf(Date).isRequired,
-    Type: PropTypes.number.isRequired,
-    Image: PropTypes.string.isRequired,
-    Header: PropTypes.string.isRequired,
-    SubHeader: PropTypes.string.isRequired,
-    Uri: PropTypes.string.isRequired,
-    EventWhere: PropTypes.string.isRequired,
-    EventFrom: PropTypes.instanceOf(Date).isRequired,
-    EventTo: PropTypes.instanceOf(Date).isRequired,
-  }).isRequired,
-  title: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-};
-
-NewsCollageBannerComponent.displayName = 'NewsCollageBannerComponent';
-export default NewsCollageBannerComponent;