@xyo-network/react-address-render 2.77.0 → 2.77.2
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/dist/browser/index.cjs +1 -240
- package/dist/browser/index.cjs.map +1 -1
- package/dist/browser/index.js +1 -217
- package/dist/browser/index.js.map +1 -1
- package/dist/neutral/index.cjs +1 -240
- package/dist/neutral/index.cjs.map +1 -1
- package/dist/neutral/index.js +1 -217
- package/dist/neutral/index.js.map +1 -1
- package/dist/node/index.cjs +1 -246
- package/dist/node/index.cjs.map +1 -1
- package/dist/node/index.js +1 -217
- package/dist/node/index.js.map +1 -1
- package/package.json +5 -5
package/dist/browser/index.cjs
CHANGED
|
@@ -1,241 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/index.ts
|
|
21
|
-
var src_exports = {};
|
|
22
|
-
__export(src_exports, {
|
|
23
|
-
AddressRenderRowBox: () => AddressRenderRowBox,
|
|
24
|
-
FavoriteIconButton: () => FavoriteIconButton,
|
|
25
|
-
generateFavoriteEvent: () => generateFavoriteEvent
|
|
26
|
-
});
|
|
27
|
-
module.exports = __toCommonJS(src_exports);
|
|
28
|
-
|
|
29
|
-
// src/components/favorite/FavoriteIconButton.tsx
|
|
30
|
-
var import_material3 = require("@mui/material");
|
|
31
|
-
var import_react_event = require("@xyo-network/react-event");
|
|
32
|
-
var import_react_shared = require("@xyo-network/react-shared");
|
|
33
|
-
var import_react2 = require("react");
|
|
34
|
-
|
|
35
|
-
// src/components/lib/FavoriteItemEvent.ts
|
|
36
|
-
var generateFavoriteEvent = (favorite, favoriteType, favoriteValue, name) => ({
|
|
37
|
-
favorite: !!favorite,
|
|
38
|
-
favoriteType,
|
|
39
|
-
favoriteValue,
|
|
40
|
-
name
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
// src/components/favorite/FavoriteToggleSVG.tsx
|
|
44
|
-
var import_icons_material = require("@mui/icons-material");
|
|
45
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
46
|
-
var FavoriteToggleSVG = ({ favorite }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: favorite ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Star, { className: "favorite-icon", component: "svg", color: "secondary", fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.StarBorder, { className: "favorite-icon", fontSize: "small" }) });
|
|
47
|
-
|
|
48
|
-
// src/components/favorite/lib/PopperId.ts
|
|
49
|
-
var popperId = "favorite-popper";
|
|
50
|
-
|
|
51
|
-
// src/components/favorite/Popper.tsx
|
|
52
|
-
var import_material2 = require("@mui/material");
|
|
53
|
-
var import_react = require("react");
|
|
54
|
-
|
|
55
|
-
// src/components/favorite/PopperButtonGroup.tsx
|
|
56
|
-
var import_icons_material2 = require("@mui/icons-material");
|
|
57
|
-
var import_material = require("@mui/material");
|
|
58
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
59
|
-
var PopperButtonGroup = ({ name, onConfirmFavorite, favorite, ...props }) => {
|
|
60
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material.ButtonGroup, { ...props, children: [
|
|
61
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
62
|
-
import_material.Button,
|
|
63
|
-
{
|
|
64
|
-
title: "Save Favorite",
|
|
65
|
-
variant: "contained",
|
|
66
|
-
onClick: (e) => {
|
|
67
|
-
e.stopPropagation();
|
|
68
|
-
onConfirmFavorite?.(name, true);
|
|
69
|
-
},
|
|
70
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.Star, {})
|
|
71
|
-
}
|
|
72
|
-
),
|
|
73
|
-
favorite ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
74
|
-
import_material.Button,
|
|
75
|
-
{
|
|
76
|
-
title: "Remove Favorite",
|
|
77
|
-
variant: "contained",
|
|
78
|
-
onClick: (e) => {
|
|
79
|
-
e.stopPropagation();
|
|
80
|
-
onConfirmFavorite?.(name, false);
|
|
81
|
-
},
|
|
82
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.Delete, {})
|
|
83
|
-
}
|
|
84
|
-
) : null
|
|
85
|
-
] });
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
// src/components/favorite/Popper.tsx
|
|
89
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
90
|
-
var FavoritePopper = (0, import_react.forwardRef)(
|
|
91
|
-
({
|
|
92
|
-
name: nameProp,
|
|
93
|
-
favorite,
|
|
94
|
-
favoriteRef,
|
|
95
|
-
onClickAway = () => {
|
|
96
|
-
return;
|
|
97
|
-
},
|
|
98
|
-
onConfirmFavorite,
|
|
99
|
-
...props
|
|
100
|
-
}, ref) => {
|
|
101
|
-
const [name, setName] = (0, import_react.useState)(nameProp);
|
|
102
|
-
(0, import_react.useEffect)(() => {
|
|
103
|
-
setName(nameProp);
|
|
104
|
-
}, [nameProp]);
|
|
105
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.ClickAwayListener, { onClickAway, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
106
|
-
PopperStyled,
|
|
107
|
-
{
|
|
108
|
-
id: popperId,
|
|
109
|
-
anchorEl: favoriteRef?.current,
|
|
110
|
-
onClick: (e) => e.stopPropagation(),
|
|
111
|
-
onTouchStart: (e) => e.stopPropagation(),
|
|
112
|
-
transition: true,
|
|
113
|
-
ref,
|
|
114
|
-
...props,
|
|
115
|
-
children: ({ TransitionProps }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Fade, { ...TransitionProps, timeout: 350, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material2.CardContent, { sx: { display: "flex", gap: 1 }, children: [
|
|
116
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
117
|
-
import_material2.TextField,
|
|
118
|
-
{
|
|
119
|
-
autoFocus: true,
|
|
120
|
-
label: "Favorite Name",
|
|
121
|
-
placeholder: "optional",
|
|
122
|
-
size: "small",
|
|
123
|
-
value: name ?? "",
|
|
124
|
-
onChange: (e) => setName(e.target.value)
|
|
125
|
-
}
|
|
126
|
-
),
|
|
127
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PopperButtonGroup, { favorite, onConfirmFavorite, name })
|
|
128
|
-
] }) }) })
|
|
129
|
-
}
|
|
130
|
-
) });
|
|
131
|
-
}
|
|
132
|
-
);
|
|
133
|
-
FavoritePopper.displayName = "FavoritePopper";
|
|
134
|
-
var PopperStyled = (0, import_material2.styled)(import_material2.Popper, { name: "PopperStyled" })(() => ({ zIndex: 9999 }));
|
|
135
|
-
|
|
136
|
-
// src/components/favorite/FavoriteIconButton.tsx
|
|
137
|
-
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
138
|
-
var FavoriteIconButton = (0, import_react2.forwardRef)(
|
|
139
|
-
({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {
|
|
140
|
-
const [openPopper, setOpenPopper] = (0, import_react2.useState)(false);
|
|
141
|
-
const [favorite, setFavorite] = (0, import_react2.useState)(favoriteProp);
|
|
142
|
-
(0, import_react2.useEffect)(() => {
|
|
143
|
-
setFavorite(favoriteProp);
|
|
144
|
-
}, [favoriteProp]);
|
|
145
|
-
const sharedRef = (0, import_react_shared.useShareForwardedRef)(ref);
|
|
146
|
-
const [buttonRef, dispatch] = (0, import_react_event.useEvent)(void 0, sharedRef);
|
|
147
|
-
const onConfirmFavorite = (name2, newFavoriteState) => {
|
|
148
|
-
const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name2);
|
|
149
|
-
dispatch("address", "favorite", JSON.stringify(favoriteEvent));
|
|
150
|
-
setFavorite(newFavoriteState);
|
|
151
|
-
setOpenPopper(false);
|
|
152
|
-
};
|
|
153
|
-
const starRef = (0, import_react2.useRef)(null);
|
|
154
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
155
|
-
IconButtonCondensed,
|
|
156
|
-
{
|
|
157
|
-
"aria-describedby": popperId,
|
|
158
|
-
ref: buttonRef,
|
|
159
|
-
onClick: (event) => {
|
|
160
|
-
event.stopPropagation();
|
|
161
|
-
setOpenPopper(!openPopper);
|
|
162
|
-
},
|
|
163
|
-
onTouchStart: (event) => {
|
|
164
|
-
event.stopPropagation();
|
|
165
|
-
setOpenPopper(!openPopper);
|
|
166
|
-
},
|
|
167
|
-
onMouseDown: (e) => e.stopPropagation(),
|
|
168
|
-
sx: { lineHeight: 0, p: 0.25 },
|
|
169
|
-
...props,
|
|
170
|
-
children: [
|
|
171
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { ref: starRef, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FavoriteToggleSVG, { favorite }) }),
|
|
172
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
173
|
-
FavoritePopper,
|
|
174
|
-
{
|
|
175
|
-
sx: { zIndex: 1301 },
|
|
176
|
-
name,
|
|
177
|
-
favorite,
|
|
178
|
-
favoriteRef: starRef,
|
|
179
|
-
open: openPopper,
|
|
180
|
-
onConfirmFavorite,
|
|
181
|
-
onClickAway: () => setOpenPopper(false)
|
|
182
|
-
}
|
|
183
|
-
),
|
|
184
|
-
children
|
|
185
|
-
]
|
|
186
|
-
}
|
|
187
|
-
);
|
|
188
|
-
}
|
|
189
|
-
);
|
|
190
|
-
FavoriteIconButton.displayName = "FavoriteIconButton";
|
|
191
|
-
var IconButtonCondensed = (0, import_material3.styled)(import_material3.IconButton, { name: "IconButtonCondensed" })(({ theme }) => ({
|
|
192
|
-
lineHeight: 0,
|
|
193
|
-
padding: theme.spacing(0.25)
|
|
194
|
-
}));
|
|
195
|
-
|
|
196
|
-
// src/components/RenderRowBox.tsx
|
|
197
|
-
var import_material4 = require("@mui/material");
|
|
198
|
-
var import_react_flexbox = require("@xylabs/react-flexbox");
|
|
199
|
-
var import_react_identicon = require("@xylabs/react-identicon");
|
|
200
|
-
var import_react_event2 = require("@xyo-network/react-event");
|
|
201
|
-
var import_react_shared2 = require("@xyo-network/react-shared");
|
|
202
|
-
var import_react3 = require("react");
|
|
203
|
-
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
204
|
-
var AddressRenderRowBox = (0, import_react3.forwardRef)(
|
|
205
|
-
({ address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props }, ref) => {
|
|
206
|
-
const theme = (0, import_material4.useTheme)();
|
|
207
|
-
const sharedRef = (0, import_react_shared2.useShareForwardedRef)(ref);
|
|
208
|
-
const [elementRef, dispatch] = (0, import_react_event2.useEvent)(void 0, sharedRef);
|
|
209
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
210
|
-
import_react_flexbox.FlexRow,
|
|
211
|
-
{
|
|
212
|
-
gap: 2,
|
|
213
|
-
justifyContent: "flex-start",
|
|
214
|
-
ref: elementRef,
|
|
215
|
-
onClick: () => {
|
|
216
|
-
if (address) {
|
|
217
|
-
dispatch("address", "click", address);
|
|
218
|
-
}
|
|
219
|
-
},
|
|
220
|
-
...props,
|
|
221
|
-
children: [
|
|
222
|
-
icons && address ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.ListItemIcon, { sx: { minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_identicon.Identicon, { size: iconSize, value: address }) }) : null,
|
|
223
|
-
iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
224
|
-
import_react_shared2.EllipsizeBox,
|
|
225
|
-
{
|
|
226
|
-
disableSharedRef,
|
|
227
|
-
ellipsisPosition: "end",
|
|
228
|
-
width: "100%",
|
|
229
|
-
typographyProps: { fontSize: theme.typography.body1.fontSize },
|
|
230
|
-
children: name ?? address
|
|
231
|
-
}
|
|
232
|
-
),
|
|
233
|
-
children,
|
|
234
|
-
showFavorite && address ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FavoriteIconButton, { name, size: "small", value: address, valueType: "address", favorite: favoriteProp }) : null
|
|
235
|
-
]
|
|
236
|
-
}
|
|
237
|
-
);
|
|
238
|
-
}
|
|
239
|
-
);
|
|
240
|
-
AddressRenderRowBox.displayName = "AddressRenderRowBox";
|
|
1
|
+
"use strict";var k=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.prototype.hasOwnProperty;var Z=(e,o)=>{for(var r in o)k(e,r,{get:o[r],enumerable:!0})},_=(e,o,r,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of X(o))!Y.call(e,t)&&t!==r&&k(e,t,{get:()=>o[t],enumerable:!(a=U(o,t))||a.enumerable});return e};var $=e=>_(k({},"__esModule",{value:!0}),e);var oe={};Z(oe,{AddressRenderRowBox:()=>K,FavoriteIconButton:()=>C,generateFavoriteEvent:()=>A});module.exports=$(oe);var R=require("@mui/material"),O=require("@xyo-network/react-event"),D=require("@xyo-network/react-shared"),f=require("react");var A=(e,o,r,a)=>({favorite:!!e,favoriteType:o,favoriteValue:r,name:a});var B=require("@mui/icons-material"),u=require("react/jsx-runtime"),H=({favorite:e})=>(0,u.jsx)(u.Fragment,{children:e?(0,u.jsx)(B.Star,{className:"favorite-icon",component:"svg",color:"secondary",fontSize:"small"}):(0,u.jsx)(B.StarBorder,{className:"favorite-icon",fontSize:"small"})});var I="favorite-popper";var n=require("@mui/material"),F=require("react");var h=require("@mui/icons-material"),y=require("@mui/material"),v=require("react/jsx-runtime"),M=({name:e,onConfirmFavorite:o,favorite:r,...a})=>(0,v.jsxs)(y.ButtonGroup,{...a,children:[(0,v.jsx)(y.Button,{title:"Save Favorite",variant:"contained",onClick:t=>{t.stopPropagation(),o?.(e,!0)},children:(0,v.jsx)(h.Star,{})}),r?(0,v.jsx)(y.Button,{title:"Remove Favorite",variant:"contained",onClick:t=>{t.stopPropagation(),o?.(e,!1)},children:(0,v.jsx)(h.Delete,{})}):null]});var l=require("react/jsx-runtime"),L=(0,F.forwardRef)(({name:e,favorite:o,favoriteRef:r,onClickAway:a=()=>{},onConfirmFavorite:t,...g},x)=>{let[p,s]=(0,F.useState)(e);return(0,F.useEffect)(()=>{s(e)},[e]),(0,l.jsx)(n.ClickAwayListener,{onClickAway:a,children:(0,l.jsx)(j,{id:I,anchorEl:r?.current,onClick:i=>i.stopPropagation(),onTouchStart:i=>i.stopPropagation(),transition:!0,ref:x,...g,children:({TransitionProps:i})=>(0,l.jsx)(n.Fade,{...i,timeout:350,children:(0,l.jsx)(n.Card,{children:(0,l.jsxs)(n.CardContent,{sx:{display:"flex",gap:1},children:[(0,l.jsx)(n.TextField,{autoFocus:!0,label:"Favorite Name",placeholder:"optional",size:"small",value:p??"",onChange:c=>s(c.target.value)}),(0,l.jsx)(M,{favorite:o,onConfirmFavorite:t,name:p})]})})})})})});L.displayName="FavoritePopper";var j=(0,n.styled)(n.Popper,{name:"PopperStyled"})(()=>({zIndex:9999}));var P=require("react/jsx-runtime"),C=(0,f.forwardRef)(({children:e,favorite:o,name:r,valueType:a,value:t,...g},x)=>{let[p,s]=(0,f.useState)(!1),[i,c]=(0,f.useState)(o);(0,f.useEffect)(()=>{c(o)},[o]);let E=(0,D.useShareForwardedRef)(x),[w,T]=(0,O.useEvent)(void 0,E),z=(m,N)=>{let Q=A(!!N,a,t,m);T("address","favorite",JSON.stringify(Q)),c(N),s(!1)},G=(0,f.useRef)(null);return(0,P.jsxs)(ee,{"aria-describedby":I,ref:w,onClick:m=>{m.stopPropagation(),s(!p)},onTouchStart:m=>{m.stopPropagation(),s(!p)},onMouseDown:m=>m.stopPropagation(),sx:{lineHeight:0,p:.25},...g,children:[(0,P.jsx)("span",{ref:G,children:(0,P.jsx)(H,{favorite:i})}),(0,P.jsx)(L,{sx:{zIndex:1301},name:r,favorite:i,favoriteRef:G,open:p,onConfirmFavorite:z,onClickAway:()=>s(!1)}),e]})});C.displayName="FavoriteIconButton";var ee=(0,R.styled)(R.IconButton,{name:"IconButtonCondensed"})(({theme:e})=>({lineHeight:0,padding:e.spacing(.25)}));var S=require("@mui/material"),V=require("@xylabs/react-flexbox"),W=require("@xylabs/react-identicon"),J=require("@xyo-network/react-event"),b=require("@xyo-network/react-shared"),q=require("react");var d=require("react/jsx-runtime"),K=(0,q.forwardRef)(({address:e,children:o,disableSharedRef:r,favorite:a=!1,iconOnly:t,iconSize:g=24,icons:x,name:p,showFavorite:s=!1,...i},c)=>{let E=(0,S.useTheme)(),w=(0,b.useShareForwardedRef)(c),[T,z]=(0,J.useEvent)(void 0,w);return(0,d.jsxs)(V.FlexRow,{gap:2,justifyContent:"flex-start",ref:T,onClick:()=>{e&&z("address","click",e)},...i,children:[x&&e?(0,d.jsx)(S.ListItemIcon,{sx:{minWidth:0},children:(0,d.jsx)(W.Identicon,{size:g,value:e})}):null,t?null:(0,d.jsx)(b.EllipsizeBox,{disableSharedRef:r,ellipsisPosition:"end",width:"100%",typographyProps:{fontSize:E.typography.body1.fontSize},children:p??e}),o,s&&e?(0,d.jsx)(C,{name:p,size:"small",value:e,valueType:"address",favorite:a}):null]})});K.displayName="AddressRenderRowBox";
|
|
241
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts","../../src/components/favorite/FavoriteIconButton.tsx","../../src/components/lib/FavoriteItemEvent.ts","../../src/components/favorite/FavoriteToggleSVG.tsx","../../src/components/favorite/lib/PopperId.ts","../../src/components/favorite/Popper.tsx","../../src/components/favorite/PopperButtonGroup.tsx","../../src/components/RenderRowBox.tsx"],"sourcesContent":["export * from './components'\n","import { IconButton, IconButtonProps, styled } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\n\nimport { FavoriteItemEvent, generateFavoriteEvent } from '../lib'\nimport { FavoriteToggleSVG } from './FavoriteToggleSVG'\nimport { popperId } from './lib'\nimport { FavoritePopper } from './Popper'\n\nexport interface FavoriteIconButtonProps extends WithChildren, IconButtonProps {\n favorite?: FavoriteItemEvent['favorite']\n name?: FavoriteItemEvent['name']\n value?: string\n valueType?: FavoriteItemEvent['favoriteType']\n}\n\nexport const FavoriteIconButton = forwardRef<HTMLButtonElement, FavoriteIconButtonProps>(\n ({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {\n const [openPopper, setOpenPopper] = useState(false)\n\n const [favorite, setFavorite] = useState(favoriteProp)\n useEffect(() => {\n setFavorite(favoriteProp)\n }, [favoriteProp])\n\n const sharedRef = useShareForwardedRef(ref)\n const [buttonRef, dispatch] = useEvent(undefined, sharedRef)\n\n const onConfirmFavorite = (name?: string, newFavoriteState?: boolean) => {\n const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name)\n dispatch('address', 'favorite', JSON.stringify(favoriteEvent))\n setFavorite(newFavoriteState)\n setOpenPopper(false)\n }\n\n const starRef = useRef<HTMLSpanElement>(null)\n\n return (\n <IconButtonCondensed\n aria-describedby={popperId}\n ref={buttonRef}\n onClick={(event) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onTouchStart={(event) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onMouseDown={(e) => e.stopPropagation()}\n sx={{ lineHeight: 0, p: 0.25 }}\n {...props}\n >\n <span ref={starRef}>\n <FavoriteToggleSVG favorite={favorite} />\n </span>\n <FavoritePopper\n sx={{ zIndex: 1301 }}\n name={name}\n favorite={favorite}\n favoriteRef={starRef}\n open={openPopper}\n onConfirmFavorite={onConfirmFavorite}\n onClickAway={() => setOpenPopper(false)}\n />\n {children}\n </IconButtonCondensed>\n )\n },\n)\n\nFavoriteIconButton.displayName = 'FavoriteIconButton'\n\nconst IconButtonCondensed = styled(IconButton, { name: 'IconButtonCondensed' })(({ theme }) => ({\n lineHeight: 0,\n padding: theme.spacing(0.25),\n}))\n","export interface FavoriteItemEvent {\n favorite?: boolean\n favoriteType?: FavoriteType\n favoriteValue?: string\n name?: string\n}\n\nexport type FavoriteType = 'address' | 'schema' | 'hash'\n\nexport const generateFavoriteEvent = (favorite?: boolean, favoriteType?: FavoriteType, favoriteValue?: string, name?: string): FavoriteItemEvent => ({\n favorite: !!favorite,\n favoriteType,\n favoriteValue,\n name,\n})\n","import { Star as StarIcon, StarBorder as StarBorderIcon } from '@mui/icons-material'\n\nexport const FavoriteToggleSVG: React.FC<{ favorite?: boolean }> = ({ favorite }) => (\n <>\n {favorite ?\n <StarIcon className=\"favorite-icon\" component={'svg'} color=\"secondary\" fontSize=\"small\" />\n : <StarBorderIcon className=\"favorite-icon\" fontSize=\"small\" />}\n </>\n)\n","export const popperId = 'favorite-popper'\n","import { Card, CardContent, ClickAwayListener, Fade, Popper, PopperProps, styled, TextField } from '@mui/material'\nimport { forwardRef, RefObject, useEffect, useState } from 'react'\n\nimport { popperId } from './lib'\nimport { PopperButtonGroup } from './PopperButtonGroup'\n\nexport interface FavoritePopperProps extends PopperProps {\n favorite?: boolean\n favoriteRef?: RefObject<HTMLElement>\n name?: string\n onClickAway?: (event: MouseEvent | TouchEvent) => void\n onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\nexport const FavoritePopper = forwardRef<HTMLDivElement, FavoritePopperProps>(\n (\n {\n name: nameProp,\n favorite,\n favoriteRef,\n onClickAway = () => {\n return\n },\n onConfirmFavorite,\n ...props\n },\n ref,\n ) => {\n const [name, setName] = useState(nameProp)\n useEffect(() => {\n setName(nameProp)\n }, [nameProp])\n\n return (\n <ClickAwayListener onClickAway={onClickAway}>\n <PopperStyled\n id={popperId}\n anchorEl={favoriteRef?.current}\n onClick={(e) => e.stopPropagation()}\n onTouchStart={(e) => e.stopPropagation()}\n transition\n ref={ref}\n {...props}\n >\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Card>\n <CardContent sx={{ display: 'flex', gap: 1 }}>\n <TextField\n autoFocus\n label=\"Favorite Name\"\n placeholder=\"optional\"\n size=\"small\"\n value={name ?? ''}\n onChange={(e) => setName(e.target.value)}\n />\n <PopperButtonGroup favorite={favorite} onConfirmFavorite={onConfirmFavorite} name={name} />\n </CardContent>\n </Card>\n </Fade>\n )}\n </PopperStyled>\n </ClickAwayListener>\n )\n },\n)\n\nFavoritePopper.displayName = 'FavoritePopper'\n\n// Ensure the popper is over all other mui portal elements\nconst PopperStyled = styled(Popper, { name: 'PopperStyled' })(() => ({ zIndex: 9999 }))\n","import { Delete as DeleteIcon, Star as StarIcon } from '@mui/icons-material'\nimport { Button, ButtonGroup, ButtonGroupProps } from '@mui/material'\n\nexport interface FavoritePopperProps extends ButtonGroupProps {\n favorite?: boolean\n name?: string\n onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\n\nexport const PopperButtonGroup: React.FC<FavoritePopperProps> = ({ name, onConfirmFavorite, favorite, ...props }) => {\n return (\n <ButtonGroup {...props}>\n <Button\n title=\"Save Favorite\"\n variant=\"contained\"\n onClick={(e) => {\n e.stopPropagation()\n onConfirmFavorite?.(name, true)\n }}\n >\n <StarIcon />\n </Button>\n {favorite ?\n <Button\n title=\"Remove Favorite\"\n variant=\"contained\"\n onClick={(e) => {\n e.stopPropagation()\n onConfirmFavorite?.(name, false)\n }}\n >\n <DeleteIcon />\n </Button>\n : null}\n </ButtonGroup>\n )\n}\n","import { ListItemIcon, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport { useEvent } from '@xyo-network/react-event'\nimport { EllipsizeBox, useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nimport { FavoriteIconButton } from './favorite'\n\nexport interface AddressRenderRowBoxProps extends FlexBoxProps {\n address?: string | null\n disableSharedRef?: boolean\n favorite?: boolean\n iconOnly?: boolean\n iconSize?: number\n icons?: boolean\n name?: string\n showFavorite?: boolean\n}\n\nexport const AddressRenderRowBox = forwardRef<HTMLElement, AddressRenderRowBoxProps>(\n (\n { address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props },\n ref,\n ) => {\n const theme = useTheme()\n\n const sharedRef = useShareForwardedRef(ref)\n const [elementRef, dispatch] = useEvent(undefined, sharedRef)\n\n return (\n <FlexRow\n gap={2}\n justifyContent=\"flex-start\"\n ref={elementRef}\n onClick={() => {\n if (address) {\n dispatch('address', 'click', address)\n }\n }}\n {...props}\n >\n {icons && address ?\n <ListItemIcon sx={{ minWidth: 0 }}>\n <Identicon size={iconSize} value={address} />\n </ListItemIcon>\n : null}\n {iconOnly ? null : (\n <EllipsizeBox\n disableSharedRef={disableSharedRef}\n ellipsisPosition={'end'}\n width=\"100%\"\n typographyProps={{ fontSize: theme.typography.body1.fontSize }}\n >\n {name ?? address}\n </EllipsizeBox>\n )}\n {children}\n {showFavorite && address ?\n <FavoriteIconButton name={name} size={'small'} value={address} valueType={'address'} favorite={favoriteProp} />\n : null}\n </FlexRow>\n )\n },\n)\n\nAddressRenderRowBox.displayName = 'AddressRenderRowBox'\n"],"mappings":"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","names":["import_material","import_react","StarIcon","StarBorderIcon","import_material","import_icons_material","import_jsx_runtime","StarIcon","DeleteIcon","import_jsx_runtime","import_jsx_runtime","name","import_material","import_react_event","import_react_shared","import_react","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts","../../src/components/favorite/FavoriteIconButton.tsx","../../src/components/lib/FavoriteItemEvent.ts","../../src/components/favorite/FavoriteToggleSVG.tsx","../../src/components/favorite/lib/PopperId.ts","../../src/components/favorite/Popper.tsx","../../src/components/favorite/PopperButtonGroup.tsx","../../src/components/RenderRowBox.tsx"],"sourcesContent":["export * from './components'\n","import { IconButton, IconButtonProps, styled } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\n\nimport { FavoriteItemEvent, generateFavoriteEvent } from '../lib'\nimport { FavoriteToggleSVG } from './FavoriteToggleSVG'\nimport { popperId } from './lib'\nimport { FavoritePopper } from './Popper'\n\nexport interface FavoriteIconButtonProps extends WithChildren, IconButtonProps {\n favorite?: FavoriteItemEvent['favorite']\n name?: FavoriteItemEvent['name']\n value?: string\n valueType?: FavoriteItemEvent['favoriteType']\n}\n\nexport const FavoriteIconButton = forwardRef<HTMLButtonElement, FavoriteIconButtonProps>(\n ({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {\n const [openPopper, setOpenPopper] = useState(false)\n\n const [favorite, setFavorite] = useState(favoriteProp)\n useEffect(() => {\n setFavorite(favoriteProp)\n }, [favoriteProp])\n\n const sharedRef = useShareForwardedRef(ref)\n const [buttonRef, dispatch] = useEvent(undefined, sharedRef)\n\n const onConfirmFavorite = (name?: string, newFavoriteState?: boolean) => {\n const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name)\n dispatch('address', 'favorite', JSON.stringify(favoriteEvent))\n setFavorite(newFavoriteState)\n setOpenPopper(false)\n }\n\n const starRef = useRef<HTMLSpanElement>(null)\n\n return (\n <IconButtonCondensed\n aria-describedby={popperId}\n ref={buttonRef}\n onClick={(event) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onTouchStart={(event) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onMouseDown={(e) => e.stopPropagation()}\n sx={{ lineHeight: 0, p: 0.25 }}\n {...props}\n >\n <span ref={starRef}>\n <FavoriteToggleSVG favorite={favorite} />\n </span>\n <FavoritePopper\n sx={{ zIndex: 1301 }}\n name={name}\n favorite={favorite}\n favoriteRef={starRef}\n open={openPopper}\n onConfirmFavorite={onConfirmFavorite}\n onClickAway={() => setOpenPopper(false)}\n />\n {children}\n </IconButtonCondensed>\n )\n },\n)\n\nFavoriteIconButton.displayName = 'FavoriteIconButton'\n\nconst IconButtonCondensed = styled(IconButton, { name: 'IconButtonCondensed' })(({ theme }) => ({\n lineHeight: 0,\n padding: theme.spacing(0.25),\n}))\n","export interface FavoriteItemEvent {\n favorite?: boolean\n favoriteType?: FavoriteType\n favoriteValue?: string\n name?: string\n}\n\nexport type FavoriteType = 'address' | 'schema' | 'hash'\n\nexport const generateFavoriteEvent = (favorite?: boolean, favoriteType?: FavoriteType, favoriteValue?: string, name?: string): FavoriteItemEvent => ({\n favorite: !!favorite,\n favoriteType,\n favoriteValue,\n name,\n})\n","import { Star as StarIcon, StarBorder as StarBorderIcon } from '@mui/icons-material'\n\nexport const FavoriteToggleSVG: React.FC<{ favorite?: boolean }> = ({ favorite }) => (\n <>\n {favorite ?\n <StarIcon className=\"favorite-icon\" component={'svg'} color=\"secondary\" fontSize=\"small\" />\n : <StarBorderIcon className=\"favorite-icon\" fontSize=\"small\" />}\n </>\n)\n","export const popperId = 'favorite-popper'\n","import { Card, CardContent, ClickAwayListener, Fade, Popper, PopperProps, styled, TextField } from '@mui/material'\nimport { forwardRef, RefObject, useEffect, useState } from 'react'\n\nimport { popperId } from './lib'\nimport { PopperButtonGroup } from './PopperButtonGroup'\n\nexport interface FavoritePopperProps extends PopperProps {\n favorite?: boolean\n favoriteRef?: RefObject<HTMLElement>\n name?: string\n onClickAway?: (event: MouseEvent | TouchEvent) => void\n onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\nexport const FavoritePopper = forwardRef<HTMLDivElement, FavoritePopperProps>(\n (\n {\n name: nameProp,\n favorite,\n favoriteRef,\n onClickAway = () => {\n return\n },\n onConfirmFavorite,\n ...props\n },\n ref,\n ) => {\n const [name, setName] = useState(nameProp)\n useEffect(() => {\n setName(nameProp)\n }, [nameProp])\n\n return (\n <ClickAwayListener onClickAway={onClickAway}>\n <PopperStyled\n id={popperId}\n anchorEl={favoriteRef?.current}\n onClick={(e) => e.stopPropagation()}\n onTouchStart={(e) => e.stopPropagation()}\n transition\n ref={ref}\n {...props}\n >\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Card>\n <CardContent sx={{ display: 'flex', gap: 1 }}>\n <TextField\n autoFocus\n label=\"Favorite Name\"\n placeholder=\"optional\"\n size=\"small\"\n value={name ?? ''}\n onChange={(e) => setName(e.target.value)}\n />\n <PopperButtonGroup favorite={favorite} onConfirmFavorite={onConfirmFavorite} name={name} />\n </CardContent>\n </Card>\n </Fade>\n )}\n </PopperStyled>\n </ClickAwayListener>\n )\n },\n)\n\nFavoritePopper.displayName = 'FavoritePopper'\n\n// Ensure the popper is over all other mui portal elements\nconst PopperStyled = styled(Popper, { name: 'PopperStyled' })(() => ({ zIndex: 9999 }))\n","import { Delete as DeleteIcon, Star as StarIcon } from '@mui/icons-material'\nimport { Button, ButtonGroup, ButtonGroupProps } from '@mui/material'\n\nexport interface FavoritePopperProps extends ButtonGroupProps {\n favorite?: boolean\n name?: string\n onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\n\nexport const PopperButtonGroup: React.FC<FavoritePopperProps> = ({ name, onConfirmFavorite, favorite, ...props }) => {\n return (\n <ButtonGroup {...props}>\n <Button\n title=\"Save Favorite\"\n variant=\"contained\"\n onClick={(e) => {\n e.stopPropagation()\n onConfirmFavorite?.(name, true)\n }}\n >\n <StarIcon />\n </Button>\n {favorite ?\n <Button\n title=\"Remove Favorite\"\n variant=\"contained\"\n onClick={(e) => {\n e.stopPropagation()\n onConfirmFavorite?.(name, false)\n }}\n >\n <DeleteIcon />\n </Button>\n : null}\n </ButtonGroup>\n )\n}\n","import { ListItemIcon, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport { useEvent } from '@xyo-network/react-event'\nimport { EllipsizeBox, useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nimport { FavoriteIconButton } from './favorite'\n\nexport interface AddressRenderRowBoxProps extends FlexBoxProps {\n address?: string | null\n disableSharedRef?: boolean\n favorite?: boolean\n iconOnly?: boolean\n iconSize?: number\n icons?: boolean\n name?: string\n showFavorite?: boolean\n}\n\nexport const AddressRenderRowBox = forwardRef<HTMLElement, AddressRenderRowBoxProps>(\n (\n { address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props },\n ref,\n ) => {\n const theme = useTheme()\n\n const sharedRef = useShareForwardedRef(ref)\n const [elementRef, dispatch] = useEvent(undefined, sharedRef)\n\n return (\n <FlexRow\n gap={2}\n justifyContent=\"flex-start\"\n ref={elementRef}\n onClick={() => {\n if (address) {\n dispatch('address', 'click', address)\n }\n }}\n {...props}\n >\n {icons && address ?\n <ListItemIcon sx={{ minWidth: 0 }}>\n <Identicon size={iconSize} value={address} />\n </ListItemIcon>\n : null}\n {iconOnly ? null : (\n <EllipsizeBox\n disableSharedRef={disableSharedRef}\n ellipsisPosition={'end'}\n width=\"100%\"\n typographyProps={{ fontSize: theme.typography.body1.fontSize }}\n >\n {name ?? address}\n </EllipsizeBox>\n )}\n {children}\n {showFavorite && address ?\n <FavoriteIconButton name={name} size={'small'} value={address} valueType={'address'} favorite={favoriteProp} />\n : null}\n </FlexRow>\n )\n },\n)\n\nAddressRenderRowBox.displayName = 'AddressRenderRowBox'\n"],"mappings":"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","names":["src_exports","__export","AddressRenderRowBox","FavoriteIconButton","generateFavoriteEvent","__toCommonJS","import_material","import_react_event","import_react_shared","import_react","generateFavoriteEvent","favorite","favoriteType","favoriteValue","name","import_icons_material","import_jsx_runtime","FavoriteToggleSVG","favorite","StarIcon","StarBorderIcon","popperId","import_material","import_react","import_icons_material","import_material","import_jsx_runtime","PopperButtonGroup","name","onConfirmFavorite","favorite","props","e","StarIcon","DeleteIcon","import_jsx_runtime","FavoritePopper","nameProp","favorite","favoriteRef","onClickAway","onConfirmFavorite","props","ref","name","setName","PopperStyled","popperId","e","TransitionProps","PopperButtonGroup","import_jsx_runtime","FavoriteIconButton","children","favoriteProp","name","valueType","value","props","ref","openPopper","setOpenPopper","favorite","setFavorite","sharedRef","buttonRef","dispatch","onConfirmFavorite","newFavoriteState","favoriteEvent","generateFavoriteEvent","starRef","IconButtonCondensed","popperId","event","e","FavoriteToggleSVG","FavoritePopper","theme","import_material","import_react_flexbox","import_react_identicon","import_react_event","import_react_shared","import_react","import_jsx_runtime","AddressRenderRowBox","address","children","disableSharedRef","favoriteProp","iconOnly","iconSize","icons","name","showFavorite","props","ref","theme","sharedRef","elementRef","dispatch","FavoriteIconButton"]}
|
package/dist/browser/index.js
CHANGED
|
@@ -1,218 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import { IconButton, styled as styled2 } from "@mui/material";
|
|
3
|
-
import { useEvent } from "@xyo-network/react-event";
|
|
4
|
-
import { useShareForwardedRef } from "@xyo-network/react-shared";
|
|
5
|
-
import { forwardRef as forwardRef2, useEffect as useEffect2, useRef, useState as useState2 } from "react";
|
|
6
|
-
|
|
7
|
-
// src/components/lib/FavoriteItemEvent.ts
|
|
8
|
-
var generateFavoriteEvent = (favorite, favoriteType, favoriteValue, name) => ({
|
|
9
|
-
favorite: !!favorite,
|
|
10
|
-
favoriteType,
|
|
11
|
-
favoriteValue,
|
|
12
|
-
name
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
// src/components/favorite/FavoriteToggleSVG.tsx
|
|
16
|
-
import { Star as StarIcon, StarBorder as StarBorderIcon } from "@mui/icons-material";
|
|
17
|
-
import { Fragment, jsx } from "react/jsx-runtime";
|
|
18
|
-
var FavoriteToggleSVG = ({ favorite }) => /* @__PURE__ */ jsx(Fragment, { children: favorite ? /* @__PURE__ */ jsx(StarIcon, { className: "favorite-icon", component: "svg", color: "secondary", fontSize: "small" }) : /* @__PURE__ */ jsx(StarBorderIcon, { className: "favorite-icon", fontSize: "small" }) });
|
|
19
|
-
|
|
20
|
-
// src/components/favorite/lib/PopperId.ts
|
|
21
|
-
var popperId = "favorite-popper";
|
|
22
|
-
|
|
23
|
-
// src/components/favorite/Popper.tsx
|
|
24
|
-
import { Card, CardContent, ClickAwayListener, Fade, Popper, styled, TextField } from "@mui/material";
|
|
25
|
-
import { forwardRef, useEffect, useState } from "react";
|
|
26
|
-
|
|
27
|
-
// src/components/favorite/PopperButtonGroup.tsx
|
|
28
|
-
import { Delete as DeleteIcon, Star as StarIcon2 } from "@mui/icons-material";
|
|
29
|
-
import { Button, ButtonGroup } from "@mui/material";
|
|
30
|
-
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
31
|
-
var PopperButtonGroup = ({ name, onConfirmFavorite, favorite, ...props }) => {
|
|
32
|
-
return /* @__PURE__ */ jsxs(ButtonGroup, { ...props, children: [
|
|
33
|
-
/* @__PURE__ */ jsx2(
|
|
34
|
-
Button,
|
|
35
|
-
{
|
|
36
|
-
title: "Save Favorite",
|
|
37
|
-
variant: "contained",
|
|
38
|
-
onClick: (e) => {
|
|
39
|
-
e.stopPropagation();
|
|
40
|
-
onConfirmFavorite?.(name, true);
|
|
41
|
-
},
|
|
42
|
-
children: /* @__PURE__ */ jsx2(StarIcon2, {})
|
|
43
|
-
}
|
|
44
|
-
),
|
|
45
|
-
favorite ? /* @__PURE__ */ jsx2(
|
|
46
|
-
Button,
|
|
47
|
-
{
|
|
48
|
-
title: "Remove Favorite",
|
|
49
|
-
variant: "contained",
|
|
50
|
-
onClick: (e) => {
|
|
51
|
-
e.stopPropagation();
|
|
52
|
-
onConfirmFavorite?.(name, false);
|
|
53
|
-
},
|
|
54
|
-
children: /* @__PURE__ */ jsx2(DeleteIcon, {})
|
|
55
|
-
}
|
|
56
|
-
) : null
|
|
57
|
-
] });
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
// src/components/favorite/Popper.tsx
|
|
61
|
-
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
62
|
-
var FavoritePopper = forwardRef(
|
|
63
|
-
({
|
|
64
|
-
name: nameProp,
|
|
65
|
-
favorite,
|
|
66
|
-
favoriteRef,
|
|
67
|
-
onClickAway = () => {
|
|
68
|
-
return;
|
|
69
|
-
},
|
|
70
|
-
onConfirmFavorite,
|
|
71
|
-
...props
|
|
72
|
-
}, ref) => {
|
|
73
|
-
const [name, setName] = useState(nameProp);
|
|
74
|
-
useEffect(() => {
|
|
75
|
-
setName(nameProp);
|
|
76
|
-
}, [nameProp]);
|
|
77
|
-
return /* @__PURE__ */ jsx3(ClickAwayListener, { onClickAway, children: /* @__PURE__ */ jsx3(
|
|
78
|
-
PopperStyled,
|
|
79
|
-
{
|
|
80
|
-
id: popperId,
|
|
81
|
-
anchorEl: favoriteRef?.current,
|
|
82
|
-
onClick: (e) => e.stopPropagation(),
|
|
83
|
-
onTouchStart: (e) => e.stopPropagation(),
|
|
84
|
-
transition: true,
|
|
85
|
-
ref,
|
|
86
|
-
...props,
|
|
87
|
-
children: ({ TransitionProps }) => /* @__PURE__ */ jsx3(Fade, { ...TransitionProps, timeout: 350, children: /* @__PURE__ */ jsx3(Card, { children: /* @__PURE__ */ jsxs2(CardContent, { sx: { display: "flex", gap: 1 }, children: [
|
|
88
|
-
/* @__PURE__ */ jsx3(
|
|
89
|
-
TextField,
|
|
90
|
-
{
|
|
91
|
-
autoFocus: true,
|
|
92
|
-
label: "Favorite Name",
|
|
93
|
-
placeholder: "optional",
|
|
94
|
-
size: "small",
|
|
95
|
-
value: name ?? "",
|
|
96
|
-
onChange: (e) => setName(e.target.value)
|
|
97
|
-
}
|
|
98
|
-
),
|
|
99
|
-
/* @__PURE__ */ jsx3(PopperButtonGroup, { favorite, onConfirmFavorite, name })
|
|
100
|
-
] }) }) })
|
|
101
|
-
}
|
|
102
|
-
) });
|
|
103
|
-
}
|
|
104
|
-
);
|
|
105
|
-
FavoritePopper.displayName = "FavoritePopper";
|
|
106
|
-
var PopperStyled = styled(Popper, { name: "PopperStyled" })(() => ({ zIndex: 9999 }));
|
|
107
|
-
|
|
108
|
-
// src/components/favorite/FavoriteIconButton.tsx
|
|
109
|
-
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
110
|
-
var FavoriteIconButton = forwardRef2(
|
|
111
|
-
({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {
|
|
112
|
-
const [openPopper, setOpenPopper] = useState2(false);
|
|
113
|
-
const [favorite, setFavorite] = useState2(favoriteProp);
|
|
114
|
-
useEffect2(() => {
|
|
115
|
-
setFavorite(favoriteProp);
|
|
116
|
-
}, [favoriteProp]);
|
|
117
|
-
const sharedRef = useShareForwardedRef(ref);
|
|
118
|
-
const [buttonRef, dispatch] = useEvent(void 0, sharedRef);
|
|
119
|
-
const onConfirmFavorite = (name2, newFavoriteState) => {
|
|
120
|
-
const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name2);
|
|
121
|
-
dispatch("address", "favorite", JSON.stringify(favoriteEvent));
|
|
122
|
-
setFavorite(newFavoriteState);
|
|
123
|
-
setOpenPopper(false);
|
|
124
|
-
};
|
|
125
|
-
const starRef = useRef(null);
|
|
126
|
-
return /* @__PURE__ */ jsxs3(
|
|
127
|
-
IconButtonCondensed,
|
|
128
|
-
{
|
|
129
|
-
"aria-describedby": popperId,
|
|
130
|
-
ref: buttonRef,
|
|
131
|
-
onClick: (event) => {
|
|
132
|
-
event.stopPropagation();
|
|
133
|
-
setOpenPopper(!openPopper);
|
|
134
|
-
},
|
|
135
|
-
onTouchStart: (event) => {
|
|
136
|
-
event.stopPropagation();
|
|
137
|
-
setOpenPopper(!openPopper);
|
|
138
|
-
},
|
|
139
|
-
onMouseDown: (e) => e.stopPropagation(),
|
|
140
|
-
sx: { lineHeight: 0, p: 0.25 },
|
|
141
|
-
...props,
|
|
142
|
-
children: [
|
|
143
|
-
/* @__PURE__ */ jsx4("span", { ref: starRef, children: /* @__PURE__ */ jsx4(FavoriteToggleSVG, { favorite }) }),
|
|
144
|
-
/* @__PURE__ */ jsx4(
|
|
145
|
-
FavoritePopper,
|
|
146
|
-
{
|
|
147
|
-
sx: { zIndex: 1301 },
|
|
148
|
-
name,
|
|
149
|
-
favorite,
|
|
150
|
-
favoriteRef: starRef,
|
|
151
|
-
open: openPopper,
|
|
152
|
-
onConfirmFavorite,
|
|
153
|
-
onClickAway: () => setOpenPopper(false)
|
|
154
|
-
}
|
|
155
|
-
),
|
|
156
|
-
children
|
|
157
|
-
]
|
|
158
|
-
}
|
|
159
|
-
);
|
|
160
|
-
}
|
|
161
|
-
);
|
|
162
|
-
FavoriteIconButton.displayName = "FavoriteIconButton";
|
|
163
|
-
var IconButtonCondensed = styled2(IconButton, { name: "IconButtonCondensed" })(({ theme }) => ({
|
|
164
|
-
lineHeight: 0,
|
|
165
|
-
padding: theme.spacing(0.25)
|
|
166
|
-
}));
|
|
167
|
-
|
|
168
|
-
// src/components/RenderRowBox.tsx
|
|
169
|
-
import { ListItemIcon, useTheme } from "@mui/material";
|
|
170
|
-
import { FlexRow } from "@xylabs/react-flexbox";
|
|
171
|
-
import { Identicon } from "@xylabs/react-identicon";
|
|
172
|
-
import { useEvent as useEvent2 } from "@xyo-network/react-event";
|
|
173
|
-
import { EllipsizeBox, useShareForwardedRef as useShareForwardedRef2 } from "@xyo-network/react-shared";
|
|
174
|
-
import { forwardRef as forwardRef3 } from "react";
|
|
175
|
-
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
176
|
-
var AddressRenderRowBox = forwardRef3(
|
|
177
|
-
({ address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props }, ref) => {
|
|
178
|
-
const theme = useTheme();
|
|
179
|
-
const sharedRef = useShareForwardedRef2(ref);
|
|
180
|
-
const [elementRef, dispatch] = useEvent2(void 0, sharedRef);
|
|
181
|
-
return /* @__PURE__ */ jsxs4(
|
|
182
|
-
FlexRow,
|
|
183
|
-
{
|
|
184
|
-
gap: 2,
|
|
185
|
-
justifyContent: "flex-start",
|
|
186
|
-
ref: elementRef,
|
|
187
|
-
onClick: () => {
|
|
188
|
-
if (address) {
|
|
189
|
-
dispatch("address", "click", address);
|
|
190
|
-
}
|
|
191
|
-
},
|
|
192
|
-
...props,
|
|
193
|
-
children: [
|
|
194
|
-
icons && address ? /* @__PURE__ */ jsx5(ListItemIcon, { sx: { minWidth: 0 }, children: /* @__PURE__ */ jsx5(Identicon, { size: iconSize, value: address }) }) : null,
|
|
195
|
-
iconOnly ? null : /* @__PURE__ */ jsx5(
|
|
196
|
-
EllipsizeBox,
|
|
197
|
-
{
|
|
198
|
-
disableSharedRef,
|
|
199
|
-
ellipsisPosition: "end",
|
|
200
|
-
width: "100%",
|
|
201
|
-
typographyProps: { fontSize: theme.typography.body1.fontSize },
|
|
202
|
-
children: name ?? address
|
|
203
|
-
}
|
|
204
|
-
),
|
|
205
|
-
children,
|
|
206
|
-
showFavorite && address ? /* @__PURE__ */ jsx5(FavoriteIconButton, { name, size: "small", value: address, valueType: "address", favorite: favoriteProp }) : null
|
|
207
|
-
]
|
|
208
|
-
}
|
|
209
|
-
);
|
|
210
|
-
}
|
|
211
|
-
);
|
|
212
|
-
AddressRenderRowBox.displayName = "AddressRenderRowBox";
|
|
213
|
-
export {
|
|
214
|
-
AddressRenderRowBox,
|
|
215
|
-
FavoriteIconButton,
|
|
216
|
-
generateFavoriteEvent
|
|
217
|
-
};
|
|
1
|
+
import{IconButton as _,styled as $}from"@mui/material";import{useEvent as j}from"@xyo-network/react-event";import{useShareForwardedRef as ee}from"@xyo-network/react-shared";import{forwardRef as oe,useEffect as te,useRef as re,useState as T}from"react";var S=(e,o,r,n)=>({favorite:!!e,favoriteType:o,favoriteValue:r,name:n});import{Star as k,StarBorder as A}from"@mui/icons-material";import{Fragment as L,jsx as y}from"react/jsx-runtime";var b=({favorite:e})=>y(L,{children:e?y(k,{className:"favorite-icon",component:"svg",color:"secondary",fontSize:"small"}):y(A,{className:"favorite-icon",fontSize:"small"})});var d="favorite-popper";import{Card as O,CardContent as D,ClickAwayListener as V,Fade as W,Popper as J,styled as q,TextField as K}from"@mui/material";import{forwardRef as Q,useEffect as U,useState as X}from"react";import{Delete as G,Star as N}from"@mui/icons-material";import{Button as E,ButtonGroup as H}from"@mui/material";import{jsx as c,jsxs as M}from"react/jsx-runtime";var w=({name:e,onConfirmFavorite:o,favorite:r,...n})=>M(H,{...n,children:[c(E,{title:"Save Favorite",variant:"contained",onClick:a=>{a.stopPropagation(),o?.(e,!0)},children:c(N,{})}),r?c(E,{title:"Remove Favorite",variant:"contained",onClick:a=>{a.stopPropagation(),o?.(e,!1)},children:c(G,{})}):null]});import{jsx as f,jsxs as Z}from"react/jsx-runtime";var B=Q(({name:e,favorite:o,favoriteRef:r,onClickAway:n=()=>{},onConfirmFavorite:a,...m},v)=>{let[i,p]=X(e);return U(()=>{p(e)},[e]),f(V,{onClickAway:n,children:f(Y,{id:d,anchorEl:r?.current,onClick:t=>t.stopPropagation(),onTouchStart:t=>t.stopPropagation(),transition:!0,ref:v,...m,children:({TransitionProps:t})=>f(W,{...t,timeout:350,children:f(O,{children:Z(D,{sx:{display:"flex",gap:1},children:[f(K,{autoFocus:!0,label:"Favorite Name",placeholder:"optional",size:"small",value:i??"",onChange:l=>p(l.target.value)}),f(w,{favorite:o,onConfirmFavorite:a,name:i})]})})})})})});B.displayName="FavoritePopper";var Y=q(J,{name:"PopperStyled"})(()=>({zIndex:9999}));import{jsx as I,jsxs as ae}from"react/jsx-runtime";var h=oe(({children:e,favorite:o,name:r,valueType:n,value:a,...m},v)=>{let[i,p]=T(!1),[t,l]=T(o);te(()=>{l(o)},[o]);let F=ee(v),[P,g]=j(void 0,F),x=(s,C)=>{let z=S(!!C,n,a,s);g("address","favorite",JSON.stringify(z)),l(C),p(!1)},R=re(null);return ae(ne,{"aria-describedby":d,ref:P,onClick:s=>{s.stopPropagation(),p(!i)},onTouchStart:s=>{s.stopPropagation(),p(!i)},onMouseDown:s=>s.stopPropagation(),sx:{lineHeight:0,p:.25},...m,children:[I("span",{ref:R,children:I(b,{favorite:t})}),I(B,{sx:{zIndex:1301},name:r,favorite:t,favoriteRef:R,open:i,onConfirmFavorite:x,onClickAway:()=>p(!1)}),e]})});h.displayName="FavoriteIconButton";var ne=$(_,{name:"IconButtonCondensed"})(({theme:e})=>({lineHeight:0,padding:e.spacing(.25)}));import{ListItemIcon as ie,useTheme as pe}from"@mui/material";import{FlexRow as se}from"@xylabs/react-flexbox";import{Identicon as le}from"@xylabs/react-identicon";import{useEvent as fe}from"@xyo-network/react-event";import{EllipsizeBox as me,useShareForwardedRef as ve}from"@xyo-network/react-shared";import{forwardRef as de}from"react";import{jsx as u,jsxs as ue}from"react/jsx-runtime";var ce=de(({address:e,children:o,disableSharedRef:r,favorite:n=!1,iconOnly:a,iconSize:m=24,icons:v,name:i,showFavorite:p=!1,...t},l)=>{let F=pe(),P=ve(l),[g,x]=fe(void 0,P);return ue(se,{gap:2,justifyContent:"flex-start",ref:g,onClick:()=>{e&&x("address","click",e)},...t,children:[v&&e?u(ie,{sx:{minWidth:0},children:u(le,{size:m,value:e})}):null,a?null:u(me,{disableSharedRef:r,ellipsisPosition:"end",width:"100%",typographyProps:{fontSize:F.typography.body1.fontSize},children:i??e}),o,p&&e?u(h,{name:i,size:"small",value:e,valueType:"address",favorite:n}):null]})});ce.displayName="AddressRenderRowBox";export{ce as AddressRenderRowBox,h as FavoriteIconButton,S as generateFavoriteEvent};
|
|
218
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/favorite/FavoriteIconButton.tsx","../../src/components/lib/FavoriteItemEvent.ts","../../src/components/favorite/FavoriteToggleSVG.tsx","../../src/components/favorite/lib/PopperId.ts","../../src/components/favorite/Popper.tsx","../../src/components/favorite/PopperButtonGroup.tsx","../../src/components/RenderRowBox.tsx"],"sourcesContent":["import { IconButton, IconButtonProps, styled } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\n\nimport { FavoriteItemEvent, generateFavoriteEvent } from '../lib'\nimport { FavoriteToggleSVG } from './FavoriteToggleSVG'\nimport { popperId } from './lib'\nimport { FavoritePopper } from './Popper'\n\nexport interface FavoriteIconButtonProps extends WithChildren, IconButtonProps {\n favorite?: FavoriteItemEvent['favorite']\n name?: FavoriteItemEvent['name']\n value?: string\n valueType?: FavoriteItemEvent['favoriteType']\n}\n\nexport const FavoriteIconButton = forwardRef<HTMLButtonElement, FavoriteIconButtonProps>(\n ({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {\n const [openPopper, setOpenPopper] = useState(false)\n\n const [favorite, setFavorite] = useState(favoriteProp)\n useEffect(() => {\n setFavorite(favoriteProp)\n }, [favoriteProp])\n\n const sharedRef = useShareForwardedRef(ref)\n const [buttonRef, dispatch] = useEvent(undefined, sharedRef)\n\n const onConfirmFavorite = (name?: string, newFavoriteState?: boolean) => {\n const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name)\n dispatch('address', 'favorite', JSON.stringify(favoriteEvent))\n setFavorite(newFavoriteState)\n setOpenPopper(false)\n }\n\n const starRef = useRef<HTMLSpanElement>(null)\n\n return (\n <IconButtonCondensed\n aria-describedby={popperId}\n ref={buttonRef}\n onClick={(event) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onTouchStart={(event) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onMouseDown={(e) => e.stopPropagation()}\n sx={{ lineHeight: 0, p: 0.25 }}\n {...props}\n >\n <span ref={starRef}>\n <FavoriteToggleSVG favorite={favorite} />\n </span>\n <FavoritePopper\n sx={{ zIndex: 1301 }}\n name={name}\n favorite={favorite}\n favoriteRef={starRef}\n open={openPopper}\n onConfirmFavorite={onConfirmFavorite}\n onClickAway={() => setOpenPopper(false)}\n />\n {children}\n </IconButtonCondensed>\n )\n },\n)\n\nFavoriteIconButton.displayName = 'FavoriteIconButton'\n\nconst IconButtonCondensed = styled(IconButton, { name: 'IconButtonCondensed' })(({ theme }) => ({\n lineHeight: 0,\n padding: theme.spacing(0.25),\n}))\n","export interface FavoriteItemEvent {\n favorite?: boolean\n favoriteType?: FavoriteType\n favoriteValue?: string\n name?: string\n}\n\nexport type FavoriteType = 'address' | 'schema' | 'hash'\n\nexport const generateFavoriteEvent = (favorite?: boolean, favoriteType?: FavoriteType, favoriteValue?: string, name?: string): FavoriteItemEvent => ({\n favorite: !!favorite,\n favoriteType,\n favoriteValue,\n name,\n})\n","import { Star as StarIcon, StarBorder as StarBorderIcon } from '@mui/icons-material'\n\nexport const FavoriteToggleSVG: React.FC<{ favorite?: boolean }> = ({ favorite }) => (\n <>\n {favorite ?\n <StarIcon className=\"favorite-icon\" component={'svg'} color=\"secondary\" fontSize=\"small\" />\n : <StarBorderIcon className=\"favorite-icon\" fontSize=\"small\" />}\n </>\n)\n","export const popperId = 'favorite-popper'\n","import { Card, CardContent, ClickAwayListener, Fade, Popper, PopperProps, styled, TextField } from '@mui/material'\nimport { forwardRef, RefObject, useEffect, useState } from 'react'\n\nimport { popperId } from './lib'\nimport { PopperButtonGroup } from './PopperButtonGroup'\n\nexport interface FavoritePopperProps extends PopperProps {\n favorite?: boolean\n favoriteRef?: RefObject<HTMLElement>\n name?: string\n onClickAway?: (event: MouseEvent | TouchEvent) => void\n onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\nexport const FavoritePopper = forwardRef<HTMLDivElement, FavoritePopperProps>(\n (\n {\n name: nameProp,\n favorite,\n favoriteRef,\n onClickAway = () => {\n return\n },\n onConfirmFavorite,\n ...props\n },\n ref,\n ) => {\n const [name, setName] = useState(nameProp)\n useEffect(() => {\n setName(nameProp)\n }, [nameProp])\n\n return (\n <ClickAwayListener onClickAway={onClickAway}>\n <PopperStyled\n id={popperId}\n anchorEl={favoriteRef?.current}\n onClick={(e) => e.stopPropagation()}\n onTouchStart={(e) => e.stopPropagation()}\n transition\n ref={ref}\n {...props}\n >\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Card>\n <CardContent sx={{ display: 'flex', gap: 1 }}>\n <TextField\n autoFocus\n label=\"Favorite Name\"\n placeholder=\"optional\"\n size=\"small\"\n value={name ?? ''}\n onChange={(e) => setName(e.target.value)}\n />\n <PopperButtonGroup favorite={favorite} onConfirmFavorite={onConfirmFavorite} name={name} />\n </CardContent>\n </Card>\n </Fade>\n )}\n </PopperStyled>\n </ClickAwayListener>\n )\n },\n)\n\nFavoritePopper.displayName = 'FavoritePopper'\n\n// Ensure the popper is over all other mui portal elements\nconst PopperStyled = styled(Popper, { name: 'PopperStyled' })(() => ({ zIndex: 9999 }))\n","import { Delete as DeleteIcon, Star as StarIcon } from '@mui/icons-material'\nimport { Button, ButtonGroup, ButtonGroupProps } from '@mui/material'\n\nexport interface FavoritePopperProps extends ButtonGroupProps {\n favorite?: boolean\n name?: string\n onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\n\nexport const PopperButtonGroup: React.FC<FavoritePopperProps> = ({ name, onConfirmFavorite, favorite, ...props }) => {\n return (\n <ButtonGroup {...props}>\n <Button\n title=\"Save Favorite\"\n variant=\"contained\"\n onClick={(e) => {\n e.stopPropagation()\n onConfirmFavorite?.(name, true)\n }}\n >\n <StarIcon />\n </Button>\n {favorite ?\n <Button\n title=\"Remove Favorite\"\n variant=\"contained\"\n onClick={(e) => {\n e.stopPropagation()\n onConfirmFavorite?.(name, false)\n }}\n >\n <DeleteIcon />\n </Button>\n : null}\n </ButtonGroup>\n )\n}\n","import { ListItemIcon, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport { useEvent } from '@xyo-network/react-event'\nimport { EllipsizeBox, useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nimport { FavoriteIconButton } from './favorite'\n\nexport interface AddressRenderRowBoxProps extends FlexBoxProps {\n address?: string | null\n disableSharedRef?: boolean\n favorite?: boolean\n iconOnly?: boolean\n iconSize?: number\n icons?: boolean\n name?: string\n showFavorite?: boolean\n}\n\nexport const AddressRenderRowBox = forwardRef<HTMLElement, AddressRenderRowBoxProps>(\n (\n { address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props },\n ref,\n ) => {\n const theme = useTheme()\n\n const sharedRef = useShareForwardedRef(ref)\n const [elementRef, dispatch] = useEvent(undefined, sharedRef)\n\n return (\n <FlexRow\n gap={2}\n justifyContent=\"flex-start\"\n ref={elementRef}\n onClick={() => {\n if (address) {\n dispatch('address', 'click', address)\n }\n }}\n {...props}\n >\n {icons && address ?\n <ListItemIcon sx={{ minWidth: 0 }}>\n <Identicon size={iconSize} value={address} />\n </ListItemIcon>\n : null}\n {iconOnly ? null : (\n <EllipsizeBox\n disableSharedRef={disableSharedRef}\n ellipsisPosition={'end'}\n width=\"100%\"\n typographyProps={{ fontSize: theme.typography.body1.fontSize }}\n >\n {name ?? address}\n </EllipsizeBox>\n )}\n {children}\n {showFavorite && address ?\n <FavoriteIconButton name={name} size={'small'} value={address} valueType={'address'} favorite={favoriteProp} />\n : null}\n </FlexRow>\n )\n },\n)\n\nAddressRenderRowBox.displayName = 'AddressRenderRowBox'\n"],"mappings":"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","names":["styled","forwardRef","useEffect","useState","StarIcon","jsx","jsx","jsxs","jsx","jsxs","forwardRef","useState","useEffect","name","styled","useEvent","useShareForwardedRef","forwardRef","jsx","jsxs","forwardRef","useShareForwardedRef","useEvent"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/favorite/FavoriteIconButton.tsx","../../src/components/lib/FavoriteItemEvent.ts","../../src/components/favorite/FavoriteToggleSVG.tsx","../../src/components/favorite/lib/PopperId.ts","../../src/components/favorite/Popper.tsx","../../src/components/favorite/PopperButtonGroup.tsx","../../src/components/RenderRowBox.tsx"],"sourcesContent":["import { IconButton, IconButtonProps, styled } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\n\nimport { FavoriteItemEvent, generateFavoriteEvent } from '../lib'\nimport { FavoriteToggleSVG } from './FavoriteToggleSVG'\nimport { popperId } from './lib'\nimport { FavoritePopper } from './Popper'\n\nexport interface FavoriteIconButtonProps extends WithChildren, IconButtonProps {\n favorite?: FavoriteItemEvent['favorite']\n name?: FavoriteItemEvent['name']\n value?: string\n valueType?: FavoriteItemEvent['favoriteType']\n}\n\nexport const FavoriteIconButton = forwardRef<HTMLButtonElement, FavoriteIconButtonProps>(\n ({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {\n const [openPopper, setOpenPopper] = useState(false)\n\n const [favorite, setFavorite] = useState(favoriteProp)\n useEffect(() => {\n setFavorite(favoriteProp)\n }, [favoriteProp])\n\n const sharedRef = useShareForwardedRef(ref)\n const [buttonRef, dispatch] = useEvent(undefined, sharedRef)\n\n const onConfirmFavorite = (name?: string, newFavoriteState?: boolean) => {\n const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name)\n dispatch('address', 'favorite', JSON.stringify(favoriteEvent))\n setFavorite(newFavoriteState)\n setOpenPopper(false)\n }\n\n const starRef = useRef<HTMLSpanElement>(null)\n\n return (\n <IconButtonCondensed\n aria-describedby={popperId}\n ref={buttonRef}\n onClick={(event) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onTouchStart={(event) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onMouseDown={(e) => e.stopPropagation()}\n sx={{ lineHeight: 0, p: 0.25 }}\n {...props}\n >\n <span ref={starRef}>\n <FavoriteToggleSVG favorite={favorite} />\n </span>\n <FavoritePopper\n sx={{ zIndex: 1301 }}\n name={name}\n favorite={favorite}\n favoriteRef={starRef}\n open={openPopper}\n onConfirmFavorite={onConfirmFavorite}\n onClickAway={() => setOpenPopper(false)}\n />\n {children}\n </IconButtonCondensed>\n )\n },\n)\n\nFavoriteIconButton.displayName = 'FavoriteIconButton'\n\nconst IconButtonCondensed = styled(IconButton, { name: 'IconButtonCondensed' })(({ theme }) => ({\n lineHeight: 0,\n padding: theme.spacing(0.25),\n}))\n","export interface FavoriteItemEvent {\n favorite?: boolean\n favoriteType?: FavoriteType\n favoriteValue?: string\n name?: string\n}\n\nexport type FavoriteType = 'address' | 'schema' | 'hash'\n\nexport const generateFavoriteEvent = (favorite?: boolean, favoriteType?: FavoriteType, favoriteValue?: string, name?: string): FavoriteItemEvent => ({\n favorite: !!favorite,\n favoriteType,\n favoriteValue,\n name,\n})\n","import { Star as StarIcon, StarBorder as StarBorderIcon } from '@mui/icons-material'\n\nexport const FavoriteToggleSVG: React.FC<{ favorite?: boolean }> = ({ favorite }) => (\n <>\n {favorite ?\n <StarIcon className=\"favorite-icon\" component={'svg'} color=\"secondary\" fontSize=\"small\" />\n : <StarBorderIcon className=\"favorite-icon\" fontSize=\"small\" />}\n </>\n)\n","export const popperId = 'favorite-popper'\n","import { Card, CardContent, ClickAwayListener, Fade, Popper, PopperProps, styled, TextField } from '@mui/material'\nimport { forwardRef, RefObject, useEffect, useState } from 'react'\n\nimport { popperId } from './lib'\nimport { PopperButtonGroup } from './PopperButtonGroup'\n\nexport interface FavoritePopperProps extends PopperProps {\n favorite?: boolean\n favoriteRef?: RefObject<HTMLElement>\n name?: string\n onClickAway?: (event: MouseEvent | TouchEvent) => void\n onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\nexport const FavoritePopper = forwardRef<HTMLDivElement, FavoritePopperProps>(\n (\n {\n name: nameProp,\n favorite,\n favoriteRef,\n onClickAway = () => {\n return\n },\n onConfirmFavorite,\n ...props\n },\n ref,\n ) => {\n const [name, setName] = useState(nameProp)\n useEffect(() => {\n setName(nameProp)\n }, [nameProp])\n\n return (\n <ClickAwayListener onClickAway={onClickAway}>\n <PopperStyled\n id={popperId}\n anchorEl={favoriteRef?.current}\n onClick={(e) => e.stopPropagation()}\n onTouchStart={(e) => e.stopPropagation()}\n transition\n ref={ref}\n {...props}\n >\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Card>\n <CardContent sx={{ display: 'flex', gap: 1 }}>\n <TextField\n autoFocus\n label=\"Favorite Name\"\n placeholder=\"optional\"\n size=\"small\"\n value={name ?? ''}\n onChange={(e) => setName(e.target.value)}\n />\n <PopperButtonGroup favorite={favorite} onConfirmFavorite={onConfirmFavorite} name={name} />\n </CardContent>\n </Card>\n </Fade>\n )}\n </PopperStyled>\n </ClickAwayListener>\n )\n },\n)\n\nFavoritePopper.displayName = 'FavoritePopper'\n\n// Ensure the popper is over all other mui portal elements\nconst PopperStyled = styled(Popper, { name: 'PopperStyled' })(() => ({ zIndex: 9999 }))\n","import { Delete as DeleteIcon, Star as StarIcon } from '@mui/icons-material'\nimport { Button, ButtonGroup, ButtonGroupProps } from '@mui/material'\n\nexport interface FavoritePopperProps extends ButtonGroupProps {\n favorite?: boolean\n name?: string\n onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\n\nexport const PopperButtonGroup: React.FC<FavoritePopperProps> = ({ name, onConfirmFavorite, favorite, ...props }) => {\n return (\n <ButtonGroup {...props}>\n <Button\n title=\"Save Favorite\"\n variant=\"contained\"\n onClick={(e) => {\n e.stopPropagation()\n onConfirmFavorite?.(name, true)\n }}\n >\n <StarIcon />\n </Button>\n {favorite ?\n <Button\n title=\"Remove Favorite\"\n variant=\"contained\"\n onClick={(e) => {\n e.stopPropagation()\n onConfirmFavorite?.(name, false)\n }}\n >\n <DeleteIcon />\n </Button>\n : null}\n </ButtonGroup>\n )\n}\n","import { ListItemIcon, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport { useEvent } from '@xyo-network/react-event'\nimport { EllipsizeBox, useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nimport { FavoriteIconButton } from './favorite'\n\nexport interface AddressRenderRowBoxProps extends FlexBoxProps {\n address?: string | null\n disableSharedRef?: boolean\n favorite?: boolean\n iconOnly?: boolean\n iconSize?: number\n icons?: boolean\n name?: string\n showFavorite?: boolean\n}\n\nexport const AddressRenderRowBox = forwardRef<HTMLElement, AddressRenderRowBoxProps>(\n (\n { address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props },\n ref,\n ) => {\n const theme = useTheme()\n\n const sharedRef = useShareForwardedRef(ref)\n const [elementRef, dispatch] = useEvent(undefined, sharedRef)\n\n return (\n <FlexRow\n gap={2}\n justifyContent=\"flex-start\"\n ref={elementRef}\n onClick={() => {\n if (address) {\n dispatch('address', 'click', address)\n }\n }}\n {...props}\n >\n {icons && address ?\n <ListItemIcon sx={{ minWidth: 0 }}>\n <Identicon size={iconSize} value={address} />\n </ListItemIcon>\n : null}\n {iconOnly ? null : (\n <EllipsizeBox\n disableSharedRef={disableSharedRef}\n ellipsisPosition={'end'}\n width=\"100%\"\n typographyProps={{ fontSize: theme.typography.body1.fontSize }}\n >\n {name ?? address}\n </EllipsizeBox>\n )}\n {children}\n {showFavorite && address ?\n <FavoriteIconButton name={name} size={'small'} value={address} valueType={'address'} favorite={favoriteProp} />\n : null}\n </FlexRow>\n )\n },\n)\n\nAddressRenderRowBox.displayName = 'AddressRenderRowBox'\n"],"mappings":"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","names":["IconButton","styled","useEvent","useShareForwardedRef","forwardRef","useEffect","useRef","useState","generateFavoriteEvent","favorite","favoriteType","favoriteValue","name","StarIcon","StarBorderIcon","Fragment","jsx","FavoriteToggleSVG","favorite","popperId","Card","CardContent","ClickAwayListener","Fade","Popper","styled","TextField","forwardRef","useEffect","useState","DeleteIcon","StarIcon","Button","ButtonGroup","jsx","jsxs","PopperButtonGroup","name","onConfirmFavorite","favorite","props","e","jsx","jsxs","FavoritePopper","forwardRef","nameProp","favorite","favoriteRef","onClickAway","onConfirmFavorite","props","ref","name","setName","useState","useEffect","ClickAwayListener","PopperStyled","popperId","e","TransitionProps","Fade","Card","CardContent","TextField","PopperButtonGroup","styled","Popper","jsx","jsxs","FavoriteIconButton","forwardRef","children","favoriteProp","name","valueType","value","props","ref","openPopper","setOpenPopper","useState","favorite","setFavorite","useEffect","sharedRef","useShareForwardedRef","buttonRef","dispatch","useEvent","onConfirmFavorite","newFavoriteState","favoriteEvent","generateFavoriteEvent","starRef","useRef","IconButtonCondensed","popperId","event","e","FavoriteToggleSVG","FavoritePopper","styled","IconButton","theme","ListItemIcon","useTheme","FlexRow","Identicon","useEvent","EllipsizeBox","useShareForwardedRef","forwardRef","jsx","jsxs","AddressRenderRowBox","forwardRef","address","children","disableSharedRef","favoriteProp","iconOnly","iconSize","icons","name","showFavorite","props","ref","theme","useTheme","sharedRef","useShareForwardedRef","elementRef","dispatch","useEvent","FlexRow","ListItemIcon","Identicon","EllipsizeBox","FavoriteIconButton"]}
|