@ozen-ui/kit
Version:
React component library
57 lines (56 loc) • 3.82 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FileUploaderDrop = exports.cnFileUploaderDrop = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var icons_1 = require("@ozen-ui/icons");
var useMultiRef_1 = require("../../../../hooks/useMultiRef");
var useThemeProps_1 = require("../../../../hooks/useThemeProps");
var classname_1 = require("../../../../utils/classname");
var polymorphicComponentWithRef_1 = require("../../../../utils/polymorphicComponentWithRef");
var renderContent_1 = require("../../../../utils/renderContent");
var context_1 = require("../../context");
var hooks_1 = require("../../hooks");
var FileUploaderLoader_1 = require("../FileUploaderLoader");
var FileUploaderUploadButton_1 = require("../FileUploaderUploadButton");
var constants_1 = require("./constants");
exports.cnFileUploaderDrop = (0, classname_1.cn)('FileUploaderDrop');
exports.FileUploaderDrop = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({
props: inProps,
name: 'FileUploaderDrop',
});
var children = props.children, className = props.className, _a = props.as, Tag = _a === void 0 ? constants_1.FILE_UPLOADER_DROP_DEFAULT_TAG : _a, label = props.label, hint = props.hint, _b = props.icon, icon = _b === void 0 ? icons_1.UploadIcon : _b, button = props.button, _c = props.withReactionToClick, withReactionToClick = _c === void 0 ? constants_1.FILE_UPLOADER_DROP_DEFAULT_WITH_REACTION_TO_CLICK : _c, _d = props.loader, loader = _d === void 0 ? react_1.default.createElement(FileUploaderLoader_1.FileUploaderLoader, null) : _d, other = tslib_1.__rest(props, ["children", "className", "as", "label", "hint", "icon", "button", "withReactionToClick", "loader"]);
var _e = (0, context_1.useFileUploaderContext)(), dragging = _e.dragging, size = _e.size, variant = _e.variant, status = _e.status, openUploader = _e.openUploader;
var internalRef = (0, react_1.useRef)(null);
(0, hooks_1.useAsFileUploaderDropZone)(internalRef, {
isWithReactionToClick: withReactionToClick,
});
var isLoading = status === 'loading';
return (react_1.default.createElement(Tag, tslib_1.__assign({}, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, internalRef]), className: (0, exports.cnFileUploaderDrop)({
size: size,
dragging: dragging,
variant: variant,
status: status,
withReactionToClick: withReactionToClick,
}, [className]) }),
isLoading ? (loader) : (react_1.default.createElement(react_1.default.Fragment, null,
icon && (react_1.default.createElement("div", { className: (0, exports.cnFileUploaderDrop)('Icon') }, (0, renderContent_1.renderContent)({
content: icon,
props: {
size: constants_1.FILE_UPLOADER_SIZE_TO_DROP_ICON_SIZE[size],
onClick: function (event) {
if (withReactionToClick) {
return;
}
event.stopPropagation();
openUploader();
},
},
}))),
react_1.default.createElement("div", { className: (0, exports.cnFileUploaderDrop)('Label') }, label),
hint && react_1.default.createElement("div", { className: (0, exports.cnFileUploaderDrop)('Hint') }, hint),
button && (react_1.default.createElement(FileUploaderUploadButton_1.FileUploaderUploadButton, { className: (0, exports.cnFileUploaderDrop)('Button'), disableOpen: withReactionToClick }, button)))),
children));
});
exports.FileUploaderDrop.displayName = 'FileUploaderDrop';