Skip to content

Commit 52ae9f3

Browse files
AntoineGrandchampAntoineGrandchamp
committed
Add tool box
1 parent 3b9988d commit 52ae9f3

File tree

10 files changed

+255
-78
lines changed

10 files changed

+255
-78
lines changed

‎assets/tools.svg

Lines changed: 63 additions & 0 deletions
Loading

‎dev/App.js

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,37 @@
1-
import React, { Component } from 'react';
2-
import { Widget, addResponseMessage, setQuickButtons, toggleMsgLoader } from '../index';
1+
import React, { Component } from "react";
2+
import {
3+
Widget,
4+
addResponseMessage,
5+
setQuickButtons,
6+
toggleMsgLoader
7+
} from "../index";
38

49
export default class App extends Component {
510
componentDidMount() {
6-
addResponseMessage('Welcome to this awesome chat!');
11+
addResponseMessage("Welcome to this awesome chat!");
712
}
813

9-
handleNewUserMessage = (newMessage) => {
14+
handleNewUserMessage = newMessage => {
1015
toggleMsgLoader();
1116
setTimeout(() => {
12-
toggleMsgLoader();
13-
if (newMessage === 'fruits') {
14-
setQuickButtons([ { label: 'Apple', value: 'apple' }, { label: 'Orange', value: 'orange' }, { label: 'Pear', value: 'pear' }, { label: 'Banana', value: 'banana' } ]);
17+
toggleMsgLoader();
18+
if (newMessage === "fruits") {
19+
setQuickButtons([
20+
{ label: "Apple", value: "apple" },
21+
{ label: "Orange", value: "orange" },
22+
{ label: "Pear", value: "pear" },
23+
{ label: "Banana", value: "banana" }
24+
]);
1525
} else {
1626
addResponseMessage(newMessage);
1727
}
1828
}, 2000);
19-
}
29+
};
2030

21-
handleQuickButtonClicked = (e) => {
22-
addResponseMessage('Selected ' + e);
31+
handleQuickButtonClicked = e => {
32+
addResponseMessage("Selected " + e);
2333
setQuickButtons([]);
24-
}
34+
};
2535

2636
render() {
2737
return (
@@ -32,6 +42,21 @@ export default class App extends Component {
3242
handleNewUserMessage={this.handleNewUserMessage}
3343
handleQuickButtonClicked={this.handleQuickButtonClicked}
3444
badge={1}
45+
showCloseButton={true}
46+
menuItems={[
47+
{
48+
label: "HEY MAN",
49+
onClick: () => {
50+
console.log("Malade");
51+
}
52+
},
53+
{
54+
label: "icons",
55+
onClick: () => {
56+
console.log("Malade");
57+
}
58+
}
59+
]}
3560
/>
3661
);
3762
}

‎package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"prop-types": "^15.5.10",
2828
"react-immutable-proptypes": "^2.1.0",
2929
"react-redux": "^5.0.6",
30+
"reactjs-popup": "^1.4.0",
3031
"redux": "^3.7.2"
3132
},
3233
"devDependencies": {

‎src/components/Widget/components/Conversation/components/Header/index.js

Lines changed: 70 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,79 @@
1-
import React from "react";
1+
import React, { PureComponent } from "react";
22
import PropTypes from "prop-types";
3+
import Popup from "reactjs-popup";
34

45
import close from "../../../../../../../assets/clear-button.svg";
6+
import tools from "../../../../../../../assets/tools.svg";
57

68
import "./style.scss";
79

8-
const Header = ({
9-
title,
10-
subtitle,
11-
toggleChat,
12-
showCloseButton,
13-
titleAvatar
14-
}) => (
15-
<div className="rcw-header">
16-
{showCloseButton && (
17-
<button className="rcw-close-button" onClick={toggleChat}>
18-
<img src={close} className="rcw-close" alt="close" />
19-
</button>
20-
)}
21-
<h4 className="rcw-title">
22-
{titleAvatar && (
23-
<img src={titleAvatar} className="avatar" alt="profile" />
24-
)}
25-
{title}
26-
</h4>
27-
<span>{subtitle}</span>
28-
</div>
29-
);
10+
class Header extends PureComponent {
11+
constructor(props) {
12+
super(props);
13+
14+
this.popupRef = React.createRef();
15+
}
16+
17+
handleMenuSelection = () => {
18+
this.popupRef.current.closePopup();
19+
};
20+
21+
render() {
22+
const {
23+
title,
24+
subtitle,
25+
toggleChat,
26+
showCloseButton,
27+
titleAvatar,
28+
menuItems
29+
} = this.props;
30+
31+
return (
32+
<div className="rcw-header">
33+
{console.log("showCloseButton", showCloseButton)}
34+
{showCloseButton && (
35+
<button className="rcw-close-button" onClick={toggleChat}>
36+
<img src={close} className="rcw-close" alt="close" />
37+
</button>
38+
)}
39+
<h4 className="rcw-title">
40+
{titleAvatar && (
41+
<img src={titleAvatar} className="avatar" alt="profile" />
42+
)}
43+
<span>{title}</span>
44+
{menuItems &&
45+
menuItems.length > 0 && (
46+
<Popup
47+
ref={this.popupRef}
48+
closeOnDocumentClick
49+
className="popup"
50+
trigger={
51+
<button className="rcw-tools-button">
52+
<img src={tools} className="rcw-tools" alt="tools" />
53+
</button>
54+
}
55+
position="left top"
56+
>
57+
{menuItems.map(item => (
58+
<div
59+
className="item"
60+
key={item.label}
61+
onClick={() => {
62+
this.handleMenuSelection();
63+
item.onClick();
64+
}}
65+
>
66+
{item.label}
67+
</div>
68+
))}
69+
</Popup>
70+
)}
71+
</h4>
72+
<span>{subtitle}</span>
73+
</div>
74+
);
75+
}
76+
}
3077

3178
Header.propTypes = {
3279
title: PropTypes.string,

‎src/components/Widget/components/Conversation/components/Header/style.scss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,48 @@
1414

1515
.rcw-title {
1616
font-size: 24px;
17+
display: flex;
1718
margin: 0;
1819
padding: 15px 0;
20+
21+
>span {
22+
flex: 1;
23+
margin-left: 34px;
24+
}
25+
26+
.popup-content {
27+
border-radius: 8px;
28+
color: black;
29+
30+
.item {
31+
cursor: pointer;
32+
font-size: 14px;
33+
padding: 4px 0;
34+
35+
&:not(:last-child) {
36+
border-bottom: 1px solid rgba(156, 156, 156, 0.5);
37+
}
38+
}
39+
}
1940
}
2041

2142
.rcw-close-button {
2243
display: none;
2344
}
2445

46+
.rcw-tools-button {
47+
background: transparent;
48+
border: none;
49+
outline: none;
50+
cursor: pointer;
51+
margin-left: auto;
52+
53+
.rcw-tools {
54+
color: white;
55+
width: 20px;
56+
}
57+
}
58+
2559
.avatar {
2660
width: 40px;
2761
height: 40px;

‎src/components/Widget/components/Conversation/index.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types';
1+
import React from "react";
2+
import PropTypes from "prop-types";
33

4-
import Header from './components/Header';
5-
import Messages from './components/Messages';
6-
import Sender from './components/Sender';
7-
import QuickButtons from './components/QuickButtons';
8-
import './style.scss';
4+
import Header from "./components/Header";
5+
import Messages from "./components/Messages";
6+
import Sender from "./components/Sender";
7+
import QuickButtons from "./components/QuickButtons";
8+
import "./style.scss";
99

10-
const Conversation = props =>
10+
const Conversation = props => (
1111
<div className="rcw-conversation-container">
1212
<Header
1313
title={props.title}
1414
subtitle={props.subtitle}
1515
toggleChat={props.toggleChat}
1616
showCloseButton={props.showCloseButton}
1717
titleAvatar={props.titleAvatar}
18+
menuItems={props.menuItems}
1819
/>
19-
<Messages
20-
profileAvatar={props.profileAvatar}
21-
/>
20+
<Messages profileAvatar={props.profileAvatar} />
2221
<QuickButtons onQuickButtonClicked={props.onQuickButtonClicked} />
2322
<Sender
2423
sendMessage={props.sendMessage}
2524
placeholder={props.senderPlaceHolder}
2625
disabledInput={props.disabledInput}
2726
autofocus={props.autofocus}
2827
/>
29-
</div>;
28+
</div>
29+
);
3030

3131
Conversation.propTypes = {
3232
title: PropTypes.string,

‎src/components/Widget/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ class Widget extends Component {
5151
badge={this.props.badge}
5252
autofocus={this.props.autofocus}
5353
customLauncher={this.props.customLauncher}
54+
menuItems={this.props.menuItems}
5455
/>
5556
);
5657
}

0 commit comments

Comments
 (0)