Skip to content

Commit

Permalink
Merge pull request #60 from yaswanth-deriv/yaswanth/Added_input_props…
Browse files Browse the repository at this point in the history
…_dropdown

Yaswanth/Added input props in dropdown component
  • Loading branch information
shayan-deriv authored Feb 15, 2024
2 parents a3f1099 + f20c9e9 commit eb7e5f6
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 23 deletions.
6 changes: 4 additions & 2 deletions lib/components/Dropdown/Dropdown.scss
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@

&__items {
position: absolute;
top: 2.7rem;
top: 2.9rem;
width: 100%;
display: flex;
flex-direction: column;
Expand All @@ -107,7 +107,9 @@
& > :last-child {
border-radius: 0 0 0.4rem 0.4rem;
}

&--xs {
max-height: 12.5rem;
}
&--sm {
max-height: 22rem;
}
Expand Down
53 changes: 32 additions & 21 deletions lib/components/Dropdown/index.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React, { isValidElement, useCallback, useEffect, useState } from 'react';
import React, { isValidElement, HtmlHTMLAttributes, useCallback, useEffect, useState } from 'react';
import clsx from 'clsx';
import { useCombobox } from 'downshift';
import { TGenericSizes } from "../../types";
import { Text } from '../Text';
import {Input } from '../Input/index';
import { Input } from '../Input/index';
import './Dropdown.scss';

type InputProps = React.ComponentProps<typeof Input>;
type TProps = {
type TProps = HtmlHTMLAttributes<HTMLInputElement> & {
disabled?: boolean;
dropdownIcon: React.ReactNode;
errorMessage?: InputProps['message'];
Expand All @@ -18,28 +18,31 @@ type TProps = {
text?: React.ReactNode;
value?: string;
}[];
listHeight?: Extract<TGenericSizes, 'lg' | 'md' | 'sm'>;
listHeight?: Extract<TGenericSizes, 'lg' | 'md' | 'sm' | 'xs'>;
name: InputProps['name'];
onChange?: (inputValue: string) => void;
onSearch?: (inputValue: string) => void;
onSelect: (value: string) => void;
value?: InputProps['value'];
variant?: 'comboBox' | 'prompt';
};


export const Dropdown = ({
className,
disabled,
dropdownIcon,
errorMessage,
icon = false,
label,
list,
listHeight = 'md',
listHeight = 'xs',
name,
onChange,
onSearch,
onSelect,
value,
variant = 'prompt',
}:TProps) => {
...rest
}: TProps) => {
const [items, setItems] = useState(list);
const [shouldFilterList, setShouldFilterList] = useState(false);
const clearFilter = useCallback(() => {
Expand Down Expand Up @@ -69,7 +72,7 @@ export const Dropdown = ({
return item ? reactNodeToString(item.text) : '';
},
onInputValueChange({ inputValue }) {
onChange?.(inputValue ?? '');
onSearch?.(inputValue ?? '');
if (shouldFilterList) {
setItems(
list.filter(item =>
Expand Down Expand Up @@ -101,6 +104,18 @@ export const Dropdown = ({
}
}, [closeMenu, isOpen, openMenu, variant]);

const DropdownButton = () => {
return (
<button
className={clsx('deriv-dropdown__button', {
'deriv-dropdown__button--active': isOpen,
})}
>
{dropdownIcon}
</button>
);
};

useEffect(() => {
setItems(list);
}, [list]);
Expand All @@ -114,30 +129,24 @@ export const Dropdown = ({
>
<div className='deriv-dropdown__content'>
<Input
className={className}
disabled={disabled}
message={errorMessage}
label={reactNodeToString(label)}
name={name}
onClickCapture={handleInputClick}
onKeyUp={() => setShouldFilterList(true)}
readOnly={variant !== 'comboBox'}
leftPlaceholder={icon ? icon : undefined}
rightPlaceholder={ (
<button
className={clsx('deriv-dropdown__button', {
'deriv-dropdown__button--active': isOpen,
})}
>
{dropdownIcon}
</button>
)}
leftPlaceholder={icon ? icon : undefined}
rightPlaceholder={<DropdownButton/>}
type='text'
value={value}
{...getInputProps()}
{...rest}
/>
</div>
<ul className={`deriv-dropdown__items deriv-dropdown__items--${listHeight}`} {...getMenuProps()}>
{isOpen &&
{isOpen && (
items.map((item, index) => (
<li
className={clsx('deriv-dropdown__item', {
Expand All @@ -151,7 +160,9 @@ export const Dropdown = ({
{item.text}
</Text>
</li>
))}
))
)
}
</ul>
</div>
);
Expand Down

0 comments on commit eb7e5f6

Please sign in to comment.