cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 fix: onChange not triggered. thanks @ayungavis

Browse Source
This commit is contained in:
Andre H 2024-02-29 09:16:01 +07:00
parent a5b4103515
commit fe427a9fb8
1 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/frontend/src/components/shared/UserSelect/UserSelect.tsx
View File

@ -5,14 +5,14 @@ import React, {
useEffect, useEffect,
} from 'react'; } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useCombobox } from 'downshift'; import { useSelect } from 'downshift';
import { UserSelectTheme, userSelectTheme } from './UserSelect.theme';
import { import {
BuildingIcon, BuildingIcon,
ChevronUpDown, ChevronUpDown,
SettingsSlidersIcon, SettingsSlidersIcon,
} from 'components/shared/CustomIcon'; } from 'components/shared/CustomIcon';
import { cn } from 'utils/classnames'; import { cn } from 'utils/classnames';
import { UserSelectTheme, userSelectTheme } from './UserSelect.theme';
import { EmptyUserSelectItem, UserSelectItem } from './UserSelectItem'; import { EmptyUserSelectItem, UserSelectItem } from './UserSelectItem';
export type UserSelectOption = { export type UserSelectOption = {
@ -77,23 +77,27 @@ export const UserSelect = ({ options, value }: UserSelectProps) => {
const isSelected = (item: UserSelectOption) => const isSelected = (item: UserSelectOption) =>
selectedItem?.value === item.value; selectedItem?.value === item.value;
const { isOpen, getMenuProps, highlightedIndex, getItemProps, openMenu } = const {
useCombobox({ isOpen,
items: options, getMenuProps,
// @ts-expect-error – there are two params but we don't need the second one getToggleButtonProps,
isItemDisabled: (item) => item.disabled, highlightedIndex,
onSelectedItemChange: ({ selectedItem }) => { getItemProps,
if (selectedItem) { openMenu,
console.log(selectedItem); } = useSelect({
handleSelectedItemChange(selectedItem); items: options,
} // @ts-expect-error – there are two params but we don't need the second one
}, isItemDisabled: (item) => item.disabled,
onIsOpenChange: ({ isOpen }) => { onSelectedItemChange: ({ selectedItem }) => {
setDropdownOpen(isOpen ?? false); if (selectedItem) {
}, handleSelectedItemChange(selectedItem);
selectedItem: value || null, }
itemToString: (item) => (item ? item.label : ''), },
}); onIsOpenChange: ({ isOpen }) => {
setDropdownOpen(isOpen ?? false);
},
itemToString: (item) => (item ? item.label : ''),
});
const handleManage = () => { const handleManage = () => {
//TODO: implement manage handler //TODO: implement manage handler
@ -103,13 +107,17 @@ export const UserSelect = ({ options, value }: UserSelectProps) => {
<div className={theme.container()}> <div className={theme.container()}>
{/* Input */} {/* Input */}
<div <div
{...getToggleButtonProps({
ref: inputWrapperRef,
suppressRefError: true,
})}
ref={inputWrapperRef} ref={inputWrapperRef}
onClick={() => !dropdownOpen && openMenu()} onClick={() => !dropdownOpen && openMenu()}
className="cursor-pointer relative py-2 pl-2 pr-4 flex min-w-[200px] w-full items-center justify-between rounded-xl bg-surface-card shadow-sm" className="cursor-pointer relative py-2 pl-2 pr-4 flex min-w-[200px] w-full items-center justify-between rounded-xl bg-surface-card shadow-sm"
> >
<div className="flex gap-3 w-full mr-2"> <div className="flex gap-3 w-full mr-2">
<img <img
src="/logo.svg" src={selectedItem?.imgSrc || '/logo.svg'}
alt="Snowball Logo" alt="Snowball Logo"
className="h-10 w-10 rounded-lg" className="h-10 w-10 rounded-lg"
/> />