@ozen-ui/kit
Version:
React component library
54 lines (53 loc) • 3.4 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { useRef } from 'react';
import { UploadIcon } from '@ozen-ui/icons';
import { useMultiRef } from '../../../../hooks/useMultiRef';
import { useThemeProps } from '../../../../hooks/useThemeProps';
import { cn } from '../../../../utils/classname';
import { polymorphicComponentWithRef } from '../../../../utils/polymorphicComponentWithRef';
import { renderContent } from '../../../../utils/renderContent';
import { useFileUploaderContext } from '../../context';
import { useAsFileUploaderDropZone } from '../../hooks';
import { FileUploaderLoader } from '../FileUploaderLoader';
import { FileUploaderUploadButton } from '../FileUploaderUploadButton';
import { FILE_UPLOADER_DROP_DEFAULT_TAG, FILE_UPLOADER_DROP_DEFAULT_WITH_REACTION_TO_CLICK, FILE_UPLOADER_SIZE_TO_DROP_ICON_SIZE, } from './constants';
export var cnFileUploaderDrop = cn('FileUploaderDrop');
export var FileUploaderDrop = polymorphicComponentWithRef(function (inProps, ref) {
var props = useThemeProps({
props: inProps,
name: 'FileUploaderDrop',
});
var children = props.children, className = props.className, _a = props.as, Tag = _a === void 0 ? FILE_UPLOADER_DROP_DEFAULT_TAG : _a, label = props.label, hint = props.hint, _b = props.icon, icon = _b === void 0 ? UploadIcon : _b, button = props.button, _c = props.withReactionToClick, withReactionToClick = _c === void 0 ? FILE_UPLOADER_DROP_DEFAULT_WITH_REACTION_TO_CLICK : _c, _d = props.loader, loader = _d === void 0 ? React.createElement(FileUploaderLoader, null) : _d, other = __rest(props, ["children", "className", "as", "label", "hint", "icon", "button", "withReactionToClick", "loader"]);
var _e = useFileUploaderContext(), dragging = _e.dragging, size = _e.size, variant = _e.variant, status = _e.status, openUploader = _e.openUploader;
var internalRef = useRef(null);
useAsFileUploaderDropZone(internalRef, {
isWithReactionToClick: withReactionToClick,
});
var isLoading = status === 'loading';
return (React.createElement(Tag, __assign({}, other, { ref: useMultiRef([ref, internalRef]), className: cnFileUploaderDrop({
size: size,
dragging: dragging,
variant: variant,
status: status,
withReactionToClick: withReactionToClick,
}, [className]) }),
isLoading ? (loader) : (React.createElement(React.Fragment, null,
icon && (React.createElement("div", { className: cnFileUploaderDrop('Icon') }, renderContent({
content: icon,
props: {
size: FILE_UPLOADER_SIZE_TO_DROP_ICON_SIZE[size],
onClick: function (event) {
if (withReactionToClick) {
return;
}
event.stopPropagation();
openUploader();
},
},
}))),
React.createElement("div", { className: cnFileUploaderDrop('Label') }, label),
hint && React.createElement("div", { className: cnFileUploaderDrop('Hint') }, hint),
button && (React.createElement(FileUploaderUploadButton, { className: cnFileUploaderDrop('Button'), disableOpen: withReactionToClick }, button)))),
children));
});
FileUploaderDrop.displayName = 'FileUploaderDrop';