@performant-software/semantic-components 0.5.5 → 0.5.6

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,

package/types/components/ViewXML.js.flow

@@ -4,6 +4,7 @@ import React, { type ComponentType, useState } from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { Button, Modal } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import ModalContext from '../context/ModalContext';
 
 type Props = {
   highlighter?: any,
@@ -21,39 +22,44 @@ const ViewXML = (props: Props) => {
   const openerProps = props.opener.props;
 
   return (
-    <>
-      <OpenerComponent
-        {...openerProps}
-        className='view-xml-trigger'
-        onClick={() => setShowModal(true)}
-      />
-      <Modal
-        className='view-xml-modal'
-        centered={false}
-        open={showModal}
-        onClose={() => setShowModal(false)}
-      >
-        <Modal.Header
-          content={i18n.t('ViewXML.title')}
-        />
-        <Modal.Content>
-          <SyntaxHighlighter
-            language='xml'
-            style={props.highlighter}
-          >
-            { props.xml }
-          </SyntaxHighlighter>
-        </Modal.Content>
-        <Modal.Actions>
-          <Button
-            content='Close'
-            inverted
-            primary
-            onClick={() => setShowModal(false)}
+    <ModalContext.Consumer>
+      { (mountNode) => (
+        <>
+          <OpenerComponent
+            {...openerProps}
+            className='view-xml-trigger'
+            onClick={() => setShowModal(true)}
           />
-        </Modal.Actions>
-      </Modal>
-    </>
+          <Modal
+            className='view-xml-modal'
+            closeIcon
+            centered={false}
+            mountNode={mountNode}
+            open={showModal}
+            onClose={() => setShowModal(false)}
+          >
+            <Modal.Header
+              content={i18n.t('ViewXML.title')}
+            />
+            <Modal.Content>
+              <SyntaxHighlighter
+                language='xml'
+                style={props.highlighter}
+              >
+                { props.xml }
+              </SyntaxHighlighter>
+            </Modal.Content>
+            <Modal.Actions>
+              <Button
+                basic
+                content={i18n.t('Common.buttons.close')}
+                onClick={() => setShowModal(false)}
+              />
+            </Modal.Actions>
+          </Modal>
+        </>
+      )}
+    </ModalContext.Consumer>
   );
 };
 

package/types/context/ModalContext.js.flow

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const ModalContext = React.createContext();
+
+export default ModalContext;

package/types/index.js.flow

@@ -16,6 +16,7 @@ export { default as ColorPickerModal } from './components/ColorPickerModal';
 export { default as useDataList } from './components/DataList';
 export { default as DataTable } from './components/DataTable';
 export { default as DataView } from './components/DataView';
+export { default as DatabaseView } from './components/DatabaseView';
 export { default as DateInput } from './components/DateInput';
 export { default as DatePicker } from './components/DatePicker';
 export { default as DescriptorField } from './components/DescriptorField';