add support for antd 5 Beta/3.0

README.md

@@ -124,6 +124,38 @@ There is one special case to be aware of when using field-level validation: When
 </Form.Item>
 ```
 
+## Combined Form.Item and input components
+
+If you happen to wrap each input component in a `Form.Item` component, you might end up with quite a bit of nesting and boilerplate (always duplicating the `name` prop as well as potentially aria labels/values with `htmlFor` and `id`). Instead you can import the components from the path `es/form-items`. There all components are wrapped with a `Form.Item`. Additionally `htmlFor` on `Form.Item` and `id` prop on the ant d input component are set based on the `name` prop.
+The following two examples are identicall:
+
+```jsx
+import { Input } from 'formik-antd/es/form-items'
+```
+
+```jsx
+<Input
+  name='firstName'
+  formItem={{ validate: validator, conol: false, label: 'First name' }}
+/>
+```
+
+```jsx
+import { Form, Input } from 'formik-antd'
+```
+
+```jsx
+<Form.Item
+  htmlFor='firstName'
+  name='firstName'
+  label='First name'
+  validate={validator}
+  colon={false}
+>
+  <Input id='firstName' name='firstName' />
+</Form.Item>
+```
+
 ## Rendering Validation Feedback
 
 Showing validation messages can be accomplished with the `Form.Item` component (or `FormItem` which is the same). It

advanced-components/add-row-button/index.stories.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { StoryTemplate } from '../shared'
+import Component from './'
+
+export default {
+  title: 'Array/AddRowButton',
+  component: Component,
+} as ComponentMeta<typeof Component>
+
+const Template: ComponentStory<typeof Component> = () => {
+  return (
+    <>
+      <StoryTemplate initialValues={{ value: null }}>
+        <div style={{ width: 500 }}>
+          <Component name='value' createNewRow={() => ({})}>
+            add row
+          </Component>
+        </div>
+      </StoryTemplate>
+    </>
+  )
+}
+
+export const Default = Template.bind({})

src/add-row-button/index.tsx → advanced-components/add-row-button/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ButtonProps } from 'antd/lib/button'
+import { ButtonProps } from 'antd/es/button'
 import { ArrayButton } from '../array-button'
 
 export function AddRowButton<T = any>({

advanced-components/add-row-button/style/css.tsx

@@ -0,0 +1 @@
+import 'antd/es/button/style/css.js'

advanced-components/add-row-button/style/index.tsx

@@ -0,0 +1 @@
+import 'antd/es/button/style'

advanced-components/array-button/index.stories.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { StoryTemplate } from '../shared'
+import Component from './'
+
+export default {
+  title: 'Array/Button',
+  component: Component,
+} as ComponentMeta<typeof Component>
+
+const Template: ComponentStory<typeof Component> = () => {
+  return (
+    <>
+      <StoryTemplate initialValues={{ value: null }}>
+        <div style={{ width: 500 }}>
+          <Component name='value' onClick={(array) => {}} />
+        </div>
+      </StoryTemplate>
+    </>
+  )
+}
+
+export const Default = Template.bind({})

src/array-button/index.tsx → advanced-components/array-button/index.tsx

@@ -1,6 +1,7 @@
 import { FieldArray, FieldArrayRenderProps } from 'formik'
 import * as React from 'react'
-import Button, { ButtonProps } from 'antd/lib/button'
+import { Button } from 'antd'
+import { ButtonProps } from 'antd/es/button'
 
 export function ArrayButton({
   name,

advanced-components/array-button/style/css.tsx

@@ -0,0 +1 @@
+import 'antd/es/button/style/css.js'

advanced-components/array-button/style/index.tsx

@@ -0,0 +1 @@
+import 'antd/es/button/style'

advanced-components/form-items/index.tsx

@@ -0,0 +1,187 @@
+import * as React from 'react'
+import {
+  InputProps,
+  Input as $Input,
+  TextAreaProps,
+  PasswordProps,
+} from '../input'
+import { Checkbox as $Checkbox } from '../checkbox'
+import FormItem, { FormItemProps as $FormItemProps } from '../form-item'
+import { CheckboxProps } from '../checkbox'
+import { Cascader as $Cascader, CascaderProps } from '../cascader'
+import { DatePicker as $DatePicker, DatePickerProps } from '../date-picker'
+import { InputNumber as $InputNumber, InputNumberProps } from '../input-number'
+import { Mentions as $Mentions, MentionProps } from '../mentions'
+import { Radio as $Radio, RadioGroupProps } from '../radio'
+import { Rate as $Rate, RateProps } from '../rate'
+import { Select as $Select, SelectProps } from '../select'
+import { Slider as $Slider, SliderProps } from '../slider'
+import { Switch as $Switch, SwitchProps } from '../switch'
+import { TimePicker as $TimePicker, TimePickerProps } from '../time-picker'
+import { Transfer as $Transfer, TransferProps } from '../transfer'
+import { TreeSelect as $TreeSelect, TreeSelectProps } from '../tree-select'
+import { TransferItem } from 'antd/es/transfer'
+import { BaseOptionType, DefaultOptionType } from 'antd/es/cascader'
+
+type FormItemProps = {
+  formItem?: Omit<$FormItemProps, 'children' | 'name' | 'id' | 'htmlFor'>
+}
+
+export function Input({ formItem, ...rest }: InputProps & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$Input id={rest.name} {...rest} />
+    </FormItem>
+  )
+}
+
+export function InputNumber({
+  formItem,
+  ...rest
+}: InputNumberProps & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$InputNumber id={rest.name} {...rest} />
+    </FormItem>
+  )
+}
+export function TextArea({ formItem, ...rest }: TextAreaProps & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$Input.TextArea id={rest.name} {...rest} />
+    </FormItem>
+  )
+}
+
+Input.TextArea = TextArea
+
+export function Password({ formItem, ...rest }: PasswordProps & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$Input.Password id={rest.name} {...rest} />
+    </FormItem>
+  )
+}
+
+Input.Password = Password
+
+export function Checkbox({ formItem, ...rest }: CheckboxProps & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$Checkbox id={rest.name} {...rest} />
+    </FormItem>
+  )
+}
+
+export function Cascader<
+  OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType,
+>({ formItem, ...rest }: CascaderProps<OptionType> & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$Cascader<OptionType> {...rest} />
+    </FormItem>
+  )
+}
+
+export function DatePicker({
+  formItem,
+  ...rest
+}: DatePickerProps & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$DatePicker id={rest.name} {...rest} />
+    </FormItem>
+  )
+}
+
+export function Mentions({ formItem, ...rest }: MentionProps & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$Mentions id={rest.name} {...rest} />
+    </FormItem>
+  )
+}
+
+export function Radio({ formItem, ...rest }: RadioGroupProps & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$Radio id={rest.name} {...rest} />
+    </FormItem>
+  )
+}
+
+export function RadioGroup({
+  formItem,
+  ...rest
+}: RadioGroupProps & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$Radio.Group id={rest.name} {...rest} />
+    </FormItem>
+  )
+}
+
+export function Rate({ formItem, ...rest }: RateProps & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$Rate {...rest} />
+    </FormItem>
+  )
+}
+
+export function Select({ formItem, ...rest }: SelectProps & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$Select id={rest.name} {...rest} />
+    </FormItem>
+  )
+}
+
+export function Slider({ formItem, ...rest }: SliderProps & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$Slider id={rest.name} {...rest} />
+    </FormItem>
+  )
+}
+
+export function Switch({ formItem, ...rest }: SwitchProps & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$Switch {...rest} />
+    </FormItem>
+  )
+}
+
+export function TimePicker({
+  formItem,
+  ...rest
+}: TimePickerProps & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$TimePicker id={rest.name} {...rest} />
+    </FormItem>
+  )
+}
+
+export function Transfer<RecordType extends TransferItem = TransferItem>({
+  formItem,
+  ...rest
+}: TransferProps<RecordType> & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$Transfer {...rest} />
+    </FormItem>
+  )
+}
+
+export function TreeSelect({
+  formItem,
+  ...rest
+}: TreeSelectProps & FormItemProps) {
+  return (
+    <FormItem {...formItem} name={rest.name} htmlFor={rest.name} id={rest.name}>
+      <$TreeSelect {...rest} />
+    </FormItem>
+  )
+}

advanced-components/remove-row-button/index.stories.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { ComponentMeta } from '@storybook/react'
+import { StoryTemplate } from '../shared'
+import Component from './'
+import { Table } from '../table'
+
+export default {
+  title: 'Array/RemoveRowButton',
+  component: Component,
+} as ComponentMeta<typeof Component>
+
+export const Default = () => (
+  <StoryTemplate
+    initialValues={{ value: [{ label: 'item1' }, { label: 'item2' }] }}
+  >
+    <div>
+      <Table<{ label: string }>
+        name='value'
+        columns={[
+          {
+            title: 'Label',
+            render: (value, record) => <div>{record.label}</div>,
+          },
+        ]}
+      />
+      <Component name='value' index={0}>
+        Remove item at position 0
+      </Component>
+    </div>
+  </StoryTemplate>
+)

src/remove-row-button/index.tsx → advanced-components/remove-row-button/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ButtonProps } from 'antd/lib/button'
+import { ButtonProps } from 'antd/es/button'
 import { ArrayButton } from '../array-button'
 
 export function RemoveRowButton({

advanced-components/remove-row-button/style/css.tsx

@@ -0,0 +1 @@
+import 'antd/es/button/style/css.js'

advanced-components/remove-row-button/style/index.tsx

@@ -0,0 +1 @@
+import 'antd/es/button/style'