English | 简体中文

Fish Docs v4 Codemod

A collection of codemod scripts that help upgrade fish v4 using jscodeshift.(Inspired by react-codemod)

Usage

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

# 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:

- 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.

- 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.

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.

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