Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Search] Make CustomComponents more adjustable #360

Open
3 tasks done
artmarks opened this issue Sep 13, 2024 · 1 comment
Open
3 tasks done

[Search] Make CustomComponents more adjustable #360

artmarks opened this issue Sep 13, 2024 · 1 comment
Labels

Comments

@artmarks
Copy link
Contributor

Issue description

We need a specific info message if there is no result found in the search. The message should have a certain format and coloring.

Discussion

To realize this we could create a new optional prop customComponents that looks like this:

export interface CustomComponents {
    Menu?: ComponentType<MenuProps<SearchOption, false, SearchGroupOption>> | undefined,
    Input?: ComponentType<InputProps<SearchOption, false, SearchGroupOption>> | undefined,
    SingleValue?: ComponentType<SingleValueProps<SearchOption, false, SearchGroupOption>> | undefined,
    Option?: ComponentType<OptionProps<SearchOption, false, SearchGroupOption>> | undefined,
    NoOptionsMessage?: ComponentType<NoticeProps<SearchOption, false, SearchGroupOption>> | undefined,
    LoadingMessage?: ComponentType<NoticeProps<SearchOption, false, SearchGroupOption>> | undefined,
    ValueContainer?: ComponentType<ValueContainerProps<SearchOption, false, SearchGroupOption>> | undefined,
    IndicatorsContainer?: ComponentType<IndicatorsContainerProps<SearchOption, false, SearchGroupOption>> | undefined,
    ClearIndicator?: ComponentType<ClearIndicatorProps<SearchOption, false, SearchGroupOption>> | undefined
}

and exchange thoose given components with the defaults ones in useCustomComponents.

We would also be open to other suggestions to our issue :)

Validations

@mbeckem
Copy link
Contributor

mbeckem commented Oct 1, 2024

I wouldn't go as far as exposing all possible options that react-select gives us. I'd like to preserve the option to switch to another component in the future. Exposing an API that is very close to react-select's functionality would make that very hard.
The following features may be a good compromise for the time being (with PRs being highly welcome):

  • A prop to configure an optional noResultsMessage (a string or even a custom react component). I don't know at this point if there is any context needed to render this message (there are two states: never searched and thus no results, i.e. "fresh" widget; and a search was attempted but returned no results). These may even be two props now that I think about it.
  • A prop to configure a custom loading message. You could, just as an idea, even be very fancy here: e.g. render which search sources are still searching and which are complete.

I think other 'overrides' are a bit out of scope at the moment and would need a good justification before thinking about implementing them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants