@performant-software/semantic-components 1.0.3 → 1.0.4-beta.1

package/src/components/FileUploadProgress.css

@@ -0,0 +1,24 @@
+.file-upload-progress {
+  display: flex;
+  align-items: center;
+}
+
+.file-upload-progress > .progress-container {
+  display: flex;
+  flex-direction: column;
+  margin-left: 20px;
+  width: 100%;
+}
+
+.file-upload-progress > .progress-container > .ui.header {
+  display: flex;
+  align-items: flex-end;
+}
+
+.file-upload-progress > .progress-container > .ui.header > .content {
+  margin-right: 40px;
+}
+
+.file-upload-progress > .progress-container > .progress {
+  margin-bottom: 0;
+}

package/src/components/FileUploadProgress.js

@@ -0,0 +1,75 @@
+// @flow
+
+import React, { useMemo, type ComponentType } from 'react';
+import { Header, Icon, Progress } from 'semantic-ui-react';
+import './FileUploadProgress.css';
+
+type Props = {
+  completed: number,
+  total: number,
+  uploading?: boolean
+};
+
+const FileUploadProgress: ComponentType<any> = (props: Props) => {
+  /**
+   * Sets the "complete" variable to "true" if the number of completed items is equal to the total and
+   * greater than zero.
+   *
+   * @type {unknown}
+   */
+  const complete = useMemo(() => (
+    props.completed > 0 && props.completed === props.total
+  ), [props.completed, props.total]);
+
+  /**
+   * Sets the percent of completed items.
+   *
+   * @type {number|number}
+   */
+  const percent = useMemo(() => (
+    props.total > 0 ? (props.completed / props.total) : 0
+  ), [props.completed, props.total]);
+
+  /**
+   * Sets the formatted percent view.
+   */
+  const percentView = useMemo(() => (
+    Number(percent)
+      .toLocaleString(undefined, {
+        style: 'percent',
+        minimumFractionDigits: 0
+      })
+  ), [percent]);
+
+  return (
+    <div
+      className='file-upload-progress'
+    >
+      <Icon
+        color='blue'
+        name='cloud upload'
+        size='big'
+      />
+      <div
+        className='progress-container'
+      >
+        <Header>
+          <Header.Content
+            content={percentView}
+          />
+          <Header.Subheader>
+            { !(props.uploading || complete) && 'Getting Started' }
+            { props.uploading && 'Uploading...' }
+            { complete && 'Completed' }
+          </Header.Subheader>
+        </Header>
+        <Progress
+          color='blue'
+          percent={percent * 100}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default FileUploadProgress;

package/src/components/FileUploadStatus.css

@@ -0,0 +1,3 @@
+.file-upload-status.ui.label > .loader {
+  margin-right: 1em;
+}

package/src/components/FileUploadStatus.js

@@ -0,0 +1,65 @@
+// @flow
+
+import React, { useMemo, type ComponentType } from 'react';
+import { Icon, Label, Loader } from 'semantic-ui-react';
+import './FileUploadStatus.css';
+
+type Props = {
+  status: string
+};
+
+const Status = {
+  pending: 'pending',
+  processing: 'processing',
+  complete: 'complete',
+  error: 'error'
+};
+
+const ColorsByStatus = {
+  [Status.processing]: 'black',
+  [Status.complete]: 'green',
+  [Status.error]: 'red'
+};
+
+const IconsByStatus = {
+  [Status.pending]: 'clock outline',
+  [Status.complete]: 'checkmark',
+  [Status.error]: 'warning circle'
+};
+
+const TextByStatus = {
+  [Status.pending]: 'Pending',
+  [Status.processing]: 'Processing',
+  [Status.complete]: 'Complete',
+  [Status.error]: 'Error'
+};
+
+const FileUploadStatus: ComponentType<any> = ({ status = Status.pending }: Props) => {
+  const color = useMemo(() => ColorsByStatus[status], [status]);
+  const icon = useMemo(() => IconsByStatus[status], [status]);
+  const text = useMemo(() => TextByStatus[status], [status]);
+
+  return (
+    <Label
+      className='file-upload-status'
+      color={color}
+    >
+      { status === Status.processing && (
+        <Loader
+          active
+          inline
+          inverted
+          size='mini'
+        />
+      )}
+      { icon && (
+        <Icon
+          name={icon}
+        />
+      )}
+      { text }
+    </Label>
+  );
+};
+
+export default FileUploadStatus;

package/src/i18n/en.json

@@ -128,7 +128,8 @@
   },
   "FileUploadModal": {
     "errors": {
-      "required": "{{filename}} - The following fields are required: {{fields}}"
+      "header": "There was an error processing your files",
+      "required": "File {{filename}} - The following fields are required: {{fields}}"
     },
     "loader": "Uploading files...",
     "title": "Upload Files"