Skip to content

Commit

Permalink
removed transition for ListboxOptions
Browse files Browse the repository at this point in the history
  • Loading branch information
@khavinshankar
khavinshankar committed Aug 22, 2024
1 parent 023d584 commit 4eaa872
Show file tree
Hide file tree
Showing 4 changed files with 173 additions and 192 deletions.
1 change: 1 addition & 0 deletions cypress/e2e/facility_spec/facility_creation.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@ describe("Facility Creation", () => {
facilityFeature.forEach((featureText) => {
cy.get("[role='option']").contains(featureText).click();
});
facilityPage.clickfacilityfeatureoption();
facilityPage.fillPincode("682001");
facilityPage.selectStateOnPincode("Kerala");
facilityPage.selectDistrictOnPincode("Ernakulam");
Expand Down
39 changes: 16 additions & 23 deletions src/Components/CameraFeed/AssetBedSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
ListboxButton,
ListboxOption,
ListboxOptions,
Transition,
} from "@headlessui/react";
import CareIcon from "../../CAREUI/icons/CareIcon";
import { classNames } from "../../Utils/utils";
Expand Down Expand Up @@ -108,29 +107,23 @@ export const CameraPresetDropdown = (
<CareIcon icon="l-angle-down" className="text-xl text-zinc-400" />
</span>
</ListboxButton>
<Transition
leave="transition ease-in duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
<ListboxOptions
as="ul"
className="absolute z-20 max-h-48 w-full overflow-auto rounded-b-lg bg-white py-1 text-base shadow-lg ring-1 ring-secondary-500 focus:outline-none md:max-h-60"
>
<ListboxOptions
as="ul"
className="absolute z-20 max-h-48 w-full overflow-auto rounded-b-lg bg-white py-1 text-base shadow-lg ring-1 ring-secondary-500 focus:outline-none md:max-h-60"
>
{options?.map((obj) => (
<ListboxOption
as="li"
key={obj.id}
className={(args) =>
classNames(dropdownOptionClassNames(args), "px-2 py-1.5")
}
value={obj}
>
<span>{label(obj)}</span>
</ListboxOption>
))}
</ListboxOptions>
</Transition>
{options?.map((obj) => (
<ListboxOption
as="li"
key={obj.id}
className={(args) =>
classNames(dropdownOptionClassNames(args), "px-2 py-1.5")
}
value={obj}
>
<span>{label(obj)}</span>
</ListboxOption>
))}
</ListboxOptions>
</div>
</Listbox>
);
Expand Down
171 changes: 83 additions & 88 deletions src/Components/Form/MultiSelectMenuV2.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import CareIcon from "../../CAREUI/icons/CareIcon";
import { DropdownTransition } from "../Common/components/HelperComponents";
import {
Label,
Listbox,
Expand Down Expand Up @@ -93,97 +92,93 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
}
multiple
>
{({ open }) => (
<>
<Label className="sr-only !relative">{props.placeholder}</Label>
<div className="relative">
<div>
<ListboxButton
className="cui-input-base flex w-full rounded"
ref={buttonRef}
>
<div className="relative z-0 flex w-full items-center">
<div className="relative flex flex-1 items-center pr-4 focus:z-10">
<p className="ml-2.5 text-sm font-normal text-secondary-600">
<Placeholder />
</p>

{selectedOptions.length !== 0 && (
<div className="flex flex-wrap gap-2">
{selectedOptions.map((option, index) => (
<MultiSelectOptionChip
key={index}
label={option.selectedLabel}
onRemove={() => {
const updatedOptions = selectedOptions.filter(
(selectedOption) =>
selectedOption.value !== option.value,
);
props.onChange(
updatedOptions.map((o) => o.value) as any,
);
}}
/>
))}
</div>
)}
</div>
<CareIcon
icon="l-angle-down"
className="-mb-0.5 text-lg text-secondary-900"
/>
<>
<Label className="sr-only !relative">{props.placeholder}</Label>
<div className="relative">
<div>
<ListboxButton
className="cui-input-base flex w-full rounded"
ref={buttonRef}
>
<div className="relative z-0 flex w-full items-center">
<div className="relative flex flex-1 items-center pr-4 focus:z-10">
<p className="ml-2.5 text-sm font-normal text-secondary-600">
<Placeholder />
</p>

{selectedOptions.length !== 0 && (
<div className="flex flex-wrap gap-2">
{selectedOptions.map((option, index) => (
<MultiSelectOptionChip
key={index}
label={option.selectedLabel}
onRemove={() => {
const updatedOptions = selectedOptions.filter(
(selectedOption) =>
selectedOption.value !== option.value,
);
props.onChange(
updatedOptions.map((o) => o.value) as any,
);
}}
/>
))}
</div>
)}
</div>
</ListboxButton>
</div>
<DropdownTransition show={open}>
<ListboxOptions
as="ul"
className="cui-dropdown-base absolute top-full"
<CareIcon
icon="l-angle-down"
className="-mb-0.5 text-lg text-secondary-900"
/>
</div>
</ListboxButton>
</div>
<ListboxOptions
as="ul"
className="cui-dropdown-base absolute top-full"
>
{options.map((option, index) => (
<ListboxOption
as="li"
id={`${props.id}-option-${index}`}
key={index}
className={dropdownOptionClassNames}
value={option}
onClick={() => handleSingleSelect(option)}
disabled={option.disabled}
>
{options.map((option, index) => (
<ListboxOption
as="li"
id={`${props.id}-option-${index}`}
key={index}
className={dropdownOptionClassNames}
value={option}
onClick={() => handleSingleSelect(option)}
disabled={option.disabled}
>
{({ focus }) => (
<div className="flex flex-col gap-2">
<div className="flex justify-between">
{option.label}
{(option.icon || option.isSelected) &&
(option.isSelected ? (
<CareIcon icon="l-check" className="text-lg" />
) : (
option.icon
))}
</div>
{option.description && (
<p
className={classNames(
"text-sm font-normal",
option.disabled
? "text-secondary-500"
: focus
? "text-primary-200"
: "text-secondary-500",
)}
>
{option.description}
</p>
{({ focus }) => (
<div className="flex flex-col gap-2">
<div className="flex justify-between">
{option.label}
{(option.icon || option.isSelected) &&
(option.isSelected ? (
<CareIcon icon="l-check" className="text-lg" />
) : (
option.icon
))}
</div>
{option.description && (
<p
className={classNames(
"text-sm font-normal",
option.disabled
? "text-secondary-500"
: focus
? "text-primary-200"
: "text-secondary-500",
)}
</div>
>
{option.description}
</p>
)}
</ListboxOption>
))}
</ListboxOptions>
</DropdownTransition>
</div>
</>
)}
</div>
)}
</ListboxOption>
))}
</ListboxOptions>
</div>
</>
</Listbox>
</div>
);
Expand Down
Loading

0 comments on commit 4eaa872

Please sign in to comment.