Using generic components

https://github.com/Microsoft/TypeScript/issues/3960

Tried to make the drop down as a generic component. Didn't work as intended so parking it here.

interface Props<TModel> {
    dropdownOptions: DropdownItemProps[];
    propertyName: keyof TModel;
    updateProperty: (prop: keyof TModel, value: any, valid: boolean) => void;
    dropdownValues: LinkObject[];
}

export default class LinkObjectValuedDropDownMulti<TModel> extends React.Component<Props<TModel> & DropdownProps, {}> {
    public render() {
        return (
            < ...  />
        );
    }

    private onUpdateSelectedProperty = (values: string[], valid: boolean) => {
        this.props.updateProperty(this.props.propertyName, values.map((v): LinkObject =>
            ({ name: this.props.dropdownOptions.find(d => d.id === v).name, id: v })), valid);
    }
}

Usage

const NamedDropDownMulti = LinkObjectValuedDropDownMulti as (new () => LinkObjectValuedDropDownMulti<NamedModel>);


<WorkGroupDropDownMulti
    search
    dynamicOptions
    dropdownValues={this.state.values.named}
    label="named"
    placeholder="named"
    showErrors={this.state.showErrors}
    dropdownOptions={this.props.named}
    updateProperty={this.updateProperty}
    propertyName="named"
    onUpdateSelectedProperty={this.onUpdateSelectedProperty}
/>

gruckion / learning

Using generic components #26