Skip to content

Commit

Permalink
fix lint
Browse files Browse the repository at this point in the history
  • Loading branch information
@indaviande
indaviande committed Dec 9, 2024
1 parent 653fb26 commit 737fa91
Showing 1 changed file with 35 additions and 68 deletions.
103 changes: 35 additions & 68 deletions src/components/extenders/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@ export const selectStyles = tv({
"text-main-11 rounded-sm flex items-center dim focus-visible:outline-main-12 !leading-none justify-between text-nowrap font-text font-semibold",
],
slots: {
dropdown:
"outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]",
dropdown: "outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]",
item: "rounded-sm flex justify-between items-center gap-lg cursor-pointer select-none p-sm outline-offset-0 outline-0 text-nowrap focus-visible:outline-main-12",
icon: "flex items-center",
value: "flex gap-sm items-center",
Expand Down Expand Up @@ -138,14 +137,12 @@ export type SelectProps<Value> = Component<{
}> &
RadixSelect.SelectProps;

type MaybeArray<T, IsArray extends undefined | boolean> = IsArray extends true
? T[]
: T;
type MaybeArray<T, IsArray extends undefined | boolean> = IsArray extends true ? T[] : T;

export default function Select<
T extends string | number,
Multiple extends undefined | boolean,
Value extends MaybeArray<T, Multiple>
Value extends MaybeArray<T, Multiple>,
>({
look,
size,
Expand Down Expand Up @@ -177,45 +174,35 @@ export default function Select<
});

const value = useMemo(() => getter ?? internal, [getter, internal]);
const setValue = useCallback(
(v: Value) => setter?.(v) ?? setInternal(v),
[setter]
);
const setValue = useCallback((v: Value) => setter?.(v) ?? setInternal(v), [setter]);

const [searchInput, setSearch] = useState<string>();

const matches = useMemo(() => {
if (!search) return Object.keys(options ?? {});
// const textToMatch = Object.keys(options ?? {}).map(option => `${option}_${options[option]?.props?.children?.filter(a => typeof a !== "object").join(" ")}`)
const textToMatch = Object.keys(options ?? {}).reduce((matches, option) => {
const opt = options?.[option];
const key =
typeof opt === "string"
? opt
: (
options?.[option] as Exclude<
ReactNode,
string | number | boolean | Iterable<ReactNode>
>
)?.props?.children
?.filter?.((a: unknown) => typeof a !== "object")
?.join(" ");
const textToMatch = Object.keys(options ?? {}).reduce(
(matches, option) => {
const opt = options?.[option];
const key =
typeof opt === "string"
? opt
: (
options?.[option] as Exclude<ReactNode, string | number | boolean | Iterable<ReactNode>>
)?.props?.children
?.filter?.((a: unknown) => typeof a !== "object")
?.join(" ");

return Object.assign(
matches,
{ [`${option}`]: option },
{ [`${key}`]: option }
);
}, {} as { [key: string]: keyof typeof options });
const searchMatches = matchSorter(
Object.keys(textToMatch),
searchInput ?? ""
).map((key) => textToMatch[key]);
return Object.assign(matches, { [`${option}`]: option }, { [`${key}`]: option });
},
{} as { [key: string]: keyof typeof options },
);
const searchMatches = matchSorter(Object.keys(textToMatch), searchInput ?? "").map(key => textToMatch[key]);
const uniqueOptionMatches = Array.from(
searchMatches.reduce((set, option) => {
set.add(option);
return set;
}, new Set())
}, new Set()),
) as (typeof value)[];

return uniqueOptionMatches;
Expand All @@ -224,9 +211,7 @@ export default function Select<
const label = useMemo(() => {
if (
value &&
(typeof value === "number" ||
typeof value === "string" ||
typeof value === "symbol") &&
(typeof value === "number" || typeof value === "string" || typeof value === "symbol") &&
options?.[value]
)
return options?.[value];
Expand All @@ -236,9 +221,8 @@ export default function Select<
<Text
className={mergeClass(
prefixLabel(),
"w-[1.2em] h-[1.2em] flex items-center justify-center rounded-full bg-main-6 text-main-12"
)}
>
"w-[1.2em] h-[1.2em] flex items-center justify-center rounded-full bg-main-6 text-main-12",
)}>
{value.length}
</Text>{" "}
{placeholder}
Expand All @@ -250,23 +234,17 @@ export default function Select<
return (
<Ariakit.ComboboxProvider
resetValueOnHide
setValue={(value) => {
setValue={value => {
setSearch(value);
}}
>
}}>
<Ariakit.SelectProvider
setValue={(v) => setValue(v as Value)}
setValue={v => setValue(v as Value)}
value={value as string}
defaultValue={multiple ? [] : undefined}
>
defaultValue={multiple ? [] : undefined}>
<Ariakit.Select className={mergeClass(base(), className)}>
<div className={valueStyle()}>{label}</div>
<div className={icon()}>
{loading ? (
<Icon className="animate-spin" remix="RiLoader4Fill" />
) : (
<Icon remix="RiArrowDropDownLine" />
)}
{loading ? <Icon className="animate-spin" remix="RiLoader4Fill" /> : <Icon remix="RiArrowDropDownLine" />}
</div>
</Ariakit.Select>
<Ariakit.SelectPopover gutter={4} className={dropdown()}>
Expand All @@ -276,11 +254,7 @@ export default function Select<
<Ariakit.Combobox
autoSelect
placeholder="Search..."
className={mergeClass(
inputStyles({ size: "sm", look: "base" }),
"w-full",
!search && "hidden"
)}
className={mergeClass(inputStyles({ size: "sm", look: "base" }), "w-full", !search && "hidden")}
/>
</div>
)}
Expand All @@ -289,8 +263,8 @@ export default function Select<
{allOption && !searchInput && (
<Ariakit.SelectItem
className={mergeClass(item())}
// biome-ignore lint/suspicious/noExplicitAny: template makes this typing difficult even tough it works
onClick={() =>
// biome-ignore lint/suspicious/noExplicitAny: template makes this typing difficult even tough it works
setValue((!!multiple ? [] : undefined) as any as Value)
}
render={
Expand All @@ -303,11 +277,7 @@ export default function Select<
key="select"
className={mergeClass(
check(),
!(
(typeof value === "object" &&
value?.length > 0) ||
value === undefined
) && "opacity-0"
!((typeof value === "object" && value?.length > 0) || value === undefined) && "opacity-0",
)}
size="sm"
remix="RiCheckFill"
Expand All @@ -317,7 +287,7 @@ export default function Select<
}
/>
)}
{matches?.map((_value) => (
{matches?.map(_value => (
<Ariakit.SelectItem
key={_value as string}
value={_value as string}
Expand All @@ -332,11 +302,8 @@ export default function Select<
key="select"
className={mergeClass(
check(),
!(
(typeof value === "object" &&
value?.includes(_value as T)) ||
value === _value
) && "opacity-0"
!((typeof value === "object" && value?.includes(_value as T)) || value === _value) &&
"opacity-0",
)}
size="sm"
remix="RiCheckFill"
Expand Down

0 comments on commit 737fa91

Please sign in to comment.