@xyo-network/react-address-render 2.64.0-rc.7 → 2.64.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/components/RenderRowBox.cjs +239 -0
- package/dist/browser/components/RenderRowBox.cjs.map +1 -0
- package/dist/browser/components/RenderRowBox.d.cts +14 -0
- package/dist/browser/components/RenderRowBox.d.cts.map +1 -0
- package/dist/browser/components/favorite/FavoriteIconButton.cjs +191 -0
- package/dist/browser/components/favorite/FavoriteIconButton.cjs.map +1 -0
- package/dist/browser/components/favorite/FavoriteIconButton.d.cts +12 -0
- package/dist/browser/components/favorite/FavoriteIconButton.d.cts.map +1 -0
- package/dist/browser/components/favorite/FavoriteToggleSVG.cjs +29 -0
- package/dist/{node/components/favorite/FavoriteToggleSVG.mjs.map → browser/components/favorite/FavoriteToggleSVG.cjs.map} +1 -1
- package/dist/browser/components/favorite/FavoriteToggleSVG.d.cts +5 -0
- package/dist/browser/components/favorite/FavoriteToggleSVG.d.cts.map +1 -0
- package/dist/browser/components/favorite/Popper.cjs +112 -0
- package/dist/browser/components/favorite/Popper.cjs.map +1 -0
- package/dist/browser/components/favorite/Popper.d.cts +11 -0
- package/dist/browser/components/favorite/Popper.d.cts.map +1 -0
- package/dist/browser/components/favorite/PopperButtonGroup.cjs +57 -0
- package/dist/browser/components/favorite/PopperButtonGroup.cjs.map +1 -0
- package/dist/browser/components/favorite/PopperButtonGroup.d.cts +9 -0
- package/dist/browser/components/favorite/PopperButtonGroup.d.cts.map +1 -0
- package/dist/browser/components/favorite/index.cjs +193 -0
- package/dist/browser/components/favorite/index.cjs.map +1 -0
- package/dist/browser/components/favorite/index.d.cts +2 -0
- package/dist/browser/components/favorite/index.d.cts.map +1 -0
- package/dist/browser/components/favorite/lib/PopperId.cjs +27 -0
- package/dist/{node/components/favorite/lib/PopperId.mjs.map → browser/components/favorite/lib/PopperId.cjs.map} +1 -1
- package/dist/browser/components/favorite/lib/PopperId.d.cts +2 -0
- package/dist/browser/components/favorite/lib/PopperId.d.cts.map +1 -0
- package/dist/browser/components/favorite/lib/index.cjs +29 -0
- package/dist/browser/components/favorite/lib/index.cjs.map +1 -0
- package/dist/browser/components/favorite/lib/index.d.cts +2 -0
- package/dist/browser/components/favorite/lib/index.d.cts.map +1 -0
- package/dist/browser/components/index.cjs +241 -0
- package/dist/browser/components/index.cjs.map +1 -0
- package/dist/browser/components/index.d.cts +4 -0
- package/dist/browser/components/index.d.cts.map +1 -0
- package/dist/browser/components/lib/FavoriteItemEvent.cjs +32 -0
- package/dist/{node/components/lib/FavoriteItemEvent.mjs.map → browser/components/lib/FavoriteItemEvent.cjs.map} +1 -1
- package/dist/browser/components/lib/FavoriteItemEvent.d.cts +9 -0
- package/dist/browser/components/lib/FavoriteItemEvent.d.cts.map +1 -0
- package/dist/browser/components/lib/index.cjs +34 -0
- package/dist/browser/components/lib/index.cjs.map +1 -0
- package/dist/browser/components/lib/index.d.cts +2 -0
- package/dist/browser/components/lib/index.d.cts.map +1 -0
- package/dist/browser/index.cjs +241 -0
- package/dist/browser/index.cjs.map +1 -0
- package/dist/browser/index.d.cts +2 -0
- package/dist/browser/index.d.cts.map +1 -0
- package/dist/docs.json +24106 -0
- package/dist/node/components/RenderRowBox.cjs +243 -0
- package/dist/node/components/RenderRowBox.cjs.map +1 -0
- package/dist/node/components/RenderRowBox.d.cts +14 -0
- package/dist/node/components/RenderRowBox.d.cts.map +1 -0
- package/dist/node/components/RenderRowBox.js +187 -42
- package/dist/node/components/RenderRowBox.js.map +1 -1
- package/dist/node/components/favorite/FavoriteIconButton.cjs +195 -0
- package/dist/node/components/favorite/FavoriteIconButton.cjs.map +1 -0
- package/dist/node/components/favorite/FavoriteIconButton.d.cts +12 -0
- package/dist/node/components/favorite/FavoriteIconButton.d.cts.map +1 -0
- package/dist/node/components/favorite/FavoriteIconButton.js +123 -47
- package/dist/node/components/favorite/FavoriteIconButton.js.map +1 -1
- package/dist/node/components/favorite/FavoriteToggleSVG.cjs +33 -0
- package/dist/node/components/favorite/FavoriteToggleSVG.cjs.map +1 -0
- package/dist/node/components/favorite/FavoriteToggleSVG.d.cts +5 -0
- package/dist/node/components/favorite/FavoriteToggleSVG.d.cts.map +1 -0
- package/dist/node/components/favorite/FavoriteToggleSVG.js +6 -29
- package/dist/node/components/favorite/FavoriteToggleSVG.js.map +1 -1
- package/dist/node/components/favorite/Popper.cjs +116 -0
- package/dist/node/components/favorite/Popper.cjs.map +1 -0
- package/dist/node/components/favorite/Popper.d.cts +11 -0
- package/dist/node/components/favorite/Popper.d.cts.map +1 -0
- package/dist/node/components/favorite/Popper.js +54 -41
- package/dist/node/components/favorite/Popper.js.map +1 -1
- package/dist/node/components/favorite/PopperButtonGroup.cjs +61 -0
- package/dist/node/components/favorite/{PopperButtonGroup.mjs.map → PopperButtonGroup.cjs.map} +1 -1
- package/dist/node/components/favorite/PopperButtonGroup.d.cts +9 -0
- package/dist/node/components/favorite/PopperButtonGroup.d.cts.map +1 -0
- package/dist/node/components/favorite/PopperButtonGroup.js +16 -39
- package/dist/node/components/favorite/PopperButtonGroup.js.map +1 -1
- package/dist/node/components/favorite/index.cjs +197 -0
- package/dist/node/components/favorite/index.cjs.map +1 -0
- package/dist/node/components/favorite/index.d.cts +2 -0
- package/dist/node/components/favorite/index.d.cts.map +1 -0
- package/dist/node/components/favorite/index.js +167 -20
- package/dist/node/components/favorite/index.js.map +1 -1
- package/dist/node/components/favorite/lib/PopperId.cjs +31 -0
- package/dist/node/components/favorite/lib/PopperId.cjs.map +1 -0
- package/dist/node/components/favorite/lib/PopperId.d.cts +2 -0
- package/dist/node/components/favorite/lib/PopperId.d.cts.map +1 -0
- package/dist/node/components/favorite/lib/PopperId.js +4 -27
- package/dist/node/components/favorite/lib/PopperId.js.map +1 -1
- package/dist/node/components/favorite/lib/index.cjs +33 -0
- package/dist/node/components/favorite/lib/index.cjs.map +1 -0
- package/dist/node/components/favorite/lib/index.d.cts +2 -0
- package/dist/node/components/favorite/lib/index.d.cts.map +1 -0
- package/dist/node/components/favorite/lib/index.js +4 -21
- package/dist/node/components/favorite/lib/index.js.map +1 -1
- package/dist/node/components/index.cjs +247 -0
- package/dist/node/components/index.cjs.map +1 -0
- package/dist/node/components/index.d.cts +4 -0
- package/dist/node/components/index.d.cts.map +1 -0
- package/dist/node/components/index.js +215 -24
- package/dist/node/components/index.js.map +1 -1
- package/dist/node/components/lib/FavoriteItemEvent.cjs +36 -0
- package/dist/node/components/lib/FavoriteItemEvent.cjs.map +1 -0
- package/dist/node/components/lib/FavoriteItemEvent.d.cts +9 -0
- package/dist/node/components/lib/FavoriteItemEvent.d.cts.map +1 -0
- package/dist/node/components/lib/FavoriteItemEvent.js +4 -27
- package/dist/node/components/lib/FavoriteItemEvent.js.map +1 -1
- package/dist/node/components/lib/index.cjs +38 -0
- package/dist/node/components/lib/index.cjs.map +1 -0
- package/dist/node/components/lib/index.d.cts +2 -0
- package/dist/node/components/lib/index.d.cts.map +1 -0
- package/dist/node/components/lib/index.js +9 -21
- package/dist/node/components/lib/index.js.map +1 -1
- package/dist/node/index.cjs +247 -0
- package/dist/node/index.cjs.map +1 -0
- package/dist/node/index.d.cts +2 -0
- package/dist/node/index.d.cts.map +1 -0
- package/dist/node/index.js +215 -20
- package/dist/node/index.js.map +1 -1
- package/package.json +20 -20
- package/dist/browser/components/RenderRowBox.stories.js +0 -81
- package/dist/browser/components/RenderRowBox.stories.js.map +0 -1
- package/dist/node/components/RenderRowBox.mjs +0 -49
- package/dist/node/components/RenderRowBox.mjs.map +0 -1
- package/dist/node/components/RenderRowBox.stories.js +0 -111
- package/dist/node/components/RenderRowBox.stories.js.map +0 -1
- package/dist/node/components/RenderRowBox.stories.mjs +0 -81
- package/dist/node/components/RenderRowBox.stories.mjs.map +0 -1
- package/dist/node/components/favorite/FavoriteIconButton.mjs +0 -70
- package/dist/node/components/favorite/FavoriteIconButton.mjs.map +0 -1
- package/dist/node/components/favorite/FavoriteToggleSVG.mjs +0 -7
- package/dist/node/components/favorite/Popper.mjs +0 -54
- package/dist/node/components/favorite/Popper.mjs.map +0 -1
- package/dist/node/components/favorite/PopperButtonGroup.mjs +0 -35
- package/dist/node/components/favorite/index.mjs +0 -2
- package/dist/node/components/favorite/index.mjs.map +0 -1
- package/dist/node/components/favorite/lib/PopperId.mjs +0 -5
- package/dist/node/components/favorite/lib/index.mjs +0 -2
- package/dist/node/components/favorite/lib/index.mjs.map +0 -1
- package/dist/node/components/index.mjs +0 -4
- package/dist/node/components/index.mjs.map +0 -1
- package/dist/node/components/lib/FavoriteItemEvent.mjs +0 -10
- package/dist/node/components/lib/index.mjs +0 -2
- package/dist/node/components/lib/index.mjs.map +0 -1
- package/dist/node/index.mjs +0 -2
- package/dist/node/index.mjs.map +0 -1
package/dist/node/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export * from './components'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,yBAAd;","names":[]}
|
|
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 ) : (\n <StarBorderIcon className=\"favorite-icon\" fontSize=\"small\" />\n )}\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"]}
|
package/package.json
CHANGED
|
@@ -10,11 +10,11 @@
|
|
|
10
10
|
"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xylabs/react-flexbox": "^3.
|
|
14
|
-
"@xylabs/react-identicon": "^3.
|
|
15
|
-
"@xylabs/react-shared": "^3.
|
|
16
|
-
"@xyo-network/react-event": "~2.64.0
|
|
17
|
-
"@xyo-network/react-shared": "~2.64.0
|
|
13
|
+
"@xylabs/react-flexbox": "^3.0.5",
|
|
14
|
+
"@xylabs/react-identicon": "^3.0.5",
|
|
15
|
+
"@xylabs/react-shared": "^3.0.5",
|
|
16
|
+
"@xyo-network/react-event": "~2.64.0",
|
|
17
|
+
"@xyo-network/react-shared": "~2.64.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"@mui/icons-material": "^5",
|
|
@@ -27,11 +27,11 @@
|
|
|
27
27
|
},
|
|
28
28
|
"description": "Common React library for all XYO projects that use React",
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@storybook/react": "^7.4.
|
|
31
|
-
"@xylabs/ts-scripts-yarn3": "^3.0.
|
|
32
|
-
"@xylabs/tsconfig-react": "^3.0.
|
|
33
|
-
"@xyo-network/account": "^2.
|
|
34
|
-
"@xyo-network/react-event": "~2.64.0
|
|
30
|
+
"@storybook/react": "^7.4.5",
|
|
31
|
+
"@xylabs/ts-scripts-yarn3": "^3.0.78",
|
|
32
|
+
"@xylabs/tsconfig-react": "^3.0.78",
|
|
33
|
+
"@xyo-network/account": "^2.75.3",
|
|
34
|
+
"@xyo-network/react-event": "~2.64.0",
|
|
35
35
|
"typescript": "^5.2.2"
|
|
36
36
|
},
|
|
37
37
|
"docs": "dist/docs.json",
|
|
@@ -40,28 +40,28 @@
|
|
|
40
40
|
"node": {
|
|
41
41
|
"import": {
|
|
42
42
|
"types": "./dist/node/index.d.mts",
|
|
43
|
-
"default": "./dist/node/index.
|
|
43
|
+
"default": "./dist/node/index.js"
|
|
44
44
|
},
|
|
45
45
|
"require": {
|
|
46
|
-
"types": "./dist/node/index.d.
|
|
47
|
-
"default": "./dist/node/index.
|
|
46
|
+
"types": "./dist/node/index.d.cts",
|
|
47
|
+
"default": "./dist/node/index.cjs"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
"browser": {
|
|
51
51
|
"import": {
|
|
52
|
-
"types": "./dist/browser/index.d.
|
|
52
|
+
"types": "./dist/browser/index.d.mts",
|
|
53
53
|
"default": "./dist/browser/index.js"
|
|
54
54
|
},
|
|
55
55
|
"require": {
|
|
56
|
-
"types": "./dist/browser/index.d.
|
|
57
|
-
"default": "./dist/browser/index.
|
|
56
|
+
"types": "./dist/browser/index.d.cts",
|
|
57
|
+
"default": "./dist/browser/index.cjs"
|
|
58
58
|
}
|
|
59
59
|
},
|
|
60
|
-
"default": "./dist/browser/index.
|
|
60
|
+
"default": "./dist/browser/index.js"
|
|
61
61
|
},
|
|
62
62
|
"./package.json": "./package.json"
|
|
63
63
|
},
|
|
64
|
-
"main": "dist/browser/index.
|
|
64
|
+
"main": "dist/browser/index.cjs",
|
|
65
65
|
"module": "dist/browser/index.js",
|
|
66
66
|
"homepage": "https://xyo.network",
|
|
67
67
|
"keywords": [
|
|
@@ -84,6 +84,6 @@
|
|
|
84
84
|
},
|
|
85
85
|
"sideEffects": false,
|
|
86
86
|
"types": "dist/browser/index.d.ts",
|
|
87
|
-
"version": "2.64.0
|
|
88
|
-
"
|
|
87
|
+
"version": "2.64.0",
|
|
88
|
+
"type": "module"
|
|
89
89
|
}
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Account } from "@xyo-network/account";
|
|
3
|
-
import { useEvent } from "@xyo-network/react-event";
|
|
4
|
-
import { useState } from "react";
|
|
5
|
-
import { AddressRenderRowBox } from "./RenderRowBox";
|
|
6
|
-
const address = new Account({ phrase: "temp" }).address;
|
|
7
|
-
const StorybookEntry = {
|
|
8
|
-
argTypes: {},
|
|
9
|
-
component: AddressRenderRowBox,
|
|
10
|
-
parameters: {
|
|
11
|
-
docs: {
|
|
12
|
-
page: null
|
|
13
|
-
}
|
|
14
|
-
},
|
|
15
|
-
title: "address/render/AddressRenderRowBox"
|
|
16
|
-
};
|
|
17
|
-
const Template = (args) => {
|
|
18
|
-
const [ref] = useEvent((noun, verb, data) => {
|
|
19
|
-
console.log(`${noun}|${verb}|${data}`);
|
|
20
|
-
const parsedEvent = JSON.parse(data ?? "");
|
|
21
|
-
if (parsedEvent.favorite) {
|
|
22
|
-
setName(parsedEvent.name);
|
|
23
|
-
} else {
|
|
24
|
-
setName(void 0);
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
const [name, setName] = useState(args.name);
|
|
28
|
-
return /* @__PURE__ */ jsx(AddressRenderRowBox, { ...args, name, ref });
|
|
29
|
-
};
|
|
30
|
-
const Default = Template.bind({});
|
|
31
|
-
Default.args = {};
|
|
32
|
-
const WithAddress = Template.bind({});
|
|
33
|
-
WithAddress.args = {
|
|
34
|
-
address
|
|
35
|
-
};
|
|
36
|
-
const WithIcon = Template.bind({});
|
|
37
|
-
WithIcon.args = {
|
|
38
|
-
address,
|
|
39
|
-
icons: true
|
|
40
|
-
};
|
|
41
|
-
const WithIconOnly = Template.bind({});
|
|
42
|
-
WithIconOnly.args = {
|
|
43
|
-
address,
|
|
44
|
-
iconOnly: true,
|
|
45
|
-
icons: true
|
|
46
|
-
};
|
|
47
|
-
const WithFavorite = Template.bind({});
|
|
48
|
-
WithFavorite.args = {
|
|
49
|
-
address,
|
|
50
|
-
favorite: true,
|
|
51
|
-
icons: true,
|
|
52
|
-
showFavorite: true
|
|
53
|
-
};
|
|
54
|
-
const WithFavoriteAlias = Template.bind({});
|
|
55
|
-
WithFavoriteAlias.args = {
|
|
56
|
-
address,
|
|
57
|
-
favorite: true,
|
|
58
|
-
icons: true,
|
|
59
|
-
name: "My Name",
|
|
60
|
-
showFavorite: true
|
|
61
|
-
};
|
|
62
|
-
const WithChildren = Template.bind({});
|
|
63
|
-
WithChildren.args = {
|
|
64
|
-
address,
|
|
65
|
-
children: /* @__PURE__ */ jsx("span", { children: "[InsertedChild]" }),
|
|
66
|
-
favorite: true,
|
|
67
|
-
icons: true,
|
|
68
|
-
showFavorite: true
|
|
69
|
-
};
|
|
70
|
-
var RenderRowBox_stories_default = StorybookEntry;
|
|
71
|
-
export {
|
|
72
|
-
Default,
|
|
73
|
-
WithAddress,
|
|
74
|
-
WithChildren,
|
|
75
|
-
WithFavorite,
|
|
76
|
-
WithFavoriteAlias,
|
|
77
|
-
WithIcon,
|
|
78
|
-
WithIconOnly,
|
|
79
|
-
RenderRowBox_stories_default as default
|
|
80
|
-
};
|
|
81
|
-
//# sourceMappingURL=RenderRowBox.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/RenderRowBox.stories.tsx"],"sourcesContent":["import { Meta, StoryFn } from '@storybook/react'\nimport { Account } from '@xyo-network/account'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useState } from 'react'\n\nimport { FavoriteItemEvent } from './lib'\nimport { AddressRenderRowBox } from './RenderRowBox'\n\nconst address = new Account({ phrase: 'temp' }).address\n\nconst StorybookEntry = {\n argTypes: {},\n component: AddressRenderRowBox,\n parameters: {\n docs: {\n page: null,\n },\n },\n title: 'address/render/AddressRenderRowBox',\n} as Meta<typeof AddressRenderRowBox>\n\nconst Template: StoryFn<typeof AddressRenderRowBox> = (args) => {\n const [ref] = useEvent<HTMLLIElement>((noun, verb, data) => {\n console.log(`${noun}|${verb}|${data}`)\n const parsedEvent = JSON.parse(data ?? '') as FavoriteItemEvent\n if (parsedEvent.favorite) {\n setName(parsedEvent.name)\n } else {\n setName(undefined)\n }\n })\n const [name, setName] = useState(args.name)\n return <AddressRenderRowBox {...args} name={name} ref={ref} />\n}\n\nconst Default = Template.bind({})\nDefault.args = {}\n\nconst WithAddress = Template.bind({})\nWithAddress.args = {\n address,\n}\n\nconst WithIcon = Template.bind({})\nWithIcon.args = {\n address,\n icons: true,\n}\n\nconst WithIconOnly = Template.bind({})\nWithIconOnly.args = {\n address,\n iconOnly: true,\n icons: true,\n}\n\nconst WithFavorite = Template.bind({})\nWithFavorite.args = {\n address,\n favorite: true,\n icons: true,\n showFavorite: true,\n}\n\nconst WithFavoriteAlias = Template.bind({})\nWithFavoriteAlias.args = {\n address,\n favorite: true,\n icons: true,\n name: 'My Name',\n showFavorite: true,\n}\n\nconst WithChildren = Template.bind({})\nWithChildren.args = {\n address,\n children: <span>{'[InsertedChild]'}</span>,\n favorite: true,\n icons: true,\n showFavorite: true,\n}\n\nexport { Default, WithAddress, WithChildren, WithFavorite, WithFavoriteAlias, WithIcon, WithIconOnly }\n\n// eslint-disable-next-line import/no-default-export\nexport default StorybookEntry\n"],"mappings":"AAgCS;AA/BT,SAAS,eAAe;AACxB,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAGzB,SAAS,2BAA2B;AAEpC,MAAM,UAAU,IAAI,QAAQ,EAAE,QAAQ,OAAO,CAAC,EAAE;AAEhD,MAAM,iBAAiB;AAAA,EACrB,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AACT;AAEA,MAAM,WAAgD,CAAC,SAAS;AAC9D,QAAM,CAAC,GAAG,IAAI,SAAwB,CAAC,MAAM,MAAM,SAAS;AAC1D,YAAQ,IAAI,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI,EAAE;AACrC,UAAM,cAAc,KAAK,MAAM,QAAQ,EAAE;AACzC,QAAI,YAAY,UAAU;AACxB,cAAQ,YAAY,IAAI;AAAA,IAC1B,OAAO;AACL,cAAQ,MAAS;AAAA,IACnB;AAAA,EACF,CAAC;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK,IAAI;AAC1C,SAAO,oBAAC,uBAAqB,GAAG,MAAM,MAAY,KAAU;AAC9D;AAEA,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAChC,QAAQ,OAAO,CAAC;AAEhB,MAAM,cAAc,SAAS,KAAK,CAAC,CAAC;AACpC,YAAY,OAAO;AAAA,EACjB;AACF;AAEA,MAAM,WAAW,SAAS,KAAK,CAAC,CAAC;AACjC,SAAS,OAAO;AAAA,EACd;AAAA,EACA,OAAO;AACT;AAEA,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AACT;AAEA,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAChB;AAEA,MAAM,oBAAoB,SAAS,KAAK,CAAC,CAAC;AAC1C,kBAAkB,OAAO;AAAA,EACvB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAChB;AAEA,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO;AAAA,EAClB;AAAA,EACA,UAAU,oBAAC,UAAM,6BAAkB;AAAA,EACnC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAChB;AAKA,IAAO,+BAAQ;","names":[]}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ListItemIcon, useTheme } from "@mui/material";
|
|
3
|
-
import { FlexRow } from "@xylabs/react-flexbox";
|
|
4
|
-
import { Identicon } from "@xylabs/react-identicon";
|
|
5
|
-
import { useEvent } from "@xyo-network/react-event";
|
|
6
|
-
import { EllipsizeBox, useShareForwardedRef } from "@xyo-network/react-shared";
|
|
7
|
-
import { forwardRef } from "react";
|
|
8
|
-
import { FavoriteIconButton } from "./favorite";
|
|
9
|
-
const AddressRenderRowBox = forwardRef(
|
|
10
|
-
({ address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props }, ref) => {
|
|
11
|
-
const theme = useTheme();
|
|
12
|
-
const sharedRef = useShareForwardedRef(ref);
|
|
13
|
-
const [elementRef, dispatch] = useEvent(void 0, sharedRef);
|
|
14
|
-
return /* @__PURE__ */ jsxs(
|
|
15
|
-
FlexRow,
|
|
16
|
-
{
|
|
17
|
-
gap: 2,
|
|
18
|
-
justifyContent: "flex-start",
|
|
19
|
-
ref: elementRef,
|
|
20
|
-
onClick: () => {
|
|
21
|
-
if (address) {
|
|
22
|
-
dispatch("address", "click", address);
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
...props,
|
|
26
|
-
children: [
|
|
27
|
-
icons && address ? /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0 }, children: /* @__PURE__ */ jsx(Identicon, { size: iconSize, value: address }) }) : null,
|
|
28
|
-
iconOnly ? null : /* @__PURE__ */ jsx(
|
|
29
|
-
EllipsizeBox,
|
|
30
|
-
{
|
|
31
|
-
disableSharedRef,
|
|
32
|
-
ellipsisPosition: "end",
|
|
33
|
-
width: "100%",
|
|
34
|
-
typographyProps: { fontSize: theme.typography.body1.fontSize },
|
|
35
|
-
children: name ?? address
|
|
36
|
-
}
|
|
37
|
-
),
|
|
38
|
-
children,
|
|
39
|
-
showFavorite && address ? /* @__PURE__ */ jsx(FavoriteIconButton, { name, size: "small", value: address, valueType: "address", favorite: favoriteProp }) : null
|
|
40
|
-
]
|
|
41
|
-
}
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
);
|
|
45
|
-
AddressRenderRowBox.displayName = "AddressRenderRowBox";
|
|
46
|
-
export {
|
|
47
|
-
AddressRenderRowBox
|
|
48
|
-
};
|
|
49
|
-
//# sourceMappingURL=RenderRowBox.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/RenderRowBox.tsx"],"sourcesContent":["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":"AA+BM,SAaM,KAbN;AA/BN,SAAS,cAAc,gBAAgB;AACvC,SAAuB,eAAe;AACtC,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,cAAc,4BAA4B;AACnD,SAAS,kBAAkB;AAE3B,SAAS,0BAA0B;AAa5B,MAAM,sBAAsB;AAAA,EACjC,CACE,EAAE,SAAS,UAAU,kBAAkB,UAAU,eAAe,OAAO,UAAU,WAAW,IAAI,OAAO,MAAM,eAAe,OAAO,GAAG,MAAM,GAC5I,QACG;AACH,UAAM,QAAQ,SAAS;AAEvB,UAAM,YAAY,qBAAqB,GAAG;AAC1C,UAAM,CAAC,YAAY,QAAQ,IAAI,SAAS,QAAW,SAAS;AAE5D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,gBAAe;AAAA,QACf,KAAK;AAAA,QACL,SAAS,MAAM;AACb,cAAI,SAAS;AACX,qBAAS,WAAW,SAAS,OAAO;AAAA,UACtC;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,mBAAS,UACR,oBAAC,gBAAa,IAAI,EAAE,UAAU,EAAE,GAC9B,8BAAC,aAAU,MAAM,UAAU,OAAO,SAAS,GAC7C,IACE;AAAA,UACH,WAAW,OACV;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,kBAAkB;AAAA,cAClB,OAAM;AAAA,cACN,iBAAiB,EAAE,UAAU,MAAM,WAAW,MAAM,SAAS;AAAA,cAE5D,kBAAQ;AAAA;AAAA,UACX;AAAA,UAED;AAAA,UACA,gBAAgB,UACf,oBAAC,sBAAmB,MAAY,MAAM,SAAS,OAAO,SAAS,WAAW,WAAW,UAAU,cAAc,IAC3G;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;","names":[]}
|
|
@@ -1,111 +0,0 @@
|
|
|
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
|
-
var RenderRowBox_stories_exports = {};
|
|
20
|
-
__export(RenderRowBox_stories_exports, {
|
|
21
|
-
Default: () => Default,
|
|
22
|
-
WithAddress: () => WithAddress,
|
|
23
|
-
WithChildren: () => WithChildren,
|
|
24
|
-
WithFavorite: () => WithFavorite,
|
|
25
|
-
WithFavoriteAlias: () => WithFavoriteAlias,
|
|
26
|
-
WithIcon: () => WithIcon,
|
|
27
|
-
WithIconOnly: () => WithIconOnly,
|
|
28
|
-
default: () => RenderRowBox_stories_default
|
|
29
|
-
});
|
|
30
|
-
module.exports = __toCommonJS(RenderRowBox_stories_exports);
|
|
31
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
|
-
var import_account = require("@xyo-network/account");
|
|
33
|
-
var import_react_event = require("@xyo-network/react-event");
|
|
34
|
-
var import_react2 = require("react");
|
|
35
|
-
var import_RenderRowBox = require("./RenderRowBox");
|
|
36
|
-
const address = new import_account.Account({ phrase: "temp" }).address;
|
|
37
|
-
const StorybookEntry = {
|
|
38
|
-
argTypes: {},
|
|
39
|
-
component: import_RenderRowBox.AddressRenderRowBox,
|
|
40
|
-
parameters: {
|
|
41
|
-
docs: {
|
|
42
|
-
page: null
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
title: "address/render/AddressRenderRowBox"
|
|
46
|
-
};
|
|
47
|
-
const Template = (args) => {
|
|
48
|
-
const [ref] = (0, import_react_event.useEvent)((noun, verb, data) => {
|
|
49
|
-
console.log(`${noun}|${verb}|${data}`);
|
|
50
|
-
const parsedEvent = JSON.parse(data ?? "");
|
|
51
|
-
if (parsedEvent.favorite) {
|
|
52
|
-
setName(parsedEvent.name);
|
|
53
|
-
} else {
|
|
54
|
-
setName(void 0);
|
|
55
|
-
}
|
|
56
|
-
});
|
|
57
|
-
const [name, setName] = (0, import_react2.useState)(args.name);
|
|
58
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RenderRowBox.AddressRenderRowBox, { ...args, name, ref });
|
|
59
|
-
};
|
|
60
|
-
const Default = Template.bind({});
|
|
61
|
-
Default.args = {};
|
|
62
|
-
const WithAddress = Template.bind({});
|
|
63
|
-
WithAddress.args = {
|
|
64
|
-
address
|
|
65
|
-
};
|
|
66
|
-
const WithIcon = Template.bind({});
|
|
67
|
-
WithIcon.args = {
|
|
68
|
-
address,
|
|
69
|
-
icons: true
|
|
70
|
-
};
|
|
71
|
-
const WithIconOnly = Template.bind({});
|
|
72
|
-
WithIconOnly.args = {
|
|
73
|
-
address,
|
|
74
|
-
iconOnly: true,
|
|
75
|
-
icons: true
|
|
76
|
-
};
|
|
77
|
-
const WithFavorite = Template.bind({});
|
|
78
|
-
WithFavorite.args = {
|
|
79
|
-
address,
|
|
80
|
-
favorite: true,
|
|
81
|
-
icons: true,
|
|
82
|
-
showFavorite: true
|
|
83
|
-
};
|
|
84
|
-
const WithFavoriteAlias = Template.bind({});
|
|
85
|
-
WithFavoriteAlias.args = {
|
|
86
|
-
address,
|
|
87
|
-
favorite: true,
|
|
88
|
-
icons: true,
|
|
89
|
-
name: "My Name",
|
|
90
|
-
showFavorite: true
|
|
91
|
-
};
|
|
92
|
-
const WithChildren = Template.bind({});
|
|
93
|
-
WithChildren.args = {
|
|
94
|
-
address,
|
|
95
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "[InsertedChild]" }),
|
|
96
|
-
favorite: true,
|
|
97
|
-
icons: true,
|
|
98
|
-
showFavorite: true
|
|
99
|
-
};
|
|
100
|
-
var RenderRowBox_stories_default = StorybookEntry;
|
|
101
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
102
|
-
0 && (module.exports = {
|
|
103
|
-
Default,
|
|
104
|
-
WithAddress,
|
|
105
|
-
WithChildren,
|
|
106
|
-
WithFavorite,
|
|
107
|
-
WithFavoriteAlias,
|
|
108
|
-
WithIcon,
|
|
109
|
-
WithIconOnly
|
|
110
|
-
});
|
|
111
|
-
//# sourceMappingURL=RenderRowBox.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/RenderRowBox.stories.tsx"],"sourcesContent":["import { Meta, StoryFn } from '@storybook/react'\nimport { Account } from '@xyo-network/account'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useState } from 'react'\n\nimport { FavoriteItemEvent } from './lib'\nimport { AddressRenderRowBox } from './RenderRowBox'\n\nconst address = new Account({ phrase: 'temp' }).address\n\nconst StorybookEntry = {\n argTypes: {},\n component: AddressRenderRowBox,\n parameters: {\n docs: {\n page: null,\n },\n },\n title: 'address/render/AddressRenderRowBox',\n} as Meta<typeof AddressRenderRowBox>\n\nconst Template: StoryFn<typeof AddressRenderRowBox> = (args) => {\n const [ref] = useEvent<HTMLLIElement>((noun, verb, data) => {\n console.log(`${noun}|${verb}|${data}`)\n const parsedEvent = JSON.parse(data ?? '') as FavoriteItemEvent\n if (parsedEvent.favorite) {\n setName(parsedEvent.name)\n } else {\n setName(undefined)\n }\n })\n const [name, setName] = useState(args.name)\n return <AddressRenderRowBox {...args} name={name} ref={ref} />\n}\n\nconst Default = Template.bind({})\nDefault.args = {}\n\nconst WithAddress = Template.bind({})\nWithAddress.args = {\n address,\n}\n\nconst WithIcon = Template.bind({})\nWithIcon.args = {\n address,\n icons: true,\n}\n\nconst WithIconOnly = Template.bind({})\nWithIconOnly.args = {\n address,\n iconOnly: true,\n icons: true,\n}\n\nconst WithFavorite = Template.bind({})\nWithFavorite.args = {\n address,\n favorite: true,\n icons: true,\n showFavorite: true,\n}\n\nconst WithFavoriteAlias = Template.bind({})\nWithFavoriteAlias.args = {\n address,\n favorite: true,\n icons: true,\n name: 'My Name',\n showFavorite: true,\n}\n\nconst WithChildren = Template.bind({})\nWithChildren.args = {\n address,\n children: <span>{'[InsertedChild]'}</span>,\n favorite: true,\n icons: true,\n showFavorite: true,\n}\n\nexport { Default, WithAddress, WithChildren, WithFavorite, WithFavoriteAlias, WithIcon, WithIconOnly }\n\n// eslint-disable-next-line import/no-default-export\nexport default StorybookEntry\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCS;AA/BT,qBAAwB;AACxB,yBAAyB;AACzB,IAAAA,gBAAyB;AAGzB,0BAAoC;AAEpC,MAAM,UAAU,IAAI,uBAAQ,EAAE,QAAQ,OAAO,CAAC,EAAE;AAEhD,MAAM,iBAAiB;AAAA,EACrB,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AACT;AAEA,MAAM,WAAgD,CAAC,SAAS;AAC9D,QAAM,CAAC,GAAG,QAAI,6BAAwB,CAAC,MAAM,MAAM,SAAS;AAC1D,YAAQ,IAAI,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI,EAAE;AACrC,UAAM,cAAc,KAAK,MAAM,QAAQ,EAAE;AACzC,QAAI,YAAY,UAAU;AACxB,cAAQ,YAAY,IAAI;AAAA,IAC1B,OAAO;AACL,cAAQ,MAAS;AAAA,IACnB;AAAA,EACF,CAAC;AACD,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,KAAK,IAAI;AAC1C,SAAO,4CAAC,2CAAqB,GAAG,MAAM,MAAY,KAAU;AAC9D;AAEA,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAChC,QAAQ,OAAO,CAAC;AAEhB,MAAM,cAAc,SAAS,KAAK,CAAC,CAAC;AACpC,YAAY,OAAO;AAAA,EACjB;AACF;AAEA,MAAM,WAAW,SAAS,KAAK,CAAC,CAAC;AACjC,SAAS,OAAO;AAAA,EACd;AAAA,EACA,OAAO;AACT;AAEA,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AACT;AAEA,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAChB;AAEA,MAAM,oBAAoB,SAAS,KAAK,CAAC,CAAC;AAC1C,kBAAkB,OAAO;AAAA,EACvB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAChB;AAEA,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO;AAAA,EAClB;AAAA,EACA,UAAU,4CAAC,UAAM,6BAAkB;AAAA,EACnC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAChB;AAKA,IAAO,+BAAQ;","names":["import_react"]}
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Account } from "@xyo-network/account";
|
|
3
|
-
import { useEvent } from "@xyo-network/react-event";
|
|
4
|
-
import { useState } from "react";
|
|
5
|
-
import { AddressRenderRowBox } from "./RenderRowBox";
|
|
6
|
-
const address = new Account({ phrase: "temp" }).address;
|
|
7
|
-
const StorybookEntry = {
|
|
8
|
-
argTypes: {},
|
|
9
|
-
component: AddressRenderRowBox,
|
|
10
|
-
parameters: {
|
|
11
|
-
docs: {
|
|
12
|
-
page: null
|
|
13
|
-
}
|
|
14
|
-
},
|
|
15
|
-
title: "address/render/AddressRenderRowBox"
|
|
16
|
-
};
|
|
17
|
-
const Template = (args) => {
|
|
18
|
-
const [ref] = useEvent((noun, verb, data) => {
|
|
19
|
-
console.log(`${noun}|${verb}|${data}`);
|
|
20
|
-
const parsedEvent = JSON.parse(data ?? "");
|
|
21
|
-
if (parsedEvent.favorite) {
|
|
22
|
-
setName(parsedEvent.name);
|
|
23
|
-
} else {
|
|
24
|
-
setName(void 0);
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
const [name, setName] = useState(args.name);
|
|
28
|
-
return /* @__PURE__ */ jsx(AddressRenderRowBox, { ...args, name, ref });
|
|
29
|
-
};
|
|
30
|
-
const Default = Template.bind({});
|
|
31
|
-
Default.args = {};
|
|
32
|
-
const WithAddress = Template.bind({});
|
|
33
|
-
WithAddress.args = {
|
|
34
|
-
address
|
|
35
|
-
};
|
|
36
|
-
const WithIcon = Template.bind({});
|
|
37
|
-
WithIcon.args = {
|
|
38
|
-
address,
|
|
39
|
-
icons: true
|
|
40
|
-
};
|
|
41
|
-
const WithIconOnly = Template.bind({});
|
|
42
|
-
WithIconOnly.args = {
|
|
43
|
-
address,
|
|
44
|
-
iconOnly: true,
|
|
45
|
-
icons: true
|
|
46
|
-
};
|
|
47
|
-
const WithFavorite = Template.bind({});
|
|
48
|
-
WithFavorite.args = {
|
|
49
|
-
address,
|
|
50
|
-
favorite: true,
|
|
51
|
-
icons: true,
|
|
52
|
-
showFavorite: true
|
|
53
|
-
};
|
|
54
|
-
const WithFavoriteAlias = Template.bind({});
|
|
55
|
-
WithFavoriteAlias.args = {
|
|
56
|
-
address,
|
|
57
|
-
favorite: true,
|
|
58
|
-
icons: true,
|
|
59
|
-
name: "My Name",
|
|
60
|
-
showFavorite: true
|
|
61
|
-
};
|
|
62
|
-
const WithChildren = Template.bind({});
|
|
63
|
-
WithChildren.args = {
|
|
64
|
-
address,
|
|
65
|
-
children: /* @__PURE__ */ jsx("span", { children: "[InsertedChild]" }),
|
|
66
|
-
favorite: true,
|
|
67
|
-
icons: true,
|
|
68
|
-
showFavorite: true
|
|
69
|
-
};
|
|
70
|
-
var RenderRowBox_stories_default = StorybookEntry;
|
|
71
|
-
export {
|
|
72
|
-
Default,
|
|
73
|
-
WithAddress,
|
|
74
|
-
WithChildren,
|
|
75
|
-
WithFavorite,
|
|
76
|
-
WithFavoriteAlias,
|
|
77
|
-
WithIcon,
|
|
78
|
-
WithIconOnly,
|
|
79
|
-
RenderRowBox_stories_default as default
|
|
80
|
-
};
|
|
81
|
-
//# sourceMappingURL=RenderRowBox.stories.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/RenderRowBox.stories.tsx"],"sourcesContent":["import { Meta, StoryFn } from '@storybook/react'\nimport { Account } from '@xyo-network/account'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useState } from 'react'\n\nimport { FavoriteItemEvent } from './lib'\nimport { AddressRenderRowBox } from './RenderRowBox'\n\nconst address = new Account({ phrase: 'temp' }).address\n\nconst StorybookEntry = {\n argTypes: {},\n component: AddressRenderRowBox,\n parameters: {\n docs: {\n page: null,\n },\n },\n title: 'address/render/AddressRenderRowBox',\n} as Meta<typeof AddressRenderRowBox>\n\nconst Template: StoryFn<typeof AddressRenderRowBox> = (args) => {\n const [ref] = useEvent<HTMLLIElement>((noun, verb, data) => {\n console.log(`${noun}|${verb}|${data}`)\n const parsedEvent = JSON.parse(data ?? '') as FavoriteItemEvent\n if (parsedEvent.favorite) {\n setName(parsedEvent.name)\n } else {\n setName(undefined)\n }\n })\n const [name, setName] = useState(args.name)\n return <AddressRenderRowBox {...args} name={name} ref={ref} />\n}\n\nconst Default = Template.bind({})\nDefault.args = {}\n\nconst WithAddress = Template.bind({})\nWithAddress.args = {\n address,\n}\n\nconst WithIcon = Template.bind({})\nWithIcon.args = {\n address,\n icons: true,\n}\n\nconst WithIconOnly = Template.bind({})\nWithIconOnly.args = {\n address,\n iconOnly: true,\n icons: true,\n}\n\nconst WithFavorite = Template.bind({})\nWithFavorite.args = {\n address,\n favorite: true,\n icons: true,\n showFavorite: true,\n}\n\nconst WithFavoriteAlias = Template.bind({})\nWithFavoriteAlias.args = {\n address,\n favorite: true,\n icons: true,\n name: 'My Name',\n showFavorite: true,\n}\n\nconst WithChildren = Template.bind({})\nWithChildren.args = {\n address,\n children: <span>{'[InsertedChild]'}</span>,\n favorite: true,\n icons: true,\n showFavorite: true,\n}\n\nexport { Default, WithAddress, WithChildren, WithFavorite, WithFavoriteAlias, WithIcon, WithIconOnly }\n\n// eslint-disable-next-line import/no-default-export\nexport default StorybookEntry\n"],"mappings":"AAgCS;AA/BT,SAAS,eAAe;AACxB,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAGzB,SAAS,2BAA2B;AAEpC,MAAM,UAAU,IAAI,QAAQ,EAAE,QAAQ,OAAO,CAAC,EAAE;AAEhD,MAAM,iBAAiB;AAAA,EACrB,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AACT;AAEA,MAAM,WAAgD,CAAC,SAAS;AAC9D,QAAM,CAAC,GAAG,IAAI,SAAwB,CAAC,MAAM,MAAM,SAAS;AAC1D,YAAQ,IAAI,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI,EAAE;AACrC,UAAM,cAAc,KAAK,MAAM,QAAQ,EAAE;AACzC,QAAI,YAAY,UAAU;AACxB,cAAQ,YAAY,IAAI;AAAA,IAC1B,OAAO;AACL,cAAQ,MAAS;AAAA,IACnB;AAAA,EACF,CAAC;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK,IAAI;AAC1C,SAAO,oBAAC,uBAAqB,GAAG,MAAM,MAAY,KAAU;AAC9D;AAEA,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAChC,QAAQ,OAAO,CAAC;AAEhB,MAAM,cAAc,SAAS,KAAK,CAAC,CAAC;AACpC,YAAY,OAAO;AAAA,EACjB;AACF;AAEA,MAAM,WAAW,SAAS,KAAK,CAAC,CAAC;AACjC,SAAS,OAAO;AAAA,EACd;AAAA,EACA,OAAO;AACT;AAEA,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AACT;AAEA,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAChB;AAEA,MAAM,oBAAoB,SAAS,KAAK,CAAC,CAAC;AAC1C,kBAAkB,OAAO;AAAA,EACvB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAChB;AAEA,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO;AAAA,EAClB;AAAA,EACA,UAAU,oBAAC,UAAM,6BAAkB;AAAA,EACnC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAChB;AAKA,IAAO,+BAAQ;","names":[]}
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { IconButton, styled } from "@mui/material";
|
|
3
|
-
import { useEvent } from "@xyo-network/react-event";
|
|
4
|
-
import { useShareForwardedRef } from "@xyo-network/react-shared";
|
|
5
|
-
import { forwardRef, useEffect, useRef, useState } from "react";
|
|
6
|
-
import { generateFavoriteEvent } from "../lib";
|
|
7
|
-
import { FavoriteToggleSVG } from "./FavoriteToggleSVG";
|
|
8
|
-
import { popperId } from "./lib";
|
|
9
|
-
import { FavoritePopper } from "./Popper";
|
|
10
|
-
const FavoriteIconButton = forwardRef(
|
|
11
|
-
({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {
|
|
12
|
-
const [openPopper, setOpenPopper] = useState(false);
|
|
13
|
-
const [favorite, setFavorite] = useState(favoriteProp);
|
|
14
|
-
useEffect(() => {
|
|
15
|
-
setFavorite(favoriteProp);
|
|
16
|
-
}, [favoriteProp]);
|
|
17
|
-
const sharedRef = useShareForwardedRef(ref);
|
|
18
|
-
const [buttonRef, dispatch] = useEvent(void 0, sharedRef);
|
|
19
|
-
const onConfirmFavorite = (name2, newFavoriteState) => {
|
|
20
|
-
const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name2);
|
|
21
|
-
dispatch("address", "favorite", JSON.stringify(favoriteEvent));
|
|
22
|
-
setFavorite(newFavoriteState);
|
|
23
|
-
setOpenPopper(false);
|
|
24
|
-
};
|
|
25
|
-
const starRef = useRef(null);
|
|
26
|
-
return /* @__PURE__ */ jsxs(
|
|
27
|
-
IconButtonCondensed,
|
|
28
|
-
{
|
|
29
|
-
"aria-describedby": popperId,
|
|
30
|
-
ref: buttonRef,
|
|
31
|
-
onClick: (event) => {
|
|
32
|
-
event.stopPropagation();
|
|
33
|
-
setOpenPopper(!openPopper);
|
|
34
|
-
},
|
|
35
|
-
onTouchStart: (event) => {
|
|
36
|
-
event.stopPropagation();
|
|
37
|
-
setOpenPopper(!openPopper);
|
|
38
|
-
},
|
|
39
|
-
onMouseDown: (e) => e.stopPropagation(),
|
|
40
|
-
sx: { lineHeight: 0, p: 0.25 },
|
|
41
|
-
...props,
|
|
42
|
-
children: [
|
|
43
|
-
/* @__PURE__ */ jsx("span", { ref: starRef, children: /* @__PURE__ */ jsx(FavoriteToggleSVG, { favorite }) }),
|
|
44
|
-
/* @__PURE__ */ jsx(
|
|
45
|
-
FavoritePopper,
|
|
46
|
-
{
|
|
47
|
-
sx: { zIndex: 1301 },
|
|
48
|
-
name,
|
|
49
|
-
favorite,
|
|
50
|
-
favoriteRef: starRef,
|
|
51
|
-
open: openPopper,
|
|
52
|
-
onConfirmFavorite,
|
|
53
|
-
onClickAway: () => setOpenPopper(false)
|
|
54
|
-
}
|
|
55
|
-
),
|
|
56
|
-
children
|
|
57
|
-
]
|
|
58
|
-
}
|
|
59
|
-
);
|
|
60
|
-
}
|
|
61
|
-
);
|
|
62
|
-
FavoriteIconButton.displayName = "FavoriteIconButton";
|
|
63
|
-
const IconButtonCondensed = styled(IconButton, { name: "IconButtonCondensed" })(({ theme }) => ({
|
|
64
|
-
lineHeight: 0,
|
|
65
|
-
padding: theme.spacing(0.25)
|
|
66
|
-
}));
|
|
67
|
-
export {
|
|
68
|
-
FavoriteIconButton
|
|
69
|
-
};
|
|
70
|
-
//# sourceMappingURL=FavoriteIconButton.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/favorite/FavoriteIconButton.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"],"mappings":"AAwCM,SAgBI,KAhBJ;AAxCN,SAAS,YAA6B,cAAc;AAEpD,SAAS,gBAAgB;AACzB,SAAS,4BAA4B;AACrC,SAAS,YAAY,WAAW,QAAQ,gBAAgB;AAExD,SAA4B,6BAA6B;AACzD,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AASxB,MAAM,qBAAqB;AAAA,EAChC,CAAC,EAAE,UAAU,UAAU,cAAc,MAAM,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC/E,UAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,UAAM,CAAC,UAAU,WAAW,IAAI,SAAS,YAAY;AACrD,cAAU,MAAM;AACd,kBAAY,YAAY;AAAA,IAC1B,GAAG,CAAC,YAAY,CAAC;AAEjB,UAAM,YAAY,qBAAqB,GAAG;AAC1C,UAAM,CAAC,WAAW,QAAQ,IAAI,SAAS,QAAW,SAAS;AAE3D,UAAM,oBAAoB,CAACA,OAAe,qBAA+B;AACvE,YAAM,gBAAgB,sBAAsB,CAAC,CAAC,kBAAkB,WAAW,OAAOA,KAAI;AACtF,eAAS,WAAW,YAAY,KAAK,UAAU,aAAa,CAAC;AAC7D,kBAAY,gBAAgB;AAC5B,oBAAc,KAAK;AAAA,IACrB;AAEA,UAAM,UAAU,OAAwB,IAAI;AAE5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,oBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,SAAS,CAAC,UAAU;AAClB,gBAAM,gBAAgB;AACtB,wBAAc,CAAC,UAAU;AAAA,QAC3B;AAAA,QACA,cAAc,CAAC,UAAU;AACvB,gBAAM,gBAAgB;AACtB,wBAAc,CAAC,UAAU;AAAA,QAC3B;AAAA,QACA,aAAa,CAAC,MAAM,EAAE,gBAAgB;AAAA,QACtC,IAAI,EAAE,YAAY,GAAG,GAAG,KAAK;AAAA,QAC5B,GAAG;AAAA,QAEJ;AAAA,8BAAC,UAAK,KAAK,SACT,8BAAC,qBAAkB,UAAoB,GACzC;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,EAAE,QAAQ,KAAK;AAAA,cACnB;AAAA,cACA;AAAA,cACA,aAAa;AAAA,cACb,MAAM;AAAA,cACN;AAAA,cACA,aAAa,MAAM,cAAc,KAAK;AAAA;AAAA,UACxC;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AAEjC,MAAM,sBAAsB,OAAO,YAAY,EAAE,MAAM,sBAAsB,CAAC,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC9F,YAAY;AAAA,EACZ,SAAS,MAAM,QAAQ,IAAI;AAC7B,EAAE;","names":["name"]}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Star as StarIcon, StarBorder as StarBorderIcon } from "@mui/icons-material";
|
|
3
|
-
const 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" }) });
|
|
4
|
-
export {
|
|
5
|
-
FavoriteToggleSVG
|
|
6
|
-
};
|
|
7
|
-
//# sourceMappingURL=FavoriteToggleSVG.mjs.map
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Card, CardContent, ClickAwayListener, Fade, Popper, styled, TextField } from "@mui/material";
|
|
3
|
-
import { forwardRef, useEffect, useState } from "react";
|
|
4
|
-
import { popperId } from "./lib";
|
|
5
|
-
import { PopperButtonGroup } from "./PopperButtonGroup";
|
|
6
|
-
const FavoritePopper = forwardRef(
|
|
7
|
-
({
|
|
8
|
-
name: nameProp,
|
|
9
|
-
favorite,
|
|
10
|
-
favoriteRef,
|
|
11
|
-
onClickAway = () => {
|
|
12
|
-
return;
|
|
13
|
-
},
|
|
14
|
-
onConfirmFavorite,
|
|
15
|
-
...props
|
|
16
|
-
}, ref) => {
|
|
17
|
-
const [name, setName] = useState(nameProp);
|
|
18
|
-
useEffect(() => {
|
|
19
|
-
setName(nameProp);
|
|
20
|
-
}, [nameProp]);
|
|
21
|
-
return /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway, children: /* @__PURE__ */ jsx(
|
|
22
|
-
PopperStyled,
|
|
23
|
-
{
|
|
24
|
-
id: popperId,
|
|
25
|
-
anchorEl: favoriteRef?.current,
|
|
26
|
-
onClick: (e) => e.stopPropagation(),
|
|
27
|
-
onTouchStart: (e) => e.stopPropagation(),
|
|
28
|
-
transition: true,
|
|
29
|
-
ref,
|
|
30
|
-
...props,
|
|
31
|
-
children: ({ TransitionProps }) => /* @__PURE__ */ jsx(Fade, { ...TransitionProps, timeout: 350, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { sx: { display: "flex", gap: 1 }, children: [
|
|
32
|
-
/* @__PURE__ */ jsx(
|
|
33
|
-
TextField,
|
|
34
|
-
{
|
|
35
|
-
autoFocus: true,
|
|
36
|
-
label: "Favorite Name",
|
|
37
|
-
placeholder: "optional",
|
|
38
|
-
size: "small",
|
|
39
|
-
value: name ?? "",
|
|
40
|
-
onChange: (e) => setName(e.target.value)
|
|
41
|
-
}
|
|
42
|
-
),
|
|
43
|
-
/* @__PURE__ */ jsx(PopperButtonGroup, { favorite, onConfirmFavorite, name })
|
|
44
|
-
] }) }) })
|
|
45
|
-
}
|
|
46
|
-
) });
|
|
47
|
-
}
|
|
48
|
-
);
|
|
49
|
-
FavoritePopper.displayName = "FavoritePopper";
|
|
50
|
-
const PopperStyled = styled(Popper, { name: "PopperStyled" })(() => ({ zIndex: 9999 }));
|
|
51
|
-
export {
|
|
52
|
-
FavoritePopper
|
|
53
|
-
};
|
|
54
|
-
//# sourceMappingURL=Popper.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/favorite/Popper.tsx"],"sourcesContent":["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"],"mappings":"AA8CgB,SACE,KADF;AA9ChB,SAAS,MAAM,aAAa,mBAAmB,MAAM,QAAqB,QAAQ,iBAAiB;AACnG,SAAS,YAAuB,WAAW,gBAAgB;AAE3D,SAAS,gBAAgB;AACzB,SAAS,yBAAyB;AAS3B,MAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,cAAc,MAAM;AAClB;AAAA,IACF;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,QAAQ;AACzC,cAAU,MAAM;AACd,cAAQ,QAAQ;AAAA,IAClB,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE,oBAAC,qBAAkB,aACjB;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,UAAU,aAAa;AAAA,QACvB,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAClC,cAAc,CAAC,MAAM,EAAE,gBAAgB;AAAA,QACvC,YAAU;AAAA,QACV;AAAA,QACC,GAAG;AAAA,QAEH,WAAC,EAAE,gBAAgB,MAClB,oBAAC,QAAM,GAAG,iBAAiB,SAAS,KAClC,8BAAC,QACC,+BAAC,eAAY,IAAI,EAAE,SAAS,QAAQ,KAAK,EAAE,GACzC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAS;AAAA,cACT,OAAM;AAAA,cACN,aAAY;AAAA,cACZ,MAAK;AAAA,cACL,OAAO,QAAQ;AAAA,cACf,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA;AAAA,UACzC;AAAA,UACA,oBAAC,qBAAkB,UAAoB,mBAAsC,MAAY;AAAA,WAC3F,GACF,GACF;AAAA;AAAA,IAEJ,GACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAG7B,MAAM,eAAe,OAAO,QAAQ,EAAE,MAAM,eAAe,CAAC,EAAE,OAAO,EAAE,QAAQ,KAAK,EAAE;","names":[]}
|