@availity/mui-file-selector 0.1.3 → 0.2.1

package/src/lib/FilePickerInput.md

@@ -1,82 +0,0 @@
-import { ChangeEvent, RefObject, useState } from 'react';
-import { Input } from '@availity/mui-form-utils';
-
-const idCounter = () => {
-  let id = 0;
-  const increment = () => (id += 1);
-  const generateId = () => {
-    return `filepicker-${increment()}`;
-  };
-  return {
-    generateId,
-  };
-};
-
-const counter = idCounter();
-
-const inputSx = { display: 'none' };
-
-export type FilePickerInputProps = {
-  /** Identifies the field and matches the validation schema. */
-  name: string;
-  /** The file types you want to restrict uploading to. eg: ['.jpeg', '.jpg']. */
-  allowedFileTypes?: `.${string}`[];
-  /** id passed to the input component. It is randomly generated if not passed */
-  id?: string;
-  /** ref passed to the input component */
-  inputRef?: RefObject<HTMLInputElement>;
-  /** The maximum file size (in bytes) for a file to be uploaded. */
-  maxSize?: number;
-  /** Indicates that the user will be allowed to select multiple files when selecting files from the OS prompt. */
-  multiple?: boolean;
-  /** Callback when the user has selected a file or multiple files. */
-  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-};
-
-export const FilePickerInput = ({
-  allowedFileTypes,
-  id,
-  inputRef,
-  maxSize,
-  multiple,
-  name,
-  onChange,
-}: FilePickerInputProps) => {
-  const [stateId] = useState(counter.generateId());
-
-  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { files } = event.target;
-
-    // TODO: get size of file and compare to maxSize
-
-    const value: File[] = [];
-    if (files) {
-      // FileList is not iterable. Must use for loop for now
-      for (let i = 0; i < files.length; i++) {
-        if (maxSize) {
-          console.log('file is too big:', files[i].size > maxSize);
-        }
-        value[i] = files[i];
-      }
-    }
-
-    if (onChange) onChange(event);
-  };
-
-  const inputId = id || stateId;
-
-  return (
-    <Input
-      inputRef={inputRef}
-      sx={inputSx}
-      value=""
-      type="file"
-      inputProps={{
-        accept: Array.isArray(allowedFileTypes) && allowedFileTypes.length > 0 ? allowedFileTypes.join(',') : undefined,
-        multiple,
-      }}
-      id={inputId}
-      onChange={handleOnChange}
-    />
-  );
-};

package/src/lib/FileRow.md

@@ -1,70 +0,0 @@
-import { Button } from 'reactstrap';
-import Icon from '@availity/icon';
-import type Upload from '@availity/upload-core';
-
-import { UploadProgressBar } from './UploadProgressBar';
-
-const FILE_EXT_ICONS = {
-  png: 'file-image',
-  jpg: 'file-image',
-  jpeg: 'file-image',
-  gif: 'file-image',
-  ppt: 'file-powerpoint',
-  pptx: 'file-powerpoint',
-  xls: 'file-excel',
-  xlsx: 'file-excel',
-  doc: 'file-word',
-  docx: 'file-word',
-  txt: 'doc-alt',
-  text: 'doc-alt',
-  zip: 'file-archive',
-  '7zip': 'file-archive',
-  xml: 'file-code',
-  html: 'file-code',
-  pdf: 'file-pdf',
-} as const;
-
-type FileExtensionKey = keyof typeof FILE_EXT_ICONS;
-
-const isValidKey = (key: string): key is FileExtensionKey => {
-  return key ? key in FILE_EXT_ICONS : false;
-};
-
-export type FileRowProps = {
-  upload: Upload;
-  onRemoveFile: (id: string) => void;
-};
-
-export const FileRow = ({ upload, onRemoveFile }: FileRowProps) => {
-  const remove = () => {
-    onRemoveFile(upload.id);
-  };
-
-  const ext = upload.file.name.split('.').pop()?.toLowerCase() || '';
-  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : 'doc';
-  const extLabel = ext.toUpperCase();
-
-  return (
-    <tr>
-      <td className="align-middle" style={{ width: '10%' }}>
-        <Icon name={icon} title={`${extLabel} File Icon`}>
-          <span className="sr-only">{extLabel} File Icon</span>
-        </Icon>{' '}
-      </td>
-      <td className="align-middle" style={{ width: '35%' }}>
-        <div className="text-truncate" title={upload.file.name}>
-          {upload.file.name}
-        </div>
-      </td>
-      <td className="align-middle" style={{ width: '45%' }}>
-        <UploadProgressBar upload={upload} aria-label={`${upload.file.name} upload`} />
-      </td>
-      <td className="align-middle" style={{ width: '10%' }}>
-        <Button data-testid="remove-file-btn" color="link" className="text-danger px-0" onClick={remove}>
-          <Icon name="trash-empty" />
-          <span className="sr-only">Remove {upload.file.name}</span>
-        </Button>
-      </td>
-    </tr>
-  );
-};