From 4938b1ec6bb12ee8efa81dcf616d36dff7a27472 Mon Sep 17 00:00:00 2001 From: yaswanth-deriv <121096908+yaswanth-deriv@users.noreply.github.com> Date: Mon, 5 Feb 2024 11:07:48 +0400 Subject: [PATCH 1/4] Added input props to dropdown --- lib/components/Dropdown/index.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/lib/components/Dropdown/index.tsx b/lib/components/Dropdown/index.tsx index 42404f21..bc3943ae 100644 --- a/lib/components/Dropdown/index.tsx +++ b/lib/components/Dropdown/index.tsx @@ -1,4 +1,4 @@ -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"; @@ -7,7 +7,7 @@ import {Input } from '../Input/index'; import './Dropdown.scss'; type InputProps = React.ComponentProps; -type TProps = { +type TProps = HtmlHTMLAttributes & { disabled?: boolean; dropdownIcon: React.ReactNode; errorMessage?: InputProps['message']; @@ -20,12 +20,13 @@ type TProps = { }[]; listHeight?: Extract; name: InputProps['name']; - onChange?: (inputValue: string) => void; + onInputChange?: (inputValue: string) => void; onSelect: (value: string) => void; value?: InputProps['value']; variant?: 'comboBox' | 'prompt'; }; + export const Dropdown = ({ disabled, dropdownIcon, @@ -35,7 +36,7 @@ export const Dropdown = ({ list, listHeight = 'md', name, - onChange, + onInputChange, onSelect, value, variant = 'prompt', @@ -69,7 +70,7 @@ export const Dropdown = ({ return item ? reactNodeToString(item.text) : ''; }, onInputValueChange({ inputValue }) { - onChange?.(inputValue ?? ''); + onInputChange?.(inputValue ?? ''); if (shouldFilterList) { setItems( list.filter(item => From 45a2c4e01ce6c7a6a0417913f3aecc54885fc901 Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Wed, 7 Feb 2024 17:56:05 +0400 Subject: [PATCH 2/4] refactor: made changes in css file --- lib/components/Dropdown/Dropdown.scss | 2 +- lib/components/Dropdown/index.tsx | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/lib/components/Dropdown/Dropdown.scss b/lib/components/Dropdown/Dropdown.scss index 61954199..23531ac3 100644 --- a/lib/components/Dropdown/Dropdown.scss +++ b/lib/components/Dropdown/Dropdown.scss @@ -89,7 +89,7 @@ &__items { position: absolute; - top: 2.7rem; + top: 2.9rem; width: 100%; display: flex; flex-direction: column; diff --git a/lib/components/Dropdown/index.tsx b/lib/components/Dropdown/index.tsx index bc3943ae..726a897f 100644 --- a/lib/components/Dropdown/index.tsx +++ b/lib/components/Dropdown/index.tsx @@ -20,7 +20,7 @@ type TProps = HtmlHTMLAttributes & { }[]; listHeight?: Extract; name: InputProps['name']; - onInputChange?: (inputValue: string) => void; + onSearch?: (inputValue: string) => void; onSelect: (value: string) => void; value?: InputProps['value']; variant?: 'comboBox' | 'prompt'; @@ -36,10 +36,11 @@ export const Dropdown = ({ list, listHeight = 'md', name, - onInputChange, + onSearch, onSelect, value, variant = 'prompt', + ...rest }:TProps) => { const [items, setItems] = useState(list); const [shouldFilterList, setShouldFilterList] = useState(false); @@ -70,7 +71,7 @@ export const Dropdown = ({ return item ? reactNodeToString(item.text) : ''; }, onInputValueChange({ inputValue }) { - onInputChange?.(inputValue ?? ''); + onSearch?.(inputValue ?? ''); if (shouldFilterList) { setItems( list.filter(item => @@ -135,6 +136,7 @@ export const Dropdown = ({ type='text' value={value} {...getInputProps()} + {...rest} />
    From 8519176af284945dd6864c7f9d56fa58a458b5d6 Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Thu, 8 Feb 2024 10:59:19 +0400 Subject: [PATCH 3/4] refactor: Added max-height for dropdown list --- lib/components/Dropdown/index.tsx | 38 +++++++++++++++++++------------ src/main.tsx | 32 ++++++++++++++++++++++++++ 2 files changed, 55 insertions(+), 15 deletions(-) diff --git a/lib/components/Dropdown/index.tsx b/lib/components/Dropdown/index.tsx index 726a897f..5e431e65 100644 --- a/lib/components/Dropdown/index.tsx +++ b/lib/components/Dropdown/index.tsx @@ -11,6 +11,7 @@ type TProps = HtmlHTMLAttributes & { disabled?: boolean; dropdownIcon: React.ReactNode; errorMessage?: InputProps['message']; + dropdownHeight?:string; icon?: React.ReactNode; isRequired?: boolean; label?: InputProps['label']; @@ -31,6 +32,7 @@ export const Dropdown = ({ disabled, dropdownIcon, errorMessage, + dropdownHeight, icon = false, label, list, @@ -140,21 +142,27 @@ export const Dropdown = ({ />
      - {isOpen && - items.map((item, index) => ( -
    • clearFilter()} - {...getItemProps({ index, item })} - > - - {item.text} - -
      • - ))} + {isOpen &&( +
      + { + items.map((item, index) => ( +
    • clearFilter()} + {...getItemProps({ index, item })} + > + + {item.text} + +
      • + )) + } +
      + ) + }
    ); diff --git a/src/main.tsx b/src/main.tsx index 6661c4e6..c64c5a83 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -19,6 +19,38 @@ ReactDOM.createRoot(document.getElementById('root')!).render( text: 'Option 2', value: 'option2' }, + { + text: 'Option 3', + value: 'option3' + }, + { + text: 'Option 4', + value: 'option4' + }, + { + text: 'Option 5', + value: 'option5' + }, + { + text: 'Option 6', + value: 'option6' + }, + { + text: 'Option 7', + value: 'option7' + }, + { + text: 'Option 8', + value: 'option8' + }, + { + text: 'Option 9', + value: 'option9' + }, + { + text: 'Option 10', + value: 'option10' + }, ]} dropdownIcon="down" onSelect={(value) => console.log(value)} From 0e4c564840afc90fe823cffc17e8da2d4b7b2268 Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Fri, 9 Feb 2024 10:30:51 +0400 Subject: [PATCH 4/4] refactor: Added xs in style --- lib/components/Dropdown/Dropdown.scss | 4 +- lib/components/Dropdown/index.tsx | 74 +++++++++++++-------------- 2 files changed, 40 insertions(+), 38 deletions(-) diff --git a/lib/components/Dropdown/Dropdown.scss b/lib/components/Dropdown/Dropdown.scss index 23531ac3..1952616b 100644 --- a/lib/components/Dropdown/Dropdown.scss +++ b/lib/components/Dropdown/Dropdown.scss @@ -107,7 +107,9 @@ & > :last-child { border-radius: 0 0 0.4rem 0.4rem; } - + &--xs { + max-height: 12.5rem; + } &--sm { max-height: 22rem; } diff --git a/lib/components/Dropdown/index.tsx b/lib/components/Dropdown/index.tsx index 5e431e65..2627430e 100644 --- a/lib/components/Dropdown/index.tsx +++ b/lib/components/Dropdown/index.tsx @@ -1,9 +1,9 @@ -import React, { isValidElement,HtmlHTMLAttributes ,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; @@ -11,7 +11,6 @@ type TProps = HtmlHTMLAttributes & { disabled?: boolean; dropdownIcon: React.ReactNode; errorMessage?: InputProps['message']; - dropdownHeight?:string; icon?: React.ReactNode; isRequired?: boolean; label?: InputProps['label']; @@ -19,7 +18,7 @@ type TProps = HtmlHTMLAttributes & { text?: React.ReactNode; value?: string; }[]; - listHeight?: Extract; + listHeight?: Extract; name: InputProps['name']; onSearch?: (inputValue: string) => void; onSelect: (value: string) => void; @@ -29,21 +28,21 @@ type TProps = HtmlHTMLAttributes & { export const Dropdown = ({ + className, disabled, dropdownIcon, errorMessage, - dropdownHeight, icon = false, label, list, - listHeight = 'md', + listHeight = 'xs', name, onSearch, onSelect, value, variant = 'prompt', ...rest -}:TProps) => { +}: TProps) => { const [items, setItems] = useState(list); const [shouldFilterList, setShouldFilterList] = useState(false); const clearFilter = useCallback(() => { @@ -105,6 +104,18 @@ export const Dropdown = ({ } }, [closeMenu, isOpen, openMenu, variant]); + const DropdownButton = () => { + return ( + + ); + }; + useEffect(() => { setItems(list); }, [list]); @@ -118,6 +129,7 @@ export const Dropdown = ({ >
    setShouldFilterList(true)} readOnly={variant !== 'comboBox'} - leftPlaceholder={icon ? icon : undefined} - rightPlaceholder={ ( - - )} + leftPlaceholder={icon ? icon : undefined} + rightPlaceholder={} type='text' value={value} {...getInputProps()} @@ -142,27 +146,23 @@ export const Dropdown = ({ />
      - {isOpen &&( -
      - { - items.map((item, index) => ( -
    • clearFilter()} - {...getItemProps({ index, item })} - > - - {item.text} - -
      • - )) - } -
      + {isOpen && ( + items.map((item, index) => ( +
    • clearFilter()} + {...getItemProps({ index, item })} + > + + {item.text} + +
      • + )) ) - } + }
    );