---
order: 8
title: 0.5 to 0.7
---

This document will help you upgrade from dpl `0.5.x` (antd `3.x`) version to dpl `0.7.x` (antd `4.x`) version.

## Upgrade preparation

1. Upgrade project React 16.12.0 or above.
   - If you are still using React 15, please refer to [React 16 Upgrade Documentation](https://reactjs.org/blog/2017/09/26/react-v16.0.html#breaking-changes).
   - For the remaining React 16 obsolete lifecycle APIs, please refer to [Migration Guide](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path).

## Incompatible changes in 0.7.x

### Compatibility

- The minimum supported version of IE is IE 11.
- The minimum supported version of React is React 16.9, and some components have started to refactor using hooks.
  - Internal using `useMemo` for performance, do not use mutable data as props.

#### Remove deprecated API

- LocaleProvider has been removed, please use `ConfigProvider` instead.
- Mention removed, use `Mentions` instead.
- Removed the `iconType` property of Alert. Please use `icon` instead.
- Removed the `iconType` attribute of Modal.xxx. Please use `icon` instead.
- Removed the Form.create method, `form` is now available in `Form.useForm`.
- Removed the `id` attribute of Form.Item. Please use `htmlFor` instead.
- The `setContentRef` property of Typography has been removed, please use `ref` instead.
- Removed the `allowEmpty` property of TimePicker, please use `allowClear` instead.
- Removed `AfterClose` attribute of Tag, please use `OnClose` instead.
- Removed the `noHovering` property of Card, please use `hoverable` instead.
- Removed the `vertical` property of Carousel. Please use `dotPosition` instead.
- Removed `wrapClassName` property of Drawer, please use `className` instead.
- Removed the `autosize` property of TextArea. Please use `autoSize` instead.
- Removed the `offset` attribute of Affix. Please use `offsetTop` instead.
- Removed the `onSearchChange` property of Transfer. Please use `onSearch` instead.
- Removed the `body` attribute of Transfer. Please use `children` instead.
- Removed the `lazy` attribute of Transfer, which did not really optimize the effect.
- Removed `combobox` mode, please use `AutoComplete` instead.
- Removed the `rowSelection.hideDefaultSelections` property of Table, please use `SELECTION_ALL` and `SELECTION_INVERT` in `rowSelection.selections` instead, [Custom Selection](/components/table/#components-table-demo-row-selection-custom).
- Deprecated Button.Group, please use `Space` instead.

#### Icon upgrade

In `antd @ 3.9.0`, we introduced the svg icon.

Legacy Icon usage will be discarded:

```jsx
import { Button } from 'antd';

const Demo = () => (
  <div>
    <Button icon="link" />
  </div>
);
```

It will be imported on demand in v4:

```diff
 import { Button, Icon } from 'antd';

  const Demo = () => (
    <div>
      <Button icon={<Icon type='link'/>} />
    </div>
  );
```

#### Component refactoring

- Form rewrite.
  - No need to use `Form.create`.
  - Nest fields definition changes from `'xxx.yyy'` to `['xxx', 'yyy']`.
  - See [here](/docs/react/v3) for migration documentation.
- DatePicker rewrite
  - Provide the `picker` property for selector switching.
  - Range selection can now select start and end times individually.
  - `onPanelChange` will also trigger when panel value changed.
  - `Date cell className of Custom style demo` changed from `ant-calendar-date` to `ant-picker-cell-inner`.
- Tree, Select, TreeSelect, AutoComplete rewrite
  - use virtual scrolling.
  - `onBlur` no longer trigger value change and return React origin `event` object instead.
  - AutoComplete no longer support `optionLabelProp`. Please set Option `value` directly.
  - Select remove `dropdownMenuStyle` prop.
  - Use `listHeight` to config popup height instead of `dropdownStyle`.
  - `filterOption` return origin data with second params instead. No need to use `option.props.children` for matching.
  - Tree, TreeSelect will display `label` when `title` and `label` are both set. The adjustment is for aligning behavior with `labelInValue`. [New behavior](https://codesandbox.io/s/keen-curran-d3qnp) (show 'label' on first node). [Old behavior](https://codesandbox.io/s/muddy-darkness-57lb3) (show 'title' on first node).
- The Grid component uses flex layout.
- Button's `danger` is now treated as a property instead of a button type.
- Input, Select set `value` to `undefined` is uncontrolled mode now.
- Table rewrite.
  - will keep at least one column even if `columns` is empty.
  - Nest `dataIndex` definition changes from `'xxx.yyy'` to `['xxx', 'yyy']`.
- Pagination will default set `showSizeChanger` to `true` since `4.1.0`. This change also applied on Table component.
- Tabs rewrite. ([4.3.0](https://github.com/ant-design/ant-design/pull/24552))
  - Dom structrue is changed, please check style if you override tabs css.
  - `onPrevClick` 和 `onNextClick` would be not working anymore since we improve tabs scroll behavior.

```diff
<Table
  columns={[
    {
      title: 'Age',
-     dataIndex: 'user.age',
+     dataIndex: ['user', 'age'],
    },
  ]}
/>
```

## Start upgrading

- 全局替换   import { Form } from ‘@enos/dpl’   ->  import Form from '@enos/dpl/lib/legacy-form';
- 项目所有含有  ant-form的样式定制 统一替换成  ant-legacy-form,  如 .ant-form-explain 替换为 .ant-legacy-form-explain
-  Button  icon 属性  由 string -> ReactNode 需要替换成Icon标签 (注意: string类型引用的图标为antd内置图标， 换成 Icon标签引入的是Enos图标，所以不要简单的进行同名替换)