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

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;

package/src/components/news/NewsLanguageChangeComponent.js

@@ -1,74 +0,0 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-class NewsLanguageChangeComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const { item } = props;
-    this.state = {
-      item,
-      lang: -1,
-      altLangLink: '',
-    };
-  }
-
-  componentDidMount() {
-    const { getItem, lang: pLang } = this.props;
-    const { item } = this.state;
-    const lang = pLang === 'da' ? 1 : 0;
-    let changeLangElement = document.querySelector('.language-selector a');
-    if (!changeLangElement) {
-      // Oh for fuck sake! Medarbejderheaderen...
-      changeLangElement = document.querySelector('.languageselector a');
-    }
-    if (changeLangElement) {
-      const t3LangChangeLink = changeLangElement.getAttribute('href');
-      if (t3LangChangeLink) {
-        getItem(item.id, lang, (data) => {
-          let hasAltLanguage = false;
-          const pl = data.permalink;
-          if (lang === 0 && pl.indexOf('/en/') === -1) {
-            // Klik på "dansk" fra engelsk nyhed
-            hasAltLanguage = true;
-          }
-          if (lang === 1 && pl.indexOf('/en/') > -1) {
-            // Klik på "english" fra dansk nyhed
-            hasAltLanguage = true;
-          }
-
-          if (hasAltLanguage) {
-            this.setState({
-              altLangLink: `${t3LangChangeLink}#news-${item.id}`,
-              lang,
-            });
-          }
-        });
-      }
-    }
-  }
-
-  render() {
-    const { lang, altLangLink } = this.state;
-    if (lang === -1) {
-      return <span />;
-    }
-
-    return (
-      <span className="au_news-single-language">
-        <a href={altLangLink}>{lang === 1 ? 'English' : 'Danish'}</a>
-      </span>
-    );
-  }
-}
-
-NewsLanguageChangeComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  item: PropTypes.shape({
-  }).isRequired,
-  getItem: PropTypes.func.isRequired,
-};
-
-NewsLanguageChangeComponent.displayName = 'NewsLanguageChangeComponent';
-export default NewsLanguageChangeComponent;

package/src/components/news/NewsLayout1Component.js

@@ -1,80 +0,0 @@
-/* eslint jsx-a11y/control-has-associated-label: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import NewsSubHeaderComponent from './NewsSubHeaderComponent';
-import NewsCategoriesComponent from './NewsCategoriesComponent';
-import { AUNewsHelpers } from '../../lib/au-news';
-
-const NewsLayout1Component = (props) => {
-  const { item, listid, setPopupItem } = props;
-  if (!item) {
-    return <div />;
-  }
-
-  const i = AUNewsHelpers.setExternal(item);
-  const domID = `news-${listid}-${i.id}`;
-
-  return (
-    <div id={domID} className="au_news-list1-item">
-      {(() => {
-        if (i.image) {
-          return (
-            <div className="au_news-list-item-img">
-              <a
-                onClick={() => {
-                  if (!i.external) {
-                    setPopupItem(item);
-                  }
-                }}
-                href={i.url}
-                title={i.header}
-              >
-                <img src={i.image.layout1} alt="" />
-              </a>
-            </div>
-          );
-        }
-        return null;
-      })()}
-      <div className="au_news-list-item-text">
-        <h2>
-          <a
-            onClick={() => {
-              if (!i.external) {
-                setPopupItem(item);
-              }
-            }}
-            href={i.url}
-            title={i.header}
-            dangerouslySetInnerHTML={{ __html: i.header }}
-          />
-        </h2>
-        <p className="au_news-legend">
-          <span className="au_news-list-date">{i.date}</span>
-          {'  |  '}
-          <NewsCategoriesComponent categories={i.categories} />
-        </p>
-        <NewsSubHeaderComponent subheader={i.subheader} trim={350} />
-      </div>
-    </div>
-  );
-};
-
-NewsLayout1Component.propTypes = {
-  item: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    header: PropTypes.string.isRequired,
-    subheader: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-    external: PropTypes.bool.isRequired,
-    date: PropTypes.string.isRequired,
-    categories: PropTypes.arrayOf(PropTypes.shape({
-
-    })).isRequired,
-  }).isRequired,
-  listid: PropTypes.number.isRequired,
-  setPopupItem: PropTypes.func.isRequired,
-};
-
-NewsLayout1Component.displayName = 'NewsLayout1Component';
-export default NewsLayout1Component;

package/src/components/news/NewsLayout2Component.js

@@ -1,80 +0,0 @@
-/* eslint jsx-a11y/control-has-associated-label: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import NewsSubHeaderComponent from './NewsSubHeaderComponent';
-import NewsCategoriesComponent from './NewsCategoriesComponent';
-import { AUNewsHelpers } from '../../lib/au-news';
-
-const NewsLayout2Component = (props) => {
-  const { item, listid, setPopupItem } = props;
-  if (!item) {
-    return <div />;
-  }
-
-  const i = AUNewsHelpers.setExternal(item);
-  const domID = `news-${listid}-${i.id}`;
-
-  return (
-    <div id={domID} className="au_news-list2-item">
-      {(() => {
-        if (i.image) {
-          return (
-            <div className="au_news-list-item-img">
-              <a
-                onClick={() => {
-                  if (!i.external) {
-                    setPopupItem(item);
-                  }
-                }}
-                href={i.url}
-                title={i.header}
-              >
-                <img src={i.image.layout2} alt="" />
-              </a>
-            </div>
-          );
-        }
-        return null;
-      })()}
-      <div className="au_news-list-item-text">
-        <h2>
-          <a
-            onClick={() => {
-              if (!i.external) {
-                setPopupItem(item);
-              }
-            }}
-            href={i.url}
-            title={i.header}
-            dangerouslySetInnerHTML={{ __html: i.header }}
-          />
-        </h2>
-        <p className="au_news-legend">
-          <span className="au_news-list-date">{i.date}</span>
-          {'  |  '}
-          <NewsCategoriesComponent categories={i.categories} />
-        </p>
-        <NewsSubHeaderComponent subheader={i.subheader} trim={350} />
-      </div>
-    </div>
-  );
-};
-
-NewsLayout2Component.propTypes = {
-  item: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    header: PropTypes.string.isRequired,
-    subheader: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-    external: PropTypes.bool.isRequired,
-    date: PropTypes.string.isRequired,
-    categories: PropTypes.arrayOf(PropTypes.shape({
-
-    })).isRequired,
-  }).isRequired,
-  listid: PropTypes.number.isRequired,
-  setPopupItem: PropTypes.func.isRequired,
-};
-
-NewsLayout2Component.displayName = 'NewsLayout2Component';
-export default NewsLayout2Component;

package/src/components/news/NewsLayout3Component.js

@@ -1,81 +0,0 @@
-/* eslint jsx-a11y/control-has-associated-label: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import NewsSubHeaderComponent from './NewsSubHeaderComponent';
-import NewsCategoriesComponent from './NewsCategoriesComponent';
-import { AUNewsHelpers } from '../../lib/au-news';
-
-const NewsLayout3Component = (props) => {
-  const { item, listid, setPopupItem } = props;
-  if (!item) {
-    return <div />;
-  }
-
-  const i = AUNewsHelpers.setExternal(item);
-
-  const domID = `news-${listid}-${i.id}`;
-
-  return (
-    <div id={domID} className="au_news-list3-item">
-      {(() => {
-        if (i.image) {
-          return (
-            <div className="au_news-list-item-img">
-              <a
-                onClick={() => {
-                  if (!i.external) {
-                    setPopupItem(item);
-                  }
-                }}
-                href={i.url}
-                title={i.header}
-              >
-                <img src={i.image.layout3} alt="" />
-              </a>
-            </div>
-          );
-        }
-        return null;
-      })()}
-      <div className="au_news-list-item-text">
-        <p className="au_news-legend">
-          <span className="au_news-list-date">{i.date}</span>
-          {'  |  '}
-          <NewsCategoriesComponent categories={i.categories} />
-        </p>
-        <h2>
-          <a
-            onClick={() => {
-              if (!i.external) {
-                setPopupItem(item);
-              }
-            }}
-            href={i.url}
-            title={i.header}
-            dangerouslySetInnerHTML={{ __html: i.header }}
-          />
-        </h2>
-        <NewsSubHeaderComponent subheader={i.subheader} trim={350} />
-      </div>
-    </div>
-  );
-};
-
-NewsLayout3Component.propTypes = {
-  item: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    header: PropTypes.string.isRequired,
-    subheader: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-    external: PropTypes.bool.isRequired,
-    date: PropTypes.string.isRequired,
-    categories: PropTypes.arrayOf(PropTypes.shape({
-
-    })).isRequired,
-  }).isRequired,
-  listid: PropTypes.number.isRequired,
-  setPopupItem: PropTypes.func.isRequired,
-};
-
-NewsLayout3Component.displayName = 'NewsLayout3Component';
-export default NewsLayout3Component;

package/src/components/news/NewsLayout4Component.js

@@ -1,80 +0,0 @@
-/* eslint jsx-a11y/control-has-associated-label: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import NewsSubHeaderComponent from './NewsSubHeaderComponent';
-import NewsCategoriesComponent from './NewsCategoriesComponent';
-import { AUNewsHelpers } from '../../lib/au-news';
-
-const NewsLayout4Component = (props) => {
-  const { item, listid, setPopupItem } = props;
-  if (!item) {
-    return <div />;
-  }
-
-  const i = AUNewsHelpers.setExternal(item);
-  const domID = `news-${listid}-${i.id}`;
-
-  return (
-    <div id={domID} className="au_news-list4-item">
-      {(() => {
-        if (i.image) {
-          return (
-            <div className="au_news-list-item-img">
-              <a
-                onClick={() => {
-                  if (!i.external) {
-                    setPopupItem(item);
-                  }
-                }}
-                href={i.url}
-                title={i.header}
-              >
-                <img src={i.image.layout4} alt="" />
-              </a>
-            </div>
-          );
-        }
-        return null;
-      })()}
-      <div className="au_news-list-item-text">
-        <p className="au_news-legend">
-          <span className="au_news-list-date">{i.date}</span>
-          {'  |  '}
-          <NewsCategoriesComponent categories={i.categories} />
-        </p>
-        <h2>
-          <a
-            onClick={() => {
-              if (!i.external) {
-                setPopupItem(item);
-              }
-            }}
-            href={i.url}
-            title={i.header}
-            dangerouslySetInnerHTML={{ __html: i.header }}
-          />
-        </h2>
-        <NewsSubHeaderComponent subheader={i.subheader} trim={350} />
-      </div>
-    </div>
-  );
-};
-
-NewsLayout4Component.propTypes = {
-  item: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    header: PropTypes.string.isRequired,
-    subheader: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-    external: PropTypes.bool.isRequired,
-    date: PropTypes.string.isRequired,
-    categories: PropTypes.arrayOf(PropTypes.shape({
-
-    })).isRequired,
-  }).isRequired,
-  listid: PropTypes.number.isRequired,
-  setPopupItem: PropTypes.func.isRequired,
-};
-
-NewsLayout4Component.displayName = 'NewsLayout4Component';
-export default NewsLayout4Component;

package/src/components/news/NewsLayout5Component.js

@@ -1,61 +0,0 @@
-/* eslint jsx-a11y/control-has-associated-label: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import NewsSubHeaderComponent from './NewsSubHeaderComponent';
-import NewsCategoriesComponent from './NewsCategoriesComponent';
-import { AUNewsHelpers } from '../../lib/au-news';
-
-const NewsLayout5Component = (props) => {
-  const { item, listid, setPopupItem } = props;
-  if (!item) {
-    return <div />;
-  }
-
-  const i = AUNewsHelpers.setExternal(item);
-
-  const domID = `news-${listid}-${i.id}`;
-
-  return (
-    <div id={domID} className="au_news-list5-item">
-      <div className="au_news-list-item-text">
-        <p className="au_news-legend">
-          <span className="au_news-list-date">{i.date}</span>
-          {'  |  '}
-          <NewsCategoriesComponent categories={i.categories} />
-        </p>
-        <h2>
-          <a
-            onClick={() => {
-              if (!i.external) {
-                setPopupItem(item);
-              }
-            }}
-            href={i.url}
-            title={i.header}
-            dangerouslySetInnerHTML={{ __html: i.header }}
-          />
-        </h2>
-        <NewsSubHeaderComponent subheader={i.subheader} trim={350} />
-      </div>
-    </div>
-  );
-};
-
-NewsLayout5Component.propTypes = {
-  item: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    header: PropTypes.string.isRequired,
-    subheader: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-    external: PropTypes.bool.isRequired,
-    date: PropTypes.string.isRequired,
-    categories: PropTypes.arrayOf(PropTypes.shape({
-
-    })).isRequired,
-  }).isRequired,
-  listid: PropTypes.number.isRequired,
-  setPopupItem: PropTypes.func.isRequired,
-};
-
-NewsLayout5Component.displayName = 'NewsLayout5Component';
-export default NewsLayout5Component;

package/src/components/news/NewsLayout6Component.js

@@ -1,55 +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 NewsLayout6Component = (props) => {
-  const { items, listid, setPopupItem } = props;
-  const renderItems = items.map((_i, j) => {
-    let i = _i;
-    const key = j;
-    if (i) {
-      i = AUNewsHelpers.setExternal(i);
-      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 }}
-          />
-        </li>
-      );
-    }
-    return null;
-  });
-
-  return (
-    <div className="au_news-header-list">
-      <ul>
-        {renderItems}
-      </ul>
-    </div>
-  );
-};
-
-NewsLayout6Component.propTypes = {
-  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,
-};
-
-NewsLayout6Component.displayName = 'NewsLayout6Component';
-export default NewsLayout6Component;

package/src/components/news/NewsLayout7Component.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { newsLabels as labels } from '../../lib/i18n';
-import { AUNewsHelpers } from '../../lib/au-news';
-
-const NewsLayout7Component = (props) => {
-  const {
-    item,
-    listid,
-    setPopupItem,
-    lang,
-  } = props;
-  if (!item) {
-    return <div />;
-  }
-
-  const i = AUNewsHelpers.setExternal(item);
-  const domID = `news-${listid}-${i.id}`;
-
-  return (
-    <div id={domID} className="au_focus" style={{ backgroundImage: `url('${i.image ? i.image.src : ''}')` }}>
-      <div className="au_focus_content">
-        <h1 dangerouslySetInnerHTML={{ __html: i.header }} />
-        <p>{i.subheader}</p>
-        <ul>
-          <li>
-            <a
-              onClick={() => {
-                if (!i.external) {
-                  setPopupItem(props.item);
-                }
-              }}
-              href={i.url}
-            >
-              {labels[lang].news.readMore}
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  );
-};
-
-NewsLayout7Component.propTypes = {
-  lang: PropTypes.string.isRequired,
-  item: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    header: PropTypes.string.isRequired,
-    subheader: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-    external: PropTypes.bool.isRequired,
-  }).isRequired,
-  listid: PropTypes.number.isRequired,
-  setPopupItem: PropTypes.func.isRequired,
-};
-
-NewsLayout7Component.displayName = 'NewsLayout7Component';
-export default NewsLayout7Component;