@valpro-labs/ui 1.5.0 → 1.6.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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type ImageStyle, type StyleProp } from 'react-native';
|
|
3
3
|
interface OwnedItemCardProps {
|
|
4
|
-
/** Thumbnail URL
|
|
4
|
+
/** Thumbnail URL - the owned item's icon. */
|
|
5
5
|
iconUrl?: string;
|
|
6
6
|
/**
|
|
7
7
|
* Fill the tile edge-to-edge. Defaults to `true` since most owned
|
|
@@ -13,12 +13,12 @@ interface OwnedItemCardProps {
|
|
|
13
13
|
/**
|
|
14
14
|
* Draw a soft radial darken behind the badge corners so the badges
|
|
15
15
|
* stay legible on light / busy art. Only player cards use this in
|
|
16
|
-
* the source app
|
|
16
|
+
* the source app - sprays and flex items are full-bleed but skip
|
|
17
17
|
* the shadow. Independent of `fill`.
|
|
18
18
|
*/
|
|
19
19
|
badgeShadow?: boolean;
|
|
20
20
|
/**
|
|
21
|
-
* Extra style merged onto the inner image
|
|
21
|
+
* Extra style merged onto the inner image - useful for per-item
|
|
22
22
|
* scale / translate / rotate transforms (e.g. positioning weapon
|
|
23
23
|
* art inside a grid tile). Applied after the default width/height
|
|
24
24
|
* so width/height can still be overridden if the caller wants.
|
|
@@ -26,11 +26,13 @@ interface OwnedItemCardProps {
|
|
|
26
26
|
iconStyle?: StyleProp<ImageStyle>;
|
|
27
27
|
/** Render the red selection ring. */
|
|
28
28
|
isSelected?: boolean;
|
|
29
|
-
/** Dim the tile to 30%
|
|
29
|
+
/** Dim the tile to 30% - used to flag stackable items the viewer has run out of. */
|
|
30
30
|
isDepleted?: boolean;
|
|
31
|
-
/** Badge pinned to the top-left
|
|
31
|
+
/** Badge pinned to the top-left - typically the equipped checkmark. */
|
|
32
32
|
equippedBadge?: React.ReactNode;
|
|
33
|
-
/** Badge pinned to the bottom-
|
|
33
|
+
/** Badge pinned to the bottom-left - typically the tier icon. */
|
|
34
|
+
tierBadge?: React.ReactNode;
|
|
35
|
+
/** Badge pinned to the bottom-right - typically the favorite star. */
|
|
34
36
|
favoriteBadge?: React.ReactNode;
|
|
35
37
|
/** Remaining stack count rendered in the top-right (`X{count}`). Omit to hide. */
|
|
36
38
|
remainingCount?: number;
|
|
@@ -40,10 +42,10 @@ interface OwnedItemCardProps {
|
|
|
40
42
|
className?: string;
|
|
41
43
|
}
|
|
42
44
|
/**
|
|
43
|
-
* Square owned-inventory tile used in every customize picker
|
|
45
|
+
* Square owned-inventory tile used in every customize picker - player
|
|
44
46
|
* cards, titles, sprays, gun buddies, weapon skins. Shows the item's
|
|
45
|
-
* icon, optional equipped + favorite badges, a red selection
|
|
46
|
-
* an optional `X{n}` remaining count.
|
|
47
|
+
* icon, optional equipped + tier + favorite badges, a red selection
|
|
48
|
+
* ring, and an optional `X{n}` remaining count.
|
|
47
49
|
*
|
|
48
50
|
* Data-free: the consumer resolves the icon URL + favorite / equipped
|
|
49
51
|
* state and supplies the badge icons as `ReactNode` (e.g. phosphor
|
|
@@ -52,11 +54,11 @@ interface OwnedItemCardProps {
|
|
|
52
54
|
* upstream for tap handling.
|
|
53
55
|
*
|
|
54
56
|
* Per-item image styling: consumers can pass `iconStyle` to layer
|
|
55
|
-
* scale / translate / rotate transforms onto the inner image
|
|
57
|
+
* scale / translate / rotate transforms onto the inner image - needed
|
|
56
58
|
* for weapon skins, where each gun's art has to be re-positioned to
|
|
57
59
|
* fit a square tile.
|
|
58
60
|
*/
|
|
59
|
-
declare function OwnedItemCard({ iconUrl, fill, badgeShadow, iconStyle, isSelected, isDepleted, equippedBadge, favoriteBadge, remainingCount, isLoading, className, }: OwnedItemCardProps): import("react/jsx-runtime").JSX.Element;
|
|
61
|
+
declare function OwnedItemCard({ iconUrl, fill, badgeShadow, iconStyle, isSelected, isDepleted, equippedBadge, tierBadge, favoriteBadge, remainingCount, isLoading, className, }: OwnedItemCardProps): import("react/jsx-runtime").JSX.Element;
|
|
60
62
|
export { OwnedItemCard };
|
|
61
63
|
export type { OwnedItemCardProps };
|
|
62
64
|
//# sourceMappingURL=owned-item-card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"owned-item-card.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/owned-item-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"owned-item-card.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/owned-item-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAqCrE,UAAU,kBAAkB;IAC1B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAClC,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oFAAoF;IACpF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uEAAuE;IACvE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,iEAAiE;IACjE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,sEAAsE;IACtE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kFAAkF;IAClF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,aAAa,CAAC,EACrB,OAAO,EACP,IAAW,EACX,WAAmB,EACnB,SAAS,EACT,UAAkB,EAClB,UAAkB,EAClB,aAAa,EACb,SAAS,EACT,aAAa,EACb,cAAc,EACd,SAAiB,EACjB,SAAS,GACV,EAAE,kBAAkB,2CA4DpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,kBAAkB,EAAE,CAAC"}
|
|
@@ -6,15 +6,22 @@ import { Text } from '../../components/ui/text';
|
|
|
6
6
|
import { Defs, RadialGradient, Rect, Stop, Svg } from '../../lib/svg-shim';
|
|
7
7
|
import { cn } from '../../lib/utils';
|
|
8
8
|
function CornerGradient({ corner }) {
|
|
9
|
-
const
|
|
9
|
+
const isTopLeft = corner === 'top-left';
|
|
10
|
+
const isLeft = corner !== 'bottom-right';
|
|
10
11
|
const id = `owned-item-corner-${corner}`;
|
|
11
|
-
return (_jsxs(Svg, { width: "50%", height: "50%", style: {
|
|
12
|
+
return (_jsxs(Svg, { width: "50%", height: "50%", style: {
|
|
13
|
+
position: 'absolute',
|
|
14
|
+
top: isTopLeft ? 0 : undefined,
|
|
15
|
+
left: isLeft ? 0 : undefined,
|
|
16
|
+
right: isLeft ? undefined : 0,
|
|
17
|
+
bottom: isTopLeft ? undefined : 0,
|
|
18
|
+
}, children: [_jsx(Defs, { children: _jsxs(RadialGradient, { id: id, cx: isLeft ? '0' : '1', cy: isTopLeft ? '0' : '1', r: "1", children: [_jsx(Stop, { offset: "0", stopColor: "black", stopOpacity: "0.4" }), _jsx(Stop, { offset: "1", stopColor: "black", stopOpacity: "0" })] }) }), _jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${id})` })] }));
|
|
12
19
|
}
|
|
13
20
|
/**
|
|
14
|
-
* Square owned-inventory tile used in every customize picker
|
|
21
|
+
* Square owned-inventory tile used in every customize picker - player
|
|
15
22
|
* cards, titles, sprays, gun buddies, weapon skins. Shows the item's
|
|
16
|
-
* icon, optional equipped + favorite badges, a red selection
|
|
17
|
-
* an optional `X{n}` remaining count.
|
|
23
|
+
* icon, optional equipped + tier + favorite badges, a red selection
|
|
24
|
+
* ring, and an optional `X{n}` remaining count.
|
|
18
25
|
*
|
|
19
26
|
* Data-free: the consumer resolves the icon URL + favorite / equipped
|
|
20
27
|
* state and supplies the badge icons as `ReactNode` (e.g. phosphor
|
|
@@ -23,11 +30,11 @@ function CornerGradient({ corner }) {
|
|
|
23
30
|
* upstream for tap handling.
|
|
24
31
|
*
|
|
25
32
|
* Per-item image styling: consumers can pass `iconStyle` to layer
|
|
26
|
-
* scale / translate / rotate transforms onto the inner image
|
|
33
|
+
* scale / translate / rotate transforms onto the inner image - needed
|
|
27
34
|
* for weapon skins, where each gun's art has to be re-positioned to
|
|
28
35
|
* fit a square tile.
|
|
29
36
|
*/
|
|
30
|
-
function OwnedItemCard({ iconUrl, fill = true, badgeShadow = false, iconStyle, isSelected = false, isDepleted = false, equippedBadge, favoriteBadge, remainingCount, isLoading = false, className, }) {
|
|
37
|
+
function OwnedItemCard({ iconUrl, fill = true, badgeShadow = false, iconStyle, isSelected = false, isDepleted = false, equippedBadge, tierBadge, favoriteBadge, remainingCount, isLoading = false, className, }) {
|
|
31
38
|
if (isLoading) {
|
|
32
39
|
return _jsx(Skeleton, { className: cn('aspect-square w-full rounded-xl', className) });
|
|
33
40
|
}
|
|
@@ -37,7 +44,7 @@ function OwnedItemCard({ iconUrl, fill = true, badgeShadow = false, iconStyle, i
|
|
|
37
44
|
height: fill ? '100%' : '80%',
|
|
38
45
|
},
|
|
39
46
|
iconStyle,
|
|
40
|
-
], contentFit: "contain" })) : (_jsx(View, { className: "bg-muted h-full w-full" })), isSelected ? (_jsx(View, { className: "bg-val-green-ui/20 absolute inset-0", pointerEvents: "none" })) : null, equippedBadge ? (_jsxs(_Fragment, { children: [badgeShadow ? _jsx(CornerGradient, { corner: "top-left" }) : null, _jsx(View, { className: "absolute top-1 left-1", children: equippedBadge })] })) : null, favoriteBadge ? (_jsxs(_Fragment, { children: [badgeShadow ? _jsx(CornerGradient, { corner: "bottom-right" }) : null, _jsx(View, { className: "absolute right-1 bottom-1", children: favoriteBadge })] })) : null, remainingCount != null ? (_jsx(View, { className: "absolute top-1 right-1", children: _jsxs(Text, { className: "text-muted-foreground text-sm font-bold", children: ["X", remainingCount] }) })) : null] }));
|
|
47
|
+
], contentFit: "contain" })) : (_jsx(View, { className: "bg-muted h-full w-full" })), isSelected ? (_jsx(View, { className: "bg-val-green-ui/20 absolute inset-0", pointerEvents: "none" })) : null, equippedBadge ? (_jsxs(_Fragment, { children: [badgeShadow ? _jsx(CornerGradient, { corner: "top-left" }) : null, _jsx(View, { className: "absolute top-1 left-1", children: equippedBadge })] })) : null, tierBadge ? (_jsx(_Fragment, { children: _jsx(View, { className: "absolute bottom-1 left-1", children: tierBadge }) })) : null, favoriteBadge ? (_jsxs(_Fragment, { children: [badgeShadow ? _jsx(CornerGradient, { corner: "bottom-right" }) : null, _jsx(View, { className: "absolute right-1 bottom-1", children: favoriteBadge })] })) : null, remainingCount != null ? (_jsx(View, { className: "absolute top-1 right-1", children: _jsxs(Text, { className: "text-muted-foreground text-sm font-bold", children: ["X", remainingCount] }) })) : null] }));
|
|
41
48
|
}
|
|
42
49
|
export { OwnedItemCard };
|
|
43
50
|
//# sourceMappingURL=owned-item-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"owned-item-card.js","sourceRoot":"","sources":["../../../src/components/blocks/owned-item-card.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAmC,MAAM,cAAc,CAAC;AAErE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAIjC,SAAS,cAAc,CAAC,EAAE,MAAM,EAAsB;IACpD,MAAM,
|
|
1
|
+
{"version":3,"file":"owned-item-card.js","sourceRoot":"","sources":["../../../src/components/blocks/owned-item-card.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAmC,MAAM,cAAc,CAAC;AAErE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAIjC,SAAS,cAAc,CAAC,EAAE,MAAM,EAAsB;IACpD,MAAM,SAAS,GAAG,MAAM,KAAK,UAAU,CAAC;IACxC,MAAM,MAAM,GAAG,MAAM,KAAK,cAAc,CAAC;IACzC,MAAM,EAAE,GAAG,qBAAqB,MAAM,EAAE,CAAC;IAEzC,OAAO,CACL,MAAC,GAAG,IACF,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YAC9B,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YAC5B,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;YAC7B,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;SAClC,aACD,KAAC,IAAI,cACH,MAAC,cAAc,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,EAAC,GAAG,aAC9E,KAAC,IAAI,IAAC,MAAM,EAAC,GAAG,EAAC,SAAS,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,GAAG,EACvD,KAAC,IAAI,IAAC,MAAM,EAAC,GAAG,EAAC,SAAS,EAAC,OAAO,EAAC,WAAW,EAAC,GAAG,GAAG,IACtC,GACZ,EACP,KAAC,IAAI,IAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,GAAI,IAChE,CACP,CAAC;AACJ,CAAC;AA4CD;;;;;;;;;;;;;;;;GAgBG;AACH,SAAS,aAAa,CAAC,EACrB,OAAO,EACP,IAAI,GAAG,IAAI,EACX,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,aAAa,EACb,SAAS,EACT,aAAa,EACb,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,SAAS,GACU;IACnB,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,KAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE,SAAS,CAAC,GAAI,CAAC;IACnF,CAAC;IAED,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,8FAA8F,EAC9F,UAAU,IAAI,0BAA0B,EACxC,UAAU,IAAI,YAAY,EAC1B,SAAS,CACV,aACA,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,KAAK,IACJ,MAAM,EAAE,OAAO,EACf,KAAK,EAAE;oBACL;wBACE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK;wBAC5B,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK;qBAC9B;oBACD,SAAS;iBACV,EACD,UAAU,EAAC,SAAS,GACpB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,SAAS,EAAC,wBAAwB,GAAG,CAC5C,EAEA,UAAU,CAAC,CAAC,CAAC,CACZ,KAAC,IAAI,IAAC,SAAS,EAAC,qCAAqC,EAAC,aAAa,EAAC,MAAM,GAAG,CAC9E,CAAC,CAAC,CAAC,IAAI,EAEP,aAAa,CAAC,CAAC,CAAC,CACf,8BACG,WAAW,CAAC,CAAC,CAAC,KAAC,cAAc,IAAC,MAAM,EAAC,UAAU,GAAG,CAAC,CAAC,CAAC,IAAI,EAC1D,KAAC,IAAI,IAAC,SAAS,EAAC,uBAAuB,YAAE,aAAa,GAAQ,IAC7D,CACJ,CAAC,CAAC,CAAC,IAAI,EAEP,SAAS,CAAC,CAAC,CAAC,CACX,4BACE,KAAC,IAAI,IAAC,SAAS,EAAC,0BAA0B,YAAE,SAAS,GAAQ,GAC5D,CACJ,CAAC,CAAC,CAAC,IAAI,EAEP,aAAa,CAAC,CAAC,CAAC,CACf,8BACG,WAAW,CAAC,CAAC,CAAC,KAAC,cAAc,IAAC,MAAM,EAAC,cAAc,GAAG,CAAC,CAAC,CAAC,IAAI,EAC9D,KAAC,IAAI,IAAC,SAAS,EAAC,2BAA2B,YAAE,aAAa,GAAQ,IACjE,CACJ,CAAC,CAAC,CAAC,IAAI,EAEP,cAAc,IAAI,IAAI,CAAC,CAAC,CAAC,CACxB,KAAC,IAAI,IAAC,SAAS,EAAC,wBAAwB,YACtC,MAAC,IAAI,IAAC,SAAS,EAAC,yCAAyC,kBAAG,cAAc,IAAQ,GAC7E,CACR,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
|