@gravity-ui/uikit
Version:
Gravity UI base styling and components
49 lines (48 loc) • 2.85 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { FileDropZoneProvider, useFileZoneContext } from "./FileDropZone.Provider.js";
import { cnFileDropZone } from "./FileDropZone.classname.js";
import { FileDropZoneQa } from "./constants.js";
import { FileDropZoneButton } from "./parts/FileDropZone.Button.js";
import { FileDropZoneDescription } from "./parts/FileDropZone.Description.js";
import { FileDropZoneIcon } from "./parts/FileDropZone.Icon.js";
import { FileDropZoneTitle } from "./parts/FileDropZone.Title.js";
import "./FileDropZone.css";
const FileDropZoneContent = ({ className, children, qa }) => {
const { isDraggingOver, isInvalidDrag, disabled, errorMessage, validationState, getDroppableProps, triggerProps, controlProps, accept, multiple, onKeyDown, } = 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 (_jsxs(React.Fragment, { children: [_jsx(FileDropZoneIcon, {}), _jsx(FileDropZoneTitle, {}), _jsx(FileDropZoneDescription, {}), _jsx(FileDropZoneButton, {})] }));
}, [children]);
/* eslint-disable jsx-a11y/no-static-element-interactions */
return (_jsxs("div", { ...getDroppableProps(), "data-qa": qa, "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: handleClick, onKeyDown: onKeyDown, className: cnFileDropZone({
'drag-hover': isDraggingOver,
'invalid-drag': isInvalidDrag,
disabled: disabled,
error: hasError || validationState === 'invalid',
'default-layout': typeof children === 'undefined',
}, className), children: [content, _jsx("input", { ...controlProps, multiple: multiple, accept: accept.length > 0 ? accept.join(',') : undefined, "data-qa": FileDropZoneQa.FILE_INPUT, onClick: handleInputClick })] }));
/* eslint-enable jsx-a11y/no-static-element-interactions */
};
const BaseFileDropZone = React.memo(({ children, className, qa, ...restProps }) => {
return (_jsx(FileDropZoneProvider, { ...restProps, children: _jsx(FileDropZoneContent, { className: className, qa: qa, children: children }) }));
});
BaseFileDropZone.displayName = 'FileDropZone';
export const FileDropZone = Object.assign(BaseFileDropZone, {
Icon: FileDropZoneIcon,
Title: FileDropZoneTitle,
Description: FileDropZoneDescription,
Button: FileDropZoneButton,
});
//# sourceMappingURL=FileDropZone.js.map