npm - @performant-software/semantic-components - Versions diffs - 0.5.2 → 0.5.5 - Mend

@performant-software/semantic-components 0.5.2 → 0.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (440) hide show

package/src/components/VideoFrameSelector.js CHANGED Viewed

@@ -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/src/components/VideoPlayer.js CHANGED Viewed

@@ -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/src/components/ViewXML.js CHANGED Viewed

@@ -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/src/context/ModalContext.js ADDED Viewed

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

package/src/css/site/collections/breadcrumb.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/collections/breadcrumb.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/collections/form.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/collections/form.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/collections/grid.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/collections/grid.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/collections/menu.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/collections/menu.variables ADDED Viewed

@@ -0,0 +1,5 @@
+/*******************************
+    User Variable Overrides
+*******************************/
+@subMenuTextColor: rgba(0, 0, 0, 0.54);

package/src/css/site/collections/message.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+        Site Overrides
+*******************************/

package/src/css/site/collections/message.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/collections/table.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/collections/table.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/elements/button.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/elements/button.variables ADDED Viewed

@@ -0,0 +1,5 @@
+/*******************************
+    User Variable Overrides
+*******************************/
+@textColor: rgba(0, 0, 0, 0.67);

package/src/css/site/elements/container.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/elements/container.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/elements/divider.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/elements/divider.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/elements/flag.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/elements/flag.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*-------------------
+   Flag Variables
+--------------------*/

package/src/css/site/elements/header.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/elements/header.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/elements/icon.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/elements/icon.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/elements/image.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/elements/image.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/elements/input.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/elements/input.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/elements/label.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/elements/label.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/elements/list.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/elements/list.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/elements/loader.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/elements/loader.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/elements/rail.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/elements/rail.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/elements/reveal.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/elements/reveal.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/elements/segment.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/elements/segment.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/elements/step.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/elements/step.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

package/src/css/site/globals/reset.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/globals/reset.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+     User Global Variables
+*******************************/

package/src/css/site/globals/site.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/

package/src/css/site/globals/site.variables ADDED Viewed

@@ -0,0 +1,11 @@
+/*******************************
+     User Global Variables
+*******************************/
+@blue: #1d77bb;
+@green: #178230;
+@primaryColor: @blue;
+@lightTextColor: rgba(0, 0, 0, 0.54);
+@descriptionColor: rgba(0, 0, 0, 0.73);

package/src/css/site/modules/accordion.overrides ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+        User Overrides
+*******************************/

package/src/css/site/modules/accordion.variables ADDED Viewed

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/