jannikbuschke / formik-antd

Simple declarative bindings for Ant Design and Formik.

Home Page:https://codesandbox.io/s/github/jannikbuschke/formik-antd-example

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Convert FormItem to compound component to automatically pass name prop

braedongough opened this issue · comments

Would you be open to a PR that converts the FormItem to a compound component that automatically passes the name prop to its child? It could still, in theory, allow a user to add a different name prop, however, I can't think of a use-case where there would be necessary.

In short, the PR would make it so that the name only needs to exist on FormItem when it is present.

example:

                    <Form.Item name="company">
                        <Select
                            name="company"
                            placeholder="Select a company"
                        >
                            {companies.map(({ name, id }) => (
                                <Option key={id} value={id}>
                                    {name}
                                </Option>
                            ))}
                        </Select>
                    </Form.Item>

could become:

                    <Form.Item name="company">
                        <Select placeholder="Select a company">
                            {companies.map(({ name, id }) => (
                                <Option key={id} value={id}>
                                    {name}
                                </Option>
                            ))}
                        </Select>
                    </Form.Item>

Hi @braedongough , thanks for your suggestion.

Theoretically this approach is valid, however we would need to make the name prop on formik-antd components optional, which is not ideal for scenarios without FormItem.

If we would add prop types, maybe it does not matter. Or there are better alternatives, like reexporting the types with a different signature?

Before you start working on this, lets first try to figure this out.

I thought the same, which is why I wanted to check before opening a PR if it was worth spending the time investigating!

I'm not actually familiar with how Typescript reacts to passing props from compound components, so I'll play around a bit and share my findings.

I'm going to close this issue, I don't haven't been able to come up with a nice solution and likely won't explore it further.

I did, however, find it a bit tricky to test the components. Would you be opposed to a PR introducing storybook to make testing and previewing changes easier?

@braedongough sure, Storybook might be a good enhancement. Feel free to open a PR.