[Feature] Generic dropdown component

I’m toying around with making Dropdown generic. It will allow us to remove a lot of boiler plating from our app. Is this the right place to share this to spark a discussion? Obviously there’s some performance and feature issues to work - but this proves that it can work.

import * as React from "react";
import { Dropdown as SemanticDropdown, SemanticShorthandContent } from "semantic-ui-react";

interface IProps<T> {
    value: T | null | undefined;
    options: T[] | null | undefined;
    mapValue: (v: T) => boolean | number | string;
    mapText: (v: T) => SemanticShorthandContent;
    onChange: (v: T | undefined) => void;
}

export class Dropdown<T> extends React.Component<IProps<T>, any> {
    public render(): JSX.Element {
        const props = this.props;
        const options = props.options && props.options.map((o) => ({
            value: props.mapValue(o),
            text: props.mapText(o),
        }));
        return (
            <SemanticDropdown
                options={options || []}
                value={props.value && props.mapValue(props.value) || undefined}
                onChange={(e, d) => props.onChange(props.options && props.options.find((o) => props.mapValue(o) === d.value) || undefined)} />
        );
    }
}

Usage is incredibly easy - especially since typescript 2.9:

interface Props {
    animals: Animal[];
}
interface State {
    selectedAnimal: Animal;
}
interface Animal {
    id: number;
    name: string;
    color: string;
}
<Dropdown<Animal>
    value={this.state.selectedAnimal}
    options={this.props.animals}
    mapValue={(animal) => animal.id}
    mapText={(animal) => (<span style={{ color: animal.color }}>{animal.name}</span>)}
    onChange={(animal) => { this.setState({ selectedAnimal: animal }); }} />

[SaphuA]

First of all this is obviously meant as a PoC and not something production ready. I think this is something this library would benefit from which is why I´m starting the discussion. Also I´m talking about generics like in C#.

As you can see in the usage example I´m using Dropdown<T> with the generic type Animal which means I can insert an Animal[] into the options field and have the onChange event return an Animal.

Whereas - unless I´m using it wrong - the current version of the Dropdown would first require me to map Animal[] array to { value: number, text: string }[]. Then the onChange would return an number which I would use to search the Animal[] for the correct item. Some of this boiler plating can either be removed or rewritten more cleanly with a generic version of the Dropdown.

[stale[bot]]

This issue will be closed due to lack of activity for 12 months. If you’d like this to be reopened, just leave a comment; we do monitor them!