@performant-software/semantic-components 0.5.5 → 0.5.8

package/types/components/DataView.js.flow

@@ -15,6 +15,7 @@ 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';
 
@@ -362,38 +363,43 @@ const DataView = (props: Props) => {
         )}
       </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
+        <ModalContext.Consumer>
+          { (mountNode) => (
+            <Modal
+              as={Form}
+              centered={false}
+              className='data-view-modal'
+              closeIcon
+              mountNode={mountNode}
+              onClose={() => setSelectedRecord(null)}
+              open
             >
-              { _.map(mergeColumns([selectedRecord]), (column) => (
-                <Grid.Column
-                  as={Form.Field}
-                  key={column.name}
+              <Modal.Header
+                content={i18n.t('DataView.labels.details')}
+              />
+              <Modal.Content>
+                <Grid
+                  columns={3}
+                  doubling
                 >
-                  <span
-                    className='label'
-                  >
-                    { column.label }
-                  </span>
-                  { resolveValue(selectedRecord, column.name) }
-                </Grid.Column>
-              ))}
-            </Grid>
-          </Modal.Content>
-        </Modal>
+                  { _.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>
   );

package/types/components/DatabaseView.js.flow

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

@@ -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/types/components/FileUploadModal.js.flow

@@ -13,6 +13,7 @@ import {
 import _ from 'underscore';
 import i18n from '../i18n/i18n';
 import FileUpload from './FileUpload';
+import ModalContext from '../context/ModalContext';
 import Toaster from './Toaster';
 
 type Props = {
@@ -195,44 +196,48 @@ class FileUploadModal extends Component<Props, State> {
           />
         )}
         { this.state.modal && (
-          <Modal
-            centered={false}
-            className='file-upload-modal'
-            open
-          >
-            <Dimmer
-              active={this.state.saving}
-              inverted
-            >
-              <Loader
-                content={i18n.t('FileUploadModal.loader')}
-              />
-            </Dimmer>
-            { this.renderErrors() }
-            <Modal.Header
-              content={this.props.title || i18n.t('FileUploadModal.title')}
-            />
-            <Modal.Content>
-              <FileUpload
-                onFilesAdded={this.onAddFiles.bind(this)}
-              />
-              { this.renderItems() }
-            </Modal.Content>
-            <Modal.Actions>
-              <Button
-                content={i18n.t('Common.buttons.save')}
-                disabled={!(this.state.items && this.state.items.length)}
-                primary
-                onClick={this.onSave.bind(this)}
-              />
-              <Button
-                content={i18n.t('Common.buttons.cancel')}
-                inverted
-                primary
-                onClick={this.onClose.bind(this)}
-              />
-            </Modal.Actions>
-          </Modal>
+          <ModalContext.Consumer>
+            { (mountNode) => (
+              <Modal
+                centered={false}
+                className='file-upload-modal'
+                mountNode={mountNode}
+                open
+              >
+                <Dimmer
+                  active={this.state.saving}
+                  inverted
+                >
+                  <Loader
+                    content={i18n.t('FileUploadModal.loader')}
+                  />
+                </Dimmer>
+                { this.renderErrors() }
+                <Modal.Header
+                  content={this.props.title || i18n.t('FileUploadModal.title')}
+                />
+                <Modal.Content>
+                  <FileUpload
+                    onFilesAdded={this.onAddFiles.bind(this)}
+                  />
+                  { this.renderItems() }
+                </Modal.Content>
+                <Modal.Actions>
+                  <Button
+                    content={i18n.t('Common.buttons.save')}
+                    disabled={!(this.state.items && this.state.items.length)}
+                    primary
+                    onClick={this.onSave.bind(this)}
+                  />
+                  <Button
+                    basic
+                    content={i18n.t('Common.buttons.cancel')}
+                    onClick={this.onClose.bind(this)}
+                  />
+                </Modal.Actions>
+              </Modal>
+            )}
+          </ModalContext.Consumer>
         )}
       </>
     );

package/types/components/FuzzyDate.js.flow

@@ -14,6 +14,7 @@ import {
 import _ from 'underscore';
 import i18n from '../i18n/i18n';
 import DateField from './DateInput';
+import ModalContext from '../context/ModalContext';
 import './FuzzyDate.css';
 
 type DateInput = {
@@ -334,110 +335,119 @@ class FuzzyDate extends Component<Props, State> {
           onClick={this.onEdit.bind(this)}
           onChange={this.onClear.bind(this)}
         />
-        <Modal
-          as={Form}
-          className='fuzzy-date-modal'
-          open={this.state.modal}
-          onClose={this.onClose.bind(this)}
-        >
-          <Modal.Header
-            content={this.props.title || i18n.t('FuzzyDate.title')}
-          />
-          <Modal.Content>
-            <Form.Input
-              className='accuracy-container'
-              label={i18n.t('FuzzyDate.labels.accuracy')}
+        <ModalContext.Consumer>
+          { (mountNode) => (
+            <Modal
+              as={Form}
+              className='fuzzy-date-modal'
+              mountNode={mountNode}
+              open={this.state.modal}
+              onClose={this.onClose.bind(this)}
             >
-              <Checkbox
-                checked={this.state.accuracy === ACCURACY_YEAR}
-                label={i18n.t('FuzzyDate.accuracy.year')}
-                name='accuracy'
-                onChange={this.onAccuracyChange.bind(this)}
-                radio
-                value={ACCURACY_YEAR}
+              <Modal.Header
+                content={this.props.title || i18n.t('FuzzyDate.title')}
               />
-              <Checkbox
-                checked={this.state.accuracy === ACCURACY_MONTH}
-                label={i18n.t('FuzzyDate.accuracy.month')}
-                name='accuracy'
-                onChange={this.onAccuracyChange.bind(this)}
-                radio
-                value={ACCURACY_MONTH}
-              />
-              <Checkbox
-                checked={this.state.accuracy === ACCURACY_DATE}
-                label={i18n.t('FuzzyDate.accuracy.date')}
-                name='accuracy'
-                onChange={this.onAccuracyChange.bind(this)}
-                radio
-                value={ACCURACY_DATE}
-              />
-            </Form.Input>
-            <Form.Group>
-              { this.renderYear('startDate') }
-              { this.renderMonth('startDate') }
-              { this.renderDate('startDate') }
-              { !this.state.range && (
-                <div
-                  className='button-container'
+              <Modal.Content>
+                <Form.Input
+                  className='accuracy-container'
+                  label={i18n.t('FuzzyDate.labels.accuracy')}
                 >
-                  <Button
-                    basic
-                    content={i18n.t('FuzzyDate.buttons.addRange')}
-                    icon='plus'
-                    onClick={this.onRangeChange.bind(this)}
+                  <Checkbox
+                    checked={this.state.accuracy === ACCURACY_YEAR}
+                    id='accuracy-year'
+                    label={i18n.t('FuzzyDate.accuracy.year')}
+                    name='accuracy'
+                    onChange={this.onAccuracyChange.bind(this)}
+                    radio
+                    value={ACCURACY_YEAR}
                   />
-                </div>
-              )}
-            </Form.Group>
-            { this.state.range && (
-              <Form.Group>
-                { this.renderYear('endDate') }
-                { this.renderMonth('endDate') }
-                { this.renderDate('endDate') }
-                <div
-                  className='button-container'
-                >
-                  <Button
-                    basic
-                    content={i18n.t('FuzzyDate.buttons.removeRange')}
-                    icon='times'
-                    onClick={this.onRangeChange.bind(this)}
+                  <Checkbox
+                    checked={this.state.accuracy === ACCURACY_MONTH}
+                    id='accuracy-month'
+                    label={i18n.t('FuzzyDate.accuracy.month')}
+                    name='accuracy'
+                    onChange={this.onAccuracyChange.bind(this)}
+                    radio
+                    value={ACCURACY_MONTH}
                   />
-                </div>
-              </Form.Group>
-            )}
-            { this.props.description && (
-              <Form.Input
-                label={i18n.t('FuzzyDate.labels.description')}
-              >
-                <TextArea
-                  onChange={this.onDescriptionChange.bind(this)}
-                  value={this.state.description}
-                />
-              </Form.Input>
-            )}
-          </Modal.Content>
-          <Modal.Actions>
-            <Button
-              onClick={this.onSave.bind(this)}
-              primary
-              size='medium'
-              type='submit'
-            >
-              { i18n.t('Common.buttons.save') }
-            </Button>
-            <Button
-              inverted
-              onClick={this.onClose.bind(this)}
-              primary
-              size='medium'
-              type='button'
-            >
-              { i18n.t('Common.buttons.cancel') }
-            </Button>
-          </Modal.Actions>
-        </Modal>
+                  <Checkbox
+                    checked={this.state.accuracy === ACCURACY_DATE}
+                    id='accuracy-date'
+                    label={i18n.t('FuzzyDate.accuracy.date')}
+                    name='accuracy'
+                    onChange={this.onAccuracyChange.bind(this)}
+                    radio
+                    value={ACCURACY_DATE}
+                  />
+                </Form.Input>
+                <Form.Group>
+                  { this.renderYear('startDate') }
+                  { this.renderMonth('startDate') }
+                  { this.renderDate('startDate') }
+                  { !this.state.range && (
+                    <div
+                      className='button-container'
+                    >
+                      <Button
+                        basic
+                        content={i18n.t('FuzzyDate.buttons.addRange')}
+                        icon='plus'
+                        onClick={this.onRangeChange.bind(this)}
+                      />
+                    </div>
+                  )}
+                </Form.Group>
+                { this.state.range && (
+                  <Form.Group>
+                    { this.renderYear('endDate') }
+                    { this.renderMonth('endDate') }
+                    { this.renderDate('endDate') }
+                    <div
+                      className='button-container'
+                    >
+                      <Button
+                        basic
+                        content={i18n.t('FuzzyDate.buttons.removeRange')}
+                        icon='times'
+                        onClick={this.onRangeChange.bind(this)}
+                      />
+                    </div>
+                  </Form.Group>
+                )}
+                { this.props.description && (
+                  <Form.Input
+                    id='description'
+                    label={i18n.t('FuzzyDate.labels.description')}
+                  >
+                    <TextArea
+                      id='description'
+                      onChange={this.onDescriptionChange.bind(this)}
+                      value={this.state.description}
+                    />
+                  </Form.Input>
+                )}
+              </Modal.Content>
+              <Modal.Actions>
+                <Button
+                  onClick={this.onSave.bind(this)}
+                  primary
+                  size='medium'
+                  type='submit'
+                >
+                  { i18n.t('Common.buttons.save') }
+                </Button>
+                <Button
+                  basic
+                  onClick={this.onClose.bind(this)}
+                  size='medium'
+                  type='button'
+                >
+                  { i18n.t('Common.buttons.cancel') }
+                </Button>
+              </Modal.Actions>
+            </Modal>
+          )}
+        </ModalContext.Consumer>
       </>
     );
   }
@@ -459,6 +469,7 @@ class FuzzyDate extends Component<Props, State> {
 
     return (
       <Form.Input
+        id='date-dropdown'
         label={i18n.t('FuzzyDate.labels.date')}
       >
         <Dropdown
@@ -486,9 +497,11 @@ class FuzzyDate extends Component<Props, State> {
 
     return (
       <Form.Input
+        id='month-dropdown'
         label={i18n.t('FuzzyDate.labels.month')}
       >
         <Dropdown
+          id='month-dropdown'
           onChange={this.onMonthChange.bind(this, property)}
           options={_.map(this.state.calendar.listMonths(), (m, i) => ({ key: i, value: i, text: m }))}
           selection
@@ -508,9 +521,11 @@ class FuzzyDate extends Component<Props, State> {
   renderYear(property: string) {
     return (
       <Form.Input
+        id='year'
         label={i18n.t('FuzzyDate.labels.year')}
       >
         <Input
+          id='year'
           onChange={this.onYearChange.bind(this, property)}
           type='number'
           value={this.state[property].year || ''}