You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hey everyone, I hope to find all of you well! I have been testing new inputs and changes in tremor and I have a suggestion. Right now, I have added a SearchSelect where I render a list of clients. Each client has a logo for their brand, but its an external image url, so I cant render a static component as it needs the url prop to be passed. To solve this, I had to do something like this in the SearchSelectInput wrapper I am creating:
Its working BUT the browser gives a warning because a div cant be a child of select option:
What does the proposed API look like?
To solve this, I have thought about changing the icon signature to accept a React.ReactNode too, and in the render just check if the icon is a function or not, so it would allow to pass custom components. It would be something like this:
importReactfrom'react'import{Combobox}from'@headlessui/react'import{makeClassName,tremorTwMerge}from'lib'constmakeSearchSelectItemClassName=makeClassName('SearchSelectItem')exportinterfaceSearchSelectItemPropsextendsReact.HTMLAttributes<HTMLLIElement>{value: stringicon?: React.ElementType|React.ReactNode}constSearchSelectItem=React.forwardRef<HTMLLIElement,SearchSelectItemProps>((props,ref)=>{const{ value, icon, className, children, ...other}=props// Render the icon if it's a component type (function) or a valid React elementconstrenderIcon=()=>{if(typeoficon==='function'){consticonClassName=()=>tremorTwMerge(makeSearchSelectItemClassName('icon'),'flex-none h-5 w-5 mr-3 text-tremor-content-subtle dark:text-dark-tremor-content-subtle')constIconComponent=iconreturn<IconComponentclassName={iconClassName()}/>}elseif(React.isValidElement(icon)){returnicon}returnnull}return(<Combobox.OptionclassName={tremorTwMerge(makeSearchSelectItemClassName('root'),'flex justify-start items-center cursor-default text-tremor-default p-2.5 ui-active:bg-tremor-background-muted ui-active:text-tremor-content-strong ui-selected:text-tremor-content-strong ui-selected:bg-tremor-background-muted text-tremor-content-emphasis dark:ui-active:bg-dark-tremor-background-muted dark:ui-active:text-dark-tremor-content-strong dark:ui-selected:text-dark-tremor-content-strong dark:ui-selected:bg-dark-tremor-background-muted dark:text-dark-tremor-content-emphasis',className)}ref={ref}key={value}value={value}{...other}>{renderIcon()}<spanclassName="whitespace-nowrap truncate">{children??value}</span></Combobox.Option>)})SearchSelectItem.displayName='SearchSelectItem'exportdefaultSearchSelectItem
What do you think? Btw if you just want to keep this simple and allow this custom functionality in the new raw components you are creating, i totally understand it :)
The text was updated successfully, but these errors were encountered:
What problem does this feature solve?
Hey everyone, I hope to find all of you well! I have been testing new inputs and changes in tremor and I have a suggestion. Right now, I have added a
SearchSelect
where I render a list of clients. Each client has a logo for their brand, but its an external image url, so I cant render a static component as it needs the url prop to be passed. To solve this, I had to do something like this in theSearchSelectInput
wrapper I am creating:Its working BUT the browser gives a warning because a div cant be a child of select option:
What does the proposed API look like?
To solve this, I have thought about changing the icon signature to accept a React.ReactNode too, and in the render just check if the icon is a function or not, so it would allow to pass custom components. It would be something like this:
What do you think? Btw if you just want to keep this simple and allow this custom functionality in the new raw components you are creating, i totally understand it :)
The text was updated successfully, but these errors were encountered: