@chayns-components/swipeable-wrapper 5.0.0-beta.288

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2021 Tobit Laboratories AG
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,40 @@
1
+ <div align="center">
2
+ <h1>
3
+ <img src="https://raw.githubusercontent.com/TobitSoftware/chayns-components/master/assets/logo.png" width="600px" alt="chayns-components" />
4
+ </h1>
5
+ <p>A set of beautiful React components for developing your own applications with chayns.</p>
6
+ <div>
7
+ <img src="https://img.shields.io/npm/dm/@chayns-components/typewriter.svg?style=for-the-badge" alt="" />
8
+ <img src="https://img.shields.io/npm/v/@chayns-components/typewriter?style=for-the-badge" alt="" />
9
+ <img src="https://img.shields.io/github/license/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
10
+ <img src="https://img.shields.io/github/contributors/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
11
+ </div>
12
+ </div>
13
+
14
+ ---
15
+
16
+ ## Installation
17
+
18
+ First you need to install the file input part of the chayns-components.
19
+
20
+ ```bash
21
+ # NPM
22
+ npm install @chayns-components/file-input
23
+
24
+ # Yarn
25
+ yarn add @chayns-components/file-input
26
+ ```
27
+
28
+ > **Information:** Since the components have now been implemented with the styled-components
29
+ > library, the styles are delivered directly with the components. There is no need to load an extra
30
+ > stylesheet anymore.
31
+
32
+ ## Usage
33
+
34
+ You can use the components in your project as in the following example.
35
+
36
+ ```typescript jsx
37
+ import { FileInput } from '@chayns-components/file-input';
38
+
39
+ <FileInput />;
40
+ ```
@@ -0,0 +1,21 @@
1
+ import { FC } from 'react';
2
+ export type FileInputProps = {
3
+ /**
4
+ * An array of icons that should be displayed inside the FileInput
5
+ */
6
+ icons?: string[];
7
+ /**
8
+ * A function to be executed when files are added.
9
+ */
10
+ onAdd?: (files: File[]) => void;
11
+ /**
12
+ * A function to be executed when a file is removed.
13
+ */
14
+ onRemove?: (file: File) => void;
15
+ /**
16
+ * The text that should be displayed inside the FileInput
17
+ */
18
+ placeholder?: string;
19
+ };
20
+ declare const FileInput: FC<FileInputProps>;
21
+ export default FileInput;
@@ -0,0 +1,102 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _core = require("@chayns-components/core");
8
+ var _framerMotion = require("framer-motion");
9
+ var _react = _interopRequireWildcard(require("react"));
10
+ var _file = require("../utils/file");
11
+ var _FileListItem = _interopRequireDefault(require("./file-list/FileListItem"));
12
+ var _FileInput = require("./FileInput.styles");
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+ 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); }
15
+ 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; }
16
+ const FileInput = _ref => {
17
+ let {
18
+ icons = ['fa fa-upload'],
19
+ onRemove,
20
+ onAdd,
21
+ placeholder = 'Dateien hinzufügen'
22
+ } = _ref;
23
+ const [internalFiles, setInternalFiles] = (0, _react.useState)([]);
24
+ const handleAddFiles = (0, _react.useCallback)(files => {
25
+ const newFileItems = [];
26
+ files.forEach(file => {
27
+ if (file && !(0, _file.filterDuplicateFile)({
28
+ files: internalFiles,
29
+ newFile: file
30
+ })) {
31
+ newFileItems.push(file);
32
+ }
33
+ });
34
+ if (newFileItems.length > 0 && typeof onAdd === 'function') {
35
+ onAdd(newFileItems);
36
+ }
37
+ setInternalFiles(prevState => [...prevState, ...newFileItems]);
38
+ }, [internalFiles, onAdd]);
39
+ const handleDeleteFile = (0, _react.useCallback)(fileName => {
40
+ let fileToDelete;
41
+ const filteredFiles = internalFiles.filter(file => {
42
+ const {
43
+ name
44
+ } = file;
45
+ if (name === fileName) {
46
+ fileToDelete = file;
47
+ }
48
+ return name !== fileName;
49
+ });
50
+ setInternalFiles(filteredFiles);
51
+ if (!fileToDelete || typeof onRemove !== 'function') {
52
+ return;
53
+ }
54
+ onRemove(fileToDelete);
55
+ }, [internalFiles, onRemove]);
56
+ const handleClick = (0, _react.useCallback)(async () => {
57
+ const files = await (0, _core.selectFiles)({
58
+ multiple: true
59
+ });
60
+ handleAddFiles(files);
61
+ }, [handleAddFiles]);
62
+ const handleDrop = (0, _react.useCallback)(e => {
63
+ e.preventDefault();
64
+ const draggedFiles = Array.from(e.dataTransfer.files);
65
+ handleAddFiles(draggedFiles);
66
+ }, [handleAddFiles]);
67
+ const content = (0, _react.useMemo)(() => {
68
+ const items = internalFiles.map(file => /*#__PURE__*/_react.default.createElement(_FileInput.StyledMotionFileInputList, {
69
+ animate: {
70
+ height: 'auto',
71
+ opacity: 1
72
+ },
73
+ exit: {
74
+ height: 0,
75
+ opacity: 0
76
+ },
77
+ key: file.name,
78
+ transition: {
79
+ duration: 0.25,
80
+ type: 'tween'
81
+ }
82
+ }, /*#__PURE__*/_react.default.createElement(_FileListItem.default, {
83
+ fileType: file.type,
84
+ fileName: file.name,
85
+ fileSize: file.size,
86
+ onRemove: handleDeleteFile
87
+ })));
88
+ return items;
89
+ }, [handleDeleteFile, internalFiles]);
90
+ return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FileInput.StyledFileInput, null, /*#__PURE__*/_react.default.createElement(_FileInput.StyledFileInputContainer, {
91
+ onClick: () => void handleClick(),
92
+ onDragOver: e => e.preventDefault(),
93
+ onDrop: e => void handleDrop(e)
94
+ }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
95
+ icons: icons
96
+ }), /*#__PURE__*/_react.default.createElement(_FileInput.StyledFileInputText, null, placeholder)), /*#__PURE__*/_react.default.createElement(_core.List, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
97
+ initial: false
98
+ }, content))), [content, handleClick, handleDrop, icons, placeholder]);
99
+ };
100
+ FileInput.displayName = 'FileInput';
101
+ var _default = exports.default = FileInput;
102
+ //# sourceMappingURL=FileInput.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FileInput.js","names":["_core","require","_framerMotion","_react","_interopRequireWildcard","_file","_FileListItem","_interopRequireDefault","_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","Icon","StyledFileInputText","List","AnimatePresence","initial","displayName","_default","exports"],"sources":["../../src/components/FileInput.tsx"],"sourcesContent":["import { Icon, List, selectFiles } from '@chayns-components/core';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { DragEvent, FC, ReactElement, useCallback, useMemo, useState } from 'react';\nimport { filterDuplicateFile } from '../utils/file';\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) => e.preventDefault()}\n onDrop={(e) => 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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"}
@@ -0,0 +1,8 @@
1
+ export declare const StyledFileInput: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const StyledFileInputContainer: import("styled-components").StyledComponent<"div", any, {
3
+ theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
4
+ }, never>;
5
+ export declare const StyledFileInputText: import("styled-components").StyledComponent<"p", any, {
6
+ theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
7
+ }, never>;
8
+ export declare const StyledMotionFileInputList: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
@@ -0,0 +1,35 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.StyledMotionFileInputList = exports.StyledFileInputText = exports.StyledFileInputContainer = exports.StyledFileInput = void 0;
7
+ var _framerMotion = require("framer-motion");
8
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
+ const StyledFileInput = exports.StyledFileInput = _styledComponents.default.div``;
11
+ const StyledFileInputContainer = exports.StyledFileInputContainer = _styledComponents.default.div`
12
+ border: ${_ref => {
13
+ let {
14
+ theme
15
+ } = _ref;
16
+ return theme.text;
17
+ }} 1px dotted;
18
+ cursor: pointer;
19
+ display: flex;
20
+ gap: 10px;
21
+ align-items: center;
22
+ padding: 15px;
23
+ justify-content: center;
24
+ width: 100%;
25
+ `;
26
+ const StyledFileInputText = exports.StyledFileInputText = _styledComponents.default.p`
27
+ color: ${_ref2 => {
28
+ let {
29
+ theme
30
+ } = _ref2;
31
+ return theme.text;
32
+ }};
33
+ `;
34
+ const StyledMotionFileInputList = exports.StyledMotionFileInputList = (0, _styledComponents.default)(_framerMotion.motion.div)``;
35
+ //# sourceMappingURL=FileInput.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FileInput.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledFileInput","exports","styled","div","StyledFileInputContainer","_ref","theme","text","StyledFileInputText","p","_ref2","StyledMotionFileInputList","motion"],"sources":["../../src/components/FileInput.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledFileInput = styled.div``;\n\ntype StyledFileInputContainerProps = WithTheme<unknown>;\n\nexport const StyledFileInputContainer = styled.div<StyledFileInputContainerProps>`\n border: ${({ theme }: StyledFileInputContainerProps) => theme.text} 1px dotted;\n cursor: pointer;\n display: flex;\n gap: 10px;\n align-items: center;\n padding: 15px;\n justify-content: center;\n width: 100%;\n`;\n\ntype StyledFileInputTextProps = WithTheme<unknown>;\n\nexport const StyledFileInputText = styled.p<StyledFileInputTextProps>`\n color: ${({ theme }: StyledFileInputTextProps) => theme.text};\n`;\n\nexport const StyledMotionFileInputList = styled(motion.div)``;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAI,EAAC;AAIpC,MAAMC,wBAAwB,GAAAH,OAAA,CAAAG,wBAAA,GAAGF,yBAAM,CAACC,GAAmC;AAClF,cAAcE,IAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,mBAAmB,GAAAP,OAAA,CAAAO,mBAAA,GAAGN,yBAAM,CAACO,CAA4B;AACtE,aAAaC,KAAA;EAAA,IAAC;IAAEJ;EAAgC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAACC,IAAI;AAAA,CAAC;AACjE,CAAC;AAEM,MAAMI,yBAAyB,GAAAV,OAAA,CAAAU,yBAAA,GAAG,IAAAT,yBAAM,EAACU,oBAAM,CAACT,GAAG,CAAE,EAAC"}
@@ -0,0 +1,9 @@
1
+ import { FC } from 'react';
2
+ export type FileListItemProps = {
3
+ fileName: string;
4
+ fileSize: number;
5
+ fileType: string;
6
+ onRemove: (name: string) => void;
7
+ };
8
+ declare const FileListItem: FC<FileListItemProps>;
9
+ export default FileListItem;
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _core = require("@chayns-components/core");
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _file = require("../../utils/file");
10
+ var _FileListItem = require("./FileListItem.styles");
11
+ 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); }
12
+ 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; }
13
+ const FileListItem = _ref => {
14
+ let {
15
+ fileName,
16
+ fileSize,
17
+ fileType,
18
+ onRemove
19
+ } = _ref;
20
+ const humanFileSize = (0, _react.useMemo)(() => (0, _file.getHumanSize)(fileSize), [fileSize]);
21
+ const icon = (0, _react.useMemo)(() => (0, _file.getIconByMimeType)(fileType), [fileType]);
22
+ return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FileListItem.StyledFileListItem, null, /*#__PURE__*/_react.default.createElement(_core.ListItem, {
23
+ title: fileName,
24
+ subtitle: humanFileSize,
25
+ icons: [icon],
26
+ rightElements: [/*#__PURE__*/_react.default.createElement(_core.Icon, {
27
+ icons: ['ts-wrong'],
28
+ onClick: () => onRemove(fileName)
29
+ })]
30
+ })), [fileName, humanFileSize, icon, onRemove]);
31
+ };
32
+ FileListItem.displayName = 'FileList';
33
+ var _default = exports.default = FileListItem;
34
+ //# sourceMappingURL=FileListItem.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FileListItem.js","names":["_core","require","_react","_interopRequireWildcard","_file","_FileListItem","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","FileListItem","_ref","fileName","fileSize","fileType","onRemove","humanFileSize","useMemo","getHumanSize","icon","getIconByMimeType","createElement","StyledFileListItem","ListItem","title","subtitle","icons","rightElements","Icon","onClick","displayName","_default","exports"],"sources":["../../../src/components/file-list/FileListItem.tsx"],"sourcesContent":["import { Icon, ListItem } from '@chayns-components/core';\nimport React, { FC, useMemo } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../utils/file';\nimport { StyledFileListItem } from './FileListItem.styles';\n\nexport type FileListItemProps = {\n fileName: string;\n fileSize: number;\n fileType: string;\n onRemove: (name: string) => void;\n};\n\nconst FileListItem: FC<FileListItemProps> = ({ fileName, fileSize, fileType, onRemove }) => {\n const humanFileSize = useMemo(() => getHumanSize(fileSize), [fileSize]);\n\n const icon = useMemo(() => getIconByMimeType(fileType), [fileType]);\n\n return useMemo(\n () => (\n <StyledFileListItem>\n <ListItem\n title={fileName}\n subtitle={humanFileSize}\n icons={[icon]}\n rightElements={[\n <Icon icons={['ts-wrong']} onClick={() => onRemove(fileName)} />,\n ]}\n />\n </StyledFileListItem>\n ),\n [fileName, humanFileSize, icon, onRemove]\n );\n};\n\nFileListItem.displayName = 'FileList';\n\nexport default FileListItem;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAA2D,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAS3D,MAAMY,YAAmC,GAAGC,IAAA,IAAgD;EAAA,IAA/C;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC;EAAS,CAAC,GAAAJ,IAAA;EACnF,MAAMK,aAAa,GAAG,IAAAC,cAAO,EAAC,MAAM,IAAAC,kBAAY,EAACL,QAAQ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEvE,MAAMM,IAAI,GAAG,IAAAF,cAAO,EAAC,MAAM,IAAAG,uBAAiB,EAACN,QAAQ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEnE,OAAO,IAAAG,cAAO,EACV,mBACIhC,MAAA,CAAAU,OAAA,CAAA0B,aAAA,CAACjC,aAAA,CAAAkC,kBAAkB,qBACfrC,MAAA,CAAAU,OAAA,CAAA0B,aAAA,CAACtC,KAAA,CAAAwC,QAAQ;IACLC,KAAK,EAAEZ,QAAS;IAChBa,QAAQ,EAAET,aAAc;IACxBU,KAAK,EAAE,CAACP,IAAI,CAAE;IACdQ,aAAa,EAAE,cACX1C,MAAA,CAAAU,OAAA,CAAA0B,aAAA,CAACtC,KAAA,CAAA6C,IAAI;MAACF,KAAK,EAAE,CAAC,UAAU,CAAE;MAACG,OAAO,EAAEA,CAAA,KAAMd,QAAQ,CAACH,QAAQ;IAAE,CAAE,CAAC;EAClE,CACL,CACe,CACvB,EACD,CAACA,QAAQ,EAAEI,aAAa,EAAEG,IAAI,EAAEJ,QAAQ,CAC5C,CAAC;AACL,CAAC;AAEDL,YAAY,CAACoB,WAAW,GAAG,UAAU;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAArC,OAAA,GAEvBe,YAAY"}
@@ -0,0 +1 @@
1
+ export declare const StyledFileListItem: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.StyledFileListItem = void 0;
7
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
9
+ const StyledFileListItem = exports.StyledFileListItem = _styledComponents.default.div``;
10
+ //# sourceMappingURL=FileListItem.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FileListItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledFileListItem","exports","styled","div"],"sources":["../../../src/components/file-list/FileListItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFileListItem = styled.div``;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAAI,EAAC"}
package/lib/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as FileInput } from './components/FileInput';
package/lib/index.js ADDED
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "FileInput", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _FileInput.default;
10
+ }
11
+ });
12
+ var _FileInput = _interopRequireDefault(require("./components/FileInput"));
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["_FileInput","_interopRequireDefault","require","obj","__esModule","default"],"sources":["../src/index.ts"],"sourcesContent":["export { default as FileInput } from './components/FileInput';\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA8D,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA"}