@kubit-ui-web/react-components/dist/esm/components/selectorBoxFile/selectorBoxFile.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { STYLES_NAME } from '../../constants/stylesName/stylesName';
import { useStyles } from '../../hooks/useStyles/useStyles';
import { ErrorBoundary } from '../../provider/errorBoundary/errorBoundary';
import { FallbackComponent } from '../../provider/errorBoundary/fallbackComponent';
import { SelectorBoxFileStandAlone } from './selectorBoxFileStandAlone';
import { getState } from './utils/state.utils';
const SelectorBoxFileComponent = React.forwardRef(({ variant, loading = false, success = false, error = false, disabled = false, percentage = 0, maxSize, fileExtension, errorMaxSizeMessage = { content: '' }, errorFileExtensionMessage = { content: '' }, errorMessage = { content: '' }, onSizeError, onFileError, ctv, ...props }, ref) => {
    const styles = useStyles(STYLES_NAME.SELECTOR_BOX_FILE, variant, ctv);
    const [focus, setFocus] = React.useState(false);
    const [validFile, setValidFile] = React.useState({ validSize: true, validExtension: true });
    const onFocus = () => {
        setFocus(true);
    };
    const onBlur = () => {
        setFocus(false);
    };
    const onValidateFile = (files) => {
        if (!files || files.length === 0) {
            return;
        }
        const file = files[0];
        const size = file.size / 1024 / 1024; //mb
        const extension = file.type;
        let _validSize = true;
        let _validFileExtension = true;
        if (maxSize && size > maxSize) {
            _validSize = false;
            onSizeError?.(true);
        }
        if (fileExtension && !fileExtension?.some(substring => extension.includes(substring))) {
            _validFileExtension = false;
            onFileError?.(true);
        }
        setValidFile({ validSize: _validSize, validExtension: _validFileExtension });
    };
    const getErrorMessage = () => {
        if (!validFile.validExtension) {
            return errorFileExtensionMessage;
        }
        if (!validFile.validSize) {
            return errorMaxSizeMessage;
        }
        return errorMessage;
    };
    const hasError = () => {
        return error || !validFile.validExtension || !validFile.validSize;
    };
    const handleOnChange = event => {
        onValidateFile(event.target.files);
        props.onChange?.(event);
    };
    return (_jsx(SelectorBoxFileStandAlone, { ...props, ref: ref, errorMessage: getErrorMessage(), focus: focus, percentage: percentage, state: getState(loading, success, hasError(), disabled), styles: styles, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus }));
});
SelectorBoxFileComponent.displayName = 'SelectorBoxFileComponent';
const SelectorBoxBoundary = (props, ref) => (_jsx(ErrorBoundary, { fallBackComponent: _jsx(FallbackComponent, { children: _jsx(SelectorBoxFileStandAlone, { ...props, ref: ref }) }), children: _jsx(SelectorBoxFileComponent, { ...props, ref: ref }) }));
const SelectorBoxFile = React.forwardRef(SelectorBoxBoundary);
export { SelectorBoxFile };
//# sourceMappingURL=selectorBoxFile.js.map