From e541a2492cfb262926c7435ce66bcf0308ba281c Mon Sep 17 00:00:00 2001
From: zombieJ <smith3816@gmail.com>
Date: Wed, 24 Apr 2019 12:21:02 +0800
Subject: [PATCH] fix: List with actions style should be the right (#16239)

* update css

* should not affect vertical style

* update logic
---
 components/_util/reactNode.ts    |  7 +++++++
 components/list/Item.tsx         |  7 ++-----
 components/list/style/index.less | 18 ++++++++++++++----
 3 files changed, 23 insertions(+), 9 deletions(-)
 create mode 100644 components/_util/reactNode.ts

diff --git a/components/_util/reactNode.ts b/components/_util/reactNode.ts
new file mode 100644
index 0000000000..200a81da98
--- /dev/null
+++ b/components/_util/reactNode.ts
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export function cloneElement(element: React.ReactNode, ...restArgs: any[]) {
+  if (!React.isValidElement(element)) return element;
+
+  return React.cloneElement(element, ...restArgs);
+}
\ No newline at end of file
diff --git a/components/list/Item.tsx b/components/list/Item.tsx
index 5762d61a15..2aadb98358 100644
--- a/components/list/Item.tsx
+++ b/components/list/Item.tsx
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { ListGridType, ColumnType } from './index';
 import { Col } from '../grid';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { cloneElement } from '../_util/reactNode';
 
 export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string;
@@ -129,11 +130,7 @@ export default class Item extends React.Component<ListItemProps, any> {
                 {extra}
               </div>,
             ]
-          : [
-              children,
-              actionsContent,
-              extra ? React.cloneElement(extra as React.ReactElement<any>, { key: 'extra' }) : null,
-            ]}
+          : [children, actionsContent, cloneElement(extra, { key: 'extra' })]}
       </div>
     );
 
diff --git a/components/list/style/index.less b/components/list/style/index.less
index f68081f6b2..038ce5d8fb 100644
--- a/components/list/style/index.less
+++ b/components/list/style/index.less
@@ -43,10 +43,6 @@
     align-items: center;
     padding: @list-item-padding;
 
-    &-no-flex {
-      display: block;
-    }
-
     &-content {
       color: @text-color;
     }
@@ -206,6 +202,20 @@
     padding-bottom: 0;
     border-bottom: none;
   }
+
+  // ============================ without flex ============================
+  &-item-no-flex {
+    display: block;
+  }
+
+  // Horizontal
+  &:not(.@{list-prefix-cls}-vertical) {
+    .@{list-prefix-cls}-item-no-flex {
+      .@{list-prefix-cls}-item-action {
+        float: right;
+      }
+    }
+  }
 }
 
 @import './bordered';