Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 3426x 22034x 16x 9086x | import type React from "react";
import { SelectItem, Select as SelectRaw } from "@heroui/select";
import { isNonNullish } from "remeda";
import type { MaybeText } from "./text.web";
import type { ViewReactNode } from "./view.web";
export type Props<T extends object, K extends string> = {
label?: string;
placeholder: string;
selectionMode?: "multiple" | "single";
items: T[];
selectedKeys?: K[];
disabledKeys?: K[];
renderValue: (selectedValues: T[]) => MaybeText | ViewReactNode;
onSelectionChange: (selectedKeys: K[]) => void;
className?: string;
isDisabled?: boolean;
children: (item: T) => React.ReactNode;
getKey: (item: T) => K;
getTextValue?: (item: T) => string;
disallowEmptySelection?: boolean;
testID?: string;
};
// Generic component has to be a function
// oxlint-disable-next-line func-style react/function-component-definition
export function Select<T extends object, K extends string>({
children,
getKey,
getTextValue,
renderValue,
onSelectionChange,
label,
testID,
...props
}: Props<T, K>) {
return (
<SelectRaw<T>
{...props}
data-testid={testID}
aria-label={label}
renderValue={(values) =>
renderValue(values.map((value) => value.data).filter(isNonNullish))
}
onSelectionChange={(keys) => {
onSelectionChange(
keys === "all" ? props.items.map(getKey) : (Array.from(keys) as K[]),
);
}}
>
{(item) => (
<SelectItem
key={getKey(item)}
textValue={getTextValue ? getTextValue(item) : getKey(item)}
>
{children(item)}
</SelectItem>
)}
</SelectRaw>
);
}
|