@brizy/ui
Version:
React elements in Brizy style
61 lines (60 loc) • 3.38 kB
JavaScript
import React, { useRef, useEffect, useCallback, useMemo } from "react";
import { classNames } from "../classNamesFn";
import { isEmpty } from "ramda";
import LoadingOutlined from "@ant-design/icons/lib/icons/LoadingOutlined";
import { Icon } from "../Icon";
import { CmsClose } from "../icons";
import { getFieldsStyleTheme } from "../utils/getFieldsTheme";
import { isString } from "../utils";
import { WrapperForDisabled } from "./WrapperForDisabled";
import { BRZ_PREFIX } from "../constants";
import { useTranslation } from "../utils/localization/useTranslation";
export const IconUpload = (props) => {
const { t } = useTranslation();
const { value = { name: "", source: "" }, loading = false, size = "middle", accept = "image/png, image/svg+xml, image/vnd.microsoft.icon, image", onChange, onClick, onRemove, theme, disabled, } = props;
const { name: _name, source } = value !== null && value !== void 0 ? value : {};
const fileRef = useRef(null);
const className = classNames()("input-icon-upload", {
[`input-icon-upload--${size}`]: size,
"input-icon-upload--loading": loading,
"input-icon-upload--disabled": disabled,
});
const clearInput = useCallback(() => {
onRemove === null || onRemove === void 0 ? void 0 : onRemove();
}, [onRemove]);
const handleChange = useCallback((event) => {
var _a;
if (((_a = event.target.files) === null || _a === void 0 ? void 0 : _a.length) && onChange) {
onChange(event.target.files[0]);
}
}, [onChange]);
const handleClick = useCallback((e) => {
if (onClick) {
e.preventDefault();
onClick();
}
}, [onClick]);
useEffect(() => {
const node = fileRef.current;
if (_name == "" && (node === null || node === void 0 ? void 0 : node.value)) {
node.value = "";
}
}, [_name]);
const hasSource = useMemo(() => {
return isString(source) && !isEmpty(source);
}, [source]);
return (React.createElement("div", { className: className, style: getFieldsStyleTheme(theme) },
React.createElement(WrapperForDisabled, { disabled: disabled },
React.createElement("span", { className: `${BRZ_PREFIX}-input-icon-upload--value` },
_name,
_name && (React.createElement("button", { className: `${BRZ_PREFIX}-input-icon-upload--button-remove`, onClick: clearInput },
React.createElement(Icon, { source: CmsClose, color: "darkest", size: "6px" }))))),
React.createElement("div", { onClick: handleClick, className: `${BRZ_PREFIX}-input-icon-upload--button` },
React.createElement(WrapperForDisabled, { disabled: disabled },
React.createElement("span", null, loading ? React.createElement(LoadingOutlined, null) : t("Select"))),
React.createElement("input", { ref: fileRef, name: _name, type: "file", accept: accept, onChange: handleChange }),
(loading || hasSource) && (React.createElement(WrapperForDisabled, { disabled: disabled },
React.createElement("div", { className: `${BRZ_PREFIX}-input-icon-upload--icon-preview` },
loading && React.createElement(LoadingOutlined, null),
hasSource && React.createElement("img", { src: source, alt: "icon" })))))));
};