@performant-software/semantic-components 0.5.1

package/types/components/VideoFrameSelector.js.flow

@@ -0,0 +1,148 @@
+// @flow
+
+import { Browser } from '@performant-software/shared-components';
+import React, { useEffect, useRef, useState } from 'react';
+import { withTranslation } from 'react-i18next';
+import {
+  Button,
+  Grid,
+  Input,
+  Label,
+  Modal,
+  Segment
+} from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+import './VideoFrameSelector.css';
+
+type Props = {
+  button: any,
+  defaultInterval: number,
+  onSelect: (file: File) => void,
+  src: string,
+  title: string
+};
+
+const INTERVAL_STEP = 1;
+const MIN_INTERVAL = 1;
+const MAX_INTERVAL = 300;
+
+const VideoFrameSelector = (props: Props) => {
+  const [duration, setDuration] = useState(0);
+  const [interval, setInterval] = useState(props.defaultInterval);
+  const [time, setTime] = useState(0);
+  const [modal, setModal] = useState(false);
+
+  const videoRef = useRef(null);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.currentTime = time;
+    }
+  }, [time]);
+
+  return (
+    <>
+      <Button
+        {...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}
+          >
+            <Grid.Column>
+              <div>
+                <Label
+                  content={i18n.t('VideoFrameSelector.labels.interval', { count: interval })}
+                />
+              </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'
+            >
+              <Button
+                basic
+                disabled={time === 0}
+                icon='arrow left'
+                onClick={() => setTime(Math.max(time - interval, 0))}
+              />
+              <Button
+                basic
+                disabled={time === duration}
+                icon='arrow right'
+                onClick={() => setTime(Math.min(time + interval, duration))}
+              />
+            </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>
+    </>
+  );
+};
+
+VideoFrameSelector.defaultProps = {
+  button: {
+    basic: true,
+    content: i18n.t('VideoFrameSelector.buttons.select'),
+    icon: 'image'
+  },
+  defaultInterval: 15,
+  title: i18n.t('VideoFrameSelector.title'),
+};
+
+export default withTranslation()(VideoFrameSelector);

package/types/components/VideoPlayer.js.flow

@@ -0,0 +1,55 @@
+// @flow
+
+import React, { type Element } from 'react';
+import { Embed, Modal } from 'semantic-ui-react';
+import './VideoPlayer.css';
+
+type Props = {
+  autoPlay?: boolean,
+  embedded?: boolean,
+  icon?: string | Element<any>,
+  onClose: () => void,
+  open: boolean,
+  placeholder?: ?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}
+        />
+      )}
+    </Modal.Content>
+  </Modal>
+);
+
+VideoPlayer.defaultProps = {
+  autoPlay: false,
+  embedded: false,
+  icon: 'right circle arrow',
+  size: 'small'
+};
+
+export default VideoPlayer;

package/types/components/VideoPlayerButton.js.flow

@@ -0,0 +1,17 @@
+// @flow
+
+import React from 'react';
+import PlayButton from './PlayButton';
+import './VideoPlayerButton.css';
+
+const VideoPlayerButton = () => (
+  <div
+    className='icon video-player-button'
+  >
+    <div>
+      <PlayButton />
+    </div>
+  </div>
+);
+
+export default VideoPlayerButton;

package/types/components/ViewXML.js.flow

@@ -0,0 +1,72 @@
+// @flow
+
+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';
+
+type Props = {
+  highlighter?: any,
+  opener: {
+    component: ComponentType<any>,
+    props: any
+  },
+  style: any,
+  xml: string
+};
+
+const ViewXML = (props: Props) => {
+  const [showModal, setShowModal] = useState(false);
+  const OpenerComponent = props.opener.component;
+  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)}
+          />
+        </Modal.Actions>
+      </Modal>
+    </>
+  );
+};
+
+ViewXML.defaultProps = {
+  opener: {
+    component: Button,
+    props: {
+      content: i18n.t('ViewXML.buttons.view')
+    }
+  },
+  style: {
+    maxHeight: '70vh'
+  }
+};
+
+export default ViewXML;

package/types/hooks/Imageable.js.flow

@@ -0,0 +1,54 @@
+// @flow
+
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  type ComponentType
+} from 'react';
+
+type Imageable = {
+  contextRef: any,
+  imageLoaded: boolean,
+  onImageLoaded: () => void,
+  onImageUnloaded: () => void
+};
+
+const useImageable = (WrappedComponent: ComponentType<any>) => (props: any) => {
+  const [loaded, setLoaded] = useState(false);
+  const imageRef = useRef(null);
+
+  /**
+   * Since images may be cached, we cannot always rely on the img onLoad event. Here we'll use a ref to check to see
+   * if the image has completed loading.
+   */
+  useEffect(() => {
+    const imageInstance = imageRef.current;
+
+    if (imageInstance && imageInstance.firstChild && imageInstance.firstChild.firstChild) {
+      const image = imageInstance.firstChild.firstChild;
+
+      if (image && image.complete) {
+        setLoaded(true);
+      }
+    }
+  }, []);
+
+  return (
+    <WrappedComponent
+      {...props}
+      contextRef={imageRef}
+      imageLoaded={loaded}
+      onImageLoaded={() => setLoaded(true)}
+      onImageUnloaded={() => setLoaded(false)}
+    />
+  );
+};
+
+export {
+  useImageable
+};
+
+export type {
+  Imageable
+};

package/types/i18n/i18n.js.flow

@@ -0,0 +1,24 @@
+import i18next from 'i18next';
+
+import en from './en.json';
+
+const resources = {
+  en: {
+    translation: en
+  }
+};
+
+const i18n = i18next.createInstance();
+
+i18n
+  .init({
+    debug: true,
+    fallbackLng: 'en',
+    lng: 'en',
+    interpolation: {
+      escapeValue: false,
+    },
+    resources
+  });
+
+export default i18n;

package/types/index.js.flow

@@ -0,0 +1,78 @@
+// @flow
+
+// Components
+export { default as AccordionDataList } from './components/AccordionDataList';
+export { default as AccordionList } from './components/AccordionList';
+export { default as AccordionSelector } from './components/AccordionSelector';
+export { default as ArrowButtons } from './components/ArrowButtons';
+export { default as AssociatedDropdown } from './components/AssociatedDropdown';
+export { default as BooleanIcon } from './components/BooleanIcon';
+export { default as CancelButton } from './components/CancelButton';
+export { default as ColorButton } from './components/ColorButton';
+export { default as ColorPickerModal } from './components/ColorPickerModal';
+export { default as useDataList } from './components/DataList';
+export { default as DataTable } from './components/DataTable';
+export { default as DateInput } from './components/DateInput';
+export { default as DatePicker } from './components/DatePicker';
+export { default as DescriptorField } from './components/DescriptorField';
+export { default as DownloadButton } from './components/DownloadButton';
+export { default as Draggable } from './components/Draggable';
+export { default as DropdownButton } from './components/DropdownButton';
+export { default as DropdownMenu } from './components/DropdownMenu';
+export { default as EditModal } from './components/EditModal';
+export { default as EditPage } from './components/EditPage';
+export { default as EmbeddedList } from './components/EmbeddedList';
+export { default as FileInputButton } from './components/FileInputButton';
+export { default as FileUpload } from './components/FileUpload';
+export { default as FileUploadModal } from './components/FileUploadModal';
+export { default as FuzzyDate } from './components/FuzzyDate';
+export { default as GoogleMap } from './components/GoogleMap';
+export { default as GooglePlacesSearch } from './components/GooglePlacesSearch';
+export { default as HorizontalCards } from './components/HorizontalCards';
+export { default as ItemCollection } from './components/ItemCollection';
+export { default as ItemList } from './components/ItemList';
+export { default as Items } from './components/Items';
+export { default as KeyboardField } from './components/KeyboardField';
+export { default as LazyDocument } from './components/LazyDocument';
+export { default as LazyImage } from './components/LazyImage';
+export { default as LazyVideo } from './components/LazyVideo';
+export { default as LinkButton } from './components/LinkButton';
+export { default as ListFilters } from './components/ListFilters';
+export { default as LinkLabel } from './components/LinkLabel';
+export { default as useList } from './components/List';
+export { default as ListLoader } from './components/ListLoader';
+export { default as ListTable } from './components/ListTable';
+export { default as LoginModal } from './components/LoginModal';
+export { default as MasonryGrid } from './components/MasonryGrid';
+export { default as MediaGallery } from './components/MediaGallery';
+export { default as MediaGrid } from './components/MediaGrid';
+export { default as MediaList } from './components/MediaList';
+export { default as MenuBar } from './components/MenuBar';
+export { default as MenuSidebar } from './components/MenuSidebar';
+export { default as ModalDropdown } from './components/ModalDropdown';
+export { default as NestedAccordion } from './components/NestedAccordion';
+export { default as PlayButton } from './components/PlayButton';
+export { default as PhotoViewer } from './components/PhotoViewer';
+export { default as RemoteDropdown } from './components/RemoteDropdown';
+export { default as SaveButton } from './components/SaveButton';
+export { default as Section } from './components/Section';
+export { default as Selectize } from './components/Selectize';
+export { default as SelectizeHeader } from './components/SelectizeHeader';
+export { default as TabbedModal } from './components/TabbedModal';
+export { default as TabsMenu } from './components/TabsMenu';
+export { default as TagsList } from './components/TagsList';
+export { default as Thumbnail } from './components/Thumbnail';
+export { default as Toaster } from './components/Toaster';
+export { default as VideoFrameSelector } from './components/VideoFrameSelector';
+export { default as VideoPlayer } from './components/VideoPlayer';
+export { default as VideoPlayerButton } from './components/VideoPlayerButton';
+export { default as ViewXML } from './components/ViewXML';
+
+// Types
+export type { EditPageProps } from './components/EditPage';
+export type { FileUploadProps } from './components/FileUploadModal';
+export type { Props as ListProps } from './components/List';
+
+// Constants
+export { SORT_ASCENDING, SORT_DESCENDING } from './components/DataList';
+export { FilterTypes } from './components/ListFilters';

package/webpack.config.js

@@ -0,0 +1,3 @@
+const { configure } = require('@performant-software/webpack-config');
+
+module.exports = configure(__dirname);