DrawerHOC Usage Guide

A high-order component for Ant Design Drawer.

Encapsulate Drawer

1. Create the component and wrap it with DrawerHOC.

import DrawerHOC from '@bywin/drawer-hoc'
import React from 'react'
const XxxDrawer = (props) => {
const [form] = Form.useForm()
const model = {
  [key]: value
}
return (
  props.bindForm(form, model)({
    schema: {
      properties: [
        [
          {
            key: 'form field key',
            title: 'form field label',
            value: 'string or form field component'
          }
        ]
      ]
    }
  })
  )
}
export default DrawerHOC(XxxDrawer, {
  title: 'drawer title',
  type: 'ADD' | 'UPDATE' | 'DETAIL',
  events: {
    onOk: (dispatch, data) => {
      // TODO: handle form submition here with dispatch.
    }
  }
})

2. Dispatch UI change

const dispatch = useDispatch()
dispatch({
  type: 'DrawerHOC/updateUI',
  payload: {
    XxxDrawer: {
      visible: true
    }
  }
})

3. Add the corresponding component state in src/models/DrawerHOC.js file.

state: {
  UIState: {
    DispositionCreateDrawer: {
      visible: false
    },
    DispositionFeatureCreateDrawer: {
      visible: false
    },
    FeatureListUpdateDrawer: {
      visible: false
    },
    XxxDrawer: {
      visible: false
    },
  }
}

4. Import the component in your page.

<XxxDrawer />

5. Naming style of DrawerHOC.

• XxxDetailDrawer
• XxxCreateDrawer
• XxxUpdateDrawer

Encapsulate Form

FormBuilder.createForm({
  schema: {
    properties: [
      [
        {
          key: 'form field key',
          title: 'form field label',
          value: 'string or form field component'
        }
      ]
    ]
  }
})