@mrshmllw/smores-react 9.11.0 → 9.12.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/Badge/Badge.d.ts +2 -1
- package/dist/Badge/Badge.js +8 -5
- package/dist/Badge/Badge.js.map +1 -1
- package/dist/Badge/BadgeFallbackImage.d.ts +6 -0
- package/dist/Badge/BadgeFallbackImage.js +24 -0
- package/dist/Badge/BadgeFallbackImage.js.map +1 -0
- package/dist/BadgeList/BadgeList.js +4 -2
- package/dist/BadgeList/BadgeList.js.map +1 -1
- package/package.json +3 -3
package/dist/Badge/Badge.d.ts
CHANGED
|
@@ -7,9 +7,10 @@ export declare enum BadgeSize {
|
|
|
7
7
|
}
|
|
8
8
|
export type BadgeProps = {
|
|
9
9
|
src: string | JSX.Element;
|
|
10
|
+
title?: string;
|
|
10
11
|
borderColour?: Color;
|
|
11
12
|
size?: BadgeSize;
|
|
12
13
|
disabled?: boolean;
|
|
13
14
|
zIndex?: number;
|
|
14
15
|
};
|
|
15
|
-
export declare function Badge<T extends BadgeProps>({ borderColour, size, src, disabled, zIndex, }: BadgeProps): React.JSX.Element;
|
|
16
|
+
export declare function Badge<T extends BadgeProps>({ borderColour, size, src, disabled, zIndex, title, }: BadgeProps): React.JSX.Element;
|
package/dist/Badge/Badge.js
CHANGED
|
@@ -1,22 +1,25 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
3
|
import { theme } from '../theme';
|
|
4
|
+
import { BadgeFallbackImage } from './BadgeFallbackImage';
|
|
4
5
|
export var BadgeSize;
|
|
5
6
|
(function (BadgeSize) {
|
|
6
7
|
BadgeSize["Sm"] = "24px";
|
|
7
8
|
BadgeSize["Md"] = "32px";
|
|
8
9
|
BadgeSize["Lg"] = "40px";
|
|
9
10
|
})(BadgeSize || (BadgeSize = {}));
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
export function Badge({ borderColour = 'lollipop', size = BadgeSize.Lg, src, disabled, zIndex, }) {
|
|
11
|
+
export function Badge({ borderColour = 'lollipop', size = BadgeSize.Lg, src, disabled, zIndex, title, }) {
|
|
12
|
+
const [hasFailed, setHasFailed] = useState(false);
|
|
13
13
|
if (typeof src === 'string') {
|
|
14
|
-
return (React.createElement(Container, { "$borderColour": theme.colors[borderColour], "$size": size, "$src": src, "$disabled": disabled, "$zIndex": zIndex }
|
|
14
|
+
return (React.createElement(Container, { "$borderColour": theme.colors[borderColour], "$size": size, "$src": src, "$disabled": disabled, "$zIndex": zIndex },
|
|
15
|
+
hasFailed && React.createElement(BadgeFallbackImage, { title: title }),
|
|
16
|
+
!hasFailed && (React.createElement("img", { width: '100%', height: '100%', src: src, alt: title, onError: () => setHasFailed(true) }))));
|
|
15
17
|
}
|
|
16
18
|
return (React.createElement(Container, { "$borderColour": theme.colors[borderColour], "$size": size, "$disabled": disabled, "$zIndex": zIndex, "$src": null }, src));
|
|
17
19
|
}
|
|
18
20
|
const Container = styled.div((props) => {
|
|
19
21
|
return css `
|
|
22
|
+
background-color: ${props.$borderColour};
|
|
20
23
|
background-image: ${props.$src ? `url(${props.$src})` : 'none'};
|
|
21
24
|
background-position: center;
|
|
22
25
|
background-size: cover;
|
package/dist/Badge/Badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAc,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAEzD,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,wBAAW,CAAA;IACX,wBAAW,CAAA;AACb,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAWD,MAAM,UAAU,KAAK,CAAuB,EAC1C,YAAY,GAAG,UAAU,EACzB,IAAI,GAAG,SAAS,CAAC,EAAE,EACnB,GAAG,EACH,QAAQ,EACR,MAAM,EACN,KAAK,GACM;IACX,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEjD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,OAAO,CACL,oBAAC,SAAS,qBACO,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,WAClC,IAAI,UACL,GAAG,eACE,QAAQ,aACV,MAAM;YAEd,SAAS,IAAI,oBAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,GAAI;YACjD,CAAC,SAAS,IAAI,CACb,6BACE,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,GACjC,CACH,CACS,CACb,CAAA;IACH,CAAC;IAED,OAAO,CACL,oBAAC,SAAS,qBACO,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,WAClC,IAAI,eACA,QAAQ,aACV,MAAM,UACT,IAAI,IAET,GAAG,CACM,CACb,CAAA;AACH,CAAC;AAUD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAiB,CAAC,KAAK,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,aAAa;wBACnB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,MAAM;;;cAGpD,KAAK,CAAC,KAAK;aACZ,KAAK,CAAC,KAAK;;;;wBAIA,KAAK,CAAC,aAAa;cAC7B,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM;eACzC,KAAK,CAAC,OAAO,IAAI,CAAC;;MAE3B,CAAC,KAAK,CAAC,SAAS;QAClB,GAAG,CAAA;;;;;KAKF;GACF,CAAA;AACH,CAAC,CAAC,CAAA"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React, { useRef } from 'react';
|
|
2
|
+
import { theme } from '../theme';
|
|
3
|
+
import { Text } from '../Text';
|
|
4
|
+
import styled from 'styled-components';
|
|
5
|
+
export function BadgeFallbackImage({ title }) {
|
|
6
|
+
const bgColour = useRef(fallbackBackgroundColours[Math.floor(Math.random() * fallbackBackgroundColours.length)]);
|
|
7
|
+
return (React.createElement(StyledFallbackImage, { "$backgroundColour": bgColour.current },
|
|
8
|
+
React.createElement(Text, { typo: "caption", color: "liquorice", style: { fontWeight: 'bold' } }, title?.substring(0, 2) ?? null)));
|
|
9
|
+
}
|
|
10
|
+
const fallbackBackgroundColours = [
|
|
11
|
+
theme.colors.lollipop,
|
|
12
|
+
theme.colors.marshmallowPink,
|
|
13
|
+
theme.colors.bubblegum,
|
|
14
|
+
theme.colors.fairyFloss,
|
|
15
|
+
];
|
|
16
|
+
const StyledFallbackImage = styled.div `
|
|
17
|
+
background-color: ${(props) => props.$backgroundColour};
|
|
18
|
+
display: flex;
|
|
19
|
+
place-content: center;
|
|
20
|
+
align-items: center;
|
|
21
|
+
width: 100%;
|
|
22
|
+
height: 100%;
|
|
23
|
+
`;
|
|
24
|
+
//# sourceMappingURL=BadgeFallbackImage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeFallbackImage.js","sourceRoot":"","sources":["../../src/Badge/BadgeFallbackImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAMtC,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAAS;IACjD,MAAM,QAAQ,GAAG,MAAM,CACrB,yBAAyB,CACvB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,yBAAyB,CAAC,MAAM,CAAC,CAC7D,CACF,CAAA;IACD,OAAO,CACL,oBAAC,mBAAmB,yBAAoB,QAAQ,CAAC,OAAO;QACtD,oBAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IACjE,KAAK,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,IAAI,CAC1B,CACa,CACvB,CAAA;AACH,CAAC;AAED,MAAM,yBAAyB,GAAG;IAChC,KAAK,CAAC,MAAM,CAAC,QAAQ;IACrB,KAAK,CAAC,MAAM,CAAC,eAAe;IAC5B,KAAK,CAAC,MAAM,CAAC,SAAS;IACtB,KAAK,CAAC,MAAM,CAAC,UAAU;CACxB,CAAA;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAA+B;sBAC/C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,iBAAiB;;;;;;CAMvD,CAAA"}
|
|
@@ -17,7 +17,7 @@ export function BadgeList({ badges, limit, size }) {
|
|
|
17
17
|
zIndex: badgeZIndexMax - index * 10,
|
|
18
18
|
size,
|
|
19
19
|
} }))),
|
|
20
|
-
limitExcess !== undefined && Boolean(limitExcess) && (React.createElement(Badge, { borderColour: "oatmeal", size: size, src: React.createElement(ExcessBadge, { excess: limitExcess }), zIndex: badgeZIndexMax, disabled: true }))));
|
|
20
|
+
limitExcess !== undefined && Boolean(limitExcess) && (React.createElement(Badge, { title: `+${limitExcess}`, borderColour: "oatmeal", size: size, src: React.createElement(ExcessBadge, { excess: limitExcess }), zIndex: badgeZIndexMax, disabled: true }))));
|
|
21
21
|
}
|
|
22
22
|
function ExcessBadge({ excess }) {
|
|
23
23
|
return (React.createElement(ExcessBadgeContainer, null,
|
|
@@ -49,7 +49,9 @@ const WithTooltip = ({ badge: { tooltip, ...badge } }) => {
|
|
|
49
49
|
};
|
|
50
50
|
const Container = styled(Box) `
|
|
51
51
|
& > * {
|
|
52
|
-
transition:
|
|
52
|
+
transition:
|
|
53
|
+
margin 0.2s ease-in-out,
|
|
54
|
+
padding 0.2s ease-in-out;
|
|
53
55
|
margin-right: -15px;
|
|
54
56
|
}
|
|
55
57
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeList.js","sourceRoot":"","sources":["../../src/BadgeList/BadgeList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,KAAK,EAAmB,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAchC,MAAM,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAS;IACtD,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,GAAG,EAAE,GAAG,EAAE,CAAA;IAC9C,MAAM,WAAW;IACf,yFAAyF;IACzF,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAEtE,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAE/C,OAAO,CACL,oBAAC,SAAS,IAAC,IAAI;
|
|
1
|
+
{"version":3,"file":"BadgeList.js","sourceRoot":"","sources":["../../src/BadgeList/BadgeList.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.12.0",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"keywords": [
|
|
@@ -86,12 +86,12 @@
|
|
|
86
86
|
"vitest": "^1.2.2"
|
|
87
87
|
},
|
|
88
88
|
"dependencies": {
|
|
89
|
-
"@lexical/react": "^0.
|
|
89
|
+
"@lexical/react": "^0.16.0",
|
|
90
90
|
"body-scroll-lock": "^4.0.0-beta.0",
|
|
91
91
|
"date-fns": "^3.6.0",
|
|
92
92
|
"dompurify": "^3.0.9",
|
|
93
93
|
"fuse.js": "^7.0.0",
|
|
94
|
-
"lexical": "^0.
|
|
94
|
+
"lexical": "^0.16.0",
|
|
95
95
|
"polished": "^4.1.3"
|
|
96
96
|
},
|
|
97
97
|
"peerDependencies": {
|