From c6903c9cc9ee3e887c18b0eafee6ae020b0563fb Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Fri, 5 Apr 2019 21:17:29 +0800
Subject: [PATCH] use ul in list

---
 components/list/Item.tsx         |   7 +-
 components/list/index.tsx        |   6 +-
 components/list/style/index.less | 130 ++++++++++++++++---------------
 3 files changed, 77 insertions(+), 66 deletions(-)

diff --git a/components/list/Item.tsx b/components/list/Item.tsx
index 5762d61a15..d4bb35e967 100644
--- a/components/list/Item.tsx
+++ b/components/list/Item.tsx
@@ -112,9 +112,10 @@ export default class Item extends React.Component<ListItemProps, any> {
         ))}
       </ul>
     );
+    const Tag = grid ? 'div' : 'li';
     const itemChildren = (
-      <div
-        {...others}
+      <Tag
+        {...others as any} // `li` element don't have `onCopy` prop. Cast to any.
         className={classNames(`${prefixCls}-item`, className, {
           [`${prefixCls}-item-no-flex`]: !this.isFlexMode(),
         })}
@@ -134,7 +135,7 @@ export default class Item extends React.Component<ListItemProps, any> {
               actionsContent,
               extra ? React.cloneElement(extra as React.ReactElement<any>, { key: 'extra' }) : null,
             ]}
-      </div>
+      </Tag>
     );
 
     return grid ? (
diff --git a/components/list/index.tsx b/components/list/index.tsx
index c9213ad00f..500afd00d0 100644
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@@ -233,7 +233,11 @@ export default class List<T> extends React.Component<ListProps<T>> {
         );
       });
 
-      childrenContent = grid ? <Row gutter={grid.gutter}>{childrenList}</Row> : childrenList;
+      childrenContent = grid ? (
+        <Row gutter={grid.gutter}>{childrenList}</Row>
+      ) : (
+        <ul className={`${prefixCls}-items`}>{childrenList}</ul>
+      );
     } else if (!children && !isLoading) {
       childrenContent = this.renderEmpty(prefixCls, renderEmpty);
     }
diff --git a/components/list/style/index.less b/components/list/style/index.less
index e48eac4f64..2aada04ab6 100644
--- a/components/list/style/index.less
+++ b/components/list/style/index.less
@@ -37,76 +37,82 @@
     text-align: center;
   }
 
-  &-item {
-    display: flex;
-    align-items: center;
-    padding: @list-item-padding;
+  &-items {
+    margin: 0;
+    padding: 0;
+    list-style: none;
 
-    &-no-flex {
-      display: block;
-    }
-
-    &-content {
-      color: @text-color;
-    }
-
-    &-meta {
+    .@{list-prefix-cls}-item {
       display: flex;
-      flex: 1;
-      align-items: flex-start;
-      font-size: 0;
-      &-avatar {
-        margin-right: @list-item-meta-avatar-margin-right;
+      align-items: center;
+      padding: @list-item-padding;
+
+      &-no-flex {
+        display: block;
       }
+
       &-content {
-        flex: 1 0;
-      }
-      &-title {
-        margin-bottom: 4px;
         color: @text-color;
-        font-size: @font-size-base;
-        line-height: 22px;
-        > a {
+      }
+
+      &-meta {
+        display: flex;
+        flex: 1;
+        align-items: flex-start;
+        font-size: 0;
+        &-avatar {
+          margin-right: @list-item-meta-avatar-margin-right;
+        }
+        &-content {
+          flex: 1 0;
+        }
+        &-title {
+          margin-bottom: 4px;
           color: @text-color;
-          transition: all 0.3s;
-          &:hover {
-            color: @primary-color;
+          font-size: @font-size-base;
+          line-height: 22px;
+          > a {
+            color: @text-color;
+            transition: all 0.3s;
+            &:hover {
+              color: @primary-color;
+            }
           }
         }
+        &-description {
+          color: @text-color-secondary;
+          font-size: @font-size-base;
+          line-height: 22px;
+        }
       }
-      &-description {
-        color: @text-color-secondary;
-        font-size: @font-size-base;
-        line-height: 22px;
-      }
-    }
-    &-action {
-      flex: 0 0 auto;
-      margin-left: 48px;
-      padding: 0;
-      font-size: 0;
-      list-style: none;
-      & > li {
-        position: relative;
-        display: inline-block;
-        padding: 0 8px;
-        color: @text-color-secondary;
-        font-size: @font-size-base;
-        line-height: 22px;
-        text-align: center;
-        cursor: pointer;
-      }
-      & > li:first-child {
-        padding-left: 0;
-      }
-      &-split {
-        position: absolute;
-        top: 50%;
-        right: 0;
-        width: 1px;
-        height: 14px;
-        margin-top: -7px;
-        background-color: @border-color-split;
+      &-action {
+        flex: 0 0 auto;
+        margin-left: 48px;
+        padding: 0;
+        font-size: 0;
+        list-style: none;
+        & > li {
+          position: relative;
+          display: inline-block;
+          padding: 0 8px;
+          color: @text-color-secondary;
+          font-size: @font-size-base;
+          line-height: 22px;
+          text-align: center;
+          cursor: pointer;
+        }
+        & > li:first-child {
+          padding-left: 0;
+        }
+        &-split {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          width: 1px;
+          height: 14px;
+          margin-top: -7px;
+          background-color: @border-color-split;
+        }
       }
     }
   }
@@ -147,7 +153,7 @@
     min-height: 32px;
   }
 
-  &-something-after-last-item .@{ant-prefix}-spin-container > &-item:last-child {
+  &-something-after-last-item .@{ant-prefix}-spin-container > &-items > &-item:last-child {
     border-bottom: 1px solid @border-color-split;
   }