Skip to content

Commit 8cbbae0

Browse files
marta-komarta-ko
committed
v2.3.0
1 parent a1cca7b commit 8cbbae0

35 files changed

+714
-560
lines changed

‎.sync‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
456530746b30f6558632983122db8b4c40294ce7

‎README.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,18 +39,18 @@ It supports plain text or markdown comments, multiple display styles (like chat
3939
To use the widget, simply import the package and include the component in to .jsx file:
4040

4141
```jsx
42-
import { Comments } from "@svar-ui/react-comments";
43-
import "@svar-ui/react-comments/all.css";
42+
import { Comments } from "@svar-ui/react-comments";
43+
import "@svar-ui/react-comments/style.css";
4444

4545
function MyComponent(){
4646
const data = [
47-
{ id: 1, user: 1, content:'Greetings, fellow colleagues', date: new Date() },
48-
{ id: 2, user: 2, content: 'Hi, Diego!', date: new Date() },
49-
];
50-
const users = [
51-
{ id: 1, name: 'Diego Clark'}
52-
{ id: 2, name: 'Alice Smith'},
53-
];
47+
{ id: 1, user: 1, content:'Greetings, fellow colleagues', date: new Date() },
48+
{ id: 2, user: 2, content: 'Hi, Diego!', date: new Date() },
49+
];
50+
const users = [
51+
{ id: 1, name: 'Diego Clark'}
52+
{ id: 2, name: 'Alice Smith'},
53+
];
5454

5555
return (<Comments value={data} users={users}/>);
5656
}

‎demos/cases/BackendResolve.jsx‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
1-
import { useState, useMemo } from "react";
2-
import { Segmented } from "@svar-ui/react-core";
3-
import { RestURL } from "@svar-ui/lib-data-provider";
4-
import { Comments } from "../../src/index";
5-
import { getData } from "../data";
6-
import "./BackendResolve.css";
1+
import { useState, useMemo } from 'react';
2+
import { Segmented } from '@svar-ui/react-core';
3+
import { RestURL } from '@svar-ui/lib-data-provider';
4+
import { Comments } from '../../src/index';
5+
import { getData } from '../data';
6+
import './BackendResolve.css';
77

88
function BackendResolve() {
99
const url = useMemo(
1010
() =>
11-
new RestURL(
12-
"https://master--svar-comments-go--dev.webix.io/comments"
13-
),
14-
[]
11+
new RestURL('https://master--svar-comments-go--dev.webix.io/comments'),
12+
[],
1513
);
1614
const users = useMemo(() => getData().users, []);
1715

1816
const [id, setId] = useState(1);
1917
const options = [
20-
{ id: 1, label: "Page 1" },
21-
{ id: 2, label: "Page 2" },
18+
{ id: 1, label: 'Page 1' },
19+
{ id: 2, label: 'Page 2' },
2220
];
2321

2422
return (
@@ -46,4 +44,4 @@ function BackendResolve() {
4644
);
4745
}
4846

49-
export default BackendResolve;
47+
export default BackendResolve;

‎demos/cases/BackendUrl.jsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
import { useEffect, useMemo, useState } from "react";
2-
import { RestURL } from "@svar-ui/lib-data-provider";
3-
import { Comments } from "../../src/index";
4-
import { getData } from "../data";
1+
import { useEffect, useMemo, useState } from 'react';
2+
import { RestURL } from '@svar-ui/lib-data-provider';
3+
import { Comments } from '../../src/index';
4+
import { getData } from '../data';
55

66
export default function BackendUrl() {
77
const users = useMemo(() => getData().users, []);
88
const loadURL = useMemo(
9-
() => "https://master--svar-comments-go--dev.webix.io/comments-info/1",
10-
[]
9+
() => 'https://master--svar-comments-go--dev.webix.io/comments-info/1',
10+
[],
1111
);
1212
const saveURL = useMemo(
13-
() => new RestURL("https://master--svar-comments-go--dev.webix.io/comments/1"),
14-
[]
13+
() =>
14+
new RestURL('https://master--svar-comments-go--dev.webix.io/comments/1'),
15+
[],
1516
);
1617

1718
const [value, setValue] = useState([]);
@@ -23,12 +24,14 @@ export default function BackendUrl() {
2324
}, [loadURL]);
2425

2526
return (
26-
<div style={{ margin: "auto", maxWidth: "700px", marginTop: "40px" }}>
27+
<div style={{ margin: 'auto', maxWidth: '700px', marginTop: '40px' }}>
2728
<Comments
2829
value={value}
29-
onChange={({ action, comment, id }) => saveURL.save(action, comment, id)}
30+
onChange={({ action, comment, id }) =>
31+
saveURL.save(action, comment, id)
32+
}
3033
activeUser={users[0]}
3134
/>
3235
</div>
3336
);
34-
}
37+
}

‎demos/cases/BasicInit.jsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,31 @@
1-
import { useState, useMemo } from "react";
2-
import { Segmented } from "@svar-ui/react-core";
3-
import { Comments } from "../../src/index";
4-
import { getData } from "../data";
5-
import "./BasicInit.css";
1+
import { useState, useMemo } from 'react';
2+
import { Segmented } from '@svar-ui/react-core';
3+
import { Comments } from '../../src/index';
4+
import { getData } from '../data';
5+
import './BasicInit.css';
66

77
export default function BasicInit() {
88
const { data, users } = useMemo(() => getData(), []);
99
const options = useMemo(
1010
() => [
11-
{ label: "Bubbles", id: "bubbles" },
12-
{ label: "Flow", id: "flow" },
11+
{ label: 'Bubbles', id: 'bubbles' },
12+
{ label: 'Flow', id: 'flow' },
1313
],
14-
[]
14+
[],
1515
);
1616

17-
const [render, setRender] = useState("flow");
17+
const [render, setRender] = useState('flow');
1818

1919
return (
2020
<>
2121
<div className="wx-DwEL91Wl toolbar">
22-
<Segmented value={render} options={options} onChange={({ value }) => setRender(value)} />
22+
<Segmented
23+
value={render}
24+
options={options}
25+
onChange={({ value }) => setRender(value)}
26+
/>
2327
</div>
24-
<div style={{ margin: "auto", maxWidth: "700px", marginTop: "40px" }}>
28+
<div style={{ margin: 'auto', maxWidth: '700px', marginTop: '40px' }}>
2529
<Comments
2630
key={render}
2731
focus={true}
@@ -33,4 +37,4 @@ export default function BasicInit() {
3337
</div>
3438
</>
3539
);
36-
}
40+
}

‎demos/cases/CustomBackend.jsx‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,40 @@
1-
import { useMemo, useState, useCallback } from "react";
2-
import { Comments } from "../../src/index";
3-
import { getData } from "../data";
4-
import "./CustomBackend.css";
1+
import { useMemo, useState, useCallback } from 'react';
2+
import { Comments } from '../../src/index';
3+
import { getData } from '../data';
4+
import './CustomBackend.css';
55

66
function CustomBackend() {
77
const stub = useMemo(() => getData(), []);
88
const users = stub.users;
99

10-
const prev = useMemo(() => localStorage.getItem("--comments-demo-data"), []);
11-
const data = useMemo(() => (prev ? JSON.parse(prev) : stub.data), [prev, stub]);
10+
const prev = useMemo(() => localStorage.getItem('--comments-demo-data'), []);
11+
const data = useMemo(
12+
() => (prev ? JSON.parse(prev) : stub.data),
13+
[prev, stub],
14+
);
1215

13-
const [message, setMessage] = useState("");
16+
const [message, setMessage] = useState('');
1417

1518
const callback = useCallback((action, obj) => {
1619
switch (action) {
17-
case "add": {
18-
setMessage(`The message "${obj.comment.content}" was successfully added`);
20+
case 'add': {
21+
setMessage(
22+
`The message "${obj.comment.content}" was successfully added`,
23+
);
1924
break;
2025
}
21-
case "delete": {
26+
case 'delete': {
2227
setMessage(`The message was successfully deleted`);
2328
break;
2429
}
25-
case "update": {
30+
case 'update': {
2631
setMessage(`The message was successfully updated`);
2732
break;
2833
}
2934
default:
3035
break;
3136
}
32-
localStorage.setItem("--comments-demo-data", JSON.stringify(obj.value));
37+
localStorage.setItem('--comments-demo-data', JSON.stringify(obj.value));
3338
}, []);
3439

3540
return (
@@ -49,4 +54,4 @@ function CustomBackend() {
4954
);
5055
}
5156

52-
export default CustomBackend;
57+
export default CustomBackend;

‎demos/cases/CustomContent.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.custom-comments .text a {
2+
color: var(--wx-color-primary);
3+
display: inline;
4+
}
5+
.custom-comments .date {
6+
font-size: var(--wx-font-size-sm);
7+
color: var(--wx-color-font-alt);
8+
}
9+
.custom-comments .owned {
10+
border-left: 2px solid var(--wx-color-primary);
11+
}

‎demos/cases/CustomContent.jsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { useMemo } from 'react';
2+
import { Comments } from '../../src/index';
3+
import { getData } from '../data';
4+
import MessageRenderer from '../custom/MessageRenderer.jsx';
5+
import ContentRenderer from '../custom/ContentRenderer.jsx';
6+
7+
import './CustomContent.css';
8+
9+
export default function BasicInit() {
10+
const { data, users } = useMemo(() => {
11+
const temp = getData();
12+
temp.data.forEach((d) => {
13+
d.content = d.content.replace('Alice', '@[Alice](user:1)');
14+
});
15+
return temp;
16+
}, []);
17+
18+
return (
19+
<>
20+
<div
21+
className="custom-comments"
22+
style={{ margin: 'auto', maxWidth: '700px', marginTop: '40px' }}
23+
>
24+
<Comments
25+
value={data}
26+
users={users}
27+
activeUser={1}
28+
render={MessageRenderer}
29+
format={ContentRenderer}
30+
/>
31+
</div>
32+
</>
33+
);
34+
}

‎demos/cases/Events.jsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
import { useState, useMemo, useCallback } from "react";
2-
import { Comments } from "../../src/index";
3-
import { getData } from "../data";
4-
import "./Events.css";
1+
import { useState, useMemo, useCallback } from 'react';
2+
import { Comments } from '../../src/index';
3+
import { getData } from '../data';
4+
import './Events.css';
55

66
function Events() {
77
const { data, users } = useMemo(() => getData(), []);
8-
const [message, setMessage] = useState("");
8+
const [message, setMessage] = useState('');
99

1010
const trackChanges = useCallback(({ action, id, comment }) => {
1111
switch (action) {
12-
case "add":
12+
case 'add':
1313
setMessage(`New comment was added (${new Date().getTime()})`);
1414
console.log(`New comment: "${comment.content}" was added `);
1515
break;
16-
case "update":
16+
case 'update':
1717
setMessage(`Comment with id: ${id} was updated`);
1818
console.log(`Comment with id: ${id} was updated `);
1919
break;
20-
case "delete":
20+
case 'delete':
2121
setMessage(`Comment with id: ${id} was deleted`);
2222
console.log(`Comment with id: ${id} was deleted `);
2323
break;
@@ -31,11 +31,16 @@ function Events() {
3131
<div className="wx-5YqcEBWD message">{message}</div>
3232
<div>
3333
<div className="wx-5YqcEBWD wrapper">
34-
<Comments value={data} users={users} activeUser={1} onChange={trackChanges} />
34+
<Comments
35+
value={data}
36+
users={users}
37+
activeUser={1}
38+
onChange={trackChanges}
39+
/>
3540
</div>
3641
</div>
3742
</>
3843
);
3944
}
4045

41-
export default Events;
46+
export default Events;

‎demos/cases/Locale.jsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
1-
import React, { useState, useMemo } from "react";
2-
import { Locale, Segmented } from "@svar-ui/react-core";
3-
import { Comments } from "../../src/index";
4-
import { getData } from "../data";
1+
import React, { useState, useMemo } from 'react';
2+
import { Locale, Segmented } from '@svar-ui/react-core';
3+
import { Comments } from '../../src/index';
4+
import { getData } from '../data';
55

6-
import { de, cn } from "@svar-ui/comments-locales";
7-
import { de as deCore, cn as cnCore } from "@svar-ui/core-locales";
6+
import { de, cn } from '@svar-ui/comments-locales';
7+
import { de as deCore, cn as cnCore } from '@svar-ui/core-locales';
88

9-
import "./Locale.css";
9+
import './Locale.css';
1010

1111
export default function Component() {
1212
const { data, users } = useMemo(() => getData(), []);
1313

1414
const options = [
15-
{ label: "Bubbles", id: "bubbles" },
16-
{ label: "Flow", id: "flow" },
15+
{ label: 'Bubbles', id: 'bubbles' },
16+
{ label: 'Flow', id: 'flow' },
1717
];
1818

1919
const langs = [
20-
{ id: "en", label: "EN" },
21-
{ id: "de", label: "DE" },
22-
{ id: "cn", label: "CN" },
20+
{ id: 'en', label: 'EN' },
21+
{ id: 'de', label: 'DE' },
22+
{ id: 'cn', label: 'CN' },
2323
];
2424

25-
const [render, setRender] = useState("flow");
26-
const [lang, setLang] = useState("en");
25+
const [render, setRender] = useState('flow');
26+
const [lang, setLang] = useState('en');
2727

2828
return (
2929
<>
@@ -39,9 +39,9 @@ export default function Component() {
3939
onChange={({ value }) => setRender(value)}
4040
/>
4141
</div>
42-
<div style={{ margin: "auto", maxWidth: "700px", marginTop: "40px" }}>
42+
<div style={{ margin: 'auto', maxWidth: '700px', marginTop: '40px' }}>
4343
<React.Fragment key={render}>
44-
{lang === "de" ? (
44+
{lang === 'de' ? (
4545
<Locale words={{ ...de, deCore }}>
4646
<Comments
4747
focus={true}
@@ -51,7 +51,7 @@ export default function Component() {
5151
render={render}
5252
/>
5353
</Locale>
54-
) : lang === "cn" ? (
54+
) : lang === 'cn' ? (
5555
<Locale words={{ ...cn, cnCore }}>
5656
<Comments
5757
focus={true}
@@ -74,4 +74,4 @@ export default function Component() {
7474
</div>
7575
</>
7676
);
77-
}
77+
}

0 commit comments

Comments
 (0)