@performant-software/semantic-components 0.5.2 → 0.5.5

package/src/components/DataView.js

@@ -0,0 +1,413 @@
+// @flow
+
+import axios from 'axios';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import { Form, Grid, Modal } from 'semantic-ui-react';
+import _ from 'underscore';
+import DataTable from './DataTable';
+import DropdownButton from './DropdownButton';
+import i18n from '../i18n/i18n';
+import MenuBar from './MenuBar';
+import MenuSidebar from './MenuSidebar';
+import ModalContext from '../context/ModalContext';
+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) {
+      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.
+   */
+  useEffect(() => {
+    const hasGroups = _.every(props.items, (item) => !!item.group);
+
+    if (!hasGroups) {
+      setMenu(props.items);
+    } else {
+      const menuItems = _.groupBy(props.items, 'group');
+      const headers = _.keys(menuItems);
+
+      setMenu(_.map(headers, (header) => ({
+        content: header,
+        items: _.map(menuItems[header], (item) => ({
+          active: activeItem && activeItem.id === item.id,
+          content: item.label,
+          onClick: () => setActiveItem(item)
+        }))
+      })));
+    }
+  }, [activeItem, props.items]);
+
+  /**
+   * Set the active item as the first item in the list.
+   */
+  useEffect(() => {
+    if (props.items && props.items.length) {
+      setActiveItem(_.first(props.items));
+    }
+  }, [props.items]);
+
+  /**
+   * If we're using the sidebar layout, set the padding so the fixed positioned menu does not overlap the content.
+   */
+  useEffect(() => {
+    if (props.layout === 'left' && menuRef && menuRef.current) {
+      setPaddingLeft(menuRef.current.offsetWidth);
+    }
+  }, [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'
+    >
+      { props.layout === 'top' && (
+        <MenuBar
+          header={{
+            content: props.title
+          }}
+          items={menu}
+        />
+      )}
+      { props.layout === 'left' && (
+        <MenuSidebar
+          contextRef={menuRef}
+          header={{
+            content: props.title
+          }}
+          items={menu}
+        />
+      )}
+      <div
+        style={{
+          marginLeft: paddingLeft
+        }}
+      >
+        { activeItem && (
+          <List
+            actions={[{
+              name: 'details',
+              icon: 'info',
+              onClick: onItemSelection
+            }]}
+            collectionName={collectionName}
+            columns={columns}
+            key={key}
+            onLoad={onLoad}
+            perPageOptions={[10, 25, 50, 100]}
+            searchable
+            sorts={activeItem.sorts}
+          />
+        )}
+      </div>
+      { selectedRecord && (
+        <ModalContext.Consumer>
+          { (mountNode) => (
+            <Modal
+              as={Form}
+              centered={false}
+              className='data-view-modal'
+              closeIcon
+              mountNode={mountNode}
+              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>
+          )}
+        </ModalContext.Consumer>
+      )}
+    </div>
+  );
+};
+
+DataView.defaultProps = {
+  columnCount: 5,
+  layout: 'left'
+};
+
+export default DataView;

package/src/components/DatabaseView.js

@@ -0,0 +1,126 @@
+// @flow
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import axios from 'axios';
+import _ from 'underscore';
+import ListTable from './ListTable';
+import MenuSidebar from './MenuSidebar';
+
+type Props = {
+  columnCount?: number,
+  title: string,
+  url: string
+};
+
+const DatabaseView = (props: Props) => {
+  const [columns, setColumns] = useState([]);
+  const [selectedTable, setSelectedTable] = useState();
+  const [tables, setTables] = useState([]);
+
+  const menuRef = useRef();
+
+  const service = useMemo(() => ({
+    getColumns: (params) => axios.get(`${props.url}/api/columns`, { params }),
+    getData: (params) => axios.post(`${props.url}/api/search`, params),
+    getTables: () => axios.get(`${props.url}/api/tables`)
+  }), [props.url]);
+
+  const resolveValue = useCallback((column, item) => {
+    let value = item[column.column_name];
+
+    const { data_type: dataType } = column;
+
+    if (value) {
+      switch (dataType) {
+        case 'timestamp without time zone':
+          value = new Date(value).toLocaleDateString();
+          break;
+
+        default:
+        // Value is already set
+      }
+    }
+
+    return value;
+  }, []);
+
+  useEffect(() => {
+    if (service) {
+      service
+        .getTables()
+        .then(({ data }) => {
+          setTables(data);
+          setSelectedTable(_.first(data));
+        });
+    }
+  }, [service]);
+
+  useEffect(() => {
+    if (selectedTable) {
+      service
+        .getColumns({ table_name: selectedTable.table_name })
+        .then(({ data }) => setColumns(data));
+    }
+  }, [selectedTable, service]);
+
+  const test = useMemo(() => _.map(columns, (column, index) => ({
+    name: column.column_name,
+    label: column.column_name,
+    resolve: resolveValue.bind(this, column),
+    sortable: true,
+    hidden: index > props.columnCount
+  })), [columns, resolveValue, props.columnCount]);
+
+  return (
+    <div
+      className='database-view'
+    >
+      <MenuSidebar
+        contextRef={menuRef}
+        header={{
+          content: props.title,
+          inverted: true
+        }}
+        inverted
+        items={[{
+          items: _.map(tables, (table) => ({
+            active: selectedTable === table,
+            content: table.table_name,
+            onClick: () => setSelectedTable(table)
+          }))
+        }]}
+        style={{
+          overflow: 'auto',
+          width: '250px'
+        }}
+      />
+      <div
+        style={{
+          marginLeft: '250px'
+        }}
+      >
+        { selectedTable && (
+          <ListTable
+            collectionName='items'
+            columns={test}
+            onLoad={(params) => service.getData({ ...params, table_name: selectedTable.table_name })}
+            perPageOptions={[10, 25, 50, 100]}
+            searchable
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+DatabaseView.defaultProps = {
+  columnCount: Number.MAX_SAFE_INTEGER
+};
+
+export default DatabaseView;

package/src/components/DateInput.js

@@ -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/src/components/DatePicker.css

@@ -36,7 +36,7 @@ div.react-calendar {
 }
 
 .react-calendar .react-calendar__month-view__days__day--neighboringMonth {
-  color: rgba(0,0,0,.4);
+  color: rgba(0,0,0,.54);
 }
 
 .react-calendar abbr[title] {
@@ -45,7 +45,7 @@ div.react-calendar {
 
 .react-calendar .react-calendar__tile--now {
   background-color: #fbbd08;
-  color: #fff;
+  color: #000000;
 }
 
 .react-calendar .react-calendar__tile--now:enabled:hover {
@@ -62,11 +62,11 @@ div.react-calendar {
 }
 
 .react-calendar .react-calendar__tile--active {
-  background-color: #2185d0;
+  background-color: #1d77bb;
   color: #fff;
 }
 
 .react-calendar .react-calendar__tile--active:enabled:hover {
   background-color: #1678c2;
   color: #fff;
-}
+}

package/src/components/DatePicker.js

@@ -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/src/components/DropdownButton.js

@@ -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/src/components/DropdownMenu.js

@@ -11,7 +11,8 @@ import { Dropdown, Ref } from 'semantic-ui-react';
 
 type Props = {
   children: Node,
-  onClick?: () => void
+  onClick?: () => void,
+  role?: string
 };
 
 const DropdownMenu = (props: Props) => {
@@ -38,6 +39,15 @@ const DropdownMenu = (props: Props) => {
     };
   }, [ref]);
 
+  /**
+   * Sets the "role" aria attribute on the current element if provided.
+   */
+  useEffect(() => {
+    if (ref.current && props.role) {
+      ref.current.setAttribute('role', props.role);
+    }
+  }, [ref, props.role]);
+
   return (
     <Ref
       innerRef={ref}

package/src/components/EditModal.js

@@ -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/src/components/FileUpload.css

@@ -15,7 +15,7 @@
 }
 
 .file-upload .file-dropzone .icon {
-  color: #2185D0;
+  color: #1d77bb;
 }
 
 .file-upload .file-dropzone-text {
@@ -23,9 +23,9 @@
 }
 
 .file-upload .file-dropzone-text .link-text {
-  color: #2185D0;
+  color: #1d77bb;
 }
 
 .file-upload .file-input {
   display: none;
-}
+}