@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
87 lines (83 loc) • 2.58 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
//#region src/components/avatar/use-avatar.ts
const defaultFormat = (name) => {
const names = name.trim().split(" ");
const firstName = names[0] ?? "";
const lastName = names.length > 1 ? names[names.length - 1] : "";
return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0);
};
const useAvatar = ({ name, src, srcSet, alt, crossOrigin, fallback: fallbackMessage, format = defaultFormat, icon, loading, referrerPolicy = "no-referrer",...rest } = {}) => {
const imageRef = (0, react.useRef)(null);
const initials = name ? format(name) : void 0;
const [loaded, setLoaded] = (0, react.useState)(false);
const fallback = !src || !loaded;
const { t } = require_i18n_provider.useI18n("avatar");
(0, react.useEffect)(() => {
if (!imageRef.current) return;
if (!!imageRef.current.src && imageRef.current.complete) setLoaded(true);
}, []);
const getGroupProps = (0, react.useCallback)((props) => ({ ...props }), []);
const getRootProps = (0, react.useCallback)((props) => ({
...rest,
...props,
"data-fallback": (0, require_utils_index.utils_exports.dataAttr)(!!fallbackMessage),
"data-loaded": (0, require_utils_index.utils_exports.dataAttr)(loaded)
}), [
loaded,
fallbackMessage,
rest
]);
const getImageProps = (0, react.useCallback)(({ ref, onLoad,...props } = {}) => ({
...props,
ref: require_ref.mergeRefs(ref, imageRef),
src,
srcSet,
alt: name || alt,
crossOrigin,
draggable: false,
hidden: fallback,
loading,
referrerPolicy,
onLoad: (0, require_utils_index.utils_exports.handlerAll)(onLoad, () => setLoaded(true))
}), [
src,
srcSet,
alt,
crossOrigin,
loading,
referrerPolicy,
fallback,
name
]);
return {
name,
loaded,
getFallbackProps: (0, react.useCallback)((props) => ({
...props,
"aria-label": !fallbackMessage ? name || alt || t("Avatar Icon") : void 0,
children: fallbackMessage || initials || icon,
hidden: !fallback,
role: "img"
}), [
name,
initials,
fallback,
icon,
fallbackMessage,
alt,
t
]),
getGroupProps,
getImageProps,
getRootProps
};
};
//#endregion
exports.useAvatar = useAvatar;
//# sourceMappingURL=use-avatar.cjs.map