support icon string prop component (#6)

* feat: implements for Button

* feat: support avatar and result

* feat: support Modal.method()

package.json

@@ -30,7 +30,8 @@
     "@ant-design/compatible": "^0.0.1-alpha.5",
     "@ant-design/icons": "^4.0.0-alpha.11",
     "commander": "^4.0.1",
-    "jscodeshift": "^0.6.4"
+    "jscodeshift": "^0.6.4",
+    "rc-util": "^4.15.7"
   },
   "devDependencies": {
     "@umijs/fabric": "^1.1.10",

transforms/__testfixtures__/v3-Icon-to-v4-Icon/basic.input.js

@@ -38,3 +38,7 @@ const ChildIcon = props => (
     <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
   </Icon>
 )
+
+const Input = () => {
+  return <Input suffix={<Icon type="smile" />} />;
+}

transforms/__testfixtures__/v3-Icon-to-v4-Icon/basic.output.js

@@ -1,5 +1,5 @@
 import { Icon as LegacyIcon } from '@ant-design/compatible';
-import Icon, { CodeFilled, CodeOutlined, SmileTwoTone } from '@ant-design/icons';
+import Icon, { CodeFilled, CodeOutlined, SmileOutlined, SmileTwoTone } from '@ant-design/icons';
 
 const Component = () => {
   return <CodeFilled />;
@@ -39,3 +39,7 @@ const ChildIcon = props => (
     <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
   </Icon>
 )
+
+const Input = () => {
+  return <Input suffix={<SmileOutlined />} />;
+}

transforms/__testfixtures__/v3-Icon-to-v4-Icon/misc.input.js

@@ -0,0 +1,22 @@
+import { Icon, Result, Timeline } from 'antd';
+
+ReactDOM.render(
+  <Result
+    icon={<Icon type="smile" theme="twoTone" />}
+    title="Great, we have done all the operations!"
+    extra={<Button type="primary">Next</Button>}
+  />,
+  mountNode,
+);
+
+ReactDOM.render(
+  <Timeline>
+    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
+    <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
+    <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />} color="red">
+      Technical testing 2015-09-01
+    </Timeline.Item>
+    <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
+  </Timeline>,
+  mountNode,
+);

transforms/__testfixtures__/v3-Icon-to-v4-Icon/misc.output.js

@@ -0,0 +1,23 @@
+import { ClockCircleOutlined, SmileTwoTone } from '@ant-design/icons';
+import { Icon, Result, Timeline } from 'antd';
+
+ReactDOM.render(
+  <Result
+    icon={<SmileTwoTone />}
+    title="Great, we have done all the operations!"
+    extra={<Button type="primary">Next</Button>}
+  />,
+  mountNode,
+);
+
+ReactDOM.render(
+  <Timeline>
+    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
+    <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
+    <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color="red">
+      Technical testing 2015-09-01
+    </Timeline.Item>
+    <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
+  </Timeline>,
+  mountNode,
+);

transforms/__testfixtures__/v3-Modal-method-with-icon-to-v4/basic.input.js

@@ -0,0 +1,52 @@
+import { Modal } from 'antd';
+
+function showConfirm() {
+  Modal.confirm({
+    icon: 'ant-design',
+    title: 'Do you Want to delete these items?',
+    content: 'Some descriptions',
+    onOk() {
+      console.log('OK');
+    },
+    onCancel() {
+      console.log('Cancel');
+    },
+  });
+}
+
+function info() {
+  Modal.info({
+    title: 'This is a notification message',
+    icon: 'ant-design',
+    content: (
+      <div>
+        <p>some messages...some messages...</p>
+        <p>some messages...some messages...</p>
+      </div>
+    ),
+    onOk() {},
+  });
+}
+
+function success() {
+  Modal.success({
+    icon: 'plus',
+    content: 'some messages...some messages...',
+  });
+}
+
+function error() {
+  Modal.error({
+    title: 'This is an error message',
+    icon: 'minus',
+    content: 'some messages...some messages...',
+  });
+}
+
+function warning() {
+  Modal.warning({
+    title: 'This is a warning message',
+    icon: 'question',
+    content: 'some messages...some messages...',
+  });
+}

transforms/__testfixtures__/v3-Modal-method-with-icon-to-v4/basic.output.js

@@ -0,0 +1,53 @@
+import { AntDesignOutlined, MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
+import { Modal } from 'antd';
+
+function showConfirm() {
+  Modal.confirm({
+    icon: <AntDesignOutlined />,
+    title: 'Do you Want to delete these items?',
+    content: 'Some descriptions',
+    onOk() {
+      console.log('OK');
+    },
+    onCancel() {
+      console.log('Cancel');
+    },
+  });
+}
+
+function info() {
+  Modal.info({
+    title: 'This is a notification message',
+    icon: <AntDesignOutlined />,
+    content: (
+      <div>
+        <p>some messages...some messages...</p>
+        <p>some messages...some messages...</p>
+      </div>
+    ),
+    onOk() {},
+  });
+}
+
+function success() {
+  Modal.success({
+    icon: <PlusOutlined />,
+    content: 'some messages...some messages...',
+  });
+}
+
+function error() {
+  Modal.error({
+    title: 'This is an error message',
+    icon: <MinusOutlined />,
+    content: 'some messages...some messages...',
+  });
+}
+
+function warning() {
+  Modal.warning({
+    title: 'This is a warning message',
+    icon: <QuestionOutlined />,
+    content: 'some messages...some messages...',
+  });
+}

transforms/__testfixtures__/v3-component-with-string-icon-props-to-v4/avatar.input.js

@@ -0,0 +1,23 @@
+import { UserFilled } from '@ant-design/icons';
+import { Avatar, Badge } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <span style={{ marginRight: 24 }}>
+      <Badge count={1}>
+        <Avatar shape="square" icon="user" />
+      </Badge>
+    </span>
+    <span>
+      <Badge dot>
+        <Avatar shape="square" icon="user" />
+      </Badge>
+    </span>
+    <span>
+      <Badge dot>
+        <Avatar shape="square" icon={<UserFilled />} />
+      </Badge>
+    </span>
+  </div>,
+  mountNode,
+);

transforms/__testfixtures__/v3-component-with-string-icon-props-to-v4/avatar.output.js

@@ -0,0 +1,23 @@
+import { UserFilled, UserOutlined } from '@ant-design/icons';
+import { Avatar, Badge } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <span style={{ marginRight: 24 }}>
+      <Badge count={1}>
+        <Avatar shape="square" icon={<UserOutlined />} />
+      </Badge>
+    </span>
+    <span>
+      <Badge dot>
+        <Avatar shape="square" icon={<UserOutlined />} />
+      </Badge>
+    </span>
+    <span>
+      <Badge dot>
+        <Avatar shape="square" icon={<UserFilled />} />
+      </Badge>
+    </span>
+  </div>,
+  mountNode,
+);

transforms/__testfixtures__/v3-component-with-string-icon-props-to-v4/button.input.js

@@ -0,0 +1,23 @@
+import { Button } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <Button type="primary" shape="circle" icon="search" />
+    <Button type="primary" shape="circle">
+      A
+    </Button>
+    <Button type="primary" icon="search">
+      Search
+    </Button>
+    <Button shape="circle" icon="search" />
+    <Button icon="search">Search</Button>
+    <br />
+    <Button shape="circle" icon="search" />
+    <Button icon="search">Search</Button>
+    <Button type="dashed" shape="circle" icon="search" />
+    <Button type="dashed" icon="search">
+      Search
+    </Button>
+  </div>,
+  mountNode,
+);

transforms/__testfixtures__/v3-component-with-string-icon-props-to-v4/button.output.js

@@ -0,0 +1,24 @@
+import { SearchOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <Button type="primary" shape="circle" icon={<SearchOutlined />} />
+    <Button type="primary" shape="circle">
+      A
+    </Button>
+    <Button type="primary" icon={<SearchOutlined />}>
+      Search
+    </Button>
+    <Button shape="circle" icon={<SearchOutlined />} />
+    <Button icon={<SearchOutlined />}>Search</Button>
+    <br />
+    <Button shape="circle" icon={<SearchOutlined />} />
+    <Button icon={<SearchOutlined />}>Search</Button>
+    <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
+    <Button type="dashed" icon={<SearchOutlined />}>
+      Search
+    </Button>
+  </div>,
+  mountNode,
+);

transforms/__testfixtures__/v3-component-with-string-icon-props-to-v4/result.input.js

@@ -0,0 +1,10 @@
+import { Result, Button } from 'antd';
+
+ReactDOM.render(
+  <Result
+    icon="question"
+    title="Great, we have done all the operations!"
+    extra={<Button type="primary">Next</Button>}
+  />,
+  mountNode,
+);

transforms/__testfixtures__/v3-component-with-string-icon-props-to-v4/result.output.js

@@ -0,0 +1,11 @@
+import { QuestionOutlined } from '@ant-design/icons';
+import { Result, Button } from 'antd';
+
+ReactDOM.render(
+  <Result
+    icon={<QuestionOutlined />}
+    title="Great, we have done all the operations!"
+    extra={<Button type="primary">Next</Button>}
+  />,
+  mountNode,
+);

transforms/__tests__/v3-Modal-method-with-icon-to-v4.test.js

@@ -0,0 +1,11 @@
+const tests = ['basic'];
+
+const defineTest = require('jscodeshift/dist/testUtils').defineTest;
+
+const testUnit = 'v3-Modal-method-with-icon-to-v4';
+
+describe(testUnit, () => {
+  tests.forEach(test =>
+    defineTest(__dirname, testUnit, null, `${testUnit}/${test}`),
+  );
+});

transforms/__tests__/v3-component-with-string-icon-props-to-v4.test.js

@@ -0,0 +1,11 @@
+const tests = ['avatar', 'button', 'result'];
+
+const defineTest = require('jscodeshift/dist/testUtils').defineTest;
+
+const testUnit = 'v3-component-with-string-icon-props-to-v4';
+
+describe(testUnit, () => {
+  tests.forEach(test =>
+    defineTest(__dirname, testUnit, null, `${testUnit}/${test}`),
+  );
+});

transforms/utils/icon.js

@@ -0,0 +1,34 @@
+const {
+  withThemeSuffix,
+  removeTypeTheme,
+  alias,
+} = require('@ant-design/compatible/lib/icon/utils');
+const allIcons = require('@ant-design/icons/lib/icons');
+
+function getV4IconComponentName(type, theme) {
+  const v4IconComponentName = withThemeSuffix(
+    removeTypeTheme(alias(type)),
+    theme || 'outlined',
+  );
+
+  // check if component is valid or not in v4 icons
+  if (allIcons[v4IconComponentName]) {
+    return v4IconComponentName;
+  }
+
+  console.warn(`The icon with type: ${type} and theme ${theme} cannot found`);
+}
+
+function createIconJSXElement(j, iconLocalName) {
+  const openingElement = j.jsxOpeningElement(
+    j.jsxIdentifier(iconLocalName),
+    [],
+  );
+  openingElement.selfClosing = true;
+  return j.jsxElement(openingElement);
+}
+
+module.exports = {
+  getV4IconComponentName,
+  createIconJSXElement,
+};