aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-03 14:34:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

add tooltip package

Browse Source
This commit is contained in:
MTG2000
2022-08-31 15:47:01 +03:00
parent 2d4d6d69c2
commit 3a03ceea37
3 changed files with 81 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
package-lock.json generated
View File

@@ -77,6 +77,7 @@
"react-loader-spinner": "^6.0.0-0",
"react-loading-skeleton": "^3.1.0",
"react-modal": "^3.15.1",
"react-popper-tooltip": "^4.4.2",
"react-query": "^3.35.0",
"react-redux": "^8.0.0",
"react-router-dom": "^6.3.0",
@@ -2144,9 +2145,9 @@
}
},
"node_modules/@babel/runtime": {
"version": "7.17.9",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
"integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
"version": "7.18.9",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
"integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
"dependencies": {
"regenerator-runtime": "^0.13.4"
},
@@ -9640,6 +9641,21 @@
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"node_modules/@storybook/components/node_modules/react-popper-tooltip": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz",
"integrity": "sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.12.5",
"@popperjs/core": "^2.5.4",
"react-popper": "^2.2.4"
},
"peerDependencies": {
"react": "^16.6.0 || ^17.0.0",
"react-dom": "^16.6.0 || ^17.0.0"
}
},
"node_modules/@storybook/core": {
"version": "6.4.22",
"resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.4.22.tgz",
@@ -60400,31 +60416,31 @@
}
},
"node_modules/react-popper": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
"integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
"integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
"dependencies": {
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
},
"peerDependencies": {
"@popperjs/core": "^2.0.0",
"react": "^16.8.0 || ^17"
"react": "^16.8.0 || ^17 || ^18",
"react-dom": "^16.8.0 || ^17 || ^18"
}
},
"node_modules/react-popper-tooltip": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz",
"integrity": "sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==",
"dev": true,
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-4.4.2.tgz",
"integrity": "sha512-y48r0mpzysRTZAIh8m2kpZ8S1YPNqGtQPDrlXYSGvDS1c1GpG/NUXbsbIdfbhXfmSaRJuTcaT6N1q3CKuHRVbg==",
"dependencies": {
"@babel/runtime": "^7.12.5",
"@popperjs/core": "^2.5.4",
"react-popper": "^2.2.4"
"@babel/runtime": "^7.18.3",
"@popperjs/core": "^2.11.5",
"react-popper": "^2.3.0"
},
"peerDependencies": {
"react": "^16.6.0 || ^17.0.0",
"react-dom": "^16.6.0 || ^17.0.0"
"react": ">=16.6.0",
"react-dom": ">=16.6.0"
}
},
"node_modules/react-query": {
@@ -69383,9 +69399,9 @@
}
},
"@babel/runtime": {
"version": "7.17.9",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
"integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
"version": "7.18.9",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
"integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
@@ -75061,6 +75077,17 @@
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"react-popper-tooltip": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz",
"integrity": "sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"@popperjs/core": "^2.5.4",
"react-popper": "^2.2.4"
}
}
}
},
@@ -114006,23 +114033,22 @@
"requires": {}
},
"react-popper": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
"integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
"integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
"requires": {
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
}
},
"react-popper-tooltip": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz",
"integrity": "sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==",
"dev": true,
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-4.4.2.tgz",
"integrity": "sha512-y48r0mpzysRTZAIh8m2kpZ8S1YPNqGtQPDrlXYSGvDS1c1GpG/NUXbsbIdfbhXfmSaRJuTcaT6N1q3CKuHRVbg==",
"requires": {
"@babel/runtime": "^7.12.5",
"@popperjs/core": "^2.5.4",
"react-popper": "^2.2.4"
"@babel/runtime": "^7.18.3",
"@popperjs/core": "^2.11.5",
"react-popper": "^2.3.0"
}
},
"react-query": {

1
package.json
View File

@@ -72,6 +72,7 @@
"react-loader-spinner": "^6.0.0-0",
"react-loading-skeleton": "^3.1.0",
"react-modal": "^3.15.1",
"react-popper-tooltip": "^4.4.2",
"react-query": "^3.35.0",
"react-redux": "^8.0.0",
"react-router-dom": "^6.3.0",

27
src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/WalletKey.tsx
View File

@@ -8,6 +8,8 @@ import { useReduxEffect } from 'src/utils/hooks/useReduxEffect';
import { WalletKeyType } from './LinkedAccountsCard'
import { useAppDispatch } from "src/utils/hooks";
import { openModal } from "src/redux/features/modals.slice";
import 'react-popper-tooltip/dist/styles.css';
import { usePopperTooltip } from 'react-popper-tooltip';
interface Props {
walletKey: WalletKeyType,
@@ -25,6 +27,15 @@ export default function WalletKey({ walletKey, onRename, onDelete }: Props) {
const dispatch = useAppDispatch();
const {
getArrowProps,
getTooltipProps,
setTooltipRef,
setTriggerRef,
visible,
} = usePopperTooltip();
const CONFIRM_DELETE_WALLET = useMemo(() => createAction<{ confirmed?: boolean }>(`CONFIRM_DELETE_WALLET_${walletKey.key.slice(0, 10)}`)({}), [walletKey.key])
const saveNameChanges = () => {
@@ -86,9 +97,21 @@ export default function WalletKey({ walletKey, onRename, onDelete }: Props) {
className='text-red-500 shrink-0 mx-auto'
onClick={() => handleDelete()}
><FiTrash2 /> </IconButton>
:
<span className="text-body5 text-gray-400">(Current)</span>
: <>
<span ref={setTriggerRef} className="text-body5 text-gray-400">(Current)</span>
{visible && (
<div
ref={setTooltipRef}
{...getTooltipProps({ className: 'tooltip-container' })}
>
<div {...getArrowProps({ className: 'tooltip-arrow' })} />
Tooltip
</div>
)}
</>
}
</div>
</li>
)