@ioca/react 1.5.10 → 1.5.11
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/lib/cjs/components/upload/dropbox.js +54 -0
- package/lib/cjs/components/upload/dropbox.js.map +1 -0
- package/lib/cjs/components/upload/renderFile.js +33 -36
- package/lib/cjs/components/upload/renderFile.js.map +1 -1
- package/lib/cjs/components/upload/upload.js +100 -69
- package/lib/cjs/components/upload/upload.js.map +1 -1
- package/lib/cjs/js/usePreview/renderFile.js +1 -1
- package/lib/cjs/js/usePreview/renderFile.js.map +1 -1
- package/lib/css/index.css +1 -1
- package/lib/css/index.css.map +1 -1
- package/lib/es/components/upload/dropbox.js +46 -0
- package/lib/es/components/upload/dropbox.js.map +1 -0
- package/lib/es/components/upload/renderFile.js +34 -37
- package/lib/es/components/upload/renderFile.js.map +1 -1
- package/lib/es/components/upload/upload.js +101 -70
- package/lib/es/components/upload/upload.js.map +1 -1
- package/lib/es/js/usePreview/renderFile.js +1 -1
- package/lib/es/js/usePreview/renderFile.js.map +1 -1
- package/lib/index.js +171 -106
- package/lib/types/components/upload/type.d.ts +3 -8
- package/package.json +1 -1
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var material = require('@ricons/material');
|
|
7
|
+
var classNames = require('classnames');
|
|
8
|
+
var react = require('react');
|
|
9
|
+
var icon = require('../icon/icon.js');
|
|
10
|
+
|
|
11
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
12
|
+
|
|
13
|
+
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
|
|
14
|
+
|
|
15
|
+
const Dropbox = (props) => {
|
|
16
|
+
const { multiple, accept, disabled, children, onChange, onDropFiles } = props;
|
|
17
|
+
const [dragging, setDragging] = react.useState(false);
|
|
18
|
+
const inputRef = react.useRef(null);
|
|
19
|
+
const handleDragOver = (e) => {
|
|
20
|
+
e.preventDefault();
|
|
21
|
+
e.stopPropagation();
|
|
22
|
+
};
|
|
23
|
+
const handleDragEnter = (e) => {
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
e.stopPropagation();
|
|
26
|
+
if (!disabled)
|
|
27
|
+
setDragging(true);
|
|
28
|
+
};
|
|
29
|
+
const handleDragLeave = (e) => {
|
|
30
|
+
e.preventDefault();
|
|
31
|
+
e.stopPropagation();
|
|
32
|
+
setDragging(false);
|
|
33
|
+
};
|
|
34
|
+
const handleDrop = (e) => {
|
|
35
|
+
e.preventDefault();
|
|
36
|
+
e.stopPropagation();
|
|
37
|
+
setDragging(false);
|
|
38
|
+
if (disabled)
|
|
39
|
+
return;
|
|
40
|
+
const files = Array.from(e.dataTransfer.files);
|
|
41
|
+
if (files.length)
|
|
42
|
+
onDropFiles(files);
|
|
43
|
+
};
|
|
44
|
+
const handleClick = () => {
|
|
45
|
+
if (!disabled)
|
|
46
|
+
inputRef.current?.click();
|
|
47
|
+
};
|
|
48
|
+
return (jsxRuntime.jsxs("div", { className: classNames__default("i-upload-dropbox", dragging && "i-upload-dropbox-active"), onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "file", className: "i-input-file-hidden", multiple: multiple, accept: accept, disabled: disabled, onChange: onChange }), typeof children === "function"
|
|
49
|
+
? children(dragging)
|
|
50
|
+
: children || (jsxRuntime.jsx(icon.default, { icon: dragging ? (jsxRuntime.jsx(material.MoveToInboxTwotone, {})) : (jsxRuntime.jsx(material.OutboxTwotone, {})), size: "2em" }))] }));
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
exports.default = Dropbox;
|
|
54
|
+
//# sourceMappingURL=dropbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dropbox.js","sources":["../../../../packages/components/upload/dropbox.tsx"],"sourcesContent":["import { MoveToInboxTwotone, OutboxTwotone } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { DragEvent, useRef, useState } from \"react\";\nimport Icon from \"../icon\";\nimport { IDropboxProps } from \"./type\";\n\nconst Dropbox = (props: IDropboxProps) => {\n const { multiple, accept, disabled, children, onChange, onDropFiles } =\n props;\n const [dragging, setDragging] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleDragOver = (e: DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const handleDragEnter = (e: DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n if (!disabled) setDragging(true);\n };\n\n const handleDragLeave = (e: DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setDragging(false);\n };\n\n const handleDrop = (e: DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setDragging(false);\n if (disabled) return;\n const files = Array.from(e.dataTransfer.files);\n if (files.length) onDropFiles(files);\n };\n\n const handleClick = () => {\n if (!disabled) inputRef.current?.click();\n };\n\n return (\n <div\n className={classNames(\n \"i-upload-dropbox\",\n dragging && \"i-upload-dropbox-active\",\n )}\n onDragOver={handleDragOver}\n onDragEnter={handleDragEnter}\n onDragLeave={handleDragLeave}\n onDrop={handleDrop}\n onClick={handleClick}\n >\n <input\n ref={inputRef}\n type=\"file\"\n className=\"i-input-file-hidden\"\n multiple={multiple}\n accept={accept}\n disabled={disabled}\n onChange={onChange}\n />\n {typeof children === \"function\"\n ? children(dragging)\n : children || (\n <Icon\n icon={\n dragging ? (\n <MoveToInboxTwotone />\n ) : (\n <OutboxTwotone />\n )\n }\n size=\"2em\"\n />\n )}\n </div>\n );\n};\n\nexport default Dropbox;\n"],"names":["useState","useRef","_jsxs","classNames","_jsx","Icon","MoveToInboxTwotone","OutboxTwotone"],"mappings":";;;;;;;;;;;;;;AAMA,MAAM,OAAO,GAAG,CAAC,KAAoB,KAAI;AACrC,IAAA,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,GACjE,KAAK;IACT,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AAC/C,IAAA,MAAM,QAAQ,GAAGC,YAAM,CAAmB,IAAI,CAAC;AAE/C,IAAA,MAAM,cAAc,GAAG,CAAC,CAAY,KAAI;QACpC,CAAC,CAAC,cAAc,EAAE;QAClB,CAAC,CAAC,eAAe,EAAE;AACvB,IAAA,CAAC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,CAAY,KAAI;QACrC,CAAC,CAAC,cAAc,EAAE;QAClB,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,IAAI,CAAC,QAAQ;YAAE,WAAW,CAAC,IAAI,CAAC;AACpC,IAAA,CAAC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,CAAY,KAAI;QACrC,CAAC,CAAC,cAAc,EAAE;QAClB,CAAC,CAAC,eAAe,EAAE;QACnB,WAAW,CAAC,KAAK,CAAC;AACtB,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,CAAC,CAAY,KAAI;QAChC,CAAC,CAAC,cAAc,EAAE;QAClB,CAAC,CAAC,eAAe,EAAE;QACnB,WAAW,CAAC,KAAK,CAAC;AAClB,QAAA,IAAI,QAAQ;YAAE;AACd,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC;QAC9C,IAAI,KAAK,CAAC,MAAM;YAAE,WAAW,CAAC,KAAK,CAAC;AACxC,IAAA,CAAC;IAED,MAAM,WAAW,GAAG,MAAK;AACrB,QAAA,IAAI,CAAC,QAAQ;AAAE,YAAA,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE;AAC5C,IAAA,CAAC;AAED,IAAA,QACIC,eAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,mBAAU,CACjB,kBAAkB,EAClB,QAAQ,IAAI,yBAAyB,CACxC,EACD,UAAU,EAAE,cAAc,EAC1B,WAAW,EAAE,eAAe,EAC5B,WAAW,EAAE,eAAe,EAC5B,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,CAEpBC,cAAA,CAAA,OAAA,EAAA,EACI,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,qBAAqB,EAC/B,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,CACpB,EACD,OAAO,QAAQ,KAAK;AACjB,kBAAE,QAAQ,CAAC,QAAQ;AACnB,kBAAE,QAAQ,KACJA,eAACC,YAAI,EAAA,EACD,IAAI,EACA,QAAQ,IACJD,eAACE,2BAAkB,EAAA,EAAA,CAAG,KAEtBF,cAAA,CAACG,sBAAa,EAAA,EAAA,CAAG,CACpB,EAEL,IAAI,EAAC,KAAK,EAAA,CACZ,CACL,CAAA,EAAA,CACL;AAEd;;;;"}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var material = require('@ricons/material');
|
|
7
|
-
var
|
|
7
|
+
var react = require('react');
|
|
8
8
|
var SortableContainer = require('react-easy-sort');
|
|
9
9
|
var type = require('../../js/usePreview/type.js');
|
|
10
10
|
var utils = require('../../js/utils.js');
|
|
@@ -16,53 +16,50 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
16
16
|
|
|
17
17
|
var SortableContainer__default = /*#__PURE__*/_interopDefaultCompat(SortableContainer);
|
|
18
18
|
|
|
19
|
-
const ListContainer = (props) => {
|
|
20
|
-
const { sortable, onSortEnd,
|
|
21
|
-
const customProps = {
|
|
22
|
-
className: "i-upload-list",
|
|
23
|
-
onClick: (e) => {
|
|
24
|
-
e.stopPropagation();
|
|
25
|
-
e.preventDefault();
|
|
26
|
-
},
|
|
27
|
-
};
|
|
19
|
+
const ListContainer = react.memo((props) => {
|
|
20
|
+
const { sortable, onSortEnd, children, ...restProps } = props;
|
|
28
21
|
if (!sortable) {
|
|
29
|
-
return jsxRuntime.jsx("div", {
|
|
22
|
+
return (jsxRuntime.jsx("div", { className: "i-upload-list", onClick: (e) => {
|
|
23
|
+
e.stopPropagation();
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
}, ...restProps, children: children }));
|
|
30
26
|
}
|
|
31
|
-
return (jsxRuntime.jsx(SortableContainer__default, { draggedItemClassName:
|
|
32
|
-
};
|
|
33
|
-
const
|
|
27
|
+
return (jsxRuntime.jsx(SortableContainer__default, { draggedItemClassName: "i-upload-item-dragged", onSortEnd: onSortEnd, className: "i-upload-list", ...restProps, children: children }));
|
|
28
|
+
});
|
|
29
|
+
const CloseBtn = react.memo(({ index, onRemove }) => (jsxRuntime.jsx(helpericon.default, { active: true, className: "i-upload-delete", onClick: (e) => {
|
|
30
|
+
e.stopPropagation();
|
|
31
|
+
e.preventDefault();
|
|
32
|
+
onRemove(index);
|
|
33
|
+
} })));
|
|
34
|
+
const FileListItem = react.memo((props) => {
|
|
34
35
|
const { ref, mode, index, file, renderItem, onRemove, onPreview } = props;
|
|
35
36
|
if (!file)
|
|
36
|
-
return
|
|
37
|
-
const {
|
|
37
|
+
return null;
|
|
38
|
+
const { name, size, url, src } = file;
|
|
38
39
|
const type$1 = utils.getFileType(name, file.type);
|
|
40
|
+
const handleClick = react.useCallback(() => {
|
|
41
|
+
onPreview?.(index);
|
|
42
|
+
}, [onPreview, index]);
|
|
39
43
|
if (renderItem) {
|
|
40
44
|
return renderItem(file, index);
|
|
41
45
|
}
|
|
42
|
-
const
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
46
|
+
const node = react.useMemo(() => {
|
|
47
|
+
switch (type$1) {
|
|
48
|
+
case type.TFileType.IMAGE:
|
|
49
|
+
return (jsxRuntime.jsx(image.default, { lazyload: true, src: url || src, fit: "cover", onMouseDown: (e) => e.preventDefault() }));
|
|
50
|
+
case type.TFileType.VIDEO:
|
|
51
|
+
return jsxRuntime.jsx("video", { src: url || src, preload: "none" });
|
|
52
|
+
default:
|
|
53
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.FilePresentOutlined, {}), size: "1.5em" }), jsxRuntime.jsx("span", { className: "i-upload-file-name", children: name })] }));
|
|
54
|
+
}
|
|
55
|
+
}, [type$1, url, src, name]);
|
|
47
56
|
switch (mode) {
|
|
48
57
|
case "card":
|
|
49
|
-
|
|
50
|
-
switch (type$1) {
|
|
51
|
-
case type.TFileType.IMAGE:
|
|
52
|
-
node = (jsxRuntime.jsx(image.default, { lazyload: true, src: url || src, fit: 'cover', onMouseDown: (e) => e.preventDefault() }));
|
|
53
|
-
break;
|
|
54
|
-
case type.TFileType.VIDEO:
|
|
55
|
-
node = jsxRuntime.jsx("video", { src: url || src, preload: 'none' });
|
|
56
|
-
break;
|
|
57
|
-
default:
|
|
58
|
-
node = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.ListAltRound, {}) }), jsxRuntime.jsx("span", { className: 'i-upload-file-name', children: radash.title(name) })] }));
|
|
59
|
-
break;
|
|
60
|
-
}
|
|
61
|
-
return (jsxRuntime.jsxs("div", { ref: ref, title: name, className: 'i-upload-item-card', onClick: () => onPreview?.(index), children: [node, CloseBtn] }));
|
|
58
|
+
return (jsxRuntime.jsxs("div", { ref: ref, className: "i-upload-item-card", onClick: handleClick, children: [node, jsxRuntime.jsx(CloseBtn, { index: index, onRemove: onRemove }), name && (jsxRuntime.jsx("span", { className: "px-12 py-8 i-upload-tip", children: name }))] }));
|
|
62
59
|
default:
|
|
63
|
-
return (jsxRuntime.jsxs("div", { ref: ref, className:
|
|
60
|
+
return (jsxRuntime.jsxs("div", { ref: ref, className: "i-upload-item", onClick: handleClick, children: [jsxRuntime.jsx("span", { children: name }), jsxRuntime.jsx("i", { className: "i-upload-size", children: utils.formatBytes(size ?? 0) }), jsxRuntime.jsx(CloseBtn, { index: index, onRemove: onRemove })] }));
|
|
64
61
|
}
|
|
65
|
-
};
|
|
62
|
+
});
|
|
66
63
|
|
|
67
64
|
exports.ListContainer = ListContainer;
|
|
68
65
|
exports.default = FileListItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderFile.js","sources":["../../../../packages/components/upload/renderFile.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"renderFile.js","sources":["../../../../packages/components/upload/renderFile.tsx"],"sourcesContent":["import { FilePresentOutlined } from \"@ricons/material\";\nimport { memo, MouseEvent, RefObject, useCallback, useMemo } from \"react\";\nimport SortableContainer from \"react-easy-sort\";\nimport { TFileType } from \"../../js/usePreview/type\";\nimport { formatBytes, getFileType } from \"../../js/utils\";\nimport Icon from \"../icon\";\nimport Image from \"../image\";\nimport Helpericon from \"../utils/helpericon\";\nimport { IUploadItem } from \"./type\";\n\ninterface ListContainerProps {\n sortable?: boolean;\n onSortEnd: (oldIndex: number, newIndex: number) => void;\n [key: string]: any;\n}\n\nexport const ListContainer = memo((props: ListContainerProps) => {\n const { sortable, onSortEnd, children, ...restProps } = props;\n\n if (!sortable) {\n return (\n <div\n className=\"i-upload-list\"\n onClick={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n {...restProps}\n >\n {children}\n </div>\n );\n }\n return (\n <SortableContainer\n draggedItemClassName=\"i-upload-item-dragged\"\n onSortEnd={onSortEnd}\n className=\"i-upload-list\"\n {...restProps}\n >\n {children}\n </SortableContainer>\n );\n});\n\nconst CloseBtn = memo(\n ({ index, onRemove }: { index: number; onRemove: (i: number) => void }) => (\n <Helpericon\n active\n className=\"i-upload-delete\"\n onClick={(e: MouseEvent<HTMLElement>) => {\n e.stopPropagation();\n e.preventDefault();\n onRemove(index);\n }}\n />\n ),\n);\n\nconst FileListItem = memo(\n (props: IUploadItem & { ref?: RefObject<HTMLDivElement | null> }) => {\n const { ref, mode, index, file, renderItem, onRemove, onPreview } =\n props;\n\n if (!file) return null;\n\n const { name, size, url, src } = file;\n const type = getFileType(name, file.type);\n\n const handleClick = useCallback(() => {\n onPreview?.(index);\n }, [onPreview, index]);\n\n if (renderItem) {\n return renderItem(file, index);\n }\n\n const node = useMemo(() => {\n switch (type) {\n case TFileType.IMAGE:\n return (\n <Image\n lazyload\n src={url || src}\n fit=\"cover\"\n onMouseDown={(e: MouseEvent<HTMLImageElement>) =>\n e.preventDefault()\n }\n />\n );\n case TFileType.VIDEO:\n return <video src={url || src} preload=\"none\" />;\n default:\n return (\n <>\n <Icon icon={<FilePresentOutlined />} size=\"1.5em\" />\n <span className=\"i-upload-file-name\">{name}</span>\n </>\n );\n }\n }, [type, url, src, name]);\n\n switch (mode) {\n case \"card\":\n return (\n <div\n ref={ref}\n className=\"i-upload-item-card\"\n onClick={handleClick}\n >\n {node}\n <CloseBtn index={index} onRemove={onRemove} />\n {name && (\n <span className=\"px-12 py-8 i-upload-tip\">\n {name}\n </span>\n )}\n </div>\n );\n default:\n return (\n <div\n ref={ref}\n className=\"i-upload-item\"\n onClick={handleClick}\n >\n <span>{name}</span>\n <i className=\"i-upload-size\">\n {formatBytes(size ?? 0)}\n </i>\n <CloseBtn index={index} onRemove={onRemove} />\n </div>\n );\n }\n },\n);\n\nexport default FileListItem;\n"],"names":["memo","_jsx","SortableContainer","Helpericon","type","getFileType","useCallback","useMemo","TFileType","Image","_jsxs","_Fragment","Icon","FilePresentOutlined","formatBytes"],"mappings":"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"}
|
|
@@ -13,113 +13,144 @@ var utils = require('../../js/utils.js');
|
|
|
13
13
|
var button = require('../button/button.js');
|
|
14
14
|
var icon = require('../icon/icon.js');
|
|
15
15
|
var container = require('../input/container.js');
|
|
16
|
+
var dropbox = require('./dropbox.js');
|
|
16
17
|
var renderFile = require('./renderFile.js');
|
|
17
18
|
|
|
18
19
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
19
20
|
|
|
20
21
|
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
|
|
21
22
|
|
|
23
|
+
const normalizeFiles = (files) => (files ?? []).map((item) => {
|
|
24
|
+
const file = item;
|
|
25
|
+
if (item instanceof File) {
|
|
26
|
+
const src = file.src ?? URL.createObjectURL(item);
|
|
27
|
+
Object.assign(item, {
|
|
28
|
+
id: file.id ?? radash.uid(7),
|
|
29
|
+
src,
|
|
30
|
+
url: file.url ?? src,
|
|
31
|
+
});
|
|
32
|
+
return item;
|
|
33
|
+
}
|
|
34
|
+
const src = file.src ?? file.name;
|
|
35
|
+
return {
|
|
36
|
+
...file,
|
|
37
|
+
id: file.id ?? radash.uid(7),
|
|
38
|
+
src,
|
|
39
|
+
url: file.url ?? src,
|
|
40
|
+
};
|
|
41
|
+
});
|
|
22
42
|
const Upload = (props) => {
|
|
23
|
-
const {
|
|
24
|
-
const [
|
|
25
|
-
const
|
|
43
|
+
const { label, labelInline, value, files, placeholder, status = "normal", message, className, style, children, droppable, dropbox: dropbox$1, defaultButtonProps, mode = "default", cardSize = "3.2em", disabled, sortable, limit = props.multiple ? Infinity : 1, multiple, renderItem, shouldUpload = () => true, uploader, onChange, onFilesChange, onUpload, onRemove, ...restProps } = props;
|
|
44
|
+
const [internalFileList, setInternalFileList] = react.useState([]);
|
|
45
|
+
const isControlled = react.useMemo(() => value !== undefined || files !== undefined, [value, files]);
|
|
46
|
+
const fileList = isControlled
|
|
47
|
+
? normalizeFiles(value ?? files ?? [])
|
|
48
|
+
: internalFileList;
|
|
49
|
+
const uploadMessage = message;
|
|
26
50
|
const inputRef = react.useRef(null);
|
|
27
51
|
const preview = index.default();
|
|
28
|
-
const defBtnProps =
|
|
52
|
+
const defBtnProps = react.useMemo(() => ({
|
|
29
53
|
children: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.DriveFolderUploadOutlined, {}) }), " \u4E0A\u4F20"] })),
|
|
30
|
-
|
|
54
|
+
...defaultButtonProps,
|
|
55
|
+
}), [defaultButtonProps]);
|
|
31
56
|
const trigger = react.useMemo(() => {
|
|
32
57
|
if (children)
|
|
33
58
|
return children;
|
|
34
59
|
switch (mode) {
|
|
35
60
|
case "card":
|
|
36
|
-
return (jsxRuntime.jsx(button.default, { className:
|
|
61
|
+
return (jsxRuntime.jsx(button.default, { className: "i-upload-card-btn color-5", square: true, flat: true, outline: true, disabled: disabled, children: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.PlusSharp, {}) }) }));
|
|
37
62
|
default:
|
|
38
63
|
return (jsxRuntime.jsx(button.default, { ...defBtnProps, className: classNames__default("i-upload-btn", defBtnProps.className), disabled: disabled }));
|
|
39
64
|
}
|
|
40
|
-
}, [mode, children]);
|
|
41
|
-
const
|
|
42
|
-
|
|
65
|
+
}, [mode, children, disabled, defBtnProps]);
|
|
66
|
+
const handleUpload = react.useCallback(async (files) => {
|
|
67
|
+
if (!uploader)
|
|
68
|
+
return;
|
|
69
|
+
const shouldUploadFiles = files.filter(shouldUpload);
|
|
70
|
+
const result = await Promise.all(shouldUploadFiles.map(uploader));
|
|
71
|
+
return onUpload?.(result);
|
|
72
|
+
}, [uploader, shouldUpload, onUpload]);
|
|
73
|
+
const processFiles = react.useCallback((inputFiles) => {
|
|
43
74
|
const before = fileList;
|
|
44
75
|
const changed = [];
|
|
45
|
-
|
|
46
|
-
const { id, name, size, type } =
|
|
47
|
-
const same = before.
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
Object.assign(f, {
|
|
76
|
+
inputFiles.forEach((file) => {
|
|
77
|
+
const { id, name, size, type } = file;
|
|
78
|
+
const same = before.some((pf) => pf.name === name &&
|
|
79
|
+
pf.size === size &&
|
|
80
|
+
pf.type === type);
|
|
81
|
+
const src = URL.createObjectURL(file);
|
|
82
|
+
Object.assign(file, {
|
|
53
83
|
id: id ?? radash.uid(7),
|
|
54
|
-
src: src ??
|
|
55
|
-
url: src ??
|
|
84
|
+
src: src ?? file.name,
|
|
85
|
+
url: src ?? file.name,
|
|
56
86
|
});
|
|
57
|
-
!same
|
|
87
|
+
if (!same)
|
|
88
|
+
changed.push(file);
|
|
58
89
|
});
|
|
59
90
|
const after = [...before, ...changed];
|
|
60
91
|
const last = after.at(-1);
|
|
61
|
-
const nextFiles = multiple
|
|
62
|
-
|
|
63
|
-
|
|
92
|
+
const nextFiles = multiple
|
|
93
|
+
? after.slice(0, limit)
|
|
94
|
+
: last
|
|
95
|
+
? [last]
|
|
96
|
+
: [];
|
|
97
|
+
return { nextFiles, changed };
|
|
98
|
+
}, [fileList, multiple, limit]);
|
|
99
|
+
const applyFiles = react.useCallback((nextFiles, changed, e) => {
|
|
100
|
+
if (!isControlled)
|
|
101
|
+
setInternalFileList(nextFiles);
|
|
64
102
|
onFilesChange?.(nextFiles, changed, e);
|
|
65
103
|
onChange?.(nextFiles, e);
|
|
66
104
|
handleUpload(changed);
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
const
|
|
105
|
+
}, [isControlled, onFilesChange, onChange, handleUpload]);
|
|
106
|
+
const handleChange = react.useCallback((e) => {
|
|
107
|
+
const inputFiles = Array.from(e.target.files || []);
|
|
108
|
+
const { nextFiles, changed } = processFiles(inputFiles);
|
|
109
|
+
applyFiles(nextFiles, changed, e);
|
|
110
|
+
if (inputRef.current)
|
|
111
|
+
inputRef.current.value = "";
|
|
112
|
+
}, [processFiles, applyFiles]);
|
|
113
|
+
const handleDropFiles = react.useCallback((files) => {
|
|
114
|
+
const { nextFiles, changed } = processFiles(files);
|
|
115
|
+
applyFiles(nextFiles, changed);
|
|
116
|
+
}, [processFiles, applyFiles]);
|
|
117
|
+
const handleRemove = react.useCallback((i) => {
|
|
118
|
+
const files = [...fileList];
|
|
71
119
|
const changed = files.splice(i, 1);
|
|
72
120
|
URL.revokeObjectURL(changed[0]?.src || "");
|
|
73
|
-
|
|
121
|
+
if (!isControlled)
|
|
122
|
+
setInternalFileList(files);
|
|
74
123
|
onFilesChange?.(files, changed);
|
|
75
124
|
onChange?.(files);
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
const setFileList = (files) => {
|
|
89
|
-
if (!files)
|
|
90
|
-
return;
|
|
91
|
-
setFileListState(files.map((f) => {
|
|
92
|
-
const file = f;
|
|
93
|
-
return { ...file, id: file.id ?? radash.uid(7) };
|
|
94
|
-
}));
|
|
95
|
-
};
|
|
96
|
-
const handleSortEnd = (before, after) => {
|
|
97
|
-
const [...files] = fileList;
|
|
125
|
+
onRemove?.(changed[0]);
|
|
126
|
+
if (inputRef.current)
|
|
127
|
+
inputRef.current.value = "";
|
|
128
|
+
}, [fileList, isControlled, onFilesChange, onChange, onRemove]);
|
|
129
|
+
const handlePreview = react.useCallback((i) => {
|
|
130
|
+
preview({
|
|
131
|
+
items: fileList,
|
|
132
|
+
initial: i,
|
|
133
|
+
});
|
|
134
|
+
}, [fileList, preview]);
|
|
135
|
+
const handleSortEnd = react.useCallback((before, after) => {
|
|
136
|
+
const files = [...fileList];
|
|
98
137
|
const nextFiles = utils.arrayMove(files, before, after);
|
|
99
|
-
|
|
138
|
+
if (!isControlled)
|
|
139
|
+
setInternalFileList(nextFiles);
|
|
140
|
+
onFilesChange?.(nextFiles, []);
|
|
100
141
|
onChange?.(nextFiles);
|
|
101
|
-
};
|
|
102
|
-
|
|
103
|
-
setUploadMessage(message);
|
|
104
|
-
}, [status, message]);
|
|
105
|
-
react.useEffect(() => {
|
|
106
|
-
setFileListState(value?.filter?.((file) => !!file.id) ?? []);
|
|
107
|
-
}, [value]);
|
|
108
|
-
react.useEffect(() => {
|
|
109
|
-
setFileList(initialFiles);
|
|
110
|
-
}, []);
|
|
111
|
-
react.useImperativeHandle(ref, () => ({
|
|
112
|
-
getFileList: () => fileList,
|
|
113
|
-
setFileList,
|
|
114
|
-
}), [fileList]);
|
|
115
|
-
return (jsxRuntime.jsx(container.default, { as: 'div', label: label, labelInline: labelInline, className: classNames__default("i-input-label-file", className), style: style, children: jsxRuntime.jsxs("div", { className: classNames__default("i-upload-inner", {
|
|
142
|
+
}, [fileList, isControlled, onFilesChange, onChange]);
|
|
143
|
+
return (jsxRuntime.jsx(container.default, { as: "div", label: label, labelInline: labelInline, className: classNames__default("i-input-label-file", className), style: style, children: jsxRuntime.jsxs("div", { className: classNames__default("i-upload-inner", {
|
|
116
144
|
[`i-upload-${mode}`]: mode !== "default",
|
|
117
145
|
}), style: { ["--upload-card-size"]: cardSize }, children: [jsxRuntime.jsx(renderFile.ListContainer, { sortable: sortable, onSortEnd: handleSortEnd, children: fileList.map((file, i) => {
|
|
118
|
-
const
|
|
146
|
+
const f = file;
|
|
147
|
+
const key = f.id ?? i;
|
|
148
|
+
const node = (jsxRuntime.jsx(renderFile.default, { index: i, file: f, mode: mode, renderItem: renderItem, onRemove: handleRemove, onPreview: handlePreview }, key));
|
|
119
149
|
if (!sortable)
|
|
120
150
|
return node;
|
|
121
|
-
return jsxRuntime.jsx(SortableContainer.SortableItem, { children: node },
|
|
122
|
-
}) }), uploadMessage && (jsxRuntime.jsx("span", { className:
|
|
151
|
+
return jsxRuntime.jsx(SortableContainer.SortableItem, { children: node }, key);
|
|
152
|
+
}) }), uploadMessage && (jsxRuntime.jsx("span", { className: "i-upload-message", children: uploadMessage })), fileList.length < limit &&
|
|
153
|
+
(droppable ? (jsxRuntime.jsx(dropbox.default, { multiple: multiple, accept: restProps.accept, disabled: disabled, onChange: handleChange, onDropFiles: handleDropFiles, children: dropbox$1 })) : (jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { ...restProps, disabled: disabled, ref: inputRef, type: "file", className: "i-input-file-hidden", multiple: multiple, onChange: handleChange }), trigger] })))] }) }));
|
|
123
154
|
};
|
|
124
155
|
|
|
125
156
|
exports.default = Upload;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"upload.js","sources":["../../../../packages/components/upload/upload.tsx"],"sourcesContent":["import { DriveFolderUploadOutlined, PlusSharp } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { uid } from \"radash\";\nimport {\n\tChangeEvent,\n\tCSSProperties,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport { SortableItem } from \"react-easy-sort\";\nimport usePreview from \"../../js/usePreview\";\nimport { TPreviewItem } from \"../../js/usePreview/type\";\nimport { arrayMove } from \"../../js/utils\";\nimport Button from \"../button\";\nimport Icon from \"../icon\";\nimport InputContainer from \"../input/container\";\nimport \"./index.css\";\nimport FileListItem, { ListContainer } from \"./renderFile\";\nimport { IFile, IUpload } from \"./type\";\n\nconst Upload = (props: IUpload) => {\n\tconst {\n\t\tref,\n\t\tlabel,\n\t\tlabelInline,\n\t\tvalue,\n\t\tfiles = [],\n\t\tinitialFiles,\n\t\tplaceholder,\n\t\tstatus = \"normal\",\n\t\tmessage,\n\t\tclassName,\n\t\tstyle,\n\t\tchildren,\n\t\tdefaultButtonProps,\n\t\tmode = \"default\",\n\t\tcardSize = \"4em\",\n\t\tdisabled,\n\t\tsortable,\n\t\tlimit = props.multiple ? Infinity : 1,\n\t\tmultiple,\n\t\trenderItem,\n\t\tshouldUpload = () => true,\n\t\tuploader,\n\t\tonChange,\n\t\tonFilesChange,\n\t\tonUpload,\n\t\t...restProps\n\t} = props;\n\n\tconst [fileList, setFileListState] = useState(files);\n\tconst [uploadMessage, setUploadMessage] = useState(message);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst preview = usePreview();\n\tconst defBtnProps = Object.assign(\n\t\t{\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t<Icon icon={<DriveFolderUploadOutlined />} /> 上传\n\t\t\t\t</>\n\t\t\t),\n\t\t},\n\t\tdefaultButtonProps,\n\t);\n\n\tconst trigger = useMemo(() => {\n\t\tif (children) return children;\n\n\t\tswitch (mode) {\n\t\t\tcase \"card\":\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName='i-upload-card-btn color-5'\n\t\t\t\t\t\tsquare\n\t\t\t\t\t\tflat\n\t\t\t\t\t\toutline\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon={<PlusSharp />} />\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\t\t\tdefault:\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t{...defBtnProps}\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\"i-upload-btn\",\n\t\t\t\t\t\t\tdefBtnProps.className,\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t}\n\t}, [mode, children]);\n\n\tconst handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n\t\tconst files = Array.from(e.target.files || []) as IFile[];\n\t\tconst before = fileList;\n\t\tconst changed: IFile[] = [];\n\n\t\tfiles.map((f) => {\n\t\t\tconst { id, name, size, type } = f;\n\t\t\tconst same = before.find((pf) => {\n\t\t\t\tconst { name: n, size: s, type: t } = pf;\n\t\t\t\treturn n === name && s === size && t === type;\n\t\t\t});\n\t\t\tconst src = URL.createObjectURL(f);\n\n\t\t\tObject.assign(f, {\n\t\t\t\tid: id ?? uid(7),\n\t\t\t\tsrc: src ?? f.name,\n\t\t\t\turl: src ?? f.name,\n\t\t\t});\n\t\t\t!same && changed.push(f);\n\t\t});\n\n\t\tconst after = [...before, ...changed];\n\t\tconst last = after.at(-1);\n\t\tconst nextFiles = multiple ? after.slice(0, limit) : last ? [last] : [];\n\n\t\tsetFileListState(nextFiles);\n\t\tsetUploadMessage(message);\n\n\t\tonFilesChange?.(nextFiles, changed, e);\n\t\tonChange?.(nextFiles, e);\n\n\t\thandleUpload(changed);\n\t\tinputRef.current && (inputRef.current.value = \"\");\n\t};\n\n\tconst handleRemove = (i: number) => {\n\t\tconst [...files] = fileList;\n\n\t\tconst changed = files.splice(i, 1);\n\t\tURL.revokeObjectURL(changed[0]?.src || \"\");\n\n\t\tsetFileListState(files);\n\t\tonFilesChange?.(files, changed);\n\t\tonChange?.(files);\n\n\t\tinputRef.current && (inputRef.current.value = \"\");\n\t};\n\n\tconst handleUpload = async (files: IFile[]) => {\n\t\tif (!uploader) return;\n\n\t\tconst shouldUploadFiles = files.filter(shouldUpload);\n\n\t\tconst result = Promise.all(shouldUploadFiles.map(uploader));\n\n\t\treturn onUpload?.(result);\n\t};\n\n\tconst handlePreview = (i: number) => {\n\t\tpreview({ items: fileList as TPreviewItem[], initial: i });\n\t};\n\n\tconst setFileList = (files?: IFile[] | File[]) => {\n\t\tif (!files) return;\n\n\t\tsetFileListState(\n\t\t\tfiles.map((f: IFile | File) => {\n\t\t\t\tconst file = f as IFile;\n\t\t\t\treturn { ...file, id: file.id ?? uid(7) };\n\t\t\t}),\n\t\t);\n\t};\n\n\tconst handleSortEnd = (before: number, after: number) => {\n\t\tconst [...files] = fileList;\n\n\t\tconst nextFiles = arrayMove(files, before, after);\n\t\tsetFileListState(nextFiles);\n\t\tonChange?.(nextFiles);\n\t};\n\n\tuseEffect(() => {\n\t\tsetUploadMessage(message);\n\t}, [status, message]);\n\n\tuseEffect(() => {\n\t\tsetFileListState(value?.filter?.((file: IFile) => !!file.id) ?? []);\n\t}, [value]);\n\n\tuseEffect(() => {\n\t\tsetFileList(initialFiles);\n\t}, []);\n\n\tuseImperativeHandle(\n\t\tref,\n\t\t() => ({\n\t\t\tgetFileList: () => fileList,\n\n\t\t\tsetFileList,\n\t\t}),\n\t\t[fileList],\n\t);\n\n\treturn (\n\t\t<InputContainer\n\t\t\tas='div'\n\t\t\tlabel={label}\n\t\t\tlabelInline={labelInline}\n\t\t\tclassName={classNames(\"i-input-label-file\", className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-upload-inner\", {\n\t\t\t\t\t[`i-upload-${mode}`]: mode !== \"default\",\n\t\t\t\t})}\n\t\t\t\tstyle={{ [\"--upload-card-size\"]: cardSize } as CSSProperties}\n\t\t\t>\n\t\t\t\t<ListContainer sortable={sortable} onSortEnd={handleSortEnd}>\n\t\t\t\t\t{fileList.map((file: IFile, i: number) => {\n\t\t\t\t\t\tconst node = (\n\t\t\t\t\t\t\t<FileListItem\n\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\tindex={i}\n\t\t\t\t\t\t\t\tfile={file}\n\t\t\t\t\t\t\t\tmode={mode}\n\t\t\t\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\t\t\t\tonRemove={handleRemove}\n\t\t\t\t\t\t\t\tonPreview={handlePreview}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tif (!sortable) return node;\n\n\t\t\t\t\t\treturn <SortableItem key={i}>{node}</SortableItem>;\n\t\t\t\t\t})}\n\t\t\t\t</ListContainer>\n\n\t\t\t\t{uploadMessage && (\n\t\t\t\t\t<span className='i-upload-message'>{uploadMessage}</span>\n\t\t\t\t)}\n\n\t\t\t\t{fileList.length < limit && (\n\t\t\t\t\t<label>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t{...restProps}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tref={inputRef}\n\t\t\t\t\t\t\ttype='file'\n\t\t\t\t\t\t\tclassName='i-input-file-hidden'\n\t\t\t\t\t\t\tmultiple={multiple}\n\t\t\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{trigger}\n\t\t\t\t\t</label>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</InputContainer>\n\t);\n};\n\nexport default Upload;\n"],"names":["useState","useRef","usePreview","_jsxs","_Fragment","_jsx","Icon","DriveFolderUploadOutlined","useMemo","Button","PlusSharp","classNames","uid","arrayMove","useEffect","useImperativeHandle","InputContainer","ListContainer","FileListItem","SortableItem"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"upload.js","sources":["../../../../packages/components/upload/upload.tsx"],"sourcesContent":["import { DriveFolderUploadOutlined, PlusSharp } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { uid } from \"radash\";\nimport {\n ChangeEvent,\n CSSProperties,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { SortableItem } from \"react-easy-sort\";\nimport usePreview from \"../../js/usePreview\";\nimport { TPreviewItem } from \"../../js/usePreview/type\";\nimport { arrayMove } from \"../../js/utils\";\nimport Button from \"../button\";\nimport Icon from \"../icon\";\nimport InputContainer from \"../input/container\";\nimport Dropbox from \"./dropbox\";\nimport \"./index.css\";\nimport FileListItem, { ListContainer } from \"./renderFile\";\nimport { IFile, IUpload } from \"./type\";\n\nconst normalizeFiles = (files?: IFile[] | File[]) =>\n (files ?? []).map((item) => {\n const file = item as IFile;\n if (item instanceof File) {\n const src = file.src ?? URL.createObjectURL(item);\n Object.assign(item, {\n id: file.id ?? uid(7),\n src,\n url: file.url ?? src,\n });\n return item;\n }\n const src = file.src ?? file.name;\n return {\n ...(file as object),\n id: file.id ?? uid(7),\n src,\n url: file.url ?? src,\n } as IFile;\n });\n\nconst Upload = (props: IUpload) => {\n const {\n label,\n labelInline,\n value,\n files,\n placeholder,\n status = \"normal\",\n message,\n className,\n style,\n children,\n droppable,\n dropbox,\n defaultButtonProps,\n mode = \"default\",\n cardSize = \"3.2em\",\n disabled,\n sortable,\n limit = props.multiple ? Infinity : 1,\n multiple,\n renderItem,\n shouldUpload = () => true,\n uploader,\n onChange,\n onFilesChange,\n onUpload,\n onRemove,\n ...restProps\n } = props;\n\n const [internalFileList, setInternalFileList] = useState<IFile[]>([]);\n const isControlled = useMemo(\n () => value !== undefined || files !== undefined,\n [value, files],\n );\n const fileList = isControlled\n ? normalizeFiles(value ?? files ?? [])\n : internalFileList;\n\n const uploadMessage = message;\n const inputRef = useRef<HTMLInputElement>(null);\n const preview = usePreview();\n const defBtnProps = useMemo(\n () => ({\n children: (\n <>\n <Icon icon={<DriveFolderUploadOutlined />} /> 上传\n </>\n ),\n ...defaultButtonProps,\n }),\n [defaultButtonProps],\n );\n\n const trigger = useMemo(() => {\n if (children) return children;\n\n switch (mode) {\n case \"card\":\n return (\n <Button\n className=\"i-upload-card-btn color-5\"\n square\n flat\n outline\n disabled={disabled}\n >\n <Icon icon={<PlusSharp />} />\n </Button>\n );\n default:\n return (\n <Button\n {...defBtnProps}\n className={classNames(\n \"i-upload-btn\",\n defBtnProps.className,\n )}\n disabled={disabled}\n />\n );\n }\n }, [mode, children, disabled, defBtnProps]);\n\n const handleUpload = useCallback(\n async (files: IFile[]) => {\n if (!uploader) return;\n\n const shouldUploadFiles = files.filter(shouldUpload);\n const result = await Promise.all(shouldUploadFiles.map(uploader));\n\n return onUpload?.(result);\n },\n [uploader, shouldUpload, onUpload],\n );\n\n const processFiles = useCallback(\n (inputFiles: IFile[]) => {\n const before = fileList;\n const changed: IFile[] = [];\n\n inputFiles.forEach((file) => {\n const { id, name, size, type } = file;\n const same = before.some(\n (pf) =>\n pf.name === name &&\n pf.size === size &&\n pf.type === type,\n );\n const src = URL.createObjectURL(file);\n\n Object.assign(file, {\n id: id ?? uid(7),\n src: src ?? file.name,\n url: src ?? file.name,\n });\n if (!same) changed.push(file);\n });\n\n const after = [...before, ...changed];\n const last = after.at(-1);\n const nextFiles: IFile[] = multiple\n ? (after.slice(0, limit) as IFile[])\n : last\n ? [last as IFile]\n : [];\n\n return { nextFiles, changed };\n },\n [fileList, multiple, limit],\n );\n\n const applyFiles = useCallback(\n (\n nextFiles: IFile[],\n changed: IFile[],\n e?: ChangeEvent<HTMLInputElement>,\n ) => {\n if (!isControlled) setInternalFileList(nextFiles as IFile[]);\n onFilesChange?.(nextFiles as IFile[], changed as IFile[], e);\n onChange?.(nextFiles, e);\n handleUpload(changed);\n },\n [isControlled, onFilesChange, onChange, handleUpload],\n );\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n const inputFiles = Array.from(e.target.files || []) as IFile[];\n const { nextFiles, changed } = processFiles(inputFiles);\n\n applyFiles(nextFiles, changed, e);\n if (inputRef.current) inputRef.current.value = \"\";\n },\n [processFiles, applyFiles],\n );\n\n const handleDropFiles = useCallback(\n (files: File[]) => {\n const { nextFiles, changed } = processFiles(files as IFile[]);\n applyFiles(nextFiles, changed);\n },\n [processFiles, applyFiles],\n );\n\n const handleRemove = useCallback(\n (i: number) => {\n const files = [...fileList];\n const changed = files.splice(i, 1);\n URL.revokeObjectURL((changed[0] as IFile)?.src || \"\");\n\n if (!isControlled) setInternalFileList(files as IFile[]);\n onFilesChange?.(files as IFile[], changed as IFile[]);\n onChange?.(files);\n onRemove?.(changed[0] as IFile);\n\n if (inputRef.current) inputRef.current.value = \"\";\n },\n [fileList, isControlled, onFilesChange, onChange, onRemove],\n );\n\n const handlePreview = useCallback(\n (i: number) => {\n preview({\n items: fileList as unknown as TPreviewItem[],\n initial: i,\n });\n },\n [fileList, preview],\n );\n\n const handleSortEnd = useCallback(\n (before: number, after: number) => {\n const files = [...fileList];\n const nextFiles = arrayMove(files, before, after);\n if (!isControlled) setInternalFileList(nextFiles);\n onFilesChange?.(nextFiles, []);\n onChange?.(nextFiles);\n },\n [fileList, isControlled, onFilesChange, onChange],\n );\n\n return (\n <InputContainer\n as=\"div\"\n label={label}\n labelInline={labelInline}\n className={classNames(\"i-input-label-file\", className)}\n style={style}\n >\n <div\n className={classNames(\"i-upload-inner\", {\n [`i-upload-${mode}`]: mode !== \"default\",\n })}\n style={{ [\"--upload-card-size\"]: cardSize } as CSSProperties}\n >\n <ListContainer sortable={sortable} onSortEnd={handleSortEnd}>\n {fileList.map((file, i) => {\n const f = file as IFile;\n const key = f.id ?? i;\n const node = (\n <FileListItem\n key={key}\n index={i}\n file={f}\n mode={mode}\n renderItem={renderItem}\n onRemove={handleRemove}\n onPreview={handlePreview}\n />\n );\n\n if (!sortable) return node;\n\n return <SortableItem key={key}>{node}</SortableItem>;\n })}\n </ListContainer>\n\n {uploadMessage && (\n <span className=\"i-upload-message\">{uploadMessage}</span>\n )}\n\n {fileList.length < limit &&\n (droppable ? (\n <Dropbox\n multiple={multiple}\n accept={restProps.accept}\n disabled={disabled}\n onChange={handleChange}\n onDropFiles={handleDropFiles}\n >\n {dropbox}\n </Dropbox>\n ) : (\n <label>\n <input\n {...restProps}\n disabled={disabled}\n ref={inputRef}\n type=\"file\"\n className=\"i-input-file-hidden\"\n multiple={multiple}\n onChange={handleChange}\n />\n {trigger}\n </label>\n ))}\n </div>\n </InputContainer>\n );\n};\n\nexport default Upload;\n"],"names":["uid","dropbox","useState","useMemo","useRef","usePreview","_jsxs","_Fragment","_jsx","Icon","DriveFolderUploadOutlined","Button","PlusSharp","classNames","useCallback","arrayMove","InputContainer","ListContainer","FileListItem","SortableItem","Dropbox"],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ function renderFile(props) {
|
|
|
16
16
|
case type.TFileType.VIDEO:
|
|
17
17
|
return jsxRuntime.jsx(video.default, { ...props });
|
|
18
18
|
default:
|
|
19
|
-
return (jsxRuntime.jsxs("div", { className:
|
|
19
|
+
return (jsxRuntime.jsxs("div", { className: "i-preview-unknown", children: [jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.FeedOutlined, {}), size: "3em" }), jsxRuntime.jsx("h5", { className: "mt-4", children: name || suffix })] }));
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderFile.js","sources":["../../../../packages/js/usePreview/renderFile.tsx"],"sourcesContent":["import Icon from \"@p/components/icon\";\nimport Video from \"@p/components/video\";\nimport { FeedOutlined } from \"@ricons/material\";\nimport { TFileType, TPreviewItem } from \"./type\";\n\nexport default function renderFile(props: TPreviewItem) {\n
|
|
1
|
+
{"version":3,"file":"renderFile.js","sources":["../../../../packages/js/usePreview/renderFile.tsx"],"sourcesContent":["import Icon from \"@p/components/icon\";\nimport Video from \"@p/components/video\";\nimport { FeedOutlined } from \"@ricons/material\";\nimport { TFileType, TPreviewItem } from \"./type\";\n\nexport default function renderFile(props: TPreviewItem) {\n const { name, suffix, type } = props;\n\n switch (type) {\n case TFileType.IMAGE:\n return <img src={props.src} />;\n case TFileType.VIDEO:\n return <Video {...props} />;\n default:\n return (\n <div className=\"i-preview-unknown\">\n <Icon icon={<FeedOutlined />} size=\"3em\" />\n <h5 className=\"mt-4\">{name || suffix}</h5>\n </div>\n );\n }\n}\n"],"names":["type","TFileType","_jsx","Video","_jsxs","Icon","FeedOutlined"],"mappings":";;;;;;;;;;AAKc,SAAU,UAAU,CAAC,KAAmB,EAAA;IAClD,MAAM,EAAE,IAAI,EAAE,MAAM,QAAEA,MAAI,EAAE,GAAG,KAAK;IAEpC,QAAQA,MAAI;QACR,KAAKC,cAAS,CAAC,KAAK;AAChB,YAAA,OAAOC,wBAAK,GAAG,EAAE,KAAK,CAAC,GAAG,GAAI;QAClC,KAAKD,cAAS,CAAC,KAAK;AAChB,YAAA,OAAOC,cAAA,CAACC,aAAK,EAAA,EAAA,GAAK,KAAK,GAAI;AAC/B,QAAA;AACI,YAAA,QACIC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,EAAA,QAAA,EAAA,CAC9BF,cAAA,CAACG,YAAI,EAAA,EAAC,IAAI,EAAEH,cAAA,CAACI,qBAAY,EAAA,EAAA,CAAG,EAAE,IAAI,EAAC,KAAK,EAAA,CAAG,EAC3CJ,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,MAAM,EAAA,QAAA,EAAE,IAAI,IAAI,MAAM,EAAA,CAAM,CAAA,EAAA,CACxC;;AAGtB;;;;"}
|