design-react-kit
Version:
Componenti React per Bootstrap 5
53 lines • 3.08 kB
JavaScript
import classNames from 'classnames';
import React from 'react';
import { Icon } from '../Icon/Icon';
import { Progress } from '../Progress/Progress';
import { useUploadContext } from './useUploadContext';
export const UploadListItem = ({ className, icon = 'it-file', uploadStatus = 'success', buttonTag = 'button', progressValue, previewImage, previewImageSrc, previewImageAlt, fileName, fileWeight, children }) => {
const tipologia = useUploadContext(), classes = classNames({
'upload-file': tipologia === 'file',
success: uploadStatus === 'success' && tipologia === 'file',
uploading: uploadStatus === 'uploading' && tipologia === 'file',
error: uploadStatus === 'error' && tipologia === 'file'
}, className), classesProgress = classNames({ 'progress-image': previewImage }), ButtonTag = buttonTag;
const elementiListItem = {
success: {
testoVHFile: 'File caricato:',
testoVHRightIcon: 'Caricamento ultimato',
rightIcon: 'it-check'
},
uploading: {
testoVHFile: 'File caricato:',
testoVHRightIcon: 'Annulla caricamento',
rightIcon: 'it-close'
},
error: {
testoVHFile: 'Errore caricamento file:',
testoVHRightIcon: 'Elimina file caricato',
rightIcon: 'it-close'
}
};
return (React.createElement("li", { className: classes },
children,
previewImage ? (React.createElement("div", { className: 'upload-image' },
React.createElement("img", { src: previewImageSrc, alt: previewImageAlt }))) : (tipologia === 'file' && React.createElement(Icon, { icon: icon, size: 'sm' })),
tipologia === 'file' && (React.createElement(React.Fragment, null,
React.createElement("p", null,
React.createElement("span", { className: 'visually-hidden' }, elementiListItem[uploadStatus].testoVHFile),
fileName,
" ",
uploadStatus === 'success' && React.createElement("span", { className: 'upload-file-weight' }, fileWeight)),
React.createElement(ButtonTag, { disabled: uploadStatus === 'success' ? true : false },
React.createElement("span", { className: 'visually-hidden' }, elementiListItem[uploadStatus].testoVHRightIcon),
React.createElement(Icon, { icon: elementiListItem[uploadStatus].rightIcon })),
uploadStatus === 'uploading' && React.createElement(Progress, { value: progressValue, wrapperClassName: classesProgress })))));
};
const UploadButton = ({ id, children, ...props }) => {
return (React.createElement(React.Fragment, null,
React.createElement("input", { type: 'file', id: id, className: 'upload pictures-wall', multiple: true, ...props }),
React.createElement("label", { htmlFor: id },
React.createElement(Icon, { icon: 'it-plus' }),
React.createElement("span", null, children))));
};
UploadListItem.UploadButton = UploadButton;
//# sourceMappingURL=UploadListItem.js.map