@chayns-components/core/lib/esm/components/file-select/FileSelect.js

A set of beautiful React components for developing your own applications with chayns.

import { createDialog, DialogType } from 'chayns-api';
import React, { useCallback, useMemo } from 'react';
import { isValidFileType } from '../../utils/file';
import { selectFiles } from '../../utils/fileDialog';
import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
import Icon from '../icon/Icon';
import { StyledFileSelect, StyledFileSelectContainer, StyledFileSelectText, StyledFileSelectWrapper } from './FileSelect.styles';
var DialogView = /*#__PURE__*/function (DialogView) {
  DialogView["PIXABAY"] = "pixabay";
  DialogView["EDITOR"] = "editor";
  return DialogView;
}(DialogView || {});
const FileSelect = ({
  fileSelectionIcons = ['fa fa-upload'],
  imageSelectIcons = ['ts-image'],
  fileTypes,
  isDisabled,
  maxFileSizeInMB,
  onAdd,
  fileSelectionPlaceholder = 'Dateien hochladen',
  imageSelectPlaceholder,
  shouldPreventImageUpload = false,
  shouldEnableKeyboardHighlighting
}) => {
  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
  const handleAddImages = useCallback(images => {
    if (typeof onAdd === 'function') {
      onAdd(images);
    }
  }, [onAdd]);
  const handleAddFiles = useCallback(newFiles => {
    if (typeof onAdd === 'function') {
      onAdd(newFiles);
    }
  }, [onAdd]);
  const handleOpenEditor = useCallback(async file => {
    const {
      buttonType,
      result
    } = await createDialog({
      dialogInput: {
        upload: true,
        initialView: DialogView.EDITOR,
        imageArrayBuffer: file
      },
      type: DialogType.MODULE,
      system: {
        url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',
        scope: 'dialog_image_editor',
        module: './ImageEditorEntry'
      },
      buttons: []
    }).open();
    if (buttonType === 1 && result?.url) handleAddImages([{
      url: result.url,
      size: file.size,
      name: file.name
    }]);
  }, [handleAddImages]);
  const handleImageSelectionClick = useCallback(async () => {
    if (isDisabled) return;
    const {
      buttonType,
      result
    } = await createDialog({
      dialogInput: {
        upload: true,
        initialView: DialogView.PIXABAY
      },
      type: DialogType.MODULE,
      system: {
        url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',
        scope: 'dialog_image_editor',
        module: './ImageEditorEntry'
      },
      buttons: []
    }).open();
    if (buttonType === 1 && result?.url) handleAddImages([{
      url: result.url
    }]);
  }, [handleAddImages, isDisabled]);
  const handleFileSelectionClick = useCallback(async () => {
    if (isDisabled) return;
    const newFiles = await selectFiles({
      multiple: true,
      type: fileTypes,
      maxFileSizeInMB
    });
    if (newFiles.length === 1 && newFiles[0] && newFiles[0].type.startsWith('image') && !shouldPreventImageUpload) {
      void handleOpenEditor(newFiles[0]);
      return;
    }
    handleAddFiles(newFiles);
  }, [fileTypes, handleAddFiles, handleOpenEditor, isDisabled, maxFileSizeInMB, shouldPreventImageUpload]);
  const handleDrop = useCallback(e => {
    e.preventDefault();
    const draggedFiles = Array.from(e.dataTransfer.files).filter(file => {
      if (fileTypes && !isValidFileType({
        file,
        types: fileTypes
      })) {
        return false;
      }
      return !(maxFileSizeInMB && file.size > maxFileSizeInMB * 1024 * 1024);
    });
    if (draggedFiles.length === 1 && draggedFiles[0] && draggedFiles[0].type.startsWith('image') && !shouldPreventImageUpload) {
      void handleOpenEditor(draggedFiles[0]);
      return;
    }
    handleAddFiles(draggedFiles);
  }, [shouldPreventImageUpload, handleAddFiles, fileTypes, maxFileSizeInMB, handleOpenEditor]);
  const handleFileSelectionKeyDown = useCallback(event => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      void handleFileSelectionClick();
    }
  }, [handleFileSelectionClick]);
  const handleImageSelectionKeyDown = useCallback(event => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      void handleImageSelectionClick();
    }
  }, [handleImageSelectionClick]);
  return useMemo(() => /*#__PURE__*/React.createElement(StyledFileSelect, null, /*#__PURE__*/React.createElement(StyledFileSelectWrapper, {
    $isDisabled: isDisabled
  }, /*#__PURE__*/React.createElement(StyledFileSelectContainer, {
    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
    onClick: () => void handleFileSelectionClick(),
    onKeyDown: handleFileSelectionKeyDown,
    onDragOver: e => e.preventDefault(),
    onDrop: handleDrop,
    role: "button",
    tabIndex: isDisabled ? -1 : 0
  }, /*#__PURE__*/React.createElement(Icon, {
    icons: fileSelectionIcons
  }), /*#__PURE__*/React.createElement(StyledFileSelectText, null, fileSelectionPlaceholder)), imageSelectPlaceholder && /*#__PURE__*/React.createElement(StyledFileSelectContainer, {
    $isImageSelection: true,
    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
    onClick: () => void handleImageSelectionClick(),
    onKeyDown: handleImageSelectionKeyDown,
    role: "button",
    tabIndex: isDisabled ? -1 : 0
  }, /*#__PURE__*/React.createElement(Icon, {
    icons: imageSelectIcons
  }), /*#__PURE__*/React.createElement(StyledFileSelectText, null, imageSelectPlaceholder)))), [isDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, shouldShowKeyboardHighlighting, handleFileSelectionClick, handleDrop, handleFileSelectionKeyDown, handleImageSelectionClick, handleImageSelectionKeyDown]);
};
FileSelect.displayName = 'FileSelect';
export default FileSelect;
//# sourceMappingURL=FileSelect.js.map