Allow different (styled) input components

[gkaemmer]

(Sorry to overload you with issues)

One disadvantage of using the built-in bidi-mobx input components is that they always render input or a checkbox or a select, but I actually want to render a specific styled version of those elements. For example, we mostly use styled-components to control form styling, and we'd love for TextInput to be able to render one of our styled Inputs.

I realize the bidi-mobx components are pretty easy for users to re-write using their own styles and functionality, but it might be handy to allow them to render an arbitrary component:

    // In TextInput.js
    ...
    render() {
        const { InputComponent: component = "input" } = this.props;
        return (
            <InputComponent type="text"
    ...

[danielearwicker]

I think this is a great idea so I've implemented it. There is now an optional component property on the four built-ins, except Select has two: selectComponent and optionComponent.

In addition I've added helpers called CheckBoxUsing, TextInputUsing, etc. These take an input component (such as a styled component) and return a bidi component bound to it. This is just a handy helper to make it more succinct. From the new example:

export const StyledInput1 = styled.input`
    background: purple;
    color: orange;
`;

    // elsewhere
    return <TextInput component={StyledInput1} value={this.text} />

Or to cut down syntactic noise:

const StyledInput2 = TextInputUsing(StyledInput1);

    // elsewhere
    return <StyledInput2 value={this.text} />

Of course you could do it all in one step:

const StyledInput3 = TextInputUsing(styled.input`
    background: purple;
    color: orange;
`);

As you'd expect, none of this is dependent on static-components - it just happens to fit nicely with it.

[gkaemmer]

Oh nice, thanks!

I'll add that in last example, you could take advantage of the styled function:

const StyledInput3 = styled(TextInput)`
    background: purple;
    color: orange;
`);

[danielearwicker]

That's cool, and it looks like styled-component has very good TypeScript support.