@brizy/ui
Version:
React elements in Brizy style
37 lines (36 loc) • 1.98 kB
JavaScript
import React, { useCallback, useRef, useEffect } from "react";
import { Icon } from "../../Icon";
import { CmsFile } from "../../icons";
import { getFieldsStyleTheme } from "../../utils/getFieldsTheme";
import { WrapperForDisabled } from "../WrapperForDisabled";
import { BRZ_PREFIX } from "../../constants";
import { classNames } from "../../classNamesFn";
export const UploadComponent = props => {
const { size = "middle", value, disabled, required, accept, onFocus, onBlur, theme, onChange, children } = props;
const className = classNames()("upload-file", {
[`upload-file-size-${size}`]: size,
"upload-file-disabled": disabled,
});
const inputRef = useRef(null);
useEffect(() => {
const input = inputRef.current;
if (input) {
input.value = "";
}
}, [value]);
const _onChange = useCallback((event) => {
const files = event.target.files;
if (files === null || files === void 0 ? void 0 : files.length) {
onChange(event.target.multiple ? Array.from(files) : files[0]);
}
}, [onChange]);
return (React.createElement(WrapperForDisabled, { disabled: disabled },
React.createElement("div", { className: className, style: getFieldsStyleTheme(theme), onFocus: onFocus, onBlur: onBlur },
React.createElement("label", null,
React.createElement("span", { className: `${BRZ_PREFIX}-upload-file__name-file` },
React.createElement("input", { type: "file", disabled: disabled, required: required, accept: accept, onChange: _onChange, ref: inputRef }),
children),
React.createElement("span", { className: `${BRZ_PREFIX}-upload-file__btn` },
React.createElement("span", { className: `${BRZ_PREFIX}-upload-file__select-file` },
React.createElement(Icon, { source: CmsFile, color: "white", hoverColor: "white", size: "12px" })))))));
};