wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-03 18:24:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Indent comment only

Browse Source
This commit is contained in:
Chi Vinh Le
2018-09-04 16:02:27 +02:00
parent c96112fc8c
commit ee30003390
16 changed files with 241 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/components/Comment/IndentedComment.tsx
+21
View File
@@ -0,0 +1,21 @@
import React, { StatelessComponent } from "react";
import { PropTypesOf } from "talk-framework/types";
import Indent from "../Indent";
import Comment from "./Comment";
export interface IndentedCommentProps extends PropTypesOf<typeof Comment> {
indentLevel?: number;
}
const IndentedComment: StatelessComponent<IndentedCommentProps> = props => {
const { indentLevel, ...rest } = props;
const CommentElement = <Comment {...rest} />;
const CommentwithIndent =
(indentLevel && <Indent level={indentLevel}>{CommentElement}</Indent>) ||
CommentElement;
return CommentwithIndent;
};
export default IndentedComment;
src/core/client/stream/components/Comment/index.ts
+1 -1
View File
@@ -1 +1 @@
export { default, default as Comment, CommentProps } from "./Comment";
export { default, default as IndentedComment } from "./IndentedComment";
src/core/client/stream/components/Indent.css
+7 -4
View File
@@ -1,8 +1,11 @@
.root {
border-left: 3px solid;
padding-left: var(--spacing-unit);
}
.level0 {
border-color: var(--palette-grey-darkest);
.level1 {
padding-left: var(--spacing-unit);
border-left: 3px solid var(--palette-grey-darkest);
}
.noBorder {
border: 0;
}
src/core/client/stream/components/Indent.spec.tsx
+20 -1
View File
@@ -5,10 +5,29 @@ import { PropTypesOf } from "talk-framework/types";
import Indent from "./Indent";
it("renders correctly", () => {
it("renders level0", () => {
const props: PropTypesOf<typeof Indent> = {
children: <div>Hello World</div>,
};
const wrapper = shallow(<Indent {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("renders level1", () => {
const props: PropTypesOf<typeof Indent> = {
level: 1,
children: <div>Hello World</div>,
};
const wrapper = shallow(<Indent {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("renders without border", () => {
const props: PropTypesOf<typeof Indent> = {
level: 1,
noBorder: true,
children: <div>Hello World</div>,
};
const wrapper = shallow(<Indent {...props} />);
expect(wrapper).toMatchSnapshot();
});
src/core/client/stream/components/Indent.tsx
+11 -1
View File
@@ -5,11 +5,21 @@ import * as styles from "./Indent.css";
export interface IndentProps {
level?: number;
noBorder?: boolean;
children: React.ReactNode;
}
const Indent: StatelessComponent<IndentProps> = props => {
return <div className={cn(styles.root, styles.level0)}>{props.children}</div>;
return (
<div
className={cn(styles.root, {
[styles.level1]: props.level === 1,
[styles.noBorder]: props.noBorder,
})}
>
{props.children}
</div>
);
};
export default Indent;
src/core/client/stream/components/ReplyList.spec.tsx
+2
View File
@@ -18,6 +18,7 @@ it("renders correctly", () => {
onShowAll: noop,
hasMore: false,
disableShowAll: false,
indentLevel: 1,
};
const wrapper = shallow(<ReplyListN {...props} />);
expect(wrapper).toMatchSnapshot();
@@ -31,6 +32,7 @@ describe("when there is more", () => {
onShowAll: sinon.spy(),
hasMore: true,
disableShowAll: false,
indentLevel: 1,
};
const wrapper = shallow(<ReplyListN {...props} />);
src/core/client/stream/components/ReplyList.tsx
+18 -16
View File
@@ -19,23 +19,25 @@ export interface ReplyListProps {
onShowAll: () => void;
hasMore: boolean;
disableShowAll: boolean;
indentLevel?: number;
}
const ReplyList: StatelessComponent<ReplyListProps> = props => {
return (
<Indent>
<HorizontalGutter
id={`talk-comments-replyList-log--${props.comment.id}`}
role="log"
>
{props.comments.map(comment => (
<CommentContainer
key={comment.id}
comment={comment}
asset={props.asset}
/>
))}
{props.hasMore && (
<HorizontalGutter
id={`talk-comments-replyList-log--${props.comment.id}`}
role="log"
>
{props.comments.map(comment => (
<CommentContainer
key={comment.id}
comment={comment}
asset={props.asset}
indentLevel={props.indentLevel}
/>
))}
{props.hasMore && (
<Indent level={props.indentLevel} noBorder>
<Localized id="comments-replyList-showAll">
<Button
id={`talk-comments-replyList-showAll--${props.comment.id}`}
@@ -48,9 +50,9 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
Show All Replies
</Button>
</Localized>
)}
</HorizontalGutter>
</Indent>
</Indent>
)}
</HorizontalGutter>
);
};
src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap
+22 -2
View File
@@ -1,8 +1,28 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
exports[`renders level0 1`] = `
<div
className="Indent-root Indent-level0"
className="Indent-root"
>
<div>
Hello World
</div>
</div>
`;
exports[`renders level1 1`] = `
<div
className="Indent-root Indent-level1"
>
<div>
Hello World
</div>
</div>
`;
exports[`renders without border 1`] = `
<div
className="Indent-root Indent-level1 Indent-noBorder"
>
<div>
Hello World
src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
+103 -93
View File
@@ -1,73 +1,78 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<Indent>
<withPropsOnChange(HorizontalGutter)
id="talk-comments-replyList-log--comment-id"
role="log"
>
<Relay(CommentContainer)
asset={
Object {
"id": "asset-id",
}
<withPropsOnChange(HorizontalGutter)
id="talk-comments-replyList-log--comment-id"
role="log"
>
<Relay(CommentContainer)
asset={
Object {
"id": "asset-id",
}
comment={
Object {
"id": "comment-1",
}
}
comment={
Object {
"id": "comment-1",
}
key="comment-1"
/>
<Relay(CommentContainer)
asset={
Object {
"id": "asset-id",
}
}
indentLevel={1}
key="comment-1"
/>
<Relay(CommentContainer)
asset={
Object {
"id": "asset-id",
}
comment={
Object {
"id": "comment-2",
}
}
comment={
Object {
"id": "comment-2",
}
key="comment-2"
/>
</withPropsOnChange(HorizontalGutter)>
</Indent>
}
indentLevel={1}
key="comment-2"
/>
</withPropsOnChange(HorizontalGutter)>
`;
exports[`when there is more disables load more button 1`] = `
<Indent>
<withPropsOnChange(HorizontalGutter)
id="talk-comments-replyList-log--comment-id"
role="log"
<withPropsOnChange(HorizontalGutter)
id="talk-comments-replyList-log--comment-id"
role="log"
>
<Relay(CommentContainer)
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-1",
}
}
indentLevel={1}
key="comment-1"
/>
<Relay(CommentContainer)
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-2",
}
}
indentLevel={1}
key="comment-2"
/>
<Indent
level={1}
noBorder={true}
>
<Relay(CommentContainer)
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-1",
}
}
key="comment-1"
/>
<Relay(CommentContainer)
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-2",
}
}
key="comment-2"
/>
<Localized
id="comments-replyList-showAll"
>
@@ -82,42 +87,47 @@ exports[`when there is more disables load more button 1`] = `
Show All Replies
</withPropsOnChange(Button)>
</Localized>
</withPropsOnChange(HorizontalGutter)>
</Indent>
</Indent>
</withPropsOnChange(HorizontalGutter)>
`;
exports[`when there is more renders a load more button 1`] = `
<Indent>
<withPropsOnChange(HorizontalGutter)
id="talk-comments-replyList-log--comment-id"
role="log"
<withPropsOnChange(HorizontalGutter)
id="talk-comments-replyList-log--comment-id"
role="log"
>
<Relay(CommentContainer)
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-1",
}
}
indentLevel={1}
key="comment-1"
/>
<Relay(CommentContainer)
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-2",
}
}
indentLevel={1}
key="comment-2"
/>
<Indent
level={1}
noBorder={true}
>
<Relay(CommentContainer)
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-1",
}
}
key="comment-1"
/>
<Relay(CommentContainer)
asset={
Object {
"id": "asset-id",
}
}
comment={
Object {
"id": "comment-2",
}
}
key="comment-2"
/>
<Localized
id="comments-replyList-showAll"
>
@@ -132,6 +142,6 @@ exports[`when there is more renders a load more button 1`] = `
Show All Replies
</withPropsOnChange(Button)>
</Localized>
</withPropsOnChange(HorizontalGutter)>
</Indent>
</Indent>
</withPropsOnChange(HorizontalGutter)>
`;
src/core/client/stream/containers/CommentContainer.spec.tsx
+2
View File
@@ -22,6 +22,7 @@ it("renders username and body", () => {
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
},
indentLevel: 1,
};
const wrapper = shallow(<CommentContainerN {...props} />);
@@ -41,6 +42,7 @@ it("renders body only", () => {
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
},
indentLevel: 1,
};
const wrapper = shallow(<CommentContainerN {...props} />);
src/core/client/stream/containers/CommentContainer.tsx
+1
View File
@@ -14,6 +14,7 @@ import PermalinkButtonContainer from "./PermalinkButtonContainer";
interface InnerProps {
comment: CommentData;
asset: AssetData;
indentLevel?: number;
}
interface State {
src/core/client/stream/containers/ReplyListContainer.tsx
+1
View File
@@ -39,6 +39,7 @@ export class ReplyListContainer extends React.Component<InnerProps> {
onShowAll={this.showAll}
hasMore={this.props.relay.hasMore()}
disableShowAll={this.state.disableShowAll}
indentLevel={1}
/>
);
}
src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
+4 -2
View File
@@ -2,7 +2,7 @@
exports[`renders body only 1`] = `
<React.Fragment>
<Comment
<IndentedComment
author={
Object {
"username": null,
@@ -22,13 +22,14 @@ exports[`renders body only 1`] = `
</React.Fragment>
}
id="comment-id"
indentLevel={1}
/>
</React.Fragment>
`;
exports[`renders username and body 1`] = `
<React.Fragment>
<Comment
<IndentedComment
author={
Object {
"username": "Marvin",
@@ -48,6 +49,7 @@ exports[`renders username and body 1`] = `
</React.Fragment>
}
id="comment-id"
indentLevel={1}
/>
</React.Fragment>
`;
src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
+4
View File
@@ -37,6 +37,7 @@ exports[`renders correctly 1`] = `
]
}
disableShowAll={false}
indentLevel={1}
onShowAll={[Function]}
/>
`;
@@ -81,6 +82,7 @@ exports[`when has more replies renders hasMore 1`] = `
}
disableShowAll={false}
hasMore={true}
indentLevel={1}
onShowAll={[Function]}
/>
`;
@@ -123,6 +125,7 @@ exports[`when has more replies when showing all disables show all button 1`] = `
}
disableShowAll={true}
hasMore={true}
indentLevel={1}
onShowAll={[Function]}
/>
`;
@@ -165,6 +168,7 @@ exports[`when has more replies when showing all enable show all button after loa
}
disableShowAll={false}
hasMore={true}
indentLevel={1}
onShowAll={[Function]}
/>
`;
src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+8 -4
View File
@@ -249,12 +249,12 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="Indent-root Indent-level0"
className="HorizontalGutter-root HorizontalGutter-full"
id="talk-comments-replyList-log--comment-with-replies"
role="log"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
id="talk-comments-replyList-log--comment-with-replies"
role="log"
className="Indent-root Indent-level1"
>
<div
className="Comment-root"
@@ -304,6 +304,10 @@ exports[`renders comment stream 1`] = `
</button>
</div>
</div>
</div>
<div
className="Indent-root Indent-level1"
>
<div
className="Comment-root"
role="article"
src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+16 -8
View File
@@ -197,12 +197,12 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<div
className="Indent-root Indent-level0"
className="HorizontalGutter-root HorizontalGutter-full"
id="talk-comments-replyList-log--comment-0"
role="log"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
id="talk-comments-replyList-log--comment-0"
role="log"
className="Indent-root Indent-level1"
>
<div
className="Comment-root"
@@ -252,6 +252,10 @@ exports[`renders comment stream 1`] = `
</button>
</div>
</div>
</div>
<div
className="Indent-root Indent-level1 Indent-noBorder"
>
<button
aria-controls="talk-comments-replyList-log--comment-0"
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
@@ -473,12 +477,12 @@ exports[`show all replies 1`] = `
</div>
</div>
<div
className="Indent-root Indent-level0"
className="HorizontalGutter-root HorizontalGutter-full"
id="talk-comments-replyList-log--comment-0"
role="log"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
id="talk-comments-replyList-log--comment-0"
role="log"
className="Indent-root Indent-level1"
>
<div
className="Comment-root"
@@ -528,6 +532,10 @@ exports[`show all replies 1`] = `
</button>
</div>
</div>
</div>
<div
className="Indent-root Indent-level1"
>
<div
className="Comment-root"
role="article"