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

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/delphinus/AUTabbedContentComponent.js

@@ -1,53 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { setTabbedContent } from '@aarhus-university/au-designsystem-delphinus/source/js/components/tabs';
-
-const AUTabbedContentComponent = ({
-  tabKey,
-  tabs,
-  children,
-  focus,
-  initial,
-  lang,
-}) => {
-  const tabsElement = useRef();
-  useEffect(() => {
-    setTabbedContent(tabKey, tabsElement.current, initial, focus);
-  }, []);
-
-  const renderTabs = tabs.map((tab) => <a key={tab.href} href={tab.href} className="nav__item" dangerouslySetInnerHTML={{ __html: tab.text }} />);
-
-  return (
-    <div ref={tabsElement} className="tabbed-content">
-      <div className="nav nav--has-active-item">
-        <div className="nav__items">
-          {renderTabs}
-        </div>
-        <button className="nav__toggle">{lang === 'da' ? 'Mere' : 'More'}</button>
-      </div>
-      {children}
-    </div>
-  );
-};
-
-AUTabbedContentComponent.defaultProps = {
-  tabKey: 0,
-  focus: true,
-  initial: 0,
-  lang: 'da',
-};
-
-AUTabbedContentComponent.propTypes = {
-  tabKey: PropTypes.number,
-  tabs: PropTypes.shape({
-    text: PropTypes.string.isRequired,
-    href: PropTypes.string.isRequired,
-  }).isRequired,
-  children: PropTypes.element.isRequired,
-  focus: PropTypes.bool,
-  initial: PropTypes.number,
-  lang: PropTypes.string,
-};
-
-AUTabbedContentComponent.displayName = 'AUTabbedContentComponent';
-export default AUTabbedContentComponent;

package/src/components/delphinus/hooks.js

@@ -1,25 +0,0 @@
-import { useState, useEffect } from 'react';
-
-const useModal = (domId, initialState, showCondition = true, hideCondition = true) => {
-  const [modal, setModal] = useState({ modal: initialState, sender: null });
-
-  useEffect(() => {
-    if (modal.modal && modal.sender && showCondition) {
-      showModal(domId, modal.sender, () => {
-        setModal({ modal: false, sender: null });
-      });
-    }
-
-    if (modal.modal && modal.sender && hideCondition) {
-      hideModal(domId, modal.sender, () => {
-        setModal({ modal: false, sender: null });
-      });
-    }
-  });
-
-  return [modal, setModal];
-};
-
-export {
-  useModal,
-};

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/NewsColumnsComponent.js

@@ -1,125 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import EventLayout1Component from './EventLayout1Component';
-import EventLayout2Component from './EventLayout2Component';
-import EventLayout3Component from './EventLayout3Component';
-import NewsLayout1Component from './NewsLayout1Component';
-import NewsLayout2Component from './NewsLayout2Component';
-import NewsLayout3Component from './NewsLayout3Component';
-import NewsLayout4Component from './NewsLayout4Component';
-import NewsLayout5Component from './NewsLayout5Component';
-import NewsLayout6Component from './NewsLayout6Component';
-import NewsLayout7Component from './NewsLayout7Component';
-import NewsLayout8Component from './NewsLayout8Component';
-
-const NewsColumnsComponent = (props) => {
-  const layouts = [
-    <NewsLayout1Component />,
-    <NewsLayout2Component />,
-    <NewsLayout3Component />,
-    <NewsLayout4Component />,
-    <NewsLayout5Component />,
-    <NewsLayout6Component />,
-    <NewsLayout7Component />,
-    <NewsLayout8Component />,
-  ];
-
-  const layoutsEvents = [
-    <EventLayout1Component />,
-    <EventLayout2Component />,
-    <EventLayout3Component />,
-  ];
-
-  const {
-    type,
-    cols,
-    items,
-    setPopupItem,
-    incrementPointer,
-    listid,
-    lang,
-  } = props;
-  let count = -1;
-  const headerElementValue = type === 'events' ? 3 : 6;
-  const renderColumns = cols.map((col, i) => {
-    const outerKey = i; // LOL
-    let isHeader = false;
-    const renderItems = col.map((element, j) => {
-      const innerKey = j; // Mere LOL
-      count += 1;
-      if (parseInt(element, 10) === headerElementValue && !isHeader) {
-        isHeader = true;
-        const hItems = [];
-        for (let x = j; x < col.length; x += 1) {
-          if (parseInt(col[x], 10) === headerElementValue) {
-            hItems.push(items[count + x]);
-          } else {
-            break;
-          }
-        }
-
-        if (type === 'events') {
-          return (
-            <EventLayout3Component
-              key={innerKey}
-              listid={listid}
-              items={hItems}
-              setPopupItem={setPopupItem}
-              lang={lang}
-            />
-          );
-        }
-
-        return (
-          <NewsLayout6Component
-            key={innerKey}
-            listid={listid}
-            items={hItems}
-            setPopupItem={setPopupItem}
-            lang={lang}
-          />
-        );
-      }
-
-      if (parseInt(element, 10) !== headerElementValue) {
-        incrementPointer();
-        isHeader = false;
-        const layoutsArray = type === 'events' ? layoutsEvents : layouts;
-        return React.cloneElement(layoutsArray[parseInt(element, 10) - 1], {
-          key: innerKey,
-          item: items[count],
-          listid,
-          setPopupItem,
-          lang,
-        });
-      }
-
-      return null;
-    });
-
-    return (
-      <div key={outerKey} className="column large-6 medium-6 small-12">
-        {renderItems}
-      </div>
-    );
-  });
-
-  return (
-    <div className="row">
-      {renderColumns}
-    </div>
-  );
-};
-
-NewsColumnsComponent.propTypes = {
-  type: PropTypes.string.isRequired,
-  cols: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  items: PropTypes.shape({}).isRequired,
-  setPopupItem: PropTypes.func.isRequired,
-  incrementPointer: PropTypes.func.isRequired,
-  listid: PropTypes.number.isRequired,
-  lang: PropTypes.bool.isRequired,
-};
-
-NewsColumnsComponent.displayName = 'NewsColumnsComponent';
-export default NewsColumnsComponent;