@mvf/external-components 3.6.1-dev.2 → 3.6.1-dev.3

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 (9) hide show
  1. package/Components/Atoms/DynamicFontSizeContainer/DynamicFontSizeContainer.js +51 -22
  2. package/Components/Atoms/DynamicFontSizeContainer/DynamicFontSizeContainer.js.map +1 -1
  3. package/Components/Atoms/DynamicFontSizeContainer/DynamicFontSizeContainer.test.d.ts +1 -0
  4. package/Components/Atoms/DynamicFontSizeContainer/DynamicFontSizeContainer.test.js +19 -0
  5. package/Components/Atoms/DynamicFontSizeContainer/DynamicFontSizeContainer.test.js.map +1 -0
  6. package/Themes/StoryThemeWrapper.js +0 -1
  7. package/Themes/StoryThemeWrapper.js.map +1 -1
  8. package/Themes/themes.d.ts +1 -1
  9. package/package.json +1 -1
package/Components/Atoms/DynamicFontSizeContainer/DynamicFontSizeContainer.js CHANGED
@@ -18,35 +18,64 @@ var DynamicFontSizeContainer = function (_a) {
18
18
  var containerRef = (0, react_1.useRef)(null);
19
19
  var textRef = (0, react_1.useRef)(null);
20
20
  var _b = (0, react_1.useState)(possibleFontSizes[0]), fontSize = _b[0], setFontSize = _b[1]; // Initial font size
21
- (0, react_1.useEffect)(function () {
22
- var resizeText = function () {
23
- if (containerRef.current && textRef.current) {
24
- var containerWidth = containerRef.current.offsetWidth;
25
- var low = 0;
26
- var high = possibleFontSizes.length - 1;
27
- var newFontSize = possibleFontSizes[0];
28
- while (low <= high) {
29
- var mid = Math.floor((low + high) / 2);
30
- textRef.current.style.fontSize = "".concat(possibleFontSizes[mid], "px");
31
- var textWidth = textRef.current.offsetWidth;
32
- if (textWidth > containerWidth) {
33
- high = mid - 1;
34
- }
35
- else {
36
- newFontSize = possibleFontSizes[mid];
37
- low = mid + 1;
38
- }
21
+ var _c = (0, react_1.useState)(false), allowWrap = _c[0], setAllowWrap = _c[1];
22
+ var _d = (0, react_1.useState)(false), isAtMinFontSize = _d[0], setIsAtMinFontSize = _d[1];
23
+ var resizeText = function () {
24
+ if (containerRef.current && textRef.current) {
25
+ var containerWidth = containerRef.current.offsetWidth;
26
+ var low = 0;
27
+ var high = possibleFontSizes.length - 1;
28
+ var newFontSize = possibleFontSizes[0];
29
+ while (low <= high) {
30
+ var mid = Math.floor((low + high) / 2);
31
+ textRef.current.style.fontSize = "".concat(possibleFontSizes[mid], "px");
32
+ var textWidth = textRef.current.offsetWidth;
33
+ if (textWidth > containerWidth) {
34
+ high = mid - 1;
35
+ }
36
+ else {
37
+ newFontSize = possibleFontSizes[mid];
38
+ low = mid + 1;
39
39
  }
40
- setFontSize(newFontSize);
41
40
  }
42
- };
41
+ if (newFontSize === possibleFontSizes[0]) {
42
+ setAllowWrap(true);
43
+ setIsAtMinFontSize(true);
44
+ }
45
+ else {
46
+ setAllowWrap(false);
47
+ setIsAtMinFontSize(false);
48
+ }
49
+ setFontSize(newFontSize);
50
+ }
51
+ };
52
+ (0, react_1.useEffect)(function () {
53
+ // Reset state when the text changes
54
+ setIsAtMinFontSize(false);
55
+ setAllowWrap(false);
43
56
  resizeText();
57
+ }, [text, possibleFontSizes]);
58
+ (0, react_1.useEffect)(function () {
59
+ if (!isAtMinFontSize) {
60
+ resizeText();
61
+ }
44
62
  window.addEventListener('resize', resizeText);
45
63
  return function () {
46
64
  window.removeEventListener('resize', resizeText);
47
65
  };
48
- }, [text, possibleFontSizes]);
49
- return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: containerRef, style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ ref: textRef, style: { fontSize: "".concat(fontSize, "px"), whiteSpace: 'nowrap' } }, { children: text })) })));
66
+ }, [isAtMinFontSize]);
67
+ return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: containerRef, style: {
68
+ width: '100%',
69
+ height: '100%',
70
+ display: 'flex',
71
+ alignItems: 'center',
72
+ justifyContent: 'center',
73
+ overflow: 'visible',
74
+ } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ ref: textRef, style: {
75
+ fontSize: "".concat(fontSize, "px"),
76
+ whiteSpace: allowWrap ? 'normal' : 'nowrap',
77
+ textAlign: 'center',
78
+ } }, { children: text })) })));
50
79
  };
51
80
  exports.default = DynamicFontSizeContainer;
52
81
  //# sourceMappingURL=DynamicFontSizeContainer.js.map
package/Components/Atoms/DynamicFontSizeContainer/DynamicFontSizeContainer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DynamicFontSizeContainer.js","sourceRoot":"","sources":["../../../../src/Components/Atoms/DynamicFontSizeContainer/DynamicFontSizeContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,+BAA2D;AAO3D,IAAM,wBAAwB,GAA4C,UAAC,EAA2B;QAAzB,IAAI,UAAA,EAAE,iBAAiB,uBAAA;IAClG,IAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAClD,IAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACvC,IAAA,KAA0B,IAAA,gBAAQ,EAAS,iBAAiB,CAAC,CAAC,CAAC,CAAC,EAA/D,QAAQ,QAAA,EAAE,WAAW,QAA0C,CAAC,CAAC,oBAAoB;IAE5F,IAAA,iBAAS,EAAC;QACR,IAAM,UAAU,GAAG;YACjB,IAAI,YAAY,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE;gBAC3C,IAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC;gBAExD,IAAI,GAAG,GAAG,CAAC,CAAC;gBACZ,IAAI,IAAI,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;gBACxC,IAAI,WAAW,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;gBAEvC,OAAO,GAAG,IAAI,IAAI,EAAE;oBAClB,IAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;oBACzC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAG,iBAAiB,CAAC,GAAG,CAAC,OAAI,CAAC;oBAC/D,IAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC;oBAE9C,IAAI,SAAS,GAAG,cAAc,EAAE;wBAC9B,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC;qBAChB;yBAAM;wBACL,WAAW,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC;wBACrC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC;qBACf;iBACF;gBAED,WAAW,CAAC,WAAW,CAAC,CAAC;aAC1B;QACH,CAAC,CAAC;QAEF,UAAU,EAAE,CAAC;QACb,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QAE9C,OAAO;YACL,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QACnD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE9B,OAAO,CACL,yCAAK,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBACnJ,yCAAK,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAG,QAAQ,OAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,gBAAG,IAAI,IAAO,IACvF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,wBAAwB,CAAC"}
1
+ {"version":3,"file":"DynamicFontSizeContainer.js","sourceRoot":"","sources":["../../../../src/Components/Atoms/DynamicFontSizeContainer/DynamicFontSizeContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,+BAA2D;AAO3D,IAAM,wBAAwB,GAA4C,UAAC,EAG1E;QAFC,IAAI,UAAA,EACJ,iBAAiB,uBAAA;IAEjB,IAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAClD,IAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACvC,IAAA,KAA0B,IAAA,gBAAQ,EAAS,iBAAiB,CAAC,CAAC,CAAC,CAAC,EAA/D,QAAQ,QAAA,EAAE,WAAW,QAA0C,CAAC,CAAC,oBAAoB;IACtF,IAAA,KAA4B,IAAA,gBAAQ,EAAU,KAAK,CAAC,EAAnD,SAAS,QAAA,EAAE,YAAY,QAA4B,CAAC;IACrD,IAAA,KAAwC,IAAA,gBAAQ,EAAU,KAAK,CAAC,EAA/D,eAAe,QAAA,EAAE,kBAAkB,QAA4B,CAAC;IAEvE,IAAM,UAAU,GAAG;QACjB,IAAI,YAAY,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE;YAC3C,IAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC;YACxD,IAAI,GAAG,GAAG,CAAC,CAAC;YACZ,IAAI,IAAI,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;YACxC,IAAI,WAAW,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;YAEvC,OAAO,GAAG,IAAI,IAAI,EAAE;gBAClB,IAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;gBACzC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAG,iBAAiB,CAAC,GAAG,CAAC,OAAI,CAAC;gBAC/D,IAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC;gBAE9C,IAAI,SAAS,GAAG,cAAc,EAAE;oBAC9B,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC;iBAChB;qBAAM;oBACL,WAAW,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC;oBACrC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC;iBACf;aACF;YAED,IAAI,WAAW,KAAK,iBAAiB,CAAC,CAAC,CAAC,EAAE;gBACxC,YAAY,CAAC,IAAI,CAAC,CAAC;gBACnB,kBAAkB,CAAC,IAAI,CAAC,CAAC;aAC1B;iBAAM;gBACL,YAAY,CAAC,KAAK,CAAC,CAAC;gBACpB,kBAAkB,CAAC,KAAK,CAAC,CAAC;aAC3B;YAED,WAAW,CAAC,WAAW,CAAC,CAAC;SAC1B;IACH,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC;QACR,oCAAoC;QACpC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC1B,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,UAAU,EAAE,CAAC;IACf,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE9B,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,eAAe,EAAE;YACpB,UAAU,EAAE,CAAC;SACd;QAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QAE9C,OAAO;YACL,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QACnD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,yCACE,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,QAAQ,EAAE,SAAS;SACpB,gBAED,yCACE,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAG,QAAQ,OAAI;gBACzB,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;gBAC3C,SAAS,EAAE,QAAQ;aACpB,gBAEA,IAAI,IACD,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,wBAAwB,CAAC"}
package/Components/Atoms/DynamicFontSizeContainer/DynamicFontSizeContainer.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ import '@testing-library/jest-dom/extend-expect';
package/Components/Atoms/DynamicFontSizeContainer/DynamicFontSizeContainer.test.js ADDED
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
7
+ /** @jsxImportSource @emotion/react */
8
+ var react_1 = require("@testing-library/react");
9
+ require("@testing-library/jest-dom/extend-expect");
10
+ var DynamicFontSizeContainer_1 = __importDefault(require("./DynamicFontSizeContainer"));
11
+ describe('DynamicFontSizeContainer', function () {
12
+ var possibleFontSizes = [10, 20, 30, 40];
13
+ test('renders without crashing', function () {
14
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(DynamicFontSizeContainer_1.default, { text: "This is a test text", possibleFontSizes: possibleFontSizes }));
15
+ var textElement = react_1.screen.getByText('This is a test text');
16
+ expect(textElement).toBeInTheDocument();
17
+ });
18
+ });
19
+ //# sourceMappingURL=DynamicFontSizeContainer.test.js.map
package/Components/Atoms/DynamicFontSizeContainer/DynamicFontSizeContainer.test.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DynamicFontSizeContainer.test.js","sourceRoot":"","sources":["../../../../src/Components/Atoms/DynamicFontSizeContainer/DynamicFontSizeContainer.test.tsx"],"names":[],"mappings":";;;;;;AAAA,sCAAsC;AACtC,gDAAwD;AACxD,mDAAiD;AACjD,wFAAkE;AAElE,QAAQ,CAAC,0BAA0B,EAAE;IACnC,IAAM,iBAAiB,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAE3C,IAAI,CAAC,0BAA0B,EAAE;QAC/B,IAAA,cAAM,EACJ,uBAAC,kCAAwB,IACvB,IAAI,EAAC,qBAAqB,EAC1B,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CAAC;QAEF,IAAM,WAAW,GAAG,cAAM,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC;QAC5D,MAAM,CAAC,WAAW,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
package/Themes/StoryThemeWrapper.js CHANGED
@@ -16,7 +16,6 @@ var react_1 = require("@emotion/react");
16
16
  var themes_1 = require("./themes");
17
17
  var StoryThemeWrapper = function (_a) {
18
18
  var children = _a.children, themeType = _a.themeType, _b = _a.fontMultiplier, fontMultiplier = _b === void 0 ? 1 : _b;
19
- // const theme = themes[themeType];
20
19
  var theme = (0, themes_1.getThemeWithFontMultiplier)(themeType, fontMultiplier);
21
20
  return (0, jsx_runtime_1.jsx)(react_1.ThemeProvider, __assign({ theme: theme }, { children: children }));
22
21
  };
package/Themes/StoryThemeWrapper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StoryThemeWrapper.js","sourceRoot":"","sources":["../../src/Themes/StoryThemeWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AACA,wCAA+C;AAC/C,mCAA+D;AAQ/D,IAAM,iBAAiB,GAA0B,UAAC,EAIjD;QAHC,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,sBAAkB,EAAlB,cAAc,mBAAG,CAAC,KAAA;IAElB,mCAAmC;IACnC,IAAM,KAAK,GAAG,IAAA,mCAA0B,EAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAEpE,OAAO,uBAAC,qBAAa,aAAC,KAAK,EAAE,KAAK,gBAAG,QAAQ,IAAiB,CAAC;AACjE,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC"}
1
+ {"version":3,"file":"StoryThemeWrapper.js","sourceRoot":"","sources":["../../src/Themes/StoryThemeWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AACA,wCAA+C;AAC/C,mCAA+D;AAQ/D,IAAM,iBAAiB,GAA0B,UAAC,EAIjD;QAHC,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,sBAAkB,EAAlB,cAAc,mBAAG,CAAC,KAAA;IAElB,IAAM,KAAK,GAAG,IAAA,mCAA0B,EAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAEpE,OAAO,uBAAC,qBAAa,aAAC,KAAK,EAAE,KAAK,gBAAG,QAAQ,IAAiB,CAAC;AACjE,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC"}
package/Themes/themes.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { customTheme } from "./themeCreator";
1
+ import { customTheme } from './themeCreator';
2
2
  declare const themes: {
3
3
  atlantic: import("@mui/material").Theme & {
4
4
  mvf: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mvf/external-components",
3
- "version": "3.6.1-dev.2",
3
+ "version": "3.6.1-dev.3",
4
4
  "license": "UNLICENSED",
5
5
  "scripts": {
6
6
  "dev": "scripts/up.sh",