1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | var _typeof3 = require("@babel/runtime/helpers/typeof");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports["default"] = void 0;
|
11 |
|
12 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13 |
|
14 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
15 |
|
16 | var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
17 |
|
18 | var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
19 |
|
20 | var React = _interopRequireWildcard(require("react"));
|
21 |
|
22 | var _classnames = _interopRequireDefault(require("classnames"));
|
23 |
|
24 | var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
|
25 |
|
26 | var _ref = require("rc-util/lib/ref");
|
27 |
|
28 | var _configProvider = require("../config-provider");
|
29 |
|
30 | var _devWarning = _interopRequireDefault(require("../_util/devWarning"));
|
31 |
|
32 | var _responsiveObserve = require("../_util/responsiveObserve");
|
33 |
|
34 | var _useBreakpoint = _interopRequireDefault(require("../grid/hooks/useBreakpoint"));
|
35 |
|
36 | var _SizeContext = _interopRequireDefault(require("./SizeContext"));
|
37 |
|
38 | function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
39 |
|
40 | function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
41 |
|
42 | var __rest = void 0 && (void 0).__rest || function (s, e) {
|
43 | var t = {};
|
44 |
|
45 | for (var p in s) {
|
46 | if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
47 | }
|
48 |
|
49 | if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
50 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
51 | }
|
52 | return t;
|
53 | };
|
54 |
|
55 | var InternalAvatar = function InternalAvatar(props, ref) {
|
56 | var _classNames, _classNames2;
|
57 |
|
58 | var groupSize = React.useContext(_SizeContext["default"]);
|
59 |
|
60 | var _React$useState = React.useState(1),
|
61 | _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
62 | scale = _React$useState2[0],
|
63 | setScale = _React$useState2[1];
|
64 |
|
65 | var _React$useState3 = React.useState(false),
|
66 | _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
|
67 | mounted = _React$useState4[0],
|
68 | setMounted = _React$useState4[1];
|
69 |
|
70 | var _React$useState5 = React.useState(true),
|
71 | _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
|
72 | isImgExist = _React$useState6[0],
|
73 | setIsImgExist = _React$useState6[1];
|
74 |
|
75 | var avatarNodeRef = React.useRef();
|
76 | var avatarChildrenRef = React.useRef();
|
77 | var avatarNodeMergeRef = (0, _ref.composeRef)(ref, avatarNodeRef);
|
78 |
|
79 | var _React$useContext = React.useContext(_configProvider.ConfigContext),
|
80 | getPrefixCls = _React$useContext.getPrefixCls;
|
81 |
|
82 | var setScaleParam = function setScaleParam() {
|
83 | if (!avatarChildrenRef.current || !avatarNodeRef.current) {
|
84 | return;
|
85 | }
|
86 |
|
87 | var childrenWidth = avatarChildrenRef.current.offsetWidth;
|
88 |
|
89 | var nodeWidth = avatarNodeRef.current.offsetWidth;
|
90 |
|
91 | if (childrenWidth !== 0 && nodeWidth !== 0) {
|
92 | var _props$gap = props.gap,
|
93 | gap = _props$gap === void 0 ? 4 : _props$gap;
|
94 |
|
95 | if (gap * 2 < nodeWidth) {
|
96 | setScale(nodeWidth - gap * 2 < childrenWidth ? (nodeWidth - gap * 2) / childrenWidth : 1);
|
97 | }
|
98 | }
|
99 | };
|
100 |
|
101 | React.useEffect(function () {
|
102 | setMounted(true);
|
103 | }, []);
|
104 | React.useEffect(function () {
|
105 | setIsImgExist(true);
|
106 | setScale(1);
|
107 | }, [props.src]);
|
108 | React.useEffect(function () {
|
109 | setScaleParam();
|
110 | }, [props.gap]);
|
111 |
|
112 | var handleImgLoadError = function handleImgLoadError() {
|
113 | var onError = props.onError;
|
114 | var errorFlag = onError ? onError() : undefined;
|
115 |
|
116 | if (errorFlag !== false) {
|
117 | setIsImgExist(false);
|
118 | }
|
119 | };
|
120 |
|
121 | var customizePrefixCls = props.prefixCls,
|
122 | shape = props.shape,
|
123 | customSize = props.size,
|
124 | src = props.src,
|
125 | srcSet = props.srcSet,
|
126 | icon = props.icon,
|
127 | className = props.className,
|
128 | alt = props.alt,
|
129 | draggable = props.draggable,
|
130 | children = props.children,
|
131 | others = __rest(props, ["prefixCls", "shape", "size", "src", "srcSet", "icon", "className", "alt", "draggable", "children"]);
|
132 |
|
133 | var size = customSize === 'default' ? groupSize : customSize;
|
134 | var screens = (0, _useBreakpoint["default"])();
|
135 | var responsiveSizeStyle = React.useMemo(function () {
|
136 | if ((0, _typeof2["default"])(size) !== 'object') {
|
137 | return {};
|
138 | }
|
139 |
|
140 | var currentBreakpoint = _responsiveObserve.responsiveArray.find(function (screen) {
|
141 | return screens[screen];
|
142 | });
|
143 |
|
144 | var currentSize = size[currentBreakpoint];
|
145 | return currentSize ? {
|
146 | width: currentSize,
|
147 | height: currentSize,
|
148 | lineHeight: "".concat(currentSize, "px"),
|
149 | fontSize: icon ? currentSize / 2 : 18
|
150 | } : {};
|
151 | }, [screens, size]);
|
152 | (0, _devWarning["default"])(!(typeof icon === 'string' && icon.length > 2), 'Avatar', "`icon` is using ReactNode instead of string naming in v4. Please check `".concat(icon, "` at https://ant.design/components/icon"));
|
153 | var prefixCls = getPrefixCls('avatar', customizePrefixCls);
|
154 | var sizeCls = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-lg"), size === 'large'), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-sm"), size === 'small'), _classNames));
|
155 | var hasImageElement = React.isValidElement(src);
|
156 | var classString = (0, _classnames["default"])(prefixCls, sizeCls, (_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-").concat(shape), !!shape), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-image"), hasImageElement || src && isImgExist), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-icon"), !!icon), _classNames2), className);
|
157 | var sizeStyle = typeof size === 'number' ? {
|
158 | width: size,
|
159 | height: size,
|
160 | lineHeight: "".concat(size, "px"),
|
161 | fontSize: icon ? size / 2 : 18
|
162 | } : {};
|
163 | var childrenToRender;
|
164 |
|
165 | if (typeof src === 'string' && isImgExist) {
|
166 | childrenToRender = React.createElement("img", {
|
167 | src: src,
|
168 | draggable: draggable,
|
169 | srcSet: srcSet,
|
170 | onError: handleImgLoadError,
|
171 | alt: alt
|
172 | });
|
173 | } else if (hasImageElement) {
|
174 | childrenToRender = src;
|
175 | } else if (icon) {
|
176 | childrenToRender = icon;
|
177 | } else if (mounted || scale !== 1) {
|
178 | var transformString = "scale(".concat(scale, ") translateX(-50%)");
|
179 | var childrenStyle = {
|
180 | msTransform: transformString,
|
181 | WebkitTransform: transformString,
|
182 | transform: transformString
|
183 | };
|
184 | var sizeChildrenStyle = typeof size === 'number' ? {
|
185 | lineHeight: "".concat(size, "px")
|
186 | } : {};
|
187 | childrenToRender = React.createElement(_rcResizeObserver["default"], {
|
188 | onResize: setScaleParam
|
189 | }, React.createElement("span", {
|
190 | className: "".concat(prefixCls, "-string"),
|
191 | ref: function ref(node) {
|
192 | avatarChildrenRef.current = node;
|
193 | },
|
194 | style: (0, _extends2["default"])((0, _extends2["default"])({}, sizeChildrenStyle), childrenStyle)
|
195 | }, children));
|
196 | } else {
|
197 | childrenToRender = React.createElement("span", {
|
198 | className: "".concat(prefixCls, "-string"),
|
199 | style: {
|
200 | opacity: 0
|
201 | },
|
202 | ref: function ref(node) {
|
203 | avatarChildrenRef.current = node;
|
204 | }
|
205 | }, children);
|
206 | }
|
207 |
|
208 |
|
209 |
|
210 | delete others.onError;
|
211 | delete others.gap;
|
212 | return React.createElement("span", (0, _extends2["default"])({}, others, {
|
213 | style: (0, _extends2["default"])((0, _extends2["default"])((0, _extends2["default"])({}, sizeStyle), responsiveSizeStyle), others.style),
|
214 | className: classString,
|
215 | ref: avatarNodeMergeRef
|
216 | }), childrenToRender);
|
217 | };
|
218 |
|
219 | var Avatar = React.forwardRef(InternalAvatar);
|
220 | Avatar.displayName = 'Avatar';
|
221 | Avatar.defaultProps = {
|
222 | shape: 'circle',
|
223 | size: 'default'
|
224 | };
|
225 | var _default = Avatar;
|
226 | exports["default"] = _default; |
\ | No newline at end of file |