@elliemae/ds-hooks-fontsize-detector 3.37.0-rc.4 → 3.37.0-rc.6
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/cjs/DSHooksFontsizeDetector.js +4 -3
- package/dist/cjs/DSHooksFontsizeDetector.js.map +2 -2
- package/dist/cjs/utils.js +53 -0
- package/dist/cjs/utils.js.map +7 -0
- package/dist/esm/DSHooksFontsizeDetector.js +2 -1
- package/dist/esm/DSHooksFontsizeDetector.js.map +2 -2
- package/dist/esm/utils.js +23 -0
- package/dist/esm/utils.js.map +7 -0
- package/dist/types/utils.d.ts +9 -0
- package/package.json +3 -4
|
@@ -34,7 +34,8 @@ module.exports = __toCommonJS(DSHooksFontsizeDetector_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = __toESM(require("react"));
|
|
37
|
-
var
|
|
37
|
+
var import_utils = require("./utils.js");
|
|
38
|
+
var import_lodash = require("lodash");
|
|
38
39
|
var import_constants = require("./constants/index.js");
|
|
39
40
|
const FontDetectorElement = import_react.default.memo(() => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
40
41
|
"p",
|
|
@@ -75,7 +76,7 @@ const useFontSizeDetector = () => {
|
|
|
75
76
|
const fontHeight = useResizeObserver(ref);
|
|
76
77
|
(0, import_react.useEffect)(() => {
|
|
77
78
|
const retrieveElement = async () => {
|
|
78
|
-
const elementAppended = await (0,
|
|
79
|
+
const elementAppended = await (0, import_utils.appendComponentIfNotExist)({
|
|
79
80
|
Component: FontDetectorElement,
|
|
80
81
|
uidSelector: import_constants.FONT_DETECTOR_UID,
|
|
81
82
|
tagName: "font-size"
|
|
@@ -87,7 +88,7 @@ const useFontSizeDetector = () => {
|
|
|
87
88
|
}, []);
|
|
88
89
|
const ratio = (0, import_react.useMemo)(() => Math.floor(parentWidth / (fontHeight || 1)), [fontHeight, parentWidth]);
|
|
89
90
|
const viewPortChange = (0, import_react.useCallback)(
|
|
90
|
-
(0,
|
|
91
|
+
(0, import_lodash.debounce)(() => {
|
|
91
92
|
setParentWidth(document.documentElement.clientWidth);
|
|
92
93
|
}, 200),
|
|
93
94
|
[]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSHooksFontsizeDetector.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { appendComponentIfNotExist } from './utils.js';\nimport { debounce } from 'lodash';\nimport { FONT_DETECTOR_UID, BREAKPOINTS } from './constants/index.js';\nimport { type DSHooksFontsizeDetectorT } from './react-desc-prop-types.js';\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst FontDetectorElement = React.memo(() => (\n <p\n aria-hidden=\"true\"\n id={FONT_DETECTOR_UID}\n data-testid={FONT_DETECTOR_UID}\n style={{\n margin: 0,\n color: 'transparent',\n position: 'absolute',\n }}\n >\n \n </p>\n));\n\nconst useResizeObserver = (ref: HTMLElement | null): number => {\n const [dimensions, setDimensions] = React.useState<number>(0);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n entries.forEach((entry) => {\n setDimensions(Math.ceil(entry.contentRect.height));\n });\n });\n if (ref) {\n resizeObserver.observe(ref);\n }\n\n return () => {\n if (ref) {\n resizeObserver.unobserve(ref);\n }\n };\n }, [ref]);\n return dimensions;\n};\n\nconst useFontSizeDetector = (): DSHooksFontsizeDetectorT.UseFontSizeDetectorT => {\n const [ref, setRef] = useState<HTMLElement | null>(null);\n const [parentWidth, setParentWidth] = useState<number>(document.documentElement.clientWidth);\n const fontHeight = useResizeObserver(ref);\n\n useEffect(() => {\n const retrieveElement = async () => {\n const elementAppended = await appendComponentIfNotExist({\n Component: FontDetectorElement,\n uidSelector: FONT_DETECTOR_UID,\n tagName: 'font-size',\n });\n setRef(elementAppended);\n };\n retrieveElement().catch(() => {});\n }, []);\n\n const ratio = useMemo(() => Math.floor(parentWidth / (fontHeight || 1)), [fontHeight, parentWidth]);\n\n const viewPortChange = useCallback(\n debounce(() => {\n setParentWidth(document.documentElement.clientWidth);\n }, 200),\n [],\n );\n\n useEffect(() => {\n window.addEventListener('resize', viewPortChange);\n return () => {\n window.removeEventListener('resize', viewPortChange);\n };\n }, [viewPortChange]);\n return {\n ratio,\n fontHeight,\n documentWidthRatio: parentWidth,\n isLarge: ratio <= BREAKPOINTS.large,\n isMedium: ratio > BREAKPOINTS.large && ratio <= BREAKPOINTS.medimum,\n isSmall: ratio > BREAKPOINTS.small,\n };\n};\n\nexport { useFontSizeDetector };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUrB;AATF,mBAAiE;AACjE,mBAA0C;AAC1C,oBAAyB;AACzB,uBAA+C;AAK/C,MAAM,sBAAsB,aAAAA,QAAM,KAAK,MACrC;AAAA,EAAC;AAAA;AAAA,IACC,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,eAAa;AAAA,IACb,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACD;AAAA;AAED,CACD;AAED,MAAM,oBAAoB,CAAC,QAAoC;AAC7D,QAAM,CAAC,YAAY,aAAa,IAAI,aAAAA,QAAM,SAAiB,CAAC;AAE5D,8BAAU,MAAM;AACd,UAAM,iBAAiB,IAAI,eAAe,CAAC,YAA8C;AACvF,cAAQ,QAAQ,CAAC,UAAU;AACzB,sBAAc,KAAK,KAAK,MAAM,YAAY,MAAM,CAAC;AAAA,MACnD,CAAC;AAAA,IACH,CAAC;AACD,QAAI,KAAK;AACP,qBAAe,QAAQ,GAAG;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,UAAI,KAAK;AACP,uBAAe,UAAU,GAAG;AAAA,MAC9B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,SAAO;AACT;AAEA,MAAM,sBAAsB,MAAqD;AAC/E,QAAM,CAAC,KAAK,MAAM,QAAI,uBAA6B,IAAI;AACvD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAiB,SAAS,gBAAgB,WAAW;AAC3F,QAAM,aAAa,kBAAkB,GAAG;AAExC,8BAAU,MAAM;AACd,UAAM,kBAAkB,YAAY;AAClC,YAAM,kBAAkB,UAAM,wCAA0B;AAAA,QACtD,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,MACX,CAAC;AACD,aAAO,eAAe;AAAA,IACxB;AACA,oBAAgB,EAAE,MAAM,MAAM;AAAA,IAAC,CAAC;AAAA,EAClC,GAAG,CAAC,CAAC;AAEL,QAAM,YAAQ,sBAAQ,MAAM,KAAK,MAAM,eAAe,cAAc,EAAE,GAAG,CAAC,YAAY,WAAW,CAAC;AAElG,QAAM,qBAAiB;AAAA,QACrB,wBAAS,MAAM;AACb,qBAAe,SAAS,gBAAgB,WAAW;AAAA,IACrD,GAAG,GAAG;AAAA,IACN,CAAC;AAAA,EACH;AAEA,8BAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,cAAc;AAChD,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,cAAc;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AACnB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,SAAS,SAAS,6BAAY;AAAA,IAC9B,UAAU,QAAQ,6BAAY,SAAS,SAAS,6BAAY;AAAA,IAC5D,SAAS,QAAQ,6BAAY;AAAA,EAC/B;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,53 @@
|
|
|
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 utils_exports = {};
|
|
30
|
+
__export(utils_exports, {
|
|
31
|
+
appendComponentIfNotExist: () => appendComponentIfNotExist
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(utils_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
+
var import_react_dom = require("react-dom");
|
|
37
|
+
const appendComponentIfNotExist = async (props) => {
|
|
38
|
+
const { Component, parentVisibility = "hidden", uidSelector, tagName = "span" } = props;
|
|
39
|
+
const elementAttached = document.getElementById(uidSelector);
|
|
40
|
+
if (elementAttached) return elementAttached;
|
|
41
|
+
const rootElement = document.createElement(tagName);
|
|
42
|
+
rootElement.style.visibility = parentVisibility;
|
|
43
|
+
rootElement.style.position = "absolute";
|
|
44
|
+
rootElement.style.top = "0";
|
|
45
|
+
const element = await new Promise((resolve) => {
|
|
46
|
+
(0, import_react_dom.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}), document.body.appendChild(rootElement));
|
|
47
|
+
requestAnimationFrame(() => {
|
|
48
|
+
resolve(document.getElementById(uidSelector));
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
return element;
|
|
52
|
+
};
|
|
53
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { render } from 'react-dom';\n\ninterface AppendComponentIfNotExistConfigT {\n Component: React.FC;\n parentVisibility?: string;\n uidSelector: string;\n tagName: string;\n}\n\n// appendComponentIfNotExist is a function that appends a component to the DOM if it does not exist\n// it returns the element appended\n//\nexport const appendComponentIfNotExist = async (props: AppendComponentIfNotExistConfigT) => {\n const { Component, parentVisibility = 'hidden', uidSelector, tagName = 'span' } = props;\n\n // if elementAttached exists we return it\n const elementAttached = document.getElementById(uidSelector);\n if (elementAttached) return elementAttached;\n const rootElement = document.createElement(tagName);\n rootElement.style.visibility = parentVisibility;\n // we set the rootElement to be absolute and on top to avoid adding scrollbars\n rootElement.style.position = 'absolute';\n rootElement.style.top = '0';\n // we wait for the component to be rendered and then we return the element appended\n const element = await new Promise<HTMLElement>((resolve) => {\n render(<Component />, document.body.appendChild(rootElement));\n requestAnimationFrame(() => {\n resolve(document.getElementById(uidSelector) as HTMLElement);\n });\n });\n return element;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBZ;AAzBX,uBAAuB;AAYhB,MAAM,4BAA4B,OAAO,UAA4C;AAC1F,QAAM,EAAE,WAAW,mBAAmB,UAAU,aAAa,UAAU,OAAO,IAAI;AAGlF,QAAM,kBAAkB,SAAS,eAAe,WAAW;AAC3D,MAAI,gBAAiB,QAAO;AAC5B,QAAM,cAAc,SAAS,cAAc,OAAO;AAClD,cAAY,MAAM,aAAa;AAE/B,cAAY,MAAM,WAAW;AAC7B,cAAY,MAAM,MAAM;AAExB,QAAM,UAAU,MAAM,IAAI,QAAqB,CAAC,YAAY;AAC1D,iCAAO,4CAAC,aAAU,GAAI,SAAS,KAAK,YAAY,WAAW,CAAC;AAC5D,0BAAsB,MAAM;AAC1B,cAAQ,SAAS,eAAe,WAAW,CAAgB;AAAA,IAC7D,CAAC;AAAA,EACH,CAAC;AACD,SAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import React2, { useState, useEffect, useMemo, useCallback } from "react";
|
|
4
|
-
import { appendComponentIfNotExist
|
|
4
|
+
import { appendComponentIfNotExist } from "./utils.js";
|
|
5
|
+
import { debounce } from "lodash";
|
|
5
6
|
import { FONT_DETECTOR_UID, BREAKPOINTS } from "./constants/index.js";
|
|
6
7
|
const FontDetectorElement = React2.memo(() => /* @__PURE__ */ jsx(
|
|
7
8
|
"p",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSHooksFontsizeDetector.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { appendComponentIfNotExist } from './utils.js';\nimport { debounce } from 'lodash';\nimport { FONT_DETECTOR_UID, BREAKPOINTS } from './constants/index.js';\nimport { type DSHooksFontsizeDetectorT } from './react-desc-prop-types.js';\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst FontDetectorElement = React.memo(() => (\n <p\n aria-hidden=\"true\"\n id={FONT_DETECTOR_UID}\n data-testid={FONT_DETECTOR_UID}\n style={{\n margin: 0,\n color: 'transparent',\n position: 'absolute',\n }}\n >\n \n </p>\n));\n\nconst useResizeObserver = (ref: HTMLElement | null): number => {\n const [dimensions, setDimensions] = React.useState<number>(0);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n entries.forEach((entry) => {\n setDimensions(Math.ceil(entry.contentRect.height));\n });\n });\n if (ref) {\n resizeObserver.observe(ref);\n }\n\n return () => {\n if (ref) {\n resizeObserver.unobserve(ref);\n }\n };\n }, [ref]);\n return dimensions;\n};\n\nconst useFontSizeDetector = (): DSHooksFontsizeDetectorT.UseFontSizeDetectorT => {\n const [ref, setRef] = useState<HTMLElement | null>(null);\n const [parentWidth, setParentWidth] = useState<number>(document.documentElement.clientWidth);\n const fontHeight = useResizeObserver(ref);\n\n useEffect(() => {\n const retrieveElement = async () => {\n const elementAppended = await appendComponentIfNotExist({\n Component: FontDetectorElement,\n uidSelector: FONT_DETECTOR_UID,\n tagName: 'font-size',\n });\n setRef(elementAppended);\n };\n retrieveElement().catch(() => {});\n }, []);\n\n const ratio = useMemo(() => Math.floor(parentWidth / (fontHeight || 1)), [fontHeight, parentWidth]);\n\n const viewPortChange = useCallback(\n debounce(() => {\n setParentWidth(document.documentElement.clientWidth);\n }, 200),\n [],\n );\n\n useEffect(() => {\n window.addEventListener('resize', viewPortChange);\n return () => {\n window.removeEventListener('resize', viewPortChange);\n };\n }, [viewPortChange]);\n return {\n ratio,\n fontHeight,\n documentWidthRatio: parentWidth,\n isLarge: ratio <= BREAKPOINTS.large,\n isMedium: ratio > BREAKPOINTS.large && ratio <= BREAKPOINTS.medimum,\n isSmall: ratio > BREAKPOINTS.small,\n };\n};\n\nexport { useFontSizeDetector };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACUrB;AATF,OAAOA,UAAS,UAAU,WAAW,SAAS,mBAAmB;AACjE,SAAS,iCAAiC;AAC1C,SAAS,gBAAgB;AACzB,SAAS,mBAAmB,mBAAmB;AAK/C,MAAM,sBAAsBA,OAAM,KAAK,MACrC;AAAA,EAAC;AAAA;AAAA,IACC,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,eAAa;AAAA,IACb,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACD;AAAA;AAED,CACD;AAED,MAAM,oBAAoB,CAAC,QAAoC;AAC7D,QAAM,CAAC,YAAY,aAAa,IAAIA,OAAM,SAAiB,CAAC;AAE5D,YAAU,MAAM;AACd,UAAM,iBAAiB,IAAI,eAAe,CAAC,YAA8C;AACvF,cAAQ,QAAQ,CAAC,UAAU;AACzB,sBAAc,KAAK,KAAK,MAAM,YAAY,MAAM,CAAC;AAAA,MACnD,CAAC;AAAA,IACH,CAAC;AACD,QAAI,KAAK;AACP,qBAAe,QAAQ,GAAG;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,UAAI,KAAK;AACP,uBAAe,UAAU,GAAG;AAAA,MAC9B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,SAAO;AACT;AAEA,MAAM,sBAAsB,MAAqD;AAC/E,QAAM,CAAC,KAAK,MAAM,IAAI,SAA6B,IAAI;AACvD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,SAAS,gBAAgB,WAAW;AAC3F,QAAM,aAAa,kBAAkB,GAAG;AAExC,YAAU,MAAM;AACd,UAAM,kBAAkB,YAAY;AAClC,YAAM,kBAAkB,MAAM,0BAA0B;AAAA,QACtD,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,MACX,CAAC;AACD,aAAO,eAAe;AAAA,IACxB;AACA,oBAAgB,EAAE,MAAM,MAAM;AAAA,IAAC,CAAC;AAAA,EAClC,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,QAAQ,MAAM,KAAK,MAAM,eAAe,cAAc,EAAE,GAAG,CAAC,YAAY,WAAW,CAAC;AAElG,QAAM,iBAAiB;AAAA,IACrB,SAAS,MAAM;AACb,qBAAe,SAAS,gBAAgB,WAAW;AAAA,IACrD,GAAG,GAAG;AAAA,IACN,CAAC;AAAA,EACH;AAEA,YAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,cAAc;AAChD,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,cAAc;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AACnB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,SAAS,SAAS,YAAY;AAAA,IAC9B,UAAU,QAAQ,YAAY,SAAS,SAAS,YAAY;AAAA,IAC5D,SAAS,QAAQ,YAAY;AAAA,EAC/B;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { render } from "react-dom";
|
|
4
|
+
const appendComponentIfNotExist = async (props) => {
|
|
5
|
+
const { Component, parentVisibility = "hidden", uidSelector, tagName = "span" } = props;
|
|
6
|
+
const elementAttached = document.getElementById(uidSelector);
|
|
7
|
+
if (elementAttached) return elementAttached;
|
|
8
|
+
const rootElement = document.createElement(tagName);
|
|
9
|
+
rootElement.style.visibility = parentVisibility;
|
|
10
|
+
rootElement.style.position = "absolute";
|
|
11
|
+
rootElement.style.top = "0";
|
|
12
|
+
const element = await new Promise((resolve) => {
|
|
13
|
+
render(/* @__PURE__ */ jsx(Component, {}), document.body.appendChild(rootElement));
|
|
14
|
+
requestAnimationFrame(() => {
|
|
15
|
+
resolve(document.getElementById(uidSelector));
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
return element;
|
|
19
|
+
};
|
|
20
|
+
export {
|
|
21
|
+
appendComponentIfNotExist
|
|
22
|
+
};
|
|
23
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/utils.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { render } from 'react-dom';\n\ninterface AppendComponentIfNotExistConfigT {\n Component: React.FC;\n parentVisibility?: string;\n uidSelector: string;\n tagName: string;\n}\n\n// appendComponentIfNotExist is a function that appends a component to the DOM if it does not exist\n// it returns the element appended\n//\nexport const appendComponentIfNotExist = async (props: AppendComponentIfNotExistConfigT) => {\n const { Component, parentVisibility = 'hidden', uidSelector, tagName = 'span' } = props;\n\n // if elementAttached exists we return it\n const elementAttached = document.getElementById(uidSelector);\n if (elementAttached) return elementAttached;\n const rootElement = document.createElement(tagName);\n rootElement.style.visibility = parentVisibility;\n // we set the rootElement to be absolute and on top to avoid adding scrollbars\n rootElement.style.position = 'absolute';\n rootElement.style.top = '0';\n // we wait for the component to be rendered and then we return the element appended\n const element = await new Promise<HTMLElement>((resolve) => {\n render(<Component />, document.body.appendChild(rootElement));\n requestAnimationFrame(() => {\n resolve(document.getElementById(uidSelector) as HTMLElement);\n });\n });\n return element;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyBZ;AAzBX,SAAS,cAAc;AAYhB,MAAM,4BAA4B,OAAO,UAA4C;AAC1F,QAAM,EAAE,WAAW,mBAAmB,UAAU,aAAa,UAAU,OAAO,IAAI;AAGlF,QAAM,kBAAkB,SAAS,eAAe,WAAW;AAC3D,MAAI,gBAAiB,QAAO;AAC5B,QAAM,cAAc,SAAS,cAAc,OAAO;AAClD,cAAY,MAAM,aAAa;AAE/B,cAAY,MAAM,WAAW;AAC7B,cAAY,MAAM,MAAM;AAExB,QAAM,UAAU,MAAM,IAAI,QAAqB,CAAC,YAAY;AAC1D,WAAO,oBAAC,aAAU,GAAI,SAAS,KAAK,YAAY,WAAW,CAAC;AAC5D,0BAAsB,MAAM;AAC1B,cAAQ,SAAS,eAAe,WAAW,CAAgB;AAAA,IAC7D,CAAC;AAAA,EACH,CAAC;AACD,SAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface AppendComponentIfNotExistConfigT {
|
|
3
|
+
Component: React.FC;
|
|
4
|
+
parentVisibility?: string;
|
|
5
|
+
uidSelector: string;
|
|
6
|
+
tagName: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const appendComponentIfNotExist: (props: AppendComponentIfNotExistConfigT) => Promise<HTMLElement>;
|
|
9
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-hooks-fontsize-detector",
|
|
3
|
-
"version": "3.37.0-rc.
|
|
3
|
+
"version": "3.37.0-rc.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Hooks Fontsize Detector",
|
|
6
6
|
"files": [
|
|
@@ -36,14 +36,13 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@xstyled/system": "3.7.0"
|
|
40
|
-
"@elliemae/ds-utilities": "3.37.0-rc.4"
|
|
39
|
+
"@xstyled/system": "3.7.0"
|
|
41
40
|
},
|
|
42
41
|
"devDependencies": {
|
|
43
42
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
44
43
|
"styled-components": "~5.3.9",
|
|
45
44
|
"styled-system": "~5.1.5",
|
|
46
|
-
"@elliemae/ds-monorepo-devops": "3.37.0-rc.
|
|
45
|
+
"@elliemae/ds-monorepo-devops": "3.37.0-rc.6"
|
|
47
46
|
},
|
|
48
47
|
"peerDependencies": {
|
|
49
48
|
"lodash": "^4.17.21",
|