@topconsultnpm/sdkui-react-beta 6.5.57 → 6.5.59

package/lib/components/editors/TMEditorStyled.d.ts

@@ -28,3 +28,12 @@ export declare const StyledEditorButtonIcon: import("styled-components/dist/type
     $index: number;
     $transform: string;
 }>> & string;
+export declare const StyledTextareaEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {
+    $vil: ValidationItem[];
+    $width: string;
+    $isModified: boolean;
+    $fontSize: string;
+    $disabled: boolean;
+    $isMobile?: boolean;
+    $maxHeight?: string;
+}>> & string;

package/lib/components/editors/TMEditorStyled.js

@@ -73,3 +73,45 @@ export const StyledEditorButtonIcon = styled.div `
         border-bottom-color: ${TMColors.primary};
      }
 `;
+export const StyledTextareaEditor = styled.textarea `
+    width: ${props => props.$width};
+    padding: 8px 13px; 
+    border: 1px solid;
+    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+    border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid;
+    border-bottom-color: ${props => props.$vil.length === 0
+    ? !props.$isModified
+        ? TMColors.border_normal
+        : TMColors.isModified
+    : editorColorManager(props.$vil)};
+    color: ${props => !props.$disabled
+    ? props.$vil.length === 0
+        ? !props.$isModified
+            ? 'black'
+            : TMColors.isModified
+        : editorColorManager(props.$vil)
+    : TMColors.disabled};
+    border-radius: 4px; /* Slightly increased radius for smoother corners */
+    min-width: ${props => (props.$isMobile ? '70px' : '100%')}; /* Adjust for mobile */
+    max-height: ${props => props.$maxHeight || 'auto'}; 
+    &:focus {
+      outline: none;
+      background-image: linear-gradient(white, #E4E9F7);
+      border: ${props => props.$isModified
+    ? `1px solid ${TMColors.isModified}`
+    : '1px solid rgb(180,180,180)'};
+      border-bottom: 2px solid;
+      border-bottom-color: ${props => props.$vil.length === 0
+    ? !props.$isModified
+        ? TMColors.primary
+        : TMColors.isModified
+    : editorColorManager(props.$vil)};
+    }
+    
+    font-size: ${props => props.$fontSize};
+    
+    &::placeholder {
+      color: ${props => (props.$vil.length === 0) ? 'gray' : editorColorManager(props.$vil)};
+      font-size: ${props => props.$fontSize};
+    }
+  `;

package/lib/components/editors/TMTextArea.d.ts

@@ -0,0 +1,19 @@
+import React, { ChangeEvent } from 'react';
+import { ITMEditorBase } from '../base/TMEditorBase';
+export type TMTextAreaButtonData = {
+    icon: any;
+    text?: string;
+    onClick?: () => void;
+};
+interface ITMTextArea extends ITMEditorBase {
+    value: string;
+    onValueChanged: ((e: ChangeEvent<HTMLTextAreaElement>) => void) | undefined;
+    formulaItems?: Array<string>;
+    buttons?: Array<TMTextAreaButtonData>;
+    onBlur?: (value: string | undefined) => void;
+    autoFocus?: boolean;
+    maxValue?: number;
+    maxHeight?: string;
+}
+declare const TMTextArea: React.FunctionComponent<ITMTextArea>;
+export default TMTextArea;

package/lib/components/editors/TMTextArea.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { StyledEditorButtonIcon, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, StyledTextareaEditor } from './TMEditorStyled';
+import { FontSize } from '../../utils/theme';
+import { useWindowWidth } from '../../helper';
+import TMContextMenu, { useContextMenu } from '../base/TMContextMenu';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
+import TMVilViewer from '../base/TMVilViewer';
+import TMTooltip from '../base/TMTooltip';
+const TMTextArea = (props) => {
+    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' } = props;
+    const inputRef = useRef(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const [currentValue, setCurrentValue] = useState(value);
+    const [formulaMenuItems, setFormulaMenuItems] = useState([]);
+    const { clicked, setClicked, points, setPoints } = useContextMenu();
+    let screenWidth = useWindowWidth();
+    useEffect(() => {
+        setCurrentValue(value);
+    }, [value]);
+    useEffect(() => {
+        if (formulaItems && formulaItems.length > 0) {
+            let menuItems = [];
+            for (const formula of formulaItems) {
+                menuItems.push({ text: formula });
+            }
+            setFormulaMenuItems(menuItems);
+        }
+    }, [formulaItems]);
+    const insertText = (textToInsert) => {
+        if (inputRef?.current == null)
+            return;
+        try {
+            let cursorposition = inputRef.current?.selectionStart;
+            let textbeforecursorposition = inputRef.current?.value.substring(0, cursorposition);
+            let textaftercursorposition = inputRef.current?.value.substring(cursorposition, inputRef.current?.value.length);
+            let newValue = textbeforecursorposition + textToInsert + textaftercursorposition;
+            inputRef.current.value = newValue;
+            onValueChanged?.({ target: { value: newValue } });
+            inputRef.current.focus();
+            inputRef.current.selectionStart = inputRef.current.selectionEnd = cursorposition + textToInsert.length;
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+    };
+    const renderTextArea = () => {
+        return _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, onContextMenu: (e) => {
+                        if (formulaItems.length <= 0)
+                            return;
+                        // prevent default right click behavior
+                        e.preventDefault();
+                        // set our click state to true when a user right clicks
+                        setClicked(true);
+                        const bounds = e.currentTarget.getBoundingClientRect();
+                        const x = e.clientX - bounds.left;
+                        const y = e.clientY - bounds.top;
+                        // set the x and y coordinates of our users right click
+                        setPoints({ x, y });
+                    }, "$isMobile": screenWidth < 640, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width }), buttons.map((buttonItem, index) => {
+                    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 })] });
+    };
+    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, "$fontSize": fontSize, children: label ?? '' }), renderTextArea()] }) })] }));
+    };
+    return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextArea() }));
+};
+export default TMTextArea;

package/lib/components/index.d.ts

@@ -18,6 +18,7 @@ export { default as TMVilViewer } from './base/TMVilViewer';
 export { default as TMDropDown } from './editors/TMDropDown';
 export { default as TMSummary } from './editors/TMSummary';
 export { default as TMTextBox } from './editors/TMTextBox';
+export { default as TMTextArea } from './editors/TMTextArea';
 export { default as TMCheckBox } from './editors/TMCheckBox';
 export { default as TMRadioButton } from './editors/TMRadioButton';
 export { default as TMDateBox } from './editors/TMDateBox';

package/lib/components/index.js

@@ -21,6 +21,7 @@ export { default as TMVilViewer } from './base/TMVilViewer';
 export { default as TMDropDown } from './editors/TMDropDown';
 export { default as TMSummary } from './editors/TMSummary';
 export { default as TMTextBox } from './editors/TMTextBox';
+export { default as TMTextArea } from './editors/TMTextArea';
 export { default as TMCheckBox } from './editors/TMCheckBox';
 export { default as TMRadioButton } from './editors/TMRadioButton';
 export { default as TMDateBox } from './editors/TMDateBox';

package/package.json

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