Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix "Add panel" and visualization type selectors #2767

Merged
merged 4 commits into from
Mar 16, 2023
Merged

fix "Add panel" and visualization type selectors #2767

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1750adb
fix panel and vis type selectors
monicawoj Mar 15, 2023
67d49d3
Merge branch 'main' into add-panel-fix
monicawoj Mar 15, 2023
50960b7
Merge branch 'main' into add-panel-fix
monicawoj Mar 15, 2023
6209cde
Merge branch 'main' into add-panel-fix
monicawoj Mar 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 84 additions & 93 deletions ui/packages/shared/components/src/Select/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,101 +69,92 @@ const Select = ({
'relative text-gray-100 dark-gray-900 justify-center bg-indigo-600 border border-indigo-500 font-medium py-2 px-4 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-sm';

return (
<>
<Listbox value={selectedKey} onChange={onSelection}>
{({open}) => (
<>
<div className="min-w-fit">
<Listbox.Button
className={cx(
width !== undefined ? `w-${width}` : '',
disabled ? 'opacity-50 cursor-not-allowed' : '',
primary ? primaryStyles : defaultStyles,
{[className]: className.length > 0}
)}
>
<span className="flex items-center">
{/* SLOT */}
<span className="ml-3 block overflow-x-hidden text-ellipsis">
{selection?.key !== '' ? selection.element.active : placeholder}
</span>
</span>
<span className="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none text-gray-400">
<Icon icon="heroicons:chevron-up-down-20-solid" aria-hidden="true" />
</span>
</Listbox.Button>

<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options>
{loading === true ? (
<div className="absolute z-10 mt-1 bg-gray-50 dark:bg-gray-900 dark:border-gray-600 shadow-lg rounded-md py-1 text-base ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-20 overflow-auto focus:outline-none sm:text-sm">
<div className="w-[270px]">{loader}</div>
</div>
) : (
<>
{items.length > 0 && (
<div
className={cx(
width !== undefined ? `w-${width}` : '',
'absolute z-10 mt-1 bg-gray-50 dark:bg-gray-900 dark:border-gray-600 shadow-lg rounded-md py-1 text-base ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-20 overflow-auto focus:outline-none sm:text-sm'
)}
>
{items.map(option => (
<Listbox.Option
key={option.key}
disabled={option.disabled ?? false}
className={({active, disabled}) =>
cx(
active && 'text-white bg-indigo-600',
'cursor-default select-none relative py-2 pl-3 pr-9',
disabled && 'opacity-50'
)
}
value={option.key}
>
{({selected, active}) => (
<>
<div className="flex items-center">
<span
className={cx(
selected ? 'font-semibold' : 'font-normal',
'ml-3'
)}
>
{option.element.expanded}
</span>
</div>
{selected ? (
<span
className={cx(
active ? 'text-white' : 'text-indigo-600',
'absolute inset-y-0 right-0 flex items-center pr-4'
)}
>
<Icon icon="heroicons:check-20-solid" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</div>
<Listbox value={selectedKey} onChange={onSelection}>
{({open}) => (
<div className="min-w-fit relative">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other than cosmetic changes introduced to the code (for example, removing React fragment elements <></> where not necessary) this is the only significant change introduced in this PR.

<Listbox.Button
className={cx(
width !== undefined ? `w-${width}` : '',
disabled ? 'opacity-50 cursor-not-allowed' : '',
primary ? primaryStyles : defaultStyles,
{[className]: className.length > 0}
)}
>
<span className="flex items-center">
<span className="ml-3 block overflow-x-hidden text-ellipsis">
{selection?.key !== '' ? selection.element.active : placeholder}
</span>
</span>
<span className="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none text-gray-400">
<Icon icon="heroicons:chevron-up-down-20-solid" aria-hidden="true" />
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options>
{loading === true ? (
<div className="absolute z-10 mt-1 bg-gray-50 dark:bg-gray-900 dark:border-gray-600 shadow-lg rounded-md py-1 text-base ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-20 overflow-auto focus:outline-none sm:text-sm">
<div className="w-[270px]">{loader}</div>
</div>
) : (
<>
{items.length > 0 && (
<div
className={cx(
width !== undefined ? `w-${width}` : '',
'absolute z-10 mt-1 bg-gray-50 dark:bg-gray-900 dark:border-gray-600 shadow-lg rounded-md py-1 text-base ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-20 overflow-auto focus:outline-none sm:text-sm'
)}
</>
>
{items.map(option => (
<Listbox.Option
key={option.key}
disabled={option.disabled ?? false}
className={({active, disabled}) =>
cx(
active && 'text-white bg-indigo-600',
'cursor-default select-none relative py-2 pl-3 pr-9',
disabled && 'opacity-50'
)
}
value={option.key}
>
{({selected, active}) => (
<>
<div className="flex items-center">
<span
className={cx(selected ? 'font-semibold' : 'font-normal', 'ml-3')}
>
{option.element.expanded}
</span>
</div>
{selected ? (
<span
className={cx(
active ? 'text-white' : 'text-indigo-600',
'absolute inset-y-0 right-0 flex items-center pr-4'
)}
>
<Icon icon="heroicons:check-20-solid" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</div>
)}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
</>
</>
)}
</Listbox.Options>
</Transition>
</div>
)}
</Listbox>
);
};

Expand Down