lib/form/validated-form.js
/**
 * A utility wrapper over Reactstrap FormGroup + Label + Input for blobs and images
 * that uses react-hook-form data to show error message and error/validated styles.
 * This component can be used with ValidatedForm
 *
 * @param ValidatedBlobFieldProps
 * @returns JSX.Element
 */
A utility wrapper over Reactstrap FormGroup + Label + Input for blobs and images
that uses react-hook-form data to show error message and error/validated styles.
This component can be used with ValidatedForm


A utility wrapper over Reactstrap FormGroup + Label + Input for blobs and images that uses react - hook - form data to show error message and error / validated styles . This component can be used with ValidatedForm
function ValidatedBlobField(_a) {
    var { name, register, setValue, error, isTouched, isDirty, validate, children, className, onChange, onBlur, id = name, disabled, row, col, tag, label, labelClass, labelHidden, inputClass, inputTag, hidden, defaultValue, defaultContentType, isImage, imageStyle, imageClassName, clearBtn, openActionLabel, 
    type, check } = _a, attributes = (0, tslib_1.__rest)(_a, ["name", "register", "setValue", "error", "isTouched", "isDirty", "validate", "children", "className", "onChange", "onBlur", "id", "disabled", "row", "col", "tag", "label", "labelClass", "labelHidden", "inputClass", "inputTag", "hidden", "defaultValue", "defaultContentType", "isImage", "imageStyle", "imageClassName", "clearBtn", "openActionLabel", "type", "check"]);
    const [blob, setBlobData] = (0, react_2.useState)(defaultValue);
    const [blobContentType, setBlobContentType] = (0, react_2.useState)(defaultContentType);
    const contentTypeName = `${name}ContentType`;
    const setBlobValue = (data, contentType) => {
        setBlobData(data);
        setBlobContentType(contentType);
        setValue(contentTypeName, contentType, {
            shouldValidate: true,
            shouldDirty: true,
        });
        setValue(name, data, {
            shouldValidate: true,
            shouldDirty: true,
        });
    };
    const clearBlob = () => {
        setBlobValue(null, null);
    };
    const renderFormGroup = inner => (react_1.default.createElement(reactstrap_1.FormGroup, { disabled: disabled, row: row, className: className, hidden: hidden, tag: tag },
        label && (react_1.default.createElement(reactstrap_1.Label, { id: `${name}Label`, for: id, className: labelClass, hidden: labelHidden || hidden }, label)),
        inner));
    const inputRow = input => (row ? react_1.default.createElement(reactstrap_1.Col, Object.assign({}, col), input) : input);
    if (!register) {
        return renderFormGroup(inputRow(react_1.default.createElement(reactstrap_1.Input, Object.assign({ type: "file", id: id, name: name, className: className, onChange: onChange, onBlur: onBlur }, attributes))));
    }
    className = className || '';
    className = isTouched ? `${className} is-touched` : className;
    className = isDirty ? `${className} is-dirty` : className;
    (0, react_2.useEffect)(() => {
        register(name, validate);
        register(contentTypeName, validate);
    }, [register]);
    const input = (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("input", { id: `file_${name}_content_type`, name: contentTypeName, type: "hidden" }),
        react_1.default.createElement(reactstrap_1.Input, Object.assign({ type: "file", id: id, name: name, valid: isTouched && !error, invalid: !!error, className: className, onChange: e => {
                (0, util_1.setFileData)(e, (contentType, data) => {
                    setBlobValue(data, contentType);
                }, isImage);
                onChange && onChange(e);
            }, onBlur: e => {
                (0, util_1.setFileData)(e, (contentType, data) => {
                    setBlobValue(data, contentType);
                }, isImage);
                onBlur && onBlur(e);
            } }, attributes)),
        error && react_1.default.createElement(reactstrap_1.FormFeedback, null, error.message)));
    const defaultClearBtn = (react_1.default.createElement(reactstrap_1.Button, { color: "danger", size: "sm", onClick: clearBlob },
        react_1.default.createElement("strong", null, "\u00A0x\u00A0")));
    return renderFormGroup(react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("br", null),
        blob ? (react_1.default.createElement("div", { className: "mb-3 mt-2 jhi-validated-blob-field-item-container" },
            blobContentType ? (react_1.default.createElement("a", { onClick: (0, util_1.openFile)(blobContentType, blob), className: "jhi-validated-blob-field-item-anchor" }, isImage ? (react_1.default.createElement("img", { src: `data:${blobContentType};base64,${blob}`, style: imageStyle || { maxHeight: '100px' }, className: imageClassName })) : (openActionLabel || 'Open'))) : null,
            react_1.default.createElement("br", null),
            react_1.default.createElement(reactstrap_1.Row, { className: "jhi-validated-blob-field-item-row" },
                react_1.default.createElement(reactstrap_1.Col, { md: "11", className: "jhi-validated-blob-field-item-row-col" },
                    react_1.default.createElement("span", null,
                        blobContentType,
                        ", ",
                        (0, util_1.byteSize)(blob))),
                react_1.default.createElement(reactstrap_1.Col, { md: "1", className: "jhi-validated-blob-field-item-row-col jhi-validated-blob-field-item-clear-btn" }, clearBtn ? clearBtn(clearBlob) : defaultClearBtn)))) : null,
        inputRow(input)));
}
function ValidatedBlobField ( _a ) { var { name , register , setValue , error , isTouched , isDirty , validate , children , className , onChange , onBlur , id = name , disabled , row , col , tag , label , labelClass , labelHidden , inputClass , inputTag , hidden , defaultValue , defaultContentType , isImage , imageStyle , imageClassName , clearBtn , openActionLabel , type , check } = _a , attributes = ( 0 , tslib_1 . __rest ) ( _a , [ "name" , "register" , "setValue" , "error" , "isTouched" , "isDirty" , "validate" , "children" , "className" , "onChange" , "onBlur" , "id" , "disabled" , "row" , "col" , "tag" , "label" , "labelClass" , "labelHidden" , "inputClass" , "inputTag" , "hidden" , "defaultValue" , "defaultContentType" , "isImage" , "imageStyle" , "imageClassName" , "clearBtn" , "openActionLabel" , "type" , "check" ] ) ; const [ blob , setBlobData ] = ( 0 , react_2 . useState ) ( defaultValue ) ; const [ blobContentType , setBlobContentType ] = ( 0 , react_2 . useState ) ( defaultContentType ) ; const contentTypeName = ` ${ name } ` ; const setBlobValue = ( data , contentType ) => { setBlobData ( data ) ; setBlobContentType ( contentType ) ; setValue ( contentTypeName , contentType , { shouldValidate : true , shouldDirty : true , } ) ; setValue ( name , data , { shouldValidate : true , shouldDirty : true , } ) ; } ; const clearBlob = ( ) => { setBlobValue ( null , null ) ; } ; const renderFormGroup = inner => ( react_1 . default . createElement ( reactstrap_1 . FormGroup , { disabled : disabled , row : row , className : className , hidden : hidden , tag : tag } , label && ( react_1 . default . createElement ( reactstrap_1 . Label , { id : ` ${ name } ` , for : id , className : labelClass , hidden : labelHidden || hidden } , label ) ) , inner ) ) ; const inputRow = input => ( row ? react_1 . default . createElement ( reactstrap_1 . Col , Object . assign ( { } , col ) , input ) : input ) ; if ( ! register ) { return renderFormGroup ( inputRow ( react_1 . default . createElement ( reactstrap_1 . Input , Object . assign ( { type : "file" , id : id , name : name , className : className , onChange : onChange , onBlur : onBlur } , attributes ) ) ) ) ; } className = className || '' ; className = isTouched ? ` ${ className } ` : className ; className = isDirty ? ` ${ className } ` : className ; ( 0 , react_2 . useEffect ) ( ( ) => { register ( name , validate ) ; register ( contentTypeName , validate ) ; } , [ register ] ) ; const input = ( react_1 . default . createElement ( react_1 . default . Fragment , null , react_1 . default . createElement ( "input" , { id : ` ${ name } ` , name : contentTypeName , type : "hidden" } ) , react_1 . default . createElement ( reactstrap_1 . Input , Object . assign ( { type : "file" , id : id , name : name , valid : isTouched && ! error , invalid : ! ! error , className : className , onChange : e => { ( 0 , util_1 . setFileData ) ( e , ( contentType , data ) => { setBlobValue ( data , contentType ) ; } , isImage ) ; onChange && onChange ( e ) ; } , onBlur : e => { ( 0 , util_1 . setFileData ) ( e , ( contentType , data ) => { setBlobValue ( data , contentType ) ; } , isImage ) ; onBlur && onBlur ( e ) ; } } , attributes ) ) , error && react_1 . default . createElement ( reactstrap_1 . FormFeedback , null , error . message ) ) ) ; const defaultClearBtn = ( react_1 . default . createElement ( reactstrap_1 . Button , { color : "danger" , size : "sm" , onClick : clearBlob } , react_1 . default . createElement ( "strong" , null , "\u00A0x\u00A0" ) ) ) ; return renderFormGroup ( react_1 . default . createElement ( react_1 . default . Fragment , null , react_1 . default . createElement ( "br" , null ) , blob ? ( react_1 . default . createElement ( "div" , { className : "mb-3 mt-2 jhi-validated-blob-field-item-container" } , blobContentType ? ( react_1 . default . createElement ( "a" , { onClick : ( 0 , util_1 . openFile ) ( blobContentType , blob ) , className : "jhi-validated-blob-field-item-anchor" } , isImage ? ( react_1 . default . createElement ( "img" , { src : ` ${ blobContentType } ${ blob } ` , style : imageStyle || { maxHeight : '100px' } , className : imageClassName } ) ) : ( openActionLabel || 'Open' ) ) ) : null , react_1 . default . createElement ( "br" , null ) , react_1 . default . createElement ( reactstrap_1 . Row , { className : "jhi-validated-blob-field-item-row" } , react_1 . default . createElement ( reactstrap_1 . Col , { md : "11" , className : "jhi-validated-blob-field-item-row-col" } , react_1 . default . createElement ( "span" , null , blobContentType , ", " , ( 0 , util_1 . byteSize ) ( blob ) ) ) , react_1 . default . createElement ( reactstrap_1 . Col , { md : "1" , className : "jhi-validated-blob-field-item-row-col jhi-validated-blob-field-item-clear-btn" } , clearBtn ? clearBtn ( clearBlob ) : defaultClearBtn ) ) ) ) : null , inputRow ( input ) ) ) ; }
A utility wrapper over Reactstrap FormGroup + Label + Input for blobs and images
 that uses react-hook-form data to show error message and error/validated styles.
A utility wrapper over Reactstrap FormGroup + Label + Input for blobs and images that uses react - hook - form data to show error message and error / validated styles .
// will be ignored as type will always be `file`
