first commit
This commit is contained in:
166
frontend/node_modules/antd/es/avatar/Avatar.js
generated
vendored
Normal file
166
frontend/node_modules/antd/es/avatar/Avatar.js
generated
vendored
Normal file
@@ -0,0 +1,166 @@
|
||||
"use client";
|
||||
|
||||
var __rest = this && this.__rest || function (s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import ResizeObserver from 'rc-resize-observer';
|
||||
import { composeRef } from "rc-util/es/ref";
|
||||
import { responsiveArray } from '../_util/responsiveObserver';
|
||||
import { devUseWarning } from '../_util/warning';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
||||
import useSize from '../config-provider/hooks/useSize';
|
||||
import useBreakpoint from '../grid/hooks/useBreakpoint';
|
||||
import AvatarContext from './AvatarContext';
|
||||
import useStyle from './style';
|
||||
const Avatar = /*#__PURE__*/React.forwardRef((props, ref) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
shape,
|
||||
size: customSize,
|
||||
src,
|
||||
srcSet,
|
||||
icon,
|
||||
className,
|
||||
rootClassName,
|
||||
style,
|
||||
alt,
|
||||
draggable,
|
||||
children,
|
||||
crossOrigin,
|
||||
gap = 4,
|
||||
onError
|
||||
} = props,
|
||||
others = __rest(props, ["prefixCls", "shape", "size", "src", "srcSet", "icon", "className", "rootClassName", "style", "alt", "draggable", "children", "crossOrigin", "gap", "onError"]);
|
||||
const [scale, setScale] = React.useState(1);
|
||||
const [mounted, setMounted] = React.useState(false);
|
||||
const [isImgExist, setIsImgExist] = React.useState(true);
|
||||
const avatarNodeRef = React.useRef(null);
|
||||
const avatarChildrenRef = React.useRef(null);
|
||||
const avatarNodeMergedRef = composeRef(ref, avatarNodeRef);
|
||||
const {
|
||||
getPrefixCls,
|
||||
avatar
|
||||
} = React.useContext(ConfigContext);
|
||||
const avatarCtx = React.useContext(AvatarContext);
|
||||
const setScaleParam = () => {
|
||||
if (!avatarChildrenRef.current || !avatarNodeRef.current) {
|
||||
return;
|
||||
}
|
||||
const childrenWidth = avatarChildrenRef.current.offsetWidth; // offsetWidth avoid affecting be transform scale
|
||||
const nodeWidth = avatarNodeRef.current.offsetWidth;
|
||||
// denominator is 0 is no meaning
|
||||
if (childrenWidth !== 0 && nodeWidth !== 0) {
|
||||
if (gap * 2 < nodeWidth) {
|
||||
setScale(nodeWidth - gap * 2 < childrenWidth ? (nodeWidth - gap * 2) / childrenWidth : 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
React.useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
React.useEffect(() => {
|
||||
setIsImgExist(true);
|
||||
setScale(1);
|
||||
}, [src]);
|
||||
React.useEffect(setScaleParam, [gap]);
|
||||
const handleImgLoadError = () => {
|
||||
const errorFlag = onError === null || onError === void 0 ? void 0 : onError();
|
||||
if (errorFlag !== false) {
|
||||
setIsImgExist(false);
|
||||
}
|
||||
};
|
||||
const size = useSize(ctxSize => {
|
||||
var _a, _b;
|
||||
return (_b = (_a = customSize !== null && customSize !== void 0 ? customSize : avatarCtx === null || avatarCtx === void 0 ? void 0 : avatarCtx.size) !== null && _a !== void 0 ? _a : ctxSize) !== null && _b !== void 0 ? _b : 'default';
|
||||
});
|
||||
const needResponsive = Object.keys(typeof size === 'object' ? size || {} : {}).some(key => ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key));
|
||||
const screens = useBreakpoint(needResponsive);
|
||||
const responsiveSizeStyle = React.useMemo(() => {
|
||||
if (typeof size !== 'object') {
|
||||
return {};
|
||||
}
|
||||
const currentBreakpoint = responsiveArray.find(screen => screens[screen]);
|
||||
const currentSize = size[currentBreakpoint];
|
||||
return currentSize ? {
|
||||
width: currentSize,
|
||||
height: currentSize,
|
||||
fontSize: currentSize && (icon || children) ? currentSize / 2 : 18
|
||||
} : {};
|
||||
}, [screens, size, icon, children]);
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = devUseWarning('Avatar');
|
||||
process.env.NODE_ENV !== "production" ? warning(!(typeof icon === 'string' && icon.length > 2), 'breaking', `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`) : void 0;
|
||||
}
|
||||
const prefixCls = getPrefixCls('avatar', customizePrefixCls);
|
||||
const rootCls = useCSSVarCls(prefixCls);
|
||||
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
|
||||
const sizeCls = classNames({
|
||||
[`${prefixCls}-lg`]: size === 'large',
|
||||
[`${prefixCls}-sm`]: size === 'small'
|
||||
});
|
||||
const hasImageElement = /*#__PURE__*/React.isValidElement(src);
|
||||
const mergedShape = shape || (avatarCtx === null || avatarCtx === void 0 ? void 0 : avatarCtx.shape) || 'circle';
|
||||
const classString = classNames(prefixCls, sizeCls, avatar === null || avatar === void 0 ? void 0 : avatar.className, `${prefixCls}-${mergedShape}`, {
|
||||
[`${prefixCls}-image`]: hasImageElement || src && isImgExist,
|
||||
[`${prefixCls}-icon`]: !!icon
|
||||
}, cssVarCls, rootCls, className, rootClassName, hashId);
|
||||
const sizeStyle = typeof size === 'number' ? {
|
||||
width: size,
|
||||
height: size,
|
||||
fontSize: icon ? size / 2 : 18
|
||||
} : {};
|
||||
let childrenToRender;
|
||||
if (typeof src === 'string' && isImgExist) {
|
||||
childrenToRender = /*#__PURE__*/React.createElement("img", {
|
||||
src: src,
|
||||
draggable: draggable,
|
||||
srcSet: srcSet,
|
||||
onError: handleImgLoadError,
|
||||
alt: alt,
|
||||
crossOrigin: crossOrigin
|
||||
});
|
||||
} else if (hasImageElement) {
|
||||
childrenToRender = src;
|
||||
} else if (icon) {
|
||||
childrenToRender = icon;
|
||||
} else if (mounted || scale !== 1) {
|
||||
const transformString = `scale(${scale})`;
|
||||
const childrenStyle = {
|
||||
msTransform: transformString,
|
||||
WebkitTransform: transformString,
|
||||
transform: transformString
|
||||
};
|
||||
childrenToRender = /*#__PURE__*/React.createElement(ResizeObserver, {
|
||||
onResize: setScaleParam
|
||||
}, /*#__PURE__*/React.createElement("span", {
|
||||
className: `${prefixCls}-string`,
|
||||
ref: avatarChildrenRef,
|
||||
style: childrenStyle
|
||||
}, children));
|
||||
} else {
|
||||
childrenToRender = /*#__PURE__*/React.createElement("span", {
|
||||
className: `${prefixCls}-string`,
|
||||
style: {
|
||||
opacity: 0
|
||||
},
|
||||
ref: avatarChildrenRef
|
||||
}, children);
|
||||
}
|
||||
return wrapCSSVar(/*#__PURE__*/React.createElement("span", Object.assign({}, others, {
|
||||
style: Object.assign(Object.assign(Object.assign(Object.assign({}, sizeStyle), responsiveSizeStyle), avatar === null || avatar === void 0 ? void 0 : avatar.style), style),
|
||||
className: classString,
|
||||
ref: avatarNodeMergedRef
|
||||
}), childrenToRender));
|
||||
});
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Avatar.displayName = 'Avatar';
|
||||
}
|
||||
export default Avatar;
|
||||
Reference in New Issue
Block a user