@visns-studio/visns-components 4.5.10 → 4.5.11
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.
|
@@ -11,7 +11,14 @@ import { confirmAlert } from 'react-confirm-alert';
|
|
|
11
11
|
import truncate from 'truncate';
|
|
12
12
|
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|
13
13
|
import { toast } from 'react-toastify';
|
|
14
|
-
import {
|
|
14
|
+
import {
|
|
15
|
+
CircleCheck,
|
|
16
|
+
Copy,
|
|
17
|
+
EyeOpen,
|
|
18
|
+
EyeSlashed,
|
|
19
|
+
File,
|
|
20
|
+
TrashCan,
|
|
21
|
+
} from 'akar-icons';
|
|
15
22
|
|
|
16
23
|
import 'react-confirm-alert/src/react-confirm-alert.css';
|
|
17
24
|
|
|
@@ -52,6 +59,12 @@ function GenericDetail({
|
|
|
52
59
|
const [total, setTotal] = useState(0);
|
|
53
60
|
const [windowHeight, setWindowHeight] = useState(window.innerHeight);
|
|
54
61
|
|
|
62
|
+
const [passwordVisible, setPasswordVisible] = useState(false);
|
|
63
|
+
|
|
64
|
+
const togglePasswordVisibility = () => {
|
|
65
|
+
setPasswordVisible(!passwordVisible);
|
|
66
|
+
};
|
|
67
|
+
|
|
55
68
|
/** General Functions */
|
|
56
69
|
const handleStageUpdate = async (stage, type) => {
|
|
57
70
|
try {
|
|
@@ -327,6 +340,30 @@ function GenericDetail({
|
|
|
327
340
|
|
|
328
341
|
const renderTotal = () => formatTotalValue();
|
|
329
342
|
|
|
343
|
+
const renderPassword = () => {
|
|
344
|
+
return (
|
|
345
|
+
<>
|
|
346
|
+
{passwordVisible ? stringValue : '******'}
|
|
347
|
+
<button
|
|
348
|
+
type="button"
|
|
349
|
+
onClick={togglePasswordVisibility}
|
|
350
|
+
style={{
|
|
351
|
+
marginLeft: '10px',
|
|
352
|
+
background: 'none',
|
|
353
|
+
border: 'none',
|
|
354
|
+
cursor: 'pointer',
|
|
355
|
+
}}
|
|
356
|
+
>
|
|
357
|
+
{passwordVisible ? (
|
|
358
|
+
<EyeSlashed size={24} />
|
|
359
|
+
) : (
|
|
360
|
+
<EyeOpen size={24} />
|
|
361
|
+
)}
|
|
362
|
+
</button>
|
|
363
|
+
</>
|
|
364
|
+
);
|
|
365
|
+
};
|
|
366
|
+
|
|
330
367
|
// Render based on the item's type
|
|
331
368
|
switch (type) {
|
|
332
369
|
case 'boolean':
|
|
@@ -353,6 +390,8 @@ function GenericDetail({
|
|
|
353
390
|
return renderRichText();
|
|
354
391
|
case 'total':
|
|
355
392
|
return renderTotal();
|
|
393
|
+
case 'password':
|
|
394
|
+
return renderPassword();
|
|
356
395
|
default:
|
|
357
396
|
return size === 'full' && truncatedValue
|
|
358
397
|
? parse(`<br /><p>${truncatedValue}</p>`)
|
package/package.json
CHANGED