From 214c2900139d658de0ce56c2e752d51c7e1cdd64 Mon Sep 17 00:00:00 2001 From: JWittmeyer Date: Wed, 20 Nov 2024 14:06:35 +0100 Subject: [PATCH 1/3] Extends dropdown to allow additional itmes appended --- components/KernDropdown.tsx | 2 ++ types/dropdown.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/components/KernDropdown.tsx b/components/KernDropdown.tsx index f77866c..db0553e 100644 --- a/components/KernDropdown.tsx +++ b/components/KernDropdown.tsx @@ -238,6 +238,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 +261,7 @@ export default function KernDropdown(props: KernDropdownProps) { {option} {props.onClickDelete &&
{ e.stopPropagation(); props.onClickDelete(option) }}>
} {props.optionsHaveLink && } + {props.dropdownAdd && props.dropdownAdd[index]} diff --git a/types/dropdown.ts b/types/dropdown.ts index e420cf0..7d2005f 100644 --- a/types/dropdown.ts +++ b/types/dropdown.ts @@ -39,6 +39,7 @@ * @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 */ export type KernDropdownProps = { buttonName?: string; @@ -84,6 +85,7 @@ export type KernDropdownProps = { ignoreDisabledForSearch?: boolean; positionDropdown?: "top" | "bottom" | "left" | "right"; scrollAfterNOptions?: number; + dropdownAdd?: JSX.Element[]; } export type AppSelectionDropdownProps = { From 6bc43b379b817aff7c0c4b681937bb6affd27d86 Mon Sep 17 00:00:00 2001 From: JWittmeyer Date: Thu, 21 Nov 2024 15:06:00 +0100 Subject: [PATCH 2/3] Adds disabled flag to local storage dropdown --- components/LocalStorageDropdown.tsx | 4 +++- types/localStorageDropdown.ts | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/components/LocalStorageDropdown.tsx b/components/LocalStorageDropdown.tsx index b8c3aaa..800e52a 100644 --- a/components/LocalStorageDropdown.tsx +++ b/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} /> } diff --git a/types/localStorageDropdown.ts b/types/localStorageDropdown.ts index 6017161..6d0a889 100644 --- a/types/localStorageDropdown.ts +++ b/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; } From dc4617a2076cc84e0adbf92d139a5d478811a84e Mon Sep 17 00:00:00 2001 From: JWittmeyer Date: Wed, 27 Nov 2024 12:37:29 +0100 Subject: [PATCH 3/3] Adds force open option --- components/KernDropdown.tsx | 9 +++++++-- types/dropdown.ts | 2 ++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/components/KernDropdown.tsx b/components/KernDropdown.tsx index db0553e..d9b5a47 100644 --- a/components/KernDropdown.tsx +++ b/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([]); const [backgroundColors, setBackgroundColors] = useState([]); const [searchText, setSearchText] = useState(''); - const [isOpen, setIsOpen] = useState(false); + const [isOpen, setIsOpen_] = useState(false); const [selectedCheckboxes, setSelectedCheckboxes] = useState([]); 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)); diff --git a/types/dropdown.ts b/types/dropdown.ts index 7d2005f..3f8ffe1 100644 --- a/types/dropdown.ts +++ b/types/dropdown.ts @@ -40,6 +40,7 @@ * @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; @@ -86,6 +87,7 @@ export type KernDropdownProps = { positionDropdown?: "top" | "bottom" | "left" | "right"; scrollAfterNOptions?: number; dropdownAdd?: JSX.Element[]; + forceOverwriteOpen?: boolean; } export type AppSelectionDropdownProps = {