@performant-software/semantic-components 0.5.5 → 0.5.8

package/types/components/ListFilters.js.flow

@@ -23,6 +23,7 @@ import i18n from '../i18n/i18n';
 import AssociatedDropdown from './AssociatedDropdown';
 import DropdownButton from './DropdownButton';
 import FuzzyDate from './FuzzyDate';
+import ModalContext from '../context/ModalContext';
 
 type Option = {
   key: string | number,
@@ -286,118 +287,123 @@ const ListFilters = (props: Props) => {
   }, []);
 
   return (
-    <Modal
-      as={Form}
-      centered={false}
-      className='list-filters-modal'
-      noValidate
-      open
-      size='small'
-    >
-      <Modal.Header>
-        <Grid
-          columns={2}
+    <ModalContext.Consumer>
+      { (mountNode) => (
+        <Modal
+          as={Form}
+          centered={false}
+          className='list-filters-modal'
+          mountNode={mountNode}
+          noValidate
+          open
+          size='small'
         >
-          <Grid.Column
-            verticalAlign='middle'
-          >
-            <Header
-              content={i18n.t('ListFilters.title')}
-            />
-          </Grid.Column>
-          <Grid.Column
-            textAlign='right'
-          >
-            <DropdownButton
-              color='green'
-              icon='plus'
-              options={_.map(filters, (filter) => ({
-                key: filter.key,
-                value: filter.key,
-                text: filter.label
-              }))}
-              onChange={(e, { value }) => {
-                const filter = _.findWhere(props.filters, { key: value });
-                props.onSaveChildAssociation('filters', {
-                  ...filter,
-                  uid: uuid(),
-                  operator: Operators.equal
-                });
-              }}
-              scrolling
-              text={i18n.t('ListFilters.buttons.add')}
-              value=''
-            />
-            <Button
-              color='red'
-              content={i18n.t('ListFilters.buttons.reset')}
-              icon='repeat'
-              onClick={() => props.onReset()}
-              style={{
-                marginLeft: '1em'
-              }}
-            />
-          </Grid.Column>
-        </Grid>
-      </Modal.Header>
-      <Modal.Content>
-        { !_.isEmpty(props.item.filters) && (
-          <Grid>
-            { _.map(props.item.filters, (filter) => (
-              <Grid.Row
-                columns={4}
-                key={filter.key}
+          <Modal.Header>
+            <Grid
+              columns={2}
+            >
+              <Grid.Column
                 verticalAlign='middle'
               >
-                <Grid.Column>
-                  <Header
-                    content={filter.label}
-                  />
-                </Grid.Column>
-                <Grid.Column
-                  width={5}
-                >
-                  <Dropdown
-                    options={getOperatorsByType(filter.type)}
-                    onChange={(e, { value }) => props.onSaveChildAssociation('filters', {
-                      ..._.omit(filter, 'value'),
-                      operator: value,
-                    })}
-                    selection
-                    value={filter.operator}
-                  />
-                </Grid.Column>
-                <Grid.Column
-                  width={5}
-                >
-                  { renderInput(filter) }
-                </Grid.Column>
-                <Grid.Column
-                  width={1}
-                >
-                  <Button
-                    basic
-                    icon='times'
-                    onClick={() => {
-                      /*
-                       * If we're removing the last filter, call the onReset prop to ensure the UI doesn't display
-                       * as active.
-                       */
-                      if (props.item.filters && props.item.filters.length === 1) {
-                        props.onReset();
-                      } else {
-                        props.onDeleteChildAssociation('filters', filter);
-                      }
-                    }}
-                  />
-                </Grid.Column>
-              </Grid.Row>
-            ))}
-          </Grid>
-        )}
-      </Modal.Content>
-      { props.children }
-    </Modal>
+                <Header
+                  content={i18n.t('ListFilters.title')}
+                />
+              </Grid.Column>
+              <Grid.Column
+                textAlign='right'
+              >
+                <DropdownButton
+                  color='green'
+                  icon='plus'
+                  options={_.map(filters, (filter) => ({
+                    key: filter.key,
+                    value: filter.key,
+                    text: filter.label
+                  }))}
+                  onChange={(e, { value }) => {
+                    const filter = _.findWhere(props.filters, { key: value });
+                    props.onSaveChildAssociation('filters', {
+                      ...filter,
+                      uid: uuid(),
+                      operator: Operators.equal
+                    });
+                  }}
+                  scrolling
+                  text={i18n.t('ListFilters.buttons.add')}
+                  value=''
+                />
+                <Button
+                  color='red'
+                  content={i18n.t('ListFilters.buttons.reset')}
+                  icon='repeat'
+                  onClick={() => props.onReset()}
+                  style={{
+                    marginLeft: '1em'
+                  }}
+                />
+              </Grid.Column>
+            </Grid>
+          </Modal.Header>
+          <Modal.Content>
+            { !_.isEmpty(props.item.filters) && (
+              <Grid>
+                { _.map(props.item.filters, (filter) => (
+                  <Grid.Row
+                    columns={4}
+                    key={filter.key}
+                    verticalAlign='middle'
+                  >
+                    <Grid.Column>
+                      <Header
+                        content={filter.label}
+                      />
+                    </Grid.Column>
+                    <Grid.Column
+                      width={5}
+                    >
+                      <Dropdown
+                        options={getOperatorsByType(filter.type)}
+                        onChange={(e, { value }) => props.onSaveChildAssociation('filters', {
+                          ..._.omit(filter, 'value'),
+                          operator: value,
+                        })}
+                        selection
+                        value={filter.operator}
+                      />
+                    </Grid.Column>
+                    <Grid.Column
+                      width={5}
+                    >
+                      { renderInput(filter) }
+                    </Grid.Column>
+                    <Grid.Column
+                      width={1}
+                    >
+                      <Button
+                        basic
+                        icon='times'
+                        onClick={() => {
+                          /*
+                           * If we're removing the last filter, call the onReset prop to ensure the UI doesn't display
+                           * as active.
+                           */
+                          if (props.item.filters && props.item.filters.length === 1) {
+                            props.onReset();
+                          } else {
+                            props.onDeleteChildAssociation('filters', filter);
+                          }
+                        }}
+                      />
+                    </Grid.Column>
+                  </Grid.Row>
+                ))}
+              </Grid>
+            )}
+          </Modal.Content>
+          { props.children }
+        </Modal>
+      )}
+    </ModalContext.Consumer>
   );
 };
 

package/types/components/ListTable.js.flow

@@ -1,5 +1,6 @@
 // @flow
 
+import { Hooks, Object as ObjectUtils } from '@performant-software/shared-components';
 import React, { useEffect } from 'react';
 import _ from 'underscore';
 import DataTable from './DataTable';
@@ -10,6 +11,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,
@@ -18,6 +21,8 @@ type Props = {
 };
 
 const ListTable = (props: Props) => {
+  const prevColumns = Hooks.usePrevious(props.columns);
+
   /**
    * Sorts the list by the selected column, and/or reverse the direction.
    *
@@ -49,20 +54,27 @@ const ListTable = (props: Props) => {
    * sortable column.
    */
   useEffect(() => {
-    const { page, sortColumn, sortDirection = SORT_ASCENDING } = props;
+    if (!ObjectUtils.isEqual(props.columns, prevColumns)) {
+      const {
+        page,
+        defaultSort,
+        defaultSortDirection = SORT_ASCENDING
+      } = props;
 
-    if (props.sortColumn) {
-      props.onSort(sortColumn, sortDirection, page);
-    } else {
-      const sortableColumn = _.findWhere(props.columns, { sortable: true });
-      if (sortableColumn) {
-        onColumnClick(sortableColumn);
+      if (defaultSort) {
+        props.onSort(defaultSort, defaultSortDirection, page);
       } else {
-        // If no columns are sortable, load the data as is
-        props.onInit();
+        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

package/types/components/LoginModal.js.flow

@@ -12,6 +12,7 @@ import {
   Modal
 } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import ModalContext from '../context/ModalContext';
 import './LoginModal.css';
 
 type Props = {
@@ -27,72 +28,78 @@ type Props = {
 };
 
 const LoginModal = (props: Props) => (
-  <Modal
-    as={Form}
-    className='login-modal'
-    error={props.loginFailed}
-    open={props.open}
-    size='small'
-    trigger={props.trigger}
-  >
-    <Header
-      icon='user circle'
-      content={i18n.t('LoginModal.header')}
-    />
-    <Message
-      error
-      header={i18n.t('LoginModal.loginErrorHeader')}
-      content={i18n.t('LoginModal.loginErrorContent')}
-    />
-    <Grid
-      padded='vertically'
-      textAlign='center'
-    >
-      <Grid.Column>
-        <Grid.Row>
-          <Input
-            autoFocus
-            className='form-field'
-            icon={<Icon name='at' />}
-            onChange={props.onUsernameChange.bind(this)}
-            placeholder={props.placeholder}
-            size='huge'
-          />
-        </Grid.Row>
-        <Grid.Row
-          className='row'
-        >
-          <Input
-            className='form-field'
-            icon={<Icon name='lock' />}
-            onChange={props.onPasswordChange.bind(this)}
-            placeholder={i18n.t('LoginModal.password')}
-            size='huge'
-            type='password'
-          />
-        </Grid.Row>
-      </Grid.Column>
-    </Grid>
-    <Modal.Actions>
-      <Button
-        disabled={props.disabled}
-        onClick={props.onLogin.bind(this)}
-        primary
-        size='large'
-        type='submit'
-      >
-        { i18n.t('LoginModal.buttonLogin') }
-      </Button>
-      <Button
-        inverted
-        onClick={props.onClose.bind(this)}
-        primary
-        size='large'
+  <ModalContext.Consumer>
+    { (mountNode) => (
+      <Modal
+        as={Form}
+        className='login-modal'
+        error={props.loginFailed}
+        mountNode={mountNode}
+        open={props.open}
+        size='small'
+        trigger={props.trigger}
       >
-        { i18n.t('LoginModal.buttonCancel') }
-      </Button>
-    </Modal.Actions>
-  </Modal>
+        <Header
+          icon='user circle'
+          content={i18n.t('LoginModal.header')}
+        />
+        <Message
+          error
+          header={i18n.t('LoginModal.loginErrorHeader')}
+          content={i18n.t('LoginModal.loginErrorContent')}
+        />
+        <Grid
+          padded='vertically'
+          textAlign='center'
+        >
+          <Grid.Column>
+            <Grid.Row>
+              <Input
+                autoFocus
+                className='form-field'
+                icon={<Icon name='at' />}
+                onChange={props.onUsernameChange.bind(this)}
+                placeholder={props.placeholder}
+                size='huge'
+              />
+            </Grid.Row>
+            <Grid.Row
+              className='row'
+            >
+              <Input
+                className='form-field'
+                icon={<Icon name='lock' />}
+                onChange={props.onPasswordChange.bind(this)}
+                placeholder={i18n.t('LoginModal.password')}
+                size='huge'
+                type='password'
+              />
+            </Grid.Row>
+          </Grid.Column>
+        </Grid>
+        <Modal.Actions>
+          <Button
+            disabled={props.disabled}
+            onClick={props.onLogin.bind(this)}
+            primary
+            size='large'
+            type='submit'
+          >
+            { i18n.t('LoginModal.buttonLogin') }
+          </Button>
+          { props.onClose && (
+            <Button
+              basic
+              onClick={props.onClose.bind(this)}
+              size='large'
+            >
+              { i18n.t('LoginModal.buttonCancel') }
+            </Button>
+          )}
+        </Modal.Actions>
+      </Modal>
+    )}
+  </ModalContext.Consumer>
 );
 
 LoginModal.defaultProps = {

package/types/components/MenuBar.js.flow

@@ -53,6 +53,7 @@ const MenuBar = ({ header, items, ...props }: Props) => {
       aria-label={item.content}
       item
       key={index}
+      role='group'
       text={item.content}
     >
       { _.map(item.items, (i) => (i.items ? renderDropdown(i) : renderDropdownItem(i)))}

package/types/components/PhotoViewer.js.flow

@@ -2,9 +2,11 @@
 
 import React from 'react';
 import { Image, Modal } from 'semantic-ui-react';
+import ModalContext from '../context/ModalContext';
 import './PhotoViewer.css';
 
 type Props = {
+  alt?: string,
   image: string,
   onClose: () => void,
   open: boolean,
@@ -12,21 +14,27 @@ type Props = {
 };
 
 const PhotoViewer = (props: Props) => (
-  <Modal
-    centered={false}
-    className='photo-viewer'
-    closeIcon
-    onClose={props.onClose.bind(this)}
-    open={props.open}
-    size={props.size}
-  >
-    <Modal.Content>
-      <Image
-        fluid
-        src={props.image}
-      />
-    </Modal.Content>
-  </Modal>
+  <ModalContext.Consumer>
+    { (mountNode) => (
+      <Modal
+        centered={false}
+        className='photo-viewer'
+        closeIcon
+        mountNode={mountNode}
+        onClose={props.onClose.bind(this)}
+        open={props.open}
+        size={props.size}
+      >
+        <Modal.Content>
+          <Image
+            alt={props.alt}
+            fluid
+            src={props.image}
+          />
+        </Modal.Content>
+      </Modal>
+    )}
+  </ModalContext.Consumer>
 );
 
 PhotoViewer.defaultProps = {

package/types/components/ReferenceCodeModal.js.flow

@@ -4,29 +4,35 @@ import type { EditContainerProps } from '@performant-software/shared-components'
 import React from 'react';
 import { Form, Modal } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import ModalContext from '../context/ModalContext';
 
 const ReferenceCodeModal = (props: EditContainerProps) => (
-  <Modal
-    as={Form}
-    centered={false}
-    open
-  >
-    <Modal.Header
-      content={props.item.id
-        ? i18n.t('ReferenceCodeModal.title.edit')
-        : i18n.t('ReferenceCodeModal.title.add')}
-    />
-    <Modal.Content>
-      <Form.Input
-        error={props.isError('name')}
-        label={i18n.t('ReferenceCodeModal.labels.name')}
-        onChange={props.onTextInputChange.bind(this, 'name')}
-        required={props.isRequired('name')}
-        value={props.item.name}
-      />
-    </Modal.Content>
-    { props.children }
-  </Modal>
+  <ModalContext.Consumer>
+    { (mountNode) => (
+      <Modal
+        as={Form}
+        centered={false}
+        mountNode={mountNode}
+        open
+      >
+        <Modal.Header
+          content={props.item.id
+            ? i18n.t('ReferenceCodeModal.title.edit')
+            : i18n.t('ReferenceCodeModal.title.add')}
+        />
+        <Modal.Content>
+          <Form.Input
+            error={props.isError('name')}
+            label={i18n.t('ReferenceCodeModal.labels.name')}
+            onChange={props.onTextInputChange.bind(this, 'name')}
+            required={props.isRequired('name')}
+            value={props.item.name}
+          />
+        </Modal.Content>
+        { props.children }
+      </Modal>
+    )}
+  </ModalContext.Consumer>
 );
 
 export default ReferenceCodeModal;