@gympass/yoga 7.114.30 → 7.115.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/cjs/Avatar/native/Avatar.js +5 -2
- package/cjs/Result/native/Result/TextWithBadge/index.js +91 -0
- package/cjs/Result/native/Result/TextWithBadge/index.test.js +69 -0
- package/cjs/Result/native/Result/TextWithBadge/styles.js +67 -0
- package/cjs/Result/native/Result/index.js +36 -40
- package/esm/Avatar/native/Avatar.js +5 -2
- package/esm/Result/native/Result/TextWithBadge/index.js +61 -0
- package/esm/Result/native/Result/TextWithBadge/index.test.js +46 -0
- package/esm/Result/native/Result/TextWithBadge/styles.js +32 -0
- package/esm/Result/native/Result/index.js +37 -41
- package/package.json +3 -3
- package/typings/Result/native/Result/TextWithBadge/styles.d.ts +20 -0
- package/typings/Theme/theme/v3theme.d.ts +37 -37
|
@@ -99,7 +99,8 @@ const Avatar = (0, import_react.forwardRef)(
|
|
|
99
99
|
stroke,
|
|
100
100
|
borderRadius,
|
|
101
101
|
width,
|
|
102
|
-
height
|
|
102
|
+
height,
|
|
103
|
+
onLayout
|
|
103
104
|
} = _b, props = __objRest(_b, [
|
|
104
105
|
"icon",
|
|
105
106
|
"src",
|
|
@@ -108,7 +109,8 @@ const Avatar = (0, import_react.forwardRef)(
|
|
|
108
109
|
"stroke",
|
|
109
110
|
"borderRadius",
|
|
110
111
|
"width",
|
|
111
|
-
"height"
|
|
112
|
+
"height",
|
|
113
|
+
"onLayout"
|
|
112
114
|
]);
|
|
113
115
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
114
116
|
import_Box.default,
|
|
@@ -120,6 +122,7 @@ const Avatar = (0, import_react.forwardRef)(
|
|
|
120
122
|
justifyContent: "center",
|
|
121
123
|
width,
|
|
122
124
|
height,
|
|
125
|
+
onLayout,
|
|
123
126
|
overflow: "hidden",
|
|
124
127
|
borderRadius
|
|
125
128
|
}, props), {
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var TextWithBadge_exports = {};
|
|
30
|
+
__export(TextWithBadge_exports, {
|
|
31
|
+
default: () => TextWithBadge_default
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(TextWithBadge_exports);
|
|
34
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
|
+
var import_react = require("react");
|
|
36
|
+
var import_react_native = require("react-native");
|
|
37
|
+
var import_Badge = __toESM(require("../../Badge"));
|
|
38
|
+
var import_styles = require("./styles");
|
|
39
|
+
const SCREEN_PADDINGS = 20;
|
|
40
|
+
const CONTENT_MARGINS = 20;
|
|
41
|
+
const AVATAR_CONTENT_MARGINS = 16;
|
|
42
|
+
const BADGE_LIMIT = 20;
|
|
43
|
+
const TextWithBadge = ({
|
|
44
|
+
avatarWidth,
|
|
45
|
+
badgeIcon,
|
|
46
|
+
title
|
|
47
|
+
}) => {
|
|
48
|
+
const [textSize, setTextSize] = (0, import_react.useState)(0);
|
|
49
|
+
const { width: windowWidth } = (0, import_react_native.useWindowDimensions)();
|
|
50
|
+
const textMaxSize = windowWidth - (SCREEN_PADDINGS + CONTENT_MARGINS + AVATAR_CONTENT_MARGINS + avatarWidth);
|
|
51
|
+
const shouldTruncate = textSize >= textMaxSize - BADGE_LIMIT;
|
|
52
|
+
const containerWidth = shouldTruncate ? null : textSize;
|
|
53
|
+
const textWidth = shouldTruncate ? "100%" : null;
|
|
54
|
+
const onTextLayout = (0, import_react.useCallback)(
|
|
55
|
+
({
|
|
56
|
+
nativeEvent: {
|
|
57
|
+
layout: { width }
|
|
58
|
+
}
|
|
59
|
+
}) => {
|
|
60
|
+
setTextSize(width);
|
|
61
|
+
},
|
|
62
|
+
[]
|
|
63
|
+
);
|
|
64
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledBoxContainer, { containerWidth, children: [
|
|
65
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
+
import_styles.StyledText,
|
|
67
|
+
{
|
|
68
|
+
onLayout: onTextLayout,
|
|
69
|
+
bold: true,
|
|
70
|
+
numberOfLines: 1,
|
|
71
|
+
textWidth,
|
|
72
|
+
children: title
|
|
73
|
+
}
|
|
74
|
+
),
|
|
75
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
76
|
+
import_Badge.default,
|
|
77
|
+
{
|
|
78
|
+
icon: badgeIcon,
|
|
79
|
+
fill: "text.primary",
|
|
80
|
+
ml: "xxxsmall",
|
|
81
|
+
bg: "neon",
|
|
82
|
+
justifyContent: "center",
|
|
83
|
+
alignItems: "center",
|
|
84
|
+
borderRadius: "circle",
|
|
85
|
+
w: "small",
|
|
86
|
+
h: "small"
|
|
87
|
+
}
|
|
88
|
+
)
|
|
89
|
+
] });
|
|
90
|
+
};
|
|
91
|
+
var TextWithBadge_default = TextWithBadge;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
12
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
+
}
|
|
14
|
+
return to;
|
|
15
|
+
};
|
|
16
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
18
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
19
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
20
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
+
var import_react_native = require("@testing-library/react-native");
|
|
26
|
+
var import_yoga_icons = require("@gympass/yoga-icons");
|
|
27
|
+
var import__ = require("../../../../index");
|
|
28
|
+
var import__2 = __toESM(require("."));
|
|
29
|
+
describe("TextWithBadge", () => {
|
|
30
|
+
it("should match snapshot", () => {
|
|
31
|
+
const { toJSON } = (0, import_react_native.render)(
|
|
32
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
33
|
+
import__2.default,
|
|
34
|
+
{
|
|
35
|
+
avatarWidth: 50,
|
|
36
|
+
badgeIcon: import_yoga_icons.WellhubIcon,
|
|
37
|
+
title: "Text with badge"
|
|
38
|
+
}
|
|
39
|
+
) })
|
|
40
|
+
);
|
|
41
|
+
expect(toJSON()).toMatchSnapshot();
|
|
42
|
+
});
|
|
43
|
+
it("should match snapshot with long title", () => {
|
|
44
|
+
const { toJSON } = (0, import_react_native.render)(
|
|
45
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
46
|
+
import__2.default,
|
|
47
|
+
{
|
|
48
|
+
avatarWidth: 50,
|
|
49
|
+
badgeIcon: import_yoga_icons.WellhubIcon,
|
|
50
|
+
title: "This is an example of a very long title that should be truncated"
|
|
51
|
+
}
|
|
52
|
+
) })
|
|
53
|
+
);
|
|
54
|
+
expect(toJSON()).toMatchSnapshot();
|
|
55
|
+
});
|
|
56
|
+
it("should match snapshot without badgeIcon", () => {
|
|
57
|
+
const { toJSON } = (0, import_react_native.render)(
|
|
58
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
|
+
import__2.default,
|
|
60
|
+
{
|
|
61
|
+
avatarWidth: 50,
|
|
62
|
+
badgeIcon: null,
|
|
63
|
+
title: "Title without Badge"
|
|
64
|
+
}
|
|
65
|
+
) })
|
|
66
|
+
);
|
|
67
|
+
expect(toJSON()).toMatchSnapshot();
|
|
68
|
+
});
|
|
69
|
+
});
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var styles_exports = {};
|
|
30
|
+
__export(styles_exports, {
|
|
31
|
+
StyledBoxContainer: () => StyledBoxContainer,
|
|
32
|
+
StyledText: () => StyledText
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(styles_exports);
|
|
35
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
36
|
+
var import_Text = __toESM(require("../../../../Text"));
|
|
37
|
+
var import_Box = __toESM(require("../../../../Box"));
|
|
38
|
+
const StyledBoxContainer = (0, import_styled_components.default)(import_Box.default)`
|
|
39
|
+
${({ containerWidth }) => import_styled_components.css`
|
|
40
|
+
flex-direction: row;
|
|
41
|
+
align-items: center;
|
|
42
|
+
justify-content: flex-end;
|
|
43
|
+
position: relative;
|
|
44
|
+
width: ${containerWidth}px;
|
|
45
|
+
`}
|
|
46
|
+
`;
|
|
47
|
+
const StyledText = (0, import_styled_components.default)(import_Text.default.Body1)`
|
|
48
|
+
${({
|
|
49
|
+
textWidth,
|
|
50
|
+
theme: {
|
|
51
|
+
yoga: {
|
|
52
|
+
spacing: { medium }
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}) => import_styled_components.css`
|
|
56
|
+
position: absolute;
|
|
57
|
+
left: 0;
|
|
58
|
+
padding-right: ${medium};
|
|
59
|
+
flex: 1;
|
|
60
|
+
width: ${textWidth};
|
|
61
|
+
`}
|
|
62
|
+
`;
|
|
63
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
64
|
+
0 && (module.exports = {
|
|
65
|
+
StyledBoxContainer,
|
|
66
|
+
StyledText
|
|
67
|
+
});
|
|
@@ -37,8 +37,8 @@ var import_prop_types = require("prop-types");
|
|
|
37
37
|
var import_Text = __toESM(require("../../../Text"));
|
|
38
38
|
var import_Box = __toESM(require("../../../Box"));
|
|
39
39
|
var import_Attendances = __toESM(require("../Attendances"));
|
|
40
|
-
var import_Badge = __toESM(require("../Badge"));
|
|
41
40
|
var import_styles = require("./styles");
|
|
41
|
+
var import_TextWithBadge = __toESM(require("./TextWithBadge"));
|
|
42
42
|
const Result = ({
|
|
43
43
|
avatar: Avatar,
|
|
44
44
|
attendances,
|
|
@@ -49,46 +49,42 @@ const Result = ({
|
|
|
49
49
|
children,
|
|
50
50
|
attendancesColor,
|
|
51
51
|
badgeIcon
|
|
52
|
-
}) =>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
attendances,
|
|
59
|
-
rate,
|
|
60
|
-
color: attendancesColor
|
|
52
|
+
}) => {
|
|
53
|
+
const [avatarWidth, setAvatarWidth] = (0, import_react.useState)(0);
|
|
54
|
+
const onAvatarLayout = (0, import_react.useCallback)(
|
|
55
|
+
({
|
|
56
|
+
nativeEvent: {
|
|
57
|
+
layout: { width }
|
|
61
58
|
}
|
|
62
|
-
)
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
] });
|
|
59
|
+
}) => {
|
|
60
|
+
setAvatarWidth(width);
|
|
61
|
+
},
|
|
62
|
+
[]
|
|
63
|
+
);
|
|
64
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledBox, { divided, display: "flex", flexDirection: "row", children: [
|
|
65
|
+
Avatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: (0, import_react.isValidElement)(Avatar) ? import_react.default.cloneElement(Avatar, { onLayout: onAvatarLayout }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Avatar, { onLayout: onAvatarLayout }) }),
|
|
66
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Content, { children: [
|
|
67
|
+
!!(attendances == null ? void 0 : attendances.length) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
68
|
+
import_Attendances.default,
|
|
69
|
+
{
|
|
70
|
+
attendances,
|
|
71
|
+
rate,
|
|
72
|
+
color: attendancesColor
|
|
73
|
+
}
|
|
74
|
+
),
|
|
75
|
+
badgeIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
76
|
+
import_TextWithBadge.default,
|
|
77
|
+
{
|
|
78
|
+
avatarWidth,
|
|
79
|
+
badgeIcon,
|
|
80
|
+
title
|
|
81
|
+
}
|
|
82
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Body1, { bold: true, numberOfLines: 1, children: title }) }),
|
|
83
|
+
subTitle && subTitle !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Body2, { numberOfLines: 1, color: "deep", children: subTitle }),
|
|
84
|
+
children
|
|
85
|
+
] })
|
|
86
|
+
] });
|
|
87
|
+
};
|
|
92
88
|
Result.propTypes = {
|
|
93
89
|
/** The component Avatar */
|
|
94
90
|
avatar: import_prop_types.node.isRequired,
|
|
@@ -68,7 +68,8 @@ const Avatar = forwardRef(
|
|
|
68
68
|
stroke,
|
|
69
69
|
borderRadius,
|
|
70
70
|
width,
|
|
71
|
-
height
|
|
71
|
+
height,
|
|
72
|
+
onLayout
|
|
72
73
|
} = _b, props = __objRest(_b, [
|
|
73
74
|
"icon",
|
|
74
75
|
"src",
|
|
@@ -77,7 +78,8 @@ const Avatar = forwardRef(
|
|
|
77
78
|
"stroke",
|
|
78
79
|
"borderRadius",
|
|
79
80
|
"width",
|
|
80
|
-
"height"
|
|
81
|
+
"height",
|
|
82
|
+
"onLayout"
|
|
81
83
|
]);
|
|
82
84
|
return /* @__PURE__ */ jsxs(
|
|
83
85
|
Box,
|
|
@@ -89,6 +91,7 @@ const Avatar = forwardRef(
|
|
|
89
91
|
justifyContent: "center",
|
|
90
92
|
width,
|
|
91
93
|
height,
|
|
94
|
+
onLayout,
|
|
92
95
|
overflow: "hidden",
|
|
93
96
|
borderRadius
|
|
94
97
|
}, props), {
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useState } from "react";
|
|
3
|
+
import { useWindowDimensions } from "react-native";
|
|
4
|
+
import Badge from "../../Badge";
|
|
5
|
+
import { StyledBoxContainer, StyledText } from "./styles";
|
|
6
|
+
const SCREEN_PADDINGS = 20;
|
|
7
|
+
const CONTENT_MARGINS = 20;
|
|
8
|
+
const AVATAR_CONTENT_MARGINS = 16;
|
|
9
|
+
const BADGE_LIMIT = 20;
|
|
10
|
+
const TextWithBadge = ({
|
|
11
|
+
avatarWidth,
|
|
12
|
+
badgeIcon,
|
|
13
|
+
title
|
|
14
|
+
}) => {
|
|
15
|
+
const [textSize, setTextSize] = useState(0);
|
|
16
|
+
const { width: windowWidth } = useWindowDimensions();
|
|
17
|
+
const textMaxSize = windowWidth - (SCREEN_PADDINGS + CONTENT_MARGINS + AVATAR_CONTENT_MARGINS + avatarWidth);
|
|
18
|
+
const shouldTruncate = textSize >= textMaxSize - BADGE_LIMIT;
|
|
19
|
+
const containerWidth = shouldTruncate ? null : textSize;
|
|
20
|
+
const textWidth = shouldTruncate ? "100%" : null;
|
|
21
|
+
const onTextLayout = useCallback(
|
|
22
|
+
({
|
|
23
|
+
nativeEvent: {
|
|
24
|
+
layout: { width }
|
|
25
|
+
}
|
|
26
|
+
}) => {
|
|
27
|
+
setTextSize(width);
|
|
28
|
+
},
|
|
29
|
+
[]
|
|
30
|
+
);
|
|
31
|
+
return /* @__PURE__ */ jsxs(StyledBoxContainer, { containerWidth, children: [
|
|
32
|
+
/* @__PURE__ */ jsx(
|
|
33
|
+
StyledText,
|
|
34
|
+
{
|
|
35
|
+
onLayout: onTextLayout,
|
|
36
|
+
bold: true,
|
|
37
|
+
numberOfLines: 1,
|
|
38
|
+
textWidth,
|
|
39
|
+
children: title
|
|
40
|
+
}
|
|
41
|
+
),
|
|
42
|
+
/* @__PURE__ */ jsx(
|
|
43
|
+
Badge,
|
|
44
|
+
{
|
|
45
|
+
icon: badgeIcon,
|
|
46
|
+
fill: "text.primary",
|
|
47
|
+
ml: "xxxsmall",
|
|
48
|
+
bg: "neon",
|
|
49
|
+
justifyContent: "center",
|
|
50
|
+
alignItems: "center",
|
|
51
|
+
borderRadius: "circle",
|
|
52
|
+
w: "small",
|
|
53
|
+
h: "small"
|
|
54
|
+
}
|
|
55
|
+
)
|
|
56
|
+
] });
|
|
57
|
+
};
|
|
58
|
+
var TextWithBadge_default = TextWithBadge;
|
|
59
|
+
export {
|
|
60
|
+
TextWithBadge_default as default
|
|
61
|
+
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { render } from "@testing-library/react-native";
|
|
3
|
+
import { WellhubIcon } from "@gympass/yoga-icons";
|
|
4
|
+
import { ThemeProvider } from "../../../../index";
|
|
5
|
+
import TextWithBadge from ".";
|
|
6
|
+
describe("TextWithBadge", () => {
|
|
7
|
+
it("should match snapshot", () => {
|
|
8
|
+
const { toJSON } = render(
|
|
9
|
+
/* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
|
|
10
|
+
TextWithBadge,
|
|
11
|
+
{
|
|
12
|
+
avatarWidth: 50,
|
|
13
|
+
badgeIcon: WellhubIcon,
|
|
14
|
+
title: "Text with badge"
|
|
15
|
+
}
|
|
16
|
+
) })
|
|
17
|
+
);
|
|
18
|
+
expect(toJSON()).toMatchSnapshot();
|
|
19
|
+
});
|
|
20
|
+
it("should match snapshot with long title", () => {
|
|
21
|
+
const { toJSON } = render(
|
|
22
|
+
/* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
|
|
23
|
+
TextWithBadge,
|
|
24
|
+
{
|
|
25
|
+
avatarWidth: 50,
|
|
26
|
+
badgeIcon: WellhubIcon,
|
|
27
|
+
title: "This is an example of a very long title that should be truncated"
|
|
28
|
+
}
|
|
29
|
+
) })
|
|
30
|
+
);
|
|
31
|
+
expect(toJSON()).toMatchSnapshot();
|
|
32
|
+
});
|
|
33
|
+
it("should match snapshot without badgeIcon", () => {
|
|
34
|
+
const { toJSON } = render(
|
|
35
|
+
/* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
|
|
36
|
+
TextWithBadge,
|
|
37
|
+
{
|
|
38
|
+
avatarWidth: 50,
|
|
39
|
+
badgeIcon: null,
|
|
40
|
+
title: "Title without Badge"
|
|
41
|
+
}
|
|
42
|
+
) })
|
|
43
|
+
);
|
|
44
|
+
expect(toJSON()).toMatchSnapshot();
|
|
45
|
+
});
|
|
46
|
+
});
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import styled, { css } from "styled-components";
|
|
2
|
+
import Text from "../../../../Text";
|
|
3
|
+
import Box from "../../../../Box";
|
|
4
|
+
const StyledBoxContainer = styled(Box)`
|
|
5
|
+
${({ containerWidth }) => css`
|
|
6
|
+
flex-direction: row;
|
|
7
|
+
align-items: center;
|
|
8
|
+
justify-content: flex-end;
|
|
9
|
+
position: relative;
|
|
10
|
+
width: ${containerWidth}px;
|
|
11
|
+
`}
|
|
12
|
+
`;
|
|
13
|
+
const StyledText = styled(Text.Body1)`
|
|
14
|
+
${({
|
|
15
|
+
textWidth,
|
|
16
|
+
theme: {
|
|
17
|
+
yoga: {
|
|
18
|
+
spacing: { medium }
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}) => css`
|
|
22
|
+
position: absolute;
|
|
23
|
+
left: 0;
|
|
24
|
+
padding-right: ${medium};
|
|
25
|
+
flex: 1;
|
|
26
|
+
width: ${textWidth};
|
|
27
|
+
`}
|
|
28
|
+
`;
|
|
29
|
+
export {
|
|
30
|
+
StyledBoxContainer,
|
|
31
|
+
StyledText
|
|
32
|
+
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import React, { isValidElement } from "react";
|
|
2
|
+
import React, { isValidElement, useCallback, useState } from "react";
|
|
3
3
|
import { arrayOf, string, shape, func, bool, node } from "prop-types";
|
|
4
4
|
import Text from "../../../Text";
|
|
5
5
|
import Box from "../../../Box";
|
|
6
6
|
import Attendances from "../Attendances";
|
|
7
|
-
import Badge from "../Badge";
|
|
8
7
|
import { Content, StyledBox } from "./styles";
|
|
8
|
+
import TextWithBadge from "./TextWithBadge";
|
|
9
9
|
const Result = ({
|
|
10
10
|
avatar: Avatar,
|
|
11
11
|
attendances,
|
|
@@ -16,46 +16,42 @@ const Result = ({
|
|
|
16
16
|
children,
|
|
17
17
|
attendancesColor,
|
|
18
18
|
badgeIcon
|
|
19
|
-
}) =>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
attendances,
|
|
26
|
-
rate,
|
|
27
|
-
color: attendancesColor
|
|
19
|
+
}) => {
|
|
20
|
+
const [avatarWidth, setAvatarWidth] = useState(0);
|
|
21
|
+
const onAvatarLayout = useCallback(
|
|
22
|
+
({
|
|
23
|
+
nativeEvent: {
|
|
24
|
+
layout: { width }
|
|
28
25
|
}
|
|
29
|
-
)
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
] });
|
|
26
|
+
}) => {
|
|
27
|
+
setAvatarWidth(width);
|
|
28
|
+
},
|
|
29
|
+
[]
|
|
30
|
+
);
|
|
31
|
+
return /* @__PURE__ */ jsxs(StyledBox, { divided, display: "flex", flexDirection: "row", children: [
|
|
32
|
+
Avatar && /* @__PURE__ */ jsx(Fragment, { children: isValidElement(Avatar) ? React.cloneElement(Avatar, { onLayout: onAvatarLayout }) : /* @__PURE__ */ jsx(Avatar, { onLayout: onAvatarLayout }) }),
|
|
33
|
+
/* @__PURE__ */ jsxs(Content, { children: [
|
|
34
|
+
!!(attendances == null ? void 0 : attendances.length) && /* @__PURE__ */ jsx(
|
|
35
|
+
Attendances,
|
|
36
|
+
{
|
|
37
|
+
attendances,
|
|
38
|
+
rate,
|
|
39
|
+
color: attendancesColor
|
|
40
|
+
}
|
|
41
|
+
),
|
|
42
|
+
badgeIcon ? /* @__PURE__ */ jsx(
|
|
43
|
+
TextWithBadge,
|
|
44
|
+
{
|
|
45
|
+
avatarWidth,
|
|
46
|
+
badgeIcon,
|
|
47
|
+
title
|
|
48
|
+
}
|
|
49
|
+
) : /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text.Body1, { bold: true, numberOfLines: 1, children: title }) }),
|
|
50
|
+
subTitle && subTitle !== "" && /* @__PURE__ */ jsx(Text.Body2, { numberOfLines: 1, color: "deep", children: subTitle }),
|
|
51
|
+
children
|
|
52
|
+
] })
|
|
53
|
+
] });
|
|
54
|
+
};
|
|
59
55
|
Result.propTypes = {
|
|
60
56
|
/** The component Avatar */
|
|
61
57
|
avatar: node.isRequired,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gympass/yoga",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.115.0",
|
|
4
4
|
"description": "Gympass component library",
|
|
5
5
|
"main": "./cjs",
|
|
6
6
|
"types": "./typings/index.d.ts",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"@gympass/yoga-helpers": "^1.1.1",
|
|
31
31
|
"@gympass/yoga-icons": "^1.23.1",
|
|
32
32
|
"@gympass/yoga-illustrations": "^0.7.1",
|
|
33
|
-
"@gympass/yoga-system": "^0.
|
|
33
|
+
"@gympass/yoga-system": "^0.22.0",
|
|
34
34
|
"@gympass/yoga-tokens": "^3.6.1",
|
|
35
35
|
"@ptomasroos/react-native-multi-slider": "^2.1.1",
|
|
36
36
|
"@radix-ui/react-dropdown-menu": "^2.0.1",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"react-native": "0.72.3",
|
|
58
58
|
"styled-components": "^4.4.0"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "24bc7edf0b4e8bcdeeb66c0edb223b8da3f2fd60",
|
|
61
61
|
"module": "./esm",
|
|
62
62
|
"private": false,
|
|
63
63
|
"react-native": "./cjs/index.native.js"
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as styled_components from 'styled-components';
|
|
2
|
+
import React, { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
declare const StyledBoxContainer: styled_components.StyledComponent<string, any, {
|
|
5
|
+
containerWidth?: number | null | undefined;
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
}, never>;
|
|
8
|
+
declare const StyledText: styled_components.StyledComponent<string, any, {
|
|
9
|
+
onLayout: ({ nativeEvent: { layout } }: {
|
|
10
|
+
nativeEvent: {
|
|
11
|
+
layout: any;
|
|
12
|
+
};
|
|
13
|
+
}) => void;
|
|
14
|
+
textWidth?: string | null | undefined;
|
|
15
|
+
numberOfLines: number;
|
|
16
|
+
bold: boolean;
|
|
17
|
+
children: React.ReactNode;
|
|
18
|
+
}, never>;
|
|
19
|
+
|
|
20
|
+
export { StyledBoxContainer, StyledText };
|
|
@@ -9,46 +9,46 @@ declare const v3theme: {
|
|
|
9
9
|
length: number;
|
|
10
10
|
toString(): string;
|
|
11
11
|
toLocaleString(): string;
|
|
12
|
-
pop(): 0 |
|
|
13
|
-
push(...items: (0 |
|
|
14
|
-
concat(...items: ConcatArray<0 |
|
|
15
|
-
concat(...items: (0 |
|
|
12
|
+
pop(): 0 | 1 | 2 | undefined;
|
|
13
|
+
push(...items: (0 | 1 | 2)[]): number;
|
|
14
|
+
concat(...items: ConcatArray<0 | 1 | 2>[]): (0 | 1 | 2)[];
|
|
15
|
+
concat(...items: (0 | 1 | 2 | ConcatArray<0 | 1 | 2>)[]): (0 | 1 | 2)[];
|
|
16
16
|
join(separator?: string | undefined): string;
|
|
17
|
-
reverse(): (0 |
|
|
18
|
-
shift(): 0 |
|
|
19
|
-
slice(start?: number | undefined, end?: number | undefined): (0 |
|
|
20
|
-
sort(compareFn?: ((a: 0 |
|
|
21
|
-
splice(start: number, deleteCount?: number | undefined): (0 |
|
|
22
|
-
splice(start: number, deleteCount: number, ...items: (0 |
|
|
23
|
-
unshift(...items: (0 |
|
|
24
|
-
indexOf(searchElement: 0 |
|
|
25
|
-
lastIndexOf(searchElement: 0 |
|
|
26
|
-
every<S extends 0 |
|
|
27
|
-
every(predicate: (value: 0 |
|
|
28
|
-
some(predicate: (value: 0 |
|
|
29
|
-
forEach(callbackfn: (value: 0 |
|
|
30
|
-
map<U>(callbackfn: (value: 0 |
|
|
31
|
-
filter<S_1 extends 0 |
|
|
32
|
-
filter(predicate: (value: 0 |
|
|
33
|
-
reduce(callbackfn: (previousValue: 0 |
|
|
34
|
-
reduce(callbackfn: (previousValue: 0 |
|
|
35
|
-
reduce<U_1>(callbackfn: (previousValue: U_1, currentValue: 0 |
|
|
36
|
-
reduceRight(callbackfn: (previousValue: 0 |
|
|
37
|
-
reduceRight(callbackfn: (previousValue: 0 |
|
|
38
|
-
reduceRight<U_2>(callbackfn: (previousValue: U_2, currentValue: 0 |
|
|
39
|
-
find<S_2 extends 0 |
|
|
40
|
-
find(predicate: (value: 0 |
|
|
41
|
-
findIndex(predicate: (value: 0 |
|
|
42
|
-
fill(value: 0 |
|
|
43
|
-
copyWithin(target: number, start: number, end?: number | undefined): (0 |
|
|
44
|
-
entries(): IterableIterator<[number, 0 |
|
|
17
|
+
reverse(): (0 | 1 | 2)[];
|
|
18
|
+
shift(): 0 | 1 | 2 | undefined;
|
|
19
|
+
slice(start?: number | undefined, end?: number | undefined): (0 | 1 | 2)[];
|
|
20
|
+
sort(compareFn?: ((a: 0 | 1 | 2, b: 0 | 1 | 2) => number) | undefined): (0 | 1 | 2)[];
|
|
21
|
+
splice(start: number, deleteCount?: number | undefined): (0 | 1 | 2)[];
|
|
22
|
+
splice(start: number, deleteCount: number, ...items: (0 | 1 | 2)[]): (0 | 1 | 2)[];
|
|
23
|
+
unshift(...items: (0 | 1 | 2)[]): number;
|
|
24
|
+
indexOf(searchElement: 0 | 1 | 2, fromIndex?: number | undefined): number;
|
|
25
|
+
lastIndexOf(searchElement: 0 | 1 | 2, fromIndex?: number | undefined): number;
|
|
26
|
+
every<S extends 0 | 1 | 2>(predicate: (value: 0 | 1 | 2, index: number, array: (0 | 1 | 2)[]) => value is S, thisArg?: any): this is S[];
|
|
27
|
+
every(predicate: (value: 0 | 1 | 2, index: number, array: (0 | 1 | 2)[]) => unknown, thisArg?: any): boolean;
|
|
28
|
+
some(predicate: (value: 0 | 1 | 2, index: number, array: (0 | 1 | 2)[]) => unknown, thisArg?: any): boolean;
|
|
29
|
+
forEach(callbackfn: (value: 0 | 1 | 2, index: number, array: (0 | 1 | 2)[]) => void, thisArg?: any): void;
|
|
30
|
+
map<U>(callbackfn: (value: 0 | 1 | 2, index: number, array: (0 | 1 | 2)[]) => U, thisArg?: any): U[];
|
|
31
|
+
filter<S_1 extends 0 | 1 | 2>(predicate: (value: 0 | 1 | 2, index: number, array: (0 | 1 | 2)[]) => value is S_1, thisArg?: any): S_1[];
|
|
32
|
+
filter(predicate: (value: 0 | 1 | 2, index: number, array: (0 | 1 | 2)[]) => unknown, thisArg?: any): (0 | 1 | 2)[];
|
|
33
|
+
reduce(callbackfn: (previousValue: 0 | 1 | 2, currentValue: 0 | 1 | 2, currentIndex: number, array: (0 | 1 | 2)[]) => 0 | 1 | 2): 0 | 1 | 2;
|
|
34
|
+
reduce(callbackfn: (previousValue: 0 | 1 | 2, currentValue: 0 | 1 | 2, currentIndex: number, array: (0 | 1 | 2)[]) => 0 | 1 | 2, initialValue: 0 | 1 | 2): 0 | 1 | 2;
|
|
35
|
+
reduce<U_1>(callbackfn: (previousValue: U_1, currentValue: 0 | 1 | 2, currentIndex: number, array: (0 | 1 | 2)[]) => U_1, initialValue: U_1): U_1;
|
|
36
|
+
reduceRight(callbackfn: (previousValue: 0 | 1 | 2, currentValue: 0 | 1 | 2, currentIndex: number, array: (0 | 1 | 2)[]) => 0 | 1 | 2): 0 | 1 | 2;
|
|
37
|
+
reduceRight(callbackfn: (previousValue: 0 | 1 | 2, currentValue: 0 | 1 | 2, currentIndex: number, array: (0 | 1 | 2)[]) => 0 | 1 | 2, initialValue: 0 | 1 | 2): 0 | 1 | 2;
|
|
38
|
+
reduceRight<U_2>(callbackfn: (previousValue: U_2, currentValue: 0 | 1 | 2, currentIndex: number, array: (0 | 1 | 2)[]) => U_2, initialValue: U_2): U_2;
|
|
39
|
+
find<S_2 extends 0 | 1 | 2>(predicate: (this: void, value: 0 | 1 | 2, index: number, obj: (0 | 1 | 2)[]) => value is S_2, thisArg?: any): S_2 | undefined;
|
|
40
|
+
find(predicate: (value: 0 | 1 | 2, index: number, obj: (0 | 1 | 2)[]) => unknown, thisArg?: any): 0 | 1 | 2 | undefined;
|
|
41
|
+
findIndex(predicate: (value: 0 | 1 | 2, index: number, obj: (0 | 1 | 2)[]) => unknown, thisArg?: any): number;
|
|
42
|
+
fill(value: 0 | 1 | 2, start?: number | undefined, end?: number | undefined): (0 | 1 | 2)[];
|
|
43
|
+
copyWithin(target: number, start: number, end?: number | undefined): (0 | 1 | 2)[];
|
|
44
|
+
entries(): IterableIterator<[number, 0 | 1 | 2]>;
|
|
45
45
|
keys(): IterableIterator<number>;
|
|
46
|
-
values(): IterableIterator<0 |
|
|
47
|
-
includes(searchElement: 0 |
|
|
48
|
-
flatMap<U_3, This = undefined>(callback: (this: This, value: 0 |
|
|
46
|
+
values(): IterableIterator<0 | 1 | 2>;
|
|
47
|
+
includes(searchElement: 0 | 1 | 2, fromIndex?: number | undefined): boolean;
|
|
48
|
+
flatMap<U_3, This = undefined>(callback: (this: This, value: 0 | 1 | 2, index: number, array: (0 | 1 | 2)[]) => U_3 | readonly U_3[], thisArg?: This | undefined): U_3[];
|
|
49
49
|
flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
|
|
50
|
-
at(index: number): 0 |
|
|
51
|
-
[Symbol.iterator](): IterableIterator<0 |
|
|
50
|
+
at(index: number): 0 | 1 | 2 | undefined;
|
|
51
|
+
[Symbol.iterator](): IterableIterator<0 | 1 | 2>;
|
|
52
52
|
[Symbol.unscopables](): {
|
|
53
53
|
copyWithin: boolean;
|
|
54
54
|
entries: boolean;
|