From bd9e6c57d4985c9ec52464fb03394fb899660cf5 Mon Sep 17 00:00:00 2001
From: ilanus <hasanovtk@gmail.com>
Date: Mon, 29 Oct 2018 17:26:12 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20rm=20direction=20prop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__tests__/__snapshots__/demo.test.js.snap | 270 ++++--------------
 components/comment/demo/direction.md          |  51 ----
 components/comment/demo/editor.md             |  16 +-
 components/comment/index.tsx                  |  45 +--
 4 files changed, 75 insertions(+), 307 deletions(-)
 delete mode 100644 components/comment/demo/direction.md

diff --git a/components/comment/__tests__/__snapshots__/demo.test.js.snap b/components/comment/__tests__/__snapshots__/demo.test.js.snap
index f45ab6baf7..60d95f1dfc 100644
--- a/components/comment/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/comment/__tests__/__snapshots__/demo.test.js.snap
@@ -3,7 +3,7 @@
 exports[`renders ./components/comment/demo/basic.md correctly 1`] = `
 <div>
   <div
-    class="ant-comment ant-comment-rtl"
+    class="ant-comment"
   >
     <div
       class="ant-comment-inner"
@@ -121,243 +121,91 @@ exports[`renders ./components/comment/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/comment/demo/direction.md correctly 1`] = `
-Array [
-  <div>
-    <div
-      class="ant-comment ant-comment-rtl"
-    >
-      <div
-        class="ant-comment-inner"
-      >
-        <div
-          class="ant-comment-avatar"
-        >
-          <span
-            class="ant-avatar ant-avatar-circle ant-avatar-image"
-          >
-            <img
-              alt="Han Solo"
-              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-            />
-          </span>
-        </div>
-        <div
-          class="ant-comment-content"
-        >
-          <div
-            class="ant-comment-content-author"
-          />
-          <div
-            class="ant-comment-content-detail"
-          >
-            <p>
-              Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Pellentesque massa placerat duis ultricies lacus sed turpis. Tempus urna et pharetra pharetra massa massa.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-  <div>
-    <div
-      class="ant-comment ant-comment-ltr"
-    >
-      <div
-        class="ant-comment-inner"
-      >
-        <div
-          class="ant-comment-content"
-        >
-          <div
-            class="ant-comment-content-author"
-          />
-          <div
-            class="ant-comment-content-detail"
-          >
-            <p>
-              Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Pellentesque massa placerat duis ultricies lacus sed turpis. Tempus urna et pharetra pharetra massa massa.
-            </p>
-          </div>
-        </div>
-        <div
-          class="ant-comment-avatar"
-        >
-          <span
-            class="ant-avatar ant-avatar-circle ant-avatar-image"
-          >
-            <img
-              alt="Han Solo"
-              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>,
-]
-`;
-
 exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
-Array [
-  <form
-    class="ant-form ant-form-inline"
+<div>
+  <div
+    class="ant-comment"
   >
     <div
-      class="ant-row ant-form-item"
+      class="ant-comment-inner"
     >
       <div
-        class="ant-form-item-label"
-      >
-        <label
-          class=""
-          title="Editor direction"
-        >
-          Editor direction
-        </label>
-      </div>
-      <div
-        class="ant-form-item-control-wrapper"
+        class="ant-comment-avatar"
       >
-        <div
-          class="ant-form-item-control"
+        <span
+          class="ant-avatar ant-avatar-circle ant-avatar-image"
         >
-          <span
-            class="ant-form-item-children"
-          >
-            <div
-              class="ant-radio-group ant-radio-group-outline ant-radio-group-default"
-            >
-              <label
-                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
-              >
-                <span
-                  class="ant-radio-button ant-radio-button-checked"
-                >
-                  <input
-                    checked=""
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="left"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Left
-                </span>
-              </label>
-              <label
-                class="ant-radio-button-wrapper"
-              >
-                <span
-                  class="ant-radio-button"
-                >
-                  <input
-                    class="ant-radio-button-input"
-                    type="radio"
-                    value="right"
-                  />
-                  <span
-                    class="ant-radio-button-inner"
-                  />
-                </span>
-                <span>
-                  Right
-                </span>
-              </label>
-            </div>
-          </span>
-        </div>
+          <img
+            alt="Han Solo"
+            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+          />
+        </span>
       </div>
-    </div>
-  </form>,
-  <div>
-    <div
-      class="ant-comment ant-comment-rtl"
-    >
       <div
-        class="ant-comment-inner"
+        class="ant-comment-content"
       >
         <div
-          class="ant-comment-avatar"
-        >
-          <span
-            class="ant-avatar ant-avatar-circle ant-avatar-image"
-          >
-            <img
-              alt="Han Solo"
-              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-            />
-          </span>
-        </div>
+          class="ant-comment-content-author"
+        />
         <div
-          class="ant-comment-content"
+          class="ant-comment-content-detail"
         >
-          <div
-            class="ant-comment-content-author"
-          />
-          <div
-            class="ant-comment-content-detail"
+          <form
+            class="ant-form ant-form-horizontal"
           >
-            <form
-              class="ant-form ant-form-horizontal"
+            <div
+              class="ant-row ant-form-item"
             >
               <div
-                class="ant-row ant-form-item"
+                class="ant-form-item-control-wrapper"
               >
                 <div
-                  class="ant-form-item-control-wrapper"
+                  class="ant-form-item-control"
                 >
-                  <div
-                    class="ant-form-item-control"
+                  <span
+                    class="ant-form-item-children"
                   >
-                    <span
-                      class="ant-form-item-children"
-                    >
-                      <textarea
-                        class="ant-input"
-                        data-__field="[object Object]"
-                        data-__meta="[object Object]"
-                        id="message"
-                        rows="4"
-                      />
-                    </span>
-                  </div>
+                    <textarea
+                      class="ant-input"
+                      data-__field="[object Object]"
+                      data-__meta="[object Object]"
+                      id="message"
+                      rows="4"
+                    />
+                  </span>
                 </div>
               </div>
+            </div>
+            <div
+              class="ant-row ant-form-item"
+            >
               <div
-                class="ant-row ant-form-item"
+                class="ant-form-item-control-wrapper"
               >
                 <div
-                  class="ant-form-item-control-wrapper"
+                  class="ant-form-item-control"
                 >
-                  <div
-                    class="ant-form-item-control"
+                  <span
+                    class="ant-form-item-children"
                   >
-                    <span
-                      class="ant-form-item-children"
+                    <button
+                      class="ant-btn ant-btn-primary"
+                      type="submit"
                     >
-                      <button
-                        class="ant-btn ant-btn-primary"
-                        type="submit"
-                      >
-                        <span>
-                          Add Comment
-                        </span>
-                      </button>
-                    </span>
-                  </div>
+                      <span>
+                        Add Comment
+                      </span>
+                    </button>
+                  </span>
                 </div>
               </div>
-            </form>
-          </div>
+            </div>
+          </form>
         </div>
       </div>
     </div>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/comment/demo/list.md correctly 1`] = `
@@ -377,7 +225,7 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
     >
       <div>
         <div
-          class="ant-comment ant-comment-rtl"
+          class="ant-comment"
         >
           <div
             class="ant-comment-inner"
@@ -432,7 +280,7 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
       </div>
       <div>
         <div
-          class="ant-comment ant-comment-rtl"
+          class="ant-comment"
         >
           <div
             class="ant-comment-inner"
@@ -493,7 +341,7 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
 exports[`renders ./components/comment/demo/nested.md correctly 1`] = `
 <div>
   <div
-    class="ant-comment ant-comment-rtl"
+    class="ant-comment"
   >
     <div
       class="ant-comment-inner"
@@ -550,7 +398,7 @@ exports[`renders ./components/comment/demo/nested.md correctly 1`] = `
   >
     <div>
       <div
-        class="ant-comment ant-comment-rtl"
+        class="ant-comment"
       >
         <div
           class="ant-comment-inner"
@@ -607,7 +455,7 @@ exports[`renders ./components/comment/demo/nested.md correctly 1`] = `
       >
         <div>
           <div
-            class="ant-comment ant-comment-rtl"
+            class="ant-comment"
           >
             <div
               class="ant-comment-inner"
@@ -666,7 +514,7 @@ exports[`renders ./components/comment/demo/nested.md correctly 1`] = `
       >
         <div>
           <div
-            class="ant-comment ant-comment-rtl"
+            class="ant-comment"
           >
             <div
               class="ant-comment-inner"
diff --git a/components/comment/demo/direction.md b/components/comment/demo/direction.md
deleted file mode 100644
index 6b9d929bb8..0000000000
--- a/components/comment/demo/direction.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-order: 4
-title:
-  zh-CN: 基本评论
-  en-US: Custom direction comment
----
-
-## zh-CN
-
-一个基本的评论组件，带有作者、头像、时间和操作。
-
-## en-US
-
-A basic comment with author, avatar, time and actions.
-
-````jsx
-import { Comment, Icon, Tooltip, Avatar } from 'antd';
-import moment from 'moment';
-
-function ExampleComment({ direction = 'left' }) {
-  return (
-    <Comment
-      direction={direction}
-      avatar={
-        <Tooltip title="Han Solo">
-          <Avatar
-            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-            alt="Han Solo"
-          />
-        </Tooltip>
-      }
-      content={
-        <p>Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Pellentesque massa placerat duis ultricies lacus sed turpis. Tempus urna et pharetra pharetra massa massa.</p>
-      }
-    />
-  )
-}
-
-class App extends React.Component {
-  render() {
-    return (
-      <React.Fragment>
-        <ExampleComment />
-        <ExampleComment direction="right" />
-      </React.Fragment>
-    );
-  }
-}
-
-ReactDOM.render(<App />, mountNode);
-````
diff --git a/components/comment/demo/editor.md b/components/comment/demo/editor.md
index 40a36733e6..773f4f8ce7 100644
--- a/components/comment/demo/editor.md
+++ b/components/comment/demo/editor.md
@@ -14,7 +14,7 @@ title:
 Comment can be used as editor, user can customize the editor component.
 
 ````jsx
-import { Comment, Icon, Tooltip, Avatar, Form, Button, List, Input, Radio } from 'antd';
+import { Comment, Icon, Tooltip, Avatar, Form, Button, List, Input } from 'antd';
 import moment from 'moment';
 
 const FormItem = Form.Item;
@@ -81,7 +81,6 @@ class App extends React.Component {
   state = {
     comments: [],
     submitting: false,
-    direction: 'left',
   }
 
   handleSubmit = (values, cb) => {
@@ -106,10 +105,6 @@ class App extends React.Component {
     }, 1000);
   }
 
-  handleChange = (e) => {
-    this.setState({ direction: e.target.value });
-  }
-
   render() {
     return (
       <React.Fragment>
@@ -118,16 +113,7 @@ class App extends React.Component {
             comments={this.state.comments}
           />
         )}
-        <Form layout="inline">
-          <FormItem label="Editor direction">
-            <Radio.Group size="default" value={this.state.direction} onChange={this.handleChange}>
-              <Radio.Button value="left">Left</Radio.Button>
-              <Radio.Button value="right">Right</Radio.Button>
-            </Radio.Group>
-          </FormItem>
-        </Form>
         <Comment
-          direction={this.state.direction}
           avatar={
             <Avatar
               src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
diff --git a/components/comment/index.tsx b/components/comment/index.tsx
index acab8622c4..36b18a927c 100644
--- a/components/comment/index.tsx
+++ b/components/comment/index.tsx
@@ -22,8 +22,6 @@ export interface CommentProps {
   style?: React.CSSProperties;
   /** A datetime element containing the time to be displayed */
   datetime?: React.ReactNode;
-  /** Direction of the comment left or right */
-  direction?: 'left' | 'right';
 }
 
 export default class Comment extends React.Component<CommentProps, {}> {
@@ -59,36 +57,16 @@ export default class Comment extends React.Component<CommentProps, {}> {
       children,
       className,
       content,
-      direction = 'left',
       prefixCls = 'ant-comment',
       style = {},
       datetime,
       ...otherProps
     } = this.props;
 
-    const classString = classNames(prefixCls, className, {
-      [`${prefixCls}-rtl`]: direction === 'left',
-      [`${prefixCls}-ltr`]: direction === 'right',
-    });
-
-    const authorElements = [];
-
-    if (author) {
-      authorElements.push(
-        <span key="name" className={`${prefixCls}-content-author-name`}>
-          {author}
-        </span>,
-      );
-    }
-
-    if (datetime) {
-      authorElements.push(
-        <span key="time" className={`${prefixCls}-content-author-time`}>{datetime}</span>,
-      );
-    }
+    const classString = classNames(prefixCls, className);
 
     const avatarDom = (
-      <div key="avatar" className={`${prefixCls}-avatar`}>
+      <div className={`${prefixCls}-avatar`}>
         {typeof avatar === 'string' ? <img src={avatar} /> : avatar}
       </div>
     );
@@ -99,12 +77,21 @@ export default class Comment extends React.Component<CommentProps, {}> {
 
     const authorContent = (
       <div className={`${prefixCls}-content-author`}>
-        {direction === 'left' ? authorElements : authorElements.reverse()}
+        {author && (
+          <span className={`${prefixCls}-content-author-name`}>
+            {author}
+          </span>
+        )}
+        {datetime && (
+          <span className={`${prefixCls}-content-author-time`}>
+            {datetime}
+          </span>
+        )}
       </div>
     );
 
     const contentDom = (
-      <div key="content" className={`${prefixCls}-content`}>
+      <div className={`${prefixCls}-content`}>
         {authorContent}
         <div className={`${prefixCls}-content-detail`}>
           {content}
@@ -116,10 +103,8 @@ export default class Comment extends React.Component<CommentProps, {}> {
     const comment = (
       <div {...otherProps} className={classString} style={style}>
         <div className={`${prefixCls}-inner`}>
-          {direction === 'left'
-            ? [avatarDom, contentDom]
-            : [contentDom, avatarDom]
-          }
+          {avatarDom}
+          {contentDom}
         </div>
       </div>
     )