(react) add multi select

Adding this new variant makes necessary to reorganize the files to keep
a clear separations of concerns. As of now Select/index.tsx is just an
entrypoint to render either the mono or multi variant of the select.
This commit is contained in:
Nathan Vasse
2023-06-12 14:27:40 +02:00
committed by NathanVss
parent 5a9d77042f
commit c8afa105dd
22 changed files with 2734 additions and 405 deletions

View File

@@ -0,0 +1,33 @@
import { useSelect } from "downshift";
import React from "react";
import {
optionToString,
SelectMonoAux,
SubProps,
} from ":/components/Forms/Select/mono-common";
export const SelectMonoSimple = (props: SubProps) => {
const downshiftReturn = useSelect({
...props.downshiftProps,
items: props.options,
itemToString: optionToString,
});
return (
<SelectMonoAux
{...props}
downshiftReturn={{
...downshiftReturn,
wrapperProps: downshiftReturn.getToggleButtonProps({
disabled: props.disabled,
}),
toggleButtonProps: {},
}}
labelAsPlaceholder={!downshiftReturn.selectedItem}
>
{downshiftReturn.selectedItem && (
<span>{optionToString(downshiftReturn.selectedItem)}</span>
)}
</SelectMonoAux>
);
};