npm package: @gem-mine/fish-codemod-v4
Description: Codemod for fish docs v4 upgrade
Latest version: 1.0.2

English | [简体中文](./README.zh-CN.md)

# Fish Docs v4 Codemod

A collection of codemod scripts that help upgrade fish v4 using [jscodeshift](https://github.com/facebook/jscodeshift).(Inspired by [react-codemod](https://github.com/reactjs/react-codemod))

[![NPM version](https://img.shields.io/npm/v/@ant-design/codemod-v4.svg?style=flat)](https://npmjs.org/package/@ant-design/codemod-v4)
[![NPM downloads](http://img.shields.io/npm/dm/@ant-design/codemod-v4.svg?style=flat)](https://npmjs.org/package/@ant-design/codemod-v4)
[![CircleCI](https://circleci.com/gh/ant-design/codemod-v4.svg?style=svg)](https://circleci.com/gh/ant-design/codemod-v4)

## Usage

Before run codemod scripts, you'd better make sure to commit your local git changes firstly.

```shell
# global installation
npm i -g @gem-mine/fish-codemod-v4
# or for yarn user
#  yarn global add @gem-mine/fish-codemod-v4
fish-codemod src

# use npx
npx -p @gem-mine/fish-compatible fish-codemod src
```

## Codemod scripts introduction

#### `v3-Component-to-compatible`

Replace deprecated `Form` and `Mention` from `@gem-mine/fish-compatible`:

```diff
- import { Form, Input, Button, Mention } from 'fish';
+ import { Form, Mention } from '@gem-mine/fish-compatible';
+ import '@gem-mine/fish-compatible/assets/index.css';
+ import { Input, Button } from 'fish';

  ReactDOM.render( (
    <div>
      <Form>
        {getFieldDecorator('username')(<Input />)}
        <Button>Submit</Button>
      </Form>
      <Mention
        style={{ width: '100%' }}
        onChange={onChange}
        defaultValue={toContentState('@afc163')}
        defaultSuggestions={['afc163', 'benjycui']}
        onSelect={onSelect}
      />
    </div>
  );
```

#### `v3-LocaleProvider-to-v4-ConfigProvider`

Replace v3 LocaleProvider with v4 ConfigProvider component.

```diff
- import { LocaleProvider } from 'fish';
+ import { ConfigProvider } from 'fish';

  ReactDOM.render(
-   <LocaleProvider {...yourConfig}>
+   <ConfigProvider {...yourConfig}>
      <Main />
-   </LocaleProvider>
+   </ConfigProvider>
    mountNode,
  );
```

#### `v3-TimePicker-TimeRangePicker-to-v4-RangePicker`

TimePicker: replace v3 TimeRangePicker with v4 RangePicker component.

```diff
import { TimePicker } from 'fish'

- const { TimeRangePicker } = TimePicker
+ const { RangePicker } = TimePicker

- const Component = () => <TimeRangePicker />
+ const Component = () => <RangePicker />

- const Component1 = () => <TimePicker.TimeRangePicker />
+ const Component1 = () => <TimePicker.RangePicker />
```

#### `v3-Tree-hideCheckbox-to-v4-checkable`

Tree: discard v3 attribute `hideCheckbox`, use v4 attribute `checkable` to replace.

```diff
import { Tree } from 'fish';

const { TreeNode } = Tree;

const Component = () => (
  <Tree checkable>
    <TreeNode title="parent 1" key="0-0">
      <TreeNode title="parent 1-0" key="0-0-0" disabled>
        <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
-       <TreeNode title="leaf" key="0-0-0-1" hideCheckbox />
+       <TreeNode title="leaf" key="0-0-0-1" checkable={false} />
      </TreeNode>
    </TreeNode>
  </Tree>
)
```

## License

MIT