@keycloakify/keycloak-admin-ui/components/json-file-upload/patternfly/FileUploadField.js

Repackaged Keycloak Admin UI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, ButtonVariant, InputGroup, Spinner, spinnerSize, TextArea, TextAreResizeOrientation, TextInput, InputGroupItem, } from "@patternfly/react-core";
import { css } from "@patternfly/react-styles";
import styles from "@patternfly/react-styles/css/components/FileUpload/file-upload";
import { fileReaderType } from "../../../components/json-file-upload/patternfly/fileUtils";
export const FileUploadField = ({ id, type, value = "", filename = "", onChange, onBrowseButtonClick, onClearButtonClick, onTextAreaClick, onTextChange, className = "", isDisabled = false, isReadOnly = false, isLoading = false, spinnerAriaValueText, isRequired = false, isDragActive = false, validated = "default", "aria-label": ariaLabel = "File upload", filenamePlaceholder = "Drag a file here or browse to upload", filenameAriaLabel = filename ? "Read only filename" : filenamePlaceholder, browseButtonText = "Browse...", clearButtonText = "Clear", isClearButtonDisabled = !filename && !value, containerRef = null, allowEditingUploadedText = false, hideDefaultPreview = false, children = null, ...props }) => {
    const onTextAreaChange = (newValue, event) => {
        onChange === null || onChange === void 0 ? void 0 : onChange(newValue, filename, event);
        onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(newValue);
    };
    return (_jsxs("div", { className: css(styles.fileUpload, isDragActive && styles.modifiers.dragHover, isLoading && styles.modifiers.loading, className), ref: containerRef, ...props, children: [_jsx("div", { className: styles.fileUploadFileSelect, children: _jsxs(InputGroup, { children: [_jsx(InputGroupItem, { isFill: true, children: _jsx(TextInput
                            // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
                            , { 
                                // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
                                isDisabled: isDisabled, id: `${id}-filename`, name: `${id}-filename`, "aria-label": filenameAriaLabel, placeholder: filenamePlaceholder, "aria-describedby": `${id}-browse-button`, value: filename, readOnlyVariant: "default" }) }), _jsx(InputGroupItem, { children: _jsx(Button, { id: `${id}-browse-button`, variant: ButtonVariant.control, onClick: onBrowseButtonClick, isDisabled: isDisabled, children: browseButtonText }) }), _jsx(InputGroupItem, { children: _jsx(Button, { variant: ButtonVariant.control, isDisabled: isDisabled || isClearButtonDisabled, onClick: onClearButtonClick, children: clearButtonText }) })] }) }), _jsxs("div", { className: styles.fileUploadFileDetails, children: [!hideDefaultPreview && type === fileReaderType.text && (_jsx(TextArea, { readOnly: isReadOnly || (!!filename && !allowEditingUploadedText), disabled: isDisabled, isRequired: isRequired, resizeOrientation: TextAreResizeOrientation.vertical, validated: validated, id: id, name: id, "aria-label": ariaLabel, value: value, onChange: (event, newValue) => onTextAreaChange(newValue, event), onClick: onTextAreaClick })), isLoading && (_jsx("div", { className: styles.fileUploadFileDetailsSpinner, children: _jsx(Spinner, { size: spinnerSize.lg, "aria-valuetext": spinnerAriaValueText }) }))] }), children] }));
};
FileUploadField.displayName = "FileUploadField";
//# sourceMappingURL=FileUploadField.js.map