Pipeline Versions (#32)

* Extends dropdown to allow additional itmes appended

* Adds disabled flag to local storage dropdown

* Adds force open option

Author: JWittmeyer

components/KernDropdown.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react'
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Menu, Transition } from '@headlessui/react'
 import { KernDropdownProps } from '../types/dropdown';
 import { combineClassNames } from '../../javascript-functions/general';
@@ -10,6 +10,7 @@ import useOnClickOutside from '../hooks/useHooks/useOnClickOutside';
 import { useDefaults } from '../hooks/useDefaults';
 import SVGIcon from './SVGIcon';
 import { CSSProperties } from 'react';
+import useRefFor from '../hooks/useRefFor';
 
 const DEFAULTS = { fontSizeClass: 'text-xs' };
 
@@ -20,12 +21,16 @@ export default function KernDropdown(props: KernDropdownProps) {
     const [disabledOptions, setDisabledOptions] = useState<boolean[]>([]);
     const [backgroundColors, setBackgroundColors] = useState<string[]>([]);
     const [searchText, setSearchText] = useState('');
-    const [isOpen, setIsOpen] = useState(false);
+    const [isOpen, setIsOpen_] = useState(false);
     const [selectedCheckboxes, setSelectedCheckboxes] = useState<any[]>([]);
     const [position, setPosition] = useState(null);
     const [savedIndex, setSavedIndex] = useState(null);
 
     const [defaultProps] = useDefaults<{ fontSizeClass: string }>(props, DEFAULTS);
+    const forceOpenRef = useRefFor(props.forceOverwriteOpen);
+
+    // catches all isOpen changes & sets the value if it is not forced to be open
+    const setIsOpen = useCallback((value: boolean) => { if ((!value && !forceOpenRef.current) || value) setIsOpen_(value) }, [])
 
     const dropdownRef = useRef(null);
     useOnClickOutside(dropdownRef, () => setIsOpen(false));
@@ -238,6 +243,7 @@ export default function KernDropdown(props: KernDropdownProps) {
                                                         backgroundColors[index], props.useDifferentTextColor && props.useDifferentTextColor[index] ? 'text-' + props.differentTextColor + '-700' : active && !backgroundColors[index] ? "bg-gray-100 text-gray-900" : "text-gray-700",
                                                         props.iconsArray && props.iconsArray[index] ? "px-2" : "px-4",
                                                         defaultProps.fontSizeClass,
+                                                        props.dropdownAdd ? "inline-flex w-full justify-between" : "",
                                                         "py-2 flex items-center"
                                                     )}
                                                     onClick={() => {
@@ -260,6 +266,7 @@ export default function KernDropdown(props: KernDropdownProps) {
                                                     <span className='truncate'>{option}</span>
                                                     {props.onClickDelete && <div className="ml-auto flex items-center cursor-pointer hover:bg-gray-200" onClick={(e) => { e.stopPropagation(); props.onClickDelete(option) }}><IconTrashXFilled size={20} /></div>}
                                                     {props.optionsHaveLink && <a href={props.linkList[index]} target="_blank" className="h-4 w-4 mr-2 ml-auto flex items-center cursor-pointer"><IconExternalLink size={16} /></a>}
+                                                    {props.dropdownAdd && props.dropdownAdd[index]}
                                                 </label>
                                             </Tooltip>
                                         </div>

components/LocalStorageDropdown.tsx

@@ -113,6 +113,7 @@ export const LocalStorageDropdown = forwardRef((_props: LocalStorageDropdownProp
                     setInputText(inputText)
                     onOptionSelected(inputText)
                 }}
+                disabled={props.disabled}
 
             /> :
 
@@ -121,7 +122,8 @@ export const LocalStorageDropdown = forwardRef((_props: LocalStorageDropdownProp
             }}
                 className="h-9 w-full text-sm border-gray-300 rounded-md placeholder-italic border text-gray-900 pl-4 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-100"
                 placeholder="Enter value..."
-                onFocus={(event) => event.target.select()} />
+                onFocus={(event) => event.target.select()}
+                disabled={props.disabled} />
         }
 
 

types/dropdown.ts

@@ -39,6 +39,8 @@
  * @fontSizeClass {string} - The font size of the dropdown items
  * @ignoreDisabledForSearch {boolean} - If the search bar should ignore the disabled options
  * @positionDropdown {string} - The position of the dropdown
+ * @dropdownAdd {JSX.Element} - array of JSX elements that will be added to the dropdown items
+ * @forceOverwriteOpen {boolean} - forces the dropdown to stay open until set to false/undefined
 */
 export type KernDropdownProps = {
     buttonName?: string;
@@ -84,6 +86,8 @@ export type KernDropdownProps = {
     ignoreDisabledForSearch?: boolean;
     positionDropdown?: "top" | "bottom" | "left" | "right";
     scrollAfterNOptions?: number;
+    dropdownAdd?: JSX.Element[];
+    forceOverwriteOpen?: boolean;
 }
 
 export type AppSelectionDropdownProps = {

types/localStorageDropdown.ts

@@ -19,6 +19,7 @@ export type LocalStorageDropdownProps = {
     onOptionSelected?: (option: string) => void;
     searchDefaultValue?: string;
     excludedFromStorage?: { values: string[]; compareOptions?: CompareOptions[] }; // if the value is in this list it will not be added to the storage //setting this to null will assume all values are valid
+    disabled?: boolean;
 }