From 1a774915850152fa80b90801d4b0d23e5fe0d8ab Mon Sep 17 00:00:00 2001 From: Carlos Mercado Date: Tue, 26 Sep 2023 09:44:15 -0500 Subject: [PATCH 1/3] Changed tooltip to use react portal --- .yalc/@tableflow/ui-library/README.md | 1 + .yalc/@tableflow/ui-library/package.json | 49 ++++++++++++++ .yalc/@tableflow/ui-library/yalc.sig | 1 + package.json | 1 + src/Tooltip/index.tsx | 44 ++++++++++++- src/Tooltip/style/Tooltip.module.scss | 81 ++++++++++++------------ yalc.lock | 9 +++ 7 files changed, 144 insertions(+), 42 deletions(-) create mode 100644 .yalc/@tableflow/ui-library/README.md create mode 100644 .yalc/@tableflow/ui-library/package.json create mode 100644 .yalc/@tableflow/ui-library/yalc.sig create mode 100644 yalc.lock diff --git a/.yalc/@tableflow/ui-library/README.md b/.yalc/@tableflow/ui-library/README.md new file mode 100644 index 0000000..b14e481 --- /dev/null +++ b/.yalc/@tableflow/ui-library/README.md @@ -0,0 +1 @@ +# ui-library diff --git a/.yalc/@tableflow/ui-library/package.json b/.yalc/@tableflow/ui-library/package.json new file mode 100644 index 0000000..2e7ffd4 --- /dev/null +++ b/.yalc/@tableflow/ui-library/package.json @@ -0,0 +1,49 @@ +{ + "name": "@tableflow/ui-library", + "version": "1.63.0", + "description": "A library of frontend components used by TableFlow", + "repository": { + "type": "git", + "url": "git+https://github.com/tableflowhq/ui-library.git" + }, + "keywords": [ + "tableflow", + "ui-library" + ], + "author": "TableFlow", + "license": "MIT", + "publishConfig": { + "registry": "https://registry.npmjs.org" + }, + "bugs": { + "url": "https://github.com/tableflowhq/ui-library/issues" + }, + "homepage": "https://github.com/tableflowhq/ui-library#readme", + "main": "build/index.js", + "module": "build/index.esm.js", + "files": [ + "build" + ], + "types": "build/index.d.ts", + "scripts": { + "build": "rollup -c", + "build:watch": "rollup -c -w", + "test": "jest", + "test:watch": "jest --watch", + "storybook": "storybook dev -p 6006", + "storybook:export": "storybook build", + "generate": "node ./util/create-component", + "prepublishOnly": "npm run build", + "build-storybook": "storybook build" + }, + "peerDependencies": { + "react": ">=18.2.0", + "react-dom": ">=18.2.0", + "zustand": "^4.3.8" + }, + "dependencies": { + "babel-plugin-inline-react-svg": "^2.0.2", + "tslib": "^2.5.3" + }, + "yalcSig": "d9d267c6663ffb3ca1afb645655d9bd9" +} diff --git a/.yalc/@tableflow/ui-library/yalc.sig b/.yalc/@tableflow/ui-library/yalc.sig new file mode 100644 index 0000000..06ba2ff --- /dev/null +++ b/.yalc/@tableflow/ui-library/yalc.sig @@ -0,0 +1 @@ +d9d267c6663ffb3ca1afb645655d9bd9 \ No newline at end of file diff --git a/package.json b/package.json index 61e31b4..ce987c0 100644 --- a/package.json +++ b/package.json @@ -90,6 +90,7 @@ "zustand": "^4.3.8" }, "dependencies": { + "@tableflow/ui-library": "file:.yalc/@tableflow/ui-library", "babel-plugin-inline-react-svg": "^2.0.2", "tslib": "^2.5.3" } diff --git a/src/Tooltip/index.tsx b/src/Tooltip/index.tsx index f441ede..359233b 100644 --- a/src/Tooltip/index.tsx +++ b/src/Tooltip/index.tsx @@ -1,3 +1,5 @@ +import { useEffect, useRef, useState } from "react"; +import ReactDOM from "react-dom"; import classes from "../utils/classes"; import getStringLengthOfChildren from "../utils/getStringLengthOfChildren"; import { AsMap, TooltipProps } from "./types"; @@ -10,12 +12,50 @@ export default function Tooltip({ as, className, title, c const length = getStringLengthOfChildren(title); const wrapperClasses = classes([style.tooltip, className, length > 30 && style.multiline]); + const [tooltipVisible, setTooltipVisible] = useState(false); + const [position, setPosition] = useState({ top: 0, left: 0 }); + const targetRef = useRef(null); + + // Create a ref to attach the tooltip portal to + const tooltipContainer = useRef(document.createElement("div")); + + useEffect(() => { + // Appending the tooltip container to the body on mount + document.body.appendChild(tooltipContainer.current); + + // Removing the tooltip container from the body on unmount + return () => { + document.body.removeChild(tooltipContainer.current); + }; + }, []); + + const showTooltip = () => { + if (targetRef.current) { + const rect = targetRef.current.getBoundingClientRect(); + setPosition({ + top: rect.bottom + window.scrollY, + left: rect.left + rect.width / 2 + window.scrollX, + }); + setTooltipVisible(true); + } + }; + + const hideTooltip = () => { + setTooltipVisible(false); + }; + + const tooltipMessage = tooltipVisible && ( + + {title} + + ); + return ( {children} - + - {title} + {ReactDOM.createPortal(tooltipMessage, tooltipContainer.current)} ); diff --git a/src/Tooltip/style/Tooltip.module.scss b/src/Tooltip/style/Tooltip.module.scss index e53fa02..31cff52 100644 --- a/src/Tooltip/style/Tooltip.module.scss +++ b/src/Tooltip/style/Tooltip.module.scss @@ -8,57 +8,58 @@ $height: calc($side * 1.732); .icon { position: relative; + display: block; svg { display: block; cursor: pointer; } - &:hover, - &:active { - .message { - display: block; - } - } + // &:hover, + // &:active { + // .message { + // display: block; + // } + // } } - .message { + &.multiline .message { + width: 260px; + white-space: normal; + } +} + + +.message { + position: absolute; + // top: 100%; + // left: 50%; + transform: translateX(-50%); + background-color: var(--color-background-modal); + z-index: 3; + padding: var(--m-xxs) var(--m-xs); + border-radius: var(--border-radius); + margin-top: var(--m-xs); + box-shadow: 0 0 0 1px var(--color-border), 0 5px 15px rgba(0, 0, 0, 0.2); + white-space: nowrap; + + &::after, + &::before { position: absolute; - top: 100%; + top: calc($height * -1); left: 50%; + border-left: $side solid transparent; + border-right: $side solid transparent; + border-bottom: $height solid var(--color-border); + content: ""; + font-size: 0; + line-height: 0; + width: 0; transform: translateX(-50%); - background-color: var(--color-background-modal); - z-index: 3; - padding: var(--m-xxs) var(--m-xs); - border-radius: var(--border-radius); - display: none; - margin-top: var(--m-xs); - box-shadow: 0 0 0 1px var(--color-border), 0 5px 15px rgba(0, 0, 0, 0.2); - white-space: nowrap; - - &::after, - &::before { - position: absolute; - top: calc($height * -1); - left: 50%; - border-left: $side solid transparent; - border-right: $side solid transparent; - border-bottom: $height solid var(--color-border); - content: ""; - font-size: 0; - line-height: 0; - width: 0; - transform: translateX(-50%); - } - - &::after { - top: calc($height * -1 + 2px); - border-bottom: $height solid var(--color-background-modal); - } } - &.multiline .message { - width: 260px; - white-space: normal; + &::after { + top: calc($height * -1 + 2px); + border-bottom: $height solid var(--color-background-modal); } -} +} \ No newline at end of file diff --git a/yalc.lock b/yalc.lock new file mode 100644 index 0000000..656bde2 --- /dev/null +++ b/yalc.lock @@ -0,0 +1,9 @@ +{ + "version": "v1", + "packages": { + "@tableflow/ui-library": { + "signature": "d9d267c6663ffb3ca1afb645655d9bd9", + "file": true + } + } +} \ No newline at end of file From fdbc8c305ecf7eef3d18ff5ae83c27af91b633ce Mon Sep 17 00:00:00 2001 From: Carlos Mercado Date: Tue, 26 Sep 2023 09:48:08 -0500 Subject: [PATCH 2/3] Clean up yalc files --- .yalc/@tableflow/ui-library/README.md | 1 - .yalc/@tableflow/ui-library/package.json | 49 ------------------------ .yalc/@tableflow/ui-library/yalc.sig | 1 - src/Tooltip/style/Tooltip.module.scss | 9 ----- yalc.lock | 9 ----- 5 files changed, 69 deletions(-) delete mode 100644 .yalc/@tableflow/ui-library/README.md delete mode 100644 .yalc/@tableflow/ui-library/package.json delete mode 100644 .yalc/@tableflow/ui-library/yalc.sig delete mode 100644 yalc.lock diff --git a/.yalc/@tableflow/ui-library/README.md b/.yalc/@tableflow/ui-library/README.md deleted file mode 100644 index b14e481..0000000 --- a/.yalc/@tableflow/ui-library/README.md +++ /dev/null @@ -1 +0,0 @@ -# ui-library diff --git a/.yalc/@tableflow/ui-library/package.json b/.yalc/@tableflow/ui-library/package.json deleted file mode 100644 index 2e7ffd4..0000000 --- a/.yalc/@tableflow/ui-library/package.json +++ /dev/null @@ -1,49 +0,0 @@ -{ - "name": "@tableflow/ui-library", - "version": "1.63.0", - "description": "A library of frontend components used by TableFlow", - "repository": { - "type": "git", - "url": "git+https://github.com/tableflowhq/ui-library.git" - }, - "keywords": [ - "tableflow", - "ui-library" - ], - "author": "TableFlow", - "license": "MIT", - "publishConfig": { - "registry": "https://registry.npmjs.org" - }, - "bugs": { - "url": "https://github.com/tableflowhq/ui-library/issues" - }, - "homepage": "https://github.com/tableflowhq/ui-library#readme", - "main": "build/index.js", - "module": "build/index.esm.js", - "files": [ - "build" - ], - "types": "build/index.d.ts", - "scripts": { - "build": "rollup -c", - "build:watch": "rollup -c -w", - "test": "jest", - "test:watch": "jest --watch", - "storybook": "storybook dev -p 6006", - "storybook:export": "storybook build", - "generate": "node ./util/create-component", - "prepublishOnly": "npm run build", - "build-storybook": "storybook build" - }, - "peerDependencies": { - "react": ">=18.2.0", - "react-dom": ">=18.2.0", - "zustand": "^4.3.8" - }, - "dependencies": { - "babel-plugin-inline-react-svg": "^2.0.2", - "tslib": "^2.5.3" - }, - "yalcSig": "d9d267c6663ffb3ca1afb645655d9bd9" -} diff --git a/.yalc/@tableflow/ui-library/yalc.sig b/.yalc/@tableflow/ui-library/yalc.sig deleted file mode 100644 index 06ba2ff..0000000 --- a/.yalc/@tableflow/ui-library/yalc.sig +++ /dev/null @@ -1 +0,0 @@ -d9d267c6663ffb3ca1afb645655d9bd9 \ No newline at end of file diff --git a/src/Tooltip/style/Tooltip.module.scss b/src/Tooltip/style/Tooltip.module.scss index 31cff52..fba180b 100644 --- a/src/Tooltip/style/Tooltip.module.scss +++ b/src/Tooltip/style/Tooltip.module.scss @@ -14,13 +14,6 @@ $height: calc($side * 1.732); display: block; cursor: pointer; } - - // &:hover, - // &:active { - // .message { - // display: block; - // } - // } } &.multiline .message { @@ -32,8 +25,6 @@ $height: calc($side * 1.732); .message { position: absolute; - // top: 100%; - // left: 50%; transform: translateX(-50%); background-color: var(--color-background-modal); z-index: 3; diff --git a/yalc.lock b/yalc.lock deleted file mode 100644 index 656bde2..0000000 --- a/yalc.lock +++ /dev/null @@ -1,9 +0,0 @@ -{ - "version": "v1", - "packages": { - "@tableflow/ui-library": { - "signature": "d9d267c6663ffb3ca1afb645655d9bd9", - "file": true - } - } -} \ No newline at end of file From 8ba6282c8fae4655ac92220b4e051a4575be84dd Mon Sep 17 00:00:00 2001 From: Carlos Mercado Date: Tue, 26 Sep 2023 09:50:27 -0500 Subject: [PATCH 3/3] removed yalc dependencies --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index ce987c0..61e31b4 100644 --- a/package.json +++ b/package.json @@ -90,7 +90,6 @@ "zustand": "^4.3.8" }, "dependencies": { - "@tableflow/ui-library": "file:.yalc/@tableflow/ui-library", "babel-plugin-inline-react-svg": "^2.0.2", "tslib": "^2.5.3" }