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

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

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectorBoxFile = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const stylesName_1 = require("../../constants/stylesName/stylesName");
const useStyles_1 = require("../../hooks/useStyles/useStyles");
const errorBoundary_1 = require("../../provider/errorBoundary/errorBoundary");
const fallbackComponent_1 = require("../../provider/errorBoundary/fallbackComponent");
const selectorBoxFileStandAlone_1 = require("./selectorBoxFileStandAlone");
const state_utils_1 = require("./utils/state.utils");
const SelectorBoxFileComponent = react_1.default.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 = (0, useStyles_1.useStyles)(stylesName_1.STYLES_NAME.SELECTOR_BOX_FILE, variant, ctv);
    const [focus, setFocus] = react_1.default.useState(false);
    const [validFile, setValidFile] = react_1.default.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 ((0, jsx_runtime_1.jsx)(selectorBoxFileStandAlone_1.SelectorBoxFileStandAlone, { ...props, ref: ref, errorMessage: getErrorMessage(), focus: focus, percentage: percentage, state: (0, state_utils_1.getState)(loading, success, hasError(), disabled), styles: styles, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus }));
});
SelectorBoxFileComponent.displayName = 'SelectorBoxFileComponent';
const SelectorBoxBoundary = (props, ref) => ((0, jsx_runtime_1.jsx)(errorBoundary_1.ErrorBoundary, { fallBackComponent: (0, jsx_runtime_1.jsx)(fallbackComponent_1.FallbackComponent, { children: (0, jsx_runtime_1.jsx)(selectorBoxFileStandAlone_1.SelectorBoxFileStandAlone, { ...props, ref: ref }) }), children: (0, jsx_runtime_1.jsx)(SelectorBoxFileComponent, { ...props, ref: ref }) }));
const SelectorBoxFile = react_1.default.forwardRef(SelectorBoxBoundary);
exports.SelectorBoxFile = SelectorBoxFile;
//# sourceMappingURL=selectorBoxFile.js.map