@performant-software/semantic-components 0.5.1

package/src/components/MasonryGrid.js

@@ -0,0 +1,202 @@
+// @flow
+
+import React, {
+  useEffect,
+  useState,
+  type Element,
+  type Node
+} from 'react';
+import {
+  Dimmer,
+  Header,
+  Image,
+  Loader,
+  Pagination,
+  Segment,
+  Transition
+} from 'semantic-ui-react';
+import _ from 'underscore';
+import './MasonryGrid.css';
+
+type Item = {
+  alt: string,
+  extra?: Element<any> | string,
+  id: number,
+  image: string,
+  subtitle?: string,
+  title?: string,
+};
+
+type LayoutProps = {
+  children: Array<Node>,
+  columns: number,
+  gap: number
+};
+
+const MasonryLayout = (props: LayoutProps) => {
+  const columnWrapper = {};
+  const result = [];
+
+  // create columns
+  for (let i = 0; i < props.columns; i += 1) {
+    columnWrapper[`column${i}`] = [];
+  }
+
+  // divide children into columns
+  for (let i = 0; i < props.children.length; i += 1) {
+    const columnIndex = i % props.columns;
+    columnWrapper[`column${columnIndex}`].push(
+      <div
+        className='itemContainer'
+        key={i}
+        style={{
+          marginBottom: `${props.gap}px`
+        }}
+      >
+        { props.children[i] }
+      </div>
+    );
+  }
+
+  // wrap children in each column with a div
+  for (let i = 0; i < props.columns; i += 1) {
+    result.push(
+      <div
+        className='column'
+        key={i}
+        style={{
+          marginLeft: `${i > 0 ? props.gap : 0}px`
+        }}
+      >
+        { columnWrapper[`column${i}`] }
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className='masonryGrid'
+    >
+      { result }
+    </div>
+  );
+};
+
+type TileProps = {
+  item: Item,
+  onClick?: (item: any) => void,
+  renderContent?: (item: Item) => Node
+};
+
+const HEIGHT_OFFSET = 350;
+const MIN_HEIGHT = 175;
+
+const MasonryTile = (props: TileProps) => {
+  const [dimmerActive, setDimmerActive] = useState(false);
+  const [height, setHeight] = useState(0);
+
+  /**
+   * Calculate the height of the tile once the component mounts.
+   */
+  useEffect(() => {
+    setHeight(MIN_HEIGHT + Math.ceil(Math.random() * HEIGHT_OFFSET));
+  }, []);
+
+  return (
+    <Dimmer.Dimmable
+      className='item'
+      dimmed={dimmerActive}
+      onClick={() => props.onClick && props.onClick(props.item)}
+      onMouseEnter={() => setDimmerActive(true)}
+      onMouseLeave={() => setDimmerActive(false)}
+      style={{
+        cursor: props.onClick ? 'pointer' : undefined,
+        height: `${height}px`
+      }}
+    >
+      <Transition
+        duration={800}
+        visible={dimmerActive}
+      >
+        <Dimmer.Inner
+          active={dimmerActive}
+        >
+          <Header
+            content={props.item.title}
+            inverted
+            subheader={props.item.subtitle}
+          />
+          { props.item.extra && (
+            <div
+              className='extraContainer'
+            >
+              { props.item.extra }
+            </div>
+          )}
+        </Dimmer.Inner>
+      </Transition>
+      <Image
+        alt={props.item.alt}
+        className='image'
+        src={props.item.image}
+      />
+      { props.renderContent && props.renderContent(props.item) }
+    </Dimmer.Dimmable>
+  );
+};
+
+type Props = {
+  columns: number,
+  gap: number,
+  items: Array<Item>,
+  loading?: boolean,
+  onClick?: (item: any) => void,
+  onPageChange?: (page: number) => void,
+  page: number,
+  pages: number,
+  renderContent?: (item: Item) => Node,
+  renderEmpty?: () => Node
+};
+
+const MasonryGrid = (props: Props) => (
+  <div
+    className='masonry-grid'
+  >
+    <Loader
+      active={props.loading}
+    />
+    <div>
+      <MasonryLayout
+        columns={props.columns}
+        gap={props.gap}
+      >
+        { _.map(props.items, (item, index) => (
+          <MasonryTile
+            key={index}
+            item={item}
+            onClick={props.onClick}
+            renderContent={props.renderContent}
+          />
+        ))}
+      </MasonryLayout>
+      { props.pages > 1 && props.onPageChange && (
+        <Segment
+          basic
+          textAlign='center'
+        >
+          <Pagination
+            activePage={props.page}
+            firstItem={null}
+            lastItem={null}
+            onPageChange={(e, { activePage }) => props.onPageChange && props.onPageChange(activePage)}
+            totalPages={props.pages}
+            size='small'
+          />
+        </Segment>
+      )}
+    </div>
+    { !props.loading && !(props.items && props.items.length) && props.renderEmpty && props.renderEmpty() }
+  </div>
+);
+
+export default MasonryGrid;

package/src/components/MediaGallery.css

@@ -0,0 +1,37 @@
+.mediaGallery.ui.page.dimmer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.mediaGallery.ui.page.dimmer .imageContainer {
+  position: relative;
+  flex-grow: 1;
+}
+
+.mediaGallery.ui.page.dimmer .controls {
+  position: absolute;
+}
+
+.mediaGallery.ui.page.dimmer .left {
+  left: 1em;
+}
+
+.mediaGallery.ui.page.dimmer .right {
+  right: 1em;
+}
+
+.mediaGallery.ui.page.dimmer .top {
+  top: 1em;
+}
+
+.mediaGallery.ui.page.dimmer .middle {
+  top: 50%;
+}
+
+.mediaGallery.ui.page.transition > .content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

package/src/components/MediaGallery.js

@@ -0,0 +1,148 @@
+// @flow
+
+import React, { useState, type Element } from 'react';
+import {
+  Button,
+  Dimmer, Image,
+  Loader,
+  Transition
+} from 'semantic-ui-react';
+import PlayButton from './PlayButton';
+import VideoPlayer from './VideoPlayer';
+import VideoPlayerButton from './VideoPlayerButton';
+import './MediaGallery.css';
+
+type Item = {
+  image?: string,
+  embedded?: boolean,
+  preview?: string,
+  src?: string,
+  type: 'image' | 'video'
+};
+
+type Props = {
+  item: Item,
+  label?: string,
+  loading?: boolean,
+  onClose?: () => void,
+  onNext?: () => void,
+  onPrevious?: () => void,
+  renderContent?: () => Element<any>,
+  visible: boolean
+};
+
+const MediaGallery = (props: Props) => {
+  const [video, setVideo] = useState(false);
+
+  return (
+    <Dimmer
+      active={props.visible}
+      className='media-gallery mediaGallery'
+      page
+    >
+      { props.loading && (
+        <Loader
+          active
+          size='big'
+        />
+      )}
+      { props.item && (
+        <>
+          <Transition
+            animation='fade'
+            mountOnShow={false}
+          >
+            <div
+              className='imageContainer'
+            >
+              <Image
+                src={props.item.image}
+                style={{
+                  objectFit: 'contain'
+                }}
+              />
+              { props.item.type === 'video' && (
+                <PlayButton
+                  onClick={() => setVideo(true)}
+                  style={{
+                    position: 'absolute',
+                    top: '50%'
+                  }}
+                />
+              )}
+            </div>
+          </Transition>
+          { props.renderContent && props.renderContent() }
+          { props.onClose && (
+            <div
+              className='controls top right'
+            >
+              <Button
+                basic
+                circular
+                icon='times'
+                inverted
+                onClick={props.onClose}
+                size='large'
+              />
+            </div>
+          )}
+          { props.label && (
+            <div
+              className='controls top left'
+            >
+              <Button
+                basic
+                content={props.label}
+                inverted
+                size='large'
+              />
+            </div>
+          )}
+          { props.onPrevious && (
+            <div
+              className='controls middle left'
+            >
+              <Button
+                basic
+                disabled={!props.onPrevious}
+                inverted
+                icon='angle left'
+                onClick={props.onPrevious}
+                size='huge'
+              />
+            </div>
+          )}
+          { props.onNext && (
+            <div
+              className='controls middle right'
+            >
+              <Button
+                basic
+                disabled={!props.onNext}
+                inverted
+                icon='angle right'
+                onClick={props.onNext}
+                size='huge'
+              />
+            </div>
+          )}
+          { props.item.src && (
+            <VideoPlayer
+              autoPlay
+              embedded={props.item.embedded}
+              icon={<VideoPlayerButton />}
+              onClose={() => setVideo(false)}
+              open={video}
+              placeholder={props.item.preview}
+              size='huge'
+              video={props.item.src}
+            />
+          )}
+        </>
+      )}
+    </Dimmer>
+  );
+};
+
+export default MediaGallery;

package/src/components/MediaGrid.css

@@ -0,0 +1,72 @@
+.mediaGrid {
+  position: relative;
+}
+
+.mediaGrid .grid1 {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-gap: 10px;
+  width: 100%;
+}
+
+.mediaGrid .grid2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 10px;
+  width: 100%;
+}
+
+.mediaGrid .grid3 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(2, 235px);
+  grid-gap: 10px;
+  width: 100%;
+}
+
+.mediaGrid .grid3 .mediaImage:first-child {
+  grid-column: span 2;
+  grid-row: span 2;
+}
+
+.mediaGrid .grid3 .mediaImage {
+  grid-column: span 2;
+}
+
+.mediaGrid .grid4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(2, 235px);
+  grid-gap: 10px;
+  width: 100%;
+}
+
+.mediaGrid .grid4 .mediaImage:first-child {
+  grid-column: span 2;
+  grid-row: span 2;
+}
+
+.mediaGrid .grid4 .mediaImage:nth-child(4) {
+  grid-column: span 2;
+}
+
+.mediaGrid .grid5 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  width: 100%;
+}
+
+.mediaGrid .grid5 .mediaImage:first-child {
+  grid-column: span 2;
+  grid-row: span 2;
+}
+
+.mediaGrid .mediaImage {
+  position: relative;
+}
+
+.mediaGrid .mediaImage div {
+  height: 100%;
+  width: 100%;
+}

package/src/components/MediaGrid.js

@@ -0,0 +1,74 @@
+// @flow
+
+import React, { useEffect, useState } from 'react';
+import { Image, Loader } from 'semantic-ui-react';
+import _ from 'underscore';
+import './MediaGrid.css';
+
+type Item = {
+  image: string
+};
+
+type Props = {
+  items: Array<Item>,
+  loading?: boolean,
+  onClick?: (item: Item) => void
+};
+
+const MAX_IMAGES = 5;
+
+const MediaGrid = (props: Props) => {
+  const [items, setItems] = useState([]);
+
+  /**
+   * Grab the list of image URLs to display and save it on the sate.
+   */
+  useEffect(() => {
+    const list = [];
+
+    for (let i = 0; i < props.items.length && list.length < MAX_IMAGES; i += 1) {
+      if (!_.isEmpty(props.items[i].image)) {
+        list.push(props.items[i]);
+      }
+    }
+
+    setItems(list);
+  }, [props.items]);
+
+  // Return null if no items are passed
+  if (_.isEmpty(props.items)) {
+    return null;
+  }
+
+  return (
+    <div
+      className='mediaGrid'
+    >
+      <Loader
+        active={props.loading}
+      />
+      <div
+        className={`grid${items.length}`}
+      >
+        { _.map(items, (item, index) => (
+          <div
+            className='mediaImage'
+            key={index}
+          >
+            <Image
+              onClick={() => props.onClick && props.onClick(item)}
+              src={item.image}
+              style={{
+                cursor: props.onClick ? 'pointer' : undefined,
+                objectFit: 'cover',
+                width: '100%'
+              }}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MediaGrid;

package/src/components/MediaList.css

@@ -0,0 +1,3 @@
+.mediaList .ui.cards > .card > .meta {
+  padding: 0.5em;
+}

package/src/components/MediaList.js

@@ -0,0 +1,98 @@
+// @flow
+
+import React, { type Element } from 'react';
+import { InfiniteScroll } from '@performant-software/shared-components';
+import { Card, Image } from 'semantic-ui-react';
+import _ from 'underscore';
+import ListLoader from './ListLoader';
+import PlayButton from './PlayButton';
+import './MediaList.css';
+
+type Item = {
+  ...any,
+  image: string,
+  type: 'image' | 'video'
+};
+
+type Props = {
+  items: Array<Item>,
+  loading?: boolean,
+  onBottomReached: () => void,
+  onClick: (item: any, index: number) => void,
+  renderDescription?: (item: Item) => Element<any>,
+  renderExtra?: (item: Item) => Element<any>,
+  renderHeader?: (item: Item) => Element<any>,
+  renderMeta?: (item: Item) => Element<any>,
+  textAlign?: 'left' | 'center' | 'right'
+};
+
+const MediaList = (props: Props) => (
+  <InfiniteScroll
+    offset={100}
+    onBottomReached={props.onBottomReached}
+  >
+    <ListLoader
+      active={props.loading || false}
+    />
+    <Card.Group
+      doubling
+      stackable
+    >
+      { _.map(props.items, (item, i) => (
+        <Card
+          onClick={props.onClick.bind(this, item, i)}
+        >
+          <Image
+            src={item.image}
+            style={{
+              objectFit: 'cover'
+            }}
+          />
+          { item.type === 'video' && (
+            <div
+              style={{
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)'
+              }}
+            >
+              <PlayButton />
+            </div>
+          )}
+          { (props.renderMeta || props.renderHeader || props.renderDescription) && (
+            <Card.Content>
+              { props.renderHeader && (
+                <Card.Header
+                  content={props.renderHeader(item)}
+                  textAlign={props.textAlign}
+                />
+              )}
+              { props.renderMeta && (
+                <Card.Meta
+                  content={props.renderMeta(item)}
+                  textAlign={props.textAlign}
+                />
+              )}
+              { props.renderDescription && (
+                <Card.Description
+                  content={props.renderDescription(item)}
+                  textAlign={props.textAlign}
+                />
+              )}
+            </Card.Content>
+          )}
+          { props.renderExtra && (
+            <Card.Content
+              content={props.renderExtra(item)}
+              extra
+              textAlign={props.textAlign}
+            />
+          )}
+        </Card>
+      ))}
+    </Card.Group>
+  </InfiniteScroll>
+);
+
+export default MediaList;

package/src/components/ModalDropdown.css

@@ -0,0 +1,11 @@
+.modal-dropdown {
+  width: 90%;
+}
+
+.modal-dropdown .buttons {
+  width: 10%
+}
+
+.modal-dropdown.ui.search.selection.dropdown > input.search {
+  width: 100%;
+}