@gympass/yoga 7.115.2 → 7.115.4

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.
Files changed (10) hide show
  1. package/cjs/Avatar/native/Avatar.js +2 -5
  2. package/cjs/Result/native/Result/TextWithBadge/index.js +3 -40
  3. package/cjs/Result/native/Result/TextWithBadge/styles.js +3 -21
  4. package/cjs/Result/native/Result/index.js +2 -20
  5. package/esm/Avatar/native/Avatar.js +2 -5
  6. package/esm/Result/native/Result/TextWithBadge/index.js +3 -40
  7. package/esm/Result/native/Result/TextWithBadge/styles.js +4 -22
  8. package/esm/Result/native/Result/index.js +4 -22
  9. package/package.json +3 -3
  10. package/typings/Result/native/Result/TextWithBadge/styles.d.ts +2 -11
package/cjs/Avatar/native/Avatar.js CHANGED
@@ -99,8 +99,7 @@ const Avatar = (0, import_react.forwardRef)(
99
99
  stroke,
100
100
  borderRadius,
101
101
  width,
102
- height,
103
- onLayout
102
+ height
104
103
  } = _b, props = __objRest(_b, [
105
104
  "icon",
106
105
  "src",
@@ -109,8 +108,7 @@ const Avatar = (0, import_react.forwardRef)(
109
108
  "stroke",
110
109
  "borderRadius",
111
110
  "width",
112
- "height",
113
- "onLayout"
111
+ "height"
114
112
  ]);
115
113
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
116
114
  import_Box.default,
@@ -122,7 +120,6 @@ const Avatar = (0, import_react.forwardRef)(
122
120
  justifyContent: "center",
123
121
  width,
124
122
  height,
125
- onLayout,
126
123
  overflow: "hidden",
127
124
  borderRadius
128
125
  }, props), {
package/cjs/Result/native/Result/TextWithBadge/index.js CHANGED
@@ -32,48 +32,11 @@ __export(TextWithBadge_exports, {
32
32
  });
33
33
  module.exports = __toCommonJS(TextWithBadge_exports);
34
34
  var import_jsx_runtime = require("react/jsx-runtime");
35
- var import_react = require("react");
36
- var import_react_native = require("react-native");
37
35
  var import_Badge = __toESM(require("../../Badge"));
38
36
  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
- if (textSize === 0) {
61
- setTextSize(width);
62
- }
63
- },
64
- [textSize]
65
- );
66
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledBoxContainer, { containerWidth, children: [
67
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
68
- import_styles.StyledText,
69
- {
70
- onLayout: onTextLayout,
71
- bold: true,
72
- numberOfLines: 1,
73
- textWidth,
74
- children: title
75
- }
76
- ),
37
+ const TextWithBadge = ({ badgeIcon, title }) => {
38
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledBoxContainer, { children: [
39
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledText, { bold: true, numberOfLines: 1, children: title }),
77
40
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
78
41
  import_Badge.default,
79
42
  {
package/cjs/Result/native/Result/TextWithBadge/styles.js CHANGED
@@ -36,29 +36,11 @@ var import_styled_components = __toESM(require("styled-components"));
36
36
  var import_Text = __toESM(require("../../../../Text"));
37
37
  var import_Box = __toESM(require("../../../../Box"));
38
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
- `}
39
+ flex-direction: row;
40
+ align-items: center;
46
41
  `;
47
42
  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
- `}
43
+ flex-shrink: 1;
62
44
  `;
63
45
  // Annotate the CommonJS export names for ESM import in node:
64
46
  0 && (module.exports = {
package/cjs/Result/native/Result/index.js CHANGED
@@ -50,19 +50,8 @@ const Result = ({
50
50
  attendancesColor,
51
51
  badgeIcon
52
52
  }) => {
53
- const [avatarWidth, setAvatarWidth] = (0, import_react.useState)(0);
54
- const onAvatarLayout = (0, import_react.useCallback)(
55
- ({
56
- nativeEvent: {
57
- layout: { width }
58
- }
59
- }) => {
60
- setAvatarWidth(width);
61
- },
62
- []
63
- );
64
53
  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 }) }),
54
+ Avatar && (0, import_react.isValidElement)(Avatar) ? Avatar : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Avatar, {}),
66
55
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Content, { children: [
67
56
  !!(attendances == null ? void 0 : attendances.length) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
68
57
  import_Attendances.default,
@@ -72,14 +61,7 @@ const Result = ({
72
61
  color: attendancesColor
73
62
  }
74
63
  ),
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 }) }),
64
+ badgeIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextWithBadge.default, { badgeIcon, title }) : /* @__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
65
  subTitle && subTitle !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Body2, { numberOfLines: 1, color: "deep", children: subTitle }),
84
66
  children
85
67
  ] })
package/esm/Avatar/native/Avatar.js CHANGED
@@ -68,8 +68,7 @@ const Avatar = forwardRef(
68
68
  stroke,
69
69
  borderRadius,
70
70
  width,
71
- height,
72
- onLayout
71
+ height
73
72
  } = _b, props = __objRest(_b, [
74
73
  "icon",
75
74
  "src",
@@ -78,8 +77,7 @@ const Avatar = forwardRef(
78
77
  "stroke",
79
78
  "borderRadius",
80
79
  "width",
81
- "height",
82
- "onLayout"
80
+ "height"
83
81
  ]);
84
82
  return /* @__PURE__ */ jsxs(
85
83
  Box,
@@ -91,7 +89,6 @@ const Avatar = forwardRef(
91
89
  justifyContent: "center",
92
90
  width,
93
91
  height,
94
- onLayout,
95
92
  overflow: "hidden",
96
93
  borderRadius
97
94
  }, props), {
package/esm/Result/native/Result/TextWithBadge/index.js CHANGED
@@ -1,46 +1,9 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useCallback, useState } from "react";
3
- import { useWindowDimensions } from "react-native";
4
2
  import Badge from "../../Badge";
5
3
  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
- if (textSize === 0) {
28
- setTextSize(width);
29
- }
30
- },
31
- [textSize]
32
- );
33
- return /* @__PURE__ */ jsxs(StyledBoxContainer, { containerWidth, children: [
34
- /* @__PURE__ */ jsx(
35
- StyledText,
36
- {
37
- onLayout: onTextLayout,
38
- bold: true,
39
- numberOfLines: 1,
40
- textWidth,
41
- children: title
42
- }
43
- ),
4
+ const TextWithBadge = ({ badgeIcon, title }) => {
5
+ return /* @__PURE__ */ jsxs(StyledBoxContainer, { children: [
6
+ /* @__PURE__ */ jsx(StyledText, { bold: true, numberOfLines: 1, children: title }),
44
7
  /* @__PURE__ */ jsx(
45
8
  Badge,
46
9
  {
package/esm/Result/native/Result/TextWithBadge/styles.js CHANGED
@@ -1,30 +1,12 @@
1
- import styled, { css } from "styled-components";
1
+ import styled from "styled-components";
2
2
  import Text from "../../../../Text";
3
3
  import Box from "../../../../Box";
4
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
- `}
5
+ flex-direction: row;
6
+ align-items: center;
12
7
  `;
13
8
  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
- `}
9
+ flex-shrink: 1;
28
10
  `;
29
11
  export {
30
12
  StyledBoxContainer,
package/esm/Result/native/Result/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import React, { isValidElement, useCallback, useState } from "react";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import React, { isValidElement } 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";
@@ -17,19 +17,8 @@ const Result = ({
17
17
  attendancesColor,
18
18
  badgeIcon
19
19
  }) => {
20
- const [avatarWidth, setAvatarWidth] = useState(0);
21
- const onAvatarLayout = useCallback(
22
- ({
23
- nativeEvent: {
24
- layout: { width }
25
- }
26
- }) => {
27
- setAvatarWidth(width);
28
- },
29
- []
30
- );
31
20
  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 }) }),
21
+ Avatar && isValidElement(Avatar) ? Avatar : /* @__PURE__ */ jsx(Avatar, {}),
33
22
  /* @__PURE__ */ jsxs(Content, { children: [
34
23
  !!(attendances == null ? void 0 : attendances.length) && /* @__PURE__ */ jsx(
35
24
  Attendances,
@@ -39,14 +28,7 @@ const Result = ({
39
28
  color: attendancesColor
40
29
  }
41
30
  ),
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 }) }),
31
+ badgeIcon ? /* @__PURE__ */ jsx(TextWithBadge, { badgeIcon, title }) : /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text.Body1, { bold: true, numberOfLines: 1, children: title }) }),
50
32
  subTitle && subTitle !== "" && /* @__PURE__ */ jsx(Text.Body2, { numberOfLines: 1, color: "deep", children: subTitle }),
51
33
  children
52
34
  ] })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.115.2",
3
+ "version": "7.115.4",
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.23.0",
33
+ "@gympass/yoga-system": "^0.23.1",
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": "dfce30096c68481b32684c23b150f2480e89bb9a",
60
+ "gitHead": "7b9f4314f513a5f0e7d0fbbad074eaa60453b0c7",
61
61
  "module": "./esm",
62
62
  "private": false,
63
63
  "react-native": "./cjs/index.native.js"
package/typings/Result/native/Result/TextWithBadge/styles.d.ts CHANGED
@@ -1,17 +1,8 @@
1
1
  import * as styled_components from 'styled-components';
2
- import React, { ReactNode } from 'react';
2
+ import React from 'react';
3
3
 
4
- declare const StyledBoxContainer: styled_components.StyledComponent<string, any, {
5
- containerWidth?: number | null | undefined;
6
- children: ReactNode;
7
- }, never>;
4
+ declare const StyledBoxContainer: styled_components.StyledComponent<string, any, {}, never>;
8
5
  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
6
  numberOfLines: number;
16
7
  bold: boolean;
17
8
  children: React.ReactNode;