diff --git a/package.json b/package.json index 151c787..136e044 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "normalize.css": "^8.0.1", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-tooltip": "^5.28.0", "recoil": "^0.7.7", "strtime": "^1.1.2", "styled-components": "^6.1.13", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bd3d2b9..959ea21 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ importers: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + react-tooltip: + specifier: ^5.28.0 + version: 5.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) recoil: specifier: ^0.7.7 version: 0.7.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -283,6 +286,15 @@ packages: resolution: {integrity: sha512-HFZ4Mp26nbWk9d/BpvP0YNL6W4UoZF0VFcTw/aPPA8RpOxeFQgK+ClABGgAUXs9Y/RGX/l1vOmrqz1MQt9MNuw==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@floating-ui/core@1.6.8': + resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==} + + '@floating-ui/dom@1.6.12': + resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==} + + '@floating-ui/utils@0.2.8': + resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==} + '@fontsource-variable/jetbrains-mono@5.1.1': resolution: {integrity: sha512-V+1aRFRvuZ66PpO30s8l/2aADKzpV9VRsO3kSZE+rTMvi4vab3cUcPHMN2z+wAvjkYJO71Yf+g3/Y6pSMmQpVQ==} @@ -727,6 +739,9 @@ packages: resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} engines: {node: '>=10'} + classnames@2.5.1: + resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==} + clsx@2.1.1: resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} engines: {node: '>=6'} @@ -1091,6 +1106,12 @@ packages: peerDependencies: react: ^18.3.1 + react-tooltip@5.28.0: + resolution: {integrity: sha512-R5cO3JPPXk6FRbBHMO0rI9nkUG/JKfalBSQfZedZYzmqaZQgq7GLzF8vcCWx6IhUCKg0yPqJhXIzmIO5ff15xg==} + peerDependencies: + react: '>=16.14.0' + react-dom: '>=16.14.0' + react@18.3.1: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} @@ -1535,6 +1556,17 @@ snapshots: dependencies: levn: 0.4.1 + '@floating-ui/core@1.6.8': + dependencies: + '@floating-ui/utils': 0.2.8 + + '@floating-ui/dom@1.6.12': + dependencies: + '@floating-ui/core': 1.6.8 + '@floating-ui/utils': 0.2.8 + + '@floating-ui/utils@0.2.8': {} + '@fontsource-variable/jetbrains-mono@5.1.1': {} '@humanfs/core@0.19.0': {} @@ -1909,6 +1941,8 @@ snapshots: ansi-styles: 4.3.0 supports-color: 7.2.0 + classnames@2.5.1: {} + clsx@2.1.1: {} color-convert@2.0.1: @@ -2265,6 +2299,13 @@ snapshots: react: 18.3.1 scheduler: 0.23.2 + react-tooltip@5.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@floating-ui/dom': 1.6.12 + classnames: 2.5.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react@18.3.1: dependencies: loose-envify: 1.4.0 diff --git a/src/TransformGridItem/index.tsx b/src/TransformGridItem/index.tsx index 9e39f78..1f1ddf2 100644 --- a/src/TransformGridItem/index.tsx +++ b/src/TransformGridItem/index.tsx @@ -16,6 +16,7 @@ import { } from "../Transforms/Transform"; import { useLocalStorage } from "@uidotdev/usehooks"; import { AnimatePresence, motion } from "framer-motion"; +import { Tooltip } from 'react-tooltip' interface TransformGridItemProp { transform: WrappedTransform @@ -45,7 +46,7 @@ export const TransformGridItem: FC = ({ transform }) => { }, []) useEffect(() => { - if (closed) + if (previewDisabled) return triggerTransform() @@ -55,6 +56,10 @@ export const TransformGridItem: FC = ({ transform }) => { if (value.length > 30000) { setClosed(true) setPreviewDisabled(true) + setResult({ + error: false, + value: '' + }) return } @@ -138,9 +143,18 @@ export const TransformGridItem: FC = ({ transform }) => { return (
- +
+ +
+ + + {previewDisabled && result.error && result.value} +