@hh.ru/magritte-ui-upload 4.0.34 → 4.1.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 +3 -2
- package/FileName.js.map +1 -1
- package/FileView.d.ts +2 -1
- package/FileView.js +7 -6
- package/FileView.js.map +1 -1
- package/FileViewWithPreview.js +2 -1
- package/FileViewWithPreview.js.map +1 -1
- package/MultiUpload.d.ts +1 -1
- package/MultiUpload.js +12 -6
- package/MultiUpload.js.map +1 -1
- package/SingleUpload.d.ts +1 -1
- package/SingleUpload.js +25 -16
- package/SingleUpload.js.map +1 -1
- package/Upload.d.ts +1 -2
- package/Upload.js +6 -8
- package/Upload.js.map +1 -1
- package/index.css +63 -73
- package/index.js +3 -3
- package/package.json +11 -11
- package/types.d.ts +13 -18
- package/upload-CHi2Wl3F.js +10 -0
- package/upload-CHi2Wl3F.js.map +1 -0
- package/utils.js +34 -14
- package/utils.js.map +1 -1
- package/upload-DwqYxKc7.js +0 -5
- package/upload-DwqYxKc7.js.map +0 -1
package/FileName.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
|
+
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
4
5
|
|
|
5
|
-
var styles = {"file-name-body":"magritte-file-name-body___PTTMc_4-
|
|
6
|
+
var styles = {"file-name-body":"magritte-file-name-body___PTTMc_4-1-1","fileNameBody":"magritte-file-name-body___PTTMc_4-1-1","file-name-body_medium":"magritte-file-name-body_medium___sfmmq_4-1-1","fileNameBodyMedium":"magritte-file-name-body_medium___sfmmq_4-1-1"};
|
|
6
7
|
|
|
7
8
|
const parse = (file) => {
|
|
8
9
|
const name = file.name;
|
|
@@ -22,7 +23,7 @@ const parse = (file) => {
|
|
|
22
23
|
};
|
|
23
24
|
const FileName = ({ file, isSizeMedium = false }) => {
|
|
24
25
|
const { name, extension } = parse(file);
|
|
25
|
-
return (jsxs("div", { className: classnames(styles.fileNameBody, { [styles.fileNameBodyMedium]: isSizeMedium }), children: [jsx("
|
|
26
|
+
return (jsxs("div", { className: classnames(styles.fileNameBody, { [styles.fileNameBodyMedium]: isSizeMedium }), children: [jsx(Text, { typography: "label-2-regular", ellipsis: true, Element: "span", children: name }), extension && (jsxs(Text, { typography: "label-2-regular", Element: "span", children: [".", extension] }))] }));
|
|
26
27
|
};
|
|
27
28
|
|
|
28
29
|
export { FileName };
|
package/FileName.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileName.js","sources":["../src/FileName.tsx"],"sourcesContent":["import { ReactElement } from 'react';\nimport classnames from 'classnames';\n\nimport styles from './file-name.less';\n\nconst parse = (file: File): { name: string; extension: string } => {\n const name = file.name;\n const parts = name.split('.');\n if (parts.length === 1) {\n return {\n name: parts[0],\n extension: '',\n };\n }\n const extension = parts.pop();\n return {\n // -1 из-за точки\n name: name.substring(0, name.length - (extension?.length || 0) - 1),\n extension: extension || '',\n };\n};\n\ninterface FileNameProps {\n file: File;\n isSizeMedium?: boolean;\n}\n\nconst FileName = ({ file, isSizeMedium = false }: FileNameProps): ReactElement => {\n const { name, extension } = parse(file);\n return (\n <div className={classnames(styles.fileNameBody, { [styles.fileNameBodyMedium]: isSizeMedium })}>\n <
|
|
1
|
+
{"version":3,"file":"FileName.js","sources":["../src/FileName.tsx"],"sourcesContent":["import { ReactElement } from 'react';\nimport classnames from 'classnames';\n\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './file-name.less';\n\nconst parse = (file: File): { name: string; extension: string } => {\n const name = file.name;\n const parts = name.split('.');\n if (parts.length === 1) {\n return {\n name: parts[0],\n extension: '',\n };\n }\n const extension = parts.pop();\n return {\n // -1 из-за точки\n name: name.substring(0, name.length - (extension?.length || 0) - 1),\n extension: extension || '',\n };\n};\n\ninterface FileNameProps {\n file: File;\n isSizeMedium?: boolean;\n}\n\nconst FileName = ({ file, isSizeMedium = false }: FileNameProps): ReactElement => {\n const { name, extension } = parse(file);\n return (\n <div className={classnames(styles.fileNameBody, { [styles.fileNameBodyMedium]: isSizeMedium })}>\n <Text typography=\"label-2-regular\" ellipsis Element=\"span\">\n {name}\n </Text>\n {extension && (\n <Text typography=\"label-2-regular\" Element=\"span\">\n .{extension}\n </Text>\n )}\n </div>\n );\n};\n\nexport { FileName };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAOA,MAAM,KAAK,GAAG,CAAC,IAAU,KAAyC;AAC9D,IAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;IACvB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AAC9B,IAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACpB,OAAO;AACH,YAAA,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;AACd,YAAA,SAAS,EAAE,EAAE;SAChB,CAAC;KACL;AACD,IAAA,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;IAC9B,OAAO;;QAEH,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,IAAI,SAAS,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACnE,SAAS,EAAE,SAAS,IAAI,EAAE;KAC7B,CAAC;AACN,CAAC,CAAC;AAOI,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,YAAY,GAAG,KAAK,EAAiB,KAAkB;IAC7E,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IACxC,QACIA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,GAAG,YAAY,EAAE,CAAC,EAC1F,QAAA,EAAA,CAAAC,GAAA,CAAC,IAAI,EAAA,EAAC,UAAU,EAAC,iBAAiB,EAAC,QAAQ,EAAC,IAAA,EAAA,OAAO,EAAC,MAAM,EACrD,QAAA,EAAA,IAAI,EACF,CAAA,EACN,SAAS,KACND,IAAA,CAAC,IAAI,EAAA,EAAC,UAAU,EAAC,iBAAiB,EAAC,OAAO,EAAC,MAAM,EAC3C,QAAA,EAAA,CAAA,GAAA,EAAA,SAAS,CACR,EAAA,CAAA,CACV,CACC,EAAA,CAAA,EACR;AACN;;;;"}
|
package/FileView.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export interface FileViewProps {
|
|
|
8
8
|
preview: string;
|
|
9
9
|
'aria-label': string;
|
|
10
10
|
isLast?: boolean;
|
|
11
|
+
disableCancel?: boolean;
|
|
11
12
|
}
|
|
12
|
-
declare const FileView: ({ uploadType, loadedFile, preview, renderFileInfo, onFileDelete, "aria-label": ariaLabel, isLast, }: FileViewProps) => ReactElement;
|
|
13
|
+
declare const FileView: ({ uploadType, loadedFile, preview, renderFileInfo, onFileDelete, disableCancel, "aria-label": ariaLabel, isLast, }: FileViewProps) => ReactElement;
|
|
13
14
|
export { FileView };
|
package/FileView.js
CHANGED
|
@@ -5,20 +5,21 @@ import { Divider } from '@hh.ru/magritte-ui-divider';
|
|
|
5
5
|
import { ExclamationTriangleOutlinedSize16, CheckCircleOutlinedSize16, CrossOutlinedSize24, TrashOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
|
|
6
6
|
import { Loader } from '@hh.ru/magritte-ui-loader';
|
|
7
7
|
import { VSpacing } from '@hh.ru/magritte-ui-spacing';
|
|
8
|
+
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
8
9
|
import { FileName } from './FileName.js';
|
|
9
10
|
import { getUploadIcon, bytes2mb } from './utils.js';
|
|
10
11
|
import 'classnames';
|
|
11
12
|
|
|
12
|
-
var styles = {"file-info-body":"magritte-file-info-body___HmfXd_4-
|
|
13
|
+
var styles = {"file-info-body":"magritte-file-info-body___HmfXd_4-1-1","fileInfoBody":"magritte-file-info-body___HmfXd_4-1-1","file-info-and-controls":"magritte-file-info-and-controls___61iyY_4-1-1","fileInfoAndControls":"magritte-file-info-and-controls___61iyY_4-1-1","file-info-container":"magritte-file-info-container___WFab8_4-1-1","fileInfoContainer":"magritte-file-info-container___WFab8_4-1-1","file-info":"magritte-file-info___HrqiB_4-1-1","fileInfo":"magritte-file-info___HrqiB_4-1-1","controls":"magritte-controls___WdH7A_4-1-1"};
|
|
13
14
|
|
|
14
|
-
const FileView = ({ uploadType, loadedFile, preview, renderFileInfo, onFileDelete, 'aria-label': ariaLabel, isLast = false, }) => {
|
|
15
|
+
const FileView = ({ uploadType, loadedFile, preview, renderFileInfo, onFileDelete, disableCancel, 'aria-label': ariaLabel, isLast = false, }) => {
|
|
15
16
|
const isLoading = Boolean(loadedFile?.loading);
|
|
16
17
|
const isInvalid = Boolean(loadedFile?.error);
|
|
17
18
|
const isImageType = uploadType === 'image';
|
|
18
|
-
return (jsxs(Fragment, { children: [jsx(Avatar, { mode: isImageType && !isLoading && !isInvalid ? '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, { initialColor: "negative" }), isLoading && jsx(Loader, { size: 16 }), !isInvalid && !isLoading && jsx(CheckCircleOutlinedSize16, { initialColor: "positive" }), renderFileInfo({
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
return (jsxs(Fragment, { children: [jsx(Avatar, { mode: isImageType && !isLoading && !isInvalid ? '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, { initialColor: "negative" }), isLoading && jsx(Loader, { size: 16 }), !isInvalid && !isLoading && jsx(CheckCircleOutlinedSize16, { initialColor: "positive" }), jsx(Text, { typography: "label-4-regular", children: renderFileInfo({
|
|
20
|
+
...loadedFile,
|
|
21
|
+
fileSizeMB: bytes2mb(loadedFile.data.size),
|
|
22
|
+
}) })] })] }), jsxs("div", { className: styles.controls, children: [isLoading && !disableCancel && (jsx(CrossOutlinedSize24, { padding: 8, borderRadius: "halfHeight", initialColor: "secondary", onClick: onFileDelete })), !isLoading && (jsx(TrashOutlinedSize24, { padding: 8, borderRadius: "halfHeight", onClick: onFileDelete, "data-qa": "magritte-upload-delete-file-action", initialColor: "secondary" }))] })] }), !isLast && (jsxs("div", { children: [jsx(VSpacing, { default: 16 }), jsx(Divider, {}), jsx(VSpacing, { default: 16 })] }))] })] }));
|
|
22
23
|
};
|
|
23
24
|
|
|
24
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 { 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 && !isInvalid ? '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 initialColor=\"negative\" />}\n {isLoading && <Loader size={16} />}\n {!isInvalid && !isLoading && <CheckCircleOutlinedSize16 initialColor=\"positive\" />}\n {renderFileInfo({\n
|
|
1
|
+
{"version":3,"file":"FileView.js","sources":["../src/FileView.tsx"],"sourcesContent":["import { ReactElement, MouseEvent } from 'react';\n\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 { Text } from '@hh.ru/magritte-ui-typography';\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 disableCancel?: boolean;\n}\n\nconst FileView = ({\n uploadType,\n loadedFile,\n preview,\n renderFileInfo,\n onFileDelete,\n disableCancel,\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 && !isInvalid ? '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 initialColor=\"negative\" />}\n {isLoading && <Loader size={16} />}\n {!isInvalid && !isLoading && <CheckCircleOutlinedSize16 initialColor=\"positive\" />}\n <Text typography=\"label-4-regular\">\n {renderFileInfo({\n ...loadedFile,\n fileSizeMB: bytes2mb(loadedFile.data.size),\n })}\n </Text>\n </div>\n </div>\n <div className={styles.controls}>\n {isLoading && !disableCancel && (\n <CrossOutlinedSize24\n padding={8}\n borderRadius=\"halfHeight\"\n initialColor=\"secondary\"\n onClick={onFileDelete}\n />\n )}\n {!isLoading && (\n <TrashOutlinedSize24\n padding={8}\n borderRadius=\"halfHeight\"\n onClick={onFileDelete}\n data-qa=\"magritte-upload-delete-file-action\"\n initialColor=\"secondary\"\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":"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"}
|
package/FileViewWithPreview.js
CHANGED
|
@@ -8,11 +8,12 @@ import '@hh.ru/magritte-ui-divider';
|
|
|
8
8
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
9
9
|
import '@hh.ru/magritte-ui-loader';
|
|
10
10
|
import '@hh.ru/magritte-ui-spacing';
|
|
11
|
+
import '@hh.ru/magritte-ui-typography';
|
|
11
12
|
import './FileName.js';
|
|
12
13
|
import 'classnames';
|
|
13
14
|
import 'react';
|
|
14
15
|
|
|
15
|
-
var styles = {"item":"magritte-item___vVDG-_4-
|
|
16
|
+
var styles = {"item":"magritte-item___vVDG-_4-1-1"};
|
|
16
17
|
|
|
17
18
|
const FileViewWithPreview = ({ loadedFile, ...otherProps }) => {
|
|
18
19
|
const uploadType = getFileType(loadedFile.data.type);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileViewWithPreview.js","sources":["../src/FileViewWithPreview.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { FileView, FileViewProps } from '@hh.ru/magritte-ui-upload/FileView';\nimport { useFilePreview } from '@hh.ru/magritte-ui-upload/useFilePreview';\nimport { getFileType } from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './file-viev-with-preview.less';\n\ntype FileViewWithPreviewProps = Omit<FileViewProps, 'preview' | 'uploadType'>;\n\nconst FileViewWithPreview = ({ loadedFile, ...otherProps }: FileViewWithPreviewProps): ReactElement => {\n const uploadType = getFileType(loadedFile.data.type);\n const preview = useFilePreview({ loadedFile, isImageType: uploadType === 'image' });\n return (\n <div className={styles.item}>\n <FileView uploadType={uploadType} loadedFile={loadedFile} preview={preview} {...otherProps} />\n </div>\n );\n};\n\nexport { FileViewWithPreview };\n"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FileViewWithPreview.js","sources":["../src/FileViewWithPreview.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { FileView, FileViewProps } from '@hh.ru/magritte-ui-upload/FileView';\nimport { useFilePreview } from '@hh.ru/magritte-ui-upload/useFilePreview';\nimport { getFileType } from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './file-viev-with-preview.less';\n\ntype FileViewWithPreviewProps = Omit<FileViewProps, 'preview' | 'uploadType'>;\n\nconst FileViewWithPreview = ({ loadedFile, ...otherProps }: FileViewWithPreviewProps): ReactElement => {\n const uploadType = getFileType(loadedFile.data.type);\n const preview = useFilePreview({ loadedFile, isImageType: uploadType === 'image' });\n return (\n <div className={styles.item}>\n <FileView uploadType={uploadType} loadedFile={loadedFile} preview={preview} {...otherProps} />\n </div>\n );\n};\n\nexport { FileViewWithPreview };\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;AAUM,MAAA,mBAAmB,GAAG,CAAC,EAAE,UAAU,EAAE,GAAG,UAAU,EAA4B,KAAkB;IAClG,MAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACrD,IAAA,MAAM,OAAO,GAAG,cAAc,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,KAAK,OAAO,EAAE,CAAC,CAAC;IACpF,QACIA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EACvB,QAAA,EAAAA,GAAA,CAAC,QAAQ,EAAA,EAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAA,GAAM,UAAU,EAAA,CAAI,EAC5F,CAAA,EACR;AACN;;;;"}
|
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, accept, selectFileButton: _selectFileButton, renderFileInfo, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, "aria-label": ariaLabel, ...dropzoneProps }: Omit<UploadProps, "multiple">) => ReactElement;
|
|
3
|
+
declare const MultiUpload: ({ files, trls, size, disableCancel, accept, selectFileButton: _selectFileButton, renderFileInfo, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, disabled, "aria-label": ariaLabel, ...dropzoneProps }: Omit<UploadProps, "multiple">) => ReactElement;
|
|
4
4
|
export { MultiUpload };
|
package/MultiUpload.js
CHANGED
|
@@ -2,13 +2,15 @@ import './index.css';
|
|
|
2
2
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { useDropzone } from 'react-dropzone';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
|
+
import { u as useDisabled, D as DisabledContext, s as styles } from './upload-CHi2Wl3F.js';
|
|
5
6
|
import { VSpacing } from '@hh.ru/magritte-ui-spacing';
|
|
7
|
+
import { TextDynamic } from '@hh.ru/magritte-ui-typography';
|
|
6
8
|
import { FileViewWithPreview } from './FileViewWithPreview.js';
|
|
7
9
|
import { Placeholder } from './Placeholder.js';
|
|
8
10
|
import { useDropActions } from './useDropActions.js';
|
|
9
11
|
import { useDropButtons } from './useDropButtons.js';
|
|
10
12
|
import { getAvaliableFileTypes, getUploadIcon, DEFAULT_ACCEPT, RenderFileInfoDefault } from './utils.js';
|
|
11
|
-
import
|
|
13
|
+
import 'react';
|
|
12
14
|
import './FileView.js';
|
|
13
15
|
import '@hh.ru/magritte-ui-avatar';
|
|
14
16
|
import '@hh.ru/magritte-ui-divider';
|
|
@@ -16,12 +18,12 @@ import '@hh.ru/magritte-ui-icon/icon';
|
|
|
16
18
|
import '@hh.ru/magritte-ui-loader';
|
|
17
19
|
import './FileName.js';
|
|
18
20
|
import './useFilePreview.js';
|
|
19
|
-
import 'react';
|
|
20
21
|
import '@hh.ru/magritte-ui-breakpoint';
|
|
21
|
-
import '@hh.ru/magritte-ui-typography';
|
|
22
22
|
|
|
23
|
-
const MultiUpload = ({ files, trls, size, accept = DEFAULT_ACCEPT, selectFileButton: _selectFileButton, renderFileInfo = RenderFileInfoDefault, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, 'aria-label': ariaLabel, ...dropzoneProps }) => {
|
|
23
|
+
const MultiUpload = ({ files, trls, size, disableCancel, accept = DEFAULT_ACCEPT, selectFileButton: _selectFileButton, renderFileInfo = RenderFileInfoDefault, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, disabled, 'aria-label': ariaLabel, ...dropzoneProps }) => {
|
|
24
24
|
const uploadType = getAvaliableFileTypes(accept);
|
|
25
|
+
const contextDisabled = useDisabled();
|
|
26
|
+
const isDisabled = disabled || contextDisabled;
|
|
25
27
|
const { onDropAccepted, onDropRejected, onFileDelete } = useDropActions({
|
|
26
28
|
onDropAccepted: onDropAcceptedExternal,
|
|
27
29
|
onDropRejected: onDropRejectedExternal,
|
|
@@ -29,16 +31,20 @@ const MultiUpload = ({ files, trls, size, accept = DEFAULT_ACCEPT, selectFileBut
|
|
|
29
31
|
});
|
|
30
32
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
|
31
33
|
...dropzoneProps,
|
|
34
|
+
disabled: isDisabled,
|
|
32
35
|
accept,
|
|
33
36
|
onDropAccepted,
|
|
34
37
|
onDropRejected,
|
|
35
38
|
multiple: true,
|
|
36
39
|
});
|
|
37
40
|
const { selectFileButton } = useDropButtons({ selectFileButton: _selectFileButton });
|
|
38
|
-
return (jsxs(Fragment, { children: [
|
|
41
|
+
return (jsxs(Fragment, { children: [jsx(DisabledContext.Provider, { value: isDisabled, children: jsxs("div", { className: classnames(styles.root, styles[`root_${size}`], {
|
|
42
|
+
[styles.dragActive]: isDragActive && !isDisabled,
|
|
43
|
+
[styles.disabled]: isDisabled,
|
|
44
|
+
}), ...getRootProps(), "data-qa": "magritte-multiple-upload", children: [jsx("input", { ...getInputProps(), "data-qa": "magritte-multiple-upload-input", disabled: isDisabled }), jsx("div", { className: styles.background }), jsxs(TextDynamic, { className: styles.body, children: [getUploadIcon(uploadType, undefined, false), jsx(VSpacing, { default: 16 }), jsx(Placeholder, { trls: trls, selectFileButton: selectFileButton })] })] }) }), files.length > 0 && (jsx("div", { className: styles.fileList, children: files.map((loadedFile, indexFile) => {
|
|
39
45
|
return (jsx(FileViewWithPreview, { loadedFile: loadedFile, renderFileInfo: renderFileInfo, onFileDelete: (event) => {
|
|
40
46
|
onFileDelete(event, loadedFile, indexFile);
|
|
41
|
-
}, "aria-label": ariaLabel || '', isLast: files.length - 1 === indexFile }, `${loadedFile.data.name}${loadedFile.data.size}${loadedFile.data.lastModified}`));
|
|
47
|
+
}, "aria-label": ariaLabel || '', disableCancel: disableCancel, isLast: files.length - 1 === indexFile }, `${loadedFile.data.name}${loadedFile.data.size}${loadedFile.data.lastModified}`));
|
|
42
48
|
}) }))] }));
|
|
43
49
|
};
|
|
44
50
|
|
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 { FileViewWithPreview } from '@hh.ru/magritte-ui-upload/FileViewWithPreview';\nimport { Placeholder } from '@hh.ru/magritte-ui-upload/Placeholder';\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
|
|
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 { DisabledContext, useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { TextDynamic } from '@hh.ru/magritte-ui-typography';\nimport { FileViewWithPreview } from '@hh.ru/magritte-ui-upload/FileViewWithPreview';\nimport { Placeholder } from '@hh.ru/magritte-ui-upload/Placeholder';\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 disableCancel,\n accept = DEFAULT_ACCEPT,\n selectFileButton: _selectFileButton,\n renderFileInfo = RenderFileInfoDefault,\n onDropAccepted: onDropAcceptedExternal,\n onDropRejected: onDropRejectedExternal,\n onFileDelete: onFileDeleteExternal,\n disabled,\n 'aria-label': ariaLabel,\n ...dropzoneProps\n}: Omit<UploadProps, 'multiple'>): ReactElement => {\n const uploadType = getAvaliableFileTypes(accept);\n const contextDisabled = useDisabled();\n const isDisabled = disabled || contextDisabled;\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 disabled: isDisabled,\n accept,\n onDropAccepted,\n onDropRejected,\n multiple: true,\n });\n const { selectFileButton } = useDropButtons({ selectFileButton: _selectFileButton });\n\n return (\n <>\n <DisabledContext.Provider value={isDisabled}>\n <div\n className={classnames(styles.root, styles[`root_${size}`], {\n [styles.dragActive]: isDragActive && !isDisabled,\n [styles.disabled]: isDisabled,\n })}\n {...getRootProps()}\n data-qa=\"magritte-multiple-upload\"\n >\n <input {...getInputProps()} data-qa=\"magritte-multiple-upload-input\" disabled={isDisabled} />\n <div className={styles.background} />\n <TextDynamic className={styles.body}>\n {getUploadIcon(uploadType, undefined, false)}\n <VSpacing default={16} />\n <Placeholder trls={trls} selectFileButton={selectFileButton} />\n </TextDynamic>\n </div>\n </DisabledContext.Provider>\n {files.length > 0 && (\n <div className={styles.fileList}>\n {files.map((loadedFile, indexFile) => {\n return (\n <FileViewWithPreview\n key={`${loadedFile.data.name}${loadedFile.data.size}${loadedFile.data.lastModified}`}\n loadedFile={loadedFile}\n renderFileInfo={renderFileInfo}\n onFileDelete={(event) => {\n onFileDelete(event, loadedFile, indexFile);\n }}\n aria-label={ariaLabel || ''}\n disableCancel={disableCancel}\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, accept, selectFileButton: _selectFileButton, deleteFileButton: _deleteFileButton, replaceImageButton: _replaceImageButton, renderFileInfo, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, "aria-label": ariaLabel, ...dropzoneProps }: UploadProps) => ReactElement;
|
|
3
|
+
declare const SingleUpload: ({ files, trls, size, accept, disableCancel, selectFileButton: _selectFileButton, deleteFileButton: _deleteFileButton, replaceImageButton: _replaceImageButton, renderFileInfo, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, "aria-label": ariaLabel, disabled, ...dropzoneProps }: UploadProps) => ReactElement;
|
|
4
4
|
export { SingleUpload };
|
package/SingleUpload.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import './index.css';
|
|
2
|
-
import {
|
|
2
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import { useDropzone } from 'react-dropzone';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
|
+
import { u as useDisabled, D as DisabledContext, s as styles } from './upload-CHi2Wl3F.js';
|
|
5
6
|
import { Avatar } from '@hh.ru/magritte-ui-avatar';
|
|
6
7
|
import { CrossOutlinedSize24, ExclamationTriangleOutlinedSize32 } from '@hh.ru/magritte-ui-icon/icon';
|
|
7
8
|
import { Loader } from '@hh.ru/magritte-ui-loader';
|
|
8
9
|
import { VSpacing } from '@hh.ru/magritte-ui-spacing';
|
|
9
|
-
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
10
|
+
import { TextDynamic, Text } from '@hh.ru/magritte-ui-typography';
|
|
10
11
|
import { FileName } from './FileName.js';
|
|
11
12
|
import { FileView } from './FileView.js';
|
|
12
13
|
import { Placeholder } from './Placeholder.js';
|
|
@@ -14,12 +15,11 @@ import { useDropActions } from './useDropActions.js';
|
|
|
14
15
|
import { useDropButtons } from './useDropButtons.js';
|
|
15
16
|
import { useFilePreview } from './useFilePreview.js';
|
|
16
17
|
import { getAvaliableFileTypes, getUploadIcon, bytes2mb, DEFAULT_ACCEPT, RenderFileInfoDefault } from './utils.js';
|
|
17
|
-
import
|
|
18
|
+
import 'react';
|
|
18
19
|
import '@hh.ru/magritte-ui-divider';
|
|
19
20
|
import '@hh.ru/magritte-ui-breakpoint';
|
|
20
|
-
import 'react';
|
|
21
21
|
|
|
22
|
-
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
|
+
const SingleUpload = ({ files, trls, size = 'medium', accept = DEFAULT_ACCEPT, disableCancel, selectFileButton: _selectFileButton, deleteFileButton: _deleteFileButton, replaceImageButton: _replaceImageButton, renderFileInfo = RenderFileInfoDefault, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, 'aria-label': ariaLabel, disabled, ...dropzoneProps }) => {
|
|
23
23
|
const uploadType = getAvaliableFileTypes(accept);
|
|
24
24
|
const loadedFile = files.length > 0 ? files[0] : undefined;
|
|
25
25
|
const isLoad = Boolean(loadedFile);
|
|
@@ -29,6 +29,8 @@ const SingleUpload = ({ files, trls, size = 'medium', accept = DEFAULT_ACCEPT, s
|
|
|
29
29
|
const isImageType = uploadType === 'image';
|
|
30
30
|
const preview = useFilePreview({ loadedFile, isImageType });
|
|
31
31
|
const usePreview = preview !== 'none';
|
|
32
|
+
const contextDisabled = useDisabled();
|
|
33
|
+
const isDisabled = disabled || contextDisabled;
|
|
32
34
|
const { onDropAccepted, onDropRejected, onFileDelete } = useDropActions({
|
|
33
35
|
onDropAccepted: onDropAcceptedExternal,
|
|
34
36
|
onDropRejected: onDropRejectedExternal,
|
|
@@ -36,6 +38,7 @@ const SingleUpload = ({ files, trls, size = 'medium', accept = DEFAULT_ACCEPT, s
|
|
|
36
38
|
});
|
|
37
39
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
|
38
40
|
...dropzoneProps,
|
|
41
|
+
disabled: isDisabled,
|
|
39
42
|
accept,
|
|
40
43
|
onDropAccepted,
|
|
41
44
|
onDropRejected,
|
|
@@ -52,17 +55,23 @@ const SingleUpload = ({ files, trls, size = 'medium', accept = DEFAULT_ACCEPT, s
|
|
|
52
55
|
const backgroundStyles = !isSizeSmall
|
|
53
56
|
? { backgroundImage: preview !== 'none' ? `url('${preview}')` : preview }
|
|
54
57
|
: {};
|
|
55
|
-
return (
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
58
|
+
return (jsx(DisabledContext.Provider, { value: isDisabled, children: jsxs("div", { className: classnames(styles.root, styles[`root_${size}`], {
|
|
59
|
+
[styles.dragActive]: isDragActive && isDisabled,
|
|
60
|
+
[styles.loading]: isLoading,
|
|
61
|
+
[styles.load]: isLoad,
|
|
62
|
+
[styles.invalid]: isInvalid,
|
|
63
|
+
[styles.disabled]: isDisabled,
|
|
64
|
+
}), ...getRootProps(), "data-qa": "magritte-single-upload", children: [jsx("input", { ...getInputProps(), "data-qa": "magritte-single-upload-input", disabled: isDisabled }), jsx("div", { className: styles.background, style: backgroundStyles, "data-qa": "magritte-single-upload-background" }), jsxs(TextDynamic, { className: classnames(styles.body, { [styles.disabled]: isDisabled }), children: [isSizeSmall && (jsxs(Fragment, { children: [loadedFile && (jsx(FileView, { uploadType: uploadType, loadedFile: loadedFile, renderFileInfo: renderFileInfo, onFileDelete: (event) => {
|
|
65
|
+
onFileDelete(event, loadedFile, 0);
|
|
66
|
+
}, preview: preview, disableCancel: disableCancel, "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(Fragment, { children: [jsx(VSpacing, { default: 12 }), jsxs("div", { className: styles.loader, children: [jsx(Loader, { size: 64 }), !disableCancel && (jsx("div", { className: styles.cancel, children: jsx(CrossOutlinedSize24, { initialColor: "accent", onClick: (event) => {
|
|
67
|
+
onFileDelete(event, loadedFile, 0);
|
|
68
|
+
} }) }))] })] })), isInvalid ? (jsx(ExclamationTriangleOutlinedSize32, { initialColor: "negative" })) : (jsx("span", { className: classnames(styles.fileIcon, { [styles.hiddenFileInfo]: usePreview }), children: getUploadIcon(uploadType, loadedFile, false) })), jsx(VSpacing, { default: 16 }), loadedFile && (jsxs(Fragment, { children: [jsxs("div", { className: classnames(styles.fileInfo, { [styles.hiddenFileInfo]: usePreview }), children: [jsx(FileName, { file: loadedFile.data, isSizeMedium: true }), jsx(VSpacing, { default: 6 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: renderFileInfo({
|
|
69
|
+
...loadedFile,
|
|
70
|
+
fileSizeMB: bytes2mb(loadedFile.data.size),
|
|
71
|
+
}) })] }), !isLoading && (!isImageType || isInvalid) && deleteFileButton && (jsxs(Fragment, { children: [jsx(VSpacing, { default: 16 }), deleteFileButton] })), !isLoading &&
|
|
72
|
+
isImageType &&
|
|
73
|
+
!isInvalid &&
|
|
74
|
+
(replaceImageButton || deleteFileButton) && (jsxs(Fragment, { children: [jsx(VSpacing, { default: 16 }), jsxs("div", { className: styles.imageControls, children: [replaceImageButton, deleteFileButton] })] })), isLoading && jsx(VSpacing, { default: 12 })] })), !loadedFile && jsx(Placeholder, { trls: trls, selectFileButton: selectFileButton })] }))] })] }) }));
|
|
66
75
|
};
|
|
67
76
|
|
|
68
77
|
export { SingleUpload };
|
package/SingleUpload.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SingleUpload.js","sources":["../src/SingleUpload.tsx"],"sourcesContent":["import { ReactElement, 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 { Placeholder } from '@hh.ru/magritte-ui-upload/Placeholder';\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 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 const usePreview = preview !== 'none';\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}>\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 <>\n <VSpacing default={12} />\n <div className={styles.loader}>\n <Loader size={64} />\n <div className={styles.cancel}>\n <CrossOutlinedSize24\n initialColor=\"accent\"\n onClick={(event) => {\n onFileDelete(event, loadedFile, 0);\n }}\n />\n </div>\n </div>\n </>\n )}\n {isInvalid ? (\n <ExclamationTriangleOutlinedSize32 initialColor=\"negative\" />\n ) : (\n <span className={classnames(styles.fileIcon, { [styles.hiddenFileInfo]: usePreview })}>\n {getUploadIcon(uploadType, loadedFile, false)}\n </span>\n )}\n <VSpacing default={16} />\n {loadedFile && (\n <>\n <div className={classnames(styles.fileInfo, { [styles.hiddenFileInfo]: usePreview })}>\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 </div>\n {!isLoading && (!isImageType || isInvalid) && deleteFileButton && (\n <>\n <VSpacing default={16} />\n {deleteFileButton}\n </>\n )}\n {!isLoading &&\n isImageType &&\n !isInvalid &&\n (replaceImageButton || deleteFileButton) && (\n <>\n <VSpacing default={16} />\n <div className={styles.imageControls}>\n {replaceImageButton}\n {deleteFileButton}\n </div>\n </>\n )}\n {isLoading && <VSpacing default={12} />}\n </>\n )}\n {!loadedFile && <Placeholder trls={trls} selectFileButton={selectFileButton} />}\n </>\n )}\n </div>\n </div>\n );\n};\n\nexport { SingleUpload };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BM,MAAA,YAAY,GAAG,CAAC,EAClB,KAAK,EACL,IAAI,EACJ,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,cAAc,EACvB,gBAAgB,EAAE,iBAAiB,EACnC,gBAAgB,EAAE,iBAAiB,EACnC,kBAAkB,EAAE,mBAAmB,EACvC,cAAc,GAAG,qBAAqB,EACtC,cAAc,EAAE,sBAAsB,EACtC,cAAc,EAAE,sBAAsB,EACtC,YAAY,EAAE,oBAAoB,EAClC,YAAY,EAAE,SAAS,EACvB,GAAG,aAAa,EACN,KAAkB;AAC5B,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;AACjD,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;AAC3D,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACnC,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,IAAI,KAAK,OAAO,CAAC;AACrC,IAAA,MAAM,WAAW,GAAG,UAAU,KAAK,OAAO,CAAC;IAC3C,MAAM,OAAO,GAAG,cAAc,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,CAAC;AAC5D,IAAA,MAAM,UAAU,GAAG,OAAO,KAAK,MAAM,CAAC;IAEtC,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC;AACpE,QAAA,cAAc,EAAE,sBAAsB;AACtC,QAAA,cAAc,EAAE,sBAAsB;AACtC,QAAA,YAAY,EAAE,oBAAoB;AACrC,KAAA,CAAC,CAAC;IACH,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,WAAW,CAAC;AAC9D,QAAA,GAAG,aAAa;QAChB,MAAM;QACN,cAAc;QACd,cAAc;AACd,QAAA,QAAQ,EAAE,KAAK;AAClB,KAAA,CAAC,CAAC;IAEH,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,GAAG,cAAc,CAAC;AAC9E,QAAA,gBAAgB,EAAE,iBAAiB;AACnC,QAAA,gBAAgB,EAAE,iBAAiB;AACnC,QAAA,kBAAkB,EAAE,mBAAmB;AACvC,QAAA,YAAY,EAAE,CAAC,KAAiB,KAAI;AAChC,YAAA,YAAY,CAAC,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;SACtC;AACJ,KAAA,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,CAAC,WAAW;AACjC,UAAE,EAAE,eAAe,EAAE,OAAO,KAAK,MAAM,GAAG,QAAQ,OAAO,CAAA,EAAA,CAAI,GAAG,OAAO,EAAE;UACvE,EAAE,CAAC;IACT,QACIA,IACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,CAAA,KAAA,EAAQ,IAAI,CAAE,CAAA,CAAC,EACtB,EAAE,CAAC,MAAM,CAAC,UAAU,GAAG,YAAY,EAAE,EACrC,EAAE,CAAC,MAAM,CAAC,OAAO,GAAG,SAAS,EAAE,EAC/B,EAAE,CAAC,MAAM,CAAC,IAAI,GAAG,MAAM,EAAE,EACzB,EAAE,CAAC,MAAM,CAAC,OAAO,GAAG,SAAS,EAAE,CAClC,EACG,GAAA,YAAY,EAAE,EACV,SAAA,EAAA,wBAAwB,EAEhC,QAAA,EAAA,CAAAC,GAAA,CAAA,OAAA,EAAA,EAAA,GAAW,aAAa,EAAE,EAAU,SAAA,EAAA,8BAA8B,EAAG,CAAA,EACrEA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,KAAK,EAAE,gBAAgB,EAAA,SAAA,EAAU,mCAAmC,EAAA,CAAG,EAC1GD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,QAAA,EAAA,CAAA,WAAW,KACRA,IACK,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CAAA,UAAU,KACPD,GAAC,CAAA,QAAQ,EACL,EAAA,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,CAAC,KAAK,KAAI;AACpB,oCAAA,YAAY,CAAC,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;AACvC,iCAAC,EACD,OAAO,EAAE,OAAO,gBACJ,SAAS,IAAI,EAAE,EAC3B,MAAM,EACR,IAAA,EAAA,CAAA,CACL,EACA,CAAC,UAAU,KACRD,IACI,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAD,GAAA,CAAC,MAAM,EACH,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,EAAE,EACR,IAAI,EAAE,aAAa,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,CAAC,EAAA,YAAA,EACrC,SAAS,IAAI,EAAE,EAC7B,CAAA,EACFD,yBACIC,GAAC,CAAA,IAAI,EAAC,EAAA,UAAU,EAAC,iBAAiB,EAAA,QAAA,EAAE,IAAI,CAAC,KAAK,EAAQ,CAAA,EACtDA,GAAC,CAAA,QAAQ,IAAC,OAAO,EAAE,CAAC,EAAA,CAAI,EACxBA,GAAC,CAAA,IAAI,EAAC,EAAA,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAC,WAAW,EAAA,QAAA,EAC/C,IAAI,CAAC,QAAQ,EACX,CAAA,CAAA,EAAA,CACL,EACL,gBAAgB,IAAIA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA,QAAA,EAAG,gBAAgB,EAAA,CAAO,IACpF,CACN,CAAA,EAAA,CACF,CACN,EACA,CAAC,WAAW,KACTD,IAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CACK,SAAS,KACNF,IACI,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAD,GAAA,CAAC,QAAQ,EAAC,EAAA,OAAO,EAAE,EAAE,GAAI,EACzBD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EACzB,QAAA,EAAA,CAAAC,GAAA,CAAC,MAAM,EAAC,EAAA,IAAI,EAAE,EAAE,GAAI,EACpBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EACzB,QAAA,EAAAA,GAAA,CAAC,mBAAmB,EAChB,EAAA,YAAY,EAAC,QAAQ,EACrB,OAAO,EAAE,CAAC,KAAK,KAAI;AACf,wDAAA,YAAY,CAAC,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;qDACtC,EAAA,CACH,EACA,CAAA,CAAA,EAAA,CACJ,CACP,EAAA,CAAA,CACN,EACA,SAAS,IACNA,GAAC,CAAA,iCAAiC,IAAC,YAAY,EAAC,UAAU,EAAA,CAAG,KAE7DA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,GAAG,UAAU,EAAE,CAAC,EAAA,QAAA,EAChF,aAAa,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,EAC1C,CAAA,CACV,EACDA,GAAA,CAAC,QAAQ,EAAA,EAAC,OAAO,EAAE,EAAE,EAAI,CAAA,EACxB,UAAU,KACPD,IAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CACIF,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,GAAG,UAAU,EAAE,CAAC,EAChF,QAAA,EAAA,CAAAC,GAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,YAAY,EAAG,IAAA,EAAA,CAAA,EAChDA,GAAC,CAAA,QAAQ,EAAC,EAAA,OAAO,EAAE,CAAC,EAAI,CAAA,EACxBA,GAAC,CAAA,IAAI,EAAC,EAAA,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAC,WAAW,EAC/C,QAAA,EAAA,cAAc,CAAC;AACZ,oDAAA,GAAG,UAAU;oDACb,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;AAC7C,iDAAA,CAAC,EACC,CAAA,CAAA,EAAA,CACL,EACL,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,gBAAgB,KAC1DD,IAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CACID,GAAC,CAAA,QAAQ,EAAC,EAAA,OAAO,EAAE,EAAE,EAAI,CAAA,EACxB,gBAAgB,CAAA,EAAA,CAClB,CACN,EACA,CAAC,SAAS;wCACP,WAAW;AACX,wCAAA,CAAC,SAAS;AACV,yCAAC,kBAAkB,IAAI,gBAAgB,CAAC,KACpCD,IACI,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAD,GAAA,CAAC,QAAQ,EAAA,EAAC,OAAO,EAAE,EAAE,EAAA,CAAI,EACzBD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA,QAAA,EAAA,CAC/B,kBAAkB,EAClB,gBAAgB,CAAA,EAAA,CACf,CACP,EAAA,CAAA,CACN,EACJ,SAAS,IAAIC,GAAA,CAAC,QAAQ,EAAA,EAAC,OAAO,EAAE,EAAE,EAAA,CAAI,CACxC,EAAA,CAAA,CACN,EACA,CAAC,UAAU,IAAIA,GAAC,CAAA,WAAW,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,gBAAgB,EAAI,CAAA,CAAA,EAAA,CAChF,CACN,CAAA,EAAA,CACC,CACJ,EAAA,CAAA,EACR;AACN;;;;"}
|
|
1
|
+
{"version":3,"file":"SingleUpload.js","sources":["../src/SingleUpload.tsx"],"sourcesContent":["import { ReactElement, MouseEvent } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport classnames from 'classnames';\n\nimport { DisabledContext, useDisabled } from '@hh.ru/magritte-common-use-disabled';\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, TextDynamic } 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 { Placeholder } from '@hh.ru/magritte-ui-upload/Placeholder';\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 disableCancel,\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 disabled,\n ...dropzoneProps\n}: UploadProps): ReactElement => {\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 const usePreview = preview !== 'none';\n const contextDisabled = useDisabled();\n const isDisabled = disabled || contextDisabled;\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 disabled: isDisabled,\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 <DisabledContext.Provider value={isDisabled}>\n <div\n className={classnames(styles.root, styles[`root_${size}`], {\n [styles.dragActive]: isDragActive && isDisabled,\n [styles.loading]: isLoading,\n [styles.load]: isLoad,\n [styles.invalid]: isInvalid,\n [styles.disabled]: isDisabled,\n })}\n {...getRootProps()}\n data-qa=\"magritte-single-upload\"\n >\n <input {...getInputProps()} data-qa=\"magritte-single-upload-input\" disabled={isDisabled} />\n <div\n className={styles.background}\n style={backgroundStyles}\n data-qa=\"magritte-single-upload-background\"\n />\n <TextDynamic className={classnames(styles.body, { [styles.disabled]: isDisabled })}>\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 disableCancel={disableCancel}\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 <>\n <VSpacing default={12} />\n <div className={styles.loader}>\n <Loader size={64} />\n {!disableCancel && (\n <div className={styles.cancel}>\n <CrossOutlinedSize24\n initialColor=\"accent\"\n onClick={(event) => {\n onFileDelete(event, loadedFile, 0);\n }}\n />\n </div>\n )}\n </div>\n </>\n )}\n {isInvalid ? (\n <ExclamationTriangleOutlinedSize32 initialColor=\"negative\" />\n ) : (\n <span className={classnames(styles.fileIcon, { [styles.hiddenFileInfo]: usePreview })}>\n {getUploadIcon(uploadType, loadedFile, false)}\n </span>\n )}\n <VSpacing default={16} />\n {loadedFile && (\n <>\n <div\n className={classnames(styles.fileInfo, { [styles.hiddenFileInfo]: usePreview })}\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 </div>\n {!isLoading && (!isImageType || isInvalid) && deleteFileButton && (\n <>\n <VSpacing default={16} />\n {deleteFileButton}\n </>\n )}\n {!isLoading &&\n isImageType &&\n !isInvalid &&\n (replaceImageButton || deleteFileButton) && (\n <>\n <VSpacing default={16} />\n <div className={styles.imageControls}>\n {replaceImageButton}\n {deleteFileButton}\n </div>\n </>\n )}\n {isLoading && <VSpacing default={12} />}\n </>\n )}\n {!loadedFile && <Placeholder trls={trls} selectFileButton={selectFileButton} />}\n </>\n )}\n </TextDynamic>\n </div>\n </DisabledContext.Provider>\n );\n};\n\nexport { SingleUpload };\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
package/Upload.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
2
|
import { UploadProps } from '@hh.ru/magritte-ui-upload/types';
|
|
3
|
-
declare const Upload: ({ multiple, noDragEventsBubbling, ...uploadProps }: UploadProps) => ReactElement;
|
|
4
|
-
export { Upload };
|
|
3
|
+
export declare const Upload: ({ multiple, noDragEventsBubbling, disableCancel, size, ...uploadProps }: UploadProps) => ReactElement;
|
package/Upload.js
CHANGED
|
@@ -4,7 +4,10 @@ import { MultiUpload } from './MultiUpload.js';
|
|
|
4
4
|
import { SingleUpload } from './SingleUpload.js';
|
|
5
5
|
import 'react-dropzone';
|
|
6
6
|
import 'classnames';
|
|
7
|
+
import './upload-CHi2Wl3F.js';
|
|
8
|
+
import 'react';
|
|
7
9
|
import '@hh.ru/magritte-ui-spacing';
|
|
10
|
+
import '@hh.ru/magritte-ui-typography';
|
|
8
11
|
import './FileViewWithPreview.js';
|
|
9
12
|
import './FileView.js';
|
|
10
13
|
import '@hh.ru/magritte-ui-avatar';
|
|
@@ -14,19 +17,14 @@ import '@hh.ru/magritte-ui-loader';
|
|
|
14
17
|
import './FileName.js';
|
|
15
18
|
import './utils.js';
|
|
16
19
|
import './useFilePreview.js';
|
|
17
|
-
import 'react';
|
|
18
20
|
import './Placeholder.js';
|
|
19
21
|
import '@hh.ru/magritte-ui-breakpoint';
|
|
20
|
-
import '@hh.ru/magritte-ui-typography';
|
|
21
22
|
import './useDropActions.js';
|
|
22
23
|
import './useDropButtons.js';
|
|
23
|
-
import './upload-DwqYxKc7.js';
|
|
24
24
|
|
|
25
|
-
const Upload = ({ multiple, noDragEventsBubbling = true, ...uploadProps }) => {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
return jsx(SingleUpload, { noDragEventsBubbling: noDragEventsBubbling, ...uploadProps });
|
|
25
|
+
const Upload = ({ multiple, noDragEventsBubbling = true, disableCancel = false, size, ...uploadProps }) => {
|
|
26
|
+
const Component = multiple && size === 'medium' ? MultiUpload : SingleUpload;
|
|
27
|
+
return (jsx(Component, { noDragEventsBubbling: noDragEventsBubbling, ...uploadProps, size: size, disableCancel: disableCancel }));
|
|
30
28
|
};
|
|
31
29
|
|
|
32
30
|
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\
|
|
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\nexport const Upload = ({\n multiple,\n noDragEventsBubbling = true,\n disableCancel = false,\n size,\n ...uploadProps\n}: UploadProps): ReactElement => {\n const Component = multiple && size === 'medium' ? MultiUpload : SingleUpload;\n\n return (\n <Component\n noDragEventsBubbling={noDragEventsBubbling}\n {...uploadProps}\n size={size}\n disableCancel={disableCancel}\n />\n );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MAMa,MAAM,GAAG,CAAC,EACnB,QAAQ,EACR,oBAAoB,GAAG,IAAI,EAC3B,aAAa,GAAG,KAAK,EACrB,IAAI,EACJ,GAAG,WAAW,EACJ,KAAkB;AAC5B,IAAA,MAAM,SAAS,GAAG,QAAQ,IAAI,IAAI,KAAK,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC;AAE7E,IAAA,QACIA,GAAC,CAAA,SAAS,IACN,oBAAoB,EAAE,oBAAoB,EACtC,GAAA,WAAW,EACf,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAAA,CAC9B,EACJ;AACN;;;;"}
|
package/index.css
CHANGED
|
@@ -1,132 +1,122 @@
|
|
|
1
|
-
.magritte-file-name-body___PTTMc_4-
|
|
1
|
+
.magritte-file-name-body___PTTMc_4-1-1{
|
|
2
2
|
display:flex;
|
|
3
3
|
width:100%;
|
|
4
4
|
overflow:hidden;
|
|
5
|
-
font-family:"hh sans";
|
|
6
|
-
font-weight:400;
|
|
7
|
-
line-height:22px;
|
|
8
|
-
font-size:16px;
|
|
9
|
-
letter-spacing:0em;
|
|
10
|
-
text-indent:0px;
|
|
11
|
-
text-transform:none;
|
|
12
|
-
text-decoration:none;
|
|
13
|
-
}
|
|
14
|
-
.magritte-file-name-body_medium___sfmmq_4-0-34{
|
|
15
|
-
justify-content:center;
|
|
16
5
|
}
|
|
17
|
-
.magritte-file-
|
|
18
|
-
|
|
19
|
-
text-overflow:ellipsis;
|
|
6
|
+
.magritte-file-name-body_medium___sfmmq_4-1-1{
|
|
7
|
+
justify-content:center;
|
|
20
8
|
}
|
|
21
9
|
|
|
22
|
-
.magritte-file-info-body___HmfXd_4-
|
|
10
|
+
.magritte-file-info-body___HmfXd_4-1-1{
|
|
23
11
|
flex-grow:1;
|
|
24
12
|
}
|
|
25
|
-
.magritte-file-info-and-controls___61iyY_4-
|
|
13
|
+
.magritte-file-info-and-controls___61iyY_4-1-1{
|
|
26
14
|
display:flex;
|
|
27
15
|
gap:16px;
|
|
28
16
|
}
|
|
29
|
-
.magritte-file-info-container___WFab8_4-
|
|
17
|
+
.magritte-file-info-container___WFab8_4-1-1{
|
|
30
18
|
flex-grow:1;
|
|
31
19
|
width:50px;
|
|
32
20
|
}
|
|
33
|
-
.magritte-file-info___HrqiB_4-
|
|
21
|
+
.magritte-file-info___HrqiB_4-1-1{
|
|
34
22
|
display:flex;
|
|
35
23
|
gap:4px;
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
line-height:18px;
|
|
39
|
-
font-size:12px;
|
|
40
|
-
letter-spacing:0.01em;
|
|
41
|
-
text-indent:0px;
|
|
42
|
-
text-transform:none;
|
|
43
|
-
text-decoration:none;
|
|
44
|
-
}
|
|
45
|
-
.magritte-controls___WdH7A_4-0-34{
|
|
24
|
+
}
|
|
25
|
+
.magritte-controls___WdH7A_4-1-1{
|
|
46
26
|
display:flex;
|
|
47
27
|
align-items:center;
|
|
48
28
|
margin-left:auto;
|
|
49
29
|
margin-right:16px;
|
|
50
30
|
}
|
|
51
31
|
|
|
52
|
-
.magritte-item___vVDG-_4-
|
|
32
|
+
.magritte-item___vVDG-_4-1-1{
|
|
53
33
|
display:flex;
|
|
54
34
|
width:100%;
|
|
55
35
|
gap:16px;
|
|
56
36
|
}
|
|
57
37
|
|
|
58
38
|
:root{
|
|
59
|
-
--magritte-color-background-primary-v24-
|
|
60
|
-
--magritte-color-
|
|
61
|
-
--magritte-color-stroke-
|
|
62
|
-
--magritte-color-stroke-
|
|
63
|
-
--magritte-color-
|
|
39
|
+
--magritte-color-background-primary-v24-2-0:#ffffff;
|
|
40
|
+
--magritte-color-background-state-primary-disabled-v24-2-0:#ffffff7a;
|
|
41
|
+
--magritte-color-stroke-neutral-v24-2-0:#DCE3EB;
|
|
42
|
+
--magritte-color-stroke-accent-v24-2-0:#0070ff;
|
|
43
|
+
--magritte-color-stroke-state-focused-accessible-v24-2-0:#0070ff7a;
|
|
44
|
+
--magritte-color-stroke-state-neutral-disabled-v24-2-0:#dce3eb7a;
|
|
45
|
+
--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-2-0:#ff4d3a7a;
|
|
64
46
|
}
|
|
65
47
|
|
|
66
48
|
.magritte-night-theme{
|
|
67
|
-
--magritte-color-background-primary-v24-
|
|
68
|
-
--magritte-color-
|
|
69
|
-
--magritte-color-stroke-
|
|
49
|
+
--magritte-color-background-primary-v24-2-0:#1B1B1B;
|
|
50
|
+
--magritte-color-background-state-primary-disabled-v24-2-0:#1b1b1b7a;
|
|
51
|
+
--magritte-color-stroke-neutral-v24-2-0:#303030;
|
|
52
|
+
--magritte-color-stroke-accent-v24-2-0:#2b7fff;
|
|
53
|
+
--magritte-color-stroke-state-neutral-disabled-v24-2-0:#3030307a;
|
|
70
54
|
}
|
|
71
55
|
|
|
72
56
|
.magritte-zp-day-theme{
|
|
73
|
-
--magritte-color-stroke-accent-v24-
|
|
57
|
+
--magritte-color-stroke-accent-v24-2-0:#7195AF;
|
|
74
58
|
}
|
|
75
|
-
.magritte-root___FV1tC_4-
|
|
59
|
+
.magritte-root___FV1tC_4-1-1{
|
|
76
60
|
position:relative;
|
|
77
61
|
display:flex;
|
|
78
62
|
overflow:hidden;
|
|
79
63
|
border-radius:24px;
|
|
80
|
-
background-color:var(--magritte-color-background-primary-v24-
|
|
81
|
-
}
|
|
82
|
-
.magritte-root___FV1tC_4-0-34:hover{
|
|
64
|
+
background-color:var(--magritte-color-background-primary-v24-2-0);
|
|
83
65
|
cursor:pointer;
|
|
84
66
|
}
|
|
85
|
-
.magritte-root___FV1tC_4-
|
|
86
|
-
border-color:var(--magritte-color-stroke-accent-v24-
|
|
67
|
+
.magritte-root___FV1tC_4-1-1:hover .magritte-background___RfZ0U_4-1-1{
|
|
68
|
+
border-color:var(--magritte-color-stroke-accent-v24-2-0);
|
|
87
69
|
}
|
|
88
|
-
.magritte-root___FV1tC_4-
|
|
89
|
-
border-color:var(--magritte-color-stroke-accent-v24-
|
|
70
|
+
.magritte-root___FV1tC_4-1-1.magritte-drag-active___dihBL_4-1-1 .magritte-background___RfZ0U_4-1-1{
|
|
71
|
+
border-color:var(--magritte-color-stroke-accent-v24-2-0);
|
|
90
72
|
}
|
|
91
|
-
.magritte-root___FV1tC_4-
|
|
92
|
-
outline:var(--magritte-color-stroke-state-focused-accessible-v24-
|
|
73
|
+
.magritte-root___FV1tC_4-1-1.focus-visible{
|
|
74
|
+
outline:var(--magritte-color-stroke-state-focused-accessible-v24-2-0) solid 4px;
|
|
93
75
|
}
|
|
94
|
-
.magritte-root___FV1tC_4-
|
|
95
|
-
border-color:var(--magritte-color-stroke-accent-v24-
|
|
76
|
+
.magritte-root___FV1tC_4-1-1.focus-visible .magritte-background___RfZ0U_4-1-1{
|
|
77
|
+
border-color:var(--magritte-color-stroke-accent-v24-2-0);
|
|
96
78
|
}
|
|
97
|
-
.magritte-root___FV1tC_4-
|
|
98
|
-
.magritte-root___FV1tC_4-
|
|
79
|
+
.magritte-root___FV1tC_4-1-1.magritte-load___MghDA_4-1-1 .magritte-background___RfZ0U_4-1-1,
|
|
80
|
+
.magritte-root___FV1tC_4-1-1.magritte-loading___9E3p-_4-1-1 .magritte-background___RfZ0U_4-1-1{
|
|
99
81
|
border-style:solid;
|
|
100
82
|
border-width:7px;
|
|
101
83
|
}
|
|
102
|
-
.magritte-root___FV1tC_4-
|
|
103
|
-
outline:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-
|
|
84
|
+
.magritte-root___FV1tC_4-1-1.magritte-invalid___Rt10-_4-1-1.focus-visible{
|
|
85
|
+
outline:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-2-0) solid 4px;
|
|
86
|
+
}
|
|
87
|
+
.magritte-root___FV1tC_4-1-1.magritte-invalid___Rt10-_4-1-1 .magritte-background___RfZ0U_4-1-1{
|
|
88
|
+
border-color:var(--magritte-color-stroke-neutral-v24-2-0);
|
|
104
89
|
}
|
|
105
|
-
.magritte-root___FV1tC_4-
|
|
106
|
-
|
|
90
|
+
.magritte-root___FV1tC_4-1-1.magritte-disabled___bhw2K_4-1-1{
|
|
91
|
+
cursor:default;
|
|
92
|
+
background-color:var(--magritte-color-background-state-primary-disabled-v24-2-0);
|
|
93
|
+
}
|
|
94
|
+
.magritte-root___FV1tC_4-1-1.magritte-disabled___bhw2K_4-1-1 .magritte-background___RfZ0U_4-1-1{
|
|
95
|
+
border-color:var(--magritte-color-stroke-state-neutral-disabled-v24-2-0);
|
|
96
|
+
border-width:8px;
|
|
107
97
|
}
|
|
108
|
-
.magritte-root_medium___67WJa_4-
|
|
98
|
+
.magritte-root_medium___67WJa_4-1-1{
|
|
109
99
|
justify-content:center;
|
|
110
100
|
padding:24px;
|
|
111
101
|
}
|
|
112
|
-
.magritte-root_medium___67WJa_4-
|
|
102
|
+
.magritte-root_medium___67WJa_4-1-1 .magritte-body___O7ROl_4-1-1{
|
|
113
103
|
flex-direction:column;
|
|
114
104
|
align-items:center;
|
|
115
105
|
justify-content:center;
|
|
116
106
|
}
|
|
117
|
-
.magritte-root_small___dkUYq_4-
|
|
107
|
+
.magritte-root_small___dkUYq_4-1-1{
|
|
118
108
|
padding-top:16px;
|
|
119
109
|
padding-bottom:16px;
|
|
120
110
|
padding-left:16px;
|
|
121
111
|
}
|
|
122
|
-
.magritte-root_small___dkUYq_4-
|
|
112
|
+
.magritte-root_small___dkUYq_4-1-1 .magritte-body___O7ROl_4-1-1{
|
|
123
113
|
gap:16px;
|
|
124
114
|
}
|
|
125
|
-
.magritte-background___RfZ0U_4-
|
|
115
|
+
.magritte-background___RfZ0U_4-1-1{
|
|
126
116
|
position:absolute;
|
|
127
117
|
border-width:8px;
|
|
128
118
|
border-style:dashed;
|
|
129
|
-
border-color:var(--magritte-color-stroke-neutral-v24-
|
|
119
|
+
border-color:var(--magritte-color-stroke-neutral-v24-2-0);
|
|
130
120
|
top:-6px;
|
|
131
121
|
bottom:-6px;
|
|
132
122
|
left:-6px;
|
|
@@ -135,15 +125,15 @@
|
|
|
135
125
|
background-position:center;
|
|
136
126
|
background-size:100%;
|
|
137
127
|
}
|
|
138
|
-
.magritte-body___O7ROl_4-
|
|
128
|
+
.magritte-body___O7ROl_4-1-1{
|
|
139
129
|
display:flex;
|
|
140
130
|
width:100%;
|
|
141
131
|
}
|
|
142
|
-
.magritte-loader___XYpWg_4-
|
|
132
|
+
.magritte-loader___XYpWg_4-1-1{
|
|
143
133
|
position:relative;
|
|
144
134
|
display:flex;
|
|
145
135
|
}
|
|
146
|
-
.magritte-cancel___tQ-yX_4-
|
|
136
|
+
.magritte-cancel___tQ-yX_4-1-1{
|
|
147
137
|
position:absolute;
|
|
148
138
|
top:0;
|
|
149
139
|
left:0;
|
|
@@ -153,37 +143,37 @@
|
|
|
153
143
|
align-items:center;
|
|
154
144
|
justify-content:center;
|
|
155
145
|
}
|
|
156
|
-
.magritte-image-controls___vLf94_4-
|
|
146
|
+
.magritte-image-controls___vLf94_4-1-1{
|
|
157
147
|
display:flex;
|
|
158
148
|
gap:12px;
|
|
159
149
|
align-items:flex-end;
|
|
160
150
|
justify-content:flex-end;
|
|
161
151
|
width:100%;
|
|
162
152
|
}
|
|
163
|
-
.magritte-small-controls___Qn9TP_4-
|
|
153
|
+
.magritte-small-controls___Qn9TP_4-1-1{
|
|
164
154
|
display:flex;
|
|
165
155
|
align-items:center;
|
|
166
156
|
margin-left:auto;
|
|
167
157
|
margin-right:20px;
|
|
168
158
|
}
|
|
169
|
-
.magritte-file-list___L9uHt_4-
|
|
159
|
+
.magritte-file-list___L9uHt_4-1-1{
|
|
170
160
|
margin-top:12px;
|
|
171
|
-
box-shadow:inset 0 0 0 1px var(--magritte-color-stroke-neutral-v24-
|
|
161
|
+
box-shadow:inset 0 0 0 1px var(--magritte-color-stroke-neutral-v24-2-0);
|
|
172
162
|
border-radius:24px;
|
|
173
163
|
padding-top:16px;
|
|
174
164
|
padding-right:0;
|
|
175
165
|
padding-bottom:16px;
|
|
176
166
|
padding-left:16px;
|
|
177
167
|
}
|
|
178
|
-
.magritte-file-icon___oetLK_4-
|
|
168
|
+
.magritte-file-icon___oetLK_4-1-1{
|
|
179
169
|
display:inline-flex;
|
|
180
170
|
}
|
|
181
|
-
.magritte-file-info___Y3vyi_4-
|
|
171
|
+
.magritte-file-info___Y3vyi_4-1-1{
|
|
182
172
|
display:inline-flex;
|
|
183
173
|
width:100%;
|
|
184
174
|
flex-direction:column;
|
|
185
175
|
align-items:center;
|
|
186
176
|
}
|
|
187
|
-
.magritte-hidden-file-info___92c69_4-
|
|
177
|
+
.magritte-hidden-file-info___92c69_4-1-1{
|
|
188
178
|
visibility:hidden;
|
|
189
179
|
}
|
package/index.js
CHANGED
|
@@ -4,7 +4,10 @@ import 'react/jsx-runtime';
|
|
|
4
4
|
import './MultiUpload.js';
|
|
5
5
|
import 'react-dropzone';
|
|
6
6
|
import 'classnames';
|
|
7
|
+
import './upload-CHi2Wl3F.js';
|
|
8
|
+
import 'react';
|
|
7
9
|
import '@hh.ru/magritte-ui-spacing';
|
|
10
|
+
import '@hh.ru/magritte-ui-typography';
|
|
8
11
|
import './FileViewWithPreview.js';
|
|
9
12
|
import './FileView.js';
|
|
10
13
|
import '@hh.ru/magritte-ui-avatar';
|
|
@@ -14,12 +17,9 @@ import '@hh.ru/magritte-ui-loader';
|
|
|
14
17
|
import './FileName.js';
|
|
15
18
|
import './utils.js';
|
|
16
19
|
import './useFilePreview.js';
|
|
17
|
-
import 'react';
|
|
18
20
|
import './Placeholder.js';
|
|
19
21
|
import '@hh.ru/magritte-ui-breakpoint';
|
|
20
|
-
import '@hh.ru/magritte-ui-typography';
|
|
21
22
|
import './useDropActions.js';
|
|
22
23
|
import './useDropButtons.js';
|
|
23
|
-
import './upload-DwqYxKc7.js';
|
|
24
24
|
import './SingleUpload.js';
|
|
25
25
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-upload",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.1.1",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -26,18 +26,18 @@
|
|
|
26
26
|
"react": ">=18.2.0"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@hh.ru/magritte-design-tokens": "24.
|
|
30
|
-
"@hh.ru/magritte-ui-avatar": "8.0.
|
|
29
|
+
"@hh.ru/magritte-design-tokens": "24.2.0",
|
|
30
|
+
"@hh.ru/magritte-ui-avatar": "8.0.10",
|
|
31
31
|
"@hh.ru/magritte-ui-breakpoint": "6.0.2",
|
|
32
|
-
"@hh.ru/magritte-ui-button": "7.0.
|
|
33
|
-
"@hh.ru/magritte-ui-button-stack": "2.1.
|
|
34
|
-
"@hh.ru/magritte-ui-divider": "3.0.
|
|
35
|
-
"@hh.ru/magritte-ui-icon": "13.7.
|
|
36
|
-
"@hh.ru/magritte-ui-loader": "2.0.
|
|
32
|
+
"@hh.ru/magritte-ui-button": "7.0.5",
|
|
33
|
+
"@hh.ru/magritte-ui-button-stack": "2.1.100",
|
|
34
|
+
"@hh.ru/magritte-ui-divider": "3.0.14",
|
|
35
|
+
"@hh.ru/magritte-ui-icon": "13.7.1",
|
|
36
|
+
"@hh.ru/magritte-ui-loader": "2.0.28",
|
|
37
37
|
"@hh.ru/magritte-ui-mock-component": "1.1.6",
|
|
38
|
-
"@hh.ru/magritte-ui-spacing": "2.1.
|
|
39
|
-
"@hh.ru/magritte-ui-typography": "4.
|
|
38
|
+
"@hh.ru/magritte-ui-spacing": "2.1.4",
|
|
39
|
+
"@hh.ru/magritte-ui-typography": "4.4.1",
|
|
40
40
|
"react-dropzone": "14.3.5"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "0af05782836ddce89964e68dd0d7d034c2e467cd"
|
|
43
43
|
}
|
package/types.d.ts
CHANGED
|
@@ -24,23 +24,7 @@ export interface OnFileDelete {
|
|
|
24
24
|
(event: MouseEvent, loadedFile: LoadedFile | undefined, indexFile: number): void;
|
|
25
25
|
}
|
|
26
26
|
type DropzoneOptionsHepler = Omit<DropzoneOptions, 'onDropAccepted' | 'onDropRejected'>;
|
|
27
|
-
interface
|
|
28
|
-
/** Размер Upload */
|
|
29
|
-
size: 'medium';
|
|
30
|
-
/** Флаг включения мультивыбора */
|
|
31
|
-
multiple?: boolean;
|
|
32
|
-
/** Кнопка удаления файла */
|
|
33
|
-
deleteFileButton?: ButtonElement;
|
|
34
|
-
/** Кнопка замены файла */
|
|
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 {
|
|
27
|
+
export interface UploadProps extends DropzoneOptionsHepler {
|
|
44
28
|
/** Список файлов */
|
|
45
29
|
files: LoadedFile[];
|
|
46
30
|
/** Переводы для зоны загрузки */
|
|
@@ -55,8 +39,19 @@ export interface BaseUploadProps extends DropzoneOptionsHepler {
|
|
|
55
39
|
onDropRejected?: (files: LoadedFile[], event: DropEvent) => void;
|
|
56
40
|
/** Render функция для отображения информации о состоянии файла */
|
|
57
41
|
renderFileInfo?: RenderFileInfo;
|
|
42
|
+
/** Управляет отображением контрола прерывания загрузки */
|
|
43
|
+
disableCancel?: boolean;
|
|
44
|
+
/** Позволяет отключить контрол */
|
|
45
|
+
disabled?: boolean;
|
|
58
46
|
/** Aria label для аватара на размере small */
|
|
59
47
|
'aria-label'?: string;
|
|
48
|
+
/** Размер Upload */
|
|
49
|
+
size: 'medium' | 'small';
|
|
50
|
+
/** Флаг включения мультивыбора, работает только для `size="medium"` */
|
|
51
|
+
multiple?: boolean;
|
|
52
|
+
/** Кнопка удаления файла, работает только для `size="medium"` */
|
|
53
|
+
deleteFileButton?: ButtonElement;
|
|
54
|
+
/** Кнопка замены файла, работает только для `size="medium"` */
|
|
55
|
+
replaceImageButton?: ButtonElement;
|
|
60
56
|
}
|
|
61
|
-
export type UploadProps = BaseUploadProps & (MediumUploadProps | SmallUploadProps);
|
|
62
57
|
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
import { createContext, useContext } from 'react';
|
|
3
|
+
|
|
4
|
+
const DisabledContext = createContext(false);
|
|
5
|
+
const useDisabled = () => useContext(DisabledContext);
|
|
6
|
+
|
|
7
|
+
var styles = {"root":"magritte-root___FV1tC_4-1-1","background":"magritte-background___RfZ0U_4-1-1","drag-active":"magritte-drag-active___dihBL_4-1-1","dragActive":"magritte-drag-active___dihBL_4-1-1","load":"magritte-load___MghDA_4-1-1","loading":"magritte-loading___9E3p-_4-1-1","invalid":"magritte-invalid___Rt10-_4-1-1","disabled":"magritte-disabled___bhw2K_4-1-1","root_medium":"magritte-root_medium___67WJa_4-1-1","rootMedium":"magritte-root_medium___67WJa_4-1-1","body":"magritte-body___O7ROl_4-1-1","root_small":"magritte-root_small___dkUYq_4-1-1","rootSmall":"magritte-root_small___dkUYq_4-1-1","loader":"magritte-loader___XYpWg_4-1-1","cancel":"magritte-cancel___tQ-yX_4-1-1","image-controls":"magritte-image-controls___vLf94_4-1-1","imageControls":"magritte-image-controls___vLf94_4-1-1","small-controls":"magritte-small-controls___Qn9TP_4-1-1","smallControls":"magritte-small-controls___Qn9TP_4-1-1","file-list":"magritte-file-list___L9uHt_4-1-1","fileList":"magritte-file-list___L9uHt_4-1-1","file-icon":"magritte-file-icon___oetLK_4-1-1","fileIcon":"magritte-file-icon___oetLK_4-1-1","file-info":"magritte-file-info___Y3vyi_4-1-1","fileInfo":"magritte-file-info___Y3vyi_4-1-1","hidden-file-info":"magritte-hidden-file-info___92c69_4-1-1","hiddenFileInfo":"magritte-hidden-file-info___92c69_4-1-1"};
|
|
8
|
+
|
|
9
|
+
export { DisabledContext as D, styles as s, useDisabled as u };
|
|
10
|
+
//# sourceMappingURL=upload-CHi2Wl3F.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"upload-CHi2Wl3F.js","sources":["../../../common/use-disabled/lib/index.js"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nconst DisabledContext = createContext(false);\nconst useDisabled = () => useContext(DisabledContext);\n\nexport { DisabledContext, useDisabled };\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":";;AAEK,MAAC,eAAe,GAAG,aAAa,CAAC,KAAK,EAAE;AACxC,MAAC,WAAW,GAAG,MAAM,UAAU,CAAC,eAAe;;;;;;"}
|
package/utils.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { ImageOutlinedSize24, ImageOutlinedSize32, VideocameraOutlinedSize24, VideocameraOutlinedSize32,
|
|
3
|
+
import { IconDynamic, DocumentOutlinedSize24, DocumentOutlinedSize32, ImageOutlinedSize24, ImageOutlinedSize32, VideocameraOutlinedSize24, VideocameraOutlinedSize32, DocumentArrowUpOutlinedSize24, DocumentArrowUpOutlinedSize32 } from '@hh.ru/magritte-ui-icon/icon';
|
|
4
4
|
|
|
5
5
|
const RenderFileInfoDefault = (loadedFile) => {
|
|
6
6
|
return loadedFile.fileSizeMB;
|
|
@@ -26,27 +26,47 @@ const getAvaliableFileTypes = (accept) => {
|
|
|
26
26
|
}
|
|
27
27
|
return getFileType(avaliableTypes[0]);
|
|
28
28
|
};
|
|
29
|
+
const ICONS_LOADED = {
|
|
30
|
+
default: {
|
|
31
|
+
small: DocumentOutlinedSize24,
|
|
32
|
+
large: DocumentOutlinedSize32,
|
|
33
|
+
},
|
|
34
|
+
image: {
|
|
35
|
+
small: ImageOutlinedSize24,
|
|
36
|
+
large: ImageOutlinedSize32,
|
|
37
|
+
},
|
|
38
|
+
video: {
|
|
39
|
+
small: VideocameraOutlinedSize24,
|
|
40
|
+
large: VideocameraOutlinedSize32,
|
|
41
|
+
},
|
|
42
|
+
};
|
|
43
|
+
const ICONS_NOT_LOADED = {
|
|
44
|
+
default: {
|
|
45
|
+
small: DocumentArrowUpOutlinedSize24,
|
|
46
|
+
large: DocumentArrowUpOutlinedSize32,
|
|
47
|
+
},
|
|
48
|
+
image: {
|
|
49
|
+
small: ImageOutlinedSize24,
|
|
50
|
+
large: ImageOutlinedSize32,
|
|
51
|
+
},
|
|
52
|
+
video: {
|
|
53
|
+
small: ImageOutlinedSize24,
|
|
54
|
+
large: ImageOutlinedSize32,
|
|
55
|
+
},
|
|
56
|
+
};
|
|
29
57
|
// иконка (тип и цвет) может меняться в зависимости от типа, размера и состояния загрузки
|
|
30
58
|
const getUploadIcon = (uploadType, loadedFile, isSmall) => {
|
|
59
|
+
const MAP = loadedFile ? ICONS_LOADED : ICONS_NOT_LOADED;
|
|
31
60
|
if (loadedFile) {
|
|
32
61
|
const { error, loading } = loadedFile;
|
|
33
62
|
if ((loading || error) && !isSmall) {
|
|
34
63
|
return undefined;
|
|
35
64
|
}
|
|
36
|
-
if (uploadType === 'image') {
|
|
37
|
-
return isSmall ? (jsx(ImageOutlinedSize24, { initialColor: "accent" })) : (jsx(ImageOutlinedSize32, { initialColor: "secondary" }));
|
|
38
|
-
}
|
|
39
|
-
if (uploadType === 'video') {
|
|
40
|
-
return isSmall ? (jsx(VideocameraOutlinedSize24, { initialColor: "accent" })) : (jsx(VideocameraOutlinedSize32, { initialColor: "secondary" }));
|
|
41
|
-
}
|
|
42
|
-
// mixed, application
|
|
43
|
-
return isSmall ? (jsx(DocumentOutlinedSize24, { initialColor: "accent" })) : (jsx(DocumentOutlinedSize32, { initialColor: "secondary" }));
|
|
44
|
-
}
|
|
45
|
-
if (uploadType === 'video' || uploadType === 'image') {
|
|
46
|
-
return isSmall ? (jsx(ImageOutlinedSize24, { initialColor: "secondary" })) : (jsx(ImageOutlinedSize32, { initialColor: "secondary" }));
|
|
47
65
|
}
|
|
48
|
-
|
|
49
|
-
|
|
66
|
+
const component = MAP[uploadType] ?? MAP.default;
|
|
67
|
+
const IconJSX = component[isSmall ? 'small' : 'large'];
|
|
68
|
+
const color = isSmall && loadedFile ? 'accent' : 'secondary';
|
|
69
|
+
return (jsx(IconDynamic, { children: jsx(IconJSX, { initialColor: color, disabledColor: color }) }));
|
|
50
70
|
};
|
|
51
71
|
|
|
52
72
|
export { DEFAULT_ACCEPT, RenderFileInfoDefault, bytes2mb, getAvaliableFileTypes, getFileType, getUploadIcon };
|
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 ImageOutlinedSize32,\n DocumentArrowUpOutlinedSize24,\n DocumentOutlinedSize24,\n VideocameraOutlinedSize24,\n ImageOutlinedSize24,\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
|
|
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 ImageOutlinedSize32,\n DocumentArrowUpOutlinedSize24,\n DocumentOutlinedSize24,\n VideocameraOutlinedSize24,\n ImageOutlinedSize24,\n IconDynamic,\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\nconst ICONS_LOADED = {\n default: {\n small: DocumentOutlinedSize24,\n large: DocumentOutlinedSize32,\n },\n image: {\n small: ImageOutlinedSize24,\n large: ImageOutlinedSize32,\n },\n video: {\n small: VideocameraOutlinedSize24,\n large: VideocameraOutlinedSize32,\n },\n} as const;\n\nconst ICONS_NOT_LOADED = {\n default: {\n small: DocumentArrowUpOutlinedSize24,\n large: DocumentArrowUpOutlinedSize32,\n },\n image: {\n small: ImageOutlinedSize24,\n large: ImageOutlinedSize32,\n },\n video: {\n small: ImageOutlinedSize24,\n large: ImageOutlinedSize32,\n },\n} as const;\n\n// иконка (тип и цвет) может меняться в зависимости от типа, размера и состояния загрузки\nexport const getUploadIcon = (\n uploadType: UploadType,\n loadedFile: LoadedFile | undefined,\n isSmall: boolean\n): ReactElement | undefined => {\n const MAP = loadedFile ? ICONS_LOADED : ICONS_NOT_LOADED;\n\n if (loadedFile) {\n const { error, loading } = loadedFile;\n if ((loading || error) && !isSmall) {\n return undefined;\n }\n }\n\n const component = MAP[uploadType as keyof typeof MAP] ?? MAP.default;\n const IconJSX = component[isSmall ? 'small' : 'large'];\n const color = isSmall && loadedFile ? 'accent' : 'secondary';\n\n return (\n <IconDynamic>\n <IconJSX initialColor={color} disabledColor={color} />\n </IconDynamic>\n );\n};\n"],"names":["_jsx"],"mappings":";;;AAgBa,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,MAAM,YAAY,GAAG;AACjB,IAAA,OAAO,EAAE;AACL,QAAA,KAAK,EAAE,sBAAsB;AAC7B,QAAA,KAAK,EAAE,sBAAsB;AAChC,KAAA;AACD,IAAA,KAAK,EAAE;AACH,QAAA,KAAK,EAAE,mBAAmB;AAC1B,QAAA,KAAK,EAAE,mBAAmB;AAC7B,KAAA;AACD,IAAA,KAAK,EAAE;AACH,QAAA,KAAK,EAAE,yBAAyB;AAChC,QAAA,KAAK,EAAE,yBAAyB;AACnC,KAAA;CACK,CAAC;AAEX,MAAM,gBAAgB,GAAG;AACrB,IAAA,OAAO,EAAE;AACL,QAAA,KAAK,EAAE,6BAA6B;AACpC,QAAA,KAAK,EAAE,6BAA6B;AACvC,KAAA;AACD,IAAA,KAAK,EAAE;AACH,QAAA,KAAK,EAAE,mBAAmB;AAC1B,QAAA,KAAK,EAAE,mBAAmB;AAC7B,KAAA;AACD,IAAA,KAAK,EAAE;AACH,QAAA,KAAK,EAAE,mBAAmB;AAC1B,QAAA,KAAK,EAAE,mBAAmB;AAC7B,KAAA;CACK,CAAC;AAEX;AACa,MAAA,aAAa,GAAG,CACzB,UAAsB,EACtB,UAAkC,EAClC,OAAgB,KACU;IAC1B,MAAM,GAAG,GAAG,UAAU,GAAG,YAAY,GAAG,gBAAgB,CAAC;IAEzD,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;KACJ;IAED,MAAM,SAAS,GAAG,GAAG,CAAC,UAA8B,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC;AACrE,IAAA,MAAM,OAAO,GAAG,SAAS,CAAC,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC;AACvD,IAAA,MAAM,KAAK,GAAG,OAAO,IAAI,UAAU,GAAG,QAAQ,GAAG,WAAW,CAAC;AAE7D,IAAA,QACIA,GAAC,CAAA,WAAW,EACR,EAAA,QAAA,EAAAA,GAAA,CAAC,OAAO,EAAC,EAAA,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAI,CAAA,EAAA,CAC5C,EAChB;AACN;;;;"}
|
package/upload-DwqYxKc7.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
var styles = {"root":"magritte-root___FV1tC_4-0-34","background":"magritte-background___RfZ0U_4-0-34","drag-active":"magritte-drag-active___dihBL_4-0-34","dragActive":"magritte-drag-active___dihBL_4-0-34","load":"magritte-load___MghDA_4-0-34","loading":"magritte-loading___9E3p-_4-0-34","invalid":"magritte-invalid___Rt10-_4-0-34","root_medium":"magritte-root_medium___67WJa_4-0-34","rootMedium":"magritte-root_medium___67WJa_4-0-34","body":"magritte-body___O7ROl_4-0-34","root_small":"magritte-root_small___dkUYq_4-0-34","rootSmall":"magritte-root_small___dkUYq_4-0-34","loader":"magritte-loader___XYpWg_4-0-34","cancel":"magritte-cancel___tQ-yX_4-0-34","image-controls":"magritte-image-controls___vLf94_4-0-34","imageControls":"magritte-image-controls___vLf94_4-0-34","small-controls":"magritte-small-controls___Qn9TP_4-0-34","smallControls":"magritte-small-controls___Qn9TP_4-0-34","file-list":"magritte-file-list___L9uHt_4-0-34","fileList":"magritte-file-list___L9uHt_4-0-34","file-icon":"magritte-file-icon___oetLK_4-0-34","fileIcon":"magritte-file-icon___oetLK_4-0-34","file-info":"magritte-file-info___Y3vyi_4-0-34","fileInfo":"magritte-file-info___Y3vyi_4-0-34","hidden-file-info":"magritte-hidden-file-info___92c69_4-0-34","hiddenFileInfo":"magritte-hidden-file-info___92c69_4-0-34"};
|
|
3
|
-
|
|
4
|
-
export { styles as s };
|
|
5
|
-
//# sourceMappingURL=upload-DwqYxKc7.js.map
|
package/upload-DwqYxKc7.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"upload-DwqYxKc7.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|