@topconsultnpm/sdkui-react-beta 6.7.99 → 6.7.100

package/lib/components/editors/TMTextArea.js

@@ -8,28 +8,47 @@ import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
 import TMTooltip from '../base/TMTooltip';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
+// Define the TMTextArea component
 const TMTextArea = (props) => {
+    // Extract properties from the props object
     const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength } = props;
+    // Reference to the textarea DOM element
     const inputRef = useRef(null);
+    // Stores the textarea is focused
     const [isFocused, setIsFocused] = useState(false);
+    // Stores the current value of the textarea
     const [currentValue, setCurrentValue] = useState(value);
+    // Stores the items for the context menu
     const [formulaMenuItems, setFormulaMenuItems] = useState([]);
+    // Stores the calculated number of rows for the textarea
     const [calculatedRows, setCalculatedRows] = useState(rows ?? 1);
+    // Manages the state for the custom context menu
     const { clicked, setClicked, points, setPoints } = useContextMenu();
     const deviceType = useDeviceType();
+    // Attach a `ResizeObserver` to the textarea to monitor changes in width: dynamically updates rows based on textarea content and width
+    useEffect(() => {
+        const observer = new ResizeObserver(() => { if (currentValue) {
+            updateRows();
+        } });
+        if (inputRef.current) {
+            observer.observe(inputRef.current);
+        }
+        return () => { if (inputRef.current) {
+            observer.unobserve(inputRef.current);
+        } };
+    }, [currentValue]);
+    // Update current value whenever the `value` prop changes, synchronize the internal state with the `value` prop
     useEffect(() => {
         setCurrentValue(value);
     }, [value]);
+    // Recalculate the number of rows whenever the `currentValue` changes
     useEffect(() => {
         if (currentValue) {
             const newRowCount = calculateRows(currentValue);
             setCalculatedRows(newRowCount);
         }
     }, [currentValue]);
-    const calculateRows = (content) => {
-        const lines = content.split('\n').length;
-        return Math.min(lines, 10);
-    };
+    // Populate the formula menu items whenever the `formulaItems` prop changes
     useEffect(() => {
         if (formulaItems && formulaItems.length > 0) {
             let menuItems = [];
@@ -39,6 +58,24 @@ const TMTextArea = (props) => {
             setFormulaMenuItems(menuItems);
         }
     }, [formulaItems]);
+    // Adjust the rows dynamically
+    const updateRows = () => {
+        const newRowCount = calculateRows(currentValue);
+        setCalculatedRows(newRowCount);
+    };
+    // Calculate the number of rows required to display the content
+    const calculateRows = (content) => {
+        if (!inputRef.current)
+            return rows ?? 1;
+        const textareaWidth = inputRef.current.offsetWidth;
+        const charWidth = 8;
+        const maxCharsPerLine = Math.floor(textareaWidth / charWidth);
+        const lines = content.split('\n').reduce((acc, line) => {
+            return acc + Math.ceil(line.length / maxCharsPerLine);
+        }, 0);
+        return Math.min(lines, 10);
+    };
+    // Inserts text at the cursor position
     const insertText = (textToInsert) => {
         if (inputRef?.current == null)
             return;
@@ -56,6 +93,7 @@ const TMTextArea = (props) => {
             TMExceptionBoxManager.show({ exception: e });
         }
     };
+    // Renders the textarea
     const renderTextArea = () => {
         return _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: calculatedRows, maxLength: maxLength, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
                         onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, onContextMenu: (e) => {
@@ -74,6 +112,7 @@ const TMTextArea = (props) => {
                     return (_jsx(StyledEditorButtonIcon, { onClick: buttonItem.onClick, "$index": index, "$transform": '-26px', children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, index));
                 }), formulaItems.length > 0 && clicked && (_jsx(TMContextMenu, { menuData: formulaMenuItems, top: points.y, left: points.x, onMenuItemClick: (formula) => insertText(formula) })), _jsx(TMVilViewer, { vil: validationItems })] });
     };
+    // Layout for the textarea with a left-aligned label
     const renderedLeftLabelTextArea = () => {
         return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label ?? '' }), renderTextArea()] }) })] }));
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.7.99",
+    "version": "6.7.100",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",