@devtron-labs/devtron-fe-common-lib 0.0.6-beta-20 → 0.0.6-beta-22

package/src/Common/PopupMenu.tsx

@@ -3,126 +3,177 @@ import {Modal} from './Modals/Modal';
 const PopupContext = React.createContext(null);
 
 function usePopupContext() {
-    const context = React.useContext(PopupContext);
+    const context = React.useContext(PopupContext)
     if (!context) {
-        throw new Error(
-        `Select compound components cannot be rendered outside popupmenup`,
-        )
+        throw new Error(`Select compound components cannot be rendered outside popupmenup`)
     }
     return context
 }
 
-function PopupMenu({ children = null, onToggleCallback = null, autoClose = false}) {
-    const [popupPosition, setPopupPosition]=React.useState(null)
+function PopupMenu({ children = null, onToggleCallback = null, autoClose = false, autoPosition = false }) {
+    const [popupPosition, setPopupPosition] = React.useState(null)
     const [opacity, setOpacity] = React.useState(0)
-    const observer = React.useRef<IntersectionObserver | null>(null);
-    const buttonRef = React.useRef(null);
-    const buttonWidth = React.useRef(null);
+    const observer = React.useRef<IntersectionObserver | null>(null)
+    const buttonRef = React.useRef(null)
+    const buttonWidth = React.useRef(null)
 
-    React.useEffect(()=>{
+    React.useEffect(() => {
         observer.current = window.IntersectionObserver ? new IntersectionObserver(intersectionCallback, options) : null
-        return ()=>{
-            if(observer && observer.current && observer.current.disconnect) observer.current.disconnect();
+        return () => {
+            if (observer && observer.current && observer.current.disconnect) observer.current.disconnect()
         }
-    },[])
+    }, [])
 
     useEffect(() => {
         if (typeof onToggleCallback === 'function') {
             if (popupPosition) {
                 onToggleCallback(true)
-            }
-            else {
+            } else {
                 onToggleCallback(false)
             }
         }
     }, [popupPosition])
 
+    useEffect(() => {
+        if (buttonRef?.current && autoPosition && popupPosition) {
+            const { height, x, y } = buttonRef.current.getBoundingClientRect()
+            setPopupPosition({ left: x, top: y + height })
+        }
+    }, [buttonRef?.current?.clientHeight])
+
     let options = {
         root: null,
         rootMargin: '0px',
-        threshold: 1.0
+        threshold: 1.0,
     }
 
-    if(!children) return children
+    if (!children) return children
 
     function intersectionCallback(entries, observer) {
-        entries.forEach(entry => {
+        entries.forEach((entry) => {
             if (entry.isIntersecting && entry.intersectionRatio >= 1) {
                 setOpacity(1)
-            }
-            else {
-                const {boundingClientRect, rootBounds} = entry
-                const {x, y, height, width} = boundingClientRect
-                const {x: buttonX, y: buttonY, height: buttonHeight, width: buttonWidth, left: buttonLeft, right: buttonRight, top: buttonTop, bottom: buttonBottom} = buttonRef.current.getBoundingClientRect();
-                if(y + height > rootBounds.height){
-                    setPopupPosition({ left: buttonX, bottom: document.documentElement.clientHeight - buttonY})
+            } else {
+                const { boundingClientRect, rootBounds } = entry
+                const { x, y, height, width } = boundingClientRect
+                const {
+                    x: buttonX,
+                    y: buttonY,
+                    height: buttonHeight,
+                    width: buttonWidth,
+                    left: buttonLeft,
+                    right: buttonRight,
+                    top: buttonTop,
+                    bottom: buttonBottom,
+                } = buttonRef.current.getBoundingClientRect()
+                if (y + height > rootBounds.height) {
+                    setPopupPosition({ left: buttonX, bottom: document.documentElement.clientHeight - buttonY })
                     setOpacity(1)
                 }
-                if(x + width > rootBounds.width){
+                if (x + width > rootBounds.width) {
                     // setPopupPosition(position => ({ right: document.documentElement.clientWidth - buttonLeft,...position, left:'unset' }))
-                    setPopupPosition(position=>({...position, right: '20px', left:'unset'}))
+                    setPopupPosition((position) => ({ ...position, right: '20px', left: 'unset' }))
                     setOpacity(1)
                 }
             }
-        });
+        })
     }
 
-    const handleOpen = (e)=>{
-        e.stopPropagation();
+    const handleOpen = (e) => {
+        e.stopPropagation()
         setOpacity(0)
-        const { bottom,height,left,right,top,width,x,y } = e.currentTarget.getBoundingClientRect()
-        setPopupPosition({left: x, top: y + height})
+        const { height, x, y } = e.currentTarget.getBoundingClientRect()
+        setPopupPosition({ left: x, top: y + height })
     }
 
-    const handleClose = (e, inOrOut) =>{
-        if(autoClose || inOrOut === 'out'){
-            if(observer && observer.current && observer.current.disconnect) observer.current.disconnect()
+    const handleClose = (e, inOrOut) => {
+        if (autoClose || inOrOut === 'out') {
+            if (observer && observer.current && observer.current.disconnect) observer.current.disconnect()
             setOpacity(0)
             setPopupPosition(null)
-        }
-        else{
-            e.stopPropagation();
+        } else {
+            e.stopPropagation()
         }
     }
 
-
     function callbackRef(element) {
-        if (element && observer?.current?.observe){
+        if (element && observer?.current?.observe) {
             observer.current.observe(element)
-        }
-        else observer.current.disconnect();
+        } else observer.current.disconnect()
     }
 
-    function initialiseButtonWidth(buttonEl){
-        if(!buttonEl) return
+    function initialiseButtonWidth(buttonEl) {
+        if (!buttonEl) return
         buttonRef.current = buttonEl
         const { bottom, height, left, right, top, width, x, y } = buttonEl.getBoundingClientRect()
-        buttonWidth.current=width;
+        buttonWidth.current = width
     }
 
-    return <PopupContext.Provider value={{handleOpen, popupPosition, handleClose, opacity, setPopupPosition, callbackRef, buttonRef, initialiseButtonWidth, buttonWidth}}>
-        {children}
-    </PopupContext.Provider>
-
+    return (
+        <PopupContext.Provider
+            value={{
+                handleOpen,
+                popupPosition,
+                handleClose,
+                opacity,
+                setPopupPosition,
+                callbackRef,
+                buttonRef,
+                initialiseButtonWidth,
+                buttonWidth,
+            }}
+        >
+            {children}
+        </PopupContext.Provider>
+    )
 }
 
-function Button({ children = null, disabled = false, rootClassName = "", tabIndex = 0, onHover = false, isKebab = false  }) {
+function Button({
+    children = null,
+    disabled = false,
+    rootClassName = '',
+    tabIndex = 0,
+    onHover = false,
+    isKebab = false,
+}) {
     const { handleOpen, popupPosition, buttonRef, initialiseButtonWidth } = usePopupContext()
-    return <button ref={initialiseButtonWidth} type="button"
-        tabIndex={tabIndex}
-        disabled={disabled}
-        className={`${rootClassName} ${popupPosition ? 'focused' : ''}  ${isKebab ? 'popup-button-kebab':"popup-button" }`}
-        onMouseEnter={onHover ? (disabled ? null : handleOpen) : () => { }}
-        onClick={disabled ? null : handleOpen} >
-        {children}
-    </button>
+    return (
+        <button
+            ref={initialiseButtonWidth}
+            type="button"
+            tabIndex={tabIndex}
+            disabled={disabled}
+            className={`${rootClassName} ${popupPosition ? 'focused' : ''}  ${
+                isKebab ? 'popup-button-kebab' : 'popup-button'
+            }`}
+            onMouseEnter={onHover ? (disabled ? null : handleOpen) : () => {}}
+            onClick={disabled ? null : handleOpen}
+        >
+            {children}
+        </button>
+    )
 }
 
-function Body({children=null, rootClassName="", style={}, autoWidth=false}){
-    const {handleClose, popupPosition, opacity, callbackRef, buttonWidth} = usePopupContext()
-    return popupPosition ? <Modal callbackRef={callbackRef} onClick={handleClose} rootClassName={`${rootClassName} popup-body ${!children ? 'popup-body--empty' : ''} ${Object.keys(popupPosition).join(" ")}`}  style={{...popupPosition, ...style,...(autoWidth ? {width: buttonWidth.current} : {}), opacity:opacity}}>
-        {children}
-    </Modal> : null
+function Body({ children = null, rootClassName = '', style = {}, autoWidth = false, preventWheelDisable = false }) {
+    const { handleClose, popupPosition, opacity, callbackRef, buttonWidth } = usePopupContext()
+    return popupPosition ? (
+        <Modal
+            callbackRef={callbackRef}
+            onClick={handleClose}
+            rootClassName={`${rootClassName} popup-body ${!children ? 'popup-body--empty' : ''} ${Object.keys(
+                popupPosition,
+            ).join(' ')}`}
+            style={{
+                ...popupPosition,
+                ...style,
+                ...(autoWidth ? { width: buttonWidth.current } : {}),
+                opacity: opacity,
+            }}
+            preventWheelDisable={preventWheelDisable}
+        >
+            {children}
+        </Modal>
+    ) : null
 }
 
 PopupMenu.Button = Button

package/src/Common/TippyCustomized.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, useRef } from 'react'
 import Tippy from '@tippyjs/react'
 import { Placement } from 'tippy.js'
-import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-close.svg'
+import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-cross.svg'
 import 'tippy.js/animations/shift-toward-subtle.css'
 import { TippyTheme } from './Types'
 
@@ -133,7 +133,7 @@ export function TippyCustomized(props: TippyCustomizedProps) {
                             href={documentationLink}
                             target="_blank"
                             rel="noreferrer noopener"
-                            className="cb-5"
+                            className="fs-13 cb-5"
                             onClick={closeTippy}
                         >
                             {documentationLinkText || 'Learn more'}

package/src/Common/Types.ts

@@ -1,4 +1,4 @@
-import { TagLabelSelect } from './CustomTagSelector'
+import { KEY_VALUE } from './Constants'
 
 export interface ResponseType {
     code: number
@@ -13,16 +13,6 @@ export interface APIOptions {
     preventAutoLogout?: boolean
 }
 
-export interface TagType {
-    key: string
-    value?: string
-    description?: string
-    propagate: boolean
-    mandatoryProjectIdsCsv?: string[]
-    isInvalidKey?: boolean
-    isInvalidValue?: boolean
-}
-
 export interface OptionType {
     label: string
     value: string
@@ -33,16 +23,33 @@ export enum TippyTheme {
     white = 'white',
 }
 
+export interface TagType {
+  key: string
+  value?: string
+  description?: string
+  propagate: boolean
+  mandatoryProjectIdsCsv?: string[]
+  isInvalidKey?: boolean
+  isInvalidValue?: boolean
+}
+
+export interface TagErrorType {
+  isValid: boolean
+  messages: string[]
+}
 export interface TagLabelSelectType {
-    labelTags: TagType[]
-    setLabelTags: (tagList: TagType[]) => void
+  isCreateApp?: boolean
+  labelTags: TagType[]
+  setLabelTags: (tagList: TagType[]) => void
+  tabIndex?: number
 }
 
 export interface TagDetailType {
-    index: number
-    tagData: TagType
-    setTagData: (index: number, tagData: TagType) => void
-    removeTag: (index: number) => void
+  index: number
+  tagData: TagType
+  setTagData: (index: number, tagData: TagType) => void
+  removeTag: (index: number) => void
+  tabIndex?: number
 }
 
 export interface TagLabelValueSelectorType {
@@ -51,8 +58,25 @@ export interface TagLabelValueSelectorType {
   setTagData: (index: number, tagData: TagType) => void
   tagOptions?: OptionType[]
   isRequired?: boolean
-  type?: string
+  tagInputType?: KEY_VALUE
+  placeholder?: string
+  tabIndex?: number
+  refVar?: React.MutableRefObject<HTMLTextAreaElement>
+  dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
+}
+
+export interface ResizableTagTextAreaProps {
+  className?: string
+  minHeight?: number
+  maxHeight?: number
+  value?: string
+  onChange?: (e) => void
+  onBlur?: (e) => void
+  onFocus?: (e) => void
   placeholder?: string
+  tabIndex?: number
+  refVar?: React.MutableRefObject<HTMLTextAreaElement>
+  dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
 }
 
 export interface TeamList extends ResponseType {

package/src/Common/index.ts

@@ -22,4 +22,5 @@ export * from './CustomTagSelector'
 export * from './Dialogs'
 export * from './MultiSelectCustomization'
 export {default as InfoColourBar} from './InfoColorBar/InfoColourbar'
-export * from './Common.service'
+export * from './Common.service'
+export * from './Checkbox'