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

Merge pull request 'fix style and added inGroup props for InputGroup' (#105) from fix/select into develop

Browse Source 
Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/105
This commit is contained in:
Denis Gorbunov 2022-08-25 09:02:13 +00:00
commit 28854c35b1
1 changed files with 52 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
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,28 +114,38 @@ function Select<T>({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Listbox.Options className={`${SelectOptionsStyle}`}> <Listbox.Options className={`${SelectOptionsStyle}`}>
{options.map((option, id) => ( <Scrollbar
<Listbox.Option style={{
key={id} height: options.length * elementScrollSize,
className={({ active, selected }) => maxHeight: maxScrollSize,
classNames( }}
active ? "text-gray-900 bg-blue-50" : "font-normal ", >
"cursor-default select-none relative py-2 pl-3 pr-9", {options.map((option, id) => (
selected ? "text-gray-900 bg-blue-100" : "font-normal " <Listbox.Option
) key={id}
} className={({ active, selected }) =>
value={option} classNames(
> active ? "text-gray-900 bg-blue-50" : "font-normal ",
{`${ "cursor-default select-none relative py-2 pl-3 pr-9",
displayValueResolver ? displayValueResolver(option) : option selected ? "text-gray-900 bg-blue-100" : "font-normal "
}`} )
</Listbox.Option> }
))} value={option}
>
{`${
displayValueResolver
? displayValueResolver(option)
: option
}`}
</Listbox.Option>
))}
</Scrollbar>
</Listbox.Options> </Listbox.Options>
</Transition> </Transition>
</div> </div>
</Listbox> </Listbox>
</div> </div>
//
); );
} }
export default Select; export default Select;