@planningcenter/organization-avatars 1.0.1 → 1.2.0
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.
- package/README.md +9 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +106 -106
- package/dist/organization_avatar.d.ts +1 -1
- package/dist/organization_avatars.d.ts +1 -1
- package/dist/types.d.ts +0 -3
- package/dist/utils.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
1
|
# Organization Avatars
|
|
2
2
|
|
|
3
|
-
This package provides
|
|
3
|
+
This package provides an `OrganizationAvatars` React component which encapsulates displaying and updating an organization's avatar.
|
|
4
|
+
|
|
5
|
+
See [the component's type signature](https://github.com/planningcenter/organization-avatars/blob/b6f6377e7c4c4f3eae551a888b7ed0546dd5348e/src/types.ts#L1) for up-to-date props.
|
|
6
|
+
|
|
7
|
+
If no `darkModeAvatarUrl` is provided, the `avatarUrl` will be rendered with dark styles in the dark mode avatar's UI slot.
|
|
8
|
+
|
|
9
|
+
The `showDarkModeAvatar` prop gates the rendering of the dark mode avatar UI. It is intended to be controlled by a feature flag, and will eventually be removed when dark mode avatars have been rolled out.
|
|
10
|
+
|
|
11
|
+
To see an example of how this package can be used, see the [`/organization` page in Accounts](https://accounts.planningcenteronline.com/organization). The `OrganizationAvatars` component is mounted in [the `_church_information` partial](https://github.com/planningcenter/accounts/blob/main/app/views/organization/show/_church_information.html.erb).
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),M=require("react-dom"),O=require("@planningcenter/url"),C=require("@planningcenter/tapestry"),w=require("@planningcenter/icons/paths/general"),B=require("@planningcenter/icons/paths/services"),D=require("react-dropzone");function N(a){var o,r,t="";if(typeof a=="string"||typeof a=="number")t+=a;else if(typeof a=="object")if(Array.isArray(a)){var c=a.length;for(o=0;o<c;o++)a[o]&&(r=N(a[o]))&&(t&&(t+=" "),t+=r)}else for(r in a)a[r]&&(t&&(t+=" "),t+=r);return t}function L(){for(var a,o,r=0,t="",c=arguments.length;r<c;r++)(a=arguments[r])&&(o=N(a))&&(t&&(t+=" "),t+=o);return t}function P(){const a=document.querySelector('meta[name="csrf-token"]');if(!a||!a.content)throw new Error('CSRF token not found. Ensure your Rails application includes <meta name="csrf-token" content="..."> in the document head.');return a.content}const T=a=>a==="dark_mode_avatar"?"dark":"light";function U({avatarUrl:a,organization:o,mode:r,pcoEnv:t,onAvatarUpdate:c}){const[s,m]=i.useState(null),[d,f]=i.useState(a),[l,g]=i.useState(!1),[v,u]=i.useState(""),j=i.useId(),k=i.useRef(null),x=T(r),S=h=>{const[n]=h;n&&m(Object.assign(n,{preview:URL.createObjectURL(n)}))};i.useEffect(()=>{f(a)},[a]),i.useEffect(()=>()=>{s?.preview&&(URL.revokeObjectURL(s.preview),u(""))},[s]);const A=async h=>{const n=await fetch(O.pcoApiUrl("accounts",{env:t}),{method:"PATCH",headers:{"Content-Type":"application/json","X-CSRF-Token":P(),Accept:"application/json"},body:JSON.stringify({data:{attributes:h}})}),p=await n.json();if(!n.ok)throw p;return p},z=async h=>{if(h.preventDefault(),!(!s||l)){g(!0);try{const n=new FileReader,p=await new Promise((b,y)=>{n.onloadend=()=>b(n.result),n.onerror=y,n.readAsDataURL(s)}),_=await A({[r]:p,[`${r}_cache`]:""});f(_.data.attributes[r].url),m(null),c(r,_.data.attributes[r].url),k.current?.close()}catch{u("We were unable to save your avatar.")}finally{g(!1)}}},F=async()=>{if(!l){g(!0);try{await A({[`remove_${r}`]:"1"}),f(""),c(r,""),k.current?.close()}catch{u("We were unable to delete your avatar.")}finally{g(!1)}}},R=()=>{m(null),u("")};return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"pco-org-avatar",children:[e.jsx("button",{type:"button",commandfor:j,command:"show-modal",className:`pco-org-avatar__button pco-org-avatar__button--${x}`,children:d?e.jsxs(e.Fragment,{children:[e.jsx("img",{src:d,alt:`Church logo for ${o}`}),e.jsx("span",{children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:w.pencil})})})]}):e.jsx("svg",{width:"48",height:"48",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:B.image})})}),e.jsxs("div",{className:"pco-org-avatar__label",children:[x," mode"]})]}),M.createPortal(e.jsx("dialog",{id:j,ref:k,className:"dialog",onClose:R,children:e.jsxs("form",{onSubmit:z,children:[e.jsxs("div",{className:"dialog__header",children:[e.jsxs("h1",{className:"dialog__title",children:["Church logo — ",x," mode"]}),e.jsx("button",{type:"button",commandfor:j,command:"close",className:"dialog__close","aria-label":"Close modal",children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:w.smallX})})})]}),e.jsxs("div",{className:"dialog__body",children:[v&&e.jsxs("div",{role:"alert",className:"alert alert--danger mb-2",children:[e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",className:"symbol","aria-hidden":"true",children:e.jsx("path",{d:w.exclamationTriangle})}),e.jsx("div",{className:"alert__content",children:e.jsx("p",{children:v})})]}),e.jsx(D,{accept:{"image/*":[".jpg",".jpeg",".png"]},multiple:!1,onDropAccepted:S,children:({getRootProps:h,getInputProps:n,isFocused:p,isDragAccept:_,isDragReject:b,isDragActive:y})=>{const q=L("pco-org-avatar__dropzone",`pco-org-avatar__dropzone--${x}`,{"pco-org-avatar__dropzone--image":s||d,"pco-org-avatar__dropzone--focused":p,"pco-org-avatar__dropzone--accepted":_,"pco-org-avatar__dropzone--rejected":y&&b});return e.jsxs("div",{...h({className:q}),children:[e.jsx("input",{...n()}),s?e.jsx("img",{src:s.preview,alt:`Church logo for ${o}`}):d?e.jsx("img",{src:d,alt:`Church logo for ${o}`}):e.jsxs(e.Fragment,{children:[e.jsx("svg",{width:"64",height:"64",viewBox:"0 0 16 16","aria-hidden":"true",children:e.jsx("path",{d:w.toCloudArrow})}),y&&b?e.jsxs(e.Fragment,{children:[e.jsx("h2",{children:"Wrong file type"}),e.jsx("p",{children:"Please upload a PNG or JPG file."})]}):e.jsxs(e.Fragment,{children:[e.jsx("h2",{children:"Add church logo"}),e.jsx("p",{children:"Use a high-quality image (up to 20mb) with a transparent background."})]})]})]})}})]}),e.jsxs("div",{className:"dialog__actions",children:[d&&e.jsx(C.Button,{label:"Delete logo",kind:"delete",onClick:F,loading:l,disabled:l,className:"mr-a"}),e.jsx(C.Button,{type:"button",label:"Cancel",commandfor:j,command:"close",disabled:l}),e.jsx(C.Button,{type:"submit",label:"Update logo",kind:"primary",loading:l,disabled:!s||l})]})]})}),document.body)]})}function $({avatarUrl:a,darkModeAvatarUrl:o,orgName:r,pcoEnv:t,showDarkModeAvatar:c=!1}){const[s,m]=i.useState(a),[d,f]=i.useState(o),l=(v,u)=>{v==="avatar"?m(u):v==="dark_mode_avatar"&&f(u)},g=d||s;return e.jsxs("div",{className:"d-f g-1",children:[e.jsx(U,{avatarUrl:s,organization:r,mode:"avatar",pcoEnv:t,onAvatarUpdate:l}),c&&e.jsx(U,{avatarUrl:g,organization:r,mode:"dark_mode_avatar",pcoEnv:t,onAvatarUpdate:l})]})}exports.OrganizationAvatars=$;
|
package/dist/index.js
CHANGED
|
@@ -1,53 +1,59 @@
|
|
|
1
1
|
import { jsxs as o, Fragment as b, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
3
|
-
import { createPortal as
|
|
4
|
-
import { pcoApiUrl as
|
|
5
|
-
import { Button as
|
|
6
|
-
import { pencil as
|
|
2
|
+
import { useState as p, useId as S, useRef as $, useEffect as j } from "react";
|
|
3
|
+
import { createPortal as B } from "react-dom";
|
|
4
|
+
import { pcoApiUrl as P } from "@planningcenter/url";
|
|
5
|
+
import { Button as N } from "@planningcenter/tapestry";
|
|
6
|
+
import { pencil as T, smallX as E, exclamationTriangle as I, toCloudArrow as W } from "@planningcenter/icons/paths/general";
|
|
7
7
|
import { image as q } from "@planningcenter/icons/paths/services";
|
|
8
|
-
import
|
|
8
|
+
import G from "react-dropzone";
|
|
9
9
|
function R(a) {
|
|
10
|
-
var
|
|
10
|
+
var n, r, t = "";
|
|
11
11
|
if (typeof a == "string" || typeof a == "number") t += a;
|
|
12
12
|
else if (typeof a == "object") if (Array.isArray(a)) {
|
|
13
|
-
var
|
|
14
|
-
for (
|
|
13
|
+
var d = a.length;
|
|
14
|
+
for (n = 0; n < d; n++) a[n] && (r = R(a[n])) && (t && (t += " "), t += r);
|
|
15
15
|
} else for (r in a) a[r] && (t && (t += " "), t += r);
|
|
16
16
|
return t;
|
|
17
17
|
}
|
|
18
|
-
function
|
|
19
|
-
for (var a,
|
|
18
|
+
function J() {
|
|
19
|
+
for (var a, n, r = 0, t = "", d = arguments.length; r < d; r++) (a = arguments[r]) && (n = R(a)) && (t && (t += " "), t += n);
|
|
20
20
|
return t;
|
|
21
21
|
}
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
function X() {
|
|
23
|
+
const a = document.querySelector('meta[name="csrf-token"]');
|
|
24
|
+
if (!a || !a.content)
|
|
25
|
+
throw new Error(
|
|
26
|
+
'CSRF token not found. Ensure your Rails application includes <meta name="csrf-token" content="..."> in the document head.'
|
|
27
|
+
);
|
|
28
|
+
return a.content;
|
|
29
|
+
}
|
|
30
|
+
const H = (a) => a === "dark_mode_avatar" ? "dark" : "light";
|
|
31
|
+
function x({
|
|
24
32
|
avatarUrl: a,
|
|
25
|
-
organization:
|
|
33
|
+
organization: n,
|
|
26
34
|
mode: r,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
csrfToken: y,
|
|
30
|
-
onAvatarUpdate: w
|
|
35
|
+
pcoEnv: t,
|
|
36
|
+
onAvatarUpdate: d
|
|
31
37
|
}) {
|
|
32
|
-
const [i, g] =
|
|
33
|
-
const [
|
|
34
|
-
|
|
35
|
-
Object.assign(
|
|
36
|
-
preview: URL.createObjectURL(
|
|
38
|
+
const [i, g] = p(null), [s, f] = p(a), [c, v] = p(!1), [_, h] = p(""), y = S(), A = $(null), w = H(r), M = (u) => {
|
|
39
|
+
const [l] = u;
|
|
40
|
+
l && g(
|
|
41
|
+
Object.assign(l, {
|
|
42
|
+
preview: URL.createObjectURL(l)
|
|
37
43
|
})
|
|
38
44
|
);
|
|
39
45
|
};
|
|
40
|
-
|
|
46
|
+
j(() => {
|
|
41
47
|
f(a);
|
|
42
|
-
}, [a]),
|
|
48
|
+
}, [a]), j(() => () => {
|
|
43
49
|
i?.preview && (URL.revokeObjectURL(i.preview), h(""));
|
|
44
50
|
}, [i]);
|
|
45
|
-
const
|
|
46
|
-
const
|
|
51
|
+
const z = async (u) => {
|
|
52
|
+
const l = await fetch(P("accounts", { env: t }), {
|
|
47
53
|
method: "PATCH",
|
|
48
54
|
headers: {
|
|
49
55
|
"Content-Type": "application/json",
|
|
50
|
-
"X-CSRF-Token":
|
|
56
|
+
"X-CSRF-Token": X(),
|
|
51
57
|
Accept: "application/json"
|
|
52
58
|
},
|
|
53
59
|
body: JSON.stringify({
|
|
@@ -55,40 +61,40 @@ function D({
|
|
|
55
61
|
attributes: u
|
|
56
62
|
}
|
|
57
63
|
})
|
|
58
|
-
}),
|
|
59
|
-
if (!
|
|
60
|
-
return
|
|
61
|
-
},
|
|
62
|
-
if (u.preventDefault(), !(!i ||
|
|
64
|
+
}), m = await l.json();
|
|
65
|
+
if (!l.ok) throw m;
|
|
66
|
+
return m;
|
|
67
|
+
}, D = async (u) => {
|
|
68
|
+
if (u.preventDefault(), !(!i || c)) {
|
|
63
69
|
v(!0);
|
|
64
70
|
try {
|
|
65
|
-
const
|
|
66
|
-
|
|
67
|
-
}),
|
|
68
|
-
[r]:
|
|
71
|
+
const l = new FileReader(), m = await new Promise((C, U) => {
|
|
72
|
+
l.onloadend = () => C(l.result), l.onerror = U, l.readAsDataURL(i);
|
|
73
|
+
}), k = await z({
|
|
74
|
+
[r]: m,
|
|
69
75
|
[`${r}_cache`]: ""
|
|
70
76
|
});
|
|
71
|
-
f(
|
|
77
|
+
f(k.data.attributes[r].url), g(null), d(r, k.data.attributes[r].url), A.current?.close();
|
|
72
78
|
} catch {
|
|
73
79
|
h("We were unable to save your avatar.");
|
|
74
80
|
} finally {
|
|
75
81
|
v(!1);
|
|
76
82
|
}
|
|
77
83
|
}
|
|
78
|
-
},
|
|
79
|
-
if (!
|
|
84
|
+
}, F = async () => {
|
|
85
|
+
if (!c) {
|
|
80
86
|
v(!0);
|
|
81
87
|
try {
|
|
82
|
-
await
|
|
88
|
+
await z({
|
|
83
89
|
[`remove_${r}`]: "1"
|
|
84
|
-
}), f(""),
|
|
90
|
+
}), f(""), d(r, ""), A.current?.close();
|
|
85
91
|
} catch {
|
|
86
92
|
h("We were unable to delete your avatar.");
|
|
87
93
|
} finally {
|
|
88
94
|
v(!1);
|
|
89
95
|
}
|
|
90
96
|
}
|
|
91
|
-
},
|
|
97
|
+
}, L = () => {
|
|
92
98
|
g(null), h("");
|
|
93
99
|
};
|
|
94
100
|
return /* @__PURE__ */ o(b, { children: [
|
|
@@ -97,11 +103,11 @@ function D({
|
|
|
97
103
|
"button",
|
|
98
104
|
{
|
|
99
105
|
type: "button",
|
|
100
|
-
commandfor:
|
|
106
|
+
commandfor: y,
|
|
101
107
|
command: "show-modal",
|
|
102
|
-
className: `pco-org-avatar__button pco-org-avatar__button--${
|
|
108
|
+
className: `pco-org-avatar__button pco-org-avatar__button--${w}`,
|
|
103
109
|
children: s ? /* @__PURE__ */ o(b, { children: [
|
|
104
|
-
/* @__PURE__ */ e("img", { src: s, alt: `Church logo for ${
|
|
110
|
+
/* @__PURE__ */ e("img", { src: s, alt: `Church logo for ${n}` }),
|
|
105
111
|
/* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
|
|
106
112
|
"svg",
|
|
107
113
|
{
|
|
@@ -110,7 +116,7 @@ function D({
|
|
|
110
116
|
viewBox: "0 0 16 16",
|
|
111
117
|
fill: "currentColor",
|
|
112
118
|
"aria-hidden": "true",
|
|
113
|
-
children: /* @__PURE__ */ e("path", { d:
|
|
119
|
+
children: /* @__PURE__ */ e("path", { d: T })
|
|
114
120
|
}
|
|
115
121
|
) })
|
|
116
122
|
] }) : /* @__PURE__ */ e(
|
|
@@ -127,30 +133,30 @@ function D({
|
|
|
127
133
|
}
|
|
128
134
|
),
|
|
129
135
|
/* @__PURE__ */ o("div", { className: "pco-org-avatar__label", children: [
|
|
130
|
-
|
|
136
|
+
w,
|
|
131
137
|
" mode"
|
|
132
138
|
] })
|
|
133
139
|
] }),
|
|
134
|
-
|
|
140
|
+
B(
|
|
135
141
|
/* @__PURE__ */ e(
|
|
136
142
|
"dialog",
|
|
137
143
|
{
|
|
138
|
-
id:
|
|
139
|
-
ref:
|
|
144
|
+
id: y,
|
|
145
|
+
ref: A,
|
|
140
146
|
className: "dialog",
|
|
141
|
-
onClose:
|
|
142
|
-
children: /* @__PURE__ */ o("form", { onSubmit:
|
|
147
|
+
onClose: L,
|
|
148
|
+
children: /* @__PURE__ */ o("form", { onSubmit: D, children: [
|
|
143
149
|
/* @__PURE__ */ o("div", { className: "dialog__header", children: [
|
|
144
150
|
/* @__PURE__ */ o("h1", { className: "dialog__title", children: [
|
|
145
151
|
"Church logo — ",
|
|
146
|
-
|
|
152
|
+
w,
|
|
147
153
|
" mode"
|
|
148
154
|
] }),
|
|
149
155
|
/* @__PURE__ */ e(
|
|
150
156
|
"button",
|
|
151
157
|
{
|
|
152
158
|
type: "button",
|
|
153
|
-
commandfor:
|
|
159
|
+
commandfor: y,
|
|
154
160
|
command: "close",
|
|
155
161
|
className: "dialog__close",
|
|
156
162
|
"aria-label": "Close modal",
|
|
@@ -162,7 +168,7 @@ function D({
|
|
|
162
168
|
viewBox: "0 0 16 16",
|
|
163
169
|
fill: "currentColor",
|
|
164
170
|
"aria-hidden": "true",
|
|
165
|
-
children: /* @__PURE__ */ e("path", { d:
|
|
171
|
+
children: /* @__PURE__ */ e("path", { d: E })
|
|
166
172
|
}
|
|
167
173
|
)
|
|
168
174
|
}
|
|
@@ -178,48 +184,48 @@ function D({
|
|
|
178
184
|
viewBox: "0 0 16 16",
|
|
179
185
|
className: "symbol",
|
|
180
186
|
"aria-hidden": "true",
|
|
181
|
-
children: /* @__PURE__ */ e("path", { d:
|
|
187
|
+
children: /* @__PURE__ */ e("path", { d: I })
|
|
182
188
|
}
|
|
183
189
|
),
|
|
184
190
|
/* @__PURE__ */ e("div", { className: "alert__content", children: /* @__PURE__ */ e("p", { children: _ }) })
|
|
185
191
|
] }),
|
|
186
192
|
/* @__PURE__ */ e(
|
|
187
|
-
|
|
193
|
+
G,
|
|
188
194
|
{
|
|
189
195
|
accept: { "image/*": [".jpg", ".jpeg", ".png"] },
|
|
190
196
|
multiple: !1,
|
|
191
|
-
onDropAccepted:
|
|
197
|
+
onDropAccepted: M,
|
|
192
198
|
children: ({
|
|
193
199
|
getRootProps: u,
|
|
194
|
-
getInputProps:
|
|
195
|
-
isFocused:
|
|
196
|
-
isDragAccept:
|
|
197
|
-
isDragReject:
|
|
198
|
-
isDragActive:
|
|
200
|
+
getInputProps: l,
|
|
201
|
+
isFocused: m,
|
|
202
|
+
isDragAccept: k,
|
|
203
|
+
isDragReject: C,
|
|
204
|
+
isDragActive: U
|
|
199
205
|
}) => {
|
|
200
|
-
const
|
|
206
|
+
const O = J(
|
|
201
207
|
"pco-org-avatar__dropzone",
|
|
202
|
-
`pco-org-avatar__dropzone--${
|
|
208
|
+
`pco-org-avatar__dropzone--${w}`,
|
|
203
209
|
{
|
|
204
210
|
"pco-org-avatar__dropzone--image": i || s,
|
|
205
|
-
"pco-org-avatar__dropzone--focused":
|
|
206
|
-
"pco-org-avatar__dropzone--accepted":
|
|
207
|
-
"pco-org-avatar__dropzone--rejected":
|
|
211
|
+
"pco-org-avatar__dropzone--focused": m,
|
|
212
|
+
"pco-org-avatar__dropzone--accepted": k,
|
|
213
|
+
"pco-org-avatar__dropzone--rejected": U && C
|
|
208
214
|
}
|
|
209
215
|
);
|
|
210
|
-
return /* @__PURE__ */ o("div", { ...u({ className:
|
|
211
|
-
/* @__PURE__ */ e("input", { ...
|
|
216
|
+
return /* @__PURE__ */ o("div", { ...u({ className: O }), children: [
|
|
217
|
+
/* @__PURE__ */ e("input", { ...l() }),
|
|
212
218
|
i ? /* @__PURE__ */ e(
|
|
213
219
|
"img",
|
|
214
220
|
{
|
|
215
221
|
src: i.preview,
|
|
216
|
-
alt: `Church logo for ${
|
|
222
|
+
alt: `Church logo for ${n}`
|
|
217
223
|
}
|
|
218
224
|
) : s ? /* @__PURE__ */ e(
|
|
219
225
|
"img",
|
|
220
226
|
{
|
|
221
227
|
src: s,
|
|
222
|
-
alt: `Church logo for ${
|
|
228
|
+
alt: `Church logo for ${n}`
|
|
223
229
|
}
|
|
224
230
|
) : /* @__PURE__ */ o(b, { children: [
|
|
225
231
|
/* @__PURE__ */ e(
|
|
@@ -229,10 +235,10 @@ function D({
|
|
|
229
235
|
height: "64",
|
|
230
236
|
viewBox: "0 0 16 16",
|
|
231
237
|
"aria-hidden": "true",
|
|
232
|
-
children: /* @__PURE__ */ e("path", { d:
|
|
238
|
+
children: /* @__PURE__ */ e("path", { d: W })
|
|
233
239
|
}
|
|
234
240
|
),
|
|
235
|
-
|
|
241
|
+
U && C ? /* @__PURE__ */ o(b, { children: [
|
|
236
242
|
/* @__PURE__ */ e("h2", { children: "Wrong file type" }),
|
|
237
243
|
/* @__PURE__ */ e("p", { children: "Please upload a PNG or JPG file." })
|
|
238
244
|
] }) : /* @__PURE__ */ o(b, { children: [
|
|
@@ -247,34 +253,34 @@ function D({
|
|
|
247
253
|
] }),
|
|
248
254
|
/* @__PURE__ */ o("div", { className: "dialog__actions", children: [
|
|
249
255
|
s && /* @__PURE__ */ e(
|
|
250
|
-
|
|
256
|
+
N,
|
|
251
257
|
{
|
|
252
258
|
label: "Delete logo",
|
|
253
259
|
kind: "delete",
|
|
254
|
-
onClick:
|
|
255
|
-
loading:
|
|
256
|
-
disabled:
|
|
260
|
+
onClick: F,
|
|
261
|
+
loading: c,
|
|
262
|
+
disabled: c,
|
|
257
263
|
className: "mr-a"
|
|
258
264
|
}
|
|
259
265
|
),
|
|
260
266
|
/* @__PURE__ */ e(
|
|
261
|
-
|
|
267
|
+
N,
|
|
262
268
|
{
|
|
263
269
|
type: "button",
|
|
264
270
|
label: "Cancel",
|
|
265
|
-
commandfor:
|
|
271
|
+
commandfor: y,
|
|
266
272
|
command: "close",
|
|
267
|
-
disabled:
|
|
273
|
+
disabled: c
|
|
268
274
|
}
|
|
269
275
|
),
|
|
270
276
|
/* @__PURE__ */ e(
|
|
271
|
-
|
|
277
|
+
N,
|
|
272
278
|
{
|
|
273
279
|
type: "submit",
|
|
274
280
|
label: "Update logo",
|
|
275
281
|
kind: "primary",
|
|
276
|
-
loading:
|
|
277
|
-
disabled: !i ||
|
|
282
|
+
loading: c,
|
|
283
|
+
disabled: !i || c
|
|
278
284
|
}
|
|
279
285
|
)
|
|
280
286
|
] })
|
|
@@ -285,47 +291,41 @@ function D({
|
|
|
285
291
|
)
|
|
286
292
|
] });
|
|
287
293
|
}
|
|
288
|
-
function
|
|
294
|
+
function te({
|
|
289
295
|
avatarUrl: a,
|
|
290
|
-
darkModeAvatarUrl:
|
|
296
|
+
darkModeAvatarUrl: n,
|
|
291
297
|
orgName: r,
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
csrfToken: y,
|
|
295
|
-
showDarkModeAvatar: w = !1
|
|
298
|
+
pcoEnv: t,
|
|
299
|
+
showDarkModeAvatar: d = !1
|
|
296
300
|
}) {
|
|
297
|
-
const [i, g] =
|
|
298
|
-
|
|
299
|
-
),
|
|
301
|
+
const [i, g] = p(a), [s, f] = p(
|
|
302
|
+
n
|
|
303
|
+
), c = (_, h) => {
|
|
300
304
|
_ === "avatar" ? g(h) : _ === "dark_mode_avatar" && f(h);
|
|
301
305
|
};
|
|
302
306
|
return /* @__PURE__ */ o("div", { className: "d-f g-1", children: [
|
|
303
307
|
/* @__PURE__ */ e(
|
|
304
|
-
|
|
308
|
+
x,
|
|
305
309
|
{
|
|
306
310
|
avatarUrl: i,
|
|
307
311
|
organization: r,
|
|
308
312
|
mode: "avatar",
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
csrfToken: y,
|
|
312
|
-
onAvatarUpdate: d
|
|
313
|
+
pcoEnv: t,
|
|
314
|
+
onAvatarUpdate: c
|
|
313
315
|
}
|
|
314
316
|
),
|
|
315
|
-
|
|
316
|
-
|
|
317
|
+
d && /* @__PURE__ */ e(
|
|
318
|
+
x,
|
|
317
319
|
{
|
|
318
320
|
avatarUrl: s || i,
|
|
319
321
|
organization: r,
|
|
320
322
|
mode: "dark_mode_avatar",
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
csrfToken: y,
|
|
324
|
-
onAvatarUpdate: d
|
|
323
|
+
pcoEnv: t,
|
|
324
|
+
onAvatarUpdate: c
|
|
325
325
|
}
|
|
326
326
|
)
|
|
327
327
|
] });
|
|
328
328
|
}
|
|
329
329
|
export {
|
|
330
|
-
|
|
330
|
+
te as OrganizationAvatars
|
|
331
331
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { OrganizationAvatarProps } from "./types";
|
|
2
|
-
export declare function OrganizationAvatar({ avatarUrl, organization, mode,
|
|
2
|
+
export declare function OrganizationAvatar({ avatarUrl, organization, mode, pcoEnv, onAvatarUpdate, }: OrganizationAvatarProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { OrganizationAvatarsProps } from "./types";
|
|
2
|
-
export declare function OrganizationAvatars({ avatarUrl: initialAvatarUrl, darkModeAvatarUrl: initialDarkModeAvatarUrl, orgName,
|
|
2
|
+
export declare function OrganizationAvatars({ avatarUrl: initialAvatarUrl, darkModeAvatarUrl: initialDarkModeAvatarUrl, orgName, pcoEnv, showDarkModeAvatar, }: OrganizationAvatarsProps): import("react/jsx-runtime").JSX.Element;
|
package/dist/types.d.ts
CHANGED
|
@@ -4,16 +4,13 @@ export type OrganizationAvatarsProps = {
|
|
|
4
4
|
orgName: string;
|
|
5
5
|
pcoApp: string;
|
|
6
6
|
pcoEnv?: string;
|
|
7
|
-
csrfToken: string;
|
|
8
7
|
showDarkModeAvatar?: boolean;
|
|
9
8
|
};
|
|
10
9
|
export type OrganizationAvatarProps = {
|
|
11
10
|
avatarUrl?: string;
|
|
12
11
|
organization: string;
|
|
13
12
|
mode: "avatar" | "dark_mode_avatar";
|
|
14
|
-
pcoApp: string;
|
|
15
13
|
pcoEnv?: string;
|
|
16
|
-
csrfToken: string;
|
|
17
14
|
onAvatarUpdate: (attrName: string, newUrl: string) => void;
|
|
18
15
|
};
|
|
19
16
|
export type FileWithPreview = File & {
|
package/dist/utils.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getCsrfToken(): string;
|