@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 Icon from '../icon/Icon';
import { StyledFileSelect, StyledFileSelectContainer, StyledFileSelectText, StyledFileSelectWrapper } from './FileSelect.styles';
const FileSelect = _ref => {
  let {
    fileSelectionIcons = ['fa fa-upload'],
    imageSelectIcons = ['ts-image'],
    fileTypes,
    isDisabled,
    maxFileSizeInMB,
    onAdd,
    fileSelectionPlaceholder = 'Dateien hochladen',
    imageSelectPlaceholder
  } = _ref;
  const handleAddImages = useCallback(images => {
    if (typeof onAdd === 'function') {
      onAdd(images);
    }
  }, [onAdd]);
  const handleAddFiles = useCallback(newFiles => {
    if (typeof onAdd === 'function') {
      onAdd(newFiles);
    }
  }, [onAdd]);
  const handleImageSelectionClick = useCallback(async () => {
    if (isDisabled) return;
    const {
      buttonType,
      result
    } = await createDialog({
      dialogInput: {
        upload: true
      },
      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([result.url]);
  }, [handleAddImages, isDisabled]);
  const handleFileSelectionClick = useCallback(async () => {
    if (isDisabled) return;
    const newFiles = await selectFiles({
      multiple: true,
      type: fileTypes,
      maxFileSizeInMB
    });
    handleAddFiles(newFiles);
  }, [fileTypes, handleAddFiles, isDisabled, maxFileSizeInMB]);
  const handleDrop = useCallback(e => {
    e.preventDefault();
    const draggedFiles = Array.from(e.dataTransfer.files).filter(file => {
      if (fileTypes && !isValidFileType({
        file,
        types: fileTypes
      })) {
        return false;
      }
      if (maxFileSizeInMB && file.size > maxFileSizeInMB * 1024 * 1024) {
        return false;
      }
      return true;
    });
    handleAddFiles(draggedFiles);
  }, [handleAddFiles, fileTypes, maxFileSizeInMB]);
  return useMemo(() => /*#__PURE__*/React.createElement(StyledFileSelect, null, /*#__PURE__*/React.createElement(StyledFileSelectWrapper, {
    $isDisabled: isDisabled
  }, /*#__PURE__*/React.createElement(StyledFileSelectContainer, {
    onClick: () => void handleFileSelectionClick(),
    onDragOver: e => e.preventDefault(),
    onDrop: handleDrop
  }, /*#__PURE__*/React.createElement(Icon, {
    icons: fileSelectionIcons
  }), /*#__PURE__*/React.createElement(StyledFileSelectText, null, fileSelectionPlaceholder)), imageSelectPlaceholder && /*#__PURE__*/React.createElement(StyledFileSelectContainer, {
    $isImageSelection: true,
    onClick: () => void handleImageSelectionClick()
  }, /*#__PURE__*/React.createElement(Icon, {
    icons: imageSelectIcons
  }), /*#__PURE__*/React.createElement(StyledFileSelectText, null, imageSelectPlaceholder)))), [isDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, handleFileSelectionClick, handleDrop, handleImageSelectionClick]);
};
FileSelect.displayName = 'FileSelect';
export default FileSelect;
//# sourceMappingURL=FileSelect.js.map