@performant-software/semantic-components 0.5.2 → 0.5.5

package/types/components/DataView.js.flow

@@ -1,42 +1,263 @@
 // @flow
 
 import axios from 'axios';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Container } from 'semantic-ui-react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import { Form, Grid, Modal } from 'semantic-ui-react';
 import _ from 'underscore';
-import MenuSidebar from './MenuSidebar';
+import DataTable from './DataTable';
+import DropdownButton from './DropdownButton';
+import i18n from '../i18n/i18n';
 import MenuBar from './MenuBar';
-import ListTable from './ListTable';
+import MenuSidebar from './MenuSidebar';
+import useDataList, { SORT_ASCENDING, SORT_DESCENDING } from './DataList';
+import './DataView.css';
+
+import type { Column } from './DataTable';
+
+type Sort = {
+  label: string,
+  value: string
+};
 
 type Item = {
   id: string,
   label: string,
   group?: string,
-}
+  columns?: Array<Column>,
+  sorts?: Array<Sort>
+};
 
 type Props = {
+  columnCount?: number,
   items: Array<Item>,
   layout: 'top' | 'left',
   title: string
 };
 
+/**
+ * Sets up the List component used by the DataView component. This component is responsible for rendering the DataTable
+ * and handling sorting.
+ */
+const List = useDataList((props) => {
+  const [activeSort, setActiveSort] = useState();
+
+  /**
+   * Sets the active sort object on the state.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onSortChange = useCallback((sort) => {
+    const newSort = { ...sort };
+
+    if (activeSort && activeSort.value === sort.value) {
+      newSort.direction = activeSort.direction === SORT_DESCENDING ? SORT_ASCENDING : SORT_DESCENDING;
+    }
+
+    setActiveSort(newSort);
+  }, [props.sorts, activeSort]);
+
+  /**
+   * Calls the onSort prop when the active sort is changed.
+   */
+  useEffect(() => {
+    if (activeSort) {
+      props.onSort(activeSort.value, activeSort.direction, props.page);
+    }
+  }, [activeSort]);
+
+  /**
+   * Calls the onSort prop when the component is loaded to initialize the data set.
+   */
+  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);
+  }, []);
+
+  return (
+    <DataTable
+      {...props}
+      renderListHeader={() => props.sorts && (
+        <DropdownButton
+          basic
+          icon={activeSort && activeSort.direction === SORT_DESCENDING
+            ? 'sort alphabet down'
+            : 'sort alphabet up'}
+          onChange={() => {}}
+          options={_.map(props.sorts, (sort) => ({
+            key: sort.value,
+            value: sort.value,
+            text: sort.label,
+            onClick: () => onSortChange(sort)
+          }))}
+          text={activeSort
+            ? i18n.t('DataView.labels.sortBy', { column: activeSort.label })
+            : i18n.t('DataView.labels.noSort')}
+          value={activeSort && activeSort.value}
+        />
+      )}
+      tableProps={{
+        ...props.tableProps || {},
+        celled: true
+      }}
+    />
+  );
+});
+
 const DataView = (props: Props) => {
   const [activeItem, setActiveItem] = useState();
+  const [selectedRecord, setSelectedRecord] = useState();
+
   const [columns, setColumns] = useState([]);
   const [menu, setMenu] = useState([]);
   const [paddingLeft, setPaddingLeft] = useState();
+  const [key, setKey] = useState();
 
   const menuRef = useRef();
 
+  /**
+   * Sets the collection name based on the URL of the active item.
+   *
+   * @type {string}
+   */
+  const collectionName = useMemo(() => {
+    let name = '';
+
+    if (activeItem) {
+      name = activeItem.url.substr(activeItem.url.lastIndexOf('/') + 1, activeItem.url.length);
+    }
+
+    return name;
+  }, [activeItem]);
+
+  /**
+   * Merges the calculated columns with the columns passed with the active item. The idea is to allow customization
+   * of the columns by the implementing component, but not require it.
+   *
+   * @type {(function(*): ([]|*))|*}
+   */
+  const mergeColumns = useCallback((items) => {
+    if (!activeItem) {
+      return [];
+    }
+
+    // Build the list of columns based on the unique set of properties
+    const keys = _.chain(items)
+      .map((item) => _.keys(item))
+      .flatten()
+      .uniq()
+      .value();
+
+    // Merge any columns provided by the implementing component by name
+    let cols = _.map(keys, (col, index) => {
+      const columnValue = _.findWhere(activeItem.columns, { name: col }) || {};
+
+      const defaultValue = {
+        name: col,
+        label: col.trim().replace(/^\w/, (c) => c.toUpperCase()).replaceAll('_', ' '),
+        sortable: false,
+        resolve: (item) => resolveValue(item, col),
+        hidden: index > props.columnCount,
+        index
+      };
+
+      return _.extend(defaultValue, columnValue);
+    });
+
+    // Include any columns provided by the implementing component that do not exist on the object (i.e. extra columns)
+    cols = [
+      ...cols,
+      ..._.reject(activeItem.columns, (col) => _.contains(keys, col.name))
+    ];
+
+    // Sort the columns by the index property
+    return _.sortBy(cols, 'index');
+  }, [activeItem]);
+
+  /**
+   * Calls the "show" URL for the passed item. It's possible that the API does not implement a public "show" route. In
+   * this case and error is expected and the passed item will be set as the selected record.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onItemSelection = useCallback((item) => {
+    if (activeItem) {
+      axios
+        .get(`${activeItem.url}/${item.id}`)
+        .then(({ data }) => {
+          const itemKey = _.first(_.keys(data));
+          setSelectedRecord(data[itemKey]);
+        })
+        .catch(() => {
+          setSelectedRecord(item);
+        });
+    }
+  }, [activeItem]);
+
+  /**
+   * Calls the "index" URL to initialize the data set.
+   *
+   * @type {function(*): *}
+   */
   const onLoad = useCallback((params) => {
+    let promise;
+
     if (activeItem) {
-      axios.get
-      fetch(activeItem.url).then((response) => {
-        console.log(response);
-      });
+      promise = axios
+        .get(activeItem.url, { params })
+        .then((response) => {
+          const items = response.data[collectionName];
+          setColumns(mergeColumns(items));
+
+          return response;
+        });
+    } else {
+      promise = Promise.resolve();
     }
+
+    return promise;
   }, [activeItem]);
 
+  /**
+   * Returns the value of the passed attribute on the passed item. This function handles use cases for special
+   * types of objects.
+   *
+   * @type {function(*, *): *}
+   */
+  const resolveValue = useCallback((item, attribute) => {
+    let value = item[attribute];
+
+    if (_.isArray(value)) {
+      value = _.size(value);
+    } else if (_.isBoolean(value)) {
+      value = Boolean(value).toString();
+    } else if (_.isObject(value)) {
+      value = value[_.first(_.keys(value))];
+    }
+
+    return value;
+  }, []);
+
   /**
    * Re-formats the passed items as a menu object. If we're grouping the menu items, items will be added as
    * a child property of the group object.
@@ -66,7 +287,7 @@ const DataView = (props: Props) => {
    */
   useEffect(() => {
     if (props.items && props.items.length) {
-      setActiveItem(props.items[0]);
+      setActiveItem(_.first(props.items));
     }
   }, [props.items]);
 
@@ -79,6 +300,24 @@ const DataView = (props: Props) => {
     }
   }, [menuRef, props.layout]);
 
+  /**
+   * Calculates the key value when the active item or columns are changed. This is done to force re-rendering
+   * of the List component when the columns are loaded via the API.
+   */
+  useEffect(() => {
+    const keys = [];
+
+    if (activeItem) {
+      keys.push(activeItem.id);
+    }
+
+    if (columns && columns.length) {
+      keys.push(..._.pluck(columns, 'name'));
+    }
+
+    setKey(keys.join(''));
+  }, [activeItem, columns]);
+
   return (
     <div
       className='data-view'
@@ -100,26 +339,69 @@ const DataView = (props: Props) => {
           items={menu}
         />
       )}
-      <Container
+      <div
         style={{
-          paddingLeft
+          marginLeft: paddingLeft
         }}
       >
         { activeItem && (
-          <ListTable
-            collectionName='items'
+          <List
+            actions={[{
+              name: 'details',
+              icon: 'info',
+              onClick: onItemSelection
+            }]}
+            collectionName={collectionName}
             columns={columns}
-            onLoad={(params) => Api.onLoad(_.extend(params, {
-              items,
-              perPage: number('Per page', 10)
-            }))}
+            key={key}
+            onLoad={onLoad}
+            perPageOptions={[10, 25, 50, 100]}
             searchable
+            sorts={activeItem.sorts}
           />
         )}
-        <div>Content</div>
-      </Container>
+      </div>
+      { selectedRecord && (
+        <Modal
+          as={Form}
+          centered={false}
+          className='data-view-modal'
+          closeIcon
+          onClose={() => setSelectedRecord(null)}
+          open
+        >
+          <Modal.Header
+            content={i18n.t('DataView.labels.details')}
+          />
+          <Modal.Content>
+            <Grid
+              columns={3}
+              doubling
+            >
+              { _.map(mergeColumns([selectedRecord]), (column) => (
+                <Grid.Column
+                  as={Form.Field}
+                  key={column.name}
+                >
+                  <span
+                    className='label'
+                  >
+                    { column.label }
+                  </span>
+                  { resolveValue(selectedRecord, column.name) }
+                </Grid.Column>
+              ))}
+            </Grid>
+          </Modal.Content>
+        </Modal>
+      )}
     </div>
   );
 };
 
+DataView.defaultProps = {
+  columnCount: 5,
+  layout: 'left'
+};
+
 export default DataView;

package/types/components/DateInput.js.flow

@@ -28,6 +28,7 @@ const DateInput = (props: Props) => {
 
   return (
     <Input
+      aria-label='Date Input'
       className='date-input icon'
       icon='calendar alternate outline'
       iconPosition='left'

package/types/components/DatePicker.js.flow

@@ -62,9 +62,13 @@ const DatePicker = (props: Props) => {
                 setCalendar(false);
               }
             }}
+            next2AriaLabel='Next Year'
             next2Label={<Icon name='angle double right' />}
+            nextAriaLabel='Next Month'
             nextLabel={<Icon name='chevron right' />}
+            prev2AriaLabel='Previous Year'
             prev2Label={<Icon name='angle double left' />}
+            prevAriaLabel='Previous Month'
             prevLabel={<Icon name='chevron left' />}
             value={props.value}
           />

package/types/components/DropdownButton.js.flow

@@ -34,12 +34,14 @@ const DropdownButton = (props: Props) => {
       color={props.color}
     >
       <Button
+        aria-label='Select'
         content={props.text}
         disabled={props.disabled}
         icon={props.icon}
         onClick={(e) => dropdownRef.current && dropdownRef.current.handleClick(e)}
       />
       <Dropdown
+        aria-label='Select'
         className='button icon'
         direction={props.direction}
         disabled={props.disabled}

package/types/components/EditModal.js.flow

@@ -78,10 +78,9 @@ const EditModal = (props: Props) => {
           )}
         </Button>
         <Button
+          basic
           disabled={props.saving}
-          inverted
           onClick={props.onClose.bind(this)}
-          primary
           size='medium'
           type='button'
         >

package/types/components/HorizontalCards.js.flow

@@ -170,6 +170,7 @@ const HorizontalCards = (props: Props) => {
     if (_.isString(image) || !image) {
       return (
         <Image
+          alt={item.alt}
           className='image-placeholder'
           src={image}
           style={{
@@ -201,12 +202,14 @@ const HorizontalCards = (props: Props) => {
             className='pagination'
           >
             <Button
+              aria-label='Left'
               basic
               circular
               icon='angle left'
               onClick={onPageChange.bind(this, -1)}
             />
             <Button
+              aria-label='Right'
               basic
               circular
               icon='angle right'

package/types/components/Items.js.flow

@@ -168,6 +168,7 @@ class Items extends Component<Props, {}> {
           >
             { _.map(this.getActions(item), (action, actionIndex) => (
               <Button
+                aria-label={action.name}
                 basic
                 color={action.resolveColor ? action.resolveColor(item) : action.color}
                 icon={action.resolveIcon ? action.resolveIcon(item) : action.icon}
@@ -177,6 +178,7 @@ class Items extends Component<Props, {}> {
             ))}
             { this.isSelectable() && (
               <Button
+                aria-label='Select'
                 basic
                 color={this.props.isRowSelected && this.props.isRowSelected(item) ? 'green' : undefined}
                 icon='checkmark'

package/types/components/ItemsToggle.js.flow

@@ -118,12 +118,14 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
         <>
           <Button
             active={this.state.view === Views.list}
+            aria-label='List View'
             basic
             icon='list'
             onClick={() => this.setState({ view: Views.list })}
           />
           <Button
             active={this.state.view === Views.grid}
+            aria-label='Grid View'
             basic
             icon='grid layout'
             onClick={() => this.setState({ view: Views.grid })}
@@ -136,11 +138,13 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
               }}
             >
               <Button
+                aria-label='Sort by'
                 content={this.getSortValue()}
                 icon={this.props.sortDirection === SORT_ASCENDING ? 'sort alphabet up' : 'sort alphabet down'}
                 onClick={(e) => this.sortDropdown.handleClick(e)}
               />
               <Dropdown
+                aria-label='Sort'
                 className='button icon'
                 floating
                 options={_.map(this.props.sort, (sort) => ({

package/types/components/List.js.flow

@@ -544,6 +544,7 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       return (
         <Button
           active={this.props.filters.active}
+          aria-label='Filter'
           basic
           icon='filter'
           onClick={this.onFilterButton.bind(this)}

package/types/components/MediaList.js.flow

@@ -43,6 +43,7 @@ const MediaList = (props: Props) => (
           onClick={props.onClick.bind(this, item, i)}
         >
           <Image
+            alt={item.alt}
             src={item.image}
             style={{
               objectFit: 'cover'

package/types/components/MenuBar.js.flow

@@ -24,8 +24,11 @@ const MenuBar = ({ header, items, ...props }: Props) => {
    *
    * @returns {JSX.Element}
    */
-  const renderDropdownItem = useCallback((item) => (
-    <Dropdown.Item {...item} />
+  const renderDropdownItem = useCallback((item, index) => (
+    <Dropdown.Item
+      key={index}
+      {...item}
+    />
   ), []);
 
   /**
@@ -33,8 +36,9 @@ const MenuBar = ({ header, items, ...props }: Props) => {
    *
    * @returns {JSX.Element}
    */
-  const renderMenuItem = useCallback((item) => (
+  const renderMenuItem = useCallback((item, index) => (
     <Menu.Item
+      key={index}
       {...item}
     />
   ), []);
@@ -44,9 +48,11 @@ const MenuBar = ({ header, items, ...props }: Props) => {
    *
    * @returns {JSX.Element}
    */
-  const renderDropdown = useCallback((item) => (
+  const renderDropdown = useCallback((item, index) => (
     <DropdownMenu
+      aria-label={item.content}
       item
+      key={index}
       text={item.content}
     >
       { _.map(item.items, (i) => (i.items ? renderDropdown(i) : renderDropdownItem(i)))}

package/types/components/MenuSidebar.js.flow

@@ -4,24 +4,35 @@ import React, { useCallback } from 'react';
 import {
   Header,
   Menu,
+  Ref,
   type HeaderProps,
-  type MenuItemProps, Ref
+  type MenuItemProps
 } from 'semantic-ui-react';
 import _ from 'underscore';
 
 type Props = {
+  contextRef: {
+    current: ?HTMLElement
+  },
   header: HeaderProps,
   items: Array<HeaderProps | MenuItemProps>
 };
 
-const MenuSidebar = ({ header, items, ...props }: Props) => {
+const MenuSidebar = ({
+  contextRef,
+  header,
+  items,
+  ...props
+}: Props) => {
   /**
    * Renders the passed item as a menu.
    *
    * @type {unknown}
    */
-  const renderMenu = useCallback((item) => (
-    <Menu.Item>
+  const renderMenu = useCallback((item, index) => (
+    <Menu.Item
+      key={index}
+    >
       <Menu.Header
         {...item}
       />
@@ -36,8 +47,9 @@ const MenuSidebar = ({ header, items, ...props }: Props) => {
    *
    * @type {unknown}
    */
-  const renderMenuItem = useCallback((item) => (
+  const renderMenuItem = useCallback((item, index) => (
     <Menu.Item
+      key={index}
       {...item}
     />
   ), []);
@@ -51,7 +63,7 @@ const MenuSidebar = ({ header, items, ...props }: Props) => {
 
   return (
     <Ref
-      innerRef={props.contextRef}
+      innerRef={contextRef}
     >
       <Menu
         {...props}

package/types/components/ModalDropdown.js.flow

@@ -3,13 +3,13 @@
 import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
 import { Button, Dropdown } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
 import './ModalDropdown.css';
 
 type Props = {
   onClear: () => void,
   renderModal: ({ onClose: () => void, open: boolean }) => void,
-  searchQuery: ?string,
-  t: (key: string) => string
+  searchQuery: ?string
 };
 
 type State = {
@@ -51,13 +51,16 @@ class ModalDropdown extends Component<Props, State> {
           onSearchChange={() => {}}
           open={false}
           search
+          searchInput={{
+            'aria-label': 'Search'
+          }}
           selection
           searchQuery={this.props.searchQuery || ''}
         />
         <Button.Group>
           <Button
             basic
-            content={this.props.t('Common.buttons.clear')}
+            content={i18n.t('Common.buttons.clear')}
             icon='times'
             onClick={this.props.onClear.bind(this)}
             type='button'

package/types/components/NestedAccordion.js.flow

@@ -230,6 +230,7 @@ class NestedAccordion extends Component<Props, State> {
   renderToggle(item: any) {
     return (
       <Button
+        aria-label='Open'
         compact
         className={this.getButtonClass(item)}
         icon='dropdown'