@performant-software/semantic-components 0.5.5 → 0.5.6

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;

package/types/components/ReferenceTableModal.js.flow

@@ -3,65 +3,71 @@
 import type { EditContainerProps } from '@performant-software/shared-components';
 import React from 'react';
 import { Form, Header, Modal } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
 import EmbeddedList from './EmbeddedList';
+import ModalContext from '../context/ModalContext';
 import ReferenceCodeModal from './ReferenceCodeModal';
-import i18n from '../i18n/i18n';
 
 const ReferenceTableModal = (props: EditContainerProps) => (
-  <Modal
-    as={Form}
-    centered={false}
-    className='reference-table-modal'
-    open
-  >
-    <Modal.Header
-      content={props.item.id
-        ? i18n.t('ReferenceTableModal.title.edit')
-        : i18n.t('ReferenceTableModal.title.add')}
-    />
-    <Modal.Content>
-      <Form.Input
-        error={props.isError('name')}
-        label={i18n.t('ReferenceTableModal.labels.name')}
-        onChange={props.onTextInputChange.bind(this, 'name')}
-        required={props.isRequired('name')}
-        value={props.item.name}
-      />
-      <Form.Input
-        error={props.isError('key')}
-        label={i18n.t('ReferenceTableModal.labels.key')}
-        onChange={props.onTextInputChange.bind(this, 'key')}
-        required={props.isRequired('key')}
-        value={props.item.key}
-      />
-      <Header
-        content={i18n.t('ReferenceTableModal.labels.referenceCodes')}
-      />
-      <EmbeddedList
-        actions={[{
-          name: 'edit'
-        }, {
-          name: 'copy'
-        }, {
-          name: 'delete'
-        }]}
-        columns={[{
-          name: 'name',
-          label: i18n.t('ReferenceTableModal.referenceCodes.columns.name')
-        }]}
-        items={props.item.reference_codes}
-        modal={{
-          component: ReferenceCodeModal,
-          props: {
-            required: ['name']
-          }
-        }}
-        onDelete={props.onDeleteChildAssociation.bind(this, 'reference_codes')}
-        onSave={props.onSaveChildAssociation.bind(this, 'reference_codes')}
-      />
-    </Modal.Content>
-    { props.children }
-  </Modal>
+  <ModalContext.Consumer>
+    { (mountNode) => (
+      <Modal
+        as={Form}
+        centered={false}
+        className='reference-table-modal'
+        mountNode={mountNode}
+        open
+      >
+        <Modal.Header
+          content={props.item.id
+            ? i18n.t('ReferenceTableModal.title.edit')
+            : i18n.t('ReferenceTableModal.title.add')}
+        />
+        <Modal.Content>
+          <Form.Input
+            error={props.isError('name')}
+            label={i18n.t('ReferenceTableModal.labels.name')}
+            onChange={props.onTextInputChange.bind(this, 'name')}
+            required={props.isRequired('name')}
+            value={props.item.name}
+          />
+          <Form.Input
+            error={props.isError('key')}
+            label={i18n.t('ReferenceTableModal.labels.key')}
+            onChange={props.onTextInputChange.bind(this, 'key')}
+            required={props.isRequired('key')}
+            value={props.item.key}
+          />
+          <Header
+            content={i18n.t('ReferenceTableModal.labels.referenceCodes')}
+          />
+          <EmbeddedList
+            actions={[{
+              name: 'edit'
+            }, {
+              name: 'copy'
+            }, {
+              name: 'delete'
+            }]}
+            columns={[{
+              name: 'name',
+              label: i18n.t('ReferenceTableModal.referenceCodes.columns.name')
+            }]}
+            items={props.item.reference_codes}
+            modal={{
+              component: ReferenceCodeModal,
+              props: {
+                required: ['name']
+              }
+            }}
+            onDelete={props.onDeleteChildAssociation.bind(this, 'reference_codes')}
+            onSave={props.onSaveChildAssociation.bind(this, 'reference_codes')}
+          />
+        </Modal.Content>
+        { props.children }
+      </Modal>
+    )}
+  </ModalContext.Consumer>
 );
 
 export default ReferenceTableModal;

package/types/components/Selectize.js.flow

@@ -18,9 +18,10 @@ import {
 import _ from 'underscore';
 import SelectizeHeader from './SelectizeHeader';
 import i18n from '../i18n/i18n';
+import ModalContext from '../context/ModalContext';
 import useDataList from './DataList';
-import './Selectize.css';
 import useList, { type Props as ListProps } from './List';
+import './Selectize.css';
 
 type Props = {
   centered?: boolean,
@@ -238,51 +239,55 @@ const Selectize = (props: Props) => {
   }, [onSelect, props.modal]);
 
   return (
-    <Modal
-      as={Form}
-      centered={props.centered}
-      className='selectize'
-      open
-      noValidate
-      size='small'
-    >
-      <Modal.Header
-        content={props.title}
-      />
-      <Modal.Content>
-        <SelectizeGrid
-          {...props}
-          actions={[]}
-          isSelected={isSelected}
-          onDelete={() => Promise.resolve()}
-          onDeleteAll={() => Promise.resolve()}
-          onItemSelection={onItemSelection}
-          onSave={onSave}
-          onSelect={onSelect}
-          selectedItem={selectedItem}
-          selectedItems={selectedItems}
-        />
-      </Modal.Content>
-      <Modal.Actions>
-        <Button
-          onClick={props.onSave.bind(this, selectedItems)}
-          primary
-          size='medium'
-          type='submit'
-        >
-          { i18n.t('Common.buttons.save') }
-        </Button>
-        <Button
-          inverted
-          onClick={props.onClose.bind(this)}
-          primary
-          size='medium'
-          type='button'
+    <ModalContext.Consumer>
+      { (mountNode) => (
+        <Modal
+          as={Form}
+          centered={props.centered}
+          className='selectize'
+          mountNode={mountNode}
+          noValidate
+          open
+          size='small'
         >
-          { i18n.t('Common.buttons.cancel') }
-        </Button>
-      </Modal.Actions>
-    </Modal>
+          <Modal.Header
+            content={props.title}
+          />
+          <Modal.Content>
+            <SelectizeGrid
+              {...props}
+              actions={[]}
+              isSelected={isSelected}
+              onDelete={() => Promise.resolve()}
+              onDeleteAll={() => Promise.resolve()}
+              onItemSelection={onItemSelection}
+              onSave={onSave}
+              onSelect={onSelect}
+              selectedItem={selectedItem}
+              selectedItems={selectedItems}
+            />
+          </Modal.Content>
+          <Modal.Actions>
+            <Button
+              onClick={props.onSave.bind(this, selectedItems)}
+              primary
+              size='medium'
+              type='submit'
+            >
+              { i18n.t('Common.buttons.save') }
+            </Button>
+            <Button
+              basic
+              onClick={props.onClose.bind(this)}
+              size='medium'
+              type='button'
+            >
+              { i18n.t('Common.buttons.cancel') }
+            </Button>
+          </Modal.Actions>
+        </Modal>
+      )}
+    </ModalContext.Consumer>
   );
 };
 

package/types/components/TabbedModal.js.flow

@@ -4,6 +4,7 @@ import { Element } from '@performant-software/shared-components';
 import React, { Component, type Node } from 'react';
 import { Header, Menu, Modal } from 'semantic-ui-react';
 import _ from 'underscore';
+import ModalContext from '../context/ModalContext';
 import './TabbedModal.css';
 
 type Props = {
@@ -84,32 +85,37 @@ class TabbedModal extends Component<Props, State> {
     const tab = _.find(tabs, (t) => t.props.name === this.state.tab);
 
     return (
-      <Modal
-        className={this.getModalClasses()}
-        {..._.omit(this.props, 'header', 'renderHeader', 'inlineTabs', 'className')}
-      >
-        <Modal.Header
-          className={this.getHeaderClasses()}
-        >
-          { this.renderHeader() }
-          <Menu
-            float='right'
-            secondary
+      <ModalContext.Consumer>
+        { (mountNode) => (
+          <Modal
+            className={this.getModalClasses()}
+            mountNode={mountNode}
+            {..._.omit(this.props, 'header', 'renderHeader', 'inlineTabs', 'className')}
           >
-            { _.map(Element.findByType(this.props.children, TabbedModal.Tab), this.renderTab.bind(this)) }
-          </Menu>
-        </Modal.Header>
-        <Modal.Content>
-          { tab && (
-            <div
-              key={tab.props.name}
+            <Modal.Header
+              className={this.getHeaderClasses()}
             >
-              { tab.props.children }
-            </div>
-          )}
-        </Modal.Content>
-        { Element.findByType(this.props.children, Modal.Actions) }
-      </Modal>
+              { this.renderHeader() }
+              <Menu
+                float='right'
+                secondary
+              >
+                { _.map(Element.findByType(this.props.children, TabbedModal.Tab), this.renderTab.bind(this)) }
+              </Menu>
+            </Modal.Header>
+            <Modal.Content>
+              { tab && (
+                <div
+                  key={tab.props.name}
+                >
+                  { tab.props.children }
+                </div>
+              )}
+            </Modal.Content>
+            { Element.findByType(this.props.children, Modal.Actions) }
+          </Modal>
+        )}
+      </ModalContext.Consumer>
     );
   }