@performant-software/semantic-components 0.5.5 → 0.5.8

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

package/types/components/VideoFrameSelector.js.flow

@@ -12,6 +12,7 @@ import {
   Segment
 } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import ModalContext from '../context/ModalContext';
 import './VideoFrameSelector.css';
 
 type Props = {
@@ -46,91 +47,102 @@ const VideoFrameSelector = (props: Props) => {
         {...props.button}
         onClick={() => setModal(true)}
       />
-      <Modal
-        centered={false}
-        className='video-frame-selector'
-        open={modal}
-        size='small'
-      >
-        <Modal.Header
-          content={props.title}
-        />
-        <Modal.Content>
-          <Segment>
-            <video
-              crossOrigin='anonymous'
-              onLoadedMetadata={() => videoRef.current && setDuration(videoRef.current.duration)}
-              ref={videoRef}
-              src={props.src}
-            />
-          </Segment>
-          <Grid
-            columns={2}
+      <ModalContext.Consumer>
+        { (mountNode) => (
+          <Modal
+            centered={false}
+            className='video-frame-selector'
+            mountNode={mountNode}
+            open={modal}
+            size='small'
           >
-            <Grid.Column>
-              <div>
-                <Label
-                  content={i18n.t('VideoFrameSelector.labels.interval', { count: interval })}
+            <Modal.Header
+              content={props.title}
+            />
+            <Modal.Content>
+              <Segment>
+                <video
+                  crossOrigin='anonymous'
+                  onLoadedMetadata={() => videoRef.current && setDuration(videoRef.current.duration)}
+                  ref={videoRef}
+                  src={props.src}
                 />
-              </div>
-              <Input
-                min={MIN_INTERVAL}
-                max={MAX_INTERVAL}
-                name='duration'
-                onChange={(e, { value }) => setInterval(Number(value))}
-                step={INTERVAL_STEP}
-                type='range'
-                value={interval}
-              />
-            </Grid.Column>
-            <Grid.Column
-              textAlign='right'
-            >
+              </Segment>
+              <Grid
+                columns={2}
+              >
+                <Grid.Column>
+                  <div>
+                    <Label
+                      content={i18n.t('VideoFrameSelector.labels.interval', { count: interval })}
+                    />
+                  </div>
+                  <Input
+                    aria-label='Interval Selector'
+                    min={MIN_INTERVAL}
+                    max={MAX_INTERVAL}
+                    name='duration'
+                    onChange={(e, { value }) => setInterval(Number(value))}
+                    step={INTERVAL_STEP}
+                    type='range'
+                    value={interval}
+                  />
+                </Grid.Column>
+                <Grid.Column
+                  textAlign='right'
+                >
+                  <Button
+                    aria-label='Previous Frame'
+                    basic
+                    disabled={time === 0}
+                    icon='arrow left'
+                    onClick={() => setTime(Math.max(time - interval, 0))}
+                  />
+                  <Button
+                    aria-label='Next Frame'
+                    basic
+                    disabled={time === duration}
+                    icon='arrow right'
+                    onClick={() => setTime(Math.min(time + interval, duration))}
+                  />
+                </Grid.Column>
+              </Grid>
+            </Modal.Content>
+            <Modal.Actions>
               <Button
-                basic
-                disabled={time === 0}
-                icon='arrow left'
-                onClick={() => setTime(Math.max(time - interval, 0))}
+                content={i18n.t('Common.buttons.ok')}
+                primary
+                onClick={() => {
+                  const video = videoRef.current;
+
+                  if (video && Browser.isBrowser()) {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = video.videoWidth;
+                    canvas.height = video.videoHeight;
+
+                    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+
+                    canvas.toBlob((blob) => {
+                      const file = new File([blob], 'test.png', {
+                        lastModified: new Date().getTime(),
+                        type: blob.type
+                      });
+
+                      props.onSelect(file);
+                      setModal(false);
+                    });
+                  }
+                }}
               />
               <Button
                 basic
-                disabled={time === duration}
-                icon='arrow right'
-                onClick={() => setTime(Math.min(time + interval, duration))}
+                content={i18n.t('Common.buttons.cancel')}
+                onClick={() => setModal(false)}
               />
-            </Grid.Column>
-          </Grid>
-        </Modal.Content>
-        <Modal.Actions>
-          <Button
-            content={i18n.t('Common.buttons.ok')}
-            primary
-            onClick={() => {
-              const video = videoRef.current;
-
-              if (video && Browser.isBrowser()) {
-                const canvas = document.createElement('canvas');
-                canvas.width = video.videoWidth;
-                canvas.height = video.videoHeight;
-
-                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
-
-                canvas.toBlob((blob) => {
-                  const file = new File([blob], 'test.png', { lastModified: new Date().getTime(), type: blob.type });
-                  props.onSelect(file);
-                  setModal(false);
-                });
-              }
-            }}
-          />
-          <Button
-            content={i18n.t('Common.buttons.cancel')}
-            inverted
-            onClick={() => setModal(false)}
-            primary
-          />
-        </Modal.Actions>
-      </Modal>
+            </Modal.Actions>
+          </Modal>
+        )}
+      </ModalContext.Consumer>
     </>
   );
 };

package/types/components/VideoPlayer.js.flow

@@ -1,7 +1,8 @@
 // @flow
 
-import React, { type Element } from 'react';
-import { Embed, Modal } from 'semantic-ui-react';
+import React, { type Element, useEffect, useRef } from 'react';
+import { Embed, Modal, Ref } from 'semantic-ui-react';
+import ModalContext from '../context/ModalContext';
 import './VideoPlayer.css';
 
 type Props = {
@@ -11,39 +12,66 @@ type Props = {
   onClose: () => void,
   open: boolean,
   placeholder?: ?string,
+  placeholderAlt?: string,
   size?: string,
   video: string
 };
 
-const VideoPlayer = (props: Props) => (
-  <Modal
-    centered={false}
-    className='video-player'
-    closeIcon
-    onClose={props.onClose.bind(this)}
-    open={props.open}
-    size={props.size}
-  >
-    <Modal.Content>
-      { props.embedded && (
-        <Embed
-          active={props.autoPlay}
-          icon={props.icon}
-          iframe={props.autoPlay ? { allow: 'autoplay' } : undefined}
-          placeholder={props.placeholder}
-          url={`${props.video}${props.autoPlay ? '?autoplay=true' : ''}`}
-        />
-      )}
-      { !props.embedded && (
-        <video
-          autoPlay={props.autoPlay}
-          controls
-          src={props.video}
-        />
+const VideoPlayer = (props: Props) => {
+  const embedRef = useRef();
+
+  /**
+   * Work-around to set the "alt" attribute on the placeholder <img> element if provided.
+   */
+  useEffect(() => {
+    if (embedRef && embedRef.current && props.placeholderAlt) {
+      const placeholder = embedRef.current.querySelector('.placeholder');
+
+      if (placeholder) {
+        placeholder.setAttribute('alt', props.placeholderAlt);
+      }
+    }
+  }, [embedRef, props.placeholderAlt]);
+
+  return (
+    <ModalContext.Consumer>
+      { (mountNode) => (
+        <Modal
+          centered={false}
+          className='video-player'
+          closeIcon
+          mountNode={mountNode}
+          onClose={props.onClose.bind(this)}
+          open={props.open}
+          size={props.size}
+        >
+          <Modal.Content>
+            { props.embedded && (
+              <Ref
+                innerRef={embedRef}
+              >
+                <Embed
+                  active={props.autoPlay}
+                  icon={props.icon}
+                  iframe={props.autoPlay ? { allow: 'autoplay' } : undefined}
+                  placeholder={props.placeholder}
+                  url={`${props.video}${props.autoPlay ? '?autoplay=true' : ''}`}
+                />
+              </Ref>
+            )}
+            { !props.embedded && (
+              <video
+                autoPlay={props.autoPlay}
+                controls
+                src={props.video}
+              />
+            )}
+          </Modal.Content>
+        </Modal>
       )}
-    </Modal.Content>
-  </Modal>
-);
+    </ModalContext.Consumer>
+  );
+};
 
 VideoPlayer.defaultProps = {
   autoPlay: false,