@lunit/oui 1.0.1-alpha.9 → 1.0.1

package/src/components/UploadManager/UploadManager.tsx

@@ -0,0 +1,271 @@
+import React from 'react';
+import { Grow, Typography, Box } from '@mui/material';
+
+import { ArrowUp, Close, Success, Error16, RefreshLeft } from '../../icons';
+
+import { useState, Fragment, useMemo } from 'react';
+import { Divider } from '../Divider';
+import { Button } from '../Button';
+import { LinearProgress } from '../Progress';
+import { Tooltip } from '../Tooltip';
+import theme from '../../theme';
+import {
+  StyledPaper,
+  StyledToolbar,
+  StyledToolbarButtonContainer,
+  StyledCollapse,
+  StyledUploadFile,
+} from './UploadManager.styled';
+
+import type { UploadManagerProps, UploadFileProps } from './UploadManager.types';
+
+/**
+ * Component used inside the UploadManager to display a file
+ */
+const UploadFile = ({ file, onCancel, onRetry }: UploadFileProps) => {
+  const [mouseOnErrorIconButton, setMouseOnErrorIconButton] = useState(false);
+
+  const progress: number = useMemo(() => {
+    if (file.meta?.calculatedProgress) {
+      // return calculated progress for mrxs files
+      return file.meta.calculatedProgress as number;
+    }
+    return file.progress?.percentage || 0;
+  }, [file.meta, file.progress?.percentage]);
+
+  const fileFormatConverting = useMemo(() => {
+    if (file.extension === 'isyntax') {
+      return 'iSyntax';
+    }
+    if (file.extension === 'i2syntax') {
+      return 'i2Syntax';
+    }
+    return '';
+  }, [file]);
+
+  return (
+    <>
+      <StyledUploadFile>
+        {!file.meta?.errorMessage && (
+          <>
+            <Typography
+              variant="body5"
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
+              {file.name}
+            </Typography>
+            {progress < 100 && (
+              <Tooltip title="Cancel">
+                <Box>
+                  <Button
+                    onClick={() => onCancel && onCancel(file.id)}
+                    variant="ghost"
+                    color="secondary"
+                    icon={<Close style={{ color: theme.palette.neutralGrey[40] }} />}
+                  />
+                </Box>
+              </Tooltip>
+            )}
+            {progress === 100 && file.meta.postProcessComplete && (
+              <Tooltip title="Done">
+                <Box>
+                  <Button
+                    variant="ghost"
+                    icon={<Success />}
+                  />
+                </Box>
+              </Tooltip>
+            )}
+          </>
+        )}
+        {file.meta?.errorMessage! && (
+          <>
+            <Typography
+              variant="body5"
+              sx={{
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                flexShrink: 6,
+              }}
+            >
+              {file.name}
+            </Typography>
+            <Typography
+              color="error"
+              variant="body4"
+              sx={{
+                marginRight: '30px',
+                flexGrow: 3,
+                flexShrink: 0,
+                flexBasis: 'auto',
+                textAlign: 'right',
+                maxWidth: '290px',
+                whiteSpace: 'pre-wrap',
+              }}
+            >
+              {file.meta?.errorMessage as string}
+            </Typography>
+
+            <Tooltip
+              title={file.meta.retry ? 'Retry' : 'Retry by dragging and dropping the file again.'}
+              placement="top"
+            >
+              <Box>
+                <Button
+                  onMouseEnter={() => file.meta.retry && setMouseOnErrorIconButton(true)}
+                  onMouseLeave={() => file.meta.retry && setMouseOnErrorIconButton(false)}
+                  onClick={() => {
+                    if (file.meta.retry) {
+                      setMouseOnErrorIconButton(false);
+                      if (onRetry) onRetry(file.id);
+                    }
+                  }}
+                  icon={
+                    mouseOnErrorIconButton ? (
+                      <RefreshLeft style={{ color: theme.palette.neutralGrey[0] }} />
+                    ) : (
+                      <Error16 style={{ color: theme.palette.red[5] }} />
+                    )
+                  }
+                  variant="ghost"
+                  color="secondary"
+                  sx={{
+                    cursor: file.meta.retry ? 'pointer' : 'default',
+                  }}
+                />
+              </Box>
+            </Tooltip>
+          </>
+        )}
+        {!file.meta?.errorMessage && file.meta?.postProcessConverting! && (
+          <Typography
+            variant="body5"
+            sx={{
+              marginRight: '30px',
+              flexGrow: 3,
+              flexShrink: 0,
+              flexBasis: 'auto',
+              textAlign: 'right',
+              maxWidth: '290px',
+              whiteSpace: 'pre-wrap',
+            }}
+          >
+            Converting {fileFormatConverting} file...
+          </Typography>
+        )}
+      </StyledUploadFile>
+
+      {!file.meta?.errorMessage && (
+        <>
+          {file.progress?.uploadStarted! > 0 && (
+            <>
+              {progress < 100 && (
+                <LinearProgress
+                  variant="determinate"
+                  value={progress}
+                />
+              )}
+              {progress >= 100 && !file.meta?.postProcessComplete && <LinearProgress />}
+            </>
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
+/**
+ * Component used to display a list of files
+ */
+const UploadManager = ({
+  title,
+  subTitle,
+  files,
+  onClose,
+  onCancel,
+  onRetry,
+}: UploadManagerProps) => {
+  const [expanded, setExpanded] = useState<boolean>(true);
+
+  const handleExpandClick = () => {
+    setExpanded((exp) => !exp);
+  };
+
+  return (
+    <Grow
+      in
+      // Should this be configurable?
+      style={{
+        position: 'absolute',
+        bottom: '20px',
+        right: '20px',
+      }}
+    >
+      <StyledPaper elevation={1}>
+        <StyledToolbar>
+          <Typography variant="h9">{title}</Typography>
+          <Typography
+            variant="body1"
+            sx={{ marginLeft: '8px' }}
+          >
+            {subTitle}
+          </Typography>
+
+          <StyledToolbarButtonContainer>
+            <Tooltip title={expanded ? 'Minimize' : 'Maximize'}>
+              <Box>
+                <Button
+                  onClick={handleExpandClick}
+                  variant="ghost"
+                  color="secondary"
+                  icon={<ArrowUp style={{ color: theme.palette.neutralGrey[40] }} />}
+                  size="small"
+                  sx={{
+                    transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)',
+                  }}
+                />
+              </Box>
+            </Tooltip>
+
+            <Tooltip title="Close">
+              <Box>
+                <Button
+                  onClick={onClose}
+                  variant="ghost"
+                  color="secondary"
+                  icon={<Close style={{ color: theme.palette.neutralGrey[40] }} />}
+                  size="small"
+                />
+              </Box>
+            </Tooltip>
+          </StyledToolbarButtonContainer>
+        </StyledToolbar>
+
+        {expanded && <Divider orientation="horizontal" />}
+
+        <StyledCollapse
+          in={expanded}
+          timeout="auto"
+          unmountOnExit
+        >
+          {files.map((download, index) => (
+            <Fragment key={download.id}>
+              <UploadFile
+                file={download}
+                onCancel={onCancel}
+                onRetry={onRetry}
+              />
+              {index !== files.length - 1 && <Divider orientation="horizontal" />}
+            </Fragment>
+          ))}
+        </StyledCollapse>
+      </StyledPaper>
+    </Grow>
+  );
+};
+
+export default UploadManager;

package/src/components/UploadManager/UploadManager.types.ts

@@ -0,0 +1,16 @@
+import { UppyFile } from '@uppy/core';
+
+export interface UploadFileProps {
+  file: UppyFile;
+  onCancel?: (id: string) => void;
+  onRetry?: (id: string) => void;
+}
+
+export interface UploadManagerProps {
+  title: string;
+  subTitle?: string;
+  files: UppyFile[];
+  onClose?: () => void;
+  onCancel?: (id: string) => void;
+  onRetry?: (id: string) => void;
+}

package/src/components/UploadManager/index.ts

@@ -0,0 +1,5 @@
+import UploadManager from './UploadManager';
+import type { UploadManagerProps, UploadFileProps } from './UploadManager.types';
+
+export { UploadManager };
+export type { UploadManagerProps, UploadFileProps };

package/src/components/index.ts

@@ -0,0 +1,23 @@
+export * from './Alert';
+export * from './Button';
+export * from './Card';
+export * from './Checkbox';
+export * from './Chip';
+export * from './DataTable';
+export * from './DatePicker';
+export * from './Dialog';
+export * from './Divider';
+export * from './Dropdown';
+export * from './FileDnDZone';
+export * from './List';
+export * from './LoadingIndicator';
+export * from './Menu';
+export * from './Pagination';
+export * from './ProductLabel';
+export * from './Progress';
+export * from './Radio';
+export * from './Stepper';
+export * from './TabbedPanel';
+export * from './TextField';
+export * from './Tooltip';
+export * from './UploadManager';

package/src/foundations/index.ts

@@ -0,0 +1,4 @@
+export { default as palette } from './palette';
+export { default as typography } from './typography';
+export { default as spacing } from './spacing';
+export { subScrollbarWidth } from './styles';