extract ListContent as a component (#2482)

* extract ListContent as a component

* rename ListContent to ArticleListContent

src/components/ArticleListContent/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import moment from 'moment';
+import { Avatar } from 'antd';
+import styles from './index.less';
+
+const ArticleListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => (
+  <div className={styles.listContent}>
+    <div className={styles.description}>{content}</div>
+    <div className={styles.extra}>
+      <Avatar src={avatar} size="small" />
+      <a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a>
+      <em>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
+    </div>
+  </div>
+);
+
+export default ArticleListContent;

src/components/ArticleListContent/index.less

@@ -0,0 +1,38 @@
+@import '~antd/lib/style/themes/default.less';
+
+.listContent {
+  .description {
+    line-height: 22px;
+    max-width: 720px;
+  }
+  .extra {
+    color: @text-color-secondary;
+    margin-top: 16px;
+    line-height: 22px;
+    & > :global(.ant-avatar) {
+      vertical-align: top;
+      margin-right: 8px;
+      width: 20px;
+      height: 20px;
+      position: relative;
+      top: 1px;
+    }
+    & > em {
+      color: @disabled-color;
+      font-style: normal;
+      margin-left: 16px;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xs) {
+  .listContent {
+    .extra {
+      & > em {
+        display: block;
+        margin-left: 0;
+        margin-top: 8px;
+      }
+    }
+  }
+}

src/pages/Account/Center/Articles.js

@@ -1,8 +1,7 @@
 import React, { PureComponent } from 'react';
-import { List, Icon, Avatar, Tag } from 'antd';
-import moment from 'moment';
+import { List, Icon, Tag } from 'antd';
 import { connect } from 'dva';
-import stylesArticles from '../../List/Articles.less';
+import ArticleListContent from '@/components/ArticleListContent';
 import styles from './Articles.less';
 
 @connect(({ list }) => ({
@@ -19,16 +18,6 @@ class Center extends PureComponent {
         {text}
       </span>
     );
-    const ListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => (
-      <div className={stylesArticles.listContent}>
-        <div className={stylesArticles.description}>{content}</div>
-        <div className={stylesArticles.extra}>
-          <Avatar src={avatar} size="small" />
-          <a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a>
-          <em>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
-        </div>
-      </div>
-    );
     return (
       <List
         size="large"
@@ -47,7 +36,7 @@ class Center extends PureComponent {
           >
             <List.Item.Meta
               title={
-                <a className={stylesArticles.listItemMetaTitle} href={item.href}>
+                <a className={styles.listItemMetaTitle} href={item.href}>
                   {item.title}
                 </a>
               }
@@ -59,7 +48,7 @@ class Center extends PureComponent {
                 </span>
               }
             />
-            <ListContent data={item} />
+            <ArticleListContent data={item} />
           </List.Item>
         )}
       />

src/pages/Account/Center/Articles.less

@@ -1,3 +1,5 @@
+@import '~antd/lib/style/themes/default.less';
+
 .articleList {
   :global {
     .ant-list-item:first-child {
@@ -5,3 +7,6 @@
     }
   }
 }
+a.listItemMetaTitle {
+  color: @heading-color;
+}

src/pages/List/Articles.js

@@ -1,10 +1,10 @@
 import React, { Component, Fragment } from 'react';
-import moment from 'moment';
 import { connect } from 'dva';
-import { Form, Card, Select, List, Tag, Icon, Avatar, Row, Col, Button } from 'antd';
+import { Form, Card, Select, List, Tag, Icon, Row, Col, Button } from 'antd';
 
 import TagSelect from '@/components/TagSelect';
 import StandardFormRow from '@/components/StandardFormRow';
+import ArticleListContent from '@/components/ArticleListContent';
 import styles from './Articles.less';
 
 const { Option } = Select;
@@ -96,18 +96,6 @@ class SearchList extends Component {
       </span>
     );
 
-    const ListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => (
-      <div className={styles.listContent}>
-        <div className={styles.description}>{content}</div>
-        <div className={styles.extra}>
-          <Avatar src={avatar} size="small" />
-          <a href={href}>{owner}</a> 发布在
-          <a href={href}>{href}</a>
-          <em>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
-        </div>
-      </div>
-    );
-
     const formItemLayout = {
       wrapperCol: {
         xs: { span: 24 },
@@ -186,10 +174,7 @@ class SearchList extends Component {
                 <Col xl={8} lg={10} md={12} sm={24} xs={24}>
                   <FormItem {...formItemLayout} label="活跃用户">
                     {getFieldDecorator('user', {})(
-                      <Select
-                        placeholder="不限"
-                        style={{ maxWidth: 200, width: '100%' }}
-                      >
+                      <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
                         <Option value="lisa">李三</Option>
                       </Select>
                     )}
@@ -198,10 +183,7 @@ class SearchList extends Component {
                 <Col xl={8} lg={10} md={12} sm={24} xs={24}>
                   <FormItem {...formItemLayout} label="好评度">
                     {getFieldDecorator('rate', {})(
-                      <Select
-                        placeholder="不限"
-                        style={{ maxWidth: 200, width: '100%' }}
-                      >
+                      <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
                         <Option value="good">优秀</Option>
                       </Select>
                     )}
@@ -247,7 +229,7 @@ class SearchList extends Component {
                     </span>
                   }
                 />
-                <ListContent data={item} />
+                <ArticleListContent data={item} />
               </List.Item>
             )}
           />

src/pages/List/Articles.less

@@ -1,30 +1,5 @@
 @import '~antd/lib/style/themes/default.less';
-@import '~@/utils/utils.less';
 
-.listContent {
-  .description {
-    line-height: 22px;
-    max-width: 720px;
-  }
-  .extra {
-    color: @text-color-secondary;
-    margin-top: 16px;
-    line-height: 22px;
-    & > :global(.ant-avatar) {
-      vertical-align: top;
-      margin-right: 8px;
-      width: 20px;
-      height: 20px;
-      position: relative;
-      top: 1px;
-    }
-    & > em {
-      color: @disabled-color;
-      font-style: normal;
-      margin-left: 16px;
-    }
-  }
-}
 a.listItemMetaTitle {
   color: @heading-color;
 }
@@ -41,15 +16,6 @@ a.listItemMetaTitle {
     display: block;
     margin-left: 0;
   }
-  .listContent {
-    .extra {
-      & > em {
-        display: block;
-        margin-left: 0;
-        margin-top: 8px;
-      }
-    }
-  }
 }
 @media screen and (max-width: @screen-md) {
   .selfTrigger {