@devtron-labs/devtron-fe-common-lib 0.0.18 → 0.0.19

package/dist/Common/ResizableTextarea.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ResizableTextareaProps } from './Types';
+export declare const ResizableTextarea: React.FC<ResizableTextareaProps>;

package/dist/Common/Types.d.ts

@@ -338,4 +338,19 @@ export interface UseSearchString {
         [key: string]: string;
     };
 }
+export interface ResizableTextareaProps {
+    minHeight?: number;
+    maxHeight?: number;
+    value?: string;
+    onChange?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    className?: string;
+    placeholder?: string;
+    lineHeight?: number;
+    padding?: number;
+    disabled?: boolean;
+    name?: string;
+    dataTestId?: string;
+}
 export {};

package/dist/Common/index.d.ts

@@ -34,3 +34,4 @@ export * from './Policy.Types';
 export { default as DeleteComponent } from './DeleteComponentModal/DeleteComponent';
 export * from './ImageTags';
 export * from './ImageTags.Types';
+export * from './ResizableTextarea';

package/dist/index.js

@@ -23307,6 +23307,41 @@ var AddImageButton = function (_a) {
     return (jsxRuntime.jsx("div", __assign({ className: "add-tag-button flex pt-12 pr-12", "data-testid": "add-tags-button", onClick: handleClick }, { children: jsxRuntime.jsxs("div", __assign({ className: "lh-16 flex" }, { children: [jsxRuntime.jsx(SvgIcAdd, { className: "icon-dim-16 cn-6" }), jsxRuntime.jsx("span", __assign({ className: "cn-7" }, { children: "Add tags/comment" }))] })) })));
 };
 
+var ResizableTextarea = function (_a) {
+    var minHeight = _a.minHeight, maxHeight = _a.maxHeight, value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? null : _b, _c = _a.onBlur, onBlur = _c === void 0 ? null : _c, _d = _a.onFocus, onFocus = _d === void 0 ? null : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.placeholder, placeholder = _f === void 0 ? 'Enter your text here..' : _f, _g = _a.lineHeight, lineHeight = _g === void 0 ? 14 : _g, _h = _a.padding, padding = _h === void 0 ? 12 : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, dataTestId = _a.dataTestId, props = __rest(_a, ["minHeight", "maxHeight", "value", "onChange", "onBlur", "onFocus", "className", "placeholder", "lineHeight", "padding", "disabled", "dataTestId"]);
+    var _k = __read(React.useState(''), 2), text = _k[0], setText = _k[1];
+    var _textRef = React.useRef(null);
+    React.useEffect(function () {
+        setText(value);
+    }, [value]);
+    function handleChange(e) {
+        e.persist();
+        setText(e.target.value);
+        if (typeof onChange === 'function')
+            onChange(e);
+    }
+    function handleBlur(e) {
+        if (typeof onBlur === 'function')
+            onBlur(e);
+    }
+    function handleFocus(e) {
+        if (typeof onFocus === 'function')
+            onFocus(e);
+    }
+    useThrottledEffect(function () {
+        _textRef.current.style.height = 'auto';
+        var nextHeight = _textRef.current.scrollHeight;
+        if (minHeight && nextHeight < minHeight) {
+            nextHeight = minHeight;
+        }
+        if (maxHeight && nextHeight > maxHeight) {
+            nextHeight = maxHeight;
+        }
+        _textRef.current.style.height = nextHeight + 2 + 'px';
+    }, 500, [text]);
+    return (jsxRuntime.jsx("textarea", __assign({ "data-testid": dataTestId, ref: function (el) { return (_textRef.current = el); }, value: text, placeholder: placeholder, className: "dc__resizable-textarea ".concat(className), onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, style: { lineHeight: "".concat(lineHeight, "px"), padding: "".concat(padding, "px") }, spellCheck: false, disabled: disabled }, props)));
+};
+
 exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
 exports.BuildStageVariable = BuildStageVariable;
@@ -23353,6 +23388,7 @@ exports.RadioGroupItem = RadioGroupItem;
 exports.Reload = Reload;
 exports.RequestTimeout = RequestTimeout;
 exports.ResizableTagTextArea = ResizableTagTextArea;
+exports.ResizableTextarea = ResizableTextarea;
 exports.ScanVulnerabilitiesTable = ScanVulnerabilitiesTable;
 exports.ServerError = ServerError;
 exports.ServerErrors = ServerErrors;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.18",
+    "version": "0.0.19",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/ResizableTextarea.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useThrottledEffect } from './Helper'
+import { ResizableTextareaProps } from './Types'
+
+export const ResizableTextarea: React.FC<ResizableTextareaProps> = ({
+                                                                        minHeight,
+                                                                        maxHeight,
+                                                                        value,
+                                                                        onChange = null,
+                                                                        onBlur = null,
+                                                                        onFocus = null,
+                                                                        className = '',
+                                                                        placeholder = 'Enter your text here..',
+                                                                        lineHeight = 14,
+                                                                        padding = 12,
+                                                                        disabled = false,
+                                                                        dataTestId,
+                                                                        ...props
+                                                                    }) => {
+    const [text, setText] = useState('')
+    const _textRef = useRef(null)
+
+    useEffect(() => {
+        setText(value)
+    }, [value])
+
+    function handleChange(e) {
+        e.persist()
+        setText(e.target.value)
+        if (typeof onChange === 'function') onChange(e)
+    }
+
+    function handleBlur(e) {
+        if (typeof onBlur === 'function') onBlur(e)
+    }
+
+    function handleFocus(e) {
+        if (typeof onFocus === 'function') onFocus(e)
+    }
+
+    useThrottledEffect(
+        () => {
+            _textRef.current.style.height = 'auto'
+            let nextHeight = _textRef.current.scrollHeight
+            if (minHeight && nextHeight < minHeight) {
+                nextHeight = minHeight
+            }
+            if (maxHeight && nextHeight > maxHeight) {
+                nextHeight = maxHeight
+            }
+            _textRef.current.style.height = nextHeight + 2 + 'px'
+        },
+        500,
+        [text],
+    )
+
+    return (
+        <textarea
+            data-testid={dataTestId}
+            ref={(el) => (_textRef.current = el)}
+            value={text}
+            placeholder={placeholder}
+            className={`dc__resizable-textarea ${className}`}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+            style={{ lineHeight: `${lineHeight}px`, padding: `${padding}px` }}
+            spellCheck={false}
+            disabled={disabled}
+            {...props}
+        />
+    )
+}

package/src/Common/Types.ts

@@ -371,4 +371,20 @@ export interface UseSearchString {
     searchParams: {
         [key: string]: string
     }
+}
+
+export interface ResizableTextareaProps {
+    minHeight?: number
+    maxHeight?: number
+    value?: string
+    onChange?: (e) => void
+    onBlur?: (e) => void
+    onFocus?: (e) => void
+    className?: string
+    placeholder?: string
+    lineHeight?: number
+    padding?: number
+    disabled?: boolean
+    name?: string
+    dataTestId?: string
 }

package/src/Common/index.ts

@@ -34,3 +34,4 @@ export * from './Policy.Types'
 export { default as DeleteComponent } from './DeleteComponentModal/DeleteComponent'
 export * from './ImageTags'
 export * from './ImageTags.Types'
+export * from './ResizableTextarea'