forked from cerc-io/snowballtools-base
⚡️ feat: impelment user select
This commit is contained in:
Andre H
parent
2f466d4fbb
commit
0381fdbbed
@ -0,0 +1,58 @@
|
||||
import { tv, VariantProps } from 'tailwind-variants';
|
||||
|
||||
export const userSelectTheme = tv({
|
||||
slots: {
|
||||
container: ['flex', 'flex-col', 'relative', 'gap-2'],
|
||||
inputWrapper: [
|
||||
'relative',
|
||||
'flex',
|
||||
'flex-wrap',
|
||||
'gap-1',
|
||||
'min-w-[200px]',
|
||||
'w-full',
|
||||
'rounded-lg',
|
||||
'bg-transparent',
|
||||
'text-elements-mid-em',
|
||||
'shadow-sm',
|
||||
'border',
|
||||
'border-border-interactive',
|
||||
'focus-ring',
|
||||
'disabled:shadow-none',
|
||||
'disabled:border-none',
|
||||
],
|
||||
input: ['outline-none'],
|
||||
popover: [
|
||||
'mt-12',
|
||||
'z-20',
|
||||
'absolute',
|
||||
'px-1',
|
||||
'py-1',
|
||||
'flex-col',
|
||||
'gap-0.5',
|
||||
'min-w-full',
|
||||
'bg-surface-floating',
|
||||
'shadow-dropdown',
|
||||
'w-auto',
|
||||
'max-h-60',
|
||||
'overflow-auto',
|
||||
'border',
|
||||
'border-gray-200',
|
||||
'rounded-xl',
|
||||
],
|
||||
},
|
||||
variants: {
|
||||
isOpen: {
|
||||
true: {
|
||||
popover: ['flex'],
|
||||
},
|
||||
false: {
|
||||
popover: ['hidden'],
|
||||
},
|
||||
},
|
||||
hasValue: {
|
||||
true: '',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export type UserSelectTheme = VariantProps<typeof userSelectTheme>;
|
||||
@ -0,0 +1,186 @@
|
||||
import React, {
|
||||
useState,
|
||||
ComponentPropsWithoutRef,
|
||||
useCallback,
|
||||
useRef,
|
||||
useEffect,
|
||||
} from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useCombobox } from 'downshift';
|
||||
import { UserSelectTheme, userSelectTheme } from './UserSelect.theme';
|
||||
import {
|
||||
BuildingIcon,
|
||||
ChevronUpDown,
|
||||
SettingsSlidersIcon,
|
||||
} from 'components/shared/CustomIcon';
|
||||
import { cn } from 'utils/classnames';
|
||||
import { EmptyUserSelectItem, UserSelectItem } from './UserSelectItem';
|
||||
|
||||
export type UserSelectOption = {
|
||||
value: string;
|
||||
label: string;
|
||||
imgSrc?: string;
|
||||
};
|
||||
|
||||
interface UserSelectProps
|
||||
extends Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'onChange'>,
|
||||
UserSelectTheme {
|
||||
options: UserSelectOption[];
|
||||
value?: UserSelectOption;
|
||||
}
|
||||
|
||||
export const UserSelect = ({ options, value }: UserSelectProps) => {
|
||||
const theme = userSelectTheme();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [selectedItem, setSelectedItem] = useState<UserSelectOption | null>(
|
||||
null,
|
||||
);
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
const [dropdownPosition, setDropdownPosition] = useState<'top' | 'bottom'>(
|
||||
'bottom',
|
||||
);
|
||||
const popoverRef = useRef(null); // Ref for the popover
|
||||
const inputWrapperRef = useRef(null); // Ref for the input wrapper
|
||||
|
||||
// Calculate and update popover position
|
||||
useEffect(() => {
|
||||
if (dropdownOpen && popoverRef.current && inputWrapperRef.current) {
|
||||
const popover = popoverRef.current;
|
||||
// @ts-expect-error – we know it's not null lol
|
||||
const input = inputWrapperRef.current.getBoundingClientRect();
|
||||
const spaceBelow = window.innerHeight - input.bottom;
|
||||
const spaceAbove = input.top;
|
||||
// @ts-expect-error – we know it's not null lol
|
||||
const popoverHeight = popover.offsetHeight;
|
||||
|
||||
// Determine if there's enough space below
|
||||
if (spaceBelow >= popoverHeight) {
|
||||
setDropdownPosition('bottom');
|
||||
} else if (spaceAbove >= popoverHeight) {
|
||||
setDropdownPosition('top');
|
||||
} else {
|
||||
// Default to bottom if neither has enough space, but you could also set logic to choose the side with more space
|
||||
setDropdownPosition('bottom');
|
||||
}
|
||||
}
|
||||
}, [dropdownOpen]); // Re-calculate whenever the dropdown is opened
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedItem(value as UserSelectOption);
|
||||
}, [value]);
|
||||
|
||||
const handleSelectedItemChange = (selectedItem: UserSelectOption | null) => {
|
||||
setSelectedItem(selectedItem);
|
||||
navigate(`/${selectedItem?.value}`);
|
||||
};
|
||||
|
||||
const isSelected = useCallback(
|
||||
(item: UserSelectOption) => selectedItem?.value === item.value,
|
||||
[selectedItem],
|
||||
);
|
||||
|
||||
const { isOpen, getMenuProps, highlightedIndex, getItemProps, openMenu } =
|
||||
useCombobox({
|
||||
items: options,
|
||||
// @ts-expect-error – there are two params but we don't need the second one
|
||||
isItemDisabled: (item) => item.disabled,
|
||||
onSelectedItemChange: ({ selectedItem }) => {
|
||||
if (selectedItem) {
|
||||
console.log(selectedItem);
|
||||
handleSelectedItemChange(selectedItem);
|
||||
}
|
||||
},
|
||||
onIsOpenChange: ({ isOpen }) => {
|
||||
setDropdownOpen(isOpen ?? false);
|
||||
},
|
||||
selectedItem: selectedItem,
|
||||
itemToString: (item) => (item ? item.label : ''),
|
||||
});
|
||||
|
||||
const handleManage = () => {
|
||||
//TODO: implement manage handler
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={theme.container()}>
|
||||
{/* Input */}
|
||||
<div
|
||||
ref={inputWrapperRef}
|
||||
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"
|
||||
>
|
||||
<div className="flex gap-3 w-full mr-2">
|
||||
<img
|
||||
src="/logo.svg"
|
||||
alt="Snowball Logo"
|
||||
className="h-10 w-10 rounded-lg"
|
||||
/>
|
||||
<div className="flex flex-col justify-center h-10 w-full">
|
||||
{selectedItem?.label ? (
|
||||
<p className="text-sm text-elements-high-em">
|
||||
{selectedItem?.label}
|
||||
</p>
|
||||
) : (
|
||||
<div className="animate-pulse h-1.5 mb-1 w-full rounded-full bg-elements-on-disabled" />
|
||||
)}
|
||||
<p className="text-xs text-elements-low-em">Organization</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-4 w-4 text-slate-400">
|
||||
<ChevronUpDown size={16} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Popover */}
|
||||
<ul
|
||||
{...getMenuProps({ ref: popoverRef }, { suppressRefError: true })}
|
||||
id="popover"
|
||||
ref={popoverRef}
|
||||
className={cn(
|
||||
theme.popover({ isOpen }),
|
||||
{
|
||||
// Position the popover based on the dropdown position
|
||||
'top-[27.5%]': dropdownPosition === 'bottom',
|
||||
'bottom-[92.5%]': dropdownPosition === 'top',
|
||||
},
|
||||
'px-2 py-2',
|
||||
)}
|
||||
>
|
||||
{/* Settings header */}
|
||||
<div className="flex justify-between h-8 items-center">
|
||||
<div className="flex gap-1 text-elements-mid-em">
|
||||
<BuildingIcon size={16} />
|
||||
<p className="text-xs font-medium">Other teams</p>
|
||||
</div>
|
||||
<div
|
||||
className="flex gap-1 text-elements-link cursor-pointer"
|
||||
onClick={handleManage}
|
||||
>
|
||||
<p className="text-xs font-medium">Manage</p>
|
||||
<SettingsSlidersIcon size={16} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Organization */}
|
||||
{isOpen && options.length !== 0 ? (
|
||||
options.map((item, index) => (
|
||||
<UserSelectItem
|
||||
{...getItemProps({ item, index })}
|
||||
key={item.value}
|
||||
selected={isSelected(item)}
|
||||
option={item}
|
||||
hovered={highlightedIndex === index}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<EmptyUserSelectItem />
|
||||
)}
|
||||
|
||||
{/* //TODO:Squiggly line */}
|
||||
{/* //TODO:Personal */}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,28 @@
|
||||
import { tv, VariantProps } from 'tailwind-variants';
|
||||
|
||||
export const userSelectItemTheme = tv({
|
||||
slots: {
|
||||
wrapper: [
|
||||
'p-2',
|
||||
'gap-3',
|
||||
'flex',
|
||||
'items-center',
|
||||
'justify-between',
|
||||
'rounded-lg',
|
||||
'cursor-pointer',
|
||||
],
|
||||
content: ['flex', 'gap-3', 'items-center'],
|
||||
img: ['h-5', 'w-5'],
|
||||
selectedIcon: ['h-5', 'w-5', 'text-controls-primary'],
|
||||
label: ['text-sm', 'text-elements-high-em', 'tracking-[-0.006em]'],
|
||||
},
|
||||
variants: {
|
||||
active: {
|
||||
true: {
|
||||
wrapper: ['bg-base-bg-emphasized'],
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export type UserSelectItemTheme = VariantProps<typeof userSelectItemTheme>;
|
||||
@ -0,0 +1,75 @@
|
||||
import React, { forwardRef, ComponentPropsWithoutRef, useMemo } from 'react';
|
||||
import { Overwrite, UseComboboxGetItemPropsReturnValue } from 'downshift';
|
||||
import {
|
||||
userSelectItemTheme,
|
||||
UserSelectItemTheme,
|
||||
} from './UserSelectItem.theme';
|
||||
import { CheckRadioIcon } from 'components/shared/CustomIcon';
|
||||
import { UserSelectOption } from 'components/shared/UserSelect';
|
||||
import { OmitCommon } from 'types/common';
|
||||
|
||||
/**
|
||||
* Represents a type that merges ComponentPropsWithoutRef<'li'> with certain exclusions.
|
||||
* @type {MergedComponentPropsWithoutRef}
|
||||
*/
|
||||
type MergedComponentPropsWithoutRef = OmitCommon<
|
||||
ComponentPropsWithoutRef<'li'>,
|
||||
Omit<
|
||||
Overwrite<UseComboboxGetItemPropsReturnValue, UserSelectOption[]>,
|
||||
'index' | 'item'
|
||||
>
|
||||
>;
|
||||
|
||||
export interface UserSelectItemProps
|
||||
extends MergedComponentPropsWithoutRef,
|
||||
UserSelectItemTheme {
|
||||
selected: boolean;
|
||||
option: UserSelectOption;
|
||||
hovered?: boolean;
|
||||
}
|
||||
|
||||
const UserSelectItem = forwardRef<HTMLLIElement, UserSelectItemProps>(
|
||||
({ className, selected, hovered, option, ...props }, ref) => {
|
||||
const theme = userSelectItemTheme();
|
||||
|
||||
const { value, label, imgSrc } = option;
|
||||
|
||||
const renderLeftImage = useMemo(
|
||||
() => (
|
||||
<div className="grid place-items-center w-10 h-10 rounded-lg bg-blue-400">
|
||||
<img src={imgSrc} alt={`${value}-logo`} className={theme.img()} />
|
||||
</div>
|
||||
),
|
||||
[imgSrc, value],
|
||||
);
|
||||
|
||||
return (
|
||||
<li
|
||||
{...props}
|
||||
ref={ref}
|
||||
className={theme.wrapper({ className, active: selected || hovered })}
|
||||
>
|
||||
<div className={theme.content()}>
|
||||
{renderLeftImage}
|
||||
<p className={theme.label()}>{label}</p>
|
||||
</div>
|
||||
{selected && <CheckRadioIcon className={theme.selectedIcon()} />}
|
||||
</li>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export const EmptyUserSelectItem = () => {
|
||||
const theme = userSelectItemTheme();
|
||||
return (
|
||||
<li className={theme.wrapper()}>
|
||||
<div className={theme.content()}>
|
||||
<p className={theme.label()}>No results found</p>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
UserSelectItem.displayName = 'UserSelectItem';
|
||||
|
||||
export { UserSelectItem };
|
||||
@ -0,0 +1,2 @@
|
||||
export * from './UserSelectItem';
|
||||
export * from './UserSelectItem.theme';
|
||||
@ -0,0 +1,2 @@
|
||||
export * from './UserSelect';
|
||||
export * from './UserSelect.theme';
|
||||
Loading…
Reference in New Issue
Block a user