uikit-react-public 0.49.1 → 0.49.3
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.
- package/dist/components/common/formatConfidentialValue.d.ts +4 -1
- package/dist/index.js +456 -451
- package/lib/components/ConfidentialDisplayField/ConfidentialDisplayField.tsx +5 -1
- package/lib/components/ConfidentialDisplayField/__tests__/ConfidentialDisplayField.test.tsx +1 -1
- package/lib/components/ConfidentialInput/ConfidentialInput.stories.tsx +1 -0
- package/lib/components/ConfidentialInput/ConfidentialInput.tsx +2 -1
- package/lib/components/ConfidentialInput/__tests__/ConfidentialInput.test.tsx +1 -1
- package/lib/components/common/formatConfidentialValue.ts +16 -4
- package/package.json +1 -1
|
@@ -24,6 +24,7 @@ const ConfidentialDisplayField = forwardRef<Ref, ConfidentialDisplayFieldProps>(
|
|
|
24
24
|
value,
|
|
25
25
|
numeric,
|
|
26
26
|
maskFormat,
|
|
27
|
+
format,
|
|
27
28
|
showable = false,
|
|
28
29
|
testId = NAME,
|
|
29
30
|
className,
|
|
@@ -45,7 +46,9 @@ const ConfidentialDisplayField = forwardRef<Ref, ConfidentialDisplayFieldProps>(
|
|
|
45
46
|
const valueIsShown = showable && isShown;
|
|
46
47
|
const displayedValue = valueIsShown
|
|
47
48
|
? stringValue
|
|
48
|
-
: formatConfidentialValue(stringValue, maskFormat
|
|
49
|
+
: formatConfidentialValue(stringValue, maskFormat, {
|
|
50
|
+
includeTemplateLiterals: !format,
|
|
51
|
+
});
|
|
49
52
|
|
|
50
53
|
useEffect(() => {
|
|
51
54
|
if (!showable) setIsShown(false);
|
|
@@ -68,6 +71,7 @@ const ConfidentialDisplayField = forwardRef<Ref, ConfidentialDisplayFieldProps>(
|
|
|
68
71
|
{...props}
|
|
69
72
|
ref={ref}
|
|
70
73
|
value={displayedValue}
|
|
74
|
+
format={format}
|
|
71
75
|
numeric={numeric ?? typeof value === 'number'}
|
|
72
76
|
testId={testId}
|
|
73
77
|
noMargins
|
|
@@ -125,7 +125,8 @@ const ConfidentialInput = forwardRef<Ref, ConfidentialInputProps>(
|
|
|
125
125
|
value === undefined ? uncontrolledValue : getStringValue(value);
|
|
126
126
|
const displayedMaskedValue = formatConfidentialValue(
|
|
127
127
|
stringValue,
|
|
128
|
-
maskFormat
|
|
128
|
+
maskFormat,
|
|
129
|
+
{ includeTemplateLiterals: !format }
|
|
129
130
|
);
|
|
130
131
|
const configuredValueIsVisible =
|
|
131
132
|
!isFocused &&
|
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
export type MaskFormat = string | ((value: string) => string);
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
interface FormatConfidentialValueOptions {
|
|
4
|
+
includeTemplateLiterals?: boolean;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
const applyMaskTemplate = (
|
|
8
|
+
value: string,
|
|
9
|
+
template: string,
|
|
10
|
+
includeTemplateLiterals: boolean
|
|
11
|
+
) => {
|
|
4
12
|
const valueCharacters = Array.from(value);
|
|
5
13
|
let valueIndex = 0;
|
|
6
14
|
let maskedValue = '';
|
|
@@ -14,7 +22,7 @@ const applyMaskTemplate = (value: string, template: string) => {
|
|
|
14
22
|
} else if (templateCharacter === '*') {
|
|
15
23
|
maskedValue += '*';
|
|
16
24
|
valueIndex += 1;
|
|
17
|
-
} else {
|
|
25
|
+
} else if (includeTemplateLiterals) {
|
|
18
26
|
maskedValue += templateCharacter;
|
|
19
27
|
}
|
|
20
28
|
}
|
|
@@ -24,11 +32,15 @@ const applyMaskTemplate = (value: string, template: string) => {
|
|
|
24
32
|
);
|
|
25
33
|
};
|
|
26
34
|
|
|
27
|
-
const formatConfidentialValue = (
|
|
35
|
+
const formatConfidentialValue = (
|
|
36
|
+
value: string,
|
|
37
|
+
maskFormat: MaskFormat,
|
|
38
|
+
{ includeTemplateLiterals = true }: FormatConfidentialValueOptions = {}
|
|
39
|
+
) => {
|
|
28
40
|
const maskedValue =
|
|
29
41
|
typeof maskFormat === 'function'
|
|
30
42
|
? maskFormat(value)
|
|
31
|
-
: applyMaskTemplate(value, maskFormat);
|
|
43
|
+
: applyMaskTemplate(value, maskFormat, includeTemplateLiterals);
|
|
32
44
|
|
|
33
45
|
return maskedValue.split('*').join('•');
|
|
34
46
|
};
|