@performant-software/semantic-components 0.5.1

package/src/components/Toaster.js

@@ -0,0 +1,73 @@
+// @flow
+
+import React, { type Element, useEffect, useState } from 'react';
+import { Message, Transition } from 'semantic-ui-react';
+import _ from 'underscore';
+import './Toaster.css';
+
+type Props = {
+  children: Array<Element<any>>,
+  onDismiss?: () => void,
+  timeout: number,
+  type: string
+};
+
+const TRANSITION_DURATION = 700;
+
+const Toaster = (props: Props) => {
+  const [visible, setVisible] = useState(true);
+
+  /*
+   * If a timeout is provided, automatically hide the message after <code>timeout</code> milliseconds.
+   */
+  if (props.timeout && props.timeout > 0) {
+    _.delay(() => {
+      setVisible(false);
+    }, props.timeout);
+  }
+
+  /*
+   * If the toaster visibility has change to "false", call the onDismiss prop. We'll delay the call
+   * by <code>TRANSITION_DURATION</code> milliseconds in order for the transition to run.
+   */
+  useEffect(() => {
+    if (!visible && props.onDismiss) {
+      _.delay(props.onDismiss.bind(this), TRANSITION_DURATION);
+    }
+  }, [visible]);
+
+  return (
+    <Transition
+      animation='slide down'
+      duration={TRANSITION_DURATION}
+      transitionOnMount
+      visible={visible}
+    >
+      <Message
+        className='toaster'
+        info={props.type === Toaster.MessageTypes.info}
+        negative={props.type === Toaster.MessageTypes.negative}
+        onDismiss={() => setVisible(false)}
+        positive={props.type === Toaster.MessageTypes.positive}
+        warning={props.type === Toaster.MessageTypes.negative}
+      >
+        { props.children }
+      </Message>
+    </Transition>
+  );
+};
+
+Toaster.MessageTypes = {
+  info: 'info',
+  negative: 'negative',
+  positive: 'positive',
+  warning: 'warning'
+};
+
+Toaster.defaultProps = {
+  onDismiss: undefined,
+  timeout: 3000,
+  type: Toaster.MessageTypes.info
+};
+
+export default Toaster;

package/src/components/VideoFrameSelector.css

@@ -0,0 +1,3 @@
+.video-frame-selector video {
+  width: 100%;
+}

package/src/components/VideoFrameSelector.js

@@ -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/src/components/VideoPlayer.css

@@ -0,0 +1,3 @@
+.video-player video {
+  width: 100%;
+}

package/src/components/VideoPlayer.js

@@ -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/src/components/VideoPlayerButton.css

@@ -0,0 +1,17 @@
+.video-player-button {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+.video-player-button > div:first-child {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+}
+

package/src/components/VideoPlayerButton.js

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

@@ -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/src/i18n/en.json

@@ -0,0 +1,204 @@
+{
+  "AccordionList": {
+    "deleteContent": "Are you sure you want to remove this record?",
+    "deleteHeader": "Confirm Remove",
+    "record": "Record",
+    "record_plural": "Records"
+  },
+  "AccordionSelector": {
+    "title": "Select Items"
+  },
+  "Common": {
+    "buttons": {
+      "add": "Add",
+      "cancel": "Cancel",
+      "clear": "Clear",
+      "edit": "Edit",
+      "ok": "OK",
+      "save": "Save"
+    },
+    "errors": {
+      "title": "Oops!"
+    },
+    "messages": {
+      "error": {
+        "header": "Oops!"
+      },
+      "loading": "Loading",
+      "save": {
+        "content": "Your changes have been saved.",
+        "header": "Success!"
+      }
+    }
+  },
+  "EditContainer": {
+    "errors": {
+      "general": "Something went wrong while saving the record. Please make sure all required fields are filled out.",
+      "required": "The {{key}} field is required.",
+      "system": "A system error occurred while saving the record. Please contact your system administrator.",
+      "unique": "A record with the {{key}} \"{{value}}\" already exists."
+    }
+  },
+  "DataTable": {
+    "actions": {
+      "copy": {
+        "content": "Creates an editable copy to be saved as a new record",
+        "title": "Copy"
+      },
+      "delete": {
+        "content": "Removes the record, permanently",
+        "title": "Remove"
+      },
+      "edit": {
+        "content": "Opens the modal to edit the record",
+        "title": "Edit"
+      }
+    },
+    "columns": {
+      "actions": "Actions",
+      "select": "Select"
+    },
+    "loading": "Loading"
+  },
+  "EditProvider": {
+    "errors": {
+      "general": "Something went wrong while saving the record. Please make sure all required fields are filled out.",
+      "required": "The {{key}} field is required.",
+      "unique": "A record with the {{key}} \"{{value}}\" already exists."
+    }
+  },
+  "FileUpload": {
+    "add": "<0>Add files</0> or drop files here",
+    "errors": {
+      "fileType": "Unable to upload {{name}} because {{type}} files are not allowed.",
+      "maxSize": "Unable to upload {{name}} because it exceeds 10 MB."
+    }
+  },
+  "FileUploadModal": {
+    "errors": {
+      "required": "{{filename}} - The following fields are required: {{fields}}"
+    },
+    "loader": "Uploading files...",
+    "title": "Upload Files"
+  },
+  "FuzzyDate": {
+    "accuracy": {
+      "date": "Date",
+      "month": "Month",
+      "year": "Year"
+    },
+    "buttons": {
+      "addRange": "Add Range",
+      "removeRange": "Remove Range"
+    },
+    "labels": {
+      "accuracy": "Accuracy",
+      "date": "Date",
+      "description": "Description",
+      "month": "Month",
+      "year": "Year"
+    },
+    "title": "Fuzzy Date"
+  },
+  "ItemList": {
+    "actions": {
+      "copy": "Copy",
+      "delete": "Remove",
+      "edit": "Edit"
+    },
+    "buttons": {
+      "clear": "Clear selected",
+      "deselectAll": "Deselect all",
+      "selectAll": "Select all"
+    }
+  },
+  "KeyboardField": {
+    "labels": {
+      "hideKeyboard": "Hide Keyboard",
+      "showKeyboard": "Show Keyboard"
+    }
+  },
+  "LazyDocument": {
+    "buttons": {
+      "download": "Download"
+    }
+  },
+  "LazyImage": {
+    "buttons": {
+      "view": "View image"
+    }
+  },
+  "LazyVideo": {
+    "buttons": {
+      "play": "Play video"
+    }
+  },
+  "List": {
+    "buttons": {
+      "add": "Add",
+      "deleteAll": "Delete all"
+    },
+    "deleteAllContent": "Are you sure you want to remove all records? This action cannot be undone.",
+    "deleteAllHeader": "Confirm Remove All",
+    "deleteContent": "Are you sure you want to remove this record?",
+    "deleteHeader": "Confirm Remove",
+    "emptyList": "No matching records found.",
+    "emptyListAdd": "You haven't added any yet. Click <1><0><0></0><1></1></0></1> to get started.",
+    "labels": {
+      "perPage": "Show {{perPage}}"
+    },
+    "record": "Record",
+    "record_plural": "Records"
+  },
+  "ListFilters": {
+    "buttons": {
+      "add": "Add",
+      "reset": "Reset filters"
+    },
+    "operators": {
+      "contain": "Contains",
+      "empty": "Is empty",
+      "equal": "Equals",
+      "greaterThan": "Is greater than",
+      "lessThan": "Is less than",
+      "notContain": "Does not contain",
+      "notEmpty": "Is not empty",
+      "notEqual": "Does not equal"
+    },
+    "title": "Filters"
+  },
+  "LoginModal": {
+    "buttonCancel": "Cancel",
+    "buttonLogin": "Login",
+    "email": "Email",
+    "header": "Login",
+    "loginErrorContent": "The username and/or password you entered is invalid. Please double check and try again.",
+    "loginErrorHeader": "Invalid Credentials",
+    "password": "Password"
+  },
+  "RemoteDropdown": {
+    "labels": {
+      "add": "Add",
+      "loadMore": "Load more"
+    }
+  },
+  "Selectize": {
+    "noRecords": "No matching records."
+  },
+  "VideoFrameSelector": {
+    "buttons": {
+      "select": "Select frame"
+    },
+    "labels": {
+      "interval": "Interval: {{count}} second",
+      "interval_plural": "Interval: {{count}} seconds"
+    },
+    "title": "Select Frame"
+  },
+  "ViewXML": {
+    "buttons": {
+      "view": "View XML"
+    },
+    "title": "XML"
+  }
+}

package/src/i18n/i18n.js

@@ -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;