tycho-components 0.0.15-SNAPSHOT-13 → 0.0.15-SNAPSHOT-14
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.
|
@@ -9,6 +9,10 @@ type Props = {
|
|
|
9
9
|
onDrop?: () => void;
|
|
10
10
|
keepName?: boolean;
|
|
11
11
|
title?: string;
|
|
12
|
+
alternativeButton?: {
|
|
13
|
+
title: string;
|
|
14
|
+
action: () => void;
|
|
15
|
+
};
|
|
12
16
|
};
|
|
13
|
-
export default function AppDropzone({ folder, onClose, onSuccess, onError, accept, onDrop, keepName, title, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export default function AppDropzone({ folder, onClose, onSuccess, onError, accept, onDrop, keepName, title, alternativeButton, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
14
18
|
export {};
|
|
@@ -6,7 +6,7 @@ import './style.scss';
|
|
|
6
6
|
import UploadService from './UploadService';
|
|
7
7
|
import { useMessageUtils } from '../configs/useMessageUtils';
|
|
8
8
|
import AppModal from '../AppModal';
|
|
9
|
-
export default function AppDropzone({ folder, onClose, onSuccess, onError, accept, onDrop, keepName, title, }) {
|
|
9
|
+
export default function AppDropzone({ folder, onClose, onSuccess, onError, accept, onDrop, keepName, title, alternativeButton, }) {
|
|
10
10
|
const { t } = useTranslation('upload');
|
|
11
11
|
const { dispatchError } = useMessageUtils();
|
|
12
12
|
const [file, setFile] = useState();
|
|
@@ -37,7 +37,7 @@ export default function AppDropzone({ folder, onClose, onSuccess, onError, accep
|
|
|
37
37
|
onError && onError(err);
|
|
38
38
|
});
|
|
39
39
|
};
|
|
40
|
-
return (_jsx(AppModal, { title: title || t('modal.title'), className: "modal-upload", close: onClose, confirm: upload, children: _jsxs("div", { className: "dropzone-container", children: [!file && (_jsx(Dropzone, { onDrop: (acceptedFiles) => handleDrop(acceptedFiles), accept: accept, maxFiles: 1, children: ({ getRootProps, getInputProps }) => (_jsxs("div", { ...getRootProps(), className: "dropzone", children: [_jsx("input", { ...getInputProps() }), _jsx("span", { children: t('label.dropzone') })] })) })), file && preview && (_jsx("img", { className: "preview", src: preview, onLoad: () => {
|
|
40
|
+
return (_jsx(AppModal, { title: title || t('modal.title'), className: "modal-upload", close: onClose, confirm: upload, alternativeButton: alternativeButton, children: _jsxs("div", { className: "dropzone-container", children: [!file && (_jsx(Dropzone, { onDrop: (acceptedFiles) => handleDrop(acceptedFiles), accept: accept, maxFiles: 1, children: ({ getRootProps, getInputProps }) => (_jsxs("div", { ...getRootProps(), className: "dropzone", children: [_jsx("input", { ...getInputProps() }), _jsx("span", { children: t('label.dropzone') })] })) })), file && preview && (_jsx("img", { className: "preview", src: preview, onLoad: () => {
|
|
41
41
|
URL.revokeObjectURL(preview);
|
|
42
42
|
} })), file && !preview && (_jsxs("div", { className: "uploaded-message", children: [_jsx("b", { children: t('label.uploaded.file') }), _jsx("span", { children: file.name }), _jsx("b", { children: t('label.confirm') })] }))] }) }));
|
|
43
43
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import './style.scss';
|
|
3
2
|
type Props = {
|
|
4
3
|
children: React.ReactNode;
|
|
@@ -15,6 +14,10 @@ type Props = {
|
|
|
15
14
|
confirmLabel?: string;
|
|
16
15
|
closeLabel?: string;
|
|
17
16
|
onEntered?: () => void;
|
|
17
|
+
alternativeButton?: {
|
|
18
|
+
title: string;
|
|
19
|
+
action: () => void;
|
|
20
|
+
};
|
|
18
21
|
};
|
|
19
|
-
export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, alternativeButton, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
20
23
|
export {};
|
|
@@ -4,10 +4,10 @@ import cx from 'classnames';
|
|
|
4
4
|
import { useTranslation } from 'react-i18next';
|
|
5
5
|
import { Button, Icon } from 'tycho-storybook';
|
|
6
6
|
import './style.scss';
|
|
7
|
-
export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, }) {
|
|
7
|
+
export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, alternativeButton, }) {
|
|
8
8
|
const { t } = useTranslation('common');
|
|
9
9
|
const getClassNames = cx('modal-container', className);
|
|
10
|
-
return (_jsx(Modal, { open: true, disableEnforceFocus: true, disableAutoFocus: true, disableRestoreFocus: true, children: _jsx(Fade, { in: true, onEntered: () => onEntered && onEntered(), children: _jsxs(Box, { className: getClassNames, sx: style, children: [_jsxs("div", { className: "header", children: [_jsxs("div", { className: "titles", children: [_jsx("span", { className: "title", children: title }), subtitle && _jsx("span", { className: "subtitle", children: subtitle })] }), !disableClose && (_jsx(Icon, { name: "close", onClick: close, className: "pointer" }))] }), _jsx("div", { className: "body", children: children }), !hideFooter ? (_jsxs("div", { className: "footer", children: [!disableCancel && (_jsx(Button, { onClick: cancel || close, text: closeLabel || t('button.cancel'), color: "danger" })), confirm && (_jsx(Button, { onClick: confirm, disabled: disableConfirm, text: confirmLabel || t('button.confirm') }))] })) : null] }) }) }));
|
|
10
|
+
return (_jsx(Modal, { open: true, disableEnforceFocus: true, disableAutoFocus: true, disableRestoreFocus: true, children: _jsx(Fade, { in: true, onEntered: () => onEntered && onEntered(), children: _jsxs(Box, { className: getClassNames, sx: style, children: [_jsxs("div", { className: "header", children: [_jsxs("div", { className: "titles", children: [_jsx("span", { className: "title", children: title }), subtitle && _jsx("span", { className: "subtitle", children: subtitle })] }), !disableClose && (_jsx(Icon, { name: "close", onClick: close, className: "pointer" }))] }), _jsx("div", { className: "body", children: children }), !hideFooter ? (_jsxs("div", { className: "footer", children: [alternativeButton && (_jsx(Button, { className: "alternative", color: "white", onClick: alternativeButton.action, text: alternativeButton.title })), !disableCancel && (_jsx(Button, { onClick: cancel || close, text: closeLabel || t('button.cancel'), color: "danger" })), confirm && (_jsx(Button, { onClick: confirm, disabled: disableConfirm, text: confirmLabel || t('button.confirm') }))] })) : null] }) }) }));
|
|
11
11
|
}
|
|
12
12
|
const style = {
|
|
13
13
|
position: 'absolute',
|