frontend: create reusable single & multi dropdown #3071
Conversation
To improve codebase by reducing redundancy, we create a reusable single & multi dropdown based on ReactSelect.
|
Second commit, 8821fe1 is an example of how we're going to use our new reusable |
|
nice 🎉 cACK |
| defaultValue?: TOption<T> | TOption<T>[] | null; // selected default value(s) | ||
| value?: TOption<T> | TOption<T>[] | null; // selected value(s) | ||
| classNamePrefix?: string; // Prefix for custom class names | ||
| renderOptions: (selectedItem: TOption<T>) => ReactNode; // Function to render options |
There was a problem hiding this comment.
This renderOptions prop provides a unified way to render both the selected option (in single dropdowns) and all available options in the dropdown list.
This allows for flexibility in customizing the rendering, such as including icons (e.g., checkmarks, flags) or any other ReactNode components. It also allows for custom styling to an extent. Basically we can add stuff into the option(s) without relying on fixed props like rightIcon or extraComponent.
Since renderOptions is applied to both the selected option and the dropdown options, they will share the same rendering logic. This consistency works well for our app, where selected options and dropdown options have always been rendered identically.
However, if there’s a need for more flexibility, such as rendering selected options and dropdown options differently lmk and we can add another prop.
To improve codebase by reducing redundancy, we create a reusable
single & multi dropdown based on ReactSelect.