@hh.ru/magritte-ui-upload 2.1.0 → 3.0.1
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/FileName.js +1 -1
- package/FileView.js +2 -2
- package/FileView.js.map +1 -1
- package/FileViewWithPreview.js +1 -1
- package/MultiUpload.d.ts +1 -1
- package/MultiUpload.js +4 -4
- package/MultiUpload.js.map +1 -1
- package/SingleUpload.d.ts +1 -1
- package/SingleUpload.js +4 -4
- package/SingleUpload.js.map +1 -1
- package/Upload.js +3 -3
- package/Upload.js.map +1 -1
- package/index.css +30 -30
- package/index.js +1 -1
- package/package.json +2 -2
- package/types.d.ts +26 -6
- package/upload-CR54iSr6.js +5 -0
- package/upload-CR54iSr6.js.map +1 -0
- package/utils.d.ts +1 -1
- package/utils.js +2 -2
- package/utils.js.map +1 -1
- package/upload-DAE6N3sX.js +0 -5
- package/upload-DAE6N3sX.js.map +0 -1
package/FileName.js
CHANGED
|
@@ -2,7 +2,7 @@ import './index.css';
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
|
|
5
|
-
var styles = {"file-name-body":"magritte-file-name-
|
|
5
|
+
var styles = {"file-name-body":"magritte-file-name-body___PTTMc_3-0-1","fileNameBody":"magritte-file-name-body___PTTMc_3-0-1","file-name-body_medium":"magritte-file-name-body_medium___sfmmq_3-0-1","fileNameBodyMedium":"magritte-file-name-body_medium___sfmmq_3-0-1","file-name":"magritte-file-name___ZSL2g_3-0-1","fileName":"magritte-file-name___ZSL2g_3-0-1"};
|
|
6
6
|
|
|
7
7
|
const parse = (file) => {
|
|
8
8
|
const name = file.name;
|
package/FileView.js
CHANGED
|
@@ -10,7 +10,7 @@ import { FileName } from './FileName.js';
|
|
|
10
10
|
import { getUploadIcon, bytes2mb } from './utils.js';
|
|
11
11
|
import 'classnames';
|
|
12
12
|
|
|
13
|
-
var styles = {"file-info-body":"magritte-file-info-
|
|
13
|
+
var styles = {"file-info-body":"magritte-file-info-body___HmfXd_3-0-1","fileInfoBody":"magritte-file-info-body___HmfXd_3-0-1","file-info-and-controls":"magritte-file-info-and-controls___61iyY_3-0-1","fileInfoAndControls":"magritte-file-info-and-controls___61iyY_3-0-1","file-info-container":"magritte-file-info-container___WFab8_3-0-1","fileInfoContainer":"magritte-file-info-container___WFab8_3-0-1","file-info":"magritte-file-info___HrqiB_3-0-1","fileInfo":"magritte-file-info___HrqiB_3-0-1","controls":"magritte-controls___WdH7A_3-0-1"};
|
|
14
14
|
|
|
15
15
|
const FileView = ({ uploadType, loadedFile, preview, renderFileInfo, onFileDelete, 'aria-label': ariaLabel, isLast = false, }) => {
|
|
16
16
|
const isLoading = Boolean(loadedFile?.loading);
|
|
@@ -19,7 +19,7 @@ const FileView = ({ uploadType, loadedFile, preview, renderFileInfo, onFileDelet
|
|
|
19
19
|
return (jsxs(Fragment, { children: [jsx(Avatar, { mode: isImageType && !isLoading ? 'image' : 'icon', style: "secondary", image: preview, size: 48, icon: getUploadIcon(uploadType, loadedFile, true), "aria-label": ariaLabel }), jsxs("div", { className: styles.fileInfoBody, children: [jsxs("div", { className: styles.fileInfoAndControls, children: [jsxs("div", { className: styles.fileInfoContainer, children: [jsx(FileName, { file: loadedFile.data }), jsx(VSpacing, { default: 4 }), jsxs("div", { className: styles.fileInfo, children: [isInvalid && jsx(ExclamationTriangleOutlinedSize16, { initial: "negative" }), isLoading && jsx(Loader, { size: 16 }), !isInvalid && !isLoading && jsx(CheckCircleOutlinedSize16, { initial: "positive" }), renderFileInfo({
|
|
20
20
|
...loadedFile,
|
|
21
21
|
fileSizeMB: bytes2mb(loadedFile.data.size),
|
|
22
|
-
})] })] }), jsxs("div", { className: styles.controls, children: [isLoading && jsx(Action, { icon: CrossOutlinedSize24, mode: "secondary", onClick: onFileDelete }), !isLoading && jsx(Action, { icon: TrashOutlinedSize24, mode: "secondary", onClick: onFileDelete })] })] }), !isLast && (jsxs("div", { children: [jsx(VSpacing, { default: 16 }), jsx(Divider, {}), jsx(VSpacing, { default: 16 })] }))] })] }));
|
|
22
|
+
})] })] }), jsxs("div", { className: styles.controls, children: [isLoading && jsx(Action, { icon: CrossOutlinedSize24, mode: "secondary", onClick: onFileDelete }), !isLoading && (jsx(Action, { icon: TrashOutlinedSize24, mode: "secondary", onClick: onFileDelete, "data-qa": "magritte-upload-delete-file-action" }))] })] }), !isLast && (jsxs("div", { children: [jsx(VSpacing, { default: 16 }), jsx(Divider, {}), jsx(VSpacing, { default: 16 })] }))] })] }));
|
|
23
23
|
};
|
|
24
24
|
|
|
25
25
|
export { FileView };
|
package/FileView.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileView.js","sources":["../src/FileView.tsx"],"sourcesContent":["import { ReactElement, MouseEvent } from 'react';\n\nimport { Action } from '@hh.ru/magritte-ui-action';\nimport { Avatar } from '@hh.ru/magritte-ui-avatar';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\nimport {\n CrossOutlinedSize24,\n CheckCircleOutlinedSize16,\n ExclamationTriangleOutlinedSize16,\n TrashOutlinedSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { FileName } from '@hh.ru/magritte-ui-upload/FileName';\nimport { UploadType, LoadedFile, RenderFileInfo } from '@hh.ru/magritte-ui-upload/types';\nimport { getUploadIcon, bytes2mb } from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './file-view.less';\n\nexport interface FileViewProps {\n uploadType: UploadType;\n loadedFile: LoadedFile;\n renderFileInfo: RenderFileInfo;\n onFileDelete: (event: MouseEvent) => void;\n preview: string;\n 'aria-label': string;\n isLast?: boolean;\n}\n\nconst FileView = ({\n uploadType,\n loadedFile,\n preview,\n renderFileInfo,\n onFileDelete,\n 'aria-label': ariaLabel,\n isLast = false,\n}: FileViewProps): ReactElement => {\n const isLoading = Boolean(loadedFile?.loading);\n const isInvalid = Boolean(loadedFile?.error);\n const isImageType = uploadType === 'image';\n return (\n <>\n <Avatar\n mode={isImageType && !isLoading ? 'image' : 'icon'}\n style=\"secondary\"\n image={preview}\n size={48}\n icon={getUploadIcon(uploadType, loadedFile, true)}\n aria-label={ariaLabel}\n />\n <div className={styles.fileInfoBody}>\n <div className={styles.fileInfoAndControls}>\n <div className={styles.fileInfoContainer}>\n <FileName file={loadedFile.data} />\n <VSpacing default={4} />\n <div className={styles.fileInfo}>\n {isInvalid && <ExclamationTriangleOutlinedSize16 initial=\"negative\" />}\n {isLoading && <Loader size={16} />}\n {!isInvalid && !isLoading && <CheckCircleOutlinedSize16 initial=\"positive\" />}\n {renderFileInfo({\n ...loadedFile,\n fileSizeMB: bytes2mb(loadedFile.data.size),\n })}\n </div>\n </div>\n <div className={styles.controls}>\n {isLoading && <Action icon={CrossOutlinedSize24} mode=\"secondary\" onClick={onFileDelete} />}\n {!isLoading && <Action
|
|
1
|
+
{"version":3,"file":"FileView.js","sources":["../src/FileView.tsx"],"sourcesContent":["import { ReactElement, MouseEvent } from 'react';\n\nimport { Action } from '@hh.ru/magritte-ui-action';\nimport { Avatar } from '@hh.ru/magritte-ui-avatar';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\nimport {\n CrossOutlinedSize24,\n CheckCircleOutlinedSize16,\n ExclamationTriangleOutlinedSize16,\n TrashOutlinedSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { FileName } from '@hh.ru/magritte-ui-upload/FileName';\nimport { UploadType, LoadedFile, RenderFileInfo } from '@hh.ru/magritte-ui-upload/types';\nimport { getUploadIcon, bytes2mb } from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './file-view.less';\n\nexport interface FileViewProps {\n uploadType: UploadType;\n loadedFile: LoadedFile;\n renderFileInfo: RenderFileInfo;\n onFileDelete: (event: MouseEvent) => void;\n preview: string;\n 'aria-label': string;\n isLast?: boolean;\n}\n\nconst FileView = ({\n uploadType,\n loadedFile,\n preview,\n renderFileInfo,\n onFileDelete,\n 'aria-label': ariaLabel,\n isLast = false,\n}: FileViewProps): ReactElement => {\n const isLoading = Boolean(loadedFile?.loading);\n const isInvalid = Boolean(loadedFile?.error);\n const isImageType = uploadType === 'image';\n return (\n <>\n <Avatar\n mode={isImageType && !isLoading ? 'image' : 'icon'}\n style=\"secondary\"\n image={preview}\n size={48}\n icon={getUploadIcon(uploadType, loadedFile, true)}\n aria-label={ariaLabel}\n />\n <div className={styles.fileInfoBody}>\n <div className={styles.fileInfoAndControls}>\n <div className={styles.fileInfoContainer}>\n <FileName file={loadedFile.data} />\n <VSpacing default={4} />\n <div className={styles.fileInfo}>\n {isInvalid && <ExclamationTriangleOutlinedSize16 initial=\"negative\" />}\n {isLoading && <Loader size={16} />}\n {!isInvalid && !isLoading && <CheckCircleOutlinedSize16 initial=\"positive\" />}\n {renderFileInfo({\n ...loadedFile,\n fileSizeMB: bytes2mb(loadedFile.data.size),\n })}\n </div>\n </div>\n <div className={styles.controls}>\n {isLoading && <Action icon={CrossOutlinedSize24} mode=\"secondary\" onClick={onFileDelete} />}\n {!isLoading && (\n <Action\n icon={TrashOutlinedSize24}\n mode=\"secondary\"\n onClick={onFileDelete}\n data-qa=\"magritte-upload-delete-file-action\"\n />\n )}\n </div>\n </div>\n {!isLast && (\n <div>\n <VSpacing default={16} />\n <Divider />\n <VSpacing default={16} />\n </div>\n )}\n </div>\n </>\n );\n};\n\nexport { FileView };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;AA6BM,MAAA,QAAQ,GAAG,CAAC,EACd,UAAU,EACV,UAAU,EACV,OAAO,EACP,cAAc,EACd,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,MAAM,GAAG,KAAK,GACF,KAAkB;IAC9B,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAC/C,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AAC7C,IAAA,MAAM,WAAW,GAAG,UAAU,KAAK,OAAO,CAAC;AAC3C,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAC,CAAA,MAAM,EACH,EAAA,IAAI,EAAE,WAAW,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,MAAM,EAClD,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,OAAO,EACd,IAAI,EAAE,EAAE,EACR,IAAI,EAAE,aAAa,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,CAAC,EACrC,YAAA,EAAA,SAAS,EACvB,CAAA,EACFF,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,YAAY,EAC/B,QAAA,EAAA,CAAAA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,EAAA,QAAA,EAAA,CACtCA,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAA,QAAA,EAAA,CACpCE,GAAC,CAAA,QAAQ,EAAC,EAAA,IAAI,EAAE,UAAU,CAAC,IAAI,EAAI,CAAA,EACnCA,GAAC,CAAA,QAAQ,EAAC,EAAA,OAAO,EAAE,CAAC,EAAI,CAAA,EACxBF,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,QAAA,EAAA,CAAA,SAAS,IAAIE,GAAC,CAAA,iCAAiC,EAAC,EAAA,OAAO,EAAC,UAAU,EAAG,CAAA,EACrE,SAAS,IAAIA,GAAC,CAAA,MAAM,EAAC,EAAA,IAAI,EAAE,EAAE,EAAI,CAAA,EACjC,CAAC,SAAS,IAAI,CAAC,SAAS,IAAIA,GAAC,CAAA,yBAAyB,EAAC,EAAA,OAAO,EAAC,UAAU,EAAG,CAAA,EAC5E,cAAc,CAAC;AACZ,gDAAA,GAAG,UAAU;gDACb,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;AAC7C,6CAAA,CAAC,IACA,CACJ,EAAA,CAAA,EACNF,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAA,QAAA,EAAA,CAC1B,SAAS,IAAIE,GAAA,CAAC,MAAM,EAAC,EAAA,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,YAAY,EAAA,CAAI,EAC1F,CAAC,SAAS,KACPA,IAAC,MAAM,EAAA,EACH,IAAI,EAAE,mBAAmB,EACzB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,YAAY,EACb,SAAA,EAAA,oCAAoC,GAC9C,CACL,CAAA,EAAA,CACC,CACJ,EAAA,CAAA,EACL,CAAC,MAAM,KACJF,IACI,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CAAAE,GAAA,CAAC,QAAQ,EAAC,EAAA,OAAO,EAAE,EAAE,GAAI,EACzBA,GAAA,CAAC,OAAO,EAAG,EAAA,CAAA,EACXA,IAAC,QAAQ,EAAA,EAAC,OAAO,EAAE,EAAE,EAAI,CAAA,CAAA,EAAA,CACvB,CACT,CACC,EAAA,CAAA,CAAA,EAAA,CACP,EACL;AACN;;;;"}
|
package/FileViewWithPreview.js
CHANGED
|
@@ -13,7 +13,7 @@ import './FileName.js';
|
|
|
13
13
|
import 'classnames';
|
|
14
14
|
import 'react';
|
|
15
15
|
|
|
16
|
-
var styles = {"item":"magritte-item___vVDG-
|
|
16
|
+
var styles = {"item":"magritte-item___vVDG-_3-0-1"};
|
|
17
17
|
|
|
18
18
|
const FileViewWithPreview = ({ loadedFile, ...otherProps }) => {
|
|
19
19
|
const uploadType = getFileType(loadedFile.data.type);
|
package/MultiUpload.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
2
|
import { UploadProps } from '@hh.ru/magritte-ui-upload/types';
|
|
3
|
-
declare const MultiUpload: ({ files, trls, size,
|
|
3
|
+
declare const MultiUpload: ({ files, trls, size, accept, selectFileButton: _selectFileButton, renderFileInfo, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, "aria-label": ariaLabel, ...dropzoneProps }: Omit<UploadProps, "multiple">) => ReactElement;
|
|
4
4
|
export { MultiUpload };
|
package/MultiUpload.js
CHANGED
|
@@ -8,7 +8,7 @@ import { FileViewWithPreview } from './FileViewWithPreview.js';
|
|
|
8
8
|
import { useDropActions } from './useDropActions.js';
|
|
9
9
|
import { useDropButtons } from './useDropButtons.js';
|
|
10
10
|
import { getAvaliableFileTypes, getUploadIcon, DEFAULT_ACCEPT, RenderFileInfoDefault } from './utils.js';
|
|
11
|
-
import { s as styles } from './upload-
|
|
11
|
+
import { s as styles } from './upload-CR54iSr6.js';
|
|
12
12
|
import './FileView.js';
|
|
13
13
|
import '@hh.ru/magritte-ui-action';
|
|
14
14
|
import '@hh.ru/magritte-ui-avatar';
|
|
@@ -19,7 +19,7 @@ import './FileName.js';
|
|
|
19
19
|
import './useFilePreview.js';
|
|
20
20
|
import 'react';
|
|
21
21
|
|
|
22
|
-
const MultiUpload = ({ files, trls, size,
|
|
22
|
+
const MultiUpload = ({ files, trls, size, accept = DEFAULT_ACCEPT, selectFileButton: _selectFileButton, renderFileInfo = RenderFileInfoDefault, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, 'aria-label': ariaLabel, ...dropzoneProps }) => {
|
|
23
23
|
const uploadType = getAvaliableFileTypes(accept);
|
|
24
24
|
const { onDropAccepted, onDropRejected, onFileDelete } = useDropActions({
|
|
25
25
|
onDropAccepted: onDropAcceptedExternal,
|
|
@@ -31,10 +31,10 @@ const MultiUpload = ({ files, trls, size, multiple = true, accept = DEFAULT_ACCE
|
|
|
31
31
|
accept,
|
|
32
32
|
onDropAccepted,
|
|
33
33
|
onDropRejected,
|
|
34
|
-
multiple,
|
|
34
|
+
multiple: true,
|
|
35
35
|
});
|
|
36
36
|
const { selectFileButton } = useDropButtons({ selectFileButton: _selectFileButton });
|
|
37
|
-
return (jsxs(Fragment, { children: [jsxs("div", { className: classnames(styles.root, styles[`root_${size}`], { [styles.dragActive]: isDragActive }), ...getRootProps(), children: [jsx("input", { ...getInputProps() }), jsx("div", { className: styles.background }), jsxs("div", { className: styles.body, children: [getUploadIcon(uploadType, undefined, false), jsx(VSpacing, { default: 16 }), jsx(Text, { typography: "label-2-regular", children: trls.title }), jsx(VSpacing, { default: 6 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: trls.subTitle }), selectFileButton && (jsxs(Fragment, { children: [jsx(VSpacing, { default: 16 }), selectFileButton] }))] })] }), files.length > 0 && (jsx("div", { className: styles.fileList, children: files.map((loadedFile, indexFile) => {
|
|
37
|
+
return (jsxs(Fragment, { children: [jsxs("div", { className: classnames(styles.root, styles[`root_${size}`], { [styles.dragActive]: isDragActive }), ...getRootProps(), "data-qa": "magritte-multiple-upload", children: [jsx("input", { ...getInputProps(), "data-qa": "magritte-multiple-upload-input" }), jsx("div", { className: styles.background }), jsxs("div", { className: styles.body, children: [getUploadIcon(uploadType, undefined, false), jsx(VSpacing, { default: 16 }), jsx(Text, { typography: "label-2-regular", children: trls.title }), jsx(VSpacing, { default: 6 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: trls.subTitle }), selectFileButton && (jsxs(Fragment, { children: [jsx(VSpacing, { default: 16 }), selectFileButton] }))] })] }), files.length > 0 && (jsx("div", { className: styles.fileList, children: files.map((loadedFile, indexFile) => {
|
|
38
38
|
return (jsx(FileViewWithPreview, { loadedFile: loadedFile, renderFileInfo: renderFileInfo, onFileDelete: (event) => {
|
|
39
39
|
onFileDelete(event, loadedFile, indexFile);
|
|
40
40
|
}, "aria-label": ariaLabel || '', isLast: files.length - 1 === indexFile }, loadedFile.data.name));
|
package/MultiUpload.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiUpload.js","sources":["../src/MultiUpload.tsx"],"sourcesContent":["import { ReactElement } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport classnames from 'classnames';\n\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { Text } from '@hh.ru/magritte-ui-typography';\nimport { FileViewWithPreview } from '@hh.ru/magritte-ui-upload/FileViewWithPreview';\nimport { UploadProps } from '@hh.ru/magritte-ui-upload/types';\nimport { useDropActions } from '@hh.ru/magritte-ui-upload/useDropActions';\nimport { useDropButtons } from '@hh.ru/magritte-ui-upload/useDropButtons';\nimport {\n getUploadIcon,\n getAvaliableFileTypes,\n RenderFileInfoDefault,\n DEFAULT_ACCEPT,\n} from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './upload.less';\n\nconst MultiUpload = ({\n files,\n trls,\n size,\n
|
|
1
|
+
{"version":3,"file":"MultiUpload.js","sources":["../src/MultiUpload.tsx"],"sourcesContent":["import { ReactElement } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport classnames from 'classnames';\n\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { Text } from '@hh.ru/magritte-ui-typography';\nimport { FileViewWithPreview } from '@hh.ru/magritte-ui-upload/FileViewWithPreview';\nimport { UploadProps } from '@hh.ru/magritte-ui-upload/types';\nimport { useDropActions } from '@hh.ru/magritte-ui-upload/useDropActions';\nimport { useDropButtons } from '@hh.ru/magritte-ui-upload/useDropButtons';\nimport {\n getUploadIcon,\n getAvaliableFileTypes,\n RenderFileInfoDefault,\n DEFAULT_ACCEPT,\n} from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './upload.less';\n\nconst MultiUpload = ({\n files,\n trls,\n size,\n accept = DEFAULT_ACCEPT,\n selectFileButton: _selectFileButton,\n renderFileInfo = RenderFileInfoDefault,\n onDropAccepted: onDropAcceptedExternal,\n onDropRejected: onDropRejectedExternal,\n onFileDelete: onFileDeleteExternal,\n 'aria-label': ariaLabel,\n ...dropzoneProps\n}: Omit<UploadProps, 'multiple'>): ReactElement => {\n const uploadType = getAvaliableFileTypes(accept);\n const { onDropAccepted, onDropRejected, onFileDelete } = useDropActions({\n onDropAccepted: onDropAcceptedExternal,\n onDropRejected: onDropRejectedExternal,\n onFileDelete: onFileDeleteExternal,\n });\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n ...dropzoneProps,\n accept,\n onDropAccepted,\n onDropRejected,\n multiple: true,\n });\n const { selectFileButton } = useDropButtons({ selectFileButton: _selectFileButton });\n return (\n <>\n <div\n className={classnames(styles.root, styles[`root_${size}`], { [styles.dragActive]: isDragActive })}\n {...getRootProps()}\n data-qa=\"magritte-multiple-upload\"\n >\n <input {...getInputProps()} data-qa=\"magritte-multiple-upload-input\" />\n <div className={styles.background} />\n <div className={styles.body}>\n {getUploadIcon(uploadType, undefined, false)}\n <VSpacing default={16} />\n <Text typography=\"label-2-regular\">{trls.title}</Text>\n <VSpacing default={6} />\n <Text typography=\"label-4-regular\" style=\"secondary\">\n {trls.subTitle}\n </Text>\n {selectFileButton && (\n <>\n <VSpacing default={16} />\n {selectFileButton}\n </>\n )}\n </div>\n </div>\n {files.length > 0 && (\n <div className={styles.fileList}>\n {files.map((loadedFile, indexFile) => {\n return (\n <FileViewWithPreview\n key={loadedFile.data.name}\n loadedFile={loadedFile}\n renderFileInfo={renderFileInfo}\n onFileDelete={(event) => {\n onFileDelete(event, loadedFile, indexFile);\n }}\n aria-label={ariaLabel || ''}\n isLast={files.length - 1 === indexFile}\n />\n );\n })}\n </div>\n )}\n </>\n );\n};\n\nexport { MultiUpload };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
|
package/SingleUpload.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
2
|
import { UploadProps } from '@hh.ru/magritte-ui-upload/types';
|
|
3
|
-
declare const SingleUpload: ({ files, trls, size,
|
|
3
|
+
declare const SingleUpload: ({ files, trls, size, accept, selectFileButton: _selectFileButton, deleteFileButton: _deleteFileButton, replaceImageButton: _replaceImageButton, renderFileInfo, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, "aria-label": ariaLabel, ...dropzoneProps }: UploadProps) => ReactElement;
|
|
4
4
|
export { SingleUpload };
|
package/SingleUpload.js
CHANGED
|
@@ -14,11 +14,11 @@ import { useDropActions } from './useDropActions.js';
|
|
|
14
14
|
import { useDropButtons } from './useDropButtons.js';
|
|
15
15
|
import { useFilePreview } from './useFilePreview.js';
|
|
16
16
|
import { getAvaliableFileTypes, getUploadIcon, bytes2mb, DEFAULT_ACCEPT, RenderFileInfoDefault } from './utils.js';
|
|
17
|
-
import { s as styles } from './upload-
|
|
17
|
+
import { s as styles } from './upload-CR54iSr6.js';
|
|
18
18
|
import '@hh.ru/magritte-ui-action';
|
|
19
19
|
import '@hh.ru/magritte-ui-divider';
|
|
20
20
|
|
|
21
|
-
const SingleUpload = ({ files, trls, size = 'medium',
|
|
21
|
+
const SingleUpload = ({ files, trls, size = 'medium', accept = DEFAULT_ACCEPT, selectFileButton: _selectFileButton, deleteFileButton: _deleteFileButton, replaceImageButton: _replaceImageButton, renderFileInfo = RenderFileInfoDefault, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, 'aria-label': ariaLabel, ...dropzoneProps }) => {
|
|
22
22
|
const bodyUploadRef = useRef(null);
|
|
23
23
|
const uploadType = getAvaliableFileTypes(accept);
|
|
24
24
|
const loadedFile = files.length > 0 ? files[0] : undefined;
|
|
@@ -52,7 +52,7 @@ const SingleUpload = ({ files, trls, size = 'medium', multiple = false, accept =
|
|
|
52
52
|
accept,
|
|
53
53
|
onDropAccepted,
|
|
54
54
|
onDropRejected,
|
|
55
|
-
multiple,
|
|
55
|
+
multiple: false,
|
|
56
56
|
});
|
|
57
57
|
const { selectFileButton, deleteFileButton, replaceImageButton } = useDropButtons({
|
|
58
58
|
selectFileButton: _selectFileButton,
|
|
@@ -65,7 +65,7 @@ const SingleUpload = ({ files, trls, size = 'medium', multiple = false, accept =
|
|
|
65
65
|
const backgroundStyles = !isSizeSmall
|
|
66
66
|
? { backgroundImage: preview !== 'none' ? `url('${preview}')` : preview }
|
|
67
67
|
: {};
|
|
68
|
-
return (jsxs("div", { className: classnames(styles.root, styles[`root_${size}`], { [styles.dragActive]: isDragActive }, { [styles.loading]: isLoading }, { [styles.load]: isLoad }, { [styles.invalid]: isInvalid }), ...getRootProps(), children: [jsx("input", { ...getInputProps() }), jsx("div", { className: styles.background, style: backgroundStyles }), jsxs("div", { className: styles.body, ref: bodyUploadRef, children: [isSizeSmall && (jsxs(Fragment, { children: [loadedFile && (jsx(FileView, { uploadType: uploadType, loadedFile: loadedFile, renderFileInfo: renderFileInfo, onFileDelete: (event) => {
|
|
68
|
+
return (jsxs("div", { className: classnames(styles.root, styles[`root_${size}`], { [styles.dragActive]: isDragActive }, { [styles.loading]: isLoading }, { [styles.load]: isLoad }, { [styles.invalid]: isInvalid }), ...getRootProps(), "data-qa": "magritte-single-upload", children: [jsx("input", { ...getInputProps(), "data-qa": "magritte-single-upload-input" }), jsx("div", { className: styles.background, style: backgroundStyles, "data-qa": "magritte-single-upload-background" }), jsxs("div", { className: styles.body, ref: bodyUploadRef, children: [isSizeSmall && (jsxs(Fragment, { children: [loadedFile && (jsx(FileView, { uploadType: uploadType, loadedFile: loadedFile, renderFileInfo: renderFileInfo, onFileDelete: (event) => {
|
|
69
69
|
onFileDelete(event, loadedFile, 0);
|
|
70
70
|
}, preview: preview, "aria-label": ariaLabel || '', isLast: true })), !loadedFile && (jsxs(Fragment, { children: [jsx(Avatar, { mode: "icon", style: "secondary", size: 48, icon: getUploadIcon(uploadType, loadedFile, true), "aria-label": ariaLabel || '' }), jsxs("div", { children: [jsx(Text, { typography: "label-2-regular", children: trls.title }), jsx(VSpacing, { default: 4 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: trls.subTitle })] }), selectFileButton && jsx("div", { className: styles.smallControls, children: selectFileButton })] }))] })), !isSizeSmall && (jsxs(Fragment, { children: [isLoading && (jsxs("div", { className: styles.loader, children: [jsx(Loader, { size: 64 }), jsx("div", { className: styles.cancel, children: jsx(CrossOutlinedSize24, { initial: "accent", onClick: (event) => {
|
|
71
71
|
onFileDelete(event, loadedFile, 0);
|
package/SingleUpload.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SingleUpload.js","sources":["../src/SingleUpload.tsx"],"sourcesContent":["import { ReactElement, useRef, useEffect, MouseEvent } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport classnames from 'classnames';\n\nimport { Avatar } from '@hh.ru/magritte-ui-avatar';\nimport { CrossOutlinedSize24, ExclamationTriangleOutlinedSize32 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { Text } from '@hh.ru/magritte-ui-typography';\nimport { FileName } from '@hh.ru/magritte-ui-upload/FileName';\nimport { FileView } from '@hh.ru/magritte-ui-upload/FileView';\nimport { UploadProps } from '@hh.ru/magritte-ui-upload/types';\nimport { useDropActions } from '@hh.ru/magritte-ui-upload/useDropActions';\nimport { useDropButtons } from '@hh.ru/magritte-ui-upload/useDropButtons';\nimport { useFilePreview } from '@hh.ru/magritte-ui-upload/useFilePreview';\nimport {\n getUploadIcon,\n bytes2mb,\n getAvaliableFileTypes,\n RenderFileInfoDefault,\n DEFAULT_ACCEPT,\n} from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './upload.less';\n\nconst SingleUpload = ({\n files,\n trls,\n size = 'medium',\n multiple = false,\n accept = DEFAULT_ACCEPT,\n selectFileButton: _selectFileButton,\n deleteFileButton: _deleteFileButton,\n replaceImageButton: _replaceImageButton,\n renderFileInfo = RenderFileInfoDefault,\n onDropAccepted: onDropAcceptedExternal,\n onDropRejected: onDropRejectedExternal,\n onFileDelete: onFileDeleteExternal,\n 'aria-label': ariaLabel,\n ...dropzoneProps\n}: UploadProps): ReactElement => {\n const bodyUploadRef = useRef<HTMLDivElement>(null);\n const uploadType = getAvaliableFileTypes(accept);\n const loadedFile = files.length > 0 ? files[0] : undefined;\n const isLoad = Boolean(loadedFile);\n const isLoading = Boolean(loadedFile?.loading);\n const isInvalid = Boolean(loadedFile?.error);\n const isSizeSmall = size === 'small';\n const isImageType = uploadType === 'image';\n const preview = useFilePreview({ loadedFile, isImageType });\n\n useEffect(() => {\n if (!bodyUploadRef.current) {\n return void 0;\n }\n if (isSizeSmall) {\n return void 0;\n }\n // фиксируем ширину, так как после выбора контент поменяется\n const currentElement = bodyUploadRef.current;\n currentElement.style.minHeight = `${bodyUploadRef.current.offsetHeight}px`;\n return () => {\n currentElement.style.minHeight = 'auto';\n };\n }, [isSizeSmall]);\n\n const { onDropAccepted, onDropRejected, onFileDelete } = useDropActions({\n onDropAccepted: onDropAcceptedExternal,\n onDropRejected: onDropRejectedExternal,\n onFileDelete: onFileDeleteExternal,\n });\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n ...dropzoneProps,\n accept,\n onDropAccepted,\n onDropRejected,\n multiple,\n });\n\n const { selectFileButton, deleteFileButton, replaceImageButton } = useDropButtons({\n selectFileButton: _selectFileButton,\n deleteFileButton: _deleteFileButton,\n replaceImageButton: _replaceImageButton,\n onFileDelete: (event: MouseEvent) => {\n onFileDelete(event, loadedFile, 0);\n },\n });\n\n const backgroundStyles = !isSizeSmall\n ? { backgroundImage: preview !== 'none' ? `url('${preview}')` : preview }\n : {};\n return (\n <div\n className={classnames(\n styles.root,\n styles[`root_${size}`],\n { [styles.dragActive]: isDragActive },\n { [styles.loading]: isLoading },\n { [styles.load]: isLoad },\n { [styles.invalid]: isInvalid }\n )}\n {...getRootProps()}\n >\n <input {...getInputProps()} />\n <div className={styles.background} style={backgroundStyles} />\n <div className={styles.body} ref={bodyUploadRef}>\n {isSizeSmall && (\n <>\n {loadedFile && (\n <FileView\n uploadType={uploadType}\n loadedFile={loadedFile}\n renderFileInfo={renderFileInfo}\n onFileDelete={(event) => {\n onFileDelete(event, loadedFile, 0);\n }}\n preview={preview}\n aria-label={ariaLabel || ''}\n isLast\n />\n )}\n {!loadedFile && (\n <>\n <Avatar\n mode=\"icon\"\n style=\"secondary\"\n size={48}\n icon={getUploadIcon(uploadType, loadedFile, true)}\n aria-label={ariaLabel || ''}\n />\n <div>\n <Text typography=\"label-2-regular\">{trls.title}</Text>\n <VSpacing default={4} />\n <Text typography=\"label-4-regular\" style=\"secondary\">\n {trls.subTitle}\n </Text>\n </div>\n {selectFileButton && <div className={styles.smallControls}>{selectFileButton}</div>}\n </>\n )}\n </>\n )}\n {!isSizeSmall && (\n <>\n {isLoading && (\n <div className={styles.loader}>\n <Loader size={64} />\n <div className={styles.cancel}>\n <CrossOutlinedSize24\n initial=\"accent\"\n onClick={(event) => {\n onFileDelete(event, loadedFile, 0);\n }}\n />\n </div>\n </div>\n )}\n {isInvalid ? (\n <ExclamationTriangleOutlinedSize32 initial=\"negative\" />\n ) : (\n getUploadIcon(uploadType, loadedFile, false)\n )}\n <VSpacing default={16} />\n {loadedFile && (\n <>\n <FileName file={loadedFile.data} isSizeMedium />\n <VSpacing default={6} />\n <Text typography=\"label-4-regular\" style=\"secondary\">\n {renderFileInfo({\n ...loadedFile,\n fileSizeMB: bytes2mb(loadedFile.data.size),\n })}\n </Text>\n {!loadedFile.loading && !isImageType && deleteFileButton && (\n <>\n <VSpacing default={16} />\n {deleteFileButton}\n </>\n )}\n {!loadedFile.loading && isImageType && (replaceImageButton || deleteFileButton) && (\n <div className={styles.imageControls}>\n {replaceImageButton}\n {deleteFileButton}\n </div>\n )}\n </>\n )}\n {!loadedFile && (\n <>\n <Text typography=\"label-2-regular\">{trls.title}</Text>\n <VSpacing default={6} />\n <Text typography=\"label-4-regular\" style=\"secondary\">\n {trls.subTitle}\n </Text>\n {selectFileButton && (\n <>\n <VSpacing default={16} />\n {selectFileButton}\n </>\n )}\n </>\n )}\n </>\n )}\n </div>\n </div>\n );\n};\n\nexport { SingleUpload };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SingleUpload.js","sources":["../src/SingleUpload.tsx"],"sourcesContent":["import { ReactElement, useRef, useEffect, MouseEvent } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport classnames from 'classnames';\n\nimport { Avatar } from '@hh.ru/magritte-ui-avatar';\nimport { CrossOutlinedSize24, ExclamationTriangleOutlinedSize32 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { Text } from '@hh.ru/magritte-ui-typography';\nimport { FileName } from '@hh.ru/magritte-ui-upload/FileName';\nimport { FileView } from '@hh.ru/magritte-ui-upload/FileView';\nimport { UploadProps } from '@hh.ru/magritte-ui-upload/types';\nimport { useDropActions } from '@hh.ru/magritte-ui-upload/useDropActions';\nimport { useDropButtons } from '@hh.ru/magritte-ui-upload/useDropButtons';\nimport { useFilePreview } from '@hh.ru/magritte-ui-upload/useFilePreview';\nimport {\n getUploadIcon,\n bytes2mb,\n getAvaliableFileTypes,\n RenderFileInfoDefault,\n DEFAULT_ACCEPT,\n} from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './upload.less';\n\nconst SingleUpload = ({\n files,\n trls,\n size = 'medium',\n accept = DEFAULT_ACCEPT,\n selectFileButton: _selectFileButton,\n deleteFileButton: _deleteFileButton,\n replaceImageButton: _replaceImageButton,\n renderFileInfo = RenderFileInfoDefault,\n onDropAccepted: onDropAcceptedExternal,\n onDropRejected: onDropRejectedExternal,\n onFileDelete: onFileDeleteExternal,\n 'aria-label': ariaLabel,\n ...dropzoneProps\n}: UploadProps): ReactElement => {\n const bodyUploadRef = useRef<HTMLDivElement>(null);\n const uploadType = getAvaliableFileTypes(accept);\n const loadedFile = files.length > 0 ? files[0] : undefined;\n const isLoad = Boolean(loadedFile);\n const isLoading = Boolean(loadedFile?.loading);\n const isInvalid = Boolean(loadedFile?.error);\n const isSizeSmall = size === 'small';\n const isImageType = uploadType === 'image';\n const preview = useFilePreview({ loadedFile, isImageType });\n\n useEffect(() => {\n if (!bodyUploadRef.current) {\n return void 0;\n }\n if (isSizeSmall) {\n return void 0;\n }\n // фиксируем ширину, так как после выбора контент поменяется\n const currentElement = bodyUploadRef.current;\n currentElement.style.minHeight = `${bodyUploadRef.current.offsetHeight}px`;\n return () => {\n currentElement.style.minHeight = 'auto';\n };\n }, [isSizeSmall]);\n\n const { onDropAccepted, onDropRejected, onFileDelete } = useDropActions({\n onDropAccepted: onDropAcceptedExternal,\n onDropRejected: onDropRejectedExternal,\n onFileDelete: onFileDeleteExternal,\n });\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n ...dropzoneProps,\n accept,\n onDropAccepted,\n onDropRejected,\n multiple: false,\n });\n\n const { selectFileButton, deleteFileButton, replaceImageButton } = useDropButtons({\n selectFileButton: _selectFileButton,\n deleteFileButton: _deleteFileButton,\n replaceImageButton: _replaceImageButton,\n onFileDelete: (event: MouseEvent) => {\n onFileDelete(event, loadedFile, 0);\n },\n });\n\n const backgroundStyles = !isSizeSmall\n ? { backgroundImage: preview !== 'none' ? `url('${preview}')` : preview }\n : {};\n return (\n <div\n className={classnames(\n styles.root,\n styles[`root_${size}`],\n { [styles.dragActive]: isDragActive },\n { [styles.loading]: isLoading },\n { [styles.load]: isLoad },\n { [styles.invalid]: isInvalid }\n )}\n {...getRootProps()}\n data-qa=\"magritte-single-upload\"\n >\n <input {...getInputProps()} data-qa=\"magritte-single-upload-input\" />\n <div className={styles.background} style={backgroundStyles} data-qa=\"magritte-single-upload-background\" />\n <div className={styles.body} ref={bodyUploadRef}>\n {isSizeSmall && (\n <>\n {loadedFile && (\n <FileView\n uploadType={uploadType}\n loadedFile={loadedFile}\n renderFileInfo={renderFileInfo}\n onFileDelete={(event) => {\n onFileDelete(event, loadedFile, 0);\n }}\n preview={preview}\n aria-label={ariaLabel || ''}\n isLast\n />\n )}\n {!loadedFile && (\n <>\n <Avatar\n mode=\"icon\"\n style=\"secondary\"\n size={48}\n icon={getUploadIcon(uploadType, loadedFile, true)}\n aria-label={ariaLabel || ''}\n />\n <div>\n <Text typography=\"label-2-regular\">{trls.title}</Text>\n <VSpacing default={4} />\n <Text typography=\"label-4-regular\" style=\"secondary\">\n {trls.subTitle}\n </Text>\n </div>\n {selectFileButton && <div className={styles.smallControls}>{selectFileButton}</div>}\n </>\n )}\n </>\n )}\n {!isSizeSmall && (\n <>\n {isLoading && (\n <div className={styles.loader}>\n <Loader size={64} />\n <div className={styles.cancel}>\n <CrossOutlinedSize24\n initial=\"accent\"\n onClick={(event) => {\n onFileDelete(event, loadedFile, 0);\n }}\n />\n </div>\n </div>\n )}\n {isInvalid ? (\n <ExclamationTriangleOutlinedSize32 initial=\"negative\" />\n ) : (\n getUploadIcon(uploadType, loadedFile, false)\n )}\n <VSpacing default={16} />\n {loadedFile && (\n <>\n <FileName file={loadedFile.data} isSizeMedium />\n <VSpacing default={6} />\n <Text typography=\"label-4-regular\" style=\"secondary\">\n {renderFileInfo({\n ...loadedFile,\n fileSizeMB: bytes2mb(loadedFile.data.size),\n })}\n </Text>\n {!loadedFile.loading && !isImageType && deleteFileButton && (\n <>\n <VSpacing default={16} />\n {deleteFileButton}\n </>\n )}\n {!loadedFile.loading && isImageType && (replaceImageButton || deleteFileButton) && (\n <div className={styles.imageControls}>\n {replaceImageButton}\n {deleteFileButton}\n </div>\n )}\n </>\n )}\n {!loadedFile && (\n <>\n <Text typography=\"label-2-regular\">{trls.title}</Text>\n <VSpacing default={6} />\n <Text typography=\"label-4-regular\" style=\"secondary\">\n {trls.subTitle}\n </Text>\n {selectFileButton && (\n <>\n <VSpacing default={16} />\n {selectFileButton}\n </>\n )}\n </>\n )}\n </>\n )}\n </div>\n </div>\n );\n};\n\nexport { SingleUpload };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
|
package/Upload.js
CHANGED
|
@@ -19,13 +19,13 @@ import './useFilePreview.js';
|
|
|
19
19
|
import 'react';
|
|
20
20
|
import './useDropActions.js';
|
|
21
21
|
import './useDropButtons.js';
|
|
22
|
-
import './upload-
|
|
22
|
+
import './upload-CR54iSr6.js';
|
|
23
23
|
|
|
24
24
|
const Upload = ({ multiple, ...uploadProps }) => {
|
|
25
25
|
if (multiple) {
|
|
26
|
-
return jsx(MultiUpload, {
|
|
26
|
+
return jsx(MultiUpload, { ...uploadProps });
|
|
27
27
|
}
|
|
28
|
-
return jsx(SingleUpload, {
|
|
28
|
+
return jsx(SingleUpload, { ...uploadProps });
|
|
29
29
|
};
|
|
30
30
|
|
|
31
31
|
export { Upload };
|
package/Upload.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Upload.js","sources":["../src/Upload.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { MultiUpload } from '@hh.ru/magritte-ui-upload/MultiUpload';\nimport { SingleUpload } from '@hh.ru/magritte-ui-upload/SingleUpload';\nimport { UploadProps } from '@hh.ru/magritte-ui-upload/types';\n\nconst Upload = ({ multiple, ...uploadProps }: UploadProps): ReactElement => {\n if (multiple) {\n return <MultiUpload
|
|
1
|
+
{"version":3,"file":"Upload.js","sources":["../src/Upload.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { MultiUpload } from '@hh.ru/magritte-ui-upload/MultiUpload';\nimport { SingleUpload } from '@hh.ru/magritte-ui-upload/SingleUpload';\nimport { UploadProps } from '@hh.ru/magritte-ui-upload/types';\n\nconst Upload = ({ multiple, ...uploadProps }: UploadProps): ReactElement => {\n if (multiple) {\n return <MultiUpload {...uploadProps} />;\n }\n return <SingleUpload {...uploadProps} />;\n};\n\nexport { Upload };\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAMM,MAAA,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAe,KAAkB;IACvE,IAAI,QAAQ,EAAE;AACV,QAAA,OAAOA,GAAC,CAAA,WAAW,EAAK,EAAA,GAAA,WAAW,GAAI,CAAC;KAC3C;AACD,IAAA,OAAOA,GAAC,CAAA,YAAY,EAAK,EAAA,GAAA,WAAW,GAAI,CAAC;AAC7C;;;;"}
|
package/index.css
CHANGED
|
@@ -530,7 +530,7 @@
|
|
|
530
530
|
--magritte-typography-_custom-5-italic-text-transform-v20-0-1:none;
|
|
531
531
|
--magritte-typography-_custom-5-italic-text-decoration-v20-0-1:none;
|
|
532
532
|
}
|
|
533
|
-
.magritte-file-name-
|
|
533
|
+
.magritte-file-name-body___PTTMc_3-0-1{
|
|
534
534
|
display:flex;
|
|
535
535
|
width:100%;
|
|
536
536
|
overflow:hidden;
|
|
@@ -543,10 +543,10 @@
|
|
|
543
543
|
text-transform:var(--magritte-typography-label-2-regular-text-transform-v20-0-1);
|
|
544
544
|
text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v20-0-1);
|
|
545
545
|
}
|
|
546
|
-
.magritte-file-name-
|
|
546
|
+
.magritte-file-name-body_medium___sfmmq_3-0-1{
|
|
547
547
|
justify-content:center;
|
|
548
548
|
}
|
|
549
|
-
.magritte-file-
|
|
549
|
+
.magritte-file-name___ZSL2g_3-0-1{
|
|
550
550
|
overflow:hidden;
|
|
551
551
|
text-overflow:ellipsis;
|
|
552
552
|
}
|
|
@@ -1085,18 +1085,18 @@
|
|
|
1085
1085
|
--magritte-typography-_custom-5-italic-text-transform-v20-0-1:none;
|
|
1086
1086
|
--magritte-typography-_custom-5-italic-text-decoration-v20-0-1:none;
|
|
1087
1087
|
}
|
|
1088
|
-
.magritte-file-info-
|
|
1088
|
+
.magritte-file-info-body___HmfXd_3-0-1{
|
|
1089
1089
|
flex-grow:1;
|
|
1090
1090
|
}
|
|
1091
|
-
.magritte-file-info-and-
|
|
1091
|
+
.magritte-file-info-and-controls___61iyY_3-0-1{
|
|
1092
1092
|
display:flex;
|
|
1093
1093
|
gap:var(--magritte-static-space-400-v20-0-1);
|
|
1094
1094
|
}
|
|
1095
|
-
.magritte-file-info-
|
|
1095
|
+
.magritte-file-info-container___WFab8_3-0-1{
|
|
1096
1096
|
flex-grow:1;
|
|
1097
1097
|
width:50px;
|
|
1098
1098
|
}
|
|
1099
|
-
.magritte-file-
|
|
1099
|
+
.magritte-file-info___HrqiB_3-0-1{
|
|
1100
1100
|
display:flex;
|
|
1101
1101
|
gap:var(--magritte-static-space-100-v20-0-1);
|
|
1102
1102
|
font-family:var(--magritte-typography-label-4-regular-font-family-v20-0-1);
|
|
@@ -1108,7 +1108,7 @@
|
|
|
1108
1108
|
text-transform:var(--magritte-typography-label-4-regular-text-transform-v20-0-1);
|
|
1109
1109
|
text-decoration:var(--magritte-typography-label-4-regular-text-decoration-v20-0-1);
|
|
1110
1110
|
}
|
|
1111
|
-
.magritte-
|
|
1111
|
+
.magritte-controls___WdH7A_3-0-1{
|
|
1112
1112
|
display:flex;
|
|
1113
1113
|
align-items:center;
|
|
1114
1114
|
margin-left:auto;
|
|
@@ -1648,7 +1648,7 @@
|
|
|
1648
1648
|
--magritte-typography-_custom-5-italic-text-transform-v20-0-1:none;
|
|
1649
1649
|
--magritte-typography-_custom-5-italic-text-decoration-v20-0-1:none;
|
|
1650
1650
|
}
|
|
1651
|
-
.magritte-item___vVDG-
|
|
1651
|
+
.magritte-item___vVDG-_3-0-1{
|
|
1652
1652
|
display:flex;
|
|
1653
1653
|
width:100%;
|
|
1654
1654
|
gap:var(--magritte-static-space-400-v20-0-1);
|
|
@@ -2205,57 +2205,57 @@
|
|
|
2205
2205
|
--magritte-typography-_custom-5-italic-text-transform-v20-0-1:none;
|
|
2206
2206
|
--magritte-typography-_custom-5-italic-text-decoration-v20-0-1:none;
|
|
2207
2207
|
}
|
|
2208
|
-
.magritte-
|
|
2208
|
+
.magritte-root___FV1tC_3-0-1{
|
|
2209
2209
|
position:relative;
|
|
2210
2210
|
display:flex;
|
|
2211
2211
|
overflow:hidden;
|
|
2212
2212
|
border-radius:var(--magritte-static-border-radius-600-v20-0-1);
|
|
2213
2213
|
background-color:var(--magritte-color-background-primary-v20-0-1);
|
|
2214
2214
|
}
|
|
2215
|
-
.magritte-
|
|
2215
|
+
.magritte-root___FV1tC_3-0-1:hover{
|
|
2216
2216
|
cursor:pointer;
|
|
2217
2217
|
}
|
|
2218
|
-
.magritte-
|
|
2218
|
+
.magritte-root___FV1tC_3-0-1:hover .magritte-background___RfZ0U_3-0-1{
|
|
2219
2219
|
border-color:var(--magritte-color-stroke-accent-v20-0-1);
|
|
2220
2220
|
}
|
|
2221
|
-
.magritte-
|
|
2221
|
+
.magritte-root___FV1tC_3-0-1.magritte-drag-active___dihBL_3-0-1 .magritte-background___RfZ0U_3-0-1{
|
|
2222
2222
|
border-color:var(--magritte-color-stroke-accent-v20-0-1);
|
|
2223
2223
|
}
|
|
2224
|
-
.magritte-
|
|
2224
|
+
.magritte-root___FV1tC_3-0-1.focus-visible{
|
|
2225
2225
|
outline:var(--magritte-color-stroke-state-focused-accessible-v20-0-1) solid 4px;
|
|
2226
2226
|
}
|
|
2227
|
-
.magritte-
|
|
2227
|
+
.magritte-root___FV1tC_3-0-1.focus-visible .magritte-background___RfZ0U_3-0-1{
|
|
2228
2228
|
border-color:var(--magritte-color-stroke-accent-v20-0-1);
|
|
2229
2229
|
}
|
|
2230
|
-
.magritte-
|
|
2231
|
-
.magritte-
|
|
2230
|
+
.magritte-root___FV1tC_3-0-1.magritte-load___MghDA_3-0-1 .magritte-background___RfZ0U_3-0-1,
|
|
2231
|
+
.magritte-root___FV1tC_3-0-1.magritte-loading___9E3p-_3-0-1 .magritte-background___RfZ0U_3-0-1{
|
|
2232
2232
|
border-style:solid;
|
|
2233
2233
|
border-width:7px;
|
|
2234
2234
|
}
|
|
2235
|
-
.magritte-
|
|
2235
|
+
.magritte-root___FV1tC_3-0-1.magritte-invalid___Rt10-_3-0-1.focus-visible{
|
|
2236
2236
|
outline:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v20-0-1) solid 4px;
|
|
2237
2237
|
}
|
|
2238
|
-
.magritte-
|
|
2238
|
+
.magritte-root___FV1tC_3-0-1.magritte-invalid___Rt10-_3-0-1 .magritte-background___RfZ0U_3-0-1{
|
|
2239
2239
|
border-color:var(--magritte-color-stroke-neutral-v20-0-1);
|
|
2240
2240
|
}
|
|
2241
|
-
.magritte-
|
|
2241
|
+
.magritte-root_medium___67WJa_3-0-1{
|
|
2242
2242
|
justify-content:center;
|
|
2243
2243
|
padding:var(--magritte-static-space-600-v20-0-1);
|
|
2244
2244
|
}
|
|
2245
|
-
.magritte-
|
|
2245
|
+
.magritte-root_medium___67WJa_3-0-1 .magritte-body___O7ROl_3-0-1{
|
|
2246
2246
|
flex-direction:column;
|
|
2247
2247
|
align-items:center;
|
|
2248
2248
|
justify-content:center;
|
|
2249
2249
|
}
|
|
2250
|
-
.magritte-
|
|
2250
|
+
.magritte-root_small___dkUYq_3-0-1{
|
|
2251
2251
|
padding-top:var(--magritte-static-space-400-v20-0-1);
|
|
2252
2252
|
padding-bottom:var(--magritte-static-space-400-v20-0-1);
|
|
2253
2253
|
padding-left:var(--magritte-static-space-400-v20-0-1);
|
|
2254
2254
|
}
|
|
2255
|
-
.magritte-
|
|
2255
|
+
.magritte-root_small___dkUYq_3-0-1 .magritte-body___O7ROl_3-0-1{
|
|
2256
2256
|
gap:var(--magritte-static-space-400-v20-0-1);
|
|
2257
2257
|
}
|
|
2258
|
-
.magritte-
|
|
2258
|
+
.magritte-background___RfZ0U_3-0-1{
|
|
2259
2259
|
position:absolute;
|
|
2260
2260
|
border-width:8px;
|
|
2261
2261
|
border-style:dashed;
|
|
@@ -2268,15 +2268,15 @@
|
|
|
2268
2268
|
background-position:center;
|
|
2269
2269
|
background-size:100%;
|
|
2270
2270
|
}
|
|
2271
|
-
.magritte-
|
|
2271
|
+
.magritte-body___O7ROl_3-0-1{
|
|
2272
2272
|
display:flex;
|
|
2273
2273
|
width:100%;
|
|
2274
2274
|
}
|
|
2275
|
-
.magritte-
|
|
2275
|
+
.magritte-loader___XYpWg_3-0-1{
|
|
2276
2276
|
position:relative;
|
|
2277
2277
|
display:flex;
|
|
2278
2278
|
}
|
|
2279
|
-
.magritte-cancel___tQ-
|
|
2279
|
+
.magritte-cancel___tQ-yX_3-0-1{
|
|
2280
2280
|
position:absolute;
|
|
2281
2281
|
top:0;
|
|
2282
2282
|
left:0;
|
|
@@ -2286,20 +2286,20 @@
|
|
|
2286
2286
|
align-items:center;
|
|
2287
2287
|
justify-content:center;
|
|
2288
2288
|
}
|
|
2289
|
-
.magritte-image-
|
|
2289
|
+
.magritte-image-controls___vLf94_3-0-1{
|
|
2290
2290
|
display:flex;
|
|
2291
2291
|
position:absolute;
|
|
2292
2292
|
right:var(--magritte-static-space-300-v20-0-1);
|
|
2293
2293
|
bottom:var(--magritte-static-space-300-v20-0-1);
|
|
2294
2294
|
gap:var(--magritte-static-space-300-v20-0-1);
|
|
2295
2295
|
}
|
|
2296
|
-
.magritte-small-
|
|
2296
|
+
.magritte-small-controls___Qn9TP_3-0-1{
|
|
2297
2297
|
display:flex;
|
|
2298
2298
|
align-items:center;
|
|
2299
2299
|
margin-left:auto;
|
|
2300
2300
|
margin-right:var(--magritte-static-space-500-v20-0-1);
|
|
2301
2301
|
}
|
|
2302
|
-
.magritte-file-
|
|
2302
|
+
.magritte-file-list___L9uHt_3-0-1{
|
|
2303
2303
|
margin-top:var(--magritte-static-space-300-v20-0-1);
|
|
2304
2304
|
box-shadow:inset 0 0 0 1px var(--magritte-color-stroke-neutral-v20-0-1);
|
|
2305
2305
|
border-radius:var(--magritte-static-border-radius-600-v20-0-1);
|
package/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-upload",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -37,5 +37,5 @@
|
|
|
37
37
|
"@hh.ru/magritte-ui-typography": "3.0.22",
|
|
38
38
|
"react-dropzone": "14.3.5"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "6791e06baab51c0635259c4f3733dac9a14cd99e"
|
|
41
41
|
}
|
package/types.d.ts
CHANGED
|
@@ -10,7 +10,6 @@ export interface LoadedFile {
|
|
|
10
10
|
}
|
|
11
11
|
export type ButtonElement = ReactElement<ComponentProps<typeof Button>>;
|
|
12
12
|
export type UploadType = 'application' | 'image' | 'video' | 'mixed';
|
|
13
|
-
export type UploadSize = 'medium' | 'small';
|
|
14
13
|
export type LoadedFileWithFileSize = LoadedFile & {
|
|
15
14
|
fileSizeMB: string;
|
|
16
15
|
};
|
|
@@ -25,18 +24,39 @@ export interface OnFileDelete {
|
|
|
25
24
|
(event: MouseEvent, loadedFile: LoadedFile | undefined, indexFile: number): void;
|
|
26
25
|
}
|
|
27
26
|
type DropzoneOptionsHepler = Omit<DropzoneOptions, 'onDropAccepted' | 'onDropRejected'>;
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
interface MediumUploadProps {
|
|
28
|
+
/** Размер Upload */
|
|
29
|
+
size: 'medium';
|
|
30
|
+
/** Флаг включения мультивыбора */
|
|
32
31
|
multiple?: boolean;
|
|
33
|
-
|
|
32
|
+
/** Кнопка удаления файла */
|
|
34
33
|
deleteFileButton?: ButtonElement;
|
|
34
|
+
/** Кнопка замены файла */
|
|
35
35
|
replaceImageButton?: ButtonElement;
|
|
36
|
+
}
|
|
37
|
+
interface SmallUploadProps {
|
|
38
|
+
size: 'small';
|
|
39
|
+
multiple?: never;
|
|
40
|
+
deleteFileButton?: never;
|
|
41
|
+
replaceImageButton?: never;
|
|
42
|
+
}
|
|
43
|
+
export interface BaseUploadProps extends DropzoneOptionsHepler {
|
|
44
|
+
/** Список файлов */
|
|
45
|
+
files: LoadedFile[];
|
|
46
|
+
/** Переводы для зоны загрузки */
|
|
47
|
+
trls: UploadTrls;
|
|
48
|
+
/** Кнопка вызова диалога выбора файлов */
|
|
49
|
+
selectFileButton?: ButtonElement;
|
|
50
|
+
/** Обработчик события удаления файла */
|
|
36
51
|
onFileDelete: (loadedFile: LoadedFile, fileIndex: number) => void;
|
|
52
|
+
/** Обработчик успешной валидации файлов */
|
|
37
53
|
onDropAccepted: (files: LoadedFile[], event: DropEvent) => void;
|
|
54
|
+
/** Обработчик reject-а файлов */
|
|
38
55
|
onDropRejected?: (files: LoadedFile[], event: DropEvent) => void;
|
|
56
|
+
/** Render функция для отображения информации о состоянии файла */
|
|
39
57
|
renderFileInfo?: RenderFileInfo;
|
|
58
|
+
/** Aria label для аватара на размере small */
|
|
40
59
|
'aria-label'?: string;
|
|
41
60
|
}
|
|
61
|
+
export type UploadProps = BaseUploadProps & (MediumUploadProps | SmallUploadProps);
|
|
42
62
|
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
var styles = {"root":"magritte-root___FV1tC_3-0-1","background":"magritte-background___RfZ0U_3-0-1","drag-active":"magritte-drag-active___dihBL_3-0-1","dragActive":"magritte-drag-active___dihBL_3-0-1","load":"magritte-load___MghDA_3-0-1","loading":"magritte-loading___9E3p-_3-0-1","invalid":"magritte-invalid___Rt10-_3-0-1","root_medium":"magritte-root_medium___67WJa_3-0-1","rootMedium":"magritte-root_medium___67WJa_3-0-1","body":"magritte-body___O7ROl_3-0-1","root_small":"magritte-root_small___dkUYq_3-0-1","rootSmall":"magritte-root_small___dkUYq_3-0-1","loader":"magritte-loader___XYpWg_3-0-1","cancel":"magritte-cancel___tQ-yX_3-0-1","image-controls":"magritte-image-controls___vLf94_3-0-1","imageControls":"magritte-image-controls___vLf94_3-0-1","small-controls":"magritte-small-controls___Qn9TP_3-0-1","smallControls":"magritte-small-controls___Qn9TP_3-0-1","file-list":"magritte-file-list___L9uHt_3-0-1","fileList":"magritte-file-list___L9uHt_3-0-1"};
|
|
3
|
+
|
|
4
|
+
export { styles as s };
|
|
5
|
+
//# sourceMappingURL=upload-CR54iSr6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"upload-CR54iSr6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/utils.d.ts
CHANGED
|
@@ -6,4 +6,4 @@ export declare const DEFAULT_ACCEPT: Accept;
|
|
|
6
6
|
export declare const bytes2mb: (value: number) => string;
|
|
7
7
|
export declare const getFileType: (avaliableType: string) => UploadType;
|
|
8
8
|
export declare const getAvaliableFileTypes: (accept: Accept) => UploadType;
|
|
9
|
-
export declare const getUploadIcon: (uploadType: UploadType, loadedFile: LoadedFile | undefined, isSmall: boolean) => ReactElement;
|
|
9
|
+
export declare const getUploadIcon: (uploadType: UploadType, loadedFile: LoadedFile | undefined, isSmall: boolean) => ReactElement | undefined;
|
package/utils.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import './index.css';
|
|
2
|
-
import { jsx
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { ImageSize24, ImageSize32, VideocameraOutlinedSize24, VideocameraOutlinedSize32, DocumentOutlinedSize24, DocumentOutlinedSize32, DocumentArrowUpOutlinedSize24, DocumentArrowUpOutlinedSize32 } from '@hh.ru/magritte-ui-icon/icon';
|
|
4
4
|
|
|
5
5
|
const RenderFileInfoDefault = (loadedFile) => {
|
|
@@ -31,7 +31,7 @@ const getUploadIcon = (uploadType, loadedFile, isSmall) => {
|
|
|
31
31
|
if (loadedFile) {
|
|
32
32
|
const { error, loading } = loadedFile;
|
|
33
33
|
if ((loading || error) && !isSmall) {
|
|
34
|
-
return
|
|
34
|
+
return undefined;
|
|
35
35
|
}
|
|
36
36
|
if (uploadType === 'image') {
|
|
37
37
|
return isSmall ? jsx(ImageSize24, { initial: "accent" }) : jsx(ImageSize32, { initial: "secondary" });
|
package/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/utils.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport { Accept } from 'react-dropzone';\n\nimport {\n DocumentArrowUpOutlinedSize32,\n DocumentOutlinedSize32,\n VideocameraOutlinedSize32,\n ImageSize32,\n DocumentArrowUpOutlinedSize24,\n DocumentOutlinedSize24,\n VideocameraOutlinedSize24,\n ImageSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { LoadedFile, UploadType, LoadedFileWithFileSize } from '@hh.ru/magritte-ui-upload/types';\n\nexport const RenderFileInfoDefault = (loadedFile: LoadedFileWithFileSize): ReactNode => {\n return loadedFile.fileSizeMB;\n};\n\nexport const DEFAULT_ACCEPT: Accept = {\n 'image/*': ['.png', '.jpeg', '.jpg'],\n};\n\nconst order = 1024 * 1024;\nexport const bytes2mb = (value: number): string => {\n return (value / order).toFixed(2);\n};\n\nexport const getFileType = (avaliableType: string): UploadType => {\n return avaliableType.split('/')[0] as UploadType;\n};\n\n// парсим accept в нормальный формат\nexport const getAvaliableFileTypes = (accept: Accept): UploadType => {\n const avaliableTypes = Object.keys(accept);\n if (avaliableTypes.length === 0) {\n throw new Error(`Magritte component Upload: accept can't be empty`);\n }\n if (avaliableTypes.length > 1) {\n return 'mixed';\n }\n return getFileType(avaliableTypes[0]);\n};\n\n// иконка (тип и цвет) может меняться в зависимости от типа, размера и состояния загрузки\nexport const getUploadIcon = (\n uploadType: UploadType,\n loadedFile: LoadedFile | undefined,\n isSmall: boolean\n): ReactElement => {\n if (loadedFile) {\n const { error, loading } = loadedFile;\n if ((loading || error) && !isSmall) {\n return
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/utils.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport { Accept } from 'react-dropzone';\n\nimport {\n DocumentArrowUpOutlinedSize32,\n DocumentOutlinedSize32,\n VideocameraOutlinedSize32,\n ImageSize32,\n DocumentArrowUpOutlinedSize24,\n DocumentOutlinedSize24,\n VideocameraOutlinedSize24,\n ImageSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { LoadedFile, UploadType, LoadedFileWithFileSize } from '@hh.ru/magritte-ui-upload/types';\n\nexport const RenderFileInfoDefault = (loadedFile: LoadedFileWithFileSize): ReactNode => {\n return loadedFile.fileSizeMB;\n};\n\nexport const DEFAULT_ACCEPT: Accept = {\n 'image/*': ['.png', '.jpeg', '.jpg'],\n};\n\nconst order = 1024 * 1024;\nexport const bytes2mb = (value: number): string => {\n return (value / order).toFixed(2);\n};\n\nexport const getFileType = (avaliableType: string): UploadType => {\n return avaliableType.split('/')[0] as UploadType;\n};\n\n// парсим accept в нормальный формат\nexport const getAvaliableFileTypes = (accept: Accept): UploadType => {\n const avaliableTypes = Object.keys(accept);\n if (avaliableTypes.length === 0) {\n throw new Error(`Magritte component Upload: accept can't be empty`);\n }\n if (avaliableTypes.length > 1) {\n return 'mixed';\n }\n return getFileType(avaliableTypes[0]);\n};\n\n// иконка (тип и цвет) может меняться в зависимости от типа, размера и состояния загрузки\nexport const getUploadIcon = (\n uploadType: UploadType,\n loadedFile: LoadedFile | undefined,\n isSmall: boolean\n): ReactElement | undefined => {\n if (loadedFile) {\n const { error, loading } = loadedFile;\n if ((loading || error) && !isSmall) {\n return undefined;\n }\n if (uploadType === 'image') {\n return isSmall ? <ImageSize24 initial=\"accent\" /> : <ImageSize32 initial=\"secondary\" />;\n }\n if (uploadType === 'video') {\n return isSmall ? (\n <VideocameraOutlinedSize24 initial=\"accent\" />\n ) : (\n <VideocameraOutlinedSize32 initial=\"secondary\" />\n );\n }\n // mixed, application\n return isSmall ? <DocumentOutlinedSize24 initial=\"accent\" /> : <DocumentOutlinedSize32 initial=\"secondary\" />;\n }\n if (uploadType === 'video' || uploadType === 'image') {\n return isSmall ? <ImageSize24 initial=\"secondary\" /> : <ImageSize32 initial=\"secondary\" />;\n }\n // mixed, application\n return isSmall ? (\n <DocumentArrowUpOutlinedSize24 initial=\"secondary\" />\n ) : (\n <DocumentArrowUpOutlinedSize32 initial=\"secondary\" />\n );\n};\n"],"names":["_jsx"],"mappings":";;;AAea,MAAA,qBAAqB,GAAG,CAAC,UAAkC,KAAe;IACnF,OAAO,UAAU,CAAC,UAAU,CAAC;AACjC,EAAE;AAEW,MAAA,cAAc,GAAW;AAClC,IAAA,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC;EACtC;AAEF,MAAM,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;AACb,MAAA,QAAQ,GAAG,CAAC,KAAa,KAAY;IAC9C,OAAO,CAAC,KAAK,GAAG,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;AACtC,EAAE;AAEW,MAAA,WAAW,GAAG,CAAC,aAAqB,KAAgB;IAC7D,OAAO,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAe,CAAC;AACrD,EAAE;AAEF;AACa,MAAA,qBAAqB,GAAG,CAAC,MAAc,KAAgB;IAChE,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAC3C,IAAA,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;AAC7B,QAAA,MAAM,IAAI,KAAK,CAAC,CAAA,gDAAA,CAAkD,CAAC,CAAC;KACvE;AACD,IAAA,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;AAC3B,QAAA,OAAO,OAAO,CAAC;KAClB;AACD,IAAA,OAAO,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAC1C,EAAE;AAEF;AACa,MAAA,aAAa,GAAG,CACzB,UAAsB,EACtB,UAAkC,EAClC,OAAgB,KACU;IAC1B,IAAI,UAAU,EAAE;AACZ,QAAA,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC;QACtC,IAAI,CAAC,OAAO,IAAI,KAAK,KAAK,CAAC,OAAO,EAAE;AAChC,YAAA,OAAO,SAAS,CAAC;SACpB;AACD,QAAA,IAAI,UAAU,KAAK,OAAO,EAAE;YACxB,OAAO,OAAO,GAAGA,IAAC,WAAW,EAAA,EAAC,OAAO,EAAC,QAAQ,GAAG,GAAGA,GAAC,CAAA,WAAW,IAAC,OAAO,EAAC,WAAW,EAAA,CAAG,CAAC;SAC3F;AACD,QAAA,IAAI,UAAU,KAAK,OAAO,EAAE;YACxB,OAAO,OAAO,IACVA,IAAC,yBAAyB,EAAA,EAAC,OAAO,EAAC,QAAQ,EAAA,CAAG,KAE9CA,GAAC,CAAA,yBAAyB,EAAC,EAAA,OAAO,EAAC,WAAW,EAAG,CAAA,CACpD,CAAC;SACL;;QAED,OAAO,OAAO,GAAGA,IAAC,sBAAsB,EAAA,EAAC,OAAO,EAAC,QAAQ,GAAG,GAAGA,GAAC,CAAA,sBAAsB,IAAC,OAAO,EAAC,WAAW,EAAA,CAAG,CAAC;KACjH;IACD,IAAI,UAAU,KAAK,OAAO,IAAI,UAAU,KAAK,OAAO,EAAE;QAClD,OAAO,OAAO,GAAGA,IAAC,WAAW,EAAA,EAAC,OAAO,EAAC,WAAW,GAAG,GAAGA,GAAC,CAAA,WAAW,IAAC,OAAO,EAAC,WAAW,EAAA,CAAG,CAAC;KAC9F;;IAED,OAAO,OAAO,IACVA,IAAC,6BAA6B,EAAA,EAAC,OAAO,EAAC,WAAW,EAAA,CAAG,KAErDA,GAAC,CAAA,6BAA6B,EAAC,EAAA,OAAO,EAAC,WAAW,EAAG,CAAA,CACxD,CAAC;AACN;;;;"}
|
package/upload-DAE6N3sX.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
var styles = {"root":"magritte-root___FV1tC_2-1-0","background":"magritte-background___RfZ0U_2-1-0","drag-active":"magritte-drag-active___dihBL_2-1-0","dragActive":"magritte-drag-active___dihBL_2-1-0","load":"magritte-load___MghDA_2-1-0","loading":"magritte-loading___9E3p-_2-1-0","invalid":"magritte-invalid___Rt10-_2-1-0","root_medium":"magritte-root_medium___67WJa_2-1-0","rootMedium":"magritte-root_medium___67WJa_2-1-0","body":"magritte-body___O7ROl_2-1-0","root_small":"magritte-root_small___dkUYq_2-1-0","rootSmall":"magritte-root_small___dkUYq_2-1-0","loader":"magritte-loader___XYpWg_2-1-0","cancel":"magritte-cancel___tQ-yX_2-1-0","image-controls":"magritte-image-controls___vLf94_2-1-0","imageControls":"magritte-image-controls___vLf94_2-1-0","small-controls":"magritte-small-controls___Qn9TP_2-1-0","smallControls":"magritte-small-controls___Qn9TP_2-1-0","file-list":"magritte-file-list___L9uHt_2-1-0","fileList":"magritte-file-list___L9uHt_2-1-0"};
|
|
3
|
-
|
|
4
|
-
export { styles as s };
|
|
5
|
-
//# sourceMappingURL=upload-DAE6N3sX.js.map
|
package/upload-DAE6N3sX.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"upload-DAE6N3sX.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|