@xyo-network/react-address-render 4.4.11 → 5.0.0-rc.1
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.mjs +9 -9
- package/dist/browser/index.mjs.map +1 -1
- package/dist/types/components/RenderRowBox.d.ts +19 -0
- package/dist/types/components/RenderRowBox.d.ts.map +1 -0
- package/dist/{browser → types}/components/favorite/FavoriteIconButton.d.ts +6 -1
- package/dist/types/components/favorite/FavoriteIconButton.d.ts.map +1 -0
- package/dist/{browser → types}/components/favorite/Popper.d.ts +6 -1
- package/dist/{browser → types}/components/favorite/Popper.d.ts.map +1 -1
- package/package.json +24 -22
- package/src/components/RenderRowBox.tsx +47 -50
- package/src/components/favorite/FavoriteIconButton.tsx +47 -51
- package/src/components/favorite/Popper.tsx +39 -47
- package/dist/browser/components/RenderRowBox.d.ts +0 -14
- package/dist/browser/components/RenderRowBox.d.ts.map +0 -1
- package/dist/browser/components/favorite/FavoriteIconButton.d.ts.map +0 -1
- /package/dist/{browser → types}/components/favorite/FavoriteToggleSVG.d.ts +0 -0
- /package/dist/{browser → types}/components/favorite/FavoriteToggleSVG.d.ts.map +0 -0
- /package/dist/{browser → types}/components/favorite/PopperButtonGroup.d.ts +0 -0
- /package/dist/{browser → types}/components/favorite/PopperButtonGroup.d.ts.map +0 -0
- /package/dist/{browser → types}/components/favorite/index.d.ts +0 -0
- /package/dist/{browser → types}/components/favorite/index.d.ts.map +0 -0
- /package/dist/{browser → types}/components/favorite/lib/PopperId.d.ts +0 -0
- /package/dist/{browser → types}/components/favorite/lib/PopperId.d.ts.map +0 -0
- /package/dist/{browser → types}/components/favorite/lib/index.d.ts +0 -0
- /package/dist/{browser → types}/components/favorite/lib/index.d.ts.map +0 -0
- /package/dist/{browser → types}/components/index.d.ts +0 -0
- /package/dist/{browser → types}/components/index.d.ts.map +0 -0
- /package/dist/{browser → types}/components/lib/FavoriteItemEvent.d.ts +0 -0
- /package/dist/{browser → types}/components/lib/FavoriteItemEvent.d.ts.map +0 -0
- /package/dist/{browser → types}/components/lib/index.d.ts +0 -0
- /package/dist/{browser → types}/components/lib/index.d.ts.map +0 -0
- /package/dist/{browser → types}/index.d.ts +0 -0
- /package/dist/{browser → types}/index.d.ts.map +0 -0
package/dist/browser/index.mjs
CHANGED
|
@@ -6,7 +6,7 @@ import { IconButton, styled as styled2 } from "@mui/material";
|
|
|
6
6
|
import { useResetState } from "@xylabs/react-hooks";
|
|
7
7
|
import { useEvent } from "@xyo-network/react-event";
|
|
8
8
|
import { useShareForwardedRef } from "@xyo-network/react-shared";
|
|
9
|
-
import React4, {
|
|
9
|
+
import React4, { useRef, useState as useState2 } from "react";
|
|
10
10
|
|
|
11
11
|
// src/components/lib/FavoriteItemEvent.ts
|
|
12
12
|
var generateFavoriteEvent = /* @__PURE__ */ __name((favorite, favoriteType, favoriteValue, name) => ({
|
|
@@ -34,7 +34,7 @@ var popperId = "favorite-popper";
|
|
|
34
34
|
|
|
35
35
|
// src/components/favorite/Popper.tsx
|
|
36
36
|
import { Card, CardContent, ClickAwayListener, Fade, Popper, styled, TextField } from "@mui/material";
|
|
37
|
-
import React3, {
|
|
37
|
+
import React3, { useState } from "react";
|
|
38
38
|
|
|
39
39
|
// src/components/favorite/PopperButtonGroup.tsx
|
|
40
40
|
import { Delete as DeleteIcon, Star as StarIcon2 } from "@mui/icons-material";
|
|
@@ -59,7 +59,7 @@ var PopperButtonGroup = /* @__PURE__ */ __name(({ name, onConfirmFavorite, favor
|
|
|
59
59
|
}, "PopperButtonGroup");
|
|
60
60
|
|
|
61
61
|
// src/components/favorite/Popper.tsx
|
|
62
|
-
var FavoritePopper = /* @__PURE__ */
|
|
62
|
+
var FavoritePopper = /* @__PURE__ */ __name(({ ref, name: nameProp, favorite, favoriteRef, onClickAway, onConfirmFavorite, ...props }) => {
|
|
63
63
|
const [name, setName] = useState(() => nameProp);
|
|
64
64
|
return /* @__PURE__ */ React3.createElement(ClickAwayListener, {
|
|
65
65
|
onClickAway: onClickAway ?? (() => null)
|
|
@@ -91,7 +91,7 @@ var FavoritePopper = /* @__PURE__ */ forwardRef(({ name: nameProp, favorite, fav
|
|
|
91
91
|
onConfirmFavorite,
|
|
92
92
|
name
|
|
93
93
|
}))))));
|
|
94
|
-
});
|
|
94
|
+
}, "FavoritePopper");
|
|
95
95
|
FavoritePopper.displayName = "FavoritePopper";
|
|
96
96
|
var PopperStyled = styled(Popper, {
|
|
97
97
|
name: "PopperStyled"
|
|
@@ -100,7 +100,7 @@ var PopperStyled = styled(Popper, {
|
|
|
100
100
|
}));
|
|
101
101
|
|
|
102
102
|
// src/components/favorite/FavoriteIconButton.tsx
|
|
103
|
-
var FavoriteIconButton = /* @__PURE__ */
|
|
103
|
+
var FavoriteIconButton = /* @__PURE__ */ __name(({ ref, children, favorite: favoriteProp, name, valueType, value, ...props }) => {
|
|
104
104
|
const [openPopper, setOpenPopper] = useState2(false);
|
|
105
105
|
const [favorite, setFavorite] = useResetState(favoriteProp);
|
|
106
106
|
const sharedRef = useShareForwardedRef(ref);
|
|
@@ -144,7 +144,7 @@ var FavoriteIconButton = /* @__PURE__ */ forwardRef2(({ children, favorite: favo
|
|
|
144
144
|
onConfirmFavorite,
|
|
145
145
|
onClickAway: /* @__PURE__ */ __name(() => setOpenPopper(false), "onClickAway")
|
|
146
146
|
}), children);
|
|
147
|
-
});
|
|
147
|
+
}, "FavoriteIconButton");
|
|
148
148
|
FavoriteIconButton.displayName = "FavoriteIconButton";
|
|
149
149
|
var IconButtonCondensed = styled2(IconButton, {
|
|
150
150
|
name: "IconButtonCondensed"
|
|
@@ -159,8 +159,8 @@ import { FlexRow } from "@xylabs/react-flexbox";
|
|
|
159
159
|
import { Identicon } from "@xylabs/react-identicon";
|
|
160
160
|
import { useEvent as useEvent2 } from "@xyo-network/react-event";
|
|
161
161
|
import { EllipsizeBox, useShareForwardedRef as useShareForwardedRef2 } from "@xyo-network/react-shared";
|
|
162
|
-
import React5
|
|
163
|
-
var AddressRenderRowBox = /* @__PURE__ */
|
|
162
|
+
import React5 from "react";
|
|
163
|
+
var AddressRenderRowBox = /* @__PURE__ */ __name(({ ref, address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props }) => {
|
|
164
164
|
const theme = useTheme();
|
|
165
165
|
const sharedRef = useShareForwardedRef2(ref);
|
|
166
166
|
const [elementRef, dispatch] = useEvent2(void 0, sharedRef);
|
|
@@ -195,7 +195,7 @@ var AddressRenderRowBox = /* @__PURE__ */ forwardRef3(({ address, children, disa
|
|
|
195
195
|
valueType: "address",
|
|
196
196
|
favorite: favoriteProp
|
|
197
197
|
}) : null);
|
|
198
|
-
});
|
|
198
|
+
}, "AddressRenderRowBox");
|
|
199
199
|
AddressRenderRowBox.displayName = "AddressRenderRowBox";
|
|
200
200
|
export {
|
|
201
201
|
AddressRenderRowBox,
|
|
@@ -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 type { IconButtonProps } from '@mui/material'\nimport { IconButton, styled } from '@mui/material'\nimport { useResetState } from '@xylabs/react-hooks'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport type { PropsWithChildren } from 'react'\nimport React, {\n forwardRef, useRef, useState,\n} from 'react'\n\nimport type { FavoriteItemEvent } from '../lib/index.ts'\nimport { generateFavoriteEvent } from '../lib/index.ts'\nimport { FavoriteToggleSVG } from './FavoriteToggleSVG.tsx'\nimport { popperId } from './lib/index.ts'\nimport { FavoritePopper } from './Popper.tsx'\n\nexport interface FavoriteIconButtonProps extends PropsWithChildren, 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 ({\n children, favorite: favoriteProp, name, valueType, value, ...props\n }, ref) => {\n const [openPopper, setOpenPopper] = useState(false)\n\n const [favorite, setFavorite] = useResetState(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'\nimport React from 'react'\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 type { PopperProps } from '@mui/material'\nimport {\n Card, CardContent, ClickAwayListener, Fade, Popper, styled, TextField,\n} from '@mui/material'\nimport type { RefObject } from 'react'\nimport React, { forwardRef, useState } from 'react'\n\nimport { popperId } from './lib/index.ts'\nimport { PopperButtonGroup } from './PopperButtonGroup.tsx'\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 onConfirmFavorite,\n ...props\n },\n ref,\n ) => {\n const [name, setName] = useState(() => nameProp)\n\n return (\n <ClickAwayListener onClickAway={onClickAway ?? (() => null)}>\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 type { ButtonGroupProps } from '@mui/material'\nimport { Button, ButtonGroup } from '@mui/material'\nimport React from 'react'\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> = ({\n name, onConfirmFavorite, favorite, ...props\n}) => {\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 ? (\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 )\n : null}\n </ButtonGroup>\n )\n}\n","import { ListItemIcon, useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { 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 React, { forwardRef } from 'react'\n\nimport { FavoriteIconButton } from './favorite/index.ts'\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 {\n address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props\n },\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 ? (\n <ListItemIcon sx={{ minWidth: 0 }}>\n <Identicon size={iconSize} value={address} />\n </ListItemIcon>\n )\n : null}\n {iconOnly\n ? null\n : (\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","useResetState","useEvent","useShareForwardedRef","React","forwardRef","useRef","useState","generateFavoriteEvent","favorite","favoriteType","favoriteValue","name","Star","StarIcon","StarBorder","StarBorderIcon","React","FavoriteToggleSVG","favorite","StarIcon","className","component","color","fontSize","StarBorderIcon","popperId","Card","CardContent","ClickAwayListener","Fade","Popper","styled","TextField","React","forwardRef","useState","Delete","DeleteIcon","Star","StarIcon","Button","ButtonGroup","React","PopperButtonGroup","name","onConfirmFavorite","favorite","props","React","ButtonGroup","Button","title","variant","onClick","e","stopPropagation","StarIcon","DeleteIcon","FavoritePopper","forwardRef","name","nameProp","favorite","favoriteRef","onClickAway","onConfirmFavorite","props","ref","setName","useState","React","ClickAwayListener","PopperStyled","id","popperId","anchorEl","current","onClick","e","stopPropagation","onTouchStart","transition","TransitionProps","Fade","timeout","Card","CardContent","sx","display","gap","TextField","autoFocus","label","placeholder","size","value","onChange","target","PopperButtonGroup","displayName","styled","Popper","zIndex","FavoriteIconButton","forwardRef","children","favorite","favoriteProp","name","valueType","value","props","ref","openPopper","setOpenPopper","useState","setFavorite","useResetState","sharedRef","useShareForwardedRef","buttonRef","dispatch","useEvent","undefined","onConfirmFavorite","newFavoriteState","favoriteEvent","generateFavoriteEvent","JSON","stringify","starRef","useRef","React","IconButtonCondensed","aria-describedby","popperId","onClick","event","stopPropagation","onTouchStart","onMouseDown","e","sx","lineHeight","p","span","FavoriteToggleSVG","FavoritePopper","zIndex","favoriteRef","open","onClickAway","displayName","styled","IconButton","theme","padding","spacing","ListItemIcon","useTheme","FlexRow","Identicon","useEvent","EllipsizeBox","useShareForwardedRef","React","forwardRef","AddressRenderRowBox","forwardRef","address","children","disableSharedRef","favorite","favoriteProp","iconOnly","iconSize","icons","name","showFavorite","props","ref","theme","useTheme","sharedRef","useShareForwardedRef","elementRef","dispatch","useEvent","undefined","React","FlexRow","gap","justifyContent","onClick","ListItemIcon","sx","minWidth","Identicon","size","value","EllipsizeBox","ellipsisPosition","width","typographyProps","fontSize","typography","body1","FavoriteIconButton","valueType","displayName"]}
|
|
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 type { IconButtonProps } from '@mui/material'\nimport { IconButton, styled } from '@mui/material'\nimport { useResetState } from '@xylabs/react-hooks'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport type { PropsWithChildren } from 'react'\nimport React, { useRef, useState } from 'react'\n\nimport type { FavoriteItemEvent } from '../lib/index.ts'\nimport { generateFavoriteEvent } from '../lib/index.ts'\nimport { FavoriteToggleSVG } from './FavoriteToggleSVG.tsx'\nimport { popperId } from './lib/index.ts'\nimport { FavoritePopper } from './Popper.tsx'\n\nexport interface FavoriteIconButtonProps extends PropsWithChildren, IconButtonProps {\n favorite?: FavoriteItemEvent['favorite']\n name?: FavoriteItemEvent['name']\n value?: string\n valueType?: FavoriteItemEvent['favoriteType']\n}\n\nexport const FavoriteIconButton = ({\n ref, children, favorite: favoriteProp, name, valueType, value, ...props\n}: FavoriteIconButtonProps & { ref?: React.RefObject<HTMLButtonElement | null> }) => {\n const [openPopper, setOpenPopper] = useState(false)\n\n const [favorite, setFavorite] = useResetState(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\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'\nimport React from 'react'\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 type { PopperProps } from '@mui/material'\nimport {\n Card, CardContent, ClickAwayListener, Fade, Popper, styled, TextField,\n} from '@mui/material'\nimport type { RefObject } from 'react'\nimport React, { useState } from 'react'\n\nimport { popperId } from './lib/index.ts'\nimport { PopperButtonGroup } from './PopperButtonGroup.tsx'\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 = (\n {\n ref, name: nameProp, favorite, favoriteRef, onClickAway, onConfirmFavorite, ...props\n }: FavoritePopperProps & { ref?: React.RefObject<HTMLDivElement | null> },\n) => {\n const [name, setName] = useState(() => nameProp)\n\n return (\n <ClickAwayListener onClickAway={onClickAway ?? (() => null)}>\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\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 type { ButtonGroupProps } from '@mui/material'\nimport { Button, ButtonGroup } from '@mui/material'\nimport React from 'react'\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> = ({\n name, onConfirmFavorite, favorite, ...props\n}) => {\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 ? (\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 )\n : null}\n </ButtonGroup>\n )\n}\n","import { ListItemIcon, useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { 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 React from 'react'\n\nimport { FavoriteIconButton } from './favorite/index.ts'\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 = (\n {\n ref, address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props\n }: AddressRenderRowBoxProps & { ref?: React.RefObject<HTMLElement | null> },\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 ? (\n <ListItemIcon sx={{ minWidth: 0 }}>\n <Identicon size={iconSize} value={address} />\n </ListItemIcon>\n )\n : null}\n {iconOnly\n ? null\n : (\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\nAddressRenderRowBox.displayName = 'AddressRenderRowBox'\n"],"mappings":"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","names":["IconButton","styled","useResetState","useEvent","useShareForwardedRef","React","useRef","useState","generateFavoriteEvent","favorite","favoriteType","favoriteValue","name","Star","StarIcon","StarBorder","StarBorderIcon","React","FavoriteToggleSVG","favorite","StarIcon","className","component","color","fontSize","StarBorderIcon","popperId","Card","CardContent","ClickAwayListener","Fade","Popper","styled","TextField","React","useState","Delete","DeleteIcon","Star","StarIcon","Button","ButtonGroup","React","PopperButtonGroup","name","onConfirmFavorite","favorite","props","React","ButtonGroup","Button","title","variant","onClick","e","stopPropagation","StarIcon","DeleteIcon","FavoritePopper","ref","name","nameProp","favorite","favoriteRef","onClickAway","onConfirmFavorite","props","setName","useState","React","ClickAwayListener","PopperStyled","id","popperId","anchorEl","current","onClick","e","stopPropagation","onTouchStart","transition","TransitionProps","Fade","timeout","Card","CardContent","sx","display","gap","TextField","autoFocus","label","placeholder","size","value","onChange","target","PopperButtonGroup","displayName","styled","Popper","zIndex","FavoriteIconButton","ref","children","favorite","favoriteProp","name","valueType","value","props","openPopper","setOpenPopper","useState","setFavorite","useResetState","sharedRef","useShareForwardedRef","buttonRef","dispatch","useEvent","undefined","onConfirmFavorite","newFavoriteState","favoriteEvent","generateFavoriteEvent","JSON","stringify","starRef","useRef","React","IconButtonCondensed","aria-describedby","popperId","onClick","event","stopPropagation","onTouchStart","onMouseDown","e","sx","lineHeight","p","span","FavoriteToggleSVG","FavoritePopper","zIndex","favoriteRef","open","onClickAway","displayName","styled","IconButton","theme","padding","spacing","ListItemIcon","useTheme","FlexRow","Identicon","useEvent","EllipsizeBox","useShareForwardedRef","React","AddressRenderRowBox","ref","address","children","disableSharedRef","favorite","favoriteProp","iconOnly","iconSize","icons","name","showFavorite","props","theme","useTheme","sharedRef","useShareForwardedRef","elementRef","dispatch","useEvent","undefined","React","FlexRow","gap","justifyContent","onClick","ListItemIcon","sx","minWidth","Identicon","size","value","EllipsizeBox","ellipsisPosition","width","typographyProps","fontSize","typography","body1","FavoriteIconButton","valueType","displayName"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { FlexBoxProps } from '@xylabs/react-flexbox';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface AddressRenderRowBoxProps extends FlexBoxProps {
|
|
4
|
+
address?: string | null;
|
|
5
|
+
disableSharedRef?: boolean;
|
|
6
|
+
favorite?: boolean;
|
|
7
|
+
iconOnly?: boolean;
|
|
8
|
+
iconSize?: number;
|
|
9
|
+
icons?: boolean;
|
|
10
|
+
name?: string;
|
|
11
|
+
showFavorite?: boolean;
|
|
12
|
+
}
|
|
13
|
+
export declare const AddressRenderRowBox: {
|
|
14
|
+
({ ref, address, children, disableSharedRef, favorite: favoriteProp, iconOnly, iconSize, icons, name, showFavorite, ...props }: AddressRenderRowBoxProps & {
|
|
15
|
+
ref?: React.RefObject<HTMLElement | null>;
|
|
16
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
displayName: string;
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=RenderRowBox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RenderRowBox.d.ts","sourceRoot":"","sources":["../../../src/components/RenderRowBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAKzD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,eAAO,MAAM,mBAAmB;oIAG3B,wBAAwB,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;KAAE;;CA4C5E,CAAA"}
|
|
@@ -8,5 +8,10 @@ export interface FavoriteIconButtonProps extends PropsWithChildren, IconButtonPr
|
|
|
8
8
|
value?: string;
|
|
9
9
|
valueType?: FavoriteItemEvent['favoriteType'];
|
|
10
10
|
}
|
|
11
|
-
export declare const FavoriteIconButton:
|
|
11
|
+
export declare const FavoriteIconButton: {
|
|
12
|
+
({ ref, children, favorite: favoriteProp, name, valueType, value, ...props }: FavoriteIconButtonProps & {
|
|
13
|
+
ref?: React.RefObject<HTMLButtonElement | null>;
|
|
14
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
displayName: string;
|
|
16
|
+
};
|
|
12
17
|
//# sourceMappingURL=FavoriteIconButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FavoriteIconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/FavoriteIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAKpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAA2B,MAAM,OAAO,CAAA;AAE/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAMxD,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB,EAAE,eAAe;IACjF,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAA;IACxC,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;CAC9C;AAED,eAAO,MAAM,kBAAkB;kFAE5B,uBAAuB,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;KAAE;;CAgD/E,CAAA"}
|
|
@@ -8,5 +8,10 @@ export interface FavoritePopperProps extends PopperProps {
|
|
|
8
8
|
onClickAway?: (event: MouseEvent | TouchEvent) => void;
|
|
9
9
|
onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void;
|
|
10
10
|
}
|
|
11
|
-
export declare const FavoritePopper:
|
|
11
|
+
export declare const FavoritePopper: {
|
|
12
|
+
({ ref, name: nameProp, favorite, favoriteRef, onClickAway, onConfirmFavorite, ...props }: FavoritePopperProps & {
|
|
13
|
+
ref?: React.RefObject<HTMLDivElement | null>;
|
|
14
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
displayName: string;
|
|
16
|
+
};
|
|
12
17
|
//# sourceMappingURL=Popper.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAIhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,
|
|
1
|
+
{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAIhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAA;IACpC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAA;IACtD,iBAAiB,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACxE;AACD,eAAO,MAAM,cAAc;+FAGtB,mBAAmB,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;KAAE;;CAmC1E,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xyo-network/react-address-render",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.0-rc.1",
|
|
4
4
|
"description": "Common React library for all XYO projects that use React",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"xyo",
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
"exports": {
|
|
29
29
|
".": {
|
|
30
30
|
"browser": {
|
|
31
|
-
"types": "./dist/
|
|
31
|
+
"types": "./dist/types/index.d.ts",
|
|
32
32
|
"default": "./dist/browser/index.mjs"
|
|
33
33
|
},
|
|
34
|
-
"types": "./dist/
|
|
34
|
+
"types": "./dist/types/index.d.ts",
|
|
35
35
|
"default": "./dist/browser/index.mjs"
|
|
36
36
|
},
|
|
37
37
|
"./package.json": "./package.json"
|
|
@@ -43,37 +43,39 @@
|
|
|
43
43
|
"lint-pkg": "npmPkgJsonLint ."
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@xylabs/react-flexbox": "^
|
|
47
|
-
"@xylabs/react-hooks": "^
|
|
48
|
-
"@xylabs/react-identicon": "^
|
|
49
|
-
"@xyo-network/react-event": "^
|
|
50
|
-
"@xyo-network/react-shared": "^
|
|
46
|
+
"@xylabs/react-flexbox": "^6.0.0-rc.2",
|
|
47
|
+
"@xylabs/react-hooks": "^6.0.0-rc.2",
|
|
48
|
+
"@xylabs/react-identicon": "^6.0.0-rc.2",
|
|
49
|
+
"@xyo-network/react-event": "^5.0.0-rc.1",
|
|
50
|
+
"@xyo-network/react-shared": "^5.0.0-rc.1"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@mui/icons-material": "^6.4.
|
|
54
|
-
"@mui/material": "^6.4.
|
|
55
|
-
"@mui/styles": "^6.4.
|
|
56
|
-
"@storybook/react": "^8.6.
|
|
57
|
-
"@
|
|
58
|
-
"@xylabs/
|
|
59
|
-
"@xylabs/
|
|
53
|
+
"@mui/icons-material": "^6.4.7",
|
|
54
|
+
"@mui/material": "^6.4.7",
|
|
55
|
+
"@mui/styles": "^6.4.7",
|
|
56
|
+
"@storybook/react": "^8.6.4",
|
|
57
|
+
"@types/react": "^19.0.10",
|
|
58
|
+
"@xylabs/hex": "^4.5.10",
|
|
59
|
+
"@xylabs/ts-scripts-yarn3": "^6.0.3",
|
|
60
|
+
"@xylabs/tsconfig-react": "^6.0.3",
|
|
60
61
|
"ethers": "^6.13.5",
|
|
61
|
-
"react": "^
|
|
62
|
-
"react-dom": "^
|
|
63
|
-
"react-router-dom": "^7.
|
|
64
|
-
"storybook": "^8.6.
|
|
62
|
+
"react": "^19.0.0",
|
|
63
|
+
"react-dom": "^19.0.0",
|
|
64
|
+
"react-router-dom": "^7.3.0",
|
|
65
|
+
"storybook": "^8.6.4",
|
|
65
66
|
"typescript": "^5.8.2"
|
|
66
67
|
},
|
|
67
68
|
"peerDependencies": {
|
|
68
69
|
"@mui/icons-material": "^6",
|
|
69
70
|
"@mui/material": "^6",
|
|
70
71
|
"@mui/styles": "^6",
|
|
71
|
-
"react": "^
|
|
72
|
-
"react-dom": "^
|
|
72
|
+
"react": "^19",
|
|
73
|
+
"react-dom": "^19",
|
|
73
74
|
"react-router-dom": "^7"
|
|
74
75
|
},
|
|
75
76
|
"publishConfig": {
|
|
76
77
|
"access": "public"
|
|
77
78
|
},
|
|
78
|
-
"docs": "dist/docs.json"
|
|
79
|
+
"docs": "dist/docs.json",
|
|
80
|
+
"stableVersion": "4.4.11"
|
|
79
81
|
}
|
|
@@ -4,7 +4,7 @@ import { FlexRow } from '@xylabs/react-flexbox'
|
|
|
4
4
|
import { Identicon } from '@xylabs/react-identicon'
|
|
5
5
|
import { useEvent } from '@xyo-network/react-event'
|
|
6
6
|
import { EllipsizeBox, useShareForwardedRef } from '@xyo-network/react-shared'
|
|
7
|
-
import React
|
|
7
|
+
import React from 'react'
|
|
8
8
|
|
|
9
9
|
import { FavoriteIconButton } from './favorite/index.ts'
|
|
10
10
|
|
|
@@ -19,56 +19,53 @@ export interface AddressRenderRowBoxProps extends FlexBoxProps {
|
|
|
19
19
|
showFavorite?: boolean
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
export const AddressRenderRowBox =
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
) => {
|
|
29
|
-
const theme = useTheme()
|
|
22
|
+
export const AddressRenderRowBox = (
|
|
23
|
+
{
|
|
24
|
+
ref, address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props
|
|
25
|
+
}: AddressRenderRowBoxProps & { ref?: React.RefObject<HTMLElement | null> },
|
|
26
|
+
) => {
|
|
27
|
+
const theme = useTheme()
|
|
30
28
|
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
const sharedRef = useShareForwardedRef(ref)
|
|
30
|
+
const [elementRef, dispatch] = useEvent(undefined, sharedRef)
|
|
33
31
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
)
|
|
32
|
+
return (
|
|
33
|
+
<FlexRow
|
|
34
|
+
gap={2}
|
|
35
|
+
justifyContent="flex-start"
|
|
36
|
+
ref={elementRef}
|
|
37
|
+
onClick={() => {
|
|
38
|
+
if (address) {
|
|
39
|
+
dispatch('address', 'click', address)
|
|
40
|
+
}
|
|
41
|
+
}}
|
|
42
|
+
{...props}
|
|
43
|
+
>
|
|
44
|
+
{icons && address
|
|
45
|
+
? (
|
|
46
|
+
<ListItemIcon sx={{ minWidth: 0 }}>
|
|
47
|
+
<Identicon size={iconSize} value={address} />
|
|
48
|
+
</ListItemIcon>
|
|
49
|
+
)
|
|
50
|
+
: null}
|
|
51
|
+
{iconOnly
|
|
52
|
+
? null
|
|
53
|
+
: (
|
|
54
|
+
<EllipsizeBox
|
|
55
|
+
disableSharedRef={disableSharedRef}
|
|
56
|
+
ellipsisPosition="end"
|
|
57
|
+
width="100%"
|
|
58
|
+
typographyProps={{ fontSize: theme.typography.body1.fontSize }}
|
|
59
|
+
>
|
|
60
|
+
{name ?? address}
|
|
61
|
+
</EllipsizeBox>
|
|
62
|
+
)}
|
|
63
|
+
{children}
|
|
64
|
+
{showFavorite && address
|
|
65
|
+
? <FavoriteIconButton name={name} size="small" value={address} valueType="address" favorite={favoriteProp} />
|
|
66
|
+
: null}
|
|
67
|
+
</FlexRow>
|
|
68
|
+
)
|
|
69
|
+
}
|
|
73
70
|
|
|
74
71
|
AddressRenderRowBox.displayName = 'AddressRenderRowBox'
|
|
@@ -4,9 +4,7 @@ import { useResetState } from '@xylabs/react-hooks'
|
|
|
4
4
|
import { useEvent } from '@xyo-network/react-event'
|
|
5
5
|
import { useShareForwardedRef } from '@xyo-network/react-shared'
|
|
6
6
|
import type { PropsWithChildren } from 'react'
|
|
7
|
-
import React, {
|
|
8
|
-
forwardRef, useRef, useState,
|
|
9
|
-
} from 'react'
|
|
7
|
+
import React, { useRef, useState } from 'react'
|
|
10
8
|
|
|
11
9
|
import type { FavoriteItemEvent } from '../lib/index.ts'
|
|
12
10
|
import { generateFavoriteEvent } from '../lib/index.ts'
|
|
@@ -21,59 +19,57 @@ export interface FavoriteIconButtonProps extends PropsWithChildren, IconButtonPr
|
|
|
21
19
|
valueType?: FavoriteItemEvent['favoriteType']
|
|
22
20
|
}
|
|
23
21
|
|
|
24
|
-
export const FavoriteIconButton =
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
const [openPopper, setOpenPopper] = useState(false)
|
|
22
|
+
export const FavoriteIconButton = ({
|
|
23
|
+
ref, children, favorite: favoriteProp, name, valueType, value, ...props
|
|
24
|
+
}: FavoriteIconButtonProps & { ref?: React.RefObject<HTMLButtonElement | null> }) => {
|
|
25
|
+
const [openPopper, setOpenPopper] = useState(false)
|
|
29
26
|
|
|
30
|
-
|
|
27
|
+
const [favorite, setFavorite] = useResetState(favoriteProp)
|
|
31
28
|
|
|
32
|
-
|
|
33
|
-
|
|
29
|
+
const sharedRef = useShareForwardedRef(ref)
|
|
30
|
+
const [buttonRef, dispatch] = useEvent(undefined, sharedRef)
|
|
34
31
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
32
|
+
const onConfirmFavorite = (name?: string, newFavoriteState?: boolean) => {
|
|
33
|
+
const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name)
|
|
34
|
+
dispatch('address', 'favorite', JSON.stringify(favoriteEvent))
|
|
35
|
+
setFavorite(newFavoriteState)
|
|
36
|
+
setOpenPopper(false)
|
|
37
|
+
}
|
|
41
38
|
|
|
42
|
-
|
|
39
|
+
const starRef = useRef<HTMLSpanElement>(null)
|
|
43
40
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
)
|
|
41
|
+
return (
|
|
42
|
+
<IconButtonCondensed
|
|
43
|
+
aria-describedby={popperId}
|
|
44
|
+
ref={buttonRef}
|
|
45
|
+
onClick={(event) => {
|
|
46
|
+
event.stopPropagation()
|
|
47
|
+
setOpenPopper(!openPopper)
|
|
48
|
+
}}
|
|
49
|
+
onTouchStart={(event) => {
|
|
50
|
+
event.stopPropagation()
|
|
51
|
+
setOpenPopper(!openPopper)
|
|
52
|
+
}}
|
|
53
|
+
onMouseDown={e => e.stopPropagation()}
|
|
54
|
+
sx={{ lineHeight: 0, p: 0.25 }}
|
|
55
|
+
{...props}
|
|
56
|
+
>
|
|
57
|
+
<span ref={starRef}>
|
|
58
|
+
<FavoriteToggleSVG favorite={favorite} />
|
|
59
|
+
</span>
|
|
60
|
+
<FavoritePopper
|
|
61
|
+
sx={{ zIndex: 1301 }}
|
|
62
|
+
name={name}
|
|
63
|
+
favorite={favorite}
|
|
64
|
+
favoriteRef={starRef}
|
|
65
|
+
open={openPopper}
|
|
66
|
+
onConfirmFavorite={onConfirmFavorite}
|
|
67
|
+
onClickAway={() => setOpenPopper(false)}
|
|
68
|
+
/>
|
|
69
|
+
{children}
|
|
70
|
+
</IconButtonCondensed>
|
|
71
|
+
)
|
|
72
|
+
}
|
|
77
73
|
|
|
78
74
|
FavoriteIconButton.displayName = 'FavoriteIconButton'
|
|
79
75
|
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
Card, CardContent, ClickAwayListener, Fade, Popper, styled, TextField,
|
|
4
4
|
} from '@mui/material'
|
|
5
5
|
import type { RefObject } from 'react'
|
|
6
|
-
import React, {
|
|
6
|
+
import React, { useState } from 'react'
|
|
7
7
|
|
|
8
8
|
import { popperId } from './lib/index.ts'
|
|
9
9
|
import { PopperButtonGroup } from './PopperButtonGroup.tsx'
|
|
@@ -15,53 +15,45 @@ export interface FavoritePopperProps extends PopperProps {
|
|
|
15
15
|
onClickAway?: (event: MouseEvent | TouchEvent) => void
|
|
16
16
|
onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void
|
|
17
17
|
}
|
|
18
|
-
export const FavoritePopper =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
onClickAway,
|
|
25
|
-
onConfirmFavorite,
|
|
26
|
-
...props
|
|
27
|
-
},
|
|
28
|
-
ref,
|
|
29
|
-
) => {
|
|
30
|
-
const [name, setName] = useState(() => nameProp)
|
|
18
|
+
export const FavoritePopper = (
|
|
19
|
+
{
|
|
20
|
+
ref, name: nameProp, favorite, favoriteRef, onClickAway, onConfirmFavorite, ...props
|
|
21
|
+
}: FavoritePopperProps & { ref?: React.RefObject<HTMLDivElement | null> },
|
|
22
|
+
) => {
|
|
23
|
+
const [name, setName] = useState(() => nameProp)
|
|
31
24
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
)
|
|
25
|
+
return (
|
|
26
|
+
<ClickAwayListener onClickAway={onClickAway ?? (() => null)}>
|
|
27
|
+
<PopperStyled
|
|
28
|
+
id={popperId}
|
|
29
|
+
anchorEl={favoriteRef?.current}
|
|
30
|
+
onClick={e => e.stopPropagation()}
|
|
31
|
+
onTouchStart={e => e.stopPropagation()}
|
|
32
|
+
transition
|
|
33
|
+
ref={ref}
|
|
34
|
+
{...props}
|
|
35
|
+
>
|
|
36
|
+
{({ TransitionProps }) => (
|
|
37
|
+
<Fade {...TransitionProps} timeout={350}>
|
|
38
|
+
<Card>
|
|
39
|
+
<CardContent sx={{ display: 'flex', gap: 1 }}>
|
|
40
|
+
<TextField
|
|
41
|
+
autoFocus
|
|
42
|
+
label="Favorite Name"
|
|
43
|
+
placeholder="optional"
|
|
44
|
+
size="small"
|
|
45
|
+
value={name ?? ''}
|
|
46
|
+
onChange={e => setName(e.target.value)}
|
|
47
|
+
/>
|
|
48
|
+
<PopperButtonGroup favorite={favorite} onConfirmFavorite={onConfirmFavorite} name={name} />
|
|
49
|
+
</CardContent>
|
|
50
|
+
</Card>
|
|
51
|
+
</Fade>
|
|
52
|
+
)}
|
|
53
|
+
</PopperStyled>
|
|
54
|
+
</ClickAwayListener>
|
|
55
|
+
)
|
|
56
|
+
}
|
|
65
57
|
|
|
66
58
|
FavoritePopper.displayName = 'FavoritePopper'
|
|
67
59
|
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { FlexBoxProps } from '@xylabs/react-flexbox';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export interface AddressRenderRowBoxProps extends FlexBoxProps {
|
|
4
|
-
address?: string | null;
|
|
5
|
-
disableSharedRef?: boolean;
|
|
6
|
-
favorite?: boolean;
|
|
7
|
-
iconOnly?: boolean;
|
|
8
|
-
iconSize?: number;
|
|
9
|
-
icons?: boolean;
|
|
10
|
-
name?: string;
|
|
11
|
-
showFavorite?: boolean;
|
|
12
|
-
}
|
|
13
|
-
export declare const AddressRenderRowBox: React.ForwardRefExoticComponent<AddressRenderRowBoxProps & React.RefAttributes<HTMLElement>>;
|
|
14
|
-
//# sourceMappingURL=RenderRowBox.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RenderRowBox.d.ts","sourceRoot":"","sources":["../../../src/components/RenderRowBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAKzD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,eAAO,MAAM,mBAAmB,8FAkD/B,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FavoriteIconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/FavoriteIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAKpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAEN,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAMxD,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB,EAAE,eAAe;IACjF,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAA;IACxC,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;CAC9C;AAED,eAAO,MAAM,kBAAkB,gHAoD9B,CAAA"}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|