Merge pull request #573 from performant-software/feature/archnet1718-table-view

Add table view as option for Items list (archnet #1718)

Author: blms

packages/semantic-ui/src/components/DataTable.css

@@ -1,8 +1,3 @@
-.data-table .ui.table .actions-cell {
-  white-space: nowrap;
-  width: 1px;
-}
-
 .data-table .empty-button {
   display: inline;
   margin-left: 5px;
@@ -38,6 +33,8 @@
   position: relative;
 }
 
+.ui.table.data-table td.actions-cell,
 .data-table.ui.celled.table tr td.actions-cell {
   white-space: nowrap;
+  width: 1px;
 }

packages/semantic-ui/src/components/DataTable.js

@@ -640,6 +640,10 @@ DataTable.defaultProps = {
 
 export default useColumnSelector(useList(DataTable));
 
+export {
+  DataTable as DataTableComponent
+};
+
 export type {
   Props
 };

packages/semantic-ui/src/components/DataTableColumnSelector.js

@@ -5,6 +5,7 @@ import React, { Component, type ComponentType, type Element } from 'react';
 import { Checkbox, Dropdown, Icon } from 'semantic-ui-react';
 import _ from 'underscore';
 import Draggable from './Draggable';
+import { Views } from './ItemsToggle';
 import ListSessionUtils from '../utils/ListSession';
 import type { Props as ListProps } from './List';
 import './DataTableColumnSelector.css';
@@ -49,7 +50,13 @@ type Props = ListProps & {
   /**
    * If <code>true</code>, columns can be shown/hidden by the user.
    */
-  configurable?: boolean
+  configurable?: boolean,
+
+  /**
+   * Used in multi-view environments to hide the column selector if a view is selected, and it is not the
+   * table view.
+   */
+  view?: number,
 };
 
 type State = {
@@ -204,10 +211,12 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
         return null;
       }
 
+      const isTableView = this.props.view === undefined || this.props.view === Views.table;
+
       return (
         <>
           { this.props.renderListHeader && this.props.renderListHeader() }
-          { this.props.configurable && (
+          { this.props.configurable && isTableView && (
             <Dropdown
               aria-label='Select Columns'
               basic

packages/semantic-ui/src/components/Items.js

@@ -16,6 +16,8 @@ import i18n from '../i18n/i18n';
 import useList from './List';
 import useItemsToggle, { Views } from './ItemsToggle';
 import Draggable from './Draggable';
+import useColumnSelector from './DataTableColumnSelector';
+import { DataTableComponent } from './DataTable';
 import './Items.css';
 
 import type { Props as ListProps } from './List';
@@ -214,6 +216,7 @@ class ItemsClass extends Component<Props, {}> {
       >
         { this.renderList() }
         { this.renderGrid() }
+        { this.renderTable() }
         { this.renderEmptyList() }
         { this.props.children }
       </div>
@@ -503,13 +506,31 @@ class ItemsClass extends Component<Props, {}> {
       </Item.Group>
     );
   }
+
+  /**
+   * Renders the table view.
+   *
+   * @returns {null|*}
+   */
+  renderTable() {
+    if (this.props.view !== Views.table || !(this.props.items && this.props.items.length)) {
+      return null;
+    }
+
+    return (
+      <DataTableComponent
+        {...this.props}
+        loading={false} /* prevent duplicate loading spinners */
+      />
+    );
+  }
 }
 
 ItemsClass.defaultProps = {
   actions: []
 };
 
-const Items = useItemsToggle(useList(ItemsClass));
+const Items = useItemsToggle(useColumnSelector(useList(ItemsClass)));
 export default Items;
 
 export type {

packages/semantic-ui/src/components/ItemsToggle.js

@@ -4,6 +4,7 @@ import React, { Component, type ComponentType } from 'react';
 import { Button, Dropdown } from 'semantic-ui-react';
 import _ from 'underscore';
 import { SORT_ASCENDING } from './DataList';
+import ListSessionUtils from '../utils/ListSession';
 
 type Sort = {
   key: string,
@@ -14,10 +15,15 @@ type Sort = {
 
 type Props = {
   basic?: boolean,
+  columns?: Array<any>,
   defaultView?: number,
   hideToggle?: boolean,
   onSort?: (sortColumn: string, sortDirection?: ?string) => void,
   renderListHeader?: () => JSX.Element,
+  session?: {
+    key: string,
+    storage: typeof sessionStorage
+  },
   sort?: Array<Sort>,
   sortColor?: string,
   sortColumn?: string,
@@ -30,7 +36,8 @@ type State = {
 
 const Views = {
   list: 0,
-  grid: 1
+  grid: 1,
+  table: 2
 };
 
 /**
@@ -60,8 +67,12 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
     constructor(props: any) {
       super(props);
 
+      // set view based on session storage if present
+      const { key, storage } = props.session || {};
+      const session = ListSessionUtils.restoreSession(key, storage) || {};
+
       this.state = {
-        view: props.defaultView || Views.list
+        view: session.view  || props.defaultView || Views.list
       };
     }
 
@@ -105,6 +116,31 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
       this.props.onSort(sort.value, sortDirection);
     }
 
+    /**
+     * Updates the session whenever the view state changes.
+     *
+     * @param prevProps
+     * @param prevState
+     */
+    componentDidUpdate(prevProps: Props, prevState: State) {
+      if (prevState.view !== this.state.view) {
+        this.setSession();
+      }
+    }
+
+    /**
+     * Sets the view property on the session.
+     */
+    setSession() {
+      const { key, storage } = this.props.session || {};
+
+      if (!key) {
+        return;
+      }
+
+      ListSessionUtils.setSession(key, storage, { view: this.state.view });
+    }
+
     /**
      * Renders the ItemsToggle component.
      *
@@ -153,6 +189,15 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
                 icon='grid layout'
                 onClick={() => this.setState({ view: Views.grid })}
               />
+              { !_.isEmpty(this.props.columns) && (
+                <Button
+                  active={this.state.view === Views.table}
+                  aria-label='Table View'
+                  basic={this.props.basic}
+                  icon='table'
+                  onClick={() => this.setState({ view: Views.table })}
+                />
+              )}
             </>
           )}
           { !_.isEmpty(this.props.sort) && this.props.onSort && (