@gravity-ui/uikit
Version:
Gravity UI base styling and components
53 lines (52 loc) • 3.44 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.FileDropZone = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const FileDropZone_Provider_1 = require("./FileDropZone.Provider.js");
const FileDropZone_classname_1 = require("./FileDropZone.classname.js");
const constants_1 = require("./constants.js");
const FileDropZone_Button_1 = require("./parts/FileDropZone.Button.js");
const FileDropZone_Description_1 = require("./parts/FileDropZone.Description.js");
const FileDropZone_Icon_1 = require("./parts/FileDropZone.Icon.js");
const FileDropZone_Title_1 = require("./parts/FileDropZone.Title.js");
require("./FileDropZone.css");
const FileDropZoneContent = ({ className, children, qa }) => {
const { isDraggingOver, isInvalidDrag, disabled, errorMessage, validationState, getDroppableProps, triggerProps, controlProps, accept, multiple, onKeyDown, } = (0, FileDropZone_Provider_1.useFileZoneContext)();
const hasError = Boolean(errorMessage);
const handleClick = React.useCallback((event) => {
if (!disabled && !event.defaultPrevented) {
triggerProps.onClick();
}
}, [disabled, triggerProps]);
const handleInputClick = React.useCallback((event) => {
event.stopPropagation();
}, []);
const content = React.useMemo(() => {
if (typeof children !== 'undefined') {
return children;
}
return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(FileDropZone_Icon_1.FileDropZoneIcon, {}), (0, jsx_runtime_1.jsx)(FileDropZone_Title_1.FileDropZoneTitle, {}), (0, jsx_runtime_1.jsx)(FileDropZone_Description_1.FileDropZoneDescription, {}), (0, jsx_runtime_1.jsx)(FileDropZone_Button_1.FileDropZoneButton, {})] }));
}, [children]);
/* eslint-disable jsx-a11y/no-static-element-interactions */
return ((0, jsx_runtime_1.jsxs)("div", { ...getDroppableProps(), "data-qa": qa, "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: handleClick, onKeyDown: onKeyDown, className: (0, FileDropZone_classname_1.cnFileDropZone)({
'drag-hover': isDraggingOver,
'invalid-drag': isInvalidDrag,
disabled: disabled,
error: hasError || validationState === 'invalid',
'default-layout': typeof children === 'undefined',
}, className), children: [content, (0, jsx_runtime_1.jsx)("input", { ...controlProps, multiple: multiple, accept: accept.length > 0 ? accept.join(',') : undefined, "data-qa": constants_1.FileDropZoneQa.FILE_INPUT, onClick: handleInputClick })] }));
/* eslint-enable jsx-a11y/no-static-element-interactions */
};
const BaseFileDropZone = React.memo(({ children, className, qa, ...restProps }) => {
return ((0, jsx_runtime_1.jsx)(FileDropZone_Provider_1.FileDropZoneProvider, { ...restProps, children: (0, jsx_runtime_1.jsx)(FileDropZoneContent, { className: className, qa: qa, children: children }) }));
});
BaseFileDropZone.displayName = 'FileDropZone';
exports.FileDropZone = Object.assign(BaseFileDropZone, {
Icon: FileDropZone_Icon_1.FileDropZoneIcon,
Title: FileDropZone_Title_1.FileDropZoneTitle,
Description: FileDropZone_Description_1.FileDropZoneDescription,
Button: FileDropZone_Button_1.FileDropZoneButton,
});
//# sourceMappingURL=FileDropZone.js.map