@mrshmllw/smores-react 13.3.0 → 13.3.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.
|
@@ -3,7 +3,6 @@ import { Badge, BadgeSize } from '../Badge/Badge';
|
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import { Tooltip } from '../Tooltip';
|
|
5
5
|
import { Text } from '../Text';
|
|
6
|
-
import { theme } from '../theme';
|
|
7
6
|
/**
|
|
8
7
|
* ### A list of badges with optional tooltips
|
|
9
8
|
*
|
|
@@ -40,7 +39,7 @@ const ExcessBadgeContainer = styled.div `
|
|
|
40
39
|
place-content: center;
|
|
41
40
|
width: 100%;
|
|
42
41
|
height: 100%;
|
|
43
|
-
background-color: ${theme.
|
|
42
|
+
background-color: ${({ theme }) => theme.color.surface.base[400]};
|
|
44
43
|
pointer-events: none;
|
|
45
44
|
`;
|
|
46
45
|
const WithTooltip = ({ badge: { tooltip, ...badge } }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeList.js","sourceRoot":"","sources":["../../src/BadgeList/BadgeList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,SAAS,EAAmB,MAAM,gBAAgB,CAAA;AAClE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"BadgeList.js","sourceRoot":"","sources":["../../src/BadgeList/BadgeList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,SAAS,EAAmB,MAAM,gBAAgB,CAAA;AAClE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAc9B;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC,EAAE,EAAS;IACrE,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAA;IACpC,MAAM,WAAW;IACf,yFAAyF;IACzF,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAE9D,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC/C,MAAM,eAAe,GAAG,WAAW,KAAK,SAAS,IAAI,OAAO,CAAC,WAAW,CAAC,CAAA;IAEzE,OAAO,CACL,oBAAC,SAAS,aAAQ,IAAI;QACnB,MAAM;aACJ,KAAK,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;aAC7C,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACrB,oBAAC,WAAW,IACV,GAAG,EAAE,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EACtD,KAAK,EAAE;gBACL,GAAG,KAAK;gBACR,MAAM,EAAE,cAAc,GAAG,KAAK;gBAC9B,IAAI;aACL,GACD,CACH,CAAC;QAEH,eAAe,IAAI,CAClB,6BACE,SAAS,EAAC,aAAa,EACvB,KAAK,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE;YAEpD,oBAAC,KAAK,IACJ,KAAK,EAAE,IAAI,WAAW,EAAE,EACxB,YAAY,EAAC,SAAS,EACtB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,oBAAC,WAAW,IAAC,MAAM,EAAE,WAAW,GAAG,CAAC,GAAI,EAC7C,QAAQ,SACR,CACE,CACP,CACS,CACb,CAAA;AACH,CAAC;AAMD,SAAS,WAAW,CAAC,EAAE,MAAM,EAAoB;IAC/C,OAAO,CACL,oBAAC,oBAAoB;QACnB,oBAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;;YAC9C,MAAM,CACH,CACc,CACxB,CAAA;AACH,CAAC;AAED,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;sBAMjB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;CAEjE,CAAA;AAMD,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAoB,EAAE,EAAE;IACzE,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE;YAClC,oBAAC,OAAO,IACN,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,QAAQ,EACtC,KAAK,EAAE,OAAO,EAAE,KAAK,EACrB,OAAO,EAAE,OAAO,CAAC,OAAO;gBAExB,oBAAC,KAAK,OAAK,KAAK,GAAI,CACZ,CACN,CACP,CAAA;IACH,CAAC;IAED,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE;QAClC,oBAAC,KAAK,OAAK,KAAK,GAAI,CAChB,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,kBAAkB,GAAG;IACzB,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,OAAO;IACvB,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,OAAO;IACvB,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,OAAO;CACY,CAAA;AAErC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAsB;;;;;;;oBAO9B,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;CAS7D,CAAA","sourcesContent":["import React from 'react'\nimport { Badge, BadgeSize, type BadgeProps } from '../Badge/Badge'\nimport styled from 'styled-components'\nimport { Tooltip } from '../Tooltip'\nimport type { TooltipProps } from '../Tooltip/Tooltip'\nimport { Text } from '../Text'\n\ntype WithTooltip = Pick<TooltipProps, 'title' | 'content'> & {\n position?: TooltipProps['position']\n}\n\nexport type BadgeListBadge = BadgeProps & { tooltip?: WithTooltip }\n\ntype Props = {\n size?: BadgeProps['size']\n limit?: number\n badges: Omit<BadgeListBadge, 'zIndex'>[]\n}\n\n/**\n * ### A list of badges with optional tooltips\n *\n * @param limit - The maximum number of badges to display. If the number of badges exceeds the limit, a badge will be displayed indicating the number of hidden excess badges.\n *\n */\nexport function BadgeList({ badges, limit, size = BadgeSize.Lg }: Props) {\n const badgeZIndexMax = badges.length\n const limitExcess =\n // TODO: off by one adjustments work, just hard to read, refactor for human eyes 👁️👄👁️\n limit && (badges.length > limit ? badges.length - limit : 0)\n\n const maxBadges = limit ? limit - 1 : undefined\n const showExcessBadge = limitExcess !== undefined && Boolean(limitExcess)\n\n return (\n <Container $size={size}>\n {badges\n .slice(0, limitExcess ? maxBadges : undefined)\n .map((badge, index) => (\n <WithTooltip\n key={typeof badge.src === 'string' ? badge.src : index}\n badge={{\n ...badge,\n zIndex: badgeZIndexMax - index,\n size,\n }}\n />\n ))}\n\n {showExcessBadge && (\n <div\n className=\"limit-badge\"\n style={{ zIndex: badgeZIndexMax, marginLeft: '4px' }}\n >\n <Badge\n title={`+${limitExcess}`}\n borderColour=\"oatmeal\"\n size={size}\n src={<ExcessBadge excess={limitExcess + 1} />}\n disabled\n />\n </div>\n )}\n </Container>\n )\n}\n\ntype ExcessBadgeProps = {\n excess: number\n}\n\nfunction ExcessBadge({ excess }: ExcessBadgeProps) {\n return (\n <ExcessBadgeContainer>\n <Text typo=\"caption\" style={{ fontWeight: 'bold' }}>\n +{excess}\n </Text>\n </ExcessBadgeContainer>\n )\n}\n\nconst ExcessBadgeContainer = styled.div`\n display: flex;\n align-items: center;\n place-content: center;\n width: 100%;\n height: 100%;\n background-color: ${({ theme }) => theme.color.surface.base[400]};\n pointer-events: none;\n`\n\ntype WithTooltipProps = {\n badge: BadgeListBadge\n}\n\nconst WithTooltip = ({ badge: { tooltip, ...badge } }: WithTooltipProps) => {\n if (tooltip) {\n return (\n <div style={{ zIndex: badge.zIndex }}>\n <Tooltip\n position={tooltip.position ?? 'bottom'}\n title={tooltip?.title}\n content={tooltip.content}\n >\n <Badge {...badge} />\n </Tooltip>\n </div>\n )\n }\n\n return (\n <div style={{ zIndex: badge.zIndex }}>\n <Badge {...badge} />\n </div>\n )\n}\n\nconst marginRightMapping = {\n [BadgeSize.Lg]: '-18px',\n [BadgeSize.Md]: '-14px',\n [BadgeSize.Sm]: '-11px',\n} satisfies Record<BadgeSize, string>\n\nconst Container = styled.div<{ $size: BadgeSize }>`\n display: flex;\n\n > * {\n transition:\n margin 0.2s ease-in-out,\n padding 0.2s ease-in-out;\n margin-right: ${(props) => marginRightMapping[props.$size]};\n\n &:hover:not(:first-child):not(.limit-badge) {\n padding-left: 10px;\n &:not(:last-child) {\n padding-right: 5px;\n }\n }\n }\n`\n"]}
|