tesseract/categories/blob/react/src/components/FileSelectBox/index.tsx

import * as React from 'react';
import { useClientSide, useFallbackId, useProxyInput } from '@modal-sh/react-utils';
import clsx from 'clsx';

/**
 * Common props for the {@link FileSelectBoxProps.previewComponent|previewComponent prop} of the
 * {@link FileSelectBox} component.
 */
export interface CommonPreviewComponentProps<F extends Partial<File> = Partial<File>> {
  /**
   * The file to preview.
   */
  file?: F;
  /**
   * Is the component disabled?
   */
  disabled?: boolean;
  /**
   * Should the component be enhanced?
   */
  enhanced?: boolean;
  /**
   * Should the component use minimal space?
   */
  mini?: boolean;
}

/**
 * Derived HTML element of the {@link FileSelectBox} component.
 */
export type FileSelectBoxDerivedElement = HTMLInputElement;

/**
 * Props of the {@link FileSelectBox} component.
 */
export interface FileSelectBoxProps<
  F extends Partial<File> = Partial<File>,
  P extends CommonPreviewComponentProps<F> = CommonPreviewComponentProps<F>
> extends Omit<React.HTMLProps<FileSelectBoxDerivedElement>, 'size' | 'type' | 'label' | 'list'> {
  /**
   * Should the component display a border?
   */
  border?: boolean,
  /**
   * Should the component occupy the whole width of its parent?
   */
  block?: boolean,
  /**
   * Short textual description indicating the nature of the component's value.
   */
  label?: React.ReactNode,
  /**
   * Short textual description as guidelines for valid input values.
   */
  hint?: React.ReactNode,
  /**
   * Should the component be enhanced?
   */
  enhanced?: boolean,
  /**
   * Is the label hidden?
   */
  hiddenLabel?: boolean,
  /**
   * Preview component for the selected file(s).
   */
  previewComponent?: React.ElementType<P>,
}

/**
 * Default component for the {@link FileSelectBoxProps.previewComponent|previewComponent prop}
 * of the {@link FileSelectBox} component.
 */
export const FileSelectBoxDefaultPreviewComponent = React.forwardRef<
  HTMLDivElement,
  CommonPreviewComponentProps
>(({
  file,
  mini,
  enhanced,
  disabled,
}, forwardedRef) => (
  <div
    data-enhanced={enhanced}
    className={clsx({
      'opacity-50': disabled,
    })}
    ref={forwardedRef}
  >
    <div className="w-full whitespace-nowrap overflow-hidden text-ellipsis">
      {file?.name ?? (
      <span className="opacity-50">
        File
      </span>
      )}
    </div>
    {!mini && (
    <>
      {typeof file?.type === 'string' && (
        <div className="w-full whitespace-nowrap overflow-hidden text-ellipsis">{file?.type}</div>
      )}
      {typeof file?.size === 'number' && (
        <div
          title={new Intl.NumberFormat(undefined, {
            style: 'unit',
            unit: 'byte',
            unitDisplay: 'long',
          }).format(file.size ?? 0)}
          className="w-full whitespace-nowrap overflow-hidden text-ellipsis tabular-nums"
        >
          {new Intl.NumberFormat(undefined, {
            style: 'unit',
            unit: 'kilobyte',
            unitDisplay: 'long',
          }).format(file.size ?? 0)}
        </div>
      )}
      {typeof file?.lastModified === 'number' && (
        <div className="w-full whitespace-nowrap overflow-hidden text-ellipsis">
          <time dateTime={new Date(file.lastModified).toISOString()}>
            {new Date(file.lastModified).toDateString()}
          </time>
        </div>
      )}
    </>
    )}
  </div>
));

/**
 * Component for selecting files.
 */
export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileSelectBoxProps>((
  {
    label = '',
    hint = '',
    border = false,
    block = false,
    enhanced: enhancedProp = false,
    hiddenLabel = false,
    multiple = false,
    disabled = false,
    className,
    onChange,
    id: idProp,
    placeholder,
    previewComponent: FilePreviewComponent = FileSelectBoxDefaultPreviewComponent,
    style,
    onBlur,
    ...etcProps
  },
  forwardedRef,
) => {
  const { clientSide } = useClientSide({ clientSide: enhancedProp });
  const [fileList, setFileList] = React.useState<FileList>();
  const [lastUpdated, setLastUpdated] = React.useState<number>();
  const clearFileListRef = React.useRef(false);
  const [deleteKeyPressed, setDeleteKeyPressed] = React.useState(false);
  const [aboutToSelect, setAboutToSelect] = React.useState(false);
  const { defaultRef, handleChange: doSetFileList } = useProxyInput<
    React.ChangeEvent<FileSelectBoxDerivedElement>
    | React.MouseEvent<HTMLButtonElement>
    | React.DragEvent<HTMLDivElement>
    | React.KeyboardEvent<FileSelectBoxDerivedElement>,
    FileSelectBoxDerivedElement
  >({
    forwardedRef,
    valueSetterFn: (e) => {
      if (e.type === 'mouseup') {
        // delete
        const fileInput = defaultRef.current as FileSelectBoxDerivedElement;
        clearFileListRef.current = true;
        fileInput.value = '';
        setFileList(undefined);
        setLastUpdated(Date.now());
      } else if (e.type === 'drop') {
        // drop file
        const fileInput = defaultRef.current as FileSelectBoxDerivedElement;
        const { dataTransfer } = e as React.DragEvent<HTMLDivElement>;
        const { files } = dataTransfer;
        if (files && files.length > 0) {
          setFileList(fileInput.files = files);
          setLastUpdated(Date.now());
        }
      } else if (e.type === 'keyup') {
        const {
          currentTarget: fileInput,
          code,
        } = e as React.KeyboardEvent<FileSelectBoxDerivedElement>;
        if (code === 'Backspace' || code === 'Delete') {
          clearFileListRef.current = true;
          fileInput.value = '';
          setFileList(undefined);
          setLastUpdated(Date.now());
        }
      }
    },
  });
  const labelId = React.useId();
  const id = useFallbackId(idProp);

  const cancelEvent: React.DragEventHandler<HTMLDivElement> = React.useCallback((e) => {
    e.stopPropagation();
    e.preventDefault();
  }, []);

  const handleDrop: React.DragEventHandler<HTMLDivElement> = React.useCallback((e) => {
    cancelEvent(e);
    doSetFileList(e);
  }, [cancelEvent, doSetFileList]);

  const handleFileChange: React.ChangeEventHandler<
    FileSelectBoxDerivedElement
  > = React.useCallback((e) => {
    const { currentTarget } = e;
    if (clientSide && currentTarget.files && currentTarget.files.length > 0) {
      setFileList(currentTarget.files);
      setLastUpdated(Date.now());
      setAboutToSelect(false);
      onChange?.(e);
      return;
    }
    if (clientSide && clearFileListRef.current) {
      clearFileListRef.current = false;
      setFileList(undefined);
      setLastUpdated(Date.now());
      onChange?.(e);
      return;
    }
    e.preventDefault();
    e.currentTarget.files = fileList ?? null;
    setAboutToSelect(false);
  }, [clientSide, fileList, onChange]);

  const handleKeyDown: React.KeyboardEventHandler<
    FileSelectBoxDerivedElement
  > = React.useCallback((e) => {
    const { code } = e;
    if (code === 'Backspace' || code === 'Delete') {
      setDeleteKeyPressed(true);
    } else if (code === 'Enter' || code === 'Space' || code === 'Return') {
      setAboutToSelect(true);
    }
  }, []);

  const handleKeyUp: React.KeyboardEventHandler<
    FileSelectBoxDerivedElement
  > = React.useCallback((e) => {
    const { code } = e;
    if (code === 'Backspace' || code === 'Delete') {
      doSetFileList(e);
      setDeleteKeyPressed(false);
    }
  }, [doSetFileList]);

  const handleReselectMouseDown: React.MouseEventHandler<
    HTMLButtonElement
  > = React.useCallback(() => {
    setAboutToSelect(true);
    setTimeout(() => {
      const fileInput = defaultRef.current as FileSelectBoxDerivedElement;
      fileInput.focus();
    });
  }, [defaultRef]);

  const handleReselectMouseUp: React.MouseEventHandler<
    HTMLButtonElement
  > = React.useCallback(() => {
    const fileInput = defaultRef.current as FileSelectBoxDerivedElement;
    fileInput.showPicker();
  }, [defaultRef]);

  const handleDeleteMouseDown: React.MouseEventHandler<
    HTMLButtonElement
  > = React.useCallback(() => {
    setDeleteKeyPressed(true);
    setTimeout(() => {
      const fileInput = defaultRef.current as FileSelectBoxDerivedElement;
      fileInput.focus();
    });
  }, [defaultRef]);

  const handleBlur: React.FocusEventHandler<
    FileSelectBoxDerivedElement
  > = React.useCallback((e) => {
    setAboutToSelect(false);
    setDeleteKeyPressed(false);
    onBlur?.(e);
  }, [onBlur]);

  React.useEffect(() => {
    const handleLabelMouseUp = () => {
      setAboutToSelect(false);
      setDeleteKeyPressed(false);
    };

    window.addEventListener('mouseup', handleLabelMouseUp, { capture: true });
    return () => {
      window.removeEventListener('mouseup', handleLabelMouseUp, { capture: true });
    };
  }, [defaultRef, aboutToSelect]);

  const filesCount = fileList?.length ?? 0;

  return (
    <div
      className={clsx(
        'relative rounded ring-secondary/50 group file-select-box',
        'focus-within:ring-4',
        block && 'flex w-full',
        !block && 'inline-flex w-64 min-h-16 justify-center items-center',
        className,
      )}
      onDragEnter={clientSide ? cancelEvent : undefined}
      onDragOver={clientSide ? cancelEvent : undefined}
      onDrop={clientSide ? handleDrop : undefined}
      data-testid="root"
      style={{
        height: clientSide ? 64 : undefined,
        ...(style ?? {}),
      }}
    >
      {label && (
        <label
          data-testid="label"
          id={labelId}
          htmlFor={id}
          className={clsx(
            'absolute z-[1] w-full top-0.5 left-0 pointer-events-none select-none pl-1 text-xxs font-bold peer-disabled:opacity-50 group-focus-within:text-secondary text-primary leading-none bg-negative',
            {
              'sr-only': hiddenLabel,
            },
          )}
        >
          <div className="w-full whitespace-nowrap h-[1.1em] overflow-hidden text-ellipsis">
            {label}
          </div>
        </label>
      )}
      {clientSide && (
        <button
          type="button"
          disabled={disabled}
          tabIndex={-1}
          className={clsx(
            'flex items-center focus:outline-0 justify-center absolute top-0 left-0 w-full h-full cursor-pointer select-none',
            (fileList?.length ?? 0) > 0 && 'opacity-0',
          )}
          data-testid="clickArea"
          onMouseDown={handleReselectMouseDown}
          onMouseUp={handleReselectMouseUp}
        >
          {placeholder}
        </button>
      )}
      <input
        {...etcProps}
        id={id}
        disabled={disabled}
        ref={defaultRef}
        type="file"
        onBlur={handleBlur}
        onKeyDown={clientSide ? handleKeyDown : undefined}
        onKeyUp={clientSide ? handleKeyUp : undefined}
        className={clsx(
          'peer box-border focus:outline-0 px-4 pt-2 block resize-y min-h-16 cursor-pointer disabled:cursor-not-allowed file:bg-transparent file:text-primary file:block file:font-bold file:font-semi-expanded file:uppercase file:p-0 file:border-0 group-focus-within:file:text-secondary',
          {
            'sr-only': clientSide,
            'h-full w-full': !clientSide,
          },
        )}
        onChange={clientSide ? handleFileChange : onChange}
        multiple={multiple}
        data-testid="input"
        aria-labelledby={label ? `${labelId}` : undefined}
        style={{
          height: clientSide ? undefined : 256,
        }}
      />
      {filesCount < 1
      && clientSide
      && hint
      && (
        <div
          data-testid="hint"
          className="absolute top-0 left-0 w-full h-full pointer-events-none box-border overflow-hidden pt-4"
        >
          <div className="flex items-center justify-center w-full h-full">
            {hint}
          </div>
        </div>
      )}
      {filesCount > 0
      && clientSide
      && (
        <React.Fragment key={lastUpdated}>
          <div className="sm:absolute top-0 left-0 w-full h-full pointer-events-none pb-12 box-border overflow-hidden pt-8">
            {multiple
            && (
              <div className="pointer-events-auto w-full h-full overflow-auto px-4 box-border">
                <div className="w-full grid gap-2 grid-cols-3">
                  {Array.from(fileList ?? []).map((file) => (
                    <div
                      key={file.name}
                      data-testid="selectedFileItem"
                      className="w-full p-2 aspect-square rounded overflow-hidden relative before:absolute before:content-[''] before:bg-current before:top-0 before:left-0 before:w-full before:h-full before:opacity-10"
                    >
                      <FilePreviewComponent
                        file={file}
                        enhanced={clientSide}
                        disabled={disabled}
                        mini
                      />
                    </div>
                  ))}
                </div>
              </div>
            )}
            {!multiple
            && Array.from(fileList ?? []).map((file) => (
              <div
                key={file.name}
                className="pointer-events-auto w-full h-full px-4 box-border"
              >
                <div
                  data-testid="selectedFileItem"
                  className="h-full w-full p-4 box-border rounded overflow-hidden relative before:absolute before:content-[''] before:bg-current before:top-0 before:left-0 before:w-full before:h-full before:opacity-10"
                >
                  <div
                    className="w-full h-full relative"
                  >
                    <FilePreviewComponent
                      file={file}
                      enhanced={clientSide}
                      disabled={disabled}
                    />
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="absolute bottom-0 left-0 w-full text-center h-12 box-border flex">
            <div className="w-0 flex-auto flex flex-col items-center justify-center h-full">
              <button
                type="button"
                data-testid="reselect"
                disabled={disabled}
                onMouseDown={handleReselectMouseDown}
                onMouseUp={handleReselectMouseUp}
                tabIndex={-1}
                className={clsx(
                  'flex w-full h-full focus:outline-0 bg-negative text-primary cursor-pointer items-center justify-center leading-none gap-4 select-none',
                  {
                    'group-focus-within:text-secondary group-focus-within:active:text-tertiary': !aboutToSelect,
                    'text-tertiary': aboutToSelect,
                  },
                )}
              >
                <span
                  className="block uppercase font-bold h-[1.1em] w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded"
                >
                  Reselect
                </span>
              </button>
            </div>
            <div className="w-0 flex-auto flex flex-col items-center justify-center h-full">
              <button
                disabled={disabled}
                data-testid="clear"
                type="button"
                name="action"
                value="clear"
                onMouseDown={handleDeleteMouseDown}
                onMouseUp={doSetFileList}
                tabIndex={-1}
                className={clsx(
                  'flex w-full h-full bg-negative text-primary disabled:text-primary items-center justify-center leading-none gap-4 select-none focus:outline-0',
                  {
                    'group-focus-within:text-secondary group-focus-within:active:text-tertiary': !deleteKeyPressed,
                    'text-tertiary': deleteKeyPressed,
                  },
                )}
              >
                <span
                  className="block uppercase font-bold h-[1.1em] w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded"
                >
                  Clear
                </span>
              </button>
            </div>
          </div>
        </React.Fragment>
      )}
      {border && (
        <span
          data-testid="border"
          className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none group-focus-within:border-secondary"
        />
      )}
    </div>
  );
});

FileSelectBox.displayName = 'FileSelectBox';

FileSelectBox.defaultProps = {
  border: false as const,
  block: false as const,
  enhanced: false as const,
  hiddenLabel: false as const,
  label: undefined,
  hint: undefined,
  previewComponent: FileSelectBoxDefaultPreviewComponent,
};

FileSelectBoxDefaultPreviewComponent.defaultProps = {
  file: undefined,
  mini: false as const,
  disabled: FileSelectBox.defaultProps.disabled,
  enhanced: FileSelectBox.defaultProps.enhanced,
};