Scipaper/front-end
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix style and add inGroup props for InputGroup

Browse Source
This commit is contained in:
filantrop 2022-08-24 15:32:48 +03:00
parent 43163a19b2
commit 5e3b000bd6
1 changed files with 52 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/Select.tsx
View File

@ -7,18 +7,22 @@ import { Listbox, Transition } from "@headlessui/react";
import classNames from "classnames"; import classNames from "classnames";
import "../index.css"; import "../index.css";
import { ReactComponent as SelectIcon } from "../assets/svg/select-arrow.svg"; import { ReactComponent as SelectIcon } from "../assets/svg/select-arrow.svg";
import { Scrollbar } from "react-scrollbars-custom";
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* Component props */ /* Component props */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
type Props<T> = { type Props<T> = {
inGroup?: boolean;
options?: T[]; options?: T[];
disabled?: boolean; disabled?: boolean;
className?: string; className?: string;
value: T; value: T;
displayValueResolver?: (element: T) => any; displayValueResolver?: (element: T) => any;
onChange: (element: T) => void; onChange: (element: T) => void;
maxScrollSize?: number;
elementScrollSize?: number;
} & Omit<React.ComponentPropsWithRef<"select">, "value" | "onChange">; } & Omit<React.ComponentPropsWithRef<"select">, "value" | "onChange">;
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
@ -43,7 +47,7 @@ const SelectOptionsStyle = `
absolute z-10 mt-1 w-full max-h-56 absolute z-10 mt-1 w-full max-h-56
bg-white shadow-lg bg-white shadow-lg
rounded py-1 rounded py-1
overflow-auto overflow-hidden
focus:outline-none focus:outline-none
text-base text-base
sm:text-sm sm:text-sm
@ -54,23 +58,40 @@ const SelectIconStyle = `
absolute inset-y-0 right-0 absolute inset-y-0 right-0
flex items-center pr-2 flex items-center pr-2
`; `;
const inputInGroup = [
` border-none
hover:none
active:none
focus:none
`,
];
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* Component implementation */ /* Component implementation */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
function Select<T>({ function Select<T>({
inGroup = false, // We should use this flag to choose how we will style our component
className, className,
options = [], options = [],
value, value,
onChange, onChange,
displayValueResolver, displayValueResolver,
disabled, disabled,
maxScrollSize = 140,
elementScrollSize = 36,
...props ...props
}: Props<T>): JSX.Element { }: Props<T>): JSX.Element {
return ( return (
<div className={classNames("fixed top-16 w-60", className)}> <div className={classNames("top-16 w-60", className)}>
<Listbox value={value} {...props} onChange={onChange}> <Listbox value={value} {...props} onChange={onChange}>
<div className="relative mt-1"> <div className="relative">
<Listbox.Button className={`${SelectButtonStyle}`}> <Listbox.Button
className={classNames([
[`${SelectButtonStyle}`],
{ [`${inputInGroup}`]: inGroup },
className,
])}
>
{({ open }) => ( {({ open }) => (
<> <>
<span className="block truncate">{`${ <span className="block truncate">{`${
@ -86,7 +107,6 @@ function Select<T>({
</> </>
)} )}
</Listbox.Button> </Listbox.Button>
<Transition <Transition
as={Fragment} as={Fragment}
leave="transition ease-in duration-100" leave="transition ease-in duration-100"
@ -94,6 +114,12 @@ function Select<T>({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Listbox.Options className={`${SelectOptionsStyle}`}> <Listbox.Options className={`${SelectOptionsStyle}`}>
<Scrollbar
style={{
height: options.length * elementScrollSize,
maxHeight: maxScrollSize,
}}
>
{options.map((option, id) => ( {options.map((option, id) => (
<Listbox.Option <Listbox.Option
key={id} key={id}
@ -107,15 +133,19 @@ function Select<T>({
value={option} value={option}
> >
{`${ {`${
displayValueResolver ? displayValueResolver(option) : option displayValueResolver
? displayValueResolver(option)
: option
}`} }`}
</Listbox.Option> </Listbox.Option>
))} ))}
</Scrollbar>
</Listbox.Options> </Listbox.Options>
</Transition> </Transition>
</div> </div>
</Listbox> </Listbox>
</div> </div>
//
); );
} }
export default Select; export default Select;