@radix-ui/react-avatar 0.1.5-rc.1 → 0.1.5-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts.map +1 -1
  2. package/dist/index.js +146 -1
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.module.js +127 -1
  5. package/dist/index.module.js.map +1 -1
  6. package/package.json +5 -5
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"A;A;A;AAgBA,OAAA,wFAAgF,CAAC;AAEjF,0BAA0B,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAUlE,0BAA0B,MAAM,wBAAwB,CAAC,OAAO,UAAU,IAAI,CAAC,CAAC;AAChF,4BAAsB,SAAQ,kBAAkB;CAAG;AAEnD,OAAA,MAAM,2FAcL,CAAC;AAWF,2BAA2B,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAChF,iCAA2B,SAAQ,mBAAmB;IACpD,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC9D;AAED,OAAA,MAAM,sGAoBL,CAAC;AAWF,oCAA8B,SAAQ,kBAAkB;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,OAAA,MAAM,2GAiBL,CAAC;AAmCF,OAAA,MAAM,yFAAa,CAAC;AACpB,OAAA,MAAM,gGAAmB,CAAC;AAC1B,OAAA,MAAM,qGAAyB,CAAC","sources":["./packages/react/avatar/src/packages/react/avatar/src/Avatar.tsx","./packages/react/avatar/src/packages/react/avatar/src/index.ts"],"sourcesContent":[null,null],"names":[],"version":3,"file":"index.d.ts.map"}
1
+ {"mappings":";;;AAgBA,OAAA,wFAAgF,CAAC;AAEjF,0BAA0B,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAUlE,0BAA0B,MAAM,wBAAwB,CAAC,OAAO,UAAU,IAAI,CAAC,CAAC;AAChF,4BAAsB,SAAQ,kBAAkB;CAAG;AAEnD,OAAA,MAAM,2FAcL,CAAC;AAWF,2BAA2B,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAChF,iCAA2B,SAAQ,mBAAmB;IACpD,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC9D;AAED,OAAA,MAAM,sGAoBL,CAAC;AAWF,oCAA8B,SAAQ,kBAAkB;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,OAAA,MAAM,2GAiBL,CAAC;AAmCF,OAAA,MAAM,yFAAa,CAAC;AACpB,OAAA,MAAM,gGAAmB,CAAC;AAC1B,OAAA,MAAM,qGAAyB,CAAC","sources":["packages/react/avatar/src/packages/react/avatar/src/Avatar.tsx","packages/react/avatar/src/packages/react/avatar/src/index.ts","packages/react/avatar/src/index.ts"],"sourcesContent":[null,null,"export * from './Avatar';\n"],"names":[],"version":3,"file":"index.d.ts.map"}
package/dist/index.js CHANGED
@@ -1,2 +1,147 @@
1
- var e,t,r,a=require("@radix-ui/react-primitive").Primitive,o=require("@radix-ui/react-use-layout-effect").useLayoutEffect,n=require("@radix-ui/react-use-callback-ref").useCallbackRef,c=require("@radix-ui/react-context").createContextScope,s=(e={},t=require("react"),Object.keys(t).forEach((function(r){"default"!==r&&"__esModule"!==r&&Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[r]}})})),e),i=(r=require("@babel/runtime/helpers/extends"))&&r.__esModule?r.default:r;const[u,l]=c("Avatar");exports.createAvatarScope=l;const[d,f]=u("Avatar"),g=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAvatar:r,...o}=e,[n,c]=s.useState("idle");/*#__PURE__*/return s.createElement(d,{scope:r,imageLoadingStatus:n,onImageLoadingStatusChange:c},/*#__PURE__*/s.createElement(a.span,i({},o,{ref:t})))}));exports.Avatar=g;const m=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAvatar:r,src:c,onLoadingStatusChange:u=(()=>{}),...l}=e,d=f("AvatarImage",r),g=function(e){const[t,r]=s.useState("idle");return s.useEffect((()=>{if(!e)return void r("error");let t=!0;const a=new window.Image,o=e=>()=>{t&&r(e)};return r("loading"),a.onload=o("loaded"),a.onerror=o("error"),a.src=e,()=>{t=!1}}),[e]),t}(c),m=n((e=>{u(e),d.onImageLoadingStatusChange(e)}));return o((()=>{"idle"!==g&&m(g)}),[g,m]),"loaded"===g?/*#__PURE__*/s.createElement(a.img,i({},l,{ref:t,src:c})):null}));exports.AvatarImage=m;const p=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAvatar:r,delayMs:o,...n}=e,c=f("AvatarFallback",r),[u,l]=s.useState(void 0===o);return s.useEffect((()=>{if(void 0!==o){const e=window.setTimeout((()=>l(!0)),o);return()=>window.clearTimeout(e)}}),[o]),u&&"loaded"!==c.imageLoadingStatus?/*#__PURE__*/s.createElement(a.span,i({},n,{ref:t})):null}));exports.AvatarFallback=p;const v=g;exports.Root=v;const x=m;exports.Image=x;const A=p;exports.Fallback=A;
1
+ var $6FDFN$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
2
+ var $6FDFN$react = require("react");
3
+ var $6FDFN$radixuireactcontext = require("@radix-ui/react-context");
4
+ var $6FDFN$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref");
5
+ var $6FDFN$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
6
+ var $6FDFN$radixuireactprimitive = require("@radix-ui/react-primitive");
7
+
8
+ function $parcel$exportWildcard(dest, source) {
9
+ Object.keys(source).forEach(function(key) {
10
+ if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
11
+ return;
12
+ }
13
+
14
+ Object.defineProperty(dest, key, {
15
+ enumerable: true,
16
+ get: function get() {
17
+ return source[key];
18
+ }
19
+ });
20
+ });
21
+
22
+ return dest;
23
+ }
24
+ function $parcel$interopDefault(a) {
25
+ return a && a.__esModule ? a.default : a;
26
+ }
27
+ function $parcel$export(e, n, v, s) {
28
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
29
+ }
30
+ var $94437fed6c1d6d8a$exports = {};
31
+
32
+ $parcel$export($94437fed6c1d6d8a$exports, "createAvatarScope", () => $94437fed6c1d6d8a$export$90370d16b488820f);
33
+ $parcel$export($94437fed6c1d6d8a$exports, "Avatar", () => $94437fed6c1d6d8a$export$e2255cf6045e8d47);
34
+ $parcel$export($94437fed6c1d6d8a$exports, "AvatarImage", () => $94437fed6c1d6d8a$export$2cd8ae1985206fe8);
35
+ $parcel$export($94437fed6c1d6d8a$exports, "AvatarFallback", () => $94437fed6c1d6d8a$export$69fffb6a9571fbfe);
36
+ $parcel$export($94437fed6c1d6d8a$exports, "Root", () => $94437fed6c1d6d8a$export$be92b6f5f03c0fe9);
37
+ $parcel$export($94437fed6c1d6d8a$exports, "Image", () => $94437fed6c1d6d8a$export$3e431a229df88919);
38
+ $parcel$export($94437fed6c1d6d8a$exports, "Fallback", () => $94437fed6c1d6d8a$export$fb8d7f40caaeea67);
39
+
40
+
41
+
42
+
43
+
44
+
45
+ /* -------------------------------------------------------------------------------------------------
46
+ * Avatar
47
+ * -----------------------------------------------------------------------------------------------*/ const $94437fed6c1d6d8a$var$AVATAR_NAME = 'Avatar';
48
+ const [$94437fed6c1d6d8a$var$createAvatarContext, $94437fed6c1d6d8a$export$90370d16b488820f] = $6FDFN$radixuireactcontext.createContextScope($94437fed6c1d6d8a$var$AVATAR_NAME);
49
+ const [$94437fed6c1d6d8a$var$AvatarProvider, $94437fed6c1d6d8a$var$useAvatarContext] = $94437fed6c1d6d8a$var$createAvatarContext($94437fed6c1d6d8a$var$AVATAR_NAME);
50
+ const $94437fed6c1d6d8a$export$e2255cf6045e8d47 = /*#__PURE__*/ $6FDFN$react.forwardRef((props, forwardedRef)=>{
51
+ const { __scopeAvatar: __scopeAvatar , ...avatarProps } = props;
52
+ const [imageLoadingStatus, setImageLoadingStatus] = $6FDFN$react.useState('idle');
53
+ return /*#__PURE__*/ $6FDFN$react.createElement($94437fed6c1d6d8a$var$AvatarProvider, {
54
+ scope: __scopeAvatar,
55
+ imageLoadingStatus: imageLoadingStatus,
56
+ onImageLoadingStatusChange: setImageLoadingStatus
57
+ }, /*#__PURE__*/ $6FDFN$react.createElement($6FDFN$radixuireactprimitive.Primitive.span, ($parcel$interopDefault($6FDFN$babelruntimehelpersextends))({}, avatarProps, {
58
+ ref: forwardedRef
59
+ })));
60
+ });
61
+ /*#__PURE__*/ Object.assign($94437fed6c1d6d8a$export$e2255cf6045e8d47, {
62
+ displayName: $94437fed6c1d6d8a$var$AVATAR_NAME
63
+ });
64
+ /* -------------------------------------------------------------------------------------------------
65
+ * AvatarImage
66
+ * -----------------------------------------------------------------------------------------------*/ const $94437fed6c1d6d8a$var$IMAGE_NAME = 'AvatarImage';
67
+ const $94437fed6c1d6d8a$export$2cd8ae1985206fe8 = /*#__PURE__*/ $6FDFN$react.forwardRef((props, forwardedRef)=>{
68
+ const { __scopeAvatar: __scopeAvatar , src: src , onLoadingStatusChange: onLoadingStatusChange = ()=>{} , ...imageProps } = props;
69
+ const context = $94437fed6c1d6d8a$var$useAvatarContext($94437fed6c1d6d8a$var$IMAGE_NAME, __scopeAvatar);
70
+ const imageLoadingStatus = $94437fed6c1d6d8a$var$useImageLoadingStatus(src);
71
+ const handleLoadingStatusChange = $6FDFN$radixuireactusecallbackref.useCallbackRef((status)=>{
72
+ onLoadingStatusChange(status);
73
+ context.onImageLoadingStatusChange(status);
74
+ });
75
+ $6FDFN$radixuireactuselayouteffect.useLayoutEffect(()=>{
76
+ if (imageLoadingStatus !== 'idle') handleLoadingStatusChange(imageLoadingStatus);
77
+ }, [
78
+ imageLoadingStatus,
79
+ handleLoadingStatusChange
80
+ ]);
81
+ return imageLoadingStatus === 'loaded' ? /*#__PURE__*/ $6FDFN$react.createElement($6FDFN$radixuireactprimitive.Primitive.img, ($parcel$interopDefault($6FDFN$babelruntimehelpersextends))({}, imageProps, {
82
+ ref: forwardedRef,
83
+ src: src
84
+ })) : null;
85
+ });
86
+ /*#__PURE__*/ Object.assign($94437fed6c1d6d8a$export$2cd8ae1985206fe8, {
87
+ displayName: $94437fed6c1d6d8a$var$IMAGE_NAME
88
+ });
89
+ /* -------------------------------------------------------------------------------------------------
90
+ * AvatarFallback
91
+ * -----------------------------------------------------------------------------------------------*/ const $94437fed6c1d6d8a$var$FALLBACK_NAME = 'AvatarFallback';
92
+ const $94437fed6c1d6d8a$export$69fffb6a9571fbfe = /*#__PURE__*/ $6FDFN$react.forwardRef((props, forwardedRef)=>{
93
+ const { __scopeAvatar: __scopeAvatar , delayMs: delayMs , ...fallbackProps } = props;
94
+ const context = $94437fed6c1d6d8a$var$useAvatarContext($94437fed6c1d6d8a$var$FALLBACK_NAME, __scopeAvatar);
95
+ const [canRender, setCanRender] = $6FDFN$react.useState(delayMs === undefined);
96
+ $6FDFN$react.useEffect(()=>{
97
+ if (delayMs !== undefined) {
98
+ const timerId = window.setTimeout(()=>setCanRender(true)
99
+ , delayMs);
100
+ return ()=>window.clearTimeout(timerId)
101
+ ;
102
+ }
103
+ }, [
104
+ delayMs
105
+ ]);
106
+ return canRender && context.imageLoadingStatus !== 'loaded' ? /*#__PURE__*/ $6FDFN$react.createElement($6FDFN$radixuireactprimitive.Primitive.span, ($parcel$interopDefault($6FDFN$babelruntimehelpersextends))({}, fallbackProps, {
107
+ ref: forwardedRef
108
+ })) : null;
109
+ });
110
+ /*#__PURE__*/ Object.assign($94437fed6c1d6d8a$export$69fffb6a9571fbfe, {
111
+ displayName: $94437fed6c1d6d8a$var$FALLBACK_NAME
112
+ });
113
+ /* -----------------------------------------------------------------------------------------------*/ function $94437fed6c1d6d8a$var$useImageLoadingStatus(src) {
114
+ const [loadingStatus, setLoadingStatus] = $6FDFN$react.useState('idle');
115
+ $6FDFN$react.useEffect(()=>{
116
+ if (!src) {
117
+ setLoadingStatus('error');
118
+ return;
119
+ }
120
+ let isMounted = true;
121
+ const image = new window.Image();
122
+ const updateStatus = (status)=>()=>{
123
+ if (!isMounted) return;
124
+ setLoadingStatus(status);
125
+ }
126
+ ;
127
+ setLoadingStatus('loading');
128
+ image.onload = updateStatus('loaded');
129
+ image.onerror = updateStatus('error');
130
+ image.src = src;
131
+ return ()=>{
132
+ isMounted = false;
133
+ };
134
+ }, [
135
+ src
136
+ ]);
137
+ return loadingStatus;
138
+ }
139
+ const $94437fed6c1d6d8a$export$be92b6f5f03c0fe9 = $94437fed6c1d6d8a$export$e2255cf6045e8d47;
140
+ const $94437fed6c1d6d8a$export$3e431a229df88919 = $94437fed6c1d6d8a$export$2cd8ae1985206fe8;
141
+ const $94437fed6c1d6d8a$export$fb8d7f40caaeea67 = $94437fed6c1d6d8a$export$69fffb6a9571fbfe;
142
+
143
+
144
+ $parcel$exportWildcard(module.exports, $94437fed6c1d6d8a$exports);
145
+
146
+
2
147
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"IAYgCA,EAAMC,EAZNC,0OAYAF,KAAMC,mBACpCE,OAAOC,KAAKH,GAAQI,SAAQ,SAASC,GACvB,YAARA,GAA6B,eAARA,GAIzBH,OAAOI,eAAeP,EAAMM,EAAK,CAC/BE,YAAY,EACZC,IAAK,WACH,OAAOR,EAAOK,SAKbN,MA1BuBE,8CAClBA,EAAEQ,WAAaR,EAAES,QAAUT,ECYzC,MAGOU,EAAqBC,GAAqBC,EAH7B,sCAYpB,MAAOC,EAAgBC,GAAoBJ,EAZvB,UAkBdK,eAASC,EAAMC,YACnB,CAACC,EAAiCC,KAChC,MAAMC,cAAEA,KAAkBC,GAAgBH,GACnCI,EAAoBC,GAAyBP,EAAMQ,SAA6B,qBACvF,OACEC,EAAAC,cAACC,EAAD,CACEC,MAAOR,EACPE,mBAAoBA,EACpBO,2BAA4BN,gBAE5BE,EAAAC,cAACI,EAAUC,KAAXC,EAAA,GAAoBX,EAApB,CAAiCY,IAAKd,0BAY9C,MAQMe,eAAclB,EAAMC,YACxB,CAACC,EAAsCC,KACrC,MAAMC,cAAEA,EAAFe,IAAiBA,EAAjBC,sBAAsBA,EAAwB,YAAaC,GAAenB,EAC1EoB,EAAUxB,EAXD,cAW8BM,GACvCE,EAsDV,SAA+Ba,GAC7B,MAAOI,EAAeC,GAAoBxB,EAAMQ,SAA6B,QA0B7E,OAxBAR,EAAMyB,WAAU,KACd,IAAKN,EAEH,YADAK,EAAiB,SAInB,IAAIE,GAAY,EAChB,MAAMC,EAAQ,IAAIC,OAAOC,MAEnBC,EAAgBC,GAA+B,KAC9CL,GACLF,EAAiBO,IAQnB,OALAP,EAAiB,WACjBG,EAAMK,OAASF,EAAa,UAC5BH,EAAMM,QAAUH,EAAa,SAC7BH,EAAMR,IAAMA,EAEL,KACLO,GAAY,KAEb,CAACP,IAEGI,EAjFsBW,CAAsBf,GAC3CgB,EAA4BC,GAAgBL,IAChDX,EAAsBW,GACtBT,EAAQT,2BAA2BkB,MASrC,OANAM,GAAgB,KACa,SAAvB/B,GACF6B,EAA0B7B,KAE3B,CAACA,EAAoB6B,IAEM,WAAvB7B,eACLG,EAAAC,cAACI,EAAUwB,IAAXtB,EAAA,GAAmBK,EAAnB,CAA+BJ,IAAKd,EAAcgB,IAAKA,KACrD,8BAUR,MAOMoB,eAAiBvC,EAAMC,YAC3B,CAACC,EAAyCC,KACxC,MAAMC,cAAEA,EAAFoC,QAAiBA,KAAYC,GAAkBvC,EAC/CoB,EAAUxB,EAVE,iBAU8BM,IACzCsC,EAAWC,GAAgB3C,EAAMQ,cAAqBoC,IAAZJ,GASjD,OAPAxC,EAAMyB,WAAU,KACd,QAAgBmB,IAAZJ,EAAuB,CACzB,MAAMK,EAAUjB,OAAOkB,YAAW,IAAMH,GAAa,IAAOH,GAC5D,MAAO,IAAMZ,OAAOmB,aAAaF,MAElC,CAACL,IAEGE,GAA4C,WAA/BpB,EAAQhB,gCAC1BG,EAAAC,cAACI,EAAUC,KAAXC,EAAA,GAAoByB,EAApB,CAAmCxB,IAAKd,KACtC,iCAqCR,MAAM6C,EAAOjD,iBACb,MAAM8B,EAAQX,kBACd,MAAM+B,EAAWV","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/react/avatar/src/Avatar.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$reexport(e, n, v) {\n Object.defineProperty(e, n, {get: v, enumerable: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n Object.keys(source).forEach(function(key) {\n if (key === 'default' || key === '__esModule') {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function get() {\n return source[key];\n },\n });\n });\n\n return dest;\n}\n\nfunction $parcel$missingModule(name) {\n var err = new Error(\"Cannot find module '\" + name + \"'\");\n err.code = 'MODULE_NOT_FOUND';\n throw err;\n}\n\nvar $parcel$global =\n typeof globalThis !== 'undefined'\n ? globalThis\n : typeof self !== 'undefined'\n ? self\n : typeof window !== 'undefined'\n ? window\n : typeof global !== 'undefined'\n ? global\n : {};\n","import * as React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Avatar\n * -----------------------------------------------------------------------------------------------*/\n\nconst AVATAR_NAME = 'Avatar';\n\ntype ScopedProps<P> = P & { __scopeAvatar?: Scope };\nconst [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);\n\ntype ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';\n\ntype AvatarContextValue = {\n imageLoadingStatus: ImageLoadingStatus;\n onImageLoadingStatusChange(status: ImageLoadingStatus): void;\n};\n\nconst [AvatarProvider, useAvatarContext] = createAvatarContext<AvatarContextValue>(AVATAR_NAME);\n\ntype AvatarElement = React.ElementRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = Radix.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface AvatarProps extends PrimitiveSpanProps {}\n\nconst Avatar = React.forwardRef<AvatarElement, AvatarProps>(\n (props: ScopedProps<AvatarProps>, forwardedRef) => {\n const { __scopeAvatar, ...avatarProps } = props;\n const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n return (\n <AvatarProvider\n scope={__scopeAvatar}\n imageLoadingStatus={imageLoadingStatus}\n onImageLoadingStatusChange={setImageLoadingStatus}\n >\n <Primitive.span {...avatarProps} ref={forwardedRef} />\n </AvatarProvider>\n );\n }\n);\n\nAvatar.displayName = AVATAR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarImage\n * -----------------------------------------------------------------------------------------------*/\n\nconst IMAGE_NAME = 'AvatarImage';\n\ntype AvatarImageElement = React.ElementRef<typeof Primitive.img>;\ntype PrimitiveImageProps = Radix.ComponentPropsWithoutRef<typeof Primitive.img>;\ninterface AvatarImageProps extends PrimitiveImageProps {\n onLoadingStatusChange?: (status: ImageLoadingStatus) => void;\n}\n\nconst AvatarImage = React.forwardRef<AvatarImageElement, AvatarImageProps>(\n (props: ScopedProps<AvatarImageProps>, forwardedRef) => {\n const { __scopeAvatar, src, onLoadingStatusChange = () => {}, ...imageProps } = props;\n const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);\n const imageLoadingStatus = useImageLoadingStatus(src);\n const handleLoadingStatusChange = useCallbackRef((status: ImageLoadingStatus) => {\n onLoadingStatusChange(status);\n context.onImageLoadingStatusChange(status);\n });\n\n useLayoutEffect(() => {\n if (imageLoadingStatus !== 'idle') {\n handleLoadingStatusChange(imageLoadingStatus);\n }\n }, [imageLoadingStatus, handleLoadingStatusChange]);\n\n return imageLoadingStatus === 'loaded' ? (\n <Primitive.img {...imageProps} ref={forwardedRef} src={src} />\n ) : null;\n }\n);\n\nAvatarImage.displayName = IMAGE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarFallback\n * -----------------------------------------------------------------------------------------------*/\n\nconst FALLBACK_NAME = 'AvatarFallback';\n\ntype AvatarFallbackElement = React.ElementRef<typeof Primitive.span>;\ninterface AvatarFallbackProps extends PrimitiveSpanProps {\n delayMs?: number;\n}\n\nconst AvatarFallback = React.forwardRef<AvatarFallbackElement, AvatarFallbackProps>(\n (props: ScopedProps<AvatarFallbackProps>, forwardedRef) => {\n const { __scopeAvatar, delayMs, ...fallbackProps } = props;\n const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);\n const [canRender, setCanRender] = React.useState(delayMs === undefined);\n\n React.useEffect(() => {\n if (delayMs !== undefined) {\n const timerId = window.setTimeout(() => setCanRender(true), delayMs);\n return () => window.clearTimeout(timerId);\n }\n }, [delayMs]);\n\n return canRender && context.imageLoadingStatus !== 'loaded' ? (\n <Primitive.span {...fallbackProps} ref={forwardedRef} />\n ) : null;\n }\n);\n\nAvatarFallback.displayName = FALLBACK_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction useImageLoadingStatus(src?: string) {\n const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n\n React.useEffect(() => {\n if (!src) {\n setLoadingStatus('error');\n return;\n }\n\n let isMounted = true;\n const image = new window.Image();\n\n const updateStatus = (status: ImageLoadingStatus) => () => {\n if (!isMounted) return;\n setLoadingStatus(status);\n };\n\n setLoadingStatus('loading');\n image.onload = updateStatus('loaded');\n image.onerror = updateStatus('error');\n image.src = src;\n\n return () => {\n isMounted = false;\n };\n }, [src]);\n\n return loadingStatus;\n}\nconst Root = Avatar;\nconst Image = AvatarImage;\nconst Fallback = AvatarFallback;\n\nexport {\n createAvatarScope,\n //\n Avatar,\n AvatarImage,\n AvatarFallback,\n //\n Root,\n Image,\n Fallback,\n};\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps };\n"],"names":["dest","source","a","Object","keys","forEach","key","defineProperty","enumerable","get","__esModule","default","createAvatarContext","createAvatarScope","createContextScope","AvatarProvider","useAvatarContext","Avatar","React","forwardRef","props","forwardedRef","__scopeAvatar","avatarProps","imageLoadingStatus","setImageLoadingStatus","useState","_react","createElement","$c23965db28f1a5b5bcad2d58e45a8153$var$AvatarProvider","scope","onImageLoadingStatusChange","Primitive","span","_babelRuntimeHelpersExtends","ref","AvatarImage","src","onLoadingStatusChange","imageProps","context","loadingStatus","setLoadingStatus","useEffect","isMounted","image","window","Image","updateStatus","status","onload","onerror","useImageLoadingStatus","handleLoadingStatusChange","useCallbackRef","useLayoutEffect","img","AvatarFallback","delayMs","fallbackProps","canRender","setCanRender","undefined","timerId","setTimeout","clearTimeout","Root","Fallback"],"version":3,"file":"index.js.map"}
1
+ {"mappings":"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","sources":["packages/react/avatar/src/index.ts","packages/react/avatar/src/Avatar.tsx"],"sourcesContent":["export * from './Avatar';\n","import * as React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Avatar\n * -----------------------------------------------------------------------------------------------*/\n\nconst AVATAR_NAME = 'Avatar';\n\ntype ScopedProps<P> = P & { __scopeAvatar?: Scope };\nconst [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);\n\ntype ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';\n\ntype AvatarContextValue = {\n imageLoadingStatus: ImageLoadingStatus;\n onImageLoadingStatusChange(status: ImageLoadingStatus): void;\n};\n\nconst [AvatarProvider, useAvatarContext] = createAvatarContext<AvatarContextValue>(AVATAR_NAME);\n\ntype AvatarElement = React.ElementRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = Radix.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface AvatarProps extends PrimitiveSpanProps {}\n\nconst Avatar = React.forwardRef<AvatarElement, AvatarProps>(\n (props: ScopedProps<AvatarProps>, forwardedRef) => {\n const { __scopeAvatar, ...avatarProps } = props;\n const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n return (\n <AvatarProvider\n scope={__scopeAvatar}\n imageLoadingStatus={imageLoadingStatus}\n onImageLoadingStatusChange={setImageLoadingStatus}\n >\n <Primitive.span {...avatarProps} ref={forwardedRef} />\n </AvatarProvider>\n );\n }\n);\n\nAvatar.displayName = AVATAR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarImage\n * -----------------------------------------------------------------------------------------------*/\n\nconst IMAGE_NAME = 'AvatarImage';\n\ntype AvatarImageElement = React.ElementRef<typeof Primitive.img>;\ntype PrimitiveImageProps = Radix.ComponentPropsWithoutRef<typeof Primitive.img>;\ninterface AvatarImageProps extends PrimitiveImageProps {\n onLoadingStatusChange?: (status: ImageLoadingStatus) => void;\n}\n\nconst AvatarImage = React.forwardRef<AvatarImageElement, AvatarImageProps>(\n (props: ScopedProps<AvatarImageProps>, forwardedRef) => {\n const { __scopeAvatar, src, onLoadingStatusChange = () => {}, ...imageProps } = props;\n const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);\n const imageLoadingStatus = useImageLoadingStatus(src);\n const handleLoadingStatusChange = useCallbackRef((status: ImageLoadingStatus) => {\n onLoadingStatusChange(status);\n context.onImageLoadingStatusChange(status);\n });\n\n useLayoutEffect(() => {\n if (imageLoadingStatus !== 'idle') {\n handleLoadingStatusChange(imageLoadingStatus);\n }\n }, [imageLoadingStatus, handleLoadingStatusChange]);\n\n return imageLoadingStatus === 'loaded' ? (\n <Primitive.img {...imageProps} ref={forwardedRef} src={src} />\n ) : null;\n }\n);\n\nAvatarImage.displayName = IMAGE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarFallback\n * -----------------------------------------------------------------------------------------------*/\n\nconst FALLBACK_NAME = 'AvatarFallback';\n\ntype AvatarFallbackElement = React.ElementRef<typeof Primitive.span>;\ninterface AvatarFallbackProps extends PrimitiveSpanProps {\n delayMs?: number;\n}\n\nconst AvatarFallback = React.forwardRef<AvatarFallbackElement, AvatarFallbackProps>(\n (props: ScopedProps<AvatarFallbackProps>, forwardedRef) => {\n const { __scopeAvatar, delayMs, ...fallbackProps } = props;\n const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);\n const [canRender, setCanRender] = React.useState(delayMs === undefined);\n\n React.useEffect(() => {\n if (delayMs !== undefined) {\n const timerId = window.setTimeout(() => setCanRender(true), delayMs);\n return () => window.clearTimeout(timerId);\n }\n }, [delayMs]);\n\n return canRender && context.imageLoadingStatus !== 'loaded' ? (\n <Primitive.span {...fallbackProps} ref={forwardedRef} />\n ) : null;\n }\n);\n\nAvatarFallback.displayName = FALLBACK_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction useImageLoadingStatus(src?: string) {\n const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n\n React.useEffect(() => {\n if (!src) {\n setLoadingStatus('error');\n return;\n }\n\n let isMounted = true;\n const image = new window.Image();\n\n const updateStatus = (status: ImageLoadingStatus) => () => {\n if (!isMounted) return;\n setLoadingStatus(status);\n };\n\n setLoadingStatus('loading');\n image.onload = updateStatus('loaded');\n image.onerror = updateStatus('error');\n image.src = src;\n\n return () => {\n isMounted = false;\n };\n }, [src]);\n\n return loadingStatus;\n}\nconst Root = Avatar;\nconst Image = AvatarImage;\nconst Fallback = AvatarFallback;\n\nexport {\n createAvatarScope,\n //\n Avatar,\n AvatarImage,\n AvatarFallback,\n //\n Root,\n Image,\n Fallback,\n};\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps };\n"],"names":["React","createContextScope","useCallbackRef","useLayoutEffect","Primitive","AVATAR_NAME","createAvatarContext","createAvatarScope","AvatarProvider","useAvatarContext","Avatar","forwardRef","props","forwardedRef","__scopeAvatar","avatarProps","imageLoadingStatus","setImageLoadingStatus","useState","IMAGE_NAME","AvatarImage","src","onLoadingStatusChange","imageProps","context","useImageLoadingStatus","handleLoadingStatusChange","status","onImageLoadingStatusChange","FALLBACK_NAME","AvatarFallback","delayMs","fallbackProps","canRender","setCanRender","undefined","useEffect","timerId","window","setTimeout","clearTimeout","loadingStatus","setLoadingStatus","isMounted","image","Image","updateStatus","onload","onerror","Root","Fallback"],"version":3,"file":"index.js.map"}
package/dist/index.module.js CHANGED
@@ -1,2 +1,128 @@
1
- import{Primitive as e}from"@radix-ui/react-primitive";import{useLayoutEffect as t}from"@radix-ui/react-use-layout-effect";import{useCallbackRef as a}from"@radix-ui/react-use-callback-ref";import{createContextScope as r}from"@radix-ui/react-context";import*as o from"react";import n from"@babel/runtime/helpers/esm/extends";const[c,i]=r("Avatar");export{i as createAvatarScope};const[s,l]=c("Avatar");export const Avatar=/*#__PURE__*/o.forwardRef(((t,a)=>{const{__scopeAvatar:r,...c}=t,[i,l]=o.useState("idle");/*#__PURE__*/return o.createElement(s,{scope:r,imageLoadingStatus:i,onImageLoadingStatusChange:l},/*#__PURE__*/o.createElement(e.span,n({},c,{ref:a})))}));/*#__PURE__*/export const AvatarImage=/*#__PURE__*/o.forwardRef(((r,c)=>{const{__scopeAvatar:i,src:s,onLoadingStatusChange:d=(()=>{}),...m}=r,u=l("AvatarImage",i),f=function(e){const[t,a]=o.useState("idle");return o.useEffect((()=>{if(!e)return void a("error");let t=!0;const r=new window.Image,o=e=>()=>{t&&a(e)};return a("loading"),r.onload=o("loaded"),r.onerror=o("error"),r.src=e,()=>{t=!1}}),[e]),t}(s),p=a((e=>{d(e),u.onImageLoadingStatusChange(e)}));return t((()=>{"idle"!==f&&p(f)}),[f,p]),"loaded"===f?/*#__PURE__*/o.createElement(e.img,n({},m,{ref:c,src:s})):null}));/*#__PURE__*/export const AvatarFallback=/*#__PURE__*/o.forwardRef(((t,a)=>{const{__scopeAvatar:r,delayMs:c,...i}=t,s=l("AvatarFallback",r),[d,m]=o.useState(void 0===c);return o.useEffect((()=>{if(void 0!==c){const e=window.setTimeout((()=>m(!0)),c);return()=>window.clearTimeout(e)}}),[c]),d&&"loaded"!==s.imageLoadingStatus?/*#__PURE__*/o.createElement(e.span,n({},i,{ref:a})):null}));/*#__PURE__*/export const Root=Avatar;export const Image=AvatarImage;export const Fallback=AvatarFallback;
1
+ import $8NyvN$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
2
+ import {forwardRef as $8NyvN$forwardRef, useState as $8NyvN$useState, createElement as $8NyvN$createElement, useEffect as $8NyvN$useEffect} from "react";
3
+ import {createContextScope as $8NyvN$createContextScope} from "@radix-ui/react-context";
4
+ import {useCallbackRef as $8NyvN$useCallbackRef} from "@radix-ui/react-use-callback-ref";
5
+ import {useLayoutEffect as $8NyvN$useLayoutEffect} from "@radix-ui/react-use-layout-effect";
6
+ import {Primitive as $8NyvN$Primitive} from "@radix-ui/react-primitive";
7
+
8
+ function $parcel$export(e, n, v, s) {
9
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
10
+ }
11
+ var $cddcb0b647441e34$exports = {};
12
+
13
+ $parcel$export($cddcb0b647441e34$exports, "createAvatarScope", () => $cddcb0b647441e34$export$90370d16b488820f);
14
+ $parcel$export($cddcb0b647441e34$exports, "Avatar", () => $cddcb0b647441e34$export$e2255cf6045e8d47);
15
+ $parcel$export($cddcb0b647441e34$exports, "AvatarImage", () => $cddcb0b647441e34$export$2cd8ae1985206fe8);
16
+ $parcel$export($cddcb0b647441e34$exports, "AvatarFallback", () => $cddcb0b647441e34$export$69fffb6a9571fbfe);
17
+ $parcel$export($cddcb0b647441e34$exports, "Root", () => $cddcb0b647441e34$export$be92b6f5f03c0fe9);
18
+ $parcel$export($cddcb0b647441e34$exports, "Image", () => $cddcb0b647441e34$export$3e431a229df88919);
19
+ $parcel$export($cddcb0b647441e34$exports, "Fallback", () => $cddcb0b647441e34$export$fb8d7f40caaeea67);
20
+
21
+
22
+
23
+
24
+
25
+
26
+ /* -------------------------------------------------------------------------------------------------
27
+ * Avatar
28
+ * -----------------------------------------------------------------------------------------------*/ const $cddcb0b647441e34$var$AVATAR_NAME = 'Avatar';
29
+ const [$cddcb0b647441e34$var$createAvatarContext, $cddcb0b647441e34$export$90370d16b488820f] = $8NyvN$createContextScope($cddcb0b647441e34$var$AVATAR_NAME);
30
+ const [$cddcb0b647441e34$var$AvatarProvider, $cddcb0b647441e34$var$useAvatarContext] = $cddcb0b647441e34$var$createAvatarContext($cddcb0b647441e34$var$AVATAR_NAME);
31
+ const $cddcb0b647441e34$export$e2255cf6045e8d47 = /*#__PURE__*/ $8NyvN$forwardRef((props, forwardedRef)=>{
32
+ const { __scopeAvatar: __scopeAvatar , ...avatarProps } = props;
33
+ const [imageLoadingStatus, setImageLoadingStatus] = $8NyvN$useState('idle');
34
+ return /*#__PURE__*/ $8NyvN$createElement($cddcb0b647441e34$var$AvatarProvider, {
35
+ scope: __scopeAvatar,
36
+ imageLoadingStatus: imageLoadingStatus,
37
+ onImageLoadingStatusChange: setImageLoadingStatus
38
+ }, /*#__PURE__*/ $8NyvN$createElement($8NyvN$Primitive.span, $8NyvN$babelruntimehelpersesmextends({}, avatarProps, {
39
+ ref: forwardedRef
40
+ })));
41
+ });
42
+ /*#__PURE__*/ Object.assign($cddcb0b647441e34$export$e2255cf6045e8d47, {
43
+ displayName: $cddcb0b647441e34$var$AVATAR_NAME
44
+ });
45
+ /* -------------------------------------------------------------------------------------------------
46
+ * AvatarImage
47
+ * -----------------------------------------------------------------------------------------------*/ const $cddcb0b647441e34$var$IMAGE_NAME = 'AvatarImage';
48
+ const $cddcb0b647441e34$export$2cd8ae1985206fe8 = /*#__PURE__*/ $8NyvN$forwardRef((props, forwardedRef)=>{
49
+ const { __scopeAvatar: __scopeAvatar , src: src , onLoadingStatusChange: onLoadingStatusChange = ()=>{} , ...imageProps } = props;
50
+ const context = $cddcb0b647441e34$var$useAvatarContext($cddcb0b647441e34$var$IMAGE_NAME, __scopeAvatar);
51
+ const imageLoadingStatus = $cddcb0b647441e34$var$useImageLoadingStatus(src);
52
+ const handleLoadingStatusChange = $8NyvN$useCallbackRef((status)=>{
53
+ onLoadingStatusChange(status);
54
+ context.onImageLoadingStatusChange(status);
55
+ });
56
+ $8NyvN$useLayoutEffect(()=>{
57
+ if (imageLoadingStatus !== 'idle') handleLoadingStatusChange(imageLoadingStatus);
58
+ }, [
59
+ imageLoadingStatus,
60
+ handleLoadingStatusChange
61
+ ]);
62
+ return imageLoadingStatus === 'loaded' ? /*#__PURE__*/ $8NyvN$createElement($8NyvN$Primitive.img, $8NyvN$babelruntimehelpersesmextends({}, imageProps, {
63
+ ref: forwardedRef,
64
+ src: src
65
+ })) : null;
66
+ });
67
+ /*#__PURE__*/ Object.assign($cddcb0b647441e34$export$2cd8ae1985206fe8, {
68
+ displayName: $cddcb0b647441e34$var$IMAGE_NAME
69
+ });
70
+ /* -------------------------------------------------------------------------------------------------
71
+ * AvatarFallback
72
+ * -----------------------------------------------------------------------------------------------*/ const $cddcb0b647441e34$var$FALLBACK_NAME = 'AvatarFallback';
73
+ const $cddcb0b647441e34$export$69fffb6a9571fbfe = /*#__PURE__*/ $8NyvN$forwardRef((props, forwardedRef)=>{
74
+ const { __scopeAvatar: __scopeAvatar , delayMs: delayMs , ...fallbackProps } = props;
75
+ const context = $cddcb0b647441e34$var$useAvatarContext($cddcb0b647441e34$var$FALLBACK_NAME, __scopeAvatar);
76
+ const [canRender, setCanRender] = $8NyvN$useState(delayMs === undefined);
77
+ $8NyvN$useEffect(()=>{
78
+ if (delayMs !== undefined) {
79
+ const timerId = window.setTimeout(()=>setCanRender(true)
80
+ , delayMs);
81
+ return ()=>window.clearTimeout(timerId)
82
+ ;
83
+ }
84
+ }, [
85
+ delayMs
86
+ ]);
87
+ return canRender && context.imageLoadingStatus !== 'loaded' ? /*#__PURE__*/ $8NyvN$createElement($8NyvN$Primitive.span, $8NyvN$babelruntimehelpersesmextends({}, fallbackProps, {
88
+ ref: forwardedRef
89
+ })) : null;
90
+ });
91
+ /*#__PURE__*/ Object.assign($cddcb0b647441e34$export$69fffb6a9571fbfe, {
92
+ displayName: $cddcb0b647441e34$var$FALLBACK_NAME
93
+ });
94
+ /* -----------------------------------------------------------------------------------------------*/ function $cddcb0b647441e34$var$useImageLoadingStatus(src) {
95
+ const [loadingStatus, setLoadingStatus] = $8NyvN$useState('idle');
96
+ $8NyvN$useEffect(()=>{
97
+ if (!src) {
98
+ setLoadingStatus('error');
99
+ return;
100
+ }
101
+ let isMounted = true;
102
+ const image = new window.Image();
103
+ const updateStatus = (status)=>()=>{
104
+ if (!isMounted) return;
105
+ setLoadingStatus(status);
106
+ }
107
+ ;
108
+ setLoadingStatus('loading');
109
+ image.onload = updateStatus('loaded');
110
+ image.onerror = updateStatus('error');
111
+ image.src = src;
112
+ return ()=>{
113
+ isMounted = false;
114
+ };
115
+ }, [
116
+ src
117
+ ]);
118
+ return loadingStatus;
119
+ }
120
+ const $cddcb0b647441e34$export$be92b6f5f03c0fe9 = $cddcb0b647441e34$export$e2255cf6045e8d47;
121
+ const $cddcb0b647441e34$export$3e431a229df88919 = $cddcb0b647441e34$export$2cd8ae1985206fe8;
122
+ const $cddcb0b647441e34$export$fb8d7f40caaeea67 = $cddcb0b647441e34$export$69fffb6a9571fbfe;
123
+
124
+
125
+
126
+
127
+ export {$cddcb0b647441e34$export$90370d16b488820f as createAvatarScope, $cddcb0b647441e34$export$e2255cf6045e8d47 as Avatar, $cddcb0b647441e34$export$2cd8ae1985206fe8 as AvatarImage, $cddcb0b647441e34$export$69fffb6a9571fbfe as AvatarFallback, $cddcb0b647441e34$export$be92b6f5f03c0fe9 as Root, $cddcb0b647441e34$export$3e431a229df88919 as Image, $cddcb0b647441e34$export$fb8d7f40caaeea67 as Fallback};
2
128
  //# sourceMappingURL=index.module.js.map
package/dist/index.module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"mUAaA,MAGOA,EAAqBC,GAAqBC,EAH7B,yCAYpB,MAAOC,EAAgBC,GAAoBJ,EAZvB,iBAkBpB,MAAMK,oBAASC,EAAMC,YACnB,CAACC,EAAiCC,KAChC,MAAMC,cAAEA,KAAkBC,GAAgBH,GACnCI,EAAoBC,GAAyBP,EAAMQ,SAA6B,qBACvF,OACEC,EAAAC,cAACC,EAAD,CACEC,MAAOR,EACPE,mBAAoBA,EACpBO,2BAA4BN,gBAE5BE,EAAAC,cAACI,EAAUC,KAAXC,EAAA,GAAoBX,EAApB,CAAiCY,IAAKd,6BAoB9C,MAAMe,yBAAclB,EAAMC,YACxB,CAACC,EAAsCC,KACrC,MAAMC,cAAEA,EAAFe,IAAiBA,EAAjBC,sBAAsBA,EAAwB,YAAaC,GAAenB,EAC1EoB,EAAUxB,EAXD,cAW8BM,GACvCE,EAsDV,SAA+Ba,GAC7B,MAAOI,EAAeC,GAAoBxB,EAAMQ,SAA6B,QA0B7E,OAxBAR,EAAMyB,WAAU,KACd,IAAKN,EAEH,YADAK,EAAiB,SAInB,IAAIE,GAAY,EAChB,MAAMC,EAAQ,IAAIC,OAAOC,MAEnBC,EAAgBC,GAA+B,KAC9CL,GACLF,EAAiBO,IAQnB,OALAP,EAAiB,WACjBG,EAAMK,OAASF,EAAa,UAC5BH,EAAMM,QAAUH,EAAa,SAC7BH,EAAMR,IAAMA,EAEL,KACLO,GAAY,KAEb,CAACP,IAEGI,EAjFsBW,CAAsBf,GAC3CgB,EAA4BC,GAAgBL,IAChDX,EAAsBW,GACtBT,EAAQT,2BAA2BkB,MASrC,OANAM,GAAgB,KACa,SAAvB/B,GACF6B,EAA0B7B,KAE3B,CAACA,EAAoB6B,IAEM,WAAvB7B,eACLG,EAAAC,cAACI,EAAUwB,IAAXtB,EAAA,GAAmBK,EAAnB,CAA+BJ,IAAKd,EAAcgB,IAAKA,KACrD,4BAiBR,MAAMoB,4BAAiBvC,EAAMC,YAC3B,CAACC,EAAyCC,KACxC,MAAMC,cAAEA,EAAFoC,QAAiBA,KAAYC,GAAkBvC,EAC/CoB,EAAUxB,EAVE,iBAU8BM,IACzCsC,EAAWC,GAAgB3C,EAAMQ,cAAqBoC,IAAZJ,GASjD,OAPAxC,EAAMyB,WAAU,KACd,QAAgBmB,IAAZJ,EAAuB,CACzB,MAAMK,EAAUjB,OAAOkB,YAAW,IAAMH,GAAa,IAAOH,GAC5D,MAAO,IAAMZ,OAAOmB,aAAaF,MAElC,CAACL,IAEGE,GAA4C,WAA/BpB,EAAQhB,gCAC1BG,EAAAC,cAACI,EAAUC,KAAXC,EAAA,GAAoByB,EAApB,CAAmCxB,IAAKd,KACtC,4BAqCR,MAAM6C,KAAOjD,cACb,MAAM8B,MAAQX,mBACd,MAAM+B,SAAWV","sources":["./packages/react/avatar/src/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Avatar\n * -----------------------------------------------------------------------------------------------*/\n\nconst AVATAR_NAME = 'Avatar';\n\ntype ScopedProps<P> = P & { __scopeAvatar?: Scope };\nconst [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);\n\ntype ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';\n\ntype AvatarContextValue = {\n imageLoadingStatus: ImageLoadingStatus;\n onImageLoadingStatusChange(status: ImageLoadingStatus): void;\n};\n\nconst [AvatarProvider, useAvatarContext] = createAvatarContext<AvatarContextValue>(AVATAR_NAME);\n\ntype AvatarElement = React.ElementRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = Radix.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface AvatarProps extends PrimitiveSpanProps {}\n\nconst Avatar = React.forwardRef<AvatarElement, AvatarProps>(\n (props: ScopedProps<AvatarProps>, forwardedRef) => {\n const { __scopeAvatar, ...avatarProps } = props;\n const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n return (\n <AvatarProvider\n scope={__scopeAvatar}\n imageLoadingStatus={imageLoadingStatus}\n onImageLoadingStatusChange={setImageLoadingStatus}\n >\n <Primitive.span {...avatarProps} ref={forwardedRef} />\n </AvatarProvider>\n );\n }\n);\n\nAvatar.displayName = AVATAR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarImage\n * -----------------------------------------------------------------------------------------------*/\n\nconst IMAGE_NAME = 'AvatarImage';\n\ntype AvatarImageElement = React.ElementRef<typeof Primitive.img>;\ntype PrimitiveImageProps = Radix.ComponentPropsWithoutRef<typeof Primitive.img>;\ninterface AvatarImageProps extends PrimitiveImageProps {\n onLoadingStatusChange?: (status: ImageLoadingStatus) => void;\n}\n\nconst AvatarImage = React.forwardRef<AvatarImageElement, AvatarImageProps>(\n (props: ScopedProps<AvatarImageProps>, forwardedRef) => {\n const { __scopeAvatar, src, onLoadingStatusChange = () => {}, ...imageProps } = props;\n const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);\n const imageLoadingStatus = useImageLoadingStatus(src);\n const handleLoadingStatusChange = useCallbackRef((status: ImageLoadingStatus) => {\n onLoadingStatusChange(status);\n context.onImageLoadingStatusChange(status);\n });\n\n useLayoutEffect(() => {\n if (imageLoadingStatus !== 'idle') {\n handleLoadingStatusChange(imageLoadingStatus);\n }\n }, [imageLoadingStatus, handleLoadingStatusChange]);\n\n return imageLoadingStatus === 'loaded' ? (\n <Primitive.img {...imageProps} ref={forwardedRef} src={src} />\n ) : null;\n }\n);\n\nAvatarImage.displayName = IMAGE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarFallback\n * -----------------------------------------------------------------------------------------------*/\n\nconst FALLBACK_NAME = 'AvatarFallback';\n\ntype AvatarFallbackElement = React.ElementRef<typeof Primitive.span>;\ninterface AvatarFallbackProps extends PrimitiveSpanProps {\n delayMs?: number;\n}\n\nconst AvatarFallback = React.forwardRef<AvatarFallbackElement, AvatarFallbackProps>(\n (props: ScopedProps<AvatarFallbackProps>, forwardedRef) => {\n const { __scopeAvatar, delayMs, ...fallbackProps } = props;\n const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);\n const [canRender, setCanRender] = React.useState(delayMs === undefined);\n\n React.useEffect(() => {\n if (delayMs !== undefined) {\n const timerId = window.setTimeout(() => setCanRender(true), delayMs);\n return () => window.clearTimeout(timerId);\n }\n }, [delayMs]);\n\n return canRender && context.imageLoadingStatus !== 'loaded' ? (\n <Primitive.span {...fallbackProps} ref={forwardedRef} />\n ) : null;\n }\n);\n\nAvatarFallback.displayName = FALLBACK_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction useImageLoadingStatus(src?: string) {\n const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n\n React.useEffect(() => {\n if (!src) {\n setLoadingStatus('error');\n return;\n }\n\n let isMounted = true;\n const image = new window.Image();\n\n const updateStatus = (status: ImageLoadingStatus) => () => {\n if (!isMounted) return;\n setLoadingStatus(status);\n };\n\n setLoadingStatus('loading');\n image.onload = updateStatus('loaded');\n image.onerror = updateStatus('error');\n image.src = src;\n\n return () => {\n isMounted = false;\n };\n }, [src]);\n\n return loadingStatus;\n}\nconst Root = Avatar;\nconst Image = AvatarImage;\nconst Fallback = AvatarFallback;\n\nexport {\n createAvatarScope,\n //\n Avatar,\n AvatarImage,\n AvatarFallback,\n //\n Root,\n Image,\n Fallback,\n};\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps };\n"],"names":["createAvatarContext","createAvatarScope","createContextScope","AvatarProvider","useAvatarContext","Avatar","React","forwardRef","props","forwardedRef","__scopeAvatar","avatarProps","imageLoadingStatus","setImageLoadingStatus","useState","_react","createElement","$d82452236d68c76d85a6435a1ccf2f2$var$AvatarProvider","scope","onImageLoadingStatusChange","Primitive","span","_babelRuntimeHelpersEsmExtends","ref","AvatarImage","src","onLoadingStatusChange","imageProps","context","loadingStatus","setLoadingStatus","useEffect","isMounted","image","window","Image","updateStatus","status","onload","onerror","useImageLoadingStatus","handleLoadingStatusChange","useCallbackRef","useLayoutEffect","img","AvatarFallback","delayMs","fallbackProps","canRender","setCanRender","undefined","timerId","setTimeout","clearTimeout","Root","Fallback"],"version":3,"file":"index.module.js.map"}
1
+ {"mappings":"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","sources":["packages/react/avatar/src/index.ts","packages/react/avatar/src/Avatar.tsx"],"sourcesContent":["export * from './Avatar';\n","import * as React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Avatar\n * -----------------------------------------------------------------------------------------------*/\n\nconst AVATAR_NAME = 'Avatar';\n\ntype ScopedProps<P> = P & { __scopeAvatar?: Scope };\nconst [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);\n\ntype ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';\n\ntype AvatarContextValue = {\n imageLoadingStatus: ImageLoadingStatus;\n onImageLoadingStatusChange(status: ImageLoadingStatus): void;\n};\n\nconst [AvatarProvider, useAvatarContext] = createAvatarContext<AvatarContextValue>(AVATAR_NAME);\n\ntype AvatarElement = React.ElementRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = Radix.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface AvatarProps extends PrimitiveSpanProps {}\n\nconst Avatar = React.forwardRef<AvatarElement, AvatarProps>(\n (props: ScopedProps<AvatarProps>, forwardedRef) => {\n const { __scopeAvatar, ...avatarProps } = props;\n const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n return (\n <AvatarProvider\n scope={__scopeAvatar}\n imageLoadingStatus={imageLoadingStatus}\n onImageLoadingStatusChange={setImageLoadingStatus}\n >\n <Primitive.span {...avatarProps} ref={forwardedRef} />\n </AvatarProvider>\n );\n }\n);\n\nAvatar.displayName = AVATAR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarImage\n * -----------------------------------------------------------------------------------------------*/\n\nconst IMAGE_NAME = 'AvatarImage';\n\ntype AvatarImageElement = React.ElementRef<typeof Primitive.img>;\ntype PrimitiveImageProps = Radix.ComponentPropsWithoutRef<typeof Primitive.img>;\ninterface AvatarImageProps extends PrimitiveImageProps {\n onLoadingStatusChange?: (status: ImageLoadingStatus) => void;\n}\n\nconst AvatarImage = React.forwardRef<AvatarImageElement, AvatarImageProps>(\n (props: ScopedProps<AvatarImageProps>, forwardedRef) => {\n const { __scopeAvatar, src, onLoadingStatusChange = () => {}, ...imageProps } = props;\n const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);\n const imageLoadingStatus = useImageLoadingStatus(src);\n const handleLoadingStatusChange = useCallbackRef((status: ImageLoadingStatus) => {\n onLoadingStatusChange(status);\n context.onImageLoadingStatusChange(status);\n });\n\n useLayoutEffect(() => {\n if (imageLoadingStatus !== 'idle') {\n handleLoadingStatusChange(imageLoadingStatus);\n }\n }, [imageLoadingStatus, handleLoadingStatusChange]);\n\n return imageLoadingStatus === 'loaded' ? (\n <Primitive.img {...imageProps} ref={forwardedRef} src={src} />\n ) : null;\n }\n);\n\nAvatarImage.displayName = IMAGE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarFallback\n * -----------------------------------------------------------------------------------------------*/\n\nconst FALLBACK_NAME = 'AvatarFallback';\n\ntype AvatarFallbackElement = React.ElementRef<typeof Primitive.span>;\ninterface AvatarFallbackProps extends PrimitiveSpanProps {\n delayMs?: number;\n}\n\nconst AvatarFallback = React.forwardRef<AvatarFallbackElement, AvatarFallbackProps>(\n (props: ScopedProps<AvatarFallbackProps>, forwardedRef) => {\n const { __scopeAvatar, delayMs, ...fallbackProps } = props;\n const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);\n const [canRender, setCanRender] = React.useState(delayMs === undefined);\n\n React.useEffect(() => {\n if (delayMs !== undefined) {\n const timerId = window.setTimeout(() => setCanRender(true), delayMs);\n return () => window.clearTimeout(timerId);\n }\n }, [delayMs]);\n\n return canRender && context.imageLoadingStatus !== 'loaded' ? (\n <Primitive.span {...fallbackProps} ref={forwardedRef} />\n ) : null;\n }\n);\n\nAvatarFallback.displayName = FALLBACK_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction useImageLoadingStatus(src?: string) {\n const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n\n React.useEffect(() => {\n if (!src) {\n setLoadingStatus('error');\n return;\n }\n\n let isMounted = true;\n const image = new window.Image();\n\n const updateStatus = (status: ImageLoadingStatus) => () => {\n if (!isMounted) return;\n setLoadingStatus(status);\n };\n\n setLoadingStatus('loading');\n image.onload = updateStatus('loaded');\n image.onerror = updateStatus('error');\n image.src = src;\n\n return () => {\n isMounted = false;\n };\n }, [src]);\n\n return loadingStatus;\n}\nconst Root = Avatar;\nconst Image = AvatarImage;\nconst Fallback = AvatarFallback;\n\nexport {\n createAvatarScope,\n //\n Avatar,\n AvatarImage,\n AvatarFallback,\n //\n Root,\n Image,\n Fallback,\n};\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps };\n"],"names":["React","createContextScope","useCallbackRef","useLayoutEffect","Primitive","AVATAR_NAME","createAvatarContext","createAvatarScope","AvatarProvider","useAvatarContext","Avatar","forwardRef","props","forwardedRef","__scopeAvatar","avatarProps","imageLoadingStatus","setImageLoadingStatus","useState","IMAGE_NAME","AvatarImage","src","onLoadingStatusChange","imageProps","context","useImageLoadingStatus","handleLoadingStatusChange","status","onImageLoadingStatusChange","FALLBACK_NAME","AvatarFallback","delayMs","fallbackProps","canRender","setCanRender","undefined","useEffect","timerId","window","setTimeout","clearTimeout","loadingStatus","setLoadingStatus","isMounted","image","Image","updateStatus","onload","onerror","Root","Fallback"],"version":3,"file":"index.module.js.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@radix-ui/react-avatar",
3
- "version": "0.1.5-rc.1",
3
+ "version": "0.1.5-rc.4",
4
4
  "license": "MIT",
5
5
  "source": "src/index.ts",
6
6
  "main": "dist/index.js",
@@ -17,10 +17,10 @@
17
17
  },
18
18
  "dependencies": {
19
19
  "@babel/runtime": "^7.13.10",
20
- "@radix-ui/react-context": "0.1.2-rc.1",
21
- "@radix-ui/react-primitive": "0.1.5-rc.1",
22
- "@radix-ui/react-use-callback-ref": "0.1.1-rc.1",
23
- "@radix-ui/react-use-layout-effect": "0.1.1-rc.1"
20
+ "@radix-ui/react-context": "0.1.2-rc.4",
21
+ "@radix-ui/react-primitive": "0.1.5-rc.4",
22
+ "@radix-ui/react-use-callback-ref": "0.1.1-rc.4",
23
+ "@radix-ui/react-use-layout-effect": "0.1.1-rc.4"
24
24
  },
25
25
  "peerDependencies": {
26
26
  "react": "^16.8 || ^17.0 || ^18.0"