@metamask/design-system-react
Version:
Design system react ui components
1 lines • 6.58 kB
Source Map (JSON)
{"version":3,"file":"BadgeWrapper.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { CSSProperties } from 'react';\nimport React, {\n forwardRef,\n useState,\n useLayoutEffect,\n useMemo,\n useRef,\n} from 'react';\n\nimport {\n BadgeWrapperPosition,\n BadgeWrapperPositionAnchorShape,\n} from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\n\nimport type { BadgeWrapperProps } from './BadgeWrapper.types';\n\nexport const BadgeWrapper = forwardRef<HTMLDivElement, BadgeWrapperProps>(\n (\n {\n children,\n childrenContainerProps,\n badge,\n badgeContainerProps,\n position = BadgeWrapperPosition.BottomRight,\n positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular,\n positionXOffset = 0,\n positionYOffset = 0,\n customPosition,\n className = '',\n style,\n ...props\n },\n ref,\n ) => {\n const [anchorWidth, setAnchorWidth] = useState(0);\n const [anchorHeight, setAnchorHeight] = useState(0);\n const [badgeWidth, setBadgeWidth] = useState(0);\n const [badgeHeight, setBadgeHeight] = useState(0);\n\n const anchorRef = useRef<HTMLDivElement | null>(null);\n const badgeRef = useRef<HTMLDivElement | null>(null);\n\n // Measure both elements once on mount\n useLayoutEffect(() => {\n if (anchorRef.current) {\n const { width, height } = anchorRef.current.getBoundingClientRect();\n setAnchorWidth(width);\n setAnchorHeight(height);\n }\n if (badgeRef.current) {\n const { width, height } = badgeRef.current.getBoundingClientRect();\n setBadgeWidth(width);\n setBadgeHeight(height);\n }\n }, []); // empty deps → run only after first render\n\n const finalPositions = useMemo<React.CSSProperties>(() => {\n if (customPosition) {\n return customPosition as CSSProperties;\n }\n\n const anchorShapeXOffset =\n positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular\n ? 0\n : anchorWidth * 0.1464;\n const anchorShapeYOffset =\n positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular\n ? 0\n : anchorHeight * 0.1464;\n\n const badgeCenteringXOffset = badgeWidth / 2;\n const badgeCenteringYOffset = badgeHeight / 2;\n\n const finalXOffset =\n anchorShapeXOffset - badgeCenteringXOffset + positionXOffset;\n const finalYOffset =\n anchorShapeYOffset - badgeCenteringYOffset + positionYOffset;\n\n switch (position) {\n case BadgeWrapperPosition.TopRight:\n return { top: finalYOffset, right: finalXOffset };\n case BadgeWrapperPosition.TopLeft:\n return { top: finalYOffset, left: finalXOffset };\n case BadgeWrapperPosition.BottomLeft:\n return { bottom: finalYOffset, left: finalXOffset };\n case BadgeWrapperPosition.BottomRight:\n default:\n return { bottom: finalYOffset, right: finalXOffset };\n }\n }, [\n position,\n positionAnchorShape,\n anchorWidth,\n anchorHeight,\n badgeWidth,\n badgeHeight,\n positionXOffset,\n positionYOffset,\n customPosition,\n ]);\n\n const containerClassName = twMerge(\n 'relative inline-flex self-start',\n className,\n );\n\n return (\n <div ref={ref} className={containerClassName} style={style} {...props}>\n <div\n className=\"inline-flex\"\n ref={anchorRef}\n {...childrenContainerProps}\n >\n {children}\n </div>\n\n <div\n ref={badgeRef}\n className=\"absolute\"\n style={finalPositions}\n {...badgeContainerProps}\n >\n {badge}\n </div>\n </div>\n );\n },\n);\n\nBadgeWrapper.displayName = 'BadgeWrapper';\n"]}