@performant-software/semantic-components 0.5.1

package/src/components/HorizontalCards.css

@@ -0,0 +1,50 @@
+.horizontal-cards .ui.cards {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+}
+
+.horizontal-cards .ui.cards::-webkit-scrollbar {
+  width: 0 !important;
+  display: none;
+}
+
+.horizontal-cards .ui.cards > .card > .content {
+  flex-grow: 0;
+}
+
+.horizontal-cards .ui.cards > .card > .content > .header {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.horizontal-cards .ui.cards > .card > .content.more {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+}
+
+.horizontal-cards .ui.cards > .card > .content.more > .header {
+  margin-top: 0.5em;
+}
+
+.horizontal-cards .button-container {
+  margin-top: 0.5em;
+}
+
+.horizontal-cards .button-container .pagination {
+  float: right
+}
+
+.horizontal-cards .clearFloat {
+  clear: both;
+}
+
+.horizontal-cards .ui.cards > .card > .image-placeholder {
+  aspect-ratio: 1 / 1;
+}

package/src/components/HorizontalCards.js

@@ -0,0 +1,226 @@
+// @flow
+
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import _ from 'underscore';
+import {
+  Button,
+  Card,
+  Header,
+  Image,
+  Ref
+} from 'semantic-ui-react';
+import './HorizontalCards.css';
+
+type Props = {
+  inlineImage?: boolean,
+  items: Array<any>,
+  onClick?: (item: any, index: number) => void,
+  perPage: number,
+  renderDescription?: (item: any) => Element<any> | string,
+  renderExtra?: (item: any) => Element<any> | string,
+  renderHeader?: (item: any) => Element<any> | string,
+  renderImage: (item: any) => string,
+  renderMeta?: (item: any) => Element<any> | string,
+};
+
+const HorizontalCards = (props: Props) => {
+  const [marginWidth, setMarginWidth] = useState(0);
+  const [pageWidth, setPageWidth] = useState(0);
+  const [scrollPage, setScrollPage] = useState(0);
+  const [scrollPages, setScrollPages] = useState(0);
+
+  const ref = useRef();
+
+  /**
+   * Sets the number of pages and total page width on the state.
+   */
+  useEffect(() => {
+    const instance = ref.current;
+
+    if (instance) {
+      const { clientWidth, scrollWidth } = instance;
+
+      setPageWidth(clientWidth);
+      setScrollPages(Math.ceil(scrollWidth / clientWidth));
+
+      const child = instance.firstChild;
+      if (child) {
+        const style = window.getComputedStyle(child);
+        const leftMargin = parseFloat(style.marginLeft) || 0;
+        const rightMargin = parseFloat(style.marginRight) || 0;
+
+        setMarginWidth(leftMargin + rightMargin);
+      }
+    }
+  }, []);
+
+  /**
+   * Sets the total number of pages on the state.
+   */
+  useEffect(() => {
+    const instance = ref.current;
+
+    if (instance) {
+      const { scrollWidth } = instance;
+      setScrollPages(Math.ceil(scrollWidth / pageWidth));
+    }
+  }, [pageWidth]);
+
+  /**
+   * Scrolls to the new position once the page changes.
+   */
+  useEffect(() => {
+    const instance = ref.current;
+
+    if (instance) {
+      instance.scrollTo({ left: (scrollPage * pageWidth), behavior: 'smooth' });
+    }
+  }, [scrollPage, pageWidth]);
+
+  /**
+   * Sets the current page number on the state.
+   *
+   * @type {function(*): void}
+   */
+  const onPageChange = useCallback((increment) => {
+    let nextPage = scrollPage + increment;
+
+    if (nextPage < 0) {
+      nextPage = scrollPages;
+    } else if (nextPage >= scrollPages) {
+      nextPage = 0;
+    }
+
+    setScrollPage(nextPage);
+  }, [scrollPage, scrollPages]);
+
+  /**
+   * Returns the flex-box style based on the page width.
+   *
+   * @type {function(): {flex: string}}
+   */
+  const getCardStyle = useCallback(() => ({
+    flex: `0 0 ${(pageWidth / props.perPage) - marginWidth}px`
+  }), [pageWidth, marginWidth, props.perPage]);
+
+  /**
+   * Renders the card component. If a "route" prop is passed, the component is wrapped in a Link.
+   *
+   * @param item
+   * @param index
+   *
+   * @returns {JSX.Element}
+   */
+  const renderCard = (item, index) => (
+    <Card
+      link
+      onClick={() => {
+        if (props.onClick) {
+          props.onClick(item, index);
+        }
+      }}
+      style={getCardStyle()}
+    >
+      { !props.inlineImage && renderImage(item) }
+      <Card.Content>
+        { props.inlineImage && renderImage(item) }
+        { props.renderHeader && (
+          <Card.Header
+            as={Header}
+            size='small'
+          >
+            { props.renderHeader(item) }
+          </Card.Header>
+        )}
+        { props.renderMeta && (
+          <Card.Meta>
+            { props.renderMeta(item) }
+          </Card.Meta>
+        )}
+        { props.renderDescription && (
+          <Card.Description>
+            { props.renderDescription(item) }
+          </Card.Description>
+        )}
+      </Card.Content>
+      { props.renderExtra && (
+        <Card.Content
+          extra
+        >
+          { props.renderExtra(item) }
+        </Card.Content>
+      )}
+    </Card>
+  );
+
+  /**
+   * Renders the image based on the return type of the renderImage prop. String values returned will be assumed to be
+   * a src attribute for the image.
+   *
+   * @type {(function(*=): (*))|*}
+   */
+  const renderImage = useCallback((item) => {
+    const image = props.renderImage(item);
+
+    if (_.isString(image) || !image) {
+      return (
+        <Image
+          className='image-placeholder'
+          src={image}
+          style={{
+            objectFit: 'cover'
+          }}
+        />
+      );
+    }
+
+    return image;
+  }, [props.renderImage]);
+
+  return (
+    <div
+      className='horizontal-cards'
+    >
+      <Ref
+        innerRef={ref}
+      >
+        <Card.Group>
+          { _.map(props.items, renderCard.bind(this)) }
+        </Card.Group>
+      </Ref>
+      <div
+        className='button-container'
+      >
+        { scrollPages > 1 && (
+          <div
+            className='pagination'
+          >
+            <Button
+              basic
+              circular
+              icon='angle left'
+              onClick={onPageChange.bind(this, -1)}
+            />
+            <Button
+              basic
+              circular
+              icon='angle right'
+              onClick={onPageChange.bind(this, 1)}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+HorizontalCards.defaultProps = {
+  perPage: 4
+};
+
+export default HorizontalCards;

package/src/components/ItemCollection.css

@@ -0,0 +1,3 @@
+.item-collection > .ui.loader.active {
+  position: fixed;
+}

package/src/components/ItemCollection.js

@@ -0,0 +1,159 @@
+// @flow
+
+import { InfiniteScroll } from '@performant-software/shared-components';
+import React, { Component } from 'react';
+import uuid from 'react-uuid';
+import { Loader } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+import Items from './Items';
+import './ItemCollection.css';
+
+type Props = {
+  className?: string,
+  context: {
+    current: HTMLElement
+  },
+  items: Array<any>,
+  loading?: boolean,
+  onBottomReached?: (page: number) => void,
+  onDelete: (item: any) => void,
+  onSave?: (item: any) => void,
+  perPage: number,
+  scrollOffset: number
+};
+
+type State = {
+  page: number
+};
+
+class ItemCollection extends Component<Props, State> {
+  static defaultProps: any;
+
+  /**
+   * Constructs a new ItemCollection component.
+   *
+   * @param props
+   */
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      page: 1
+    };
+  }
+
+  /**
+   * Returns the concatenated class names.
+   *
+   * @returns {string}
+   */
+  getClassName() {
+    const classNames = ['item-collection'];
+
+    if (this.props.className) {
+      classNames.push(this.props.className);
+    }
+
+    return classNames.join(' ');
+  }
+
+  /**
+   * Returns the list of items to render based on the current page.
+   *
+   * @returns {Array<T>|*[]}
+   */
+  getItems(): Array<any> {
+    const endIndex = this.state.page * this.props.perPage;
+    return (this.props.items && this.props.items.slice(0, endIndex)) || [];
+  }
+
+  /**
+   * Increments the page number and fetches the data.
+   */
+  onBottomReached() {
+    if (this.props.loading) {
+      return;
+    }
+
+    this.setState((state) => ({ page: state.page + 1 }), () => {
+      if (this.props.onBottomReached) {
+        this.props.onBottomReached(this.state.page);
+      }
+    });
+  }
+
+  /**
+   * Calls the onDelete prop and returns a promise.
+   *
+   * @param item
+   *
+   * @returns {Promise<unknown>}
+   */
+  onDelete(item: any) {
+    this.props.onDelete(item);
+    return Promise.resolve();
+  }
+
+  /**
+   * Calls the onSave prop and returns a promise.
+   *
+   * @param item
+   *
+   * @returns {Promise<unknown>}
+   */
+  onSave(item: any) {
+    if (this.props.onSave) {
+      const uid = item.uid ? item.uid : uuid();
+      this.props.onSave({ ...item, uid });
+    }
+
+    return Promise.resolve();
+  }
+
+  /**
+   * Renders the ItemCollection component.
+   *
+   * @returns {*}
+   */
+  render() {
+    return (
+      <InfiniteScroll
+        context={this.props.context}
+        offset={this.props.scrollOffset}
+        onBottomReached={this.onBottomReached.bind(this)}
+      >
+        <Items
+          {...this.props}
+          items={this.getItems()}
+          className={this.getClassName()}
+          onDelete={this.onDelete.bind(this)}
+          onSave={this.onSave.bind(this)}
+        >
+          <Loader
+            active={this.props.loading}
+            content={i18n.t('Common.messages.loading')}
+          />
+        </Items>
+      </InfiniteScroll>
+    );
+  }
+}
+
+ItemCollection.defaultProps = {
+  addButton: {
+    location: 'top'
+  },
+  buttons: [],
+  className: '',
+  configurable: true,
+  modal: undefined,
+  onCopy: undefined,
+  onDrag: undefined,
+  onSave: () => {},
+  perPage: Number.MAX_SAFE_INTEGER,
+  renderDeleteModal: undefined,
+  renderEmptyRow: undefined,
+  scrollOffset: 0
+};
+
+export default ItemCollection;

package/src/components/ItemList.js

@@ -0,0 +1,126 @@
+// @flow
+
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { Button, Dimmer, Loader } from 'semantic-ui-react';
+import _ from 'underscore';
+import i18n from '../i18n/i18n';
+import Items from './Items';
+import useDataList, { SORT_ASCENDING } from './DataList';
+
+type ListButton = {
+  ...typeof Button,
+  accept: () => boolean
+};
+
+type Sort = {
+  key: any,
+  value: any,
+  text: string,
+  direction: ?string
+};
+
+type Props = {
+  buttons: Array<ListButton>,
+  isRowSelected: (item: any) => boolean,
+  items: Array<any>,
+  loading?: boolean,
+  page: number,
+  onRowSelect: (item: any) => void,
+  onSort: (column: string, direction: ?string, page?: number) => void,
+  selectable?: boolean,
+  sort?: Array<Sort>,
+  sortColumn?: string,
+  sortDirection?: string
+};
+
+/**
+ * An ItemList component can be used to render a list of records returned from an API. Under the hood, the DataList
+ * component handles calling the API, storing the records, filters, etc, and the Items component handles the
+ * presentation.
+ *
+ * @param props
+ *
+ * @returns {*}
+ */
+const ItemList = (props: Props) => {
+  useEffect(() => {
+    const { page } = props;
+
+    let { sortColumn = '', sortDirection = SORT_ASCENDING } = props;
+
+    if (!sortColumn) {
+      const defaultSort = _.first(props.sort);
+
+      if (defaultSort) {
+        sortColumn = defaultSort.value;
+
+        if (defaultSort.direction) {
+          sortDirection = defaultSort.direction;
+        }
+      }
+    }
+
+    props.onSort(sortColumn, sortDirection, page);
+  }, []);
+
+  /**
+   * Sets the variable to true if every item in the passed collection is selected.
+   */
+  const allSelected = useMemo(() => props.isRowSelected && props.items && props.items.length && _.every(
+    props.items,
+    props.isRowSelected.bind(this)
+  ), [props.items, props.isRowSelected]);
+
+  /**
+   * Selects all items in the collection. If all items are currently selected, deselects all items.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onSelectAll = useCallback(() => {
+    if (props.items && props.isRowSelected && props.onRowSelect) {
+      let items;
+
+      if (allSelected) {
+        items = [...props.items];
+      } else {
+        items = _.reject(props.items, props.isRowSelected.bind(this));
+      }
+
+      _.each(items, props.onRowSelect.bind(this));
+    }
+  }, [allSelected, props.isRowSelected, props.items, props.onRowSelect]);
+
+  return (
+    <>
+      <Dimmer
+        active={props.loading}
+        inverted
+      >
+        <Loader
+          content={i18n.t('Common.messages.loading')}
+        />
+      </Dimmer>
+      <Items
+        {...props}
+        buttons={[...(props.buttons || []), {
+          accept: () => props.selectable,
+          color: 'green',
+          content: allSelected ? i18n.t('ItemList.buttons.deselectAll') : i18n.t('ItemList.buttons.selectAll'),
+          icon: 'checkmark',
+          onClick: onSelectAll.bind(this)
+        }]}
+      />
+    </>
+  );
+};
+
+ItemList.defaultProps = {
+  filters: {},
+  onCopy: undefined,
+  onSort: () => {},
+  renderDeleteModal: undefined,
+  renderEmptyRow: undefined,
+  searchable: true,
+};
+
+export default useDataList(ItemList);

package/src/components/Items.css

@@ -0,0 +1,19 @@
+.item-list {
+  margin: 1em 0em 1em 0em;
+}
+
+.item-list .ui.icon.header {
+  display: block;
+}
+
+.item-list .empty-list {
+  opacity: 0.8;
+}
+
+.item-list .ui.items > .item > .checkbox-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 100px;
+  width: 20%;
+}