wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-08-04 13:23:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

Indent comment only

Browse Source
This commit is contained in:
Chi Vinh Le
2018-09-06 00:06:58 +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)>
`;