✨(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:
33
packages/react/src/components/Forms/Select/mono-simple.tsx
Normal file
33
packages/react/src/components/Forms/Select/mono-simple.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user