@chayns-components/core 5.0.0-beta.314 → 5.0.0-beta.320

package/lib/components/file-input/FileInput.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _file = require("../../utils/file");
+var _fileDialog = require("../../utils/fileDialog");
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _List = _interopRequireDefault(require("../list/List"));
+var _FileListItem = _interopRequireDefault(require("./file-list/FileListItem"));
+var _FileInput = require("./FileInput.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const FileInput = _ref => {
+  let {
+    icons = ['fa fa-upload'],
+    onRemove,
+    onAdd,
+    placeholder = 'Dateien hinzufügen'
+  } = _ref;
+  const [internalFiles, setInternalFiles] = (0, _react.useState)([]);
+  const handleAddFiles = (0, _react.useCallback)(files => {
+    const newFileItems = [];
+    files.forEach(file => {
+      if (file && !(0, _file.filterDuplicateFile)({
+        files: internalFiles,
+        newFile: file
+      })) {
+        newFileItems.push(file);
+      }
+    });
+    if (newFileItems.length > 0 && typeof onAdd === 'function') {
+      onAdd(newFileItems);
+    }
+    setInternalFiles(prevState => [...prevState, ...newFileItems]);
+  }, [internalFiles, onAdd]);
+  const handleDeleteFile = (0, _react.useCallback)(fileName => {
+    let fileToDelete;
+    const filteredFiles = internalFiles.filter(file => {
+      const {
+        name
+      } = file;
+      if (name === fileName) {
+        fileToDelete = file;
+      }
+      return name !== fileName;
+    });
+    setInternalFiles(filteredFiles);
+    if (!fileToDelete || typeof onRemove !== 'function') {
+      return;
+    }
+    onRemove(fileToDelete);
+  }, [internalFiles, onRemove]);
+  const handleClick = (0, _react.useCallback)(async () => {
+    const files = await (0, _fileDialog.selectFiles)({
+      multiple: true
+    });
+    handleAddFiles(files);
+  }, [handleAddFiles]);
+  const handleDrop = (0, _react.useCallback)(e => {
+    e.preventDefault();
+    const draggedFiles = Array.from(e.dataTransfer.files);
+    handleAddFiles(draggedFiles);
+  }, [handleAddFiles]);
+  const content = (0, _react.useMemo)(() => {
+    const items = internalFiles.map(file => /*#__PURE__*/_react.default.createElement(_FileInput.StyledMotionFileInputList, {
+      animate: {
+        height: 'auto',
+        opacity: 1
+      },
+      exit: {
+        height: 0,
+        opacity: 0
+      },
+      key: file.name,
+      transition: {
+        duration: 0.25,
+        type: 'tween'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_FileListItem.default, {
+      fileType: file.type,
+      fileName: file.name,
+      fileSize: file.size,
+      onRemove: handleDeleteFile
+    })));
+    return items;
+  }, [handleDeleteFile, internalFiles]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FileInput.StyledFileInput, null, /*#__PURE__*/_react.default.createElement(_FileInput.StyledFileInputContainer, {
+    onClick: () => void handleClick(),
+    onDragOver: e => e.preventDefault(),
+    onDrop: e => void handleDrop(e)
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: icons
+  }), /*#__PURE__*/_react.default.createElement(_FileInput.StyledFileInputText, null, placeholder)), /*#__PURE__*/_react.default.createElement(_List.default, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, content))), [content, handleClick, handleDrop, icons, placeholder]);
+};
+FileInput.displayName = 'FileInput';
+var _default = exports.default = FileInput;
+//# sourceMappingURL=FileInput.js.map

package/lib/components/file-input/FileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_file","_fileDialog","_Icon","_interopRequireDefault","_List","_FileListItem","_FileInput","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","FileInput","_ref","icons","onRemove","onAdd","placeholder","internalFiles","setInternalFiles","useState","handleAddFiles","useCallback","files","newFileItems","forEach","file","filterDuplicateFile","newFile","push","length","prevState","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","handleClick","selectFiles","multiple","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","content","useMemo","items","map","createElement","StyledMotionFileInputList","animate","height","opacity","exit","key","transition","duration","type","fileType","fileSize","size","StyledFileInput","StyledFileInputContainer","onClick","onDragOver","onDrop","StyledFileInputText","AnimatePresence","initial","displayName","_default","exports"],"sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { DragEvent, FC, ReactElement, useCallback, useMemo, useState } from 'react';\nimport { filterDuplicateFile } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport List from '../list/List';\nimport FileListItem from './file-list/FileListItem';\nimport {\n    StyledFileInput,\n    StyledFileInputContainer,\n    StyledFileInputText,\n    StyledMotionFileInputList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n    /**\n     * An array of icons that should be displayed inside the FileInput\n     */\n    icons?: string[];\n    /**\n     * A function to be executed when files are added.\n     */\n    onAdd?: (files: File[]) => void;\n    /**\n     * A function to be executed when a file is removed.\n     */\n    onRemove?: (file: File) => void;\n    /**\n     * The text that should be displayed inside the FileInput\n     */\n    placeholder?: string;\n};\n\nconst FileInput: FC<FileInputProps> = ({\n    icons = ['fa fa-upload'],\n    onRemove,\n    onAdd,\n    placeholder = 'Dateien hinzufügen',\n}) => {\n    const [internalFiles, setInternalFiles] = useState<File[]>([]);\n\n    const handleAddFiles = useCallback(\n        (files: File[]) => {\n            const newFileItems: File[] = [];\n\n            files.forEach((file) => {\n                if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n                    newFileItems.push(file);\n                }\n            });\n\n            if (newFileItems.length > 0 && typeof onAdd === 'function') {\n                onAdd(newFileItems);\n            }\n\n            setInternalFiles((prevState) => [...prevState, ...newFileItems]);\n        },\n        [internalFiles, onAdd],\n    );\n\n    const handleDeleteFile = useCallback(\n        (fileName?: string) => {\n            let fileToDelete: File | undefined;\n\n            const filteredFiles = internalFiles.filter((file) => {\n                const { name } = file;\n\n                if (name === fileName) {\n                    fileToDelete = file;\n                }\n\n                return name !== fileName;\n            });\n\n            setInternalFiles(filteredFiles);\n\n            if (!fileToDelete || typeof onRemove !== 'function') {\n                return;\n            }\n\n            onRemove(fileToDelete);\n        },\n        [internalFiles, onRemove],\n    );\n\n    const handleClick = useCallback(async () => {\n        const files = await selectFiles({\n            multiple: true,\n        });\n\n        handleAddFiles(files);\n    }, [handleAddFiles]);\n\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n            const draggedFiles = Array.from(e.dataTransfer.files);\n\n            handleAddFiles(draggedFiles);\n        },\n        [handleAddFiles],\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = internalFiles.map((file) => (\n            <StyledMotionFileInputList\n                animate={{ height: 'auto', opacity: 1 }}\n                exit={{ height: 0, opacity: 0 }}\n                key={file.name}\n                transition={{ duration: 0.25, type: 'tween' }}\n            >\n                <FileListItem\n                    fileType={file.type}\n                    fileName={file.name}\n                    fileSize={file.size}\n                    onRemove={handleDeleteFile}\n                />\n            </StyledMotionFileInputList>\n        ));\n\n        return items;\n    }, [handleDeleteFile, internalFiles]);\n\n    return useMemo(\n        () => (\n            <StyledFileInput>\n                <StyledFileInputContainer\n                    onClick={() => void handleClick()}\n                    onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n                    onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n                >\n                    <Icon icons={icons} />\n                    <StyledFileInputText>{placeholder}</StyledFileInputText>\n                </StyledFileInputContainer>\n                <List>\n                    <AnimatePresence initial={false}>{content}</AnimatePresence>\n                </List>\n            </StyledFileInput>\n        ),\n        [content, handleClick, handleDrop, icons, placeholder],\n    );\n};\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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"}