🔥 rm direction prop

6 years ago · bd9e6c57d4
parent 06b3d29d12
commit bd9e6c57d4
4 changed files with 75 additions and 307 deletions
--- 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"
--- a/components/comment/demo/direction.md
+++ b/components/comment/demo/direction.md
@ -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);
-````
--- 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"
--- 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>
    )