Merge branch 'master' of https://github.com/performant-software/react-components

Author: dleadbetter

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

@@ -43,6 +43,17 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
       };
     }
 
+    /**
+     * Reset the columns on the state when the props change.
+     *
+     * @param prevProps
+     */
+    componentDidUpdate(prevProps: Props): * {
+      if (prevProps.columns !== this.props.columns) {
+        this.setState({ columns: this.props.columns });
+      }
+    }
+
     /**
      * Toggles the hidden property for the passed column.
      *

packages/semantic-ui/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;

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

@@ -10,6 +10,8 @@ import type { Column } from './DataTable';
 
 type Props = {
   columns: Array<Column>,
+  defaultSort?: string,
+  defaultSortDirection?: string,
   page: number,
   onSort: (sortColumn: string, sortDirection: string, page?: number) => void,
   onInit: (page?: number) => void,
@@ -49,20 +51,21 @@ const ListTable = (props: Props) => {
    * sortable column.
    */
   useEffect(() => {
-    const { page, sortColumn, sortDirection = SORT_ASCENDING } = props;
+    const { page, defaultSort, defaultSortDirection = SORT_ASCENDING } = props;
 
-    if (props.sortColumn) {
-      props.onSort(sortColumn, sortDirection, page);
+    if (defaultSort) {
+      props.onSort(defaultSort, defaultSortDirection, page);
     } else {
       const sortableColumn = _.findWhere(props.columns, { sortable: true });
+
       if (sortableColumn) {
         onColumnClick(sortableColumn);
       } else {
         // If no columns are sortable, load the data as is
         props.onInit();
       }
     }
-  }, []);
+  }, [props.columns]);
 
   return (
     <DataTable

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

@@ -87,13 +87,15 @@ const LoginModal = (props: Props) => (
           >
             { i18n.t('LoginModal.buttonLogin') }
           </Button>
-          <Button
-            basic
-            onClick={props.onClose.bind(this)}
-            size='large'
-          >
-            { i18n.t('LoginModal.buttonCancel') }
-          </Button>
+          { props.onClose && (
+            <Button
+              basic
+              onClick={props.onClose.bind(this)}
+              size='large'
+            >
+              { i18n.t('LoginModal.buttonCancel') }
+            </Button>
+          )}
         </Modal.Actions>
       </Modal>
     )}

packages/shared/src/services/BaseService.js

@@ -1,6 +1,6 @@
 // @flow
 
-import axios, { type AxiosResponse } from 'axios';
+import axios, { type AxiosResponse, type AxiosStatic } from 'axios';
 
 /**
  * Base class for making API calls. This class uses Axios under the hood and a customizable transform class for
@@ -102,6 +102,15 @@ class BaseService {
 
   // protected
 
+  /**
+   * Returns the axios instance.
+   *
+   * @returns {AxiosStatic}
+   */
+  getAxios(): AxiosStatic {
+    return axios;
+  }
+
   /**
    * Returns the API base URL string.
    */

packages/storybook/src/semantic-ui/LoginModal.stories.js

@@ -22,3 +22,14 @@ export const Default = () => (
     open={boolean('Open', true)}
   />
 );
+
+export const NoCloseButton = () => (
+  <LoginModal
+    disabled={boolean('Disabled', false)}
+    loginFailed={boolean('Login failed', false)}
+    onLogin={action('login')}
+    onPasswordChange={action('password-change')}
+    onUsernameChange={action('username-change')}
+    open={boolean('Open', true)}
+  />
+);