@topconsultnpm/sdkui-react-beta 6.15.62 → 6.15.63
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ITMEditorBase } from '../base/TMEditorBase';
|
|
3
|
-
export type TextBoxType = 'text' | 'email' | 'password' | 'number';
|
|
3
|
+
export type TextBoxType = 'text' | 'email' | 'password' | 'number' | 'secureText';
|
|
4
4
|
interface ITMTextBox extends ITMEditorBase {
|
|
5
5
|
autoFocus?: boolean;
|
|
6
6
|
formulaItems?: string[];
|
|
@@ -97,6 +97,10 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
|
|
|
97
97
|
}
|
|
98
98
|
}, [formulaItems]);
|
|
99
99
|
const showPasswordIcon = () => {
|
|
100
|
+
if (initialType === 'secureText' && currentType === 'secureText')
|
|
101
|
+
return _jsx(IconShow, {});
|
|
102
|
+
if (initialType === 'secureText' && currentType === 'text')
|
|
103
|
+
return _jsx(IconHide, {});
|
|
100
104
|
if (initialType === 'password' && currentType === 'password') {
|
|
101
105
|
return _jsx(IconShow, {});
|
|
102
106
|
}
|
|
@@ -108,11 +112,11 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
|
|
|
108
112
|
}
|
|
109
113
|
};
|
|
110
114
|
const toggleShowPassword = () => {
|
|
111
|
-
if (initialType === '
|
|
112
|
-
setCurrentType('text');
|
|
115
|
+
if (initialType === 'secureText') {
|
|
116
|
+
setCurrentType(currentType === 'secureText' ? 'text' : 'secureText');
|
|
113
117
|
}
|
|
114
|
-
else if (initialType === 'password'
|
|
115
|
-
setCurrentType('password');
|
|
118
|
+
else if (initialType === 'password') {
|
|
119
|
+
setCurrentType(currentType === 'password' ? 'text' : 'password');
|
|
116
120
|
}
|
|
117
121
|
};
|
|
118
122
|
const insertText = (textToInsert) => {
|
|
@@ -150,6 +154,23 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
|
|
|
150
154
|
// Soluzione 2: Creare una nuova istanza di RegExp ad ogni iterazione (meno efficiente ma funziona per pattern più complessi)
|
|
151
155
|
inputValue = inputValue.split('').filter(char => new RegExp(allowedPattern).test(char)).join('');
|
|
152
156
|
}
|
|
157
|
+
// se è mascherato (secureText) → l’utente non può digitare "•"
|
|
158
|
+
if (currentType === 'secureText') {
|
|
159
|
+
// Mantieni currentValue reale senza bullet
|
|
160
|
+
if (inputRef.current) {
|
|
161
|
+
const realValueLength = currentValue.length;
|
|
162
|
+
const newLength = inputValue.length;
|
|
163
|
+
if (newLength < realValueLength) {
|
|
164
|
+
// Delete o backspace
|
|
165
|
+
inputValue = currentValue.slice(0, newLength);
|
|
166
|
+
}
|
|
167
|
+
else {
|
|
168
|
+
// Nuovi caratteri
|
|
169
|
+
const addedText = inputValue.slice(realValueLength);
|
|
170
|
+
inputValue = currentValue + addedText;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
153
174
|
if (currentType === 'number') {
|
|
154
175
|
let number = Number(inputValue);
|
|
155
176
|
let max = getMaxValue(inputValue);
|
|
@@ -199,13 +220,20 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
|
|
|
199
220
|
onValueChanged?.({ target: { value: inputValue } }); // Passa il valore filtrato
|
|
200
221
|
};
|
|
201
222
|
const renderInputField = () => {
|
|
202
|
-
|
|
223
|
+
const bulletEntity = '\u2022'; // •
|
|
224
|
+
console.log("currentValue", currentValue);
|
|
225
|
+
const displayedValue = initialType === 'secureText'
|
|
226
|
+
? (currentType === 'secureText'
|
|
227
|
+
? bulletEntity.repeat(currentValue?.length ?? 0)
|
|
228
|
+
: currentValue ?? '')
|
|
229
|
+
: currentValue ?? '';
|
|
230
|
+
return (_jsxs("div", { style: { width: '100%', height: 'fit-content' }, id: `text-${id}`, children: [_jsx(StyledEditor, { ref: inputRef, id: `text-${label}-${id}`, name: label, autoFocus: autoFocus, readOnly: readOnly, type: currentType, disabled: disabled, value: displayedValue, width: width || '100%', placeholder: placeHolder, maxLength: maxLength, autoComplete: 'off', onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
|
|
203
231
|
onBlur?.(currentValue); }, onChange: handleInputChange, onKeyDown: (e) => {
|
|
204
232
|
if (currentType === 'number') {
|
|
205
233
|
if (!scale && (e.key == "." || e.key == ","))
|
|
206
234
|
e.preventDefault();
|
|
207
235
|
}
|
|
208
|
-
}, "$isMobile": deviceType === DeviceType.MOBILE, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$maxValue": maxValue, "$width": width, "$type": currentType, "$borderRadius": borderRadius }), initialType === 'password'
|
|
236
|
+
}, "$isMobile": deviceType === DeviceType.MOBILE, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$maxValue": maxValue, "$width": width, "$type": currentType, "$borderRadius": borderRadius }), (initialType === 'password' || initialType === 'secureText') && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: showPasswordIcon() }), initialType !== 'password' &&
|
|
209
237
|
_jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: type === 'number' ? '25px' : '6px', top: label.length > 0 ? '20px' : '7px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && currentValue &&
|
|
210
238
|
_jsx(StyledTextBoxEditorButton, { onClick: () => {
|
|
211
239
|
onValueChanged?.({ target: { value: undefined } });
|