Skip to content

Commit d4ac2bb

Browse files
zfletchzfletch
committed
comments component
1 parent 7c76715 commit d4ac2bb

File tree

9 files changed

+263
-0
lines changed

9 files changed

+263
-0
lines changed

‎example/src/App/App.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import styles from './App.module.scss';
55
import {
66
Alignment,
77
Collapse,
8+
Comments,
89
Sentence,
910
Segment,
1011
Xml,
@@ -223,6 +224,7 @@ const xml = `
223224
<refs nrefs="1-4"/>
224225
</w>
225226
<w n="1-5">
227+
<comment class="mark">English often uses multiple words where Greek uses the genitive</comment>
226228
<text>of</text>
227229
<refs nrefs="1-3"/>
228230
</w>
@@ -465,6 +467,7 @@ const App = () => (
465467
<Sentence n="1">
466468
<Segment lnum="L1" />
467469
<Segment lnum="L2" />
470+
<Comments />
468471
<Collapse title="XML">
469472
<Xml />
470473
</Collapse>

‎src/components/Alignment/Comments/Comments.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
3+
import SentenceContext from '../sentence-context';
4+
5+
import Comments from '../../Comments';
6+
7+
const CommentsWithContext = () => (
8+
<SentenceContext.Consumer>
9+
{({ sentence, active }) => (
10+
<Comments
11+
sentence={sentence}
12+
active={active}
13+
/>
14+
)}
15+
</SentenceContext.Consumer>
16+
);
17+
18+
export default CommentsWithContext;

‎src/components/Alignment/Comments/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Comments from './Comments';
2+
3+
export default Comments;

‎src/components/Comments/Comments.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from 'react';
2+
3+
import { activeType, sentenceType } from '../../types';
4+
5+
import styles from './Comments.module.scss';
6+
7+
// eslint-disable-next-line react/prop-types
8+
const commentDl = ({ title, value }, lnum, n, ii) => (
9+
<dl key={`comment-${lnum}-${n}-${ii}`} className={styles.dl}>
10+
<div className={styles.container}>
11+
<dt className={styles.dt}>{title}</dt>
12+
<dd className={styles.dd}>{value}</dd>
13+
</div>
14+
</dl>
15+
);
16+
17+
const wordListDls = ({ wds, active }) => {
18+
const dls = [];
19+
20+
(wds || []).forEach(({ $: { lnum }, w }) => (
21+
(w || []).forEach(({ $: { n }, comment, text }) => (
22+
(comment || []).forEach(({ _: commentText }, ii) => {
23+
const title = (text || []).map(({ _ }) => _).join(' ');
24+
25+
if (active && active.aligned && active.aligned[lnum] && active.aligned[lnum].has(n)) {
26+
dls.push(commentDl({ title, value: commentText }, lnum, n, ii));
27+
}
28+
})
29+
))
30+
));
31+
32+
return dls;
33+
};
34+
35+
const Comments = ({ sentence, active }) => {
36+
if (!active) {
37+
return false;
38+
}
39+
40+
const wds = sentence && sentence.wds;
41+
const dls = wordListDls({ wds, active });
42+
43+
if (dls.length === 0) {
44+
return false;
45+
}
46+
47+
return (
48+
<div className={styles.comments}>{dls}</div>
49+
);
50+
};
51+
52+
Comments.propTypes = {
53+
sentence: sentenceType.isRequired,
54+
active: activeType,
55+
};
56+
57+
Comments.defaultProps = {
58+
active: null,
59+
};
60+
61+
export default Comments;

‎src/components/Comments/Comments.module.scss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.comments {
2+
background-color: rgb(242, 242, 242);
3+
4+
padding-top: 0.2rem;
5+
padding-bottom: 0.2rem;
6+
padding-left: 0.4rem;
7+
padding-right: 0.4rem;
8+
9+
margin-bottom: 0.2rem;
10+
}
11+
12+
.dl {
13+
display: flex;
14+
flex-wrap: wrap;
15+
}
16+
17+
.container {
18+
margin-right: 7px;
19+
margin-left: 7px;
20+
margin-bottom: 2px;
21+
margin-top: 2px;
22+
}
23+
24+
.dt {
25+
font-weight: bold;
26+
margin: 0;
27+
padding: 0;
28+
}
29+
30+
.dd {
31+
margin: 0;
32+
padding: 0;
33+
}
34+

‎src/components/Comments/Comments.test.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import React from 'react';
2+
import renderer from 'react-test-renderer';
3+
4+
import Comments from './Comments';
5+
6+
const sentence = {
7+
$: { n: '1' },
8+
wds: [
9+
{
10+
$: { lnum: 'L1' },
11+
w: [
12+
{ $: { n: '1-1' }, text: [{ _: 'A' }], refs: [{ $: { nrefs: '1-1' } }] },
13+
{ $: { n: '1-2' }, text: [{ _: 'BC' }], refs: [{ $: { nrefs: '1-2 1-3' } }] },
14+
{
15+
$: { n: '1-3' },
16+
text: [{ _: 'D' }],
17+
comment: [{ _: 'Test', $: { class: 'mark' } }],
18+
refs: [{ $: { nrefs: '1-3 1-4' } }],
19+
},
20+
{ $: { n: '1-4' }, text: [{ _: 'E' }], refs: [{ $: { nrefs: '1-4' } }] },
21+
{ $: { n: '1-5' }, text: [{ _: 'F' }], refs: [{ $: { nrefs: '1-5 1-6' } }] },
22+
{ $: { n: '1-6' }, text: [{ _: 'G' }], refs: [{ $: { nrefs: '1-5 1-6' } }] },
23+
],
24+
},
25+
{
26+
$: { lnum: 'L2' },
27+
w: [
28+
{ $: { n: '1-1' }, text: [{ _: 'A' }], refs: [{ $: { nrefs: '1-1' } }] },
29+
{ $: { n: '1-2' }, text: [{ _: 'B' }], refs: [{ $: { nrefs: '1-2' } }] },
30+
{
31+
$: { n: '1-3' },
32+
text: [{ _: 'C' }],
33+
comment: [{ _: 'Other languge test', $: { class: 'mark' } }],
34+
refs: [{ $: { nrefs: '1-3' } }],
35+
},
36+
{ $: { n: '1-4' }, text: [{ _: 'DE' }], refs: [{ $: { nrefs: '1-3' } }] },
37+
{ $: { n: '1-5' }, text: [{ _: 'F' }], refs: [{ $: { nrefs: '1-5 1-6' } }] },
38+
{ $: { n: '1-6' }, text: [{ _: 'G' }], refs: [{ $: { nrefs: '1-5 1-6' } }] },
39+
],
40+
},
41+
],
42+
};
43+
44+
it('does not render when there is no active', () => {
45+
const component = (
46+
<Comments sentence={sentence} />
47+
);
48+
const tree = renderer.create(component).toJSON();
49+
50+
expect(tree).toMatchSnapshot();
51+
});
52+
53+
it('does not render when the active has no comment', () => {
54+
const active = {
55+
selected: { lnum: 'L1', n: '1-1' },
56+
aligned: {
57+
L1: new Set(['1-1']),
58+
L2: new Set(['1-1']),
59+
},
60+
};
61+
62+
const component = (
63+
<Comments
64+
sentence={sentence}
65+
active={active}
66+
/>
67+
);
68+
const tree = renderer.create(component).toJSON();
69+
70+
expect(tree).toMatchSnapshot();
71+
});
72+
73+
it('displays all comments associated with active words', () => {
74+
const active = {
75+
selected: { lnum: 'L1', n: '1-1' },
76+
aligned: {
77+
L1: new Set(['1-3']),
78+
L2: new Set(['1-3', '1-4']),
79+
},
80+
};
81+
82+
const component = (
83+
<Comments
84+
sentence={sentence}
85+
active={active}
86+
/>
87+
);
88+
const tree = renderer.create(component).toJSON();
89+
90+
expect(tree).toMatchSnapshot();
91+
});

‎src/components/Comments/__snapshots__/Comments.test.js.snap‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`displays all comments associated with active words 1`] = `
4+
<div
5+
className="comments"
6+
>
7+
<dl
8+
className="dl"
9+
>
10+
<div
11+
className="container"
12+
>
13+
<dt
14+
className="dt"
15+
>
16+
D
17+
</dt>
18+
<dd
19+
className="dd"
20+
>
21+
Test
22+
</dd>
23+
</div>
24+
</dl>
25+
<dl
26+
className="dl"
27+
>
28+
<div
29+
className="container"
30+
>
31+
<dt
32+
className="dt"
33+
>
34+
C
35+
</dt>
36+
<dd
37+
className="dd"
38+
>
39+
Other languge test
40+
</dd>
41+
</div>
42+
</dl>
43+
</div>
44+
`;
45+
46+
exports[`does not render when the active has no comment 1`] = `null`;
47+
48+
exports[`does not render when there is no active 1`] = `null`;

‎src/components/Comments/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Comments from './Comments';
2+
3+
export default Comments;

‎src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import Alignment from './components/Alignment';
22
import Collapse from './components/Collapse';
3+
import Comments from './components/Alignment/Comments';
34
import Segment from './components/Alignment/Segment';
45
import Sentence from './components/Alignment/Sentence';
56
import Xml from './components/Alignment/Xml';
67

78
export {
89
Alignment,
910
Collapse,
11+
Comments,
1012
Segment,
1113
Sentence,
1214
Xml,

0 commit comments

Comments
 (0)