From 56e31bd0d4d2626bba91e745b2cacd8e2006a67a Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Mon, 3 Mar 2025 16:53:00 -0700 Subject: [PATCH] dropdown updates --- .../StatusDropdownContent.tsx | 4 +- web/src/components/ui/dropdown/Dropdown.tsx | 172 ++++++++++-------- web/src/context/Chats/ChatProvider/index.ts | 3 - 3 files changed, 97 insertions(+), 82 deletions(-) diff --git a/web/src/components/features/metrics/StatusBadgeIndicator/StatusDropdownContent.tsx b/web/src/components/features/metrics/StatusBadgeIndicator/StatusDropdownContent.tsx index 34c2bab80..c77fb0c65 100644 --- a/web/src/components/features/metrics/StatusBadgeIndicator/StatusDropdownContent.tsx +++ b/web/src/components/features/metrics/StatusBadgeIndicator/StatusDropdownContent.tsx @@ -44,7 +44,7 @@ export const StatusDropdownContent: React.FC<{ }); }, [isAdmin, status, onChangeStatus]); - const onSelect = useMemoizedFn((item: DropdownItems[number]) => { + const onSelect = useMemoizedFn((item: DropdownItem) => { const _item = item as DropdownItem; onChangeStatus(_item.value as VerificationStatus); }); @@ -54,7 +54,7 @@ export const StatusDropdownContent: React.FC<{ emptyStateText="Nothing to see here..." items={items} onSelect={(v) => { - console.log(v); + v; }} selectType="single" menuHeader="Status"> diff --git a/web/src/components/ui/dropdown/Dropdown.tsx b/web/src/components/ui/dropdown/Dropdown.tsx index fca2b503b..fa4c89ab8 100644 --- a/web/src/components/ui/dropdown/Dropdown.tsx +++ b/web/src/components/ui/dropdown/Dropdown.tsx @@ -38,7 +38,7 @@ export interface DropdownItem { disabled?: boolean; loading?: boolean; selected?: boolean; - items?: DropdownItems; + items?: DropdownItems; link?: string; linkIcon?: 'arrow-right' | 'arrow-external' | 'caret-right'; } @@ -50,7 +50,7 @@ export interface DropdownDivider { export type DropdownItems = (DropdownItem | DropdownDivider | React.ReactNode)[]; export interface DropdownProps extends DropdownMenuProps { - items: DropdownItems; + items: DropdownItems; selectType?: 'single' | 'multiple' | 'none'; menuHeader?: string | React.ReactNode; //if string it will render a search box closeOnSelect?: boolean; @@ -68,8 +68,12 @@ const dropdownItemKey = (item: DropdownItems[number], index: number) => { return `item-${index}`; }; -export const Dropdown: React.FC = React.memo( - ({ +export const Test = ({}: { items: DropdownItems }) => { + return <>; +}; + +export const Dropdown = React.memo( + ({ items, selectType = 'none', menuHeader, @@ -86,7 +90,7 @@ export const Dropdown: React.FC = React.memo( footerContent, dir, modal - }) => { + }: DropdownProps) => { const { filteredItems, searchText, handleSearchChange } = useDebounceSearch({ items, searchPredicate: (item, searchText) => { @@ -163,9 +167,11 @@ export const Dropdown: React.FC = React.memo( if ((item as DropdownItem).value && !(item as DropdownItem).items) { hotkeyIndex++; } + + onSelect; return ( [number]} index={hotkeyIndex} selectType={selectType} onSelect={onSelect} @@ -182,9 +188,10 @@ export const Dropdown: React.FC = React.memo( if ((item as DropdownItem).value && !(item as DropdownItem).items) { hotkeyIndex++; } + return ( [number]} index={hotkeyIndex} selectType={selectType} onSelect={onSelect} @@ -208,42 +215,47 @@ export const Dropdown: React.FC = React.memo( Dropdown.displayName = 'Dropdown'; -const DropdownItemSelector: React.FC<{ - item: DropdownItems[number]; - index: number; - onSelect: DropdownProps['onSelect']; - closeOnSelect: boolean; - selectType: DropdownProps['selectType']; -}> = React.memo(({ item, index, onSelect, closeOnSelect, selectType }) => { - if ((item as DropdownDivider).type === 'divider') { - return ; - } - - if (typeof item === 'object' && React.isValidElement(item)) { - return item; - } - - return ( - - ); -}); - -DropdownItemSelector.displayName = 'DropdownItemSelector'; - -const DropdownItem: React.FC< - DropdownItem & { - onSelect: DropdownProps['onSelect']; - closeOnSelect: boolean; +const DropdownItemSelector = React.memo( + ({ + item, + index, + onSelect, + closeOnSelect, + selectType + }: { + item: DropdownItems[number]; index: number; - selectType: DropdownProps['selectType']; + onSelect?: (value: T) => void; + closeOnSelect: boolean; + selectType: DropdownProps['selectType']; + }) => { + if ((item as DropdownDivider).type === 'divider') { + return ; + } + + if (typeof item === 'object' && React.isValidElement(item)) { + return item; + } + + return ( + + {...(item as DropdownItem)} + closeOnSelect={closeOnSelect} + onSelect={onSelect} + selectType={selectType} + index={index} + /> + ); } -> = ({ +) as (props: { + item: DropdownItems[number]; + index: number; + onSelect?: (value: T) => void; + closeOnSelect: boolean; + selectType: DropdownProps['selectType']; +}) => JSX.Element; + +const DropdownItem = ({ label, value, showIndex, @@ -262,6 +274,11 @@ const DropdownItem: React.FC< truncate, link, linkIcon +}: DropdownItem & { + onSelect?: (value: T) => void; + closeOnSelect: boolean; + index: number; + selectType: DropdownProps['selectType']; }) => { const onClickItem = useMemoizedFn((e: React.MouseEvent) => { if (onClick) onClick(); @@ -295,7 +312,6 @@ const DropdownItem: React.FC< const renderContent = () => { const content = ( <> - {showIndex && {index}} {icon && !loading && {icon}} {loading && }
@@ -310,6 +326,7 @@ const DropdownItem: React.FC< linkIcon={linkIcon} /> )} + {showIndex && {index}} ); @@ -372,41 +389,42 @@ const DropdownItem: React.FC< ); }; -const DropdownSubMenuWrapper = React.memo( - ({ - items, - children, - closeOnSelect, - onSelect, - selectType - }: { - items: DropdownItems | undefined; - children: React.ReactNode; - closeOnSelect: boolean; - onSelect?: DropdownProps['onSelect']; - selectType: DropdownProps['selectType']; - }) => { - return ( - - {children} - - - {items?.map((item, index) => ( - - ))} - - - - ); - } -); +interface DropdownSubMenuWrapperProps { + items: DropdownItems | undefined; + children: React.ReactNode; + closeOnSelect: boolean; + onSelect?: (value: T) => void; + selectType: DropdownProps['selectType']; +} + +const DropdownSubMenuWrapper = ({ + items, + children, + closeOnSelect, + onSelect, + selectType +}: DropdownSubMenuWrapperProps) => { + return ( + + {children} + + + {items?.map((item, index) => ( + + key={dropdownItemKey(item, index)} + item={item} + index={index} + onSelect={onSelect} + closeOnSelect={closeOnSelect} + selectType={selectType} + /> + ))} + + + + ); +}; + DropdownSubMenuWrapper.displayName = 'DropdownSubMenuWrapper'; const DropdownMenuHeaderSelector: React.FC<{ diff --git a/web/src/context/Chats/ChatProvider/index.ts b/web/src/context/Chats/ChatProvider/index.ts index dcce373a8..4daf771ed 100644 --- a/web/src/context/Chats/ChatProvider/index.ts +++ b/web/src/context/Chats/ChatProvider/index.ts @@ -1,9 +1,6 @@ -import { MOCK_CHAT } from './MOCK_CHAT'; import { useChatIndividual } from './useChatIndividual'; import { useMessageIndividual } from './useMessageIndividual'; export * from './ChatProvider'; export { useChatIndividual, useMessageIndividual }; - -console.log(MOCK_CHAT);