From 06c78d4dec784a2014edd221990516be9a143273 Mon Sep 17 00:00:00 2001 From: Tim Chamberlain Date: Fri, 5 May 2023 12:59:49 -0500 Subject: [PATCH] updated on click on query screen with reveal widgets --- package-lock.json | 72 ++++++++++++++++---------------- src/qqq/utils/qqq/ValueUtils.tsx | 61 +++++++++++++++------------ 2 files changed, 71 insertions(+), 62 deletions(-) diff --git a/package-lock.json b/package-lock.json index 07160ec..6cb827a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4948,9 +4948,9 @@ "devOptional": true }, "node_modules/@types/node": { - "version": "14.18.43", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.43.tgz", - "integrity": "sha512-n3eFEaoem0WNwLux+k272P0+aq++5o05bA9CfiwKPdYPB5ZambWKdWoeHy7/OJiizMhzg27NLaZ6uzjLTzXceQ==" + "version": "14.18.44", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.44.tgz", + "integrity": "sha512-Sg79dXC3jrRlG0QOLrK5eq2hRzpU4pkD7xBiYNYJ6r9OitJMxkpTpWf6m3qa2AWzb76uMHx+6x5T1Y/WAiS3nw==" }, "node_modules/@types/parse-json": { "version": "4.0.0", @@ -5053,9 +5053,9 @@ } }, "node_modules/@types/react-transition-group": { - "version": "4.4.5", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", - "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", + "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", "dependencies": { "@types/react": "*" } @@ -8758,9 +8758,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.380", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.380.tgz", - "integrity": "sha512-XKGdI4pWM78eLH2cbXJHiBnWUwFSzZM7XujsB6stDiGu9AeSqziedP6amNLpJzE3i0rLTcfAwdCTs5ecP5yeSg==", + "version": "1.4.384", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.384.tgz", + "integrity": "sha512-I97q0MmRAAqj53+a8vZsDkEXBZki+ehYAOPzwtQzALip52aEp2+BJqHFtTlsfjoqVZYwPpHC8wM6MbsSZQ/Eqw==", "devOptional": true }, "node_modules/emittery": { @@ -15061,9 +15061,9 @@ } }, "node_modules/lit": { - "version": "2.7.3", - "resolved": "https://registry.npmjs.org/lit/-/lit-2.7.3.tgz", - "integrity": "sha512-0a+u+vVbmgSfPu+fyvqjMPBX0Kwbyj9QOv9MbQFZhWGlV2cyk3lEwgfUQgYN+i/lx++1Z3wZknSIp3QCKxHLyg==", + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.7.4.tgz", + "integrity": "sha512-cgD7xrZoYr21mbrkZIuIrj98YTMw/snJPg52deWVV4A8icLyNHI3bF70xsJeAgwTuiq5Kkd+ZR8gybSJDCPB7g==", "dependencies": { "@lit/reactive-element": "^1.6.0", "lit-element": "^3.3.0", @@ -18402,9 +18402,9 @@ } }, "node_modules/react-google-drive-picker": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/react-google-drive-picker/-/react-google-drive-picker-1.2.1.tgz", - "integrity": "sha512-p+7AJo0FKcxzhYkYd+tnNEOOHQOeDKgo2L+UY5DBZnggXcCf/nz0RTqT4eoOCuq6DMtKI6XboKhj9tY75zWf+g==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/react-google-drive-picker/-/react-google-drive-picker-1.2.2.tgz", + "integrity": "sha512-x30mYkt9MIwPCgL+fyK75HZ8E6G5L/WGW0bfMG6kbD4NG2kmdlmV9oH5lPa6P6d46y9hj5Y3btAMrZd4JRRkSA==", "peerDependencies": { "react": ">=17.0.0", "react-dom": ">=17.0.0" @@ -21162,9 +21162,9 @@ } }, "node_modules/webpack": { - "version": "5.81.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.81.0.tgz", - "integrity": "sha512-AAjaJ9S4hYCVODKLQTgG5p5e11hiMawBwV2v8MYLE0C/6UAGLuAF4n1qa9GOwdxnicaP+5k6M5HrLmD4+gIB8Q==", + "version": "5.82.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.82.0.tgz", + "integrity": "sha512-iGNA2fHhnDcV1bONdUu554eZx+XeldsaeQ8T67H6KKHl2nUSwX8Zm7cmzOA46ox/X1ARxf7Bjv8wQ/HsB5fxBg==", "dev": true, "dependencies": { "@types/eslint-scope": "^3.7.3", @@ -25602,9 +25602,9 @@ "devOptional": true }, "@types/node": { - "version": "14.18.43", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.43.tgz", - "integrity": "sha512-n3eFEaoem0WNwLux+k272P0+aq++5o05bA9CfiwKPdYPB5ZambWKdWoeHy7/OJiizMhzg27NLaZ6uzjLTzXceQ==" + "version": "14.18.44", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.44.tgz", + "integrity": "sha512-Sg79dXC3jrRlG0QOLrK5eq2hRzpU4pkD7xBiYNYJ6r9OitJMxkpTpWf6m3qa2AWzb76uMHx+6x5T1Y/WAiS3nw==" }, "@types/parse-json": { "version": "4.0.0", @@ -25707,9 +25707,9 @@ } }, "@types/react-transition-group": { - "version": "4.4.5", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", - "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", + "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", "requires": { "@types/react": "*" } @@ -28497,9 +28497,9 @@ } }, "electron-to-chromium": { - "version": "1.4.380", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.380.tgz", - "integrity": "sha512-XKGdI4pWM78eLH2cbXJHiBnWUwFSzZM7XujsB6stDiGu9AeSqziedP6amNLpJzE3i0rLTcfAwdCTs5ecP5yeSg==", + "version": "1.4.384", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.384.tgz", + "integrity": "sha512-I97q0MmRAAqj53+a8vZsDkEXBZki+ehYAOPzwtQzALip52aEp2+BJqHFtTlsfjoqVZYwPpHC8wM6MbsSZQ/Eqw==", "devOptional": true }, "emittery": { @@ -33179,9 +33179,9 @@ } }, "lit": { - "version": "2.7.3", - "resolved": "https://registry.npmjs.org/lit/-/lit-2.7.3.tgz", - "integrity": "sha512-0a+u+vVbmgSfPu+fyvqjMPBX0Kwbyj9QOv9MbQFZhWGlV2cyk3lEwgfUQgYN+i/lx++1Z3wZknSIp3QCKxHLyg==", + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.7.4.tgz", + "integrity": "sha512-cgD7xrZoYr21mbrkZIuIrj98YTMw/snJPg52deWVV4A8icLyNHI3bF70xsJeAgwTuiq5Kkd+ZR8gybSJDCPB7g==", "requires": { "@lit/reactive-element": "^1.6.0", "lit-element": "^3.3.0", @@ -35505,9 +35505,9 @@ } }, "react-google-drive-picker": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/react-google-drive-picker/-/react-google-drive-picker-1.2.1.tgz", - "integrity": "sha512-p+7AJo0FKcxzhYkYd+tnNEOOHQOeDKgo2L+UY5DBZnggXcCf/nz0RTqT4eoOCuq6DMtKI6XboKhj9tY75zWf+g==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/react-google-drive-picker/-/react-google-drive-picker-1.2.2.tgz", + "integrity": "sha512-x30mYkt9MIwPCgL+fyK75HZ8E6G5L/WGW0bfMG6kbD4NG2kmdlmV9oH5lPa6P6d46y9hj5Y3btAMrZd4JRRkSA==", "requires": {} }, "react-is": { @@ -37631,9 +37631,9 @@ "dev": true }, "webpack": { - "version": "5.81.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.81.0.tgz", - "integrity": "sha512-AAjaJ9S4hYCVODKLQTgG5p5e11hiMawBwV2v8MYLE0C/6UAGLuAF4n1qa9GOwdxnicaP+5k6M5HrLmD4+gIB8Q==", + "version": "5.82.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.82.0.tgz", + "integrity": "sha512-iGNA2fHhnDcV1bONdUu554eZx+XeldsaeQ8T67H6KKHl2nUSwX8Zm7cmzOA46ox/X1ARxf7Bjv8wQ/HsB5fxBg==", "dev": true, "requires": { "@types/eslint-scope": "^3.7.3", diff --git a/src/qqq/utils/qqq/ValueUtils.tsx b/src/qqq/utils/qqq/ValueUtils.tsx index d7e27fb..af0f6fe 100644 --- a/src/qqq/utils/qqq/ValueUtils.tsx +++ b/src/qqq/utils/qqq/ValueUtils.tsx @@ -485,7 +485,7 @@ function RevealComponent({fieldName, value, usage}: {fieldName: string, value: s const [adornmentFieldsMap, setAdornmentFieldsMap] = useState(new Map); const [, forceUpdate] = useReducer((x) => x + 1, 0); const [tooltipOpen, setToolTipOpen] = useState(false); - const [displayValue, setDisplayValue] = useState(value.replace(/./g, "*")); + const [displayValue, setDisplayValue] = useState(value ? value.replace(/./g, "*") : ""); const handleTooltipClose = () => { @@ -497,8 +497,9 @@ function RevealComponent({fieldName, value, usage}: {fieldName: string, value: s setToolTipOpen(true); }; - const handleRevealIconClick = (fieldName: string) => + const handleRevealIconClick = (event: React.MouseEvent, fieldName: string) => { + event.stopPropagation(); const displayValue = (adornmentFieldsMap.get(fieldName)) ? value.replace(/./g, "*") : value; setDisplayValue(displayValue); adornmentFieldsMap.set(fieldName, !adornmentFieldsMap.get(fieldName)); @@ -506,36 +507,44 @@ function RevealComponent({fieldName, value, usage}: {fieldName: string, value: s forceUpdate(); }; - const copyToClipboard = (value: string) => + const copyToClipboard = (event: React.MouseEvent, value: string) => { + event.stopPropagation(); navigator.clipboard.writeText(value); setToolTipOpen(true); }; return ( - usage === "view" && adornmentFieldsMap.get(fieldName) === true ? ( - - handleRevealIconClick(fieldName)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginRight: "5px"}}>visibility_on - {displayValue} - - - copyToClipboard(value)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginLeft: "5px"}}>copy - - - - ):( - handleRevealIconClick(fieldName)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginRight: "5px"}}>visibility_off{displayValue} - ) + <> + { + displayValue && ( + adornmentFieldsMap.get(fieldName) === true ? ( + + handleRevealIconClick(e, fieldName)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginRight: "5px"}}>visibility_on + {displayValue} + + + copyToClipboard(e, value)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginLeft: "5px"}}>copy + + + + ):( + handleRevealIconClick(e, fieldName)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginRight: "5px"}}>visibility_off{displayValue} + ) + ) + } + ); }