@topconsultnpm/sdkui-react 6.19.0-dev2.46 → 6.19.0-dev2.47
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.
|
@@ -28,7 +28,7 @@ const StyledTextAreaEditorButton = styled.div `
|
|
|
28
28
|
// Define the TMTextArea component
|
|
29
29
|
const TMTextArea = (props) => {
|
|
30
30
|
// Extract properties from the props object
|
|
31
|
-
const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true } = props;
|
|
31
|
+
const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true, autoCalculateRows = true } = props;
|
|
32
32
|
// Reference to the textarea DOM element
|
|
33
33
|
const inputRef = useRef(null);
|
|
34
34
|
// Stores the textarea is focused
|
|
@@ -46,6 +46,8 @@ const TMTextArea = (props) => {
|
|
|
46
46
|
const deviceType = useDeviceType();
|
|
47
47
|
// Attach a `ResizeObserver` to the textarea to monitor changes in width: dynamically updates rows based on textarea content and width
|
|
48
48
|
useEffect(() => {
|
|
49
|
+
if (!autoCalculateRows)
|
|
50
|
+
return;
|
|
49
51
|
const observer = new ResizeObserver(() => { if (currentValue) {
|
|
50
52
|
updateRows();
|
|
51
53
|
} });
|
|
@@ -55,18 +57,18 @@ const TMTextArea = (props) => {
|
|
|
55
57
|
return () => { if (inputRef.current) {
|
|
56
58
|
observer.unobserve(inputRef.current);
|
|
57
59
|
} };
|
|
58
|
-
}, [currentValue]);
|
|
60
|
+
}, [currentValue, autoCalculateRows]);
|
|
59
61
|
// Update current value whenever the `value` prop changes, synchronize the internal state with the `value` prop
|
|
60
62
|
useEffect(() => {
|
|
61
63
|
setCurrentValue(value);
|
|
62
64
|
}, [value]);
|
|
63
65
|
// Recalculate the number of rows whenever the `currentValue` changes
|
|
64
66
|
useEffect(() => {
|
|
65
|
-
if (currentValue) {
|
|
67
|
+
if (autoCalculateRows && currentValue) {
|
|
66
68
|
const newRowCount = calculateRows(currentValue);
|
|
67
69
|
setCalculatedRows(newRowCount);
|
|
68
70
|
}
|
|
69
|
-
}, [currentValue]);
|
|
71
|
+
}, [currentValue, autoCalculateRows]);
|
|
70
72
|
// Populate the formula menu items whenever the `formulaItems` prop changes
|
|
71
73
|
useEffect(() => {
|
|
72
74
|
if (formulaItems && formulaItems.length > 0) {
|
|
@@ -171,7 +173,8 @@ const TMTextArea = (props) => {
|
|
|
171
173
|
_jsx(StyledTextAreaEditorButton, { onClick: () => {
|
|
172
174
|
onValueChanged?.({ target: { value: undefined } });
|
|
173
175
|
setCurrentValue('');
|
|
174
|
-
|
|
176
|
+
if (autoCalculateRows)
|
|
177
|
+
setCalculatedRows(1);
|
|
175
178
|
onBlur?.(undefined);
|
|
176
179
|
}, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
|
|
177
180
|
return (_jsx(StyledTextAreaEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
|