@performant-software/semantic-components 0.5.4 → 0.5.7

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/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/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/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/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 || ''}

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)}