@chayns-components/core/lib/cjs/components/file-input/FileInput.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.TSIMG_FILE_TYPES = exports.STREAMINGSERVICE_FILE_TYPES = void 0;
var _react = _interopRequireWildcard(require("react"));
var _file = require("../../utils/file");
var _FileInput = require("./FileInput.styles");
var _FileList = _interopRequireDefault(require("../file-list/FileList"));
var _FileSelect = _interopRequireDefault(require("../file-select/FileSelect"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const TSIMG_FILE_TYPES = exports.TSIMG_FILE_TYPES = 'image/png, image/jpg, image/jpeg, image/gif, image/webp, image/svg+xml, image/avif';
const STREAMINGSERVICE_FILE_TYPES = exports.STREAMINGSERVICE_FILE_TYPES = 'video/mp4, video/webm, video/avi, video/flv, video/wmv, video/mpg, video/quicktime';
const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
  fileSelectionIcons = ['fa fa-upload'],
  imageSelectIcons = ['ts-image'],
  fileTypes,
  onMaxFilesReached,
  maxFiles,
  onRemove,
  files,
  isDisabled,
  maxFileSizeInMB,
  onAdd,
  fileSelectionPlaceholder = 'Dateien hochladen',
  imageSelectPlaceholder,
  shouldPreventImageUpload = false,
  shouldAllowDownload,
  shouldEnableKeyboardHighlighting
}, ref) => {
  const [internalFiles, setInternalFiles] = (0, _react.useState)([]);
  const [internalImages, setInternalImages] = (0, _react.useState)([]);
  const handleInputClear = () => {
    setInternalFiles([]);
    setInternalImages([]);
  };
  (0, _react.useImperativeHandle)(ref, () => ({
    clear: handleInputClear
  }), []);
  const handleAddImages = (0, _react.useCallback)(images => {
    const newImages = [];
    images.forEach(image => {
      if (!(0, _file.filterDuplicateFileUrls)({
        files: internalImages,
        newFile: image
      })) {
        newImages.push(image);
      }
    });
    let tmp = newImages;
    if (maxFiles) {
      tmp = newImages.slice(0, maxFiles - (internalFiles.length + internalImages.length + ((files === null || files === void 0 ? void 0 : files.length) ?? 0)));
    }
    if (tmp.length > 0 && typeof onAdd === 'function') {
      onAdd(tmp);
    }
    setInternalImages(prevState => [...prevState, ...tmp]);
  }, [files === null || files === void 0 ? void 0 : files.length, internalFiles.length, internalImages, maxFiles, onAdd]);
  const handleAddFiles = (0, _react.useCallback)(newFiles => {
    const newFileItems = [];
    newFiles.forEach(file => {
      if (fileTypes && !(0, _file.isValidFileType)({
        file,
        types: fileTypes
      })) {
        return;
      }
      if (file && !(0, _file.filterDuplicateFile)({
        files: internalFiles,
        newFile: file
      })) {
        newFileItems.push(file);
      }
    });
    let tmp = newFileItems;
    if (maxFiles) {
      tmp = newFileItems.slice(0, maxFiles - (internalFiles.length + ((files === null || files === void 0 ? void 0 : files.length) ?? 0)));
    }
    if (tmp.length > 0 && typeof onAdd === 'function') {
      onAdd(tmp);
    }
    setInternalFiles(prevState => [...prevState, ...tmp]);
  }, [fileTypes, files === null || files === void 0 ? void 0 : files.length, internalFiles, maxFiles, onAdd]);
  const handleAdd = (0, _react.useCallback)(newFiles => {
    if (Array.isArray(newFiles) && newFiles.length > 0) {
      if (newFiles[0] && 'url' in newFiles[0]) {
        handleAddImages(newFiles);
      } else {
        handleAddFiles(newFiles);
      }
    }
  }, [handleAddFiles, handleAddImages]);
  const handleDeleteFile = (0, _react.useCallback)(id => {
    let fileToDelete;
    const filteredFiles = internalFiles.filter(file => {
      const {
        name
      } = file;
      if (name === id) {
        fileToDelete = file;
      }
      return name !== id;
    });
    setInternalFiles(filteredFiles);
    if (!fileToDelete) {
      const filteredImages = internalImages.filter(image => {
        if (image.name === id) {
          fileToDelete = image;
        }
        return image.name !== id;
      });
      setInternalImages(filteredImages);
    }
    if (!fileToDelete) {
      files === null || files === void 0 || files.forEach(file => {
        if (file.id === id || file.name === id) {
          fileToDelete = file;
        }
      });
    }
    if (!fileToDelete || typeof onRemove !== 'function') {
      return;
    }
    onRemove(fileToDelete);
  }, [files, internalFiles, internalImages, onRemove]);
  const internalIsDisabled = (0, _react.useMemo)(() => {
    if (isDisabled) {
      return true;
    }
    if (maxFiles) {
      if (internalFiles.length + internalImages.length >= maxFiles) {
        if (typeof onMaxFilesReached === 'function') {
          onMaxFilesReached();
        }
        return true;
      }
    }
    return false;
  }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);
  const filesToDisplay = (0, _react.useMemo)(() => {
    const items = internalFiles.map(file => ({
      id: file.name,
      name: file.name,
      size: file.size,
      mimeType: file.type,
      source: file
    }));
    internalImages.forEach(image => {
      items.push({
        id: image.name ?? image.url,
        name: image.name ?? image.url,
        size: image.size ?? 0,
        mimeType: 'image/png',
        source: image.url
      });
    });
    files === null || files === void 0 || files.forEach(file => {
      items.push(file);
    });
    return items;
  }, [files, internalFiles, internalImages]);
  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FileInput.StyledFileInput, null, /*#__PURE__*/_react.default.createElement(_FileSelect.default, {
    shouldPreventImageUpload: shouldPreventImageUpload,
    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
    maxFiles: maxFiles,
    fileTypes: fileTypes,
    fileSelectionIcons: fileSelectionIcons,
    fileSelectionPlaceholder: fileSelectionPlaceholder,
    imageSelectIcons: imageSelectIcons,
    imageSelectPlaceholder: imageSelectPlaceholder,
    maxFileSizeInMB: maxFileSizeInMB,
    isDisabled: internalIsDisabled,
    onAdd: handleAdd
  }), /*#__PURE__*/_react.default.createElement(_FileList.default, {
    files: filesToDisplay,
    onRemove: handleDeleteFile,
    shouldAllowDownload: shouldAllowDownload
  })), [shouldPreventImageUpload, shouldEnableKeyboardHighlighting, maxFiles, fileTypes, fileSelectionIcons, fileSelectionPlaceholder, imageSelectIcons, imageSelectPlaceholder, maxFileSizeInMB, internalIsDisabled, handleAdd, filesToDisplay, handleDeleteFile, shouldAllowDownload]);
});
FileInput.displayName = 'FileInput';
var _default = exports.default = FileInput;
//# sourceMappingURL=FileInput.js.map