✅ fix eslint problems

.eslintrc.js

@@ -70,6 +70,7 @@ const eslintrc = {
     'import/no-cycle': 0,
     'react/no-find-dom-node': 0,
     'no-underscore-dangle': 0,
+    'react/sort-comp': 0,
     // label-has-for has been deprecated
     // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md
     'jsx-a11y/label-has-for': 0,

components/button/__tests__/index.test.js

@@ -206,6 +206,7 @@ describe('Button', () => {
   it('should merge text if children using variable', () => {
     const wrapper = mount(
       <Button>
+        {/* eslint-disable-next-line react/jsx-curly-brace-presence */}
         This {'is'} a test {1}
       </Button>,
     );

components/collapse/demo/extra.md

@@ -68,7 +68,7 @@ class Demo extends React.Component {
           </Panel>
         </Collapse>
         <br />
-        Expand Icon Position:{' '}
+        <span>Expand Icon Position: </span>
         <Select value={expandIconPosition} onChange={this.onPositionChange}>
           <Option value="left">left</Option>
           <Option value="right">right</Option>

components/drawer/demo/user-profile.md

@@ -104,7 +104,7 @@ class App extends React.Component {
           <p style={pStyle}>Personal</p>
           <Row>
             <Col span={12}>
-              <DescriptionItem title="Full Name" content="Lily" />{' '}
+              <DescriptionItem title="Full Name" content="Lily" />
             </Col>
             <Col span={12}>
               <DescriptionItem title="Account" content="AntDesign@example.com" />

components/form/__tests__/message.test.js

@@ -39,6 +39,7 @@ describe('Form', () => {
         pattern: /^$/,
         message: (
           <span>
+            {/* eslint-disable-next-line react/jsx-curly-brace-presence */}
             Account does not exist,{' '}
             <a rel="noopener noreferrer" href="https://www.alipay.com/" target="_blank">
               Forgot account?

components/result/demo/error.md

@@ -42,7 +42,7 @@ ReactDOM.render(
         </Text>
       </Paragraph>
       <Paragraph>
-        <Icon style={{ color: 'red' }} type="close-circle" /> Your account has been frozen{' '}
+        <Icon style={{ color: 'red' }} type="close-circle" /> Your account has been frozen 
         <a>Thaw immediately &gt;</a>
       </Paragraph>
       <Paragraph>

components/select/demo/option-label-prop.md

@@ -33,25 +33,25 @@ ReactDOM.render(
   >
     <Option value="china" label="China">
       <span role="img" aria-label="China">
-        🇨🇳{' '}
+        🇨🇳
       </span>
       China (中国)
     </Option>
     <Option value="usa" label="USA">
       <span role="img" aria-label="USA">
-        🇺🇸{' '}
+        🇺🇸
       </span>
       USA (美国)
     </Option>
     <Option value="japan" label="Japan">
       <span role="img" aria-label="Japan">
-        🇯🇵{' '}
+        🇯🇵
       </span>
       Japan (日本)
     </Option>
     <Option value="korea" label="Korea">
       <span role="img" aria-label="Korea">
-        🇰🇷{' '}
+        🇰🇷
       </span>
       Korea (韩国)
     </Option>
@@ -59,3 +59,9 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+````css
+span[role="img"] {
+  margin-right: 6px;
+}
+````

components/table/Table.tsx

@@ -176,6 +176,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     });
   }
 
+  // eslint-disable-next-line react/no-deprecated
   componentWillReceiveProps(nextProps: TableProps<T>) {
     this.columns = nextProps.columns || normalizeColumns(nextProps.children as React.ReactChildren);
     if ('pagination' in nextProps || 'pagination' in this.props) {

components/typography/demo/basic.md

@@ -28,7 +28,7 @@ ReactDOM.render(
     </Paragraph>
     <Paragraph>
       After massive project practice and summaries, Ant Design, a design language for background
-      applications, is refined by Ant UED Team, which aims to{' '}
+      applications, is refined by Ant UED Team, which aims to 
       <Text strong>
         uniform the user interface specs for internal background projects, lower the unnecessary
         cost of design differences and implementation and liberate the resources of design and
@@ -71,7 +71,7 @@ ReactDOM.render(
     </Paragraph>
     <Title level={2}>设计资源</Title>
     <Paragraph>
-      我们提供完善的设计原则、最佳实践和设计资源文件（<Text code>Sketch</Text> 和{' '}
+      我们提供完善的设计原则、最佳实践和设计资源文件（<Text code>Sketch</Text> 和
       <Text code>Axure</Text>），来帮助业务快速设计出高质量的产品原型。
     </Paragraph>
 

components/typography/demo/ellipsis-debug.md

@@ -45,26 +45,18 @@ class Demo extends React.Component {
         <Switch onChange={val => this.setState({ editable: val })} />
         <Switch onChange={val => this.setState({ expandable: val })} />
         <Slider value={rows} min={1} max={10} onChange={this.onChange} />
-
         {longText ? (
           <Paragraph ellipsis={{ rows, expandable }} copyable={copyable} editable={editable}>
             Ant Design, a design language for background applications, is refined by Ant UED Team.
-            This is a nest sample{' '}
-            <Text code strong delete>
-              Test
-            </Text>{' '}
-            case.
-            {
-              'Bnt Design, a design language for background applications, is refined by Ant UED Team.'
-            }
+            This is a nest sample <Text code strong delete>Test</Text> case.
+            Bnt Design, a design language for background applications, is refined by Ant UED Team.
             Cnt Design, a design language for background applications, is refined by Ant UED Team.
             Dnt Design, a design language for background applications, is refined by Ant UED Team.
             Ent Design, a design language for background applications, is refined by Ant UED Team.
           </Paragraph>
         ) : (
           <Paragraph ellipsis={{ rows, expandable }} copyable={copyable} editable={editable}>
-            {'Hello'}
-            {'World'}
+            Hello World
           </Paragraph>
         )}
       </div>

components/typography/demo/paragraph-debug.md

@@ -29,7 +29,7 @@ ReactDOM.render(
     </Paragraph>
     <Paragraph>
       After massive project practice and summaries, Ant Design, a design language for background
-      applications, is refined by Ant UED Team, which aims to{' '}
+      applications, is refined by Ant UED Team, which aims to 
       <Text strong>
         uniform the user interface specs for internal background projects, lower the unnecessary
         cost of design differences and implementation and liberate the resources of design and
@@ -70,7 +70,7 @@ ReactDOM.render(
     </Paragraph>
     <Title level={2}>设计资源</Title>
     <Paragraph>
-      我们提供完善的设计原则、最佳实践和设计资源文件（<Text code>Sketch</Text> 和{' '}
+      我们提供完善的设计原则、最佳实践和设计资源文件（<Text code>Sketch</Text> 和
       <Text code>Axure</Text>），来帮助业务快速设计出高质量的产品原型。
     </Paragraph>
 

site/theme/template/Layout/Footer.jsx

@@ -401,7 +401,9 @@ class Footer extends React.Component {
         columns={this.getColumns()}
         bottom={
           <>
-            Made with <span style={{ color: '#fff' }}>❤</span> by{' '}
+            Made with <span style={{ color: '#fff' }}>❤</span> by
+            {/* eslint-disable-next-line react/jsx-curly-brace-presence */}
+            {' '}
             <a target="_blank" rel="noopener noreferrer" href="https://xtech.antfin.com">
               <FormattedMessage id="app.footer.company" />
             </a>