useStepsForm spec

[nitta-honoka]

import { Steps, Form, Button } from 'antd'
import { useStepsForm } from 'sunflower-antd'

const { Step } = Steps

function App(props) {
  const { form } = props
  const { stepProps, current, total, formProps } = useStepsForm({
    form,
    total: 2,
    defaultCurrent: 0,
    async submit() {}, // submit form
  })

  return (
    <>
      <Steps {...stepProps}>
        <Step title="first step" description="this is my first step" />
        <Step title="second step" />
      </Steps>
      <Form {...formProps}>
        {
          current === 0 && (
            <>
              <Form.Item label="username">
                {
                  form.getFieldDecorator('username')(
                    <Input placeholder="Username" />
                  )
                } 
              </Form.Item>
            </>
          )
        }
        {
          current === 1 && (
            <>
              <Form.Item label="Email">
                {
                  form.getFieldDecorator('email')(
                    <Input placeholder="Email" />
                  )
                } 
              </Form.Item>
            </>
          )
        }
      </Form>
      {
        current < total - 1 && <Button onClick={stepProps.goStep(1)}>下一步</Button>
      }
    </>
  )
}

auto controlled step state and get the related form props

[JIACHENG9]

need "defaultFormValues"