acid-info/lsd
1
0
Fork 0
mirror of https://github.com/acid-info/lsd.git synced 2025-01-13 10:34:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: add useEffect to handle controlled version

Browse Source
This commit is contained in:
jongomez 2023-09-29 11:40:43 +01:00
parent 4fe8114af9
commit 0ec1162380
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/lsd-react/src/components/Dropdown/Dropdown.tsx
View File

@ -59,8 +59,6 @@ export const Dropdown: React.FC<DropdownProps> & {
const isControlled = isOpen !== undefined
const [openState, setOpenState] = useState(false)
const open = isControlled ? isOpen : openState
const { select, isSelected, selected } = useSelect(options, value, {
multi,
onChange,
@ -80,13 +78,18 @@ export const Dropdown: React.FC<DropdownProps> & {
const onTrigger = () => {
if (disabled) return
handleToggle(!open)
handleToggle(!openState)
}
useEffect(() => {
if (disabled && open && !isControlled) setOpenState(false)
if (disabled && openState && !isControlled) setOpenState(false)
}, [open, disabled, isControlled])
// Handle the controlled version of the component:
useEffect(() => {
typeof isOpen !== 'undefined' && setOpenState(isOpen)
}, [isOpen])
const buttonId = props?.id ?? (props.id || 'dropdown') + '-input'
return (
@ -100,7 +103,7 @@ export const Dropdown: React.FC<DropdownProps> & {
dropdownClasses[size],
error && dropdownClasses.error,
disabled && dropdownClasses.disabled,
open && dropdownClasses.open,
openState && dropdownClasses.open,
variant === 'outlined'
? dropdownClasses.outlined
: dropdownClasses.outlinedBottom,
@ -137,7 +140,7 @@ export const Dropdown: React.FC<DropdownProps> & {
<ErrorIcon color="primary" className={dropdownClasses.icon} />
)}
{open ? (
{openState ? (
<ArrowUpIcon
color="primary"
className={dropdownClasses.menuIcon}
@ -164,7 +167,7 @@ export const Dropdown: React.FC<DropdownProps> & {
<Portal id="dropdown">
<DropdownMenu
handleRef={containerRef}
open={open}
open={openState}
onClose={() => handleToggle(false)}
size={size}
genericFontFamily={props.genericFontFamily}