From a8a95e9d9eb2c01d958977a93fa87dbc8d0e22ac Mon Sep 17 00:00:00 2001 From: Anmol Date: Thu, 22 Aug 2019 22:36:35 +0800 Subject: [PATCH 1/5] added prop that decides whether or not to show the add files button in the input bar. Defaults to true. --- src/components/ChatWindow.js | 4 +++- src/components/Launcher.js | 5 ++++- src/components/UserInput.js | 30 ++++++++++++++++-------------- 3 files changed, 23 insertions(+), 16 deletions(-) diff --git a/src/components/ChatWindow.js b/src/components/ChatWindow.js index 445bf1247..c76233c80 100644 --- a/src/components/ChatWindow.js +++ b/src/components/ChatWindow.js @@ -39,6 +39,7 @@ class ChatWindow extends Component { onSubmit={this.onUserInputSubmit.bind(this)} onFilesSelected={this.onFilesSelected.bind(this)} showEmoji={this.props.showEmoji} + showFilePicker={this.props.showFilePicker} /> ); @@ -51,7 +52,8 @@ ChatWindow.propTypes = { onClose: PropTypes.func.isRequired, onFilesSelected: PropTypes.func, onUserInputSubmit: PropTypes.func.isRequired, - showEmoji: PropTypes.bool + showEmoji: PropTypes.bool, + showFilePicker: PropTypes.bool }; export default ChatWindow; diff --git a/src/components/Launcher.js b/src/components/Launcher.js index 7b4306cd4..884f957ca 100644 --- a/src/components/Launcher.js +++ b/src/components/Launcher.js @@ -60,6 +60,7 @@ class Launcher extends Component { isOpen={isOpen} onClose={this.handleClick.bind(this)} showEmoji={this.props.showEmoji} + showFilePicker={this.props.showFilePicker} /> ); @@ -84,11 +85,13 @@ Launcher.propTypes = { messageList: PropTypes.arrayOf(PropTypes.object), mute: PropTypes.bool, showEmoji: PropTypes.bool, + showFilePicker: PropTypes.bool }; Launcher.defaultProps = { newMessagesCount: 0, - showEmoji: true + showEmoji: true, + showFilePicker: true }; export default Launcher; diff --git a/src/components/UserInput.js b/src/components/UserInput.js index 63ada1e0c..9999038c1 100644 --- a/src/components/UserInput.js +++ b/src/components/UserInput.js @@ -20,7 +20,7 @@ class UserInput extends Component { } componentDidMount() { - this.emojiPickerButton = document.querySelector('#sc-emoji-picker-button'); + this.emojiPickerButton = document.querySelector('#sc-emoji-picker-button'); } handleKeyDown(event) { @@ -111,19 +111,20 @@ class UserInput extends Component { ); + } else if (this.props.showFilePicker) { + return ( +
+ + { this._fileUploadButton = e; }} + onChange={this._onFilesSelected.bind(this)} + /> +
+ ); } - return ( -
- - { this._fileUploadButton = e; }} - onChange={this._onFilesSelected.bind(this)} - /> -
- ); } render() { @@ -162,7 +163,8 @@ class UserInput extends Component { UserInput.propTypes = { onSubmit: PropTypes.func.isRequired, onFilesSelected: PropTypes.func.isRequired, - showEmoji: PropTypes.bool + showEmoji: PropTypes.bool, + showFilePicker: PropTypes.bool }; export default UserInput; From 50564cb736febbab262f488ecd51dbcd52c18394 Mon Sep 17 00:00:00 2001 From: Anmol Date: Thu, 22 Aug 2019 22:38:29 +0800 Subject: [PATCH 2/5] updated README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 4dcc49ca8..202b3fe56 100644 --- a/README.md +++ b/README.md @@ -100,7 +100,8 @@ Launcher props: | newMessagesCount | number | no | The number of new messages. If greater than 0, this number will be displayed in a badge on the launcher. Defaults to `0`. | | onFilesSelected | function([fileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList)) | no | Called after file has been selected from dialogue in chat window. | | onMessageWasSent | function([message](#message-objects)) | yes | Called when a message is sent, with a message object as an argument. | -| showEmoji | boolean | no | Whether or not to show the emoji button in the input bar. Defaults to `true`. +| showEmoji | boolean | no | Whether or not to show the emoji button in the input bar. Defaults to `true`. | +| showFilePicker | boolean | no | Whether or not to show the file picker button in the input bar. Defaults to `true`. ### Message Objects From c2cff5064ee32eb1c511bf05b0fe3f3ec6e64bc3 Mon Sep 17 00:00:00 2001 From: Anmol Date: Fri, 23 Aug 2019 16:34:38 +0800 Subject: [PATCH 3/5] Adding lib --- lib/assets/chat-icon.svg | 1 + lib/assets/close-icon.png | Bin 0 -> 340 bytes lib/assets/logo-no-bg.svg | 1 + lib/assets/paperclip-icon.png | Bin 0 -> 305 bytes lib/assets/sounds/notification.mp3 | Bin 0 -> 4219 bytes lib/components/ChatWindow.js | 88 ++++++++ lib/components/Header.js | 54 +++++ lib/components/Launcher.js | 138 +++++++++++++ lib/components/MessageList.js | 52 +++++ lib/components/Messages/EmojiMessage.js | 20 ++ lib/components/Messages/FileMessage.js | 29 +++ lib/components/Messages/TextMessage.js | 28 +++ lib/components/Messages/index.js | 75 +++++++ lib/components/UserInput.js | 228 +++++++++++++++++++++ lib/components/emoji-picker/EmojiPicker.js | 63 ++++++ lib/components/emoji-picker/emojiData.json | 1 + lib/components/icons/EmojiIcon.js | 63 ++++++ lib/components/icons/FileIcon.js | 65 ++++++ lib/components/icons/SendIcon.js | 64 ++++++ lib/components/popups/PopupWindow.js | 75 +++++++ lib/index.js | 14 ++ lib/messageTypes.js | 15 ++ lib/styles/chat-window.css | 55 +++++ lib/styles/emojiPicker.css | 38 ++++ lib/styles/header.css | 53 +++++ lib/styles/index.js | 15 ++ lib/styles/launcher.css | 82 ++++++++ lib/styles/message.css | 88 ++++++++ lib/styles/popup-window.css | 61 ++++++ lib/styles/user-input.css | 140 +++++++++++++ 30 files changed, 1606 insertions(+) create mode 100755 lib/assets/chat-icon.svg create mode 100644 lib/assets/close-icon.png create mode 100644 lib/assets/logo-no-bg.svg create mode 100644 lib/assets/paperclip-icon.png create mode 100644 lib/assets/sounds/notification.mp3 create mode 100644 lib/components/ChatWindow.js create mode 100644 lib/components/Header.js create mode 100644 lib/components/Launcher.js create mode 100644 lib/components/MessageList.js create mode 100644 lib/components/Messages/EmojiMessage.js create mode 100644 lib/components/Messages/FileMessage.js create mode 100644 lib/components/Messages/TextMessage.js create mode 100644 lib/components/Messages/index.js create mode 100644 lib/components/UserInput.js create mode 100644 lib/components/emoji-picker/EmojiPicker.js create mode 100644 lib/components/emoji-picker/emojiData.json create mode 100644 lib/components/icons/EmojiIcon.js create mode 100644 lib/components/icons/FileIcon.js create mode 100644 lib/components/icons/SendIcon.js create mode 100644 lib/components/popups/PopupWindow.js create mode 100644 lib/index.js create mode 100644 lib/messageTypes.js create mode 100644 lib/styles/chat-window.css create mode 100644 lib/styles/emojiPicker.css create mode 100644 lib/styles/header.css create mode 100644 lib/styles/index.js create mode 100644 lib/styles/launcher.css create mode 100644 lib/styles/message.css create mode 100644 lib/styles/popup-window.css create mode 100644 lib/styles/user-input.css diff --git a/lib/assets/chat-icon.svg b/lib/assets/chat-icon.svg new file mode 100755 index 000000000..6c384c7e4 --- /dev/null +++ b/lib/assets/chat-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lib/assets/close-icon.png b/lib/assets/close-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..bc100906d4e995c2d5b1b76978c76856f4fc6997 GIT binary patch literal 340 zcmeAS@N?(olHy`uVBq!ia0vp^3P3E+!3-ofcG&L&QY`6?zK%d%Klh(RRv@3TILO_J zVcj{Imq3ngfKQ04PiEnNqCp|U+-*ROd?i7C!3@ml>n1JaIMP7E)hzC zE03!(s0&^?|0k9Et?LoL9V=vu`olcH{an^LB{Ts5qmP~s literal 0 HcmV?d00001 diff --git a/lib/assets/logo-no-bg.svg b/lib/assets/logo-no-bg.svg new file mode 100644 index 000000000..0ec9da66a --- /dev/null +++ b/lib/assets/logo-no-bg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lib/assets/paperclip-icon.png b/lib/assets/paperclip-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..809fbeb20e4e0f252bb0c64e55b5530e13a8ac66 GIT binary patch literal 305 zcmeAS@N?(olHy`uVBq!ia0vp^0zfRp!3-o*pRS7lQY`6?zK#qG8~eHcB(ehejKx9j zP7LeL$-D$|ECYN(TzxVNkDj}F=*;CKXRjVUdj-e5=y1i=ppHW^E1EoyUY6h1HZL?>webSYoE3ES?hei`?J^H=j*=K5(A{@ z_;EO#`F`fu;3jc$`|i-l`2mIbMg%~S1vD41 zTY$a5o(0kuxV%8i0;3Bc3(SAZp6Tf6Vrgn`7ma%OcRUnWp9q`)fTeM;T;kUKJ@HTJ z|1Aikyq)k(7dL&sLiDmdkB0Gapxj@l;&SCf$KwZ@dt?mfwtK?u5)f}A`oo15agxHdHz0!!mEgQ%(}8O^iSvwC6i>dEDsTAH^;47s{xpIYazOmx+2 z1y%9;*9eobKm(5}db#5cd5PUlx{JQ`e%rs3uqIlBj6XM16?Yx$R7Q)o>+AC2ZYrJ#kL>L_Z{i|^usFR^u!Dw? zK@rI6V1$lFfd)lw-Bz#jr&yN>=Y4EwWD-h*$DIT z%uAjwH+{nNx1hiK@@jus5U)Oc8wYO4cYEvO#m!kS2#)!--C+GCHRWQSg_-LvJI%3X6$^Ir zl}S}8L=%W7ccc2w8)^!2ZY}e>wLc1J*;sMK>WP49vez)lcgA7&`pDF%VdRt0t9lSo z`8B0+fFf4He|kLeu>Wh8t4X!Zo&-#NMYWZ4=cL^J9*>Y7c2#{LGV85*|9(_#RQR#oz`Tzu)fSrvx`z{o4>`pmw&Ae2a_E>qZ-sNqkBsmISbL zJYS@Y0)jh-hMy15#pSsFW?uer@UQ^+a_>N#t=6;Hk0 z412@t+Qq6Vt}=iJp`A*yFE@IJ1O=4(lIh|#)8ya2v7?_nDHSkkr#JgP>l$L4MfyKM zkl7EDjmFl)6NkHAr`#ES|D`sqeIVq#%JjkBQgLNk&iXB{x?+R&pVjgW+bvDPK7T2h*S0Rg zAAa}Fs0WIakZ(_z8%Q*;G(`ZgXe^9_At3iFp*!J)fqsa$U2!rQgzPA2>s^|tSL`Yu zK{8-0{k=lC1TNsyO@#W#c!C`t2RfvNbbwZwy;*HNKu<3z>c|@b7}<(&`Xp`<7N}dQ zLrdVOY6}Z&T)0^*zjd)t6%LP8MOaE#^&pkKc-&ODHOPcvM8IUmvzl2M=e zN7aN%{8I_g;^{zf_O)s=n6@rM2M_N#oB~$IpqTSNE@+){1SvINe&Fd$bd<;s-yqT_ zpeliaJdENH1i(ysKy+=I&=jvWHoBtdF&%#4riZwvN;-^uV@!#~3?#MPSqN~W zPiH6}wMf56NlvLf;soeMtU8d^S| zqfVu4NVY>$7h{MCTrEBfL`*yx193!G(Xt6w>Dg;H51qNu7lB&U)sy+!`Js(=o)Lc; zfv|ou>8oSAV2k>fXN+xUESvjZ*Kyg!+-VMyGBmH3;(8+M8`m1!e%u$=FfD$jVYjBLBg?B6>7)L&#s3F(=? z4eaUu=nAPJg+vwWI*NBN+u6%D-}5UYpSDD3isC1>dI|p|>0Tg2=g6*qm(*WOC8C$} zOH|eWx|aZDPk`b~tKz`2_VGhL%6zEyj{|?|d--PcSM>P@zP5K`r_4w)Yx?f|dJ~-; z`EjB-$YRKkYvOv&_@bXAR4Xl@g;mmP+9xhJWgq}NLp3ly4p@z52#9~IuPX3rBwH!B%BaHI4UY%UWkRXsDylLp`s{^x-5T4 zSl#p}r*BL^P2egE4IvGoQa*)Bgor{M4TA?x#(?#8-;!IOE2rv_z@N4UbvRdYMQT7q zLzUL*gv7osAw3BA!$b?egO3fR!?}brOTtT1D2dHhq^30oGfxop8(243TiZgk$A5&p z>um6>SG`eoKXg;4c$-7x+D+v*3t5Ms;>-is9bRiJ_nyv7lgPQXd=_TOCmXykP5)}4 z1dZ^Z(6E!wLpJo%8UBq5v!lbv?CzT%TrQ;jym1CrqpK4!-#2)svybPt<=Zfg8l;96 z0TomoFjG6nk`WfZ-DN@A(Lg745+NUv9k>tF0vo;vdriNLA#+t1pF8-U)w6J$b=$-Y zud$q&8T;PsvRA_EA)7wOY;jjD)K^= z`?v?YDIl}oUefqzfCjSHBQ+Whl+bRbYHeo)NQS2C0GB3%%C}O&@)g%9H(lSnIxEzB z6&(-5RwS%5pBAUov}dq$_Tc2ym>^Y~YRrj=N|QS{B`M$fvqhFfSzGjJkt!xn=Ds|g ze&=D`3oH-@2AcjgzZs@fe;l}@V#-}&X=&SxmO_bX;`P0JT5{PK=jwU8bLbHk`(`ca z?8SjCmv?sgzrXP$yJuyXmv1J*=uAO}G>5j}Si$p0=Cwomego{Qrvb<70Vb%ls8 this.props.messageList.length; + if (isIncoming && isNew) { + this.playIncomingMessageSound(); + } + }; + + Launcher.prototype.playIncomingMessageSound = function playIncomingMessageSound() { + var audio = new Audio(_notification2.default); + audio.play(); + }; + + Launcher.prototype.handleClick = function handleClick() { + if (this.props.handleClick !== undefined) { + this.props.handleClick(); + } else { + this.setState({ + isOpen: !this.state.isOpen + }); + } + }; + + Launcher.prototype.render = function render() { + var isOpen = this.props.hasOwnProperty('isOpen') ? this.props.isOpen : this.state.isOpen; + var classList = ['sc-launcher', isOpen ? 'opened' : '']; + return _react2.default.createElement( + 'div', + { id: 'sc-launcher' }, + _react2.default.createElement( + 'div', + { className: classList.join(' '), onClick: this.handleClick.bind(this) }, + _react2.default.createElement(MessageCount, { count: this.props.newMessagesCount, isOpen: isOpen }), + _react2.default.createElement('img', { className: 'sc-open-icon', src: _closeIcon2.default }), + _react2.default.createElement('img', { className: 'sc-closed-icon', src: _logoNoBg2.default }) + ), + _react2.default.createElement(_ChatWindow2.default, { + messageList: this.props.messageList, + onUserInputSubmit: this.props.onMessageWasSent, + onFilesSelected: this.props.onFilesSelected, + agentProfile: this.props.agentProfile, + isOpen: isOpen, + onClose: this.handleClick.bind(this), + showEmoji: this.props.showEmoji, + showFilePicker: this.props.showFilePicker + }) + ); + }; + + return Launcher; +}(_react.Component); + +var MessageCount = function MessageCount(props) { + if (props.count === 0 || props.isOpen === true) { + return null; + } + return _react2.default.createElement( + 'div', + { className: 'sc-new-messages-count' }, + props.count + ); +}; + +Launcher.propTypes = process.env.NODE_ENV !== "production" ? { + onMessageWasReceived: _propTypes2.default.func, + onMessageWasSent: _propTypes2.default.func, + newMessagesCount: _propTypes2.default.number, + isOpen: _propTypes2.default.bool, + handleClick: _propTypes2.default.func, + messageList: _propTypes2.default.arrayOf(_propTypes2.default.object), + mute: _propTypes2.default.bool, + showEmoji: _propTypes2.default.bool, + showFilePicker: _propTypes2.default.bool +} : {}; + +Launcher.defaultProps = { + newMessagesCount: 0, + showEmoji: true, + showFilePicker: true +}; + +exports.default = Launcher; +module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/MessageList.js b/lib/components/MessageList.js new file mode 100644 index 000000000..cce84a6a6 --- /dev/null +++ b/lib/components/MessageList.js @@ -0,0 +1,52 @@ +'use strict'; + +exports.__esModule = true; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _Messages = require('./Messages'); + +var _Messages2 = _interopRequireDefault(_Messages); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var MessageList = function (_Component) { + _inherits(MessageList, _Component); + + function MessageList() { + _classCallCheck(this, MessageList); + + return _possibleConstructorReturn(this, _Component.apply(this, arguments)); + } + + MessageList.prototype.componentDidUpdate = function componentDidUpdate(_prevProps, _prevState) { + this.scrollList.scrollTop = this.scrollList.scrollHeight; + }; + + MessageList.prototype.render = function render() { + var _this2 = this; + + return _react2.default.createElement( + 'div', + { className: 'sc-message-list', ref: function ref(el) { + return _this2.scrollList = el; + } }, + this.props.messages.map(function (message, i) { + return _react2.default.createElement(_Messages2.default, { message: message, key: i }); + }) + ); + }; + + return MessageList; +}(_react.Component); + +exports.default = MessageList; +module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/Messages/EmojiMessage.js b/lib/components/Messages/EmojiMessage.js new file mode 100644 index 000000000..ba8d44cf5 --- /dev/null +++ b/lib/components/Messages/EmojiMessage.js @@ -0,0 +1,20 @@ +"use strict"; + +exports.__esModule = true; + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var EmojiMessage = function EmojiMessage(props) { + return _react2.default.createElement( + "div", + { className: "sc-message--emoji" }, + props.data.emoji + ); +}; + +exports.default = EmojiMessage; +module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/components/Messages/FileMessage.js b/lib/components/Messages/FileMessage.js new file mode 100644 index 000000000..a902462c1 --- /dev/null +++ b/lib/components/Messages/FileMessage.js @@ -0,0 +1,29 @@ +'use strict'; + +exports.__esModule = true; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _FileIcon = require('./../icons/FileIcon'); + +var _FileIcon2 = _interopRequireDefault(_FileIcon); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var FileMessage = function FileMessage(props) { + return _react2.default.createElement( + 'a', + { className: 'sc-message--file', href: props.data.url, download: props.data.fileName }, + _react2.default.createElement(_FileIcon2.default, null), + _react2.default.createElement( + 'p', + null, + props.data.fileName + ) + ); +}; + +exports.default = FileMessage; +module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/Messages/TextMessage.js b/lib/components/Messages/TextMessage.js new file mode 100644 index 000000000..02f74e19e --- /dev/null +++ b/lib/components/Messages/TextMessage.js @@ -0,0 +1,28 @@ +'use strict'; + +exports.__esModule = true; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _reactLinkify = require('react-linkify'); + +var _reactLinkify2 = _interopRequireDefault(_reactLinkify); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var TextMessage = function TextMessage(props) { + return _react2.default.createElement( + 'div', + { className: 'sc-message--text' }, + _react2.default.createElement( + _reactLinkify2.default, + { properties: { target: '_blank' } }, + props.data.text + ) + ); +}; + +exports.default = TextMessage; +module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/Messages/index.js b/lib/components/Messages/index.js new file mode 100644 index 000000000..4a62575d7 --- /dev/null +++ b/lib/components/Messages/index.js @@ -0,0 +1,75 @@ +'use strict'; + +exports.__esModule = true; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _TextMessage = require('./TextMessage'); + +var _TextMessage2 = _interopRequireDefault(_TextMessage); + +var _EmojiMessage = require('./EmojiMessage'); + +var _EmojiMessage2 = _interopRequireDefault(_EmojiMessage); + +var _FileMessage = require('./FileMessage'); + +var _FileMessage2 = _interopRequireDefault(_FileMessage); + +var _chatIcon = require('./../../assets/chat-icon.svg'); + +var _chatIcon2 = _interopRequireDefault(_chatIcon); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var Message = function (_Component) { + _inherits(Message, _Component); + + function Message() { + _classCallCheck(this, Message); + + return _possibleConstructorReturn(this, _Component.apply(this, arguments)); + } + + Message.prototype._renderMessageOfType = function _renderMessageOfType(type) { + switch (type) { + case 'text': + return _react2.default.createElement(_TextMessage2.default, this.props.message); + case 'emoji': + return _react2.default.createElement(_EmojiMessage2.default, this.props.message); + case 'file': + return _react2.default.createElement(_FileMessage2.default, this.props.message); + default: + console.error('Attempting to load message with unsupported file type \'' + type + '\''); + } + }; + + Message.prototype.render = function render() { + var contentClassList = ['sc-message--content', this.props.message.author === 'me' ? 'sent' : 'received']; + return _react2.default.createElement( + 'div', + { className: 'sc-message' }, + _react2.default.createElement( + 'div', + { className: contentClassList.join(' ') }, + _react2.default.createElement('div', { className: 'sc-message--avatar', style: { + backgroundImage: 'url(' + _chatIcon2.default + ')' + } }), + this._renderMessageOfType(this.props.message.type) + ) + ); + }; + + return Message; +}(_react.Component); + +exports.default = Message; +module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/UserInput.js b/lib/components/UserInput.js new file mode 100644 index 000000000..10bf998af --- /dev/null +++ b/lib/components/UserInput.js @@ -0,0 +1,228 @@ +'use strict'; + +exports.__esModule = true; + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _SendIcon = require('./icons/SendIcon'); + +var _SendIcon2 = _interopRequireDefault(_SendIcon); + +var _FileIcon = require('./icons/FileIcon'); + +var _FileIcon2 = _interopRequireDefault(_FileIcon); + +var _EmojiIcon = require('./icons/EmojiIcon'); + +var _EmojiIcon2 = _interopRequireDefault(_EmojiIcon); + +var _PopupWindow = require('./popups/PopupWindow'); + +var _PopupWindow2 = _interopRequireDefault(_PopupWindow); + +var _EmojiPicker = require('./emoji-picker/EmojiPicker'); + +var _EmojiPicker2 = _interopRequireDefault(_EmojiPicker); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var UserInput = function (_Component) { + _inherits(UserInput, _Component); + + function UserInput() { + _classCallCheck(this, UserInput); + + var _this = _possibleConstructorReturn(this, _Component.call(this)); + + _this.toggleEmojiPicker = function (e) { + e.preventDefault(); + if (!_this.state.emojiPickerIsOpen) { + _this.setState({ emojiPickerIsOpen: true }); + } + }; + + _this.closeEmojiPicker = function (e) { + if (_this.emojiPickerButton.contains(e.target)) { + e.stopPropagation(); + e.preventDefault(); + } + _this.setState({ emojiPickerIsOpen: false }); + }; + + _this._handleEmojiPicked = function (emoji) { + _this.setState({ emojiPickerIsOpen: false }); + if (_this.state.inputHasText) { + _this.userInput.innerHTML += emoji; + } else { + _this.props.onSubmit({ + author: 'me', + type: 'emoji', + data: { emoji: emoji } + }); + } + }; + + _this.handleEmojiFilterChange = function (event) { + var emojiFilter = event.target.value; + _this.setState({ emojiFilter: emojiFilter }); + }; + + _this._renderEmojiPopup = function () { + return _react2.default.createElement( + _PopupWindow2.default, + { + isOpen: _this.state.emojiPickerIsOpen, + onClickedOutside: _this.closeEmojiPicker, + onInputChange: _this.handleEmojiFilterChange + }, + _react2.default.createElement(_EmojiPicker2.default, { + onEmojiPicked: _this._handleEmojiPicked, + filter: _this.state.emojiFilter + }) + ); + }; + + _this.state = { + inputActive: false, + inputHasText: false, + emojiPickerIsOpen: false, + emojiFilter: '' + }; + return _this; + } + + UserInput.prototype.componentDidMount = function componentDidMount() { + this.emojiPickerButton = document.querySelector('#sc-emoji-picker-button'); + }; + + UserInput.prototype.handleKeyDown = function handleKeyDown(event) { + if (event.keyCode === 13 && !event.shiftKey) { + return this._submitText(event); + } + }; + + UserInput.prototype.handleKeyUp = function handleKeyUp(event) { + var inputHasText = event.target.innerHTML.length !== 0 && event.target.innerText !== '\n'; + this.setState({ inputHasText: inputHasText }); + }; + + UserInput.prototype._showFilePicker = function _showFilePicker() { + this._fileUploadButton.click(); + }; + + UserInput.prototype._submitText = function _submitText(event) { + event.preventDefault(); + var text = this.userInput.textContent; + if (text && text.length > 0) { + this.props.onSubmit({ + author: 'me', + type: 'text', + data: { text: text } + }); + this.userInput.innerHTML = ''; + } + }; + + UserInput.prototype._onFilesSelected = function _onFilesSelected(event) { + if (event.target.files && event.target.files.length > 0) { + this.props.onFilesSelected(event.target.files); + } + }; + + UserInput.prototype._renderSendOrFileIcon = function _renderSendOrFileIcon() { + var _this2 = this; + + if (this.state.inputHasText) { + return _react2.default.createElement( + 'div', + { className: 'sc-user-input--button' }, + _react2.default.createElement(_SendIcon2.default, { onClick: this._submitText.bind(this) }) + ); + } else if (this.props.showFilePicker) { + return _react2.default.createElement( + 'div', + { className: 'sc-user-input--button' }, + _react2.default.createElement(_FileIcon2.default, { onClick: this._showFilePicker.bind(this) }), + _react2.default.createElement('input', { + type: 'file', + name: 'files[]', + multiple: true, + ref: function ref(e) { + _this2._fileUploadButton = e; + }, + onChange: this._onFilesSelected.bind(this) + }) + ); + } + }; + + UserInput.prototype.render = function render() { + var _this3 = this; + + var _state = this.state, + emojiPickerIsOpen = _state.emojiPickerIsOpen, + inputActive = _state.inputActive; + + return _react2.default.createElement( + 'form', + { className: 'sc-user-input ' + (inputActive ? 'active' : '') }, + _react2.default.createElement('div', { + role: 'button', + tabIndex: '0', + onFocus: function onFocus() { + _this3.setState({ inputActive: true }); + }, + onBlur: function onBlur() { + _this3.setState({ inputActive: false }); + }, + ref: function ref(e) { + _this3.userInput = e; + }, + onKeyDown: this.handleKeyDown.bind(this), + onKeyUp: this.handleKeyUp.bind(this), + contentEditable: 'true', + placeholder: 'Write a reply...', + className: 'sc-user-input--text' + }), + _react2.default.createElement( + 'div', + { className: 'sc-user-input--buttons' }, + _react2.default.createElement('div', { className: 'sc-user-input--button' }), + _react2.default.createElement( + 'div', + { className: 'sc-user-input--button' }, + this.props.showEmoji && _react2.default.createElement(_EmojiIcon2.default, { + onClick: this.toggleEmojiPicker, + isActive: emojiPickerIsOpen, + tooltip: this._renderEmojiPopup() + }) + ), + this._renderSendOrFileIcon() + ) + ); + }; + + return UserInput; +}(_react.Component); + +UserInput.propTypes = process.env.NODE_ENV !== "production" ? { + onSubmit: _propTypes2.default.func.isRequired, + onFilesSelected: _propTypes2.default.func.isRequired, + showEmoji: _propTypes2.default.bool, + showFilePicker: _propTypes2.default.bool +} : {}; + +exports.default = UserInput; +module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/emoji-picker/EmojiPicker.js b/lib/components/emoji-picker/EmojiPicker.js new file mode 100644 index 000000000..219f984e5 --- /dev/null +++ b/lib/components/emoji-picker/EmojiPicker.js @@ -0,0 +1,63 @@ +'use strict'; + +exports.__esModule = true; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _emojiJs = require('emoji-js'); + +var _emojiJs2 = _interopRequireDefault(_emojiJs); + +var _emojiData = require('./emojiData'); + +var _emojiData2 = _interopRequireDefault(_emojiData); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var emojiConvertor = new _emojiJs2.default(); +emojiConvertor.init_env(); + +var EmojiPicker = function EmojiPicker(_ref) { + var onEmojiPicked = _ref.onEmojiPicked, + filter = _ref.filter; + return _react2.default.createElement( + 'div', + { className: 'sc-emoji-picker' }, + _emojiData2.default.map(function (category) { + var filteredEmojis = category.emojis.filter(function (_ref2) { + var name = _ref2.name; + return name.includes(filter); + }); + return _react2.default.createElement( + 'div', + { className: 'sc-emoji-picker--category', key: category.name }, + filteredEmojis.length > 0 && _react2.default.createElement( + 'div', + { className: 'sc-emoji-picker--category-title' }, + category.name + ), + filteredEmojis.map(function (_ref3) { + var char = _ref3.char, + _name = _ref3._name; + + return _react2.default.createElement( + 'span', + { + key: char, + className: 'sc-emoji-picker--emoji', + onClick: function onClick() { + return onEmojiPicked(char); + } + }, + char + ); + }) + ); + }) + ); +}; + +exports.default = EmojiPicker; +module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/emoji-picker/emojiData.json b/lib/components/emoji-picker/emojiData.json new file mode 100644 index 000000000..409c41b90 --- /dev/null +++ b/lib/components/emoji-picker/emojiData.json @@ -0,0 +1 @@ +[{"name":"People","emojis":[{"no":6,"code":"1F604","char":"๐Ÿ˜„","name":"grinning face with smiling eyes"},{"no":5,"code":"1F603","char":"๐Ÿ˜ƒ","name":"grinning face with big eyes"},{"no":1,"code":"1F600","char":"๐Ÿ˜€","name":"grinning face"},{"no":10,"code":"1F60A","char":"๐Ÿ˜Š","name":"smiling face with smiling eyes"},{"no":9,"code":"1F609","char":"๐Ÿ˜‰","name":"winking face"},{"no":13,"code":"1F60D","char":"๐Ÿ˜","name":"smiling face with heart-eyes"},{"no":14,"code":"1F618","char":"๐Ÿ˜˜","name":"face blowing a kiss"},{"no":17,"code":"1F61A","char":"๐Ÿ˜š","name":"kissing face with closed eyes"},{"no":15,"code":"1F617","char":"๐Ÿ˜—","name":"kissing face"},{"no":16,"code":"1F619","char":"๐Ÿ˜™","name":"kissing face with smiling eyes"},{"no":39,"code":"1F61C","char":"๐Ÿ˜œ","name":"winking face with tongue"},{"no":40,"code":"1F61D","char":"๐Ÿ˜","name":"squinting face with tongue"},{"no":38,"code":"1F61B","char":"๐Ÿ˜›","name":"face with tongue"},{"no":65,"code":"1F633","char":"๐Ÿ˜ณ","name":"flushed face"},{"no":2,"code":"1F601","char":"๐Ÿ˜","name":"beaming face with smiling eyes"},{"no":44,"code":"1F614","char":"๐Ÿ˜”","name":"pensive face"},{"no":37,"code":"1F60C","char":"๐Ÿ˜Œ","name":"relieved face"},{"no":42,"code":"1F612","char":"๐Ÿ˜’","name":"unamused face"},{"no":52,"code":"1F61E","char":"๐Ÿ˜ž","name":"disappointed face"},{"no":29,"code":"1F623","char":"๐Ÿ˜ฃ","name":"persevering face"},{"no":55,"code":"1F622","char":"๐Ÿ˜ข","name":"crying face"},{"no":3,"code":"1F602","char":"๐Ÿ˜‚","name":"face with tears of joy"},{"no":56,"code":"1F62D","char":"๐Ÿ˜ญ","name":"loudly crying face"},{"no":34,"code":"1F62A","char":"๐Ÿ˜ช","name":"sleepy face"},{"no":30,"code":"1F625","char":"๐Ÿ˜ฅ","name":"sad but relieved face"},{"no":63,"code":"1F630","char":"๐Ÿ˜ฐ","name":"anxious face with sweat"},{"no":7,"code":"1F605","char":"๐Ÿ˜…","name":"grinning face with sweat"},{"no":43,"code":"1F613","char":"๐Ÿ˜“","name":"downcast face with sweat"},{"no":60,"code":"1F629","char":"๐Ÿ˜ฉ","name":"weary face"},{"no":35,"code":"1F62B","char":"๐Ÿ˜ซ","name":"tired face"},{"no":59,"code":"1F628","char":"๐Ÿ˜จ","name":"fearful face"},{"no":64,"code":"1F631","char":"๐Ÿ˜ฑ","name":"face screaming in fear"},{"no":69,"code":"1F620","char":"๐Ÿ˜ ","name":"angry face"},{"no":68,"code":"1F621","char":"๐Ÿ˜ก","name":"pouting face"},{"no":54,"code":"1F624","char":"๐Ÿ˜ค","name":"face with steam from nose"},{"no":51,"code":"1F616","char":"๐Ÿ˜–","name":"confounded face"},{"no":8,"code":"1F606","char":"๐Ÿ˜†","name":"grinning squinting face"},{"no":11,"code":"1F60B","char":"๐Ÿ˜‹","name":"face savoring food"},{"no":71,"code":"1F637","char":"๐Ÿ˜ท","name":"face with medical mask"},{"no":12,"code":"1F60E","char":"๐Ÿ˜Ž","name":"smiling face with sunglasses"},{"no":36,"code":"1F634","char":"๐Ÿ˜ด","name":"sleeping face"},{"no":67,"code":"1F635","char":"๐Ÿ˜ต","name":"dizzy face"},{"no":48,"code":"1F632","char":"๐Ÿ˜ฒ","name":"astonished face"},{"no":53,"code":"1F61F","char":"๐Ÿ˜Ÿ","name":"worried face"},{"no":57,"code":"1F626","char":"๐Ÿ˜ฆ","name":"frowning face with open mouth"},{"no":58,"code":"1F627","char":"๐Ÿ˜ง","name":"anguished face"},{"no":86,"code":"1F47F","char":"๐Ÿ‘ฟ","name":"angry face with horns"},{"no":31,"code":"1F62E","char":"๐Ÿ˜ฎ","name":"face with open mouth"},{"no":62,"code":"1F62C","char":"๐Ÿ˜ฌ","name":"grimacing face"},{"no":24,"code":"1F610","char":"๐Ÿ˜","name":"neutral face"},{"no":45,"code":"1F615","char":"๐Ÿ˜•","name":"confused face"},{"no":33,"code":"1F62F","char":"๐Ÿ˜ฏ","name":"hushed face"},{"no":28,"code":"1F60F","char":"๐Ÿ˜","name":"smirking face"},{"no":25,"code":"1F611","char":"๐Ÿ˜‘","name":"expressionless face"},{"no":462,"code":"1F472","char":"๐Ÿ‘ฒ","name":"man with Chinese cap"},{"no":444,"code":"1F473","char":"๐Ÿ‘ณ","name":"person wearing turban"},{"no":360,"code":"1F46E","char":"๐Ÿ‘ฎ","name":"police officer"},{"no":414,"code":"1F477","char":"๐Ÿ‘ท","name":"construction worker"},{"no":396,"code":"1F482","char":"๐Ÿ’‚","name":"guard"},{"no":108,"code":"1F476","char":"๐Ÿ‘ถ","name":"baby"},{"no":120,"code":"1F466","char":"๐Ÿ‘ฆ","name":"boy"},{"no":126,"code":"1F467","char":"๐Ÿ‘ง","name":"girl"},{"no":138,"code":"1F468","char":"๐Ÿ‘จ","name":"man"},{"no":144,"code":"1F469","char":"๐Ÿ‘ฉ","name":"woman"},{"no":156,"code":"1F474","char":"๐Ÿ‘ด","name":"old man"},{"no":162,"code":"1F475","char":"๐Ÿ‘ต","name":"old woman"},{"no":480,"code":"1F471","char":"๐Ÿ‘ฑ","name":"blond-haired person"},{"no":522,"code":"1F47C","char":"๐Ÿ‘ผ","name":"baby angel"},{"no":438,"code":"1F478","char":"๐Ÿ‘ธ","name":"princess"},{"no":96,"code":"1F63A","char":"๐Ÿ˜บ","name":"grinning cat face"},{"no":97,"code":"1F638","char":"๐Ÿ˜ธ","name":"grinning cat face with smiling eyes"},{"no":99,"code":"1F63B","char":"๐Ÿ˜ป","name":"smiling cat face with heart-eyes"},{"no":101,"code":"1F63D","char":"๐Ÿ˜ฝ","name":"kissing cat face"},{"no":100,"code":"1F63C","char":"๐Ÿ˜ผ","name":"cat face with wry smile"},{"no":102,"code":"1F640","char":"๐Ÿ™€","name":"weary cat face"},{"no":103,"code":"1F63F","char":"๐Ÿ˜ฟ","name":"crying cat face"},{"no":98,"code":"1F639","char":"๐Ÿ˜น","name":"cat face with tears of joy"},{"no":104,"code":"1F63E","char":"๐Ÿ˜พ","name":"pouting cat face"},{"no":87,"code":"1F479","char":"๐Ÿ‘น","name":"ogre"},{"no":88,"code":"1F47A","char":"๐Ÿ‘บ","name":"goblin"},{"no":105,"code":"1F648","char":"๐Ÿ™ˆ","name":"see-no-evil monkey"},{"no":106,"code":"1F649","char":"๐Ÿ™‰","name":"hear-no-evil monkey"},{"no":107,"code":"1F64A","char":"๐Ÿ™Š","name":"speak-no-evil monkey"},{"no":89,"code":"1F480","char":"๐Ÿ’€","name":"skull"},{"no":92,"code":"1F47D","char":"๐Ÿ‘ฝ","name":"alien"},{"no":95,"code":"1F4A9","char":"๐Ÿ’ฉ","name":"pile of poo"},{"no":1927,"code":"1F525","char":"๐Ÿ”ฅ","name":"fire"},{"no":1934,"code":"2728","char":"โœจ","name":"sparkles"},{"no":1902,"code":"1F31F","char":"๐ŸŒŸ","name":"glowing star"},{"no":1469,"code":"1F4AB","char":"๐Ÿ’ซ","name":"dizzy"},{"no":1466,"code":"1F4A5","char":"๐Ÿ’ฅ","name":"collision"},{"no":1464,"code":"1F4A2","char":"๐Ÿ’ข","name":"anger symbol"},{"no":1467,"code":"1F4A6","char":"๐Ÿ’ฆ","name":"sweat droplets"},{"no":1928,"code":"1F4A7","char":"๐Ÿ’ง","name":"droplet"},{"no":1463,"code":"1F4A4","char":"๐Ÿ’ค","name":"zzz"},{"no":1468,"code":"1F4A8","char":"๐Ÿ’จ","name":"dashing away"},{"no":1425,"code":"1F442","char":"๐Ÿ‘‚","name":"ear"},{"no":1438,"code":"1F440","char":"๐Ÿ‘€","name":"eyes"},{"no":1431,"code":"1F443","char":"๐Ÿ‘ƒ","name":"nose"},{"no":1442,"code":"1F445","char":"๐Ÿ‘…","name":"tongue"},{"no":1443,"code":"1F444","char":"๐Ÿ‘„","name":"mouth"},{"no":1328,"code":"1F44D","char":"๐Ÿ‘","name":"thumbs up"},{"no":1334,"code":"1F44E","char":"๐Ÿ‘Ž","name":"thumbs down"},{"no":1322,"code":"1F44C","char":"๐Ÿ‘Œ","name":"OK hand"},{"no":1346,"code":"1F44A","char":"๐Ÿ‘Š","name":"oncoming fist"},{"no":1340,"code":"270A","char":"โœŠ","name":"raised fist"},{"no":1370,"code":"1F44B","char":"๐Ÿ‘‹","name":"waving hand"},{"no":1316,"code":"270B","char":"โœ‹","name":"raised hand"},{"no":1394,"code":"1F450","char":"๐Ÿ‘","name":"open hands"},{"no":1262,"code":"1F446","char":"๐Ÿ‘†","name":"backhand index pointing up"},{"no":1274,"code":"1F447","char":"๐Ÿ‘‡","name":"backhand index pointing down"},{"no":1250,"code":"1F449","char":"๐Ÿ‘‰","name":"backhand index pointing right"},{"no":1244,"code":"1F448","char":"๐Ÿ‘ˆ","name":"backhand index pointing left"},{"no":1400,"code":"1F64C","char":"๐Ÿ™Œ","name":"raising hands"},{"no":1412,"code":"1F64F","char":"๐Ÿ™","name":"folded hands"},{"no":1388,"code":"1F44F","char":"๐Ÿ‘","name":"clapping hands"},{"no":1238,"code":"1F4AA","char":"๐Ÿ’ช","name":"flexed biceps"},{"no":834,"code":"1F6B6","char":"๐Ÿšถ","name":"person walking"},{"no":852,"code":"1F3C3","char":"๐Ÿƒ","name":"person running"},{"no":870,"code":"1F483","char":"๐Ÿ’ƒ","name":"woman dancing"},{"no":1195,"code":"1F46B","char":"๐Ÿ‘ซ","name":"man and woman holding hands"},{"no":1206,"code":"1F46A","char":"๐Ÿ‘ช","name":"family"},{"no":1198,"code":"1F48F","char":"๐Ÿ’","name":"kiss"},{"no":1202,"code":"1F491","char":"๐Ÿ’‘","name":"couple with heart"},{"no":882,"code":"1F46F","char":"๐Ÿ‘ฏ","name":"people with bunny ears"},{"no":690,"code":"1F646","char":"๐Ÿ™†","name":"person gesturing OK"},{"no":672,"code":"1F645","char":"๐Ÿ™…","name":"person gesturing NO"},{"no":708,"code":"1F481","char":"๐Ÿ’","name":"person tipping hand"},{"no":726,"code":"1F64B","char":"๐Ÿ™‹","name":"person raising hand"},{"no":798,"code":"1F486","char":"๐Ÿ’†","name":"person getting massage"},{"no":816,"code":"1F487","char":"๐Ÿ’‡","name":"person getting haircut"},{"no":1419,"code":"1F485","char":"๐Ÿ’…","name":"nail polish"},{"no":504,"code":"1F470","char":"๐Ÿ‘ฐ","name":"bride with veil"},{"no":654,"code":"1F64E","char":"๐Ÿ™Ž","name":"person pouting"},{"no":636,"code":"1F64D","char":"๐Ÿ™","name":"person frowning"},{"no":744,"code":"1F647","char":"๐Ÿ™‡","name":"person bowing"},{"no":1500,"code":"1F3A9","char":"๐ŸŽฉ","name":"top hat"},{"no":1498,"code":"1F451","char":"๐Ÿ‘‘","name":"crown"},{"no":1499,"code":"1F452","char":"๐Ÿ‘’","name":"womanโ€™s hat"},{"no":1494,"code":"1F45F","char":"๐Ÿ‘Ÿ","name":"running shoe"},{"no":1493,"code":"1F45E","char":"๐Ÿ‘ž","name":"manโ€™s shoe"},{"no":1496,"code":"1F461","char":"๐Ÿ‘ก","name":"womanโ€™s sandal"},{"no":1495,"code":"1F460","char":"๐Ÿ‘ ","name":"high-heeled shoe"},{"no":1497,"code":"1F462","char":"๐Ÿ‘ข","name":"womanโ€™s boot"},{"no":1478,"code":"1F455","char":"๐Ÿ‘•","name":"t-shirt"},{"no":1477,"code":"1F454","char":"๐Ÿ‘”","name":"necktie"},{"no":1487,"code":"1F45A","char":"๐Ÿ‘š","name":"womanโ€™s clothes"},{"no":1484,"code":"1F457","char":"๐Ÿ‘—","name":"dress"},{"no":1976,"code":"1F3BD","char":"๐ŸŽฝ","name":"running shirt"},{"no":1479,"code":"1F456","char":"๐Ÿ‘–","name":"jeans"},{"no":1485,"code":"1F458","char":"๐Ÿ‘˜","name":"kimono"},{"no":1486,"code":"1F459","char":"๐Ÿ‘™","name":"bikini"},{"no":2097,"code":"1F4BC","char":"๐Ÿ’ผ","name":"briefcase"},{"no":1489,"code":"1F45C","char":"๐Ÿ‘œ","name":"handbag"},{"no":1490,"code":"1F45D","char":"๐Ÿ‘","name":"clutch bag"},{"no":1488,"code":"1F45B","char":"๐Ÿ‘›","name":"purse"},{"no":1475,"code":"1F453","char":"๐Ÿ‘“","name":"glasses"},{"no":1944,"code":"1F380","char":"๐ŸŽ€","name":"ribbon"},{"no":1918,"code":"1F302","char":"๐ŸŒ‚","name":"closed umbrella"},{"no":1505,"code":"1F484","char":"๐Ÿ’„","name":"lipstick"},{"no":1454,"code":"1F49B","char":"๐Ÿ’›","name":"yellow heart"},{"no":1452,"code":"1F499","char":"๐Ÿ’™","name":"blue heart"},{"no":1456,"code":"1F49C","char":"๐Ÿ’œ","name":"purple heart"},{"no":1453,"code":"1F49A","char":"๐Ÿ’š","name":"green heart"},{"no":1448,"code":"1F494","char":"๐Ÿ’”","name":"broken heart"},{"no":1451,"code":"1F497","char":"๐Ÿ’—","name":"growing heart"},{"no":1447,"code":"1F493","char":"๐Ÿ’“","name":"beating heart"},{"no":1449,"code":"1F495","char":"๐Ÿ’•","name":"two hearts"},{"no":1450,"code":"1F496","char":"๐Ÿ’–","name":"sparkling heart"},{"no":1459,"code":"1F49E","char":"๐Ÿ’ž","name":"revolving hearts"},{"no":1445,"code":"1F498","char":"๐Ÿ’˜","name":"heart with arrow"},{"no":1462,"code":"1F48C","char":"๐Ÿ’Œ","name":"love letter"},{"no":1444,"code":"1F48B","char":"๐Ÿ’‹","name":"kiss mark"},{"no":1506,"code":"1F48D","char":"๐Ÿ’","name":"ring"},{"no":1507,"code":"1F48E","char":"๐Ÿ’Ž","name":"gem stone"},{"no":958,"code":"1F464","char":"๐Ÿ‘ค","name":"bust in silhouette"},{"no":1470,"code":"1F4AC","char":"๐Ÿ’ฌ","name":"speech balloon"},{"no":1437,"code":"1F463","char":"๐Ÿ‘ฃ","name":"footprints"}]},{"name":"Nature","emojis":[{"no":1511,"code":"1F436","char":"๐Ÿถ","name":"dog face"},{"no":1514,"code":"1F43A","char":"๐Ÿบ","name":"wolf face"},{"no":1516,"code":"1F431","char":"๐Ÿฑ","name":"cat face"},{"no":1543,"code":"1F42D","char":"๐Ÿญ","name":"mouse face"},{"no":1546,"code":"1F439","char":"๐Ÿน","name":"hamster face"},{"no":1547,"code":"1F430","char":"๐Ÿฐ","name":"rabbit face"},{"no":1568,"code":"1F438","char":"๐Ÿธ","name":"frog face"},{"no":1519,"code":"1F42F","char":"๐Ÿฏ","name":"tiger face"},{"no":1553,"code":"1F428","char":"๐Ÿจ","name":"koala"},{"no":1552,"code":"1F43B","char":"๐Ÿป","name":"bear face"},{"no":1531,"code":"1F437","char":"๐Ÿท","name":"pig face"},{"no":1534,"code":"1F43D","char":"๐Ÿฝ","name":"pig nose"},{"no":1527,"code":"1F42E","char":"๐Ÿฎ","name":"cow face"},{"no":1533,"code":"1F417","char":"๐Ÿ—","name":"boar"},{"no":1508,"code":"1F435","char":"๐Ÿต","name":"monkey face"},{"no":1509,"code":"1F412","char":"๐Ÿ’","name":"monkey"},{"no":1522,"code":"1F434","char":"๐Ÿด","name":"horse face"},{"no":1536,"code":"1F411","char":"๐Ÿ‘","name":"ewe"},{"no":1541,"code":"1F418","char":"๐Ÿ˜","name":"elephant"},{"no":1554,"code":"1F43C","char":"๐Ÿผ","name":"panda face"},{"no":1563,"code":"1F427","char":"๐Ÿง","name":"penguin"},{"no":1562,"code":"1F426","char":"๐Ÿฆ","name":"bird"},{"no":1560,"code":"1F424","char":"๐Ÿค","name":"baby chick"},{"no":1561,"code":"1F425","char":"๐Ÿฅ","name":"front-facing baby chick"},{"no":1559,"code":"1F423","char":"๐Ÿฃ","name":"hatching chick"},{"no":1557,"code":"1F414","char":"๐Ÿ”","name":"chicken"},{"no":1572,"code":"1F40D","char":"๐Ÿ","name":"snake"},{"no":1570,"code":"1F422","char":"๐Ÿข","name":"turtle"},{"no":1591,"code":"1F41B","char":"๐Ÿ›","name":"bug"},{"no":1593,"code":"1F41D","char":"๐Ÿ","name":"honeybee"},{"no":1592,"code":"1F41C","char":"๐Ÿœ","name":"ant"},{"no":1594,"code":"1F41E","char":"๐Ÿž","name":"lady beetle"},{"no":1589,"code":"1F40C","char":"๐ŸŒ","name":"snail"},{"no":1584,"code":"1F419","char":"๐Ÿ™","name":"octopus"},{"no":1585,"code":"1F41A","char":"๐Ÿš","name":"spiral shell"},{"no":1581,"code":"1F420","char":"๐Ÿ ","name":"tropical fish"},{"no":1580,"code":"1F41F","char":"๐ŸŸ","name":"fish"},{"no":1579,"code":"1F42C","char":"๐Ÿฌ","name":"dolphin"},{"no":1577,"code":"1F433","char":"๐Ÿณ","name":"spouting whale"},{"no":1523,"code":"1F40E","char":"๐ŸŽ","name":"horse"},{"no":1573,"code":"1F432","char":"๐Ÿฒ","name":"dragon face"},{"no":1582,"code":"1F421","char":"๐Ÿก","name":"blowfish"},{"no":1539,"code":"1F42B","char":"๐Ÿซ","name":"two-hump camel"},{"no":1513,"code":"1F429","char":"๐Ÿฉ","name":"poodle"},{"no":1555,"code":"1F43E","char":"๐Ÿพ","name":"paw prints"},{"no":1599,"code":"1F490","char":"๐Ÿ’","name":"bouquet"},{"no":1600,"code":"1F338","char":"๐ŸŒธ","name":"cherry blossom"},{"no":1608,"code":"1F337","char":"๐ŸŒท","name":"tulip"},{"no":1617,"code":"1F340","char":"๐Ÿ€","name":"four leaf clover"},{"no":1603,"code":"1F339","char":"๐ŸŒน","name":"rose"},{"no":1606,"code":"1F33B","char":"๐ŸŒป","name":"sunflower"},{"no":1605,"code":"1F33A","char":"๐ŸŒบ","name":"hibiscus"},{"no":1618,"code":"1F341","char":"๐Ÿ","name":"maple leaf"},{"no":1620,"code":"1F343","char":"๐Ÿƒ","name":"leaf fluttering in wind"},{"no":1619,"code":"1F342","char":"๐Ÿ‚","name":"fallen leaf"},{"no":1615,"code":"1F33F","char":"๐ŸŒฟ","name":"herb"},{"no":1614,"code":"1F33E","char":"๐ŸŒพ","name":"sheaf of rice"},{"no":1645,"code":"1F344","char":"๐Ÿ„","name":"mushroom"},{"no":1613,"code":"1F335","char":"๐ŸŒต","name":"cactus"},{"no":1612,"code":"1F334","char":"๐ŸŒด","name":"palm tree"},{"no":1647,"code":"1F330","char":"๐ŸŒฐ","name":"chestnut"},{"no":1609,"code":"1F331","char":"๐ŸŒฑ","name":"seedling"},{"no":1607,"code":"1F33C","char":"๐ŸŒผ","name":"blossom"},{"no":1885,"code":"1F311","char":"๐ŸŒ‘","name":"new moon"},{"no":1887,"code":"1F313","char":"๐ŸŒ“","name":"first quarter moon"},{"no":1888,"code":"1F314","char":"๐ŸŒ”","name":"waxing gibbous moon"},{"no":1889,"code":"1F315","char":"๐ŸŒ•","name":"full moon"},{"no":1895,"code":"1F31B","char":"๐ŸŒ›","name":"first quarter moon face"},{"no":1893,"code":"1F319","char":"๐ŸŒ™","name":"crescent moon"},{"no":1725,"code":"1F30F","char":"๐ŸŒ","name":"globe showing Asia-Australia"},{"no":1731,"code":"1F30B","char":"๐ŸŒ‹","name":"volcano"},{"no":1777,"code":"1F30C","char":"๐ŸŒŒ","name":"milky way"},{"no":1903,"code":"1F320","char":"๐ŸŒ ","name":"shooting star"},{"no":1905,"code":"26C5","char":"โ›…","name":"sun behind cloud"},{"no":1925,"code":"26C4","char":"โ›„","name":"snowman without snow"},{"no":1916,"code":"1F300","char":"๐ŸŒ€","name":"cyclone"},{"no":1769,"code":"1F301","char":"๐ŸŒ","name":"foggy"},{"no":1917,"code":"1F308","char":"๐ŸŒˆ","name":"rainbow"},{"no":1929,"code":"1F30A","char":"๐ŸŒŠ","name":"water wave"}]},{"name":"Objects","emojis":[{"no":1939,"code":"1F38D","char":"๐ŸŽ","name":"pine decoration"},{"no":1458,"code":"1F49D","char":"๐Ÿ’","name":"heart with ribbon"},{"no":1940,"code":"1F38E","char":"๐ŸŽŽ","name":"Japanese dolls"},{"no":1492,"code":"1F392","char":"๐ŸŽ’","name":"school backpack"},{"no":1501,"code":"1F393","char":"๐ŸŽ“","name":"graduation cap"},{"no":1941,"code":"1F38F","char":"๐ŸŽ","name":"carp streamer"},{"no":1932,"code":"1F386","char":"๐ŸŽ†","name":"fireworks"},{"no":1933,"code":"1F387","char":"๐ŸŽ‡","name":"sparkler"},{"no":1942,"code":"1F390","char":"๐ŸŽ","name":"wind chime"},{"no":1943,"code":"1F391","char":"๐ŸŽ‘","name":"moon viewing ceremony"},{"no":1930,"code":"1F383","char":"๐ŸŽƒ","name":"jack-o-lantern"},{"no":91,"code":"1F47B","char":"๐Ÿ‘ป","name":"ghost"},{"no":528,"code":"1F385","char":"๐ŸŽ…","name":"Santa Claus"},{"no":1931,"code":"1F384","char":"๐ŸŽ„","name":"Christmas tree"},{"no":1945,"code":"1F381","char":"๐ŸŽ","name":"wrapped gift"},{"no":1938,"code":"1F38B","char":"๐ŸŽ‹","name":"tanabata tree"},{"no":1936,"code":"1F389","char":"๐ŸŽ‰","name":"party popper"},{"no":1937,"code":"1F38A","char":"๐ŸŽŠ","name":"confetti ball"},{"no":1935,"code":"1F388","char":"๐ŸŽˆ","name":"balloon"},{"no":2359,"code":"1F38C","char":"๐ŸŽŒ","name":"crossed flags"},{"no":2150,"code":"1F52E","char":"๐Ÿ”ฎ","name":"crystal ball"},{"no":2032,"code":"1F3A5","char":"๐ŸŽฅ","name":"movie camera"},{"no":2037,"code":"1F4F7","char":"๐Ÿ“ท","name":"camera"},{"no":2039,"code":"1F4F9","char":"๐Ÿ“น","name":"video camera"},{"no":2040,"code":"1F4FC","char":"๐Ÿ“ผ","name":"videocassette"},{"no":2030,"code":"1F4BF","char":"๐Ÿ’ฟ","name":"optical disk"},{"no":2031,"code":"1F4C0","char":"๐Ÿ“€","name":"dvd"},{"no":2028,"code":"1F4BD","char":"๐Ÿ’ฝ","name":"computer disk"},{"no":2029,"code":"1F4BE","char":"๐Ÿ’พ","name":"floppy disk"},{"no":2022,"code":"1F4BB","char":"๐Ÿ’ป","name":"laptop computer"},{"no":2014,"code":"1F4F1","char":"๐Ÿ“ฑ","name":"mobile phone"},{"no":2017,"code":"1F4DE","char":"๐Ÿ“ž","name":"telephone receiver"},{"no":2018,"code":"1F4DF","char":"๐Ÿ“Ÿ","name":"pager"},{"no":2019,"code":"1F4E0","char":"๐Ÿ“ ","name":"fax machine"},{"no":2045,"code":"1F4E1","char":"๐Ÿ“ก","name":"satellite antenna"},{"no":2036,"code":"1F4FA","char":"๐Ÿ“บ","name":"television"},{"no":2007,"code":"1F4FB","char":"๐Ÿ“ป","name":"radio"},{"no":1993,"code":"1F50A","char":"๐Ÿ”Š","name":"speaker high volume"},{"no":1997,"code":"1F514","char":"๐Ÿ””","name":"bell"},{"no":1994,"code":"1F4E2","char":"๐Ÿ“ข","name":"loudspeaker"},{"no":1995,"code":"1F4E3","char":"๐Ÿ“ฃ","name":"megaphone"},{"no":1855,"code":"23F3","char":"โณ","name":"hourglass not done"},{"no":1854,"code":"231B","char":"โŒ›","name":"hourglass done"},{"no":1857,"code":"23F0","char":"โฐ","name":"alarm clock"},{"no":1856,"code":"231A","char":"โŒš","name":"watch"},{"no":2121,"code":"1F513","char":"๐Ÿ”“","name":"unlocked"},{"no":2120,"code":"1F512","char":"๐Ÿ”’","name":"locked"},{"no":2122,"code":"1F50F","char":"๐Ÿ”","name":"locked with pen"},{"no":2123,"code":"1F510","char":"๐Ÿ”","name":"locked with key"},{"no":2124,"code":"1F511","char":"๐Ÿ”‘","name":"key"},{"no":2042,"code":"1F50E","char":"๐Ÿ”Ž","name":"magnifying glass tilted right"},{"no":2047,"code":"1F4A1","char":"๐Ÿ’ก","name":"light bulb"},{"no":2048,"code":"1F526","char":"๐Ÿ”ฆ","name":"flashlight"},{"no":2021,"code":"1F50C","char":"๐Ÿ”Œ","name":"electric plug"},{"no":2020,"code":"1F50B","char":"๐Ÿ”‹","name":"battery"},{"no":2041,"code":"1F50D","char":"๐Ÿ”","name":"magnifying glass tilted left"},{"no":939,"code":"1F6C0","char":"๐Ÿ›€","name":"person taking bath"},{"no":1851,"code":"1F6BD","char":"๐Ÿšฝ","name":"toilet"},{"no":2135,"code":"1F527","char":"๐Ÿ”ง","name":"wrench"},{"no":2136,"code":"1F529","char":"๐Ÿ”ฉ","name":"nut and bolt"},{"no":2126,"code":"1F528","char":"๐Ÿ”จ","name":"hammer"},{"no":1848,"code":"1F6AA","char":"๐Ÿšช","name":"door"},{"no":2145,"code":"1F6AC","char":"๐Ÿšฌ","name":"cigarette"},{"no":1465,"code":"1F4A3","char":"๐Ÿ’ฃ","name":"bomb"},{"no":2132,"code":"1F52B","char":"๐Ÿ”ซ","name":"pistol"},{"no":1721,"code":"1F52A","char":"๐Ÿ”ช","name":"kitchen knife"},{"no":2144,"code":"1F48A","char":"๐Ÿ’Š","name":"pill"},{"no":2143,"code":"1F489","char":"๐Ÿ’‰","name":"syringe"},{"no":2067,"code":"1F4B0","char":"๐Ÿ’ฐ","name":"money bag"},{"no":2068,"code":"1F4B4","char":"๐Ÿ’ด","name":"yen banknote"},{"no":2069,"code":"1F4B5","char":"๐Ÿ’ต","name":"dollar banknote"},{"no":2073,"code":"1F4B3","char":"๐Ÿ’ณ","name":"credit card"},{"no":2072,"code":"1F4B8","char":"๐Ÿ’ธ","name":"money with wings"},{"no":2015,"code":"1F4F2","char":"๐Ÿ“ฒ","name":"mobile phone with arrow"},{"no":2078,"code":"1F4E7","char":"๐Ÿ“ง","name":"e-mail"},{"no":2082,"code":"1F4E5","char":"๐Ÿ“ฅ","name":"inbox tray"},{"no":2081,"code":"1F4E4","char":"๐Ÿ“ค","name":"outbox tray"},{"no":2080,"code":"1F4E9","char":"๐Ÿ“ฉ","name":"envelope with arrow"},{"no":2079,"code":"1F4E8","char":"๐Ÿ“จ","name":"incoming envelope"},{"no":2084,"code":"1F4EB","char":"๐Ÿ“ซ","name":"closed mailbox with raised flag"},{"no":2085,"code":"1F4EA","char":"๐Ÿ“ช","name":"closed mailbox with lowered flag"},{"no":2088,"code":"1F4EE","char":"๐Ÿ“ฎ","name":"postbox"},{"no":2083,"code":"1F4E6","char":"๐Ÿ“ฆ","name":"package"},{"no":2096,"code":"1F4DD","char":"๐Ÿ“","name":"memo"},{"no":2061,"code":"1F4C4","char":"๐Ÿ“„","name":"page facing up"},{"no":2059,"code":"1F4C3","char":"๐Ÿ“ƒ","name":"page with curl"},{"no":2064,"code":"1F4D1","char":"๐Ÿ“‘","name":"bookmark tabs"},{"no":2108,"code":"1F4CA","char":"๐Ÿ“Š","name":"bar chart"},{"no":2106,"code":"1F4C8","char":"๐Ÿ“ˆ","name":"chart increasing"},{"no":2107,"code":"1F4C9","char":"๐Ÿ“‰","name":"chart decreasing"},{"no":2060,"code":"1F4DC","char":"๐Ÿ“œ","name":"scroll"},{"no":2109,"code":"1F4CB","char":"๐Ÿ“‹","name":"clipboard"},{"no":2101,"code":"1F4C5","char":"๐Ÿ“…","name":"calendar"},{"no":2102,"code":"1F4C6","char":"๐Ÿ“†","name":"tear-off calendar"},{"no":2105,"code":"1F4C7","char":"๐Ÿ“‡","name":"card index"},{"no":2098,"code":"1F4C1","char":"๐Ÿ“","name":"file folder"},{"no":2099,"code":"1F4C2","char":"๐Ÿ“‚","name":"open file folder"},{"no":2110,"code":"1F4CC","char":"๐Ÿ“Œ","name":"pushpin"},{"no":2112,"code":"1F4CE","char":"๐Ÿ“Ž","name":"paperclip"},{"no":2114,"code":"1F4CF","char":"๐Ÿ“","name":"straight ruler"},{"no":2115,"code":"1F4D0","char":"๐Ÿ“","name":"triangular ruler"},{"no":2051,"code":"1F4D5","char":"๐Ÿ“•","name":"closed book"},{"no":2053,"code":"1F4D7","char":"๐Ÿ“—","name":"green book"},{"no":2054,"code":"1F4D8","char":"๐Ÿ“˜","name":"blue book"},{"no":2055,"code":"1F4D9","char":"๐Ÿ“™","name":"orange book"},{"no":2057,"code":"1F4D3","char":"๐Ÿ““","name":"notebook"},{"no":2050,"code":"1F4D4","char":"๐Ÿ“”","name":"notebook with decorative cover"},{"no":2058,"code":"1F4D2","char":"๐Ÿ“’","name":"ledger"},{"no":2056,"code":"1F4DA","char":"๐Ÿ“š","name":"books"},{"no":2052,"code":"1F4D6","char":"๐Ÿ“–","name":"open book"},{"no":2065,"code":"1F516","char":"๐Ÿ”–","name":"bookmark"},{"no":2254,"code":"1F4DB","char":"๐Ÿ“›","name":"name badge"},{"no":2062,"code":"1F4F0","char":"๐Ÿ“ฐ","name":"newspaper"},{"no":1785,"code":"1F3A8","char":"๐ŸŽจ","name":"artist palette"},{"no":2035,"code":"1F3AC","char":"๐ŸŽฌ","name":"clapper board"},{"no":2005,"code":"1F3A4","char":"๐ŸŽค","name":"microphone"},{"no":2006,"code":"1F3A7","char":"๐ŸŽง","name":"headphone"},{"no":1999,"code":"1F3BC","char":"๐ŸŽผ","name":"musical score"},{"no":2000,"code":"1F3B5","char":"๐ŸŽต","name":"musical note"},{"no":2001,"code":"1F3B6","char":"๐ŸŽถ","name":"musical notes"},{"no":2010,"code":"1F3B9","char":"๐ŸŽน","name":"musical keyboard"},{"no":2012,"code":"1F3BB","char":"๐ŸŽป","name":"violin"},{"no":2011,"code":"1F3BA","char":"๐ŸŽบ","name":"trumpet"},{"no":2008,"code":"1F3B7","char":"๐ŸŽท","name":"saxophone"},{"no":2009,"code":"1F3B8","char":"๐ŸŽธ","name":"guitar"},{"no":93,"code":"1F47E","char":"๐Ÿ‘พ","name":"alien monster"},{"no":1980,"code":"1F3AE","char":"๐ŸŽฎ","name":"video game"},{"no":1987,"code":"1F0CF","char":"๐Ÿƒ","name":"joker"},{"no":1989,"code":"1F3B4","char":"๐ŸŽด","name":"flower playing cards"},{"no":1988,"code":"1F004","char":"๐Ÿ€„","name":"mahjong red dragon"},{"no":1982,"code":"1F3B2","char":"๐ŸŽฒ","name":"game die"},{"no":1972,"code":"1F3AF","char":"๐ŸŽฏ","name":"direct hit"},{"no":1959,"code":"1F3C8","char":"๐Ÿˆ","name":"american football"},{"no":1957,"code":"1F3C0","char":"๐Ÿ€","name":"basketball"},{"no":1955,"code":"26BD","char":"โšฝ","name":"soccer ball"},{"no":1956,"code":"26BE","char":"โšพ","name":"baseball"},{"no":1961,"code":"1F3BE","char":"๐ŸŽพ","name":"tennis"},{"no":1962,"code":"1F3B1","char":"๐ŸŽฑ","name":"pool 8 ball"},{"no":1963,"code":"1F3B3","char":"๐ŸŽณ","name":"bowling"},{"no":1973,"code":"26F3","char":"โ›ณ","name":"flag in hole"},{"no":2357,"code":"1F3C1","char":"๐Ÿ","name":"chequered flag"},{"no":1950,"code":"1F3C6","char":"๐Ÿ†","name":"trophy"},{"no":1977,"code":"1F3BF","char":"๐ŸŽฟ","name":"skis"},{"no":968,"code":"1F3C2","char":"๐Ÿ‚","name":"snowboarder"},{"no":1028,"code":"1F3CA","char":"๐ŸŠ","name":"person swimming"},{"no":992,"code":"1F3C4","char":"๐Ÿ„","name":"person surfing"},{"no":1975,"code":"1F3A3","char":"๐ŸŽฃ","name":"fishing pole"},{"no":1706,"code":"1F375","char":"๐Ÿต","name":"teacup without handle"},{"no":1707,"code":"1F376","char":"๐Ÿถ","name":"sake"},{"no":1712,"code":"1F37A","char":"๐Ÿบ","name":"beer mug"},{"no":1713,"code":"1F37B","char":"๐Ÿป","name":"clinking beer mugs"},{"no":1710,"code":"1F378","char":"๐Ÿธ","name":"cocktail glass"},{"no":1711,"code":"1F379","char":"๐Ÿน","name":"tropical drink"},{"no":1709,"code":"1F377","char":"๐Ÿท","name":"wine glass"},{"no":1719,"code":"1F374","char":"๐Ÿด","name":"fork and knife"},{"no":1660,"code":"1F355","char":"๐Ÿ•","name":"pizza"},{"no":1658,"code":"1F354","char":"๐Ÿ”","name":"hamburger"},{"no":1659,"code":"1F35F","char":"๐ŸŸ","name":"french fries"},{"no":1655,"code":"1F357","char":"๐Ÿ—","name":"poultry leg"},{"no":1654,"code":"1F356","char":"๐Ÿ–","name":"meat on bone"},{"no":1680,"code":"1F35D","char":"๐Ÿ","name":"spaghetti"},{"no":1678,"code":"1F35B","char":"๐Ÿ›","name":"curry rice"},{"no":1684,"code":"1F364","char":"๐Ÿค","name":"fried shrimp"},{"no":1674,"code":"1F371","char":"๐Ÿฑ","name":"bento box"},{"no":1683,"code":"1F363","char":"๐Ÿฃ","name":"sushi"},{"no":1685,"code":"1F365","char":"๐Ÿฅ","name":"fish cake with swirl"},{"no":1676,"code":"1F359","char":"๐Ÿ™","name":"rice ball"},{"no":1675,"code":"1F358","char":"๐Ÿ˜","name":"rice cracker"},{"no":1677,"code":"1F35A","char":"๐Ÿš","name":"cooked rice"},{"no":1679,"code":"1F35C","char":"๐Ÿœ","name":"steaming bowl"},{"no":1669,"code":"1F372","char":"๐Ÿฒ","name":"pot of food"},{"no":1682,"code":"1F362","char":"๐Ÿข","name":"oden"},{"no":1686,"code":"1F361","char":"๐Ÿก","name":"dango"},{"no":1667,"code":"1F373","char":"๐Ÿณ","name":"cooking"},{"no":1648,"code":"1F35E","char":"๐Ÿž","name":"bread"},{"no":1693,"code":"1F369","char":"๐Ÿฉ","name":"doughnut"},{"no":1701,"code":"1F36E","char":"๐Ÿฎ","name":"custard"},{"no":1690,"code":"1F366","char":"๐Ÿฆ","name":"soft ice cream"},{"no":1692,"code":"1F368","char":"๐Ÿจ","name":"ice cream"},{"no":1691,"code":"1F367","char":"๐Ÿง","name":"shaved ice"},{"no":1695,"code":"1F382","char":"๐ŸŽ‚","name":"birthday cake"},{"no":1696,"code":"1F370","char":"๐Ÿฐ","name":"shortcake"},{"no":1694,"code":"1F36A","char":"๐Ÿช","name":"cookie"},{"no":1698,"code":"1F36B","char":"๐Ÿซ","name":"chocolate bar"},{"no":1699,"code":"1F36C","char":"๐Ÿฌ","name":"candy"},{"no":1700,"code":"1F36D","char":"๐Ÿญ","name":"lollipop"},{"no":1702,"code":"1F36F","char":"๐Ÿฏ","name":"honey pot"},{"no":1628,"code":"1F34E","char":"๐ŸŽ","name":"red apple"},{"no":1629,"code":"1F34F","char":"๐Ÿ","name":"green apple"},{"no":1624,"code":"1F34A","char":"๐ŸŠ","name":"tangerine"},{"no":1632,"code":"1F352","char":"๐Ÿ’","name":"cherries"},{"no":1621,"code":"1F347","char":"๐Ÿ‡","name":"grapes"},{"no":1623,"code":"1F349","char":"๐Ÿ‰","name":"watermelon"},{"no":1633,"code":"1F353","char":"๐Ÿ“","name":"strawberry"},{"no":1631,"code":"1F351","char":"๐Ÿ‘","name":"peach"},{"no":1622,"code":"1F348","char":"๐Ÿˆ","name":"melon"},{"no":1626,"code":"1F34C","char":"๐ŸŒ","name":"banana"},{"no":1627,"code":"1F34D","char":"๐Ÿ","name":"pineapple"},{"no":1681,"code":"1F360","char":"๐Ÿ ","name":"roasted sweet potato"},{"no":1638,"code":"1F346","char":"๐Ÿ†","name":"eggplant"},{"no":1635,"code":"1F345","char":"๐Ÿ…","name":"tomato"},{"no":1641,"code":"1F33D","char":"๐ŸŒฝ","name":"ear of corn"}]},{"name":"Places","emojis":[{"no":1744,"code":"1F3E0","char":"๐Ÿ ","name":"house"},{"no":1745,"code":"1F3E1","char":"๐Ÿก","name":"house with garden"},{"no":1754,"code":"1F3EB","char":"๐Ÿซ","name":"school"},{"no":1746,"code":"1F3E2","char":"๐Ÿข","name":"office building"},{"no":1747,"code":"1F3E3","char":"๐Ÿฃ","name":"Japanese post office"},{"no":1749,"code":"1F3E5","char":"๐Ÿฅ","name":"hospital"},{"no":1750,"code":"1F3E6","char":"๐Ÿฆ","name":"bank"},{"no":1753,"code":"1F3EA","char":"๐Ÿช","name":"convenience store"},{"no":1752,"code":"1F3E9","char":"๐Ÿฉ","name":"love hotel"},{"no":1751,"code":"1F3E8","char":"๐Ÿจ","name":"hotel"},{"no":1759,"code":"1F492","char":"๐Ÿ’’","name":"wedding"},{"no":1762,"code":"26EA","char":"โ›ช","name":"church"},{"no":1755,"code":"1F3EC","char":"๐Ÿฌ","name":"department store"},{"no":1774,"code":"1F307","char":"๐ŸŒ‡","name":"sunset"},{"no":1773,"code":"1F306","char":"๐ŸŒ†","name":"cityscape at dusk"},{"no":1757,"code":"1F3EF","char":"๐Ÿฏ","name":"Japanese castle"},{"no":1758,"code":"1F3F0","char":"๐Ÿฐ","name":"castle"},{"no":1768,"code":"26FA","char":"โ›บ","name":"tent"},{"no":1756,"code":"1F3ED","char":"๐Ÿญ","name":"factory"},{"no":1760,"code":"1F5FC","char":"๐Ÿ—ผ","name":"Tokyo tower"},{"no":1728,"code":"1F5FE","char":"๐Ÿ—พ","name":"map of Japan"},{"no":1732,"code":"1F5FB","char":"๐Ÿ—ป","name":"mount fuji"},{"no":1771,"code":"1F304","char":"๐ŸŒ„","name":"sunrise over mountains"},{"no":1772,"code":"1F305","char":"๐ŸŒ…","name":"sunrise"},{"no":1770,"code":"1F303","char":"๐ŸŒƒ","name":"night with stars"},{"no":1761,"code":"1F5FD","char":"๐Ÿ—ฝ","name":"Statue of Liberty"},{"no":1775,"code":"1F309","char":"๐ŸŒ‰","name":"bridge at night"},{"no":1778,"code":"1F3A0","char":"๐ŸŽ ","name":"carousel horse"},{"no":1779,"code":"1F3A1","char":"๐ŸŽก","name":"ferris wheel"},{"no":1767,"code":"26F2","char":"โ›ฒ","name":"fountain"},{"no":1780,"code":"1F3A2","char":"๐ŸŽข","name":"roller coaster"},{"no":1834,"code":"1F6A2","char":"๐Ÿšข","name":"ship"},{"no":1828,"code":"26F5","char":"โ›ต","name":"sailboat"},{"no":1830,"code":"1F6A4","char":"๐Ÿšค","name":"speedboat"},{"no":1845,"code":"1F680","char":"๐Ÿš€","name":"rocket"},{"no":1839,"code":"1F4BA","char":"๐Ÿ’บ","name":"seat"},{"no":1794,"code":"1F689","char":"๐Ÿš‰","name":"station"},{"no":1789,"code":"1F684","char":"๐Ÿš„","name":"high-speed train"},{"no":1790,"code":"1F685","char":"๐Ÿš…","name":"bullet train"},{"no":1792,"code":"1F687","char":"๐Ÿš‡","name":"metro"},{"no":1788,"code":"1F683","char":"๐Ÿšƒ","name":"railway car"},{"no":1799,"code":"1F68C","char":"๐ŸšŒ","name":"bus"},{"no":1811,"code":"1F699","char":"๐Ÿš™","name":"sport utility vehicle"},{"no":1809,"code":"1F697","char":"๐Ÿš—","name":"automobile"},{"no":1807,"code":"1F695","char":"๐Ÿš•","name":"taxi"},{"no":1812,"code":"1F69A","char":"๐Ÿšš","name":"delivery truck"},{"no":1822,"code":"1F6A8","char":"๐Ÿšจ","name":"police car light"},{"no":1805,"code":"1F693","char":"๐Ÿš“","name":"police car"},{"no":1804,"code":"1F692","char":"๐Ÿš’","name":"fire engine"},{"no":1803,"code":"1F691","char":"๐Ÿš‘","name":"ambulance"},{"no":1815,"code":"1F6B2","char":"๐Ÿšฒ","name":"bicycle"},{"no":1781,"code":"1F488","char":"๐Ÿ’ˆ","name":"barber pole"},{"no":1818,"code":"1F68F","char":"๐Ÿš","name":"bus stop"},{"no":1948,"code":"1F3AB","char":"๐ŸŽซ","name":"ticket"},{"no":1823,"code":"1F6A5","char":"๐Ÿšฅ","name":"horizontal traffic light"},{"no":1825,"code":"1F6A7","char":"๐Ÿšง","name":"construction"},{"no":2255,"code":"1F530","char":"๐Ÿ”ฐ","name":"Japanese symbol for beginner"},{"no":1821,"code":"26FD","char":"โ›ฝ","name":"fuel pump"},{"no":2049,"code":"1F3EE","char":"๐Ÿฎ","name":"red paper lantern"},{"no":1786,"code":"1F3B0","char":"๐ŸŽฐ","name":"slot machine"},{"no":2148,"code":"1F5FF","char":"๐Ÿ—ฟ","name":"moai"},{"no":1782,"code":"1F3AA","char":"๐ŸŽช","name":"circus tent"},{"no":1783,"code":"1F3AD","char":"๐ŸŽญ","name":"performing arts"},{"no":2111,"code":"1F4CD","char":"๐Ÿ“","name":"round pushpin"},{"no":2358,"code":"1F6A9","char":"๐Ÿšฉ","name":"triangular flag"}]},{"name":"Symbols","emojis":[{"no":2294,"code":"1F51F","char":"๐Ÿ”Ÿ","name":"keycap 10"},{"no":2298,"code":"1F522","char":"๐Ÿ”ข","name":"input numbers"},{"no":2299,"code":"1F523","char":"๐Ÿ”ฃ","name":"input symbols"},{"no":2296,"code":"1F520","char":"๐Ÿ” ","name":"input latin uppercase"},{"no":2297,"code":"1F521","char":"๐Ÿ”ก","name":"input latin lowercase"},{"no":2300,"code":"1F524","char":"๐Ÿ”ค","name":"input latin letters"},{"no":2234,"code":"1F53C","char":"๐Ÿ”ผ","name":"up button"},{"no":2236,"code":"1F53D","char":"๐Ÿ”ฝ","name":"down button"},{"no":2232,"code":"23EA","char":"โช","name":"fast reverse button"},{"no":2228,"code":"23E9","char":"โฉ","name":"fast-forward button"},{"no":2235,"code":"23EB","char":"โซ","name":"fast up button"},{"no":2237,"code":"23EC","char":"โฌ","name":"fast down button"},{"no":2313,"code":"1F197","char":"๐Ÿ†—","name":"OK button"},{"no":2310,"code":"1F195","char":"๐Ÿ†•","name":"NEW button"},{"no":2316,"code":"1F199","char":"๐Ÿ†™","name":"UP! button"},{"no":2305,"code":"1F192","char":"๐Ÿ†’","name":"COOL button"},{"no":2306,"code":"1F193","char":"๐Ÿ†“","name":"FREE button"},{"no":2311,"code":"1F196","char":"๐Ÿ†–","name":"NG button"},{"no":2245,"code":"1F4F6","char":"๐Ÿ“ถ","name":"antenna bars"},{"no":2242,"code":"1F3A6","char":"๐ŸŽฆ","name":"cinema"},{"no":2318,"code":"1F201","char":"๐Ÿˆ","name":"Japanese โ€œhereโ€ button"},{"no":2322,"code":"1F22F","char":"๐Ÿˆฏ","name":"Japanese โ€œreservedโ€ button"},{"no":2330,"code":"1F233","char":"๐Ÿˆณ","name":"Japanese โ€œvacancyโ€ button"},{"no":2334,"code":"1F235","char":"๐Ÿˆต","name":"Japanese โ€œno vacancyโ€ button"},{"no":2329,"code":"1F234","char":"๐Ÿˆด","name":"Japanese โ€œpassing gradeโ€ button"},{"no":2326,"code":"1F232","char":"๐Ÿˆฒ","name":"Japanese โ€œprohibitedโ€ button"},{"no":2323,"code":"1F250","char":"๐Ÿ‰","name":"Japanese โ€œbargainโ€ button"},{"no":2324,"code":"1F239","char":"๐Ÿˆน","name":"Japanese โ€œdiscountโ€ button"},{"no":2333,"code":"1F23A","char":"๐Ÿˆบ","name":"Japanese โ€œopen for businessโ€ button"},{"no":2321,"code":"1F236","char":"๐Ÿˆถ","name":"Japanese โ€œnot free of chargeโ€ button"},{"no":2325,"code":"1F21A","char":"๐Ÿˆš","name":"Japanese โ€œfree of chargeโ€ button"},{"no":2158,"code":"1F6BB","char":"๐Ÿšป","name":"restroom"},{"no":2156,"code":"1F6B9","char":"๐Ÿšน","name":"menโ€™s room"},{"no":2157,"code":"1F6BA","char":"๐Ÿšบ","name":"womenโ€™s room"},{"no":2159,"code":"1F6BC","char":"๐Ÿšผ","name":"baby symbol"},{"no":2160,"code":"1F6BE","char":"๐Ÿšพ","name":"water closet"},{"no":2170,"code":"1F6AD","char":"๐Ÿšญ","name":"no smoking"},{"no":2328,"code":"1F238","char":"๐Ÿˆธ","name":"Japanese โ€œapplicationโ€ button"},{"no":2327,"code":"1F251","char":"๐Ÿ‰‘","name":"Japanese โ€œacceptableโ€ button"},{"no":2304,"code":"1F191","char":"๐Ÿ†‘","name":"CL button"},{"no":2315,"code":"1F198","char":"๐Ÿ†˜","name":"SOS button"},{"no":2308,"code":"1F194","char":"๐Ÿ†”","name":"ID button"},{"no":2168,"code":"1F6AB","char":"๐Ÿšซ","name":"prohibited"},{"no":2175,"code":"1F51E","char":"๐Ÿ”ž","name":"no one under eighteen"},{"no":2167,"code":"26D4","char":"โ›”","name":"no entry"},{"no":2262,"code":"274E","char":"โŽ","name":"cross mark button"},{"no":2257,"code":"2705","char":"โœ…","name":"white heavy check mark"},{"no":1460,"code":"1F49F","char":"๐Ÿ’Ÿ","name":"heart decoration"},{"no":2317,"code":"1F19A","char":"๐Ÿ†š","name":"VS button"},{"no":2246,"code":"1F4F3","char":"๐Ÿ“ณ","name":"vibration mode"},{"no":2247,"code":"1F4F4","char":"๐Ÿ“ด","name":"mobile phone off"},{"no":2302,"code":"1F18E","char":"๐Ÿ†Ž","name":"AB button (blood type)"},{"no":2349,"code":"1F4A0","char":"๐Ÿ’ ","name":"diamond with a dot"},{"no":2223,"code":"26CE","char":"โ›Ž","name":"Ophiuchus"},{"no":2210,"code":"1F52F","char":"๐Ÿ”ฏ","name":"dotted six-pointed star"},{"no":2152,"code":"1F3E7","char":"๐Ÿง","name":"ATM sign"},{"no":2074,"code":"1F4B9","char":"๐Ÿ’น","name":"chart increasing with yen"},{"no":2076,"code":"1F4B2","char":"๐Ÿ’ฒ","name":"heavy dollar sign"},{"no":2075,"code":"1F4B1","char":"๐Ÿ’ฑ","name":"currency exchange"},{"no":2261,"code":"274C","char":"โŒ","name":"cross mark"},{"no":2277,"code":"2757","char":"โ—","name":"exclamation mark"},{"no":2274,"code":"2753","char":"โ“","name":"question mark"},{"no":2276,"code":"2755","char":"โ•","name":"white exclamation mark"},{"no":2275,"code":"2754","char":"โ”","name":"white question mark"},{"no":2256,"code":"2B55","char":"โญ•","name":"heavy large circle"},{"no":2198,"code":"1F51D","char":"๐Ÿ”","name":"TOP arrow"},{"no":2195,"code":"1F51A","char":"๐Ÿ”š","name":"END arrow"},{"no":2194,"code":"1F519","char":"๐Ÿ”™","name":"BACK arrow"},{"no":2196,"code":"1F51B","char":"๐Ÿ”›","name":"ON! arrow"},{"no":2197,"code":"1F51C","char":"๐Ÿ”œ","name":"SOON arrow"},{"no":2192,"code":"1F503","char":"๐Ÿ”ƒ","name":"clockwise vertical arrows"},{"no":1861,"code":"1F55B","char":"๐Ÿ•›","name":"twelve oโ€™clock"},{"no":1863,"code":"1F550","char":"๐Ÿ•","name":"one oโ€™clock"},{"no":1865,"code":"1F551","char":"๐Ÿ•‘","name":"two oโ€™clock"},{"no":1867,"code":"1F552","char":"๐Ÿ•’","name":"three oโ€™clock"},{"no":1869,"code":"1F553","char":"๐Ÿ•“","name":"four oโ€™clock"},{"no":1871,"code":"1F554","char":"๐Ÿ•”","name":"five oโ€™clock"},{"no":1873,"code":"1F555","char":"๐Ÿ••","name":"six oโ€™clock"},{"no":1875,"code":"1F556","char":"๐Ÿ•–","name":"seven oโ€™clock"},{"no":1877,"code":"1F557","char":"๐Ÿ•—","name":"eight oโ€™clock"},{"no":1879,"code":"1F558","char":"๐Ÿ•˜","name":"nine oโ€™clock"},{"no":1881,"code":"1F559","char":"๐Ÿ•™","name":"ten oโ€™clock"},{"no":1883,"code":"1F55A","char":"๐Ÿ•š","name":"eleven oโ€™clock"},{"no":2263,"code":"2795","char":"โž•","name":"heavy plus sign"},{"no":2264,"code":"2796","char":"โž–","name":"heavy minus sign"},{"no":2265,"code":"2797","char":"โž—","name":"heavy division sign"},{"no":1601,"code":"1F4AE","char":"๐Ÿ’ฎ","name":"white flower"},{"no":2295,"code":"1F4AF","char":"๐Ÿ’ฏ","name":"hundred points"},{"no":2350,"code":"1F518","char":"๐Ÿ”˜","name":"radio button"},{"no":2141,"code":"1F517","char":"๐Ÿ”—","name":"link"},{"no":2266,"code":"27B0","char":"โžฐ","name":"curly loop"},{"no":2253,"code":"1F531","char":"๐Ÿ”ฑ","name":"trident emblem"},{"no":2347,"code":"1F53A","char":"๐Ÿ”บ","name":"red triangle pointed up"},{"no":2351,"code":"1F532","char":"๐Ÿ”ฒ","name":"black square button"},{"no":2352,"code":"1F533","char":"๐Ÿ”ณ","name":"white square button"},{"no":2355,"code":"1F534","char":"๐Ÿ”ด","name":"red circle"},{"no":2356,"code":"1F535","char":"๐Ÿ”ต","name":"blue circle"},{"no":2348,"code":"1F53B","char":"๐Ÿ”ป","name":"red triangle pointed down"},{"no":2342,"code":"2B1C","char":"โฌœ","name":"white large square"},{"no":2341,"code":"2B1B","char":"โฌ›","name":"black large square"},{"no":2343,"code":"1F536","char":"๐Ÿ”ถ","name":"large orange diamond"},{"no":2344,"code":"1F537","char":"๐Ÿ”ท","name":"large blue diamond"},{"no":2345,"code":"1F538","char":"๐Ÿ”ธ","name":"small orange diamond"},{"no":2346,"code":"1F539","char":"๐Ÿ”น","name":"small blue diamond"}]}] diff --git a/lib/components/icons/EmojiIcon.js b/lib/components/icons/EmojiIcon.js new file mode 100644 index 000000000..41d9d5838 --- /dev/null +++ b/lib/components/icons/EmojiIcon.js @@ -0,0 +1,63 @@ +"use strict"; + +exports.__esModule = true; + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var EmojiIcon = function EmojiIcon(_ref) { + var tooltip = _ref.tooltip, + onClick = _ref.onClick, + isActive = _ref.isActive; + return _react2.default.createElement( + "div", + { className: "sc-user-input--picker-wrapper" }, + tooltip, + _react2.default.createElement( + "button", + { id: "sc-emoji-picker-button", className: "sc-user-input--emoji-icon-wrapper", onClick: onClick }, + _react2.default.createElement( + "svg", + { + className: "sc-user-input--emoji-icon " + (isActive ? 'active' : ''), + version: "1.1", + xmlns: "http://www.w3.org/2000/svg", + x: "0px", + y: "0px", + width: "100%", + height: "10px", + viewBox: "0 0 37 37", + enableBackground: "new 0 0 37 37" + }, + _react2.default.createElement( + "g", + null, + _react2.default.createElement("path", { d: "M18.696,37C8.387,37,0,29.006,0,18.696C0,8.387,8.387,0,18.696,0c10.31,0,18.696,8.387,18.696,18.696 C37,29.006,29.006,37,18.696,37z M18.696,2C9.49,2,2,9.49,2,18.696c0,9.206,7.49,16.696,16.696,16.696 c9.206,0,16.696-7.49,16.696-16.696C35.393,9.49,27.902,2,18.696,2z" + }) + ), + _react2.default.createElement( + "g", + null, + _react2.default.createElement("circle", { cx: "12.379", cy: "14.359", r: "1.938" }) + ), + _react2.default.createElement( + "g", + null, + _react2.default.createElement("circle", { cx: "24.371", cy: "14.414", r: "1.992" }) + ), + _react2.default.createElement( + "g", + null, + _react2.default.createElement("path", { d: "M18.035,27.453c-5.748,0-8.342-4.18-8.449-4.357c-0.286-0.473-0.135-1.087,0.338-1.373 c0.471-0.286,1.084-0.136,1.372,0.335c0.094,0.151,2.161,3.396,6.74,3.396c4.713,0,7.518-3.462,7.545-3.497 c0.343-0.432,0.973-0.504,1.405-0.161c0.433,0.344,0.505,0.973,0.161,1.405C27.009,23.374,23.703,27.453,18.035,27.453z" + }) + ) + ) + ) + ); +}; + +exports.default = EmojiIcon; +module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/components/icons/FileIcon.js b/lib/components/icons/FileIcon.js new file mode 100644 index 000000000..7dcac16d2 --- /dev/null +++ b/lib/components/icons/FileIcon.js @@ -0,0 +1,65 @@ +'use strict'; + +exports.__esModule = true; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var FileIcon = function (_Component) { + _inherits(FileIcon, _Component); + + function FileIcon() { + _classCallCheck(this, FileIcon); + + return _possibleConstructorReturn(this, _Component.apply(this, arguments)); + } + + FileIcon.prototype._handleClick = function _handleClick(e) { + e.preventDefault(); + this.props.onClick && this.props.onClick(e); + }; + + FileIcon.prototype.render = function render() { + return _react2.default.createElement( + 'button', + { + onFocus: this.props.onFocus, + onBlur: this.props.onBlur, + onClick: this._handleClick.bind(this), + className: 'sc-user-input--file-icon-wrapper' + }, + _react2.default.createElement( + 'svg', + { + version: '1.1', + className: 'sc-user-input--file-icon', + xmlns: 'http://www.w3.org/2000/svg', + x: '0px', + y: '0px', + width: '60px', + height: '60px', + viewBox: '0 0 55 55', + enableBackground: 'new 0 0 60 60' }, + _react2.default.createElement( + 'g', + null, + _react2.default.createElement('path', { d: 'M43.922,6.653c-2.643-2.644-6.201-4.107-9.959-4.069c-3.774,0.019-7.32,1.497-9.983,4.161l-12.3,12.3l-8.523,8.521 c-4.143,4.144-4.217,10.812-0.167,14.862c1.996,1.996,4.626,2.989,7.277,2.989c2.73,0,5.482-1.055,7.583-3.156l15.547-15.545 c0.002-0.002,0.002-0.004,0.004-0.005l5.358-5.358c1.394-1.393,2.176-3.24,2.201-5.2c0.026-1.975-0.716-3.818-2.09-5.192 c-2.834-2.835-7.496-2.787-10.394,0.108L9.689,29.857c-0.563,0.563-0.563,1.474,0,2.036c0.281,0.28,0.649,0.421,1.018,0.421 c0.369,0,0.737-0.141,1.018-0.421l18.787-18.788c1.773-1.774,4.609-1.824,6.322-0.11c0.82,0.82,1.263,1.928,1.247,3.119 c-0.017,1.205-0.497,2.342-1.357,3.201l-5.55,5.551c-0.002,0.002-0.002,0.004-0.004,0.005L15.814,40.225 c-3.02,3.02-7.86,3.094-10.789,0.167c-2.928-2.929-2.854-7.77,0.167-10.791l0.958-0.958c0.001-0.002,0.004-0.002,0.005-0.004 L26.016,8.78c2.123-2.124,4.951-3.303,7.961-3.317c2.998,0.02,5.814,1.13,7.91,3.226c4.35,4.351,4.309,11.472-0.093,15.873 L25.459,40.895c-0.563,0.562-0.563,1.473,0,2.035c0.281,0.281,0.65,0.422,1.018,0.422c0.369,0,0.737-0.141,1.018-0.422 L43.83,26.596C49.354,21.073,49.395,12.126,43.922,6.653z' }) + ) + ) + ); + }; + + return FileIcon; +}(_react.Component); + +exports.default = FileIcon; +module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/icons/SendIcon.js b/lib/components/icons/SendIcon.js new file mode 100644 index 000000000..bcbe0683c --- /dev/null +++ b/lib/components/icons/SendIcon.js @@ -0,0 +1,64 @@ +'use strict'; + +exports.__esModule = true; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var SendIcon = function (_Component) { + _inherits(SendIcon, _Component); + + function SendIcon() { + _classCallCheck(this, SendIcon); + + return _possibleConstructorReturn(this, _Component.apply(this, arguments)); + } + + SendIcon.prototype.render = function render() { + var _this2 = this; + + return _react2.default.createElement( + 'button', + { + onFocus: this.props.onFocus, + onBlur: this.props.onBlur, + onClick: function onClick(e) { + e.preventDefault();_this2.props.onClick(e); + }, + className: 'sc-user-input--send-icon-wrapper' + }, + _react2.default.createElement( + 'svg', + { + version: '1.1', + className: 'sc-user-input--send-icon', + xmlns: 'http://www.w3.org/2000/svg', + x: '0px', + y: '0px', + width: '37.393px', + height: '37.393px', + viewBox: '0 0 37.393 37.393', + enableBackground: 'new 0 0 37.393 37.393' }, + _react2.default.createElement( + 'g', + { id: 'Layer_2' }, + _react2.default.createElement('path', { d: 'M36.511,17.594L2.371,2.932c-0.374-0.161-0.81-0.079-1.1,0.21C0.982,3.43,0.896,3.865,1.055,4.241l5.613,13.263 L2.082,32.295c-0.115,0.372-0.004,0.777,0.285,1.038c0.188,0.169,0.427,0.258,0.67,0.258c0.132,0,0.266-0.026,0.392-0.08 l33.079-14.078c0.368-0.157,0.607-0.519,0.608-0.919S36.879,17.752,36.511,17.594z M4.632,30.825L8.469,18.45h8.061 c0.552,0,1-0.448,1-1s-0.448-1-1-1H8.395L3.866,5.751l29.706,12.757L4.632,30.825z' }) + ) + ) + ); + }; + + return SendIcon; +}(_react.Component); + +exports.default = SendIcon; +module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/popups/PopupWindow.js b/lib/components/popups/PopupWindow.js new file mode 100644 index 000000000..9bfeb3a5b --- /dev/null +++ b/lib/components/popups/PopupWindow.js @@ -0,0 +1,75 @@ +'use strict'; + +exports.__esModule = true; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var PopupWindow = function (_Component) { + _inherits(PopupWindow, _Component); + + function PopupWindow() { + var _temp, _this, _ret; + + _classCallCheck(this, PopupWindow); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.interceptLauncherClick = function (e) { + var isOpen = _this.props.isOpen; + + var clickedOutside = !_this.emojiPopup.contains(e.target) && isOpen; + clickedOutside && _this.props.onClickedOutside(e); + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + PopupWindow.prototype.componentDidMount = function componentDidMount() { + this.scLauncher = document.querySelector('#sc-launcher'); + this.scLauncher.addEventListener('click', this.interceptLauncherClick); + }; + + PopupWindow.prototype.componentWillUnmount = function componentWillUnmount() { + this.scLauncher.removeEventListener('click', this.interceptLauncherClick); + }; + + PopupWindow.prototype.render = function render() { + var _this2 = this; + + var _props = this.props, + isOpen = _props.isOpen, + children = _props.children; + + return _react2.default.createElement( + 'div', + { className: 'sc-popup-window', ref: function ref(e) { + return _this2.emojiPopup = e; + } }, + _react2.default.createElement( + 'div', + { className: 'sc-popup-window--cointainer ' + (isOpen ? '' : 'closed') }, + _react2.default.createElement('input', { + onChange: this.props.onInputChange, + className: 'sc-popup-window--search', + placeholder: 'Search emoji...' + }), + children + ) + ); + }; + + return PopupWindow; +}(_react.Component); + +exports.default = PopupWindow; +module.exports = exports['default']; \ No newline at end of file diff --git a/lib/index.js b/lib/index.js new file mode 100644 index 000000000..a795e3db5 --- /dev/null +++ b/lib/index.js @@ -0,0 +1,14 @@ +'use strict'; + +exports.__esModule = true; +exports.Launcher = undefined; + +require('./styles'); + +var _Launcher = require('./components/Launcher'); + +var _Launcher2 = _interopRequireDefault(_Launcher); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.Launcher = _Launcher2.default; \ No newline at end of file diff --git a/lib/messageTypes.js b/lib/messageTypes.js new file mode 100644 index 000000000..5a56b671e --- /dev/null +++ b/lib/messageTypes.js @@ -0,0 +1,15 @@ +'use strict'; + +var MESSAGE_TYPES = { + CLIENT: { + NEW_VISITOR: 'client.new_visitor', + MESSAGE: 'client.message', + RETURNING_VISITOR: 'client.returning_visitor' + }, + BROKER: { + VISITOR_ID: 'broker.visitor_id', + MESSAGE: 'broker.message' + } +}; + +module.exports = MESSAGE_TYPES; \ No newline at end of file diff --git a/lib/styles/chat-window.css b/lib/styles/chat-window.css new file mode 100644 index 000000000..8bf0eb295 --- /dev/null +++ b/lib/styles/chat-window.css @@ -0,0 +1,55 @@ +.sc-chat-window { + width: 370px; + height: calc(100% - 120px); + max-height: 590px; + position: fixed; + right: 25px; + bottom: 100px; + box-sizing: border-box; + box-shadow: 0px 7px 40px 2px rgba(148, 149, 150, 0.3); + background: white; + display: flex; + flex-direction: column; + justify-content: space-between; + transition: 0.3s ease-in-out; + border-radius: 10px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +.sc-chat-window.closed { + opacity: 0; + visibility: hidden; + bottom: 90px; +} + +.sc-message-list { + height: 80%; + overflow-y: auto; + background-color: white; + background-size: 100%; + padding: 40px 0px; +} + +.sc-message--me { + text-align: right; +} +.sc-message--them { + text-align: left; +} + +@media (max-width: 450px) { + .sc-chat-window { + width: 100%; + height: 100%; + max-height: 100%; + right: 0px; + bottom: 0px; + border-radius: 0px; + } + .sc-chat-window { + transition: 0.1s ease-in-out; + } + .sc-chat-window.closed { + bottom: 0px; + } +} diff --git a/lib/styles/emojiPicker.css b/lib/styles/emojiPicker.css new file mode 100644 index 000000000..2b2991119 --- /dev/null +++ b/lib/styles/emojiPicker.css @@ -0,0 +1,38 @@ +.sc-emoji-picker { + overflow: auto; + width: 100%; + max-height: calc(100% - 40px); + box-sizing: border-box; + padding: 15px; +} + +.sc-emoji-picker--category { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.sc-emoji-picker--category-title { + min-width: 100%; + color: #b8c3ca; + font-weight: 200; + font-size: 13px; + margin: 5px; + letter-spacing: 1px; +} + +.sc-emoji-picker--emoji { + margin: 5px; + width: 30px; + line-height: 30px; + text-align: center; + cursor: pointer; + vertical-align: middle; + font-size: 28px; + transition: transform 60ms ease-out,-webkit-transform 60ms ease-out; + transition-delay: 60ms; +} + +.sc-emoji-picker--emoji:hover { + transform: scale(1.4); +} \ No newline at end of file diff --git a/lib/styles/header.css b/lib/styles/header.css new file mode 100644 index 000000000..2171d7d2e --- /dev/null +++ b/lib/styles/header.css @@ -0,0 +1,53 @@ +.sc-header { + background: #4e8cff; + min-height: 75px; + border-top-left-radius: 9px; + border-top-right-radius: 9px; + color: white; + padding: 10px; + box-shadow: 0 1px 4px rgba(0,0,0,.2); + position: relative; + box-sizing: border-box; + display: flex; +} + +.sc-header--img { + border-radius: 50%; + align-self: center; + padding: 10px; +} + +.sc-header--team-name { + align-self: center; + padding: 10px; + flex: 1; + user-select: none; + border-radius: 5px; +} + +.sc-header--close-button { + width: 40px; + align-self: center; + height: 40px; + margin-right: 10px; + box-sizing: border-box; + cursor: pointer; + border-radius: 5px; +} + +.sc-header--close-button:hover { + background: #4882ed; +} + +.sc-header--close-button img { + width: 100%; + height: 100%; + padding: 13px; + box-sizing: border-box; +} + +@media (max-width: 450px) { + .sc-header { + border-radius: 0px; + } +} \ No newline at end of file diff --git a/lib/styles/index.js b/lib/styles/index.js new file mode 100644 index 000000000..515436a4e --- /dev/null +++ b/lib/styles/index.js @@ -0,0 +1,15 @@ +'use strict'; + +require('./emojiPicker.css'); + +require('./chat-window.css'); + +require('./launcher.css'); + +require('./header.css'); + +require('./message.css'); + +require('./user-input.css'); + +require('./popup-window.css'); \ No newline at end of file diff --git a/lib/styles/launcher.css b/lib/styles/launcher.css new file mode 100644 index 000000000..5c3ae97da --- /dev/null +++ b/lib/styles/launcher.css @@ -0,0 +1,82 @@ +.sc-launcher { + width: 60px; + height: 60px; + background-color: #4e8cff; + background-position: center; + background-repeat: no-repeat; + position: fixed; + right: 25px; + bottom: 25px; + border-radius: 50%; + box-shadow: none; + transition: box-shadow 0.2s ease-in-out; +} + +.sc-launcher:before { + content: ''; + position: relative; + display: block; + width: 60px; + height: 60px; + border-radius: 50%; + transition: box-shadow 0.2s ease-in-out; +} + +.sc-launcher .sc-open-icon, +.sc-launcher .sc-closed-icon { + width: 60px; + height: 60px; + position: fixed; + right: 25px; + bottom: 25px; + transition: opacity 100ms ease-in-out, transform 100ms ease-in-out; +} + +.sc-launcher .sc-closed-icon { + transition: opacity 100ms ease-in-out, transform 100ms ease-in-out; + width: 60px; + height: 60px; +} + +.sc-launcher .sc-open-icon { + padding: 20px; + box-sizing: border-box; + opacity: 0; +} + +.sc-launcher.opened .sc-open-icon { + transform: rotate(-90deg); + opacity: 1; +} + +.sc-launcher.opened .sc-closed-icon { + transform: rotate(-90deg); + opacity: 0; +} + +.sc-launcher.opened:before { + box-shadow: 0px 0px 400px 250px rgba(148, 149, 150, 0.2); +} + +.sc-launcher:hover { + box-shadow: 0 0px 27px 1.5px rgba(0,0,0,0.2); +} + +.sc-new-messages-count { + position: absolute; + top: -3px; + left: 41px; + display: flex; + justify-content: center; + flex-direction: column; + border-radius: 50%; + width: 22px; + height: 22px; + background: #ff4646; + color: white; + text-align: center; + margin: auto; + font-size: 12px; + font-weight: 500; + box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.3); +} \ No newline at end of file diff --git a/lib/styles/message.css b/lib/styles/message.css new file mode 100644 index 000000000..f0b1cb63a --- /dev/null +++ b/lib/styles/message.css @@ -0,0 +1,88 @@ +.sc-message { + width: 300px; + margin: auto; + padding-bottom: 10px; + display: flex; +} + +.sc-message--content { + width: 100%; + display: flex; +} + +.sc-message--content.sent { + justify-content: flex-end; +} + +.sc-message--content.sent .sc-message--avatar { + display: none; +} + +.sc-message--avatar { + background-image: url(https://d13yacurqjgara.cloudfront.net/assets/avatar-default-aa2eab7684294781f93bc99ad394a0eb3249c5768c21390163c9f55ea8ef83a4.gif); + background-repeat: no-repeat; + background-size: 100%; + background-position: center; + min-width: 30px; + min-height: 30px; + border-radius: 50%; + align-self: center; + margin-right: 15px; +} + +.sc-message--text { + padding: 17px 20px; + border-radius: 6px; + font-weight: 300; + font-size: 14px; + line-height: 1.4; + white-space: pre-wrap; + -webkit-font-smoothing: subpixel-antialiased; + word-wrap: break-word; + width: calc(100% - 90px); +} + +.sc-message--content.sent .sc-message--text { + color: white; + background-color: #4e8cff; + max-width: calc(100% - 120px); + word-wrap: break-word; +} + +.sc-message--content.received .sc-message--text { + color: #263238; + background-color: #f4f7f9; + margin-right: 40px; +} + +.sc-message--emoji { + font-size: 40px; +} + +.sc-message--file { + background: white; + border: solid 1px #CCCDD1; + padding: 15px 20px; + border-radius: 5px; + display: flex; + font-weight: 300; + font-size: 14px; + line-height: 1.4; + cursor: pointer; + text-decoration: none; +} + +.sc-message--file p { + margin: 0px 0px 0px 10px; + color: rgba(86, 88, 103, 0.6); +} + +.sc-message--file .sc-user-input--file-icon:hover path { + fill: rgba(86, 88, 103, 0.3); +} + +@media (max-width: 450px) { + .sc-message { + width: 80%; + } +} \ No newline at end of file diff --git a/lib/styles/popup-window.css b/lib/styles/popup-window.css new file mode 100644 index 000000000..abdd3b3fa --- /dev/null +++ b/lib/styles/popup-window.css @@ -0,0 +1,61 @@ +.sc-popup-window { + position: relative; + width: 150px; +} + +.sc-popup-window--cointainer { + position: absolute; + bottom: 20px; + right: 100px; + width: 330px; + max-height: 260px; + height: 260px; + box-shadow: 0px 7px 40px 2px rgba(148, 149, 150, 0.3); + background: white; + border-radius: 10px; + outline: none; + transition: 0.2s ease-in-out; + z-index: 1; + padding: 0px 5px 5px 5px; + box-sizing: border-box; +} + +.sc-popup-window--cointainer.closed { + opacity: 0; + visibility: hidden; + bottom: 14px; +} + +.sc-popup-window--cointainer:after { + content: ""; + width: 14px; + height: 14px; + background: white; + position: absolute; + z-index: -1; + bottom: -6px; + right: 28px; + transform: rotate(45deg); + border-radius: 2px; +} + +.sc-popup-window--search { + width: 290px; + box-sizing: border-box; + margin: auto; + display: block; + border-width: 0px 0px 1px 0px; + color: #565867; + padding-left: 25px; + height: 40px; + font-size: 14px; + background-image: url(https://js.intercomcdn.com/images/search@2x.32fca88e.png); + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: 0 12px; + outline: none; +} + +.sc-popup-window--search::placeholder { + color: #C1C7CD; +} \ No newline at end of file diff --git a/lib/styles/user-input.css b/lib/styles/user-input.css new file mode 100644 index 000000000..7aa50cbb0 --- /dev/null +++ b/lib/styles/user-input.css @@ -0,0 +1,140 @@ +.sc-user-input { + min-height: 55px; + margin: 0px; + position: relative; + bottom: 0; + display: flex; + background-color: #f4f7f9; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + transition: background-color .2s ease,box-shadow .2s ease; +} + + +.sc-user-input--text { + width: 300px; + resize: none; + border: none; + outline: none; + border-bottom-left-radius: 10px; + box-sizing: border-box; + padding: 18px; + font-size: 15px; + font-weight: 400; + line-height: 1.33; + white-space: pre-wrap; + word-wrap: break-word; + color: #565867; + -webkit-font-smoothing: antialiased; + max-height: 200px; + overflow: scroll; + bottom: 0; + overflow-x: hidden; + overflow-y: auto; +} + +.sc-user-input--text:empty:before { + content: attr(placeholder); + display: block; /* For Firefox */ + color: rgba(86, 88, 103, 0.3); + outline: none; +} + +.sc-user-input--buttons { + width: 100px; + position: absolute; + right: 10px; + height: 100%; + display: flex; + justify-content: flex-end; +} + +.sc-user-input--button:first-of-type { + width: 40px; +} + +.sc-user-input--button { + width: 30px; + height: 55px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.sc-user-input--button button { + cursor: pointer; +} + +.sc-user-input--buttons input[type="file"] { + display: none; +} + +.sc-user-input--picker-wrapper { + display: flex; + flex-direction: column; +} + +.sc-user-input.active { + box-shadow: none; + background-color: white; + box-shadow: 0px -5px 20px 0px rgba(150, 165, 190, 0.2); +} + +.sc-user-input--file-icon, +.sc-user-input--send-icon { + height: 20px; + width: 20px; + cursor: pointer; + align-self: center; + outline: none; +} + +.sc-user-input--file-icon path, +.sc-user-input--send-icon path { + fill: rgba(86, 88, 103, 0.3); +} + +.sc-user-input--file-icon:hover path, +.sc-user-input--send-icon:hover path { + fill: rgba(86, 88, 103, 1); +} + +.sc-user-input--emoji-icon-wrapper, +.sc-user-input--send-icon-wrapper, +.sc-user-input--file-icon-wrapper { + background: none; + border: none; + padding: 2px; + margin: 0px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.sc-user-input--send-icon-wrapper, +.sc-user-input--file-icon-wrapper { + flex-direction: row; +} + +.sc-user-input--emoji-icon-wrapper:focus { + outline: none; +} + +.sc-user-input--emoji-icon { + height: 18px; + cursor: pointer; + align-self: center; +} + +.sc-user-input--emoji-icon path, .sc-user-input--emoji-icon circle { + fill: rgba(86, 88, 103, 0.3); +} + +.sc-user-input--emoji-icon-wrapper:focus .sc-user-input--emoji-icon path, +.sc-user-input--emoji-icon-wrapper:focus .sc-user-input--emoji-icon circle, +.sc-user-input--emoji-icon.active path, +.sc-user-input--emoji-icon.active circle, +.sc-user-input--emoji-icon:hover path, +.sc-user-input--emoji-icon:hover circle { + fill: rgba(86, 88, 103, 1); +} From b96167b8e149a78b195e466f63cbe76d780a4fc0 Mon Sep 17 00:00:00 2001 From: Anmol Date: Fri, 23 Aug 2019 16:39:28 +0800 Subject: [PATCH 4/5] Remove build files --- lib/assets/chat-icon.svg | 1 - lib/assets/close-icon.png | Bin 340 -> 0 bytes lib/assets/logo-no-bg.svg | 1 - lib/assets/paperclip-icon.png | Bin 305 -> 0 bytes lib/assets/sounds/notification.mp3 | Bin 4219 -> 0 bytes lib/components/ChatWindow.js | 88 -------- lib/components/Header.js | 54 ----- lib/components/Launcher.js | 138 ------------- lib/components/MessageList.js | 52 ----- lib/components/Messages/EmojiMessage.js | 20 -- lib/components/Messages/FileMessage.js | 29 --- lib/components/Messages/TextMessage.js | 28 --- lib/components/Messages/index.js | 75 ------- lib/components/UserInput.js | 228 --------------------- lib/components/emoji-picker/EmojiPicker.js | 63 ------ lib/components/emoji-picker/emojiData.json | 1 - lib/components/icons/EmojiIcon.js | 63 ------ lib/components/icons/FileIcon.js | 65 ------ lib/components/icons/SendIcon.js | 64 ------ lib/components/popups/PopupWindow.js | 75 ------- lib/index.js | 14 -- lib/messageTypes.js | 15 -- lib/styles/chat-window.css | 55 ----- lib/styles/emojiPicker.css | 38 ---- lib/styles/header.css | 53 ----- lib/styles/index.js | 15 -- lib/styles/launcher.css | 82 -------- lib/styles/message.css | 88 -------- lib/styles/popup-window.css | 61 ------ lib/styles/user-input.css | 140 ------------- 30 files changed, 1606 deletions(-) delete mode 100755 lib/assets/chat-icon.svg delete mode 100644 lib/assets/close-icon.png delete mode 100644 lib/assets/logo-no-bg.svg delete mode 100644 lib/assets/paperclip-icon.png delete mode 100644 lib/assets/sounds/notification.mp3 delete mode 100644 lib/components/ChatWindow.js delete mode 100644 lib/components/Header.js delete mode 100644 lib/components/Launcher.js delete mode 100644 lib/components/MessageList.js delete mode 100644 lib/components/Messages/EmojiMessage.js delete mode 100644 lib/components/Messages/FileMessage.js delete mode 100644 lib/components/Messages/TextMessage.js delete mode 100644 lib/components/Messages/index.js delete mode 100644 lib/components/UserInput.js delete mode 100644 lib/components/emoji-picker/EmojiPicker.js delete mode 100644 lib/components/emoji-picker/emojiData.json delete mode 100644 lib/components/icons/EmojiIcon.js delete mode 100644 lib/components/icons/FileIcon.js delete mode 100644 lib/components/icons/SendIcon.js delete mode 100644 lib/components/popups/PopupWindow.js delete mode 100644 lib/index.js delete mode 100644 lib/messageTypes.js delete mode 100644 lib/styles/chat-window.css delete mode 100644 lib/styles/emojiPicker.css delete mode 100644 lib/styles/header.css delete mode 100644 lib/styles/index.js delete mode 100644 lib/styles/launcher.css delete mode 100644 lib/styles/message.css delete mode 100644 lib/styles/popup-window.css delete mode 100644 lib/styles/user-input.css diff --git a/lib/assets/chat-icon.svg b/lib/assets/chat-icon.svg deleted file mode 100755 index 6c384c7e4..000000000 --- a/lib/assets/chat-icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/lib/assets/close-icon.png b/lib/assets/close-icon.png deleted file mode 100644 index bc100906d4e995c2d5b1b76978c76856f4fc6997..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 340 zcmeAS@N?(olHy`uVBq!ia0vp^3P3E+!3-ofcG&L&QY`6?zK%d%Klh(RRv@3TILO_J zVcj{Imq3ngfKQ04PiEnNqCp|U+-*ROd?i7C!3@ml>n1JaIMP7E)hzC zE03!(s0&^?|0k9Et?LoL9V=vu`olcH{an^LB{Ts5qmP~s diff --git a/lib/assets/logo-no-bg.svg b/lib/assets/logo-no-bg.svg deleted file mode 100644 index 0ec9da66a..000000000 --- a/lib/assets/logo-no-bg.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/lib/assets/paperclip-icon.png b/lib/assets/paperclip-icon.png deleted file mode 100644 index 809fbeb20e4e0f252bb0c64e55b5530e13a8ac66..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 305 zcmeAS@N?(olHy`uVBq!ia0vp^0zfRp!3-o*pRS7lQY`6?zK#qG8~eHcB(ehejKx9j zP7LeL$-D$|ECYN(TzxVNkDj}F=*;CKXRjVUdj-e5=y1i=ppHW^E1EoyUY6h1HZL?>webSYoE3ES?hei`?J^H=j*=K5(A{@ z_;EO#`F`fu;3jc$`|i-l`2mIbMg%~S1vD41 zTY$a5o(0kuxV%8i0;3Bc3(SAZp6Tf6Vrgn`7ma%OcRUnWp9q`)fTeM;T;kUKJ@HTJ z|1Aikyq)k(7dL&sLiDmdkB0Gapxj@l;&SCf$KwZ@dt?mfwtK?u5)f}A`oo15agxHdHz0!!mEgQ%(}8O^iSvwC6i>dEDsTAH^;47s{xpIYazOmx+2 z1y%9;*9eobKm(5}db#5cd5PUlx{JQ`e%rs3uqIlBj6XM16?Yx$R7Q)o>+AC2ZYrJ#kL>L_Z{i|^usFR^u!Dw? zK@rI6V1$lFfd)lw-Bz#jr&yN>=Y4EwWD-h*$DIT z%uAjwH+{nNx1hiK@@jus5U)Oc8wYO4cYEvO#m!kS2#)!--C+GCHRWQSg_-LvJI%3X6$^Ir zl}S}8L=%W7ccc2w8)^!2ZY}e>wLc1J*;sMK>WP49vez)lcgA7&`pDF%VdRt0t9lSo z`8B0+fFf4He|kLeu>Wh8t4X!Zo&-#NMYWZ4=cL^J9*>Y7c2#{LGV85*|9(_#RQR#oz`Tzu)fSrvx`z{o4>`pmw&Ae2a_E>qZ-sNqkBsmISbL zJYS@Y0)jh-hMy15#pSsFW?uer@UQ^+a_>N#t=6;Hk0 z412@t+Qq6Vt}=iJp`A*yFE@IJ1O=4(lIh|#)8ya2v7?_nDHSkkr#JgP>l$L4MfyKM zkl7EDjmFl)6NkHAr`#ES|D`sqeIVq#%JjkBQgLNk&iXB{x?+R&pVjgW+bvDPK7T2h*S0Rg zAAa}Fs0WIakZ(_z8%Q*;G(`ZgXe^9_At3iFp*!J)fqsa$U2!rQgzPA2>s^|tSL`Yu zK{8-0{k=lC1TNsyO@#W#c!C`t2RfvNbbwZwy;*HNKu<3z>c|@b7}<(&`Xp`<7N}dQ zLrdVOY6}Z&T)0^*zjd)t6%LP8MOaE#^&pkKc-&ODHOPcvM8IUmvzl2M=e zN7aN%{8I_g;^{zf_O)s=n6@rM2M_N#oB~$IpqTSNE@+){1SvINe&Fd$bd<;s-yqT_ zpeliaJdENH1i(ysKy+=I&=jvWHoBtdF&%#4riZwvN;-^uV@!#~3?#MPSqN~W zPiH6}wMf56NlvLf;soeMtU8d^S| zqfVu4NVY>$7h{MCTrEBfL`*yx193!G(Xt6w>Dg;H51qNu7lB&U)sy+!`Js(=o)Lc; zfv|ou>8oSAV2k>fXN+xUESvjZ*Kyg!+-VMyGBmH3;(8+M8`m1!e%u$=FfD$jVYjBLBg?B6>7)L&#s3F(=? z4eaUu=nAPJg+vwWI*NBN+u6%D-}5UYpSDD3isC1>dI|p|>0Tg2=g6*qm(*WOC8C$} zOH|eWx|aZDPk`b~tKz`2_VGhL%6zEyj{|?|d--PcSM>P@zP5K`r_4w)Yx?f|dJ~-; z`EjB-$YRKkYvOv&_@bXAR4Xl@g;mmP+9xhJWgq}NLp3ly4p@z52#9~IuPX3rBwH!B%BaHI4UY%UWkRXsDylLp`s{^x-5T4 zSl#p}r*BL^P2egE4IvGoQa*)Bgor{M4TA?x#(?#8-;!IOE2rv_z@N4UbvRdYMQT7q zLzUL*gv7osAw3BA!$b?egO3fR!?}brOTtT1D2dHhq^30oGfxop8(243TiZgk$A5&p z>um6>SG`eoKXg;4c$-7x+D+v*3t5Ms;>-is9bRiJ_nyv7lgPQXd=_TOCmXykP5)}4 z1dZ^Z(6E!wLpJo%8UBq5v!lbv?CzT%TrQ;jym1CrqpK4!-#2)svybPt<=Zfg8l;96 z0TomoFjG6nk`WfZ-DN@A(Lg745+NUv9k>tF0vo;vdriNLA#+t1pF8-U)w6J$b=$-Y zud$q&8T;PsvRA_EA)7wOY;jjD)K^= z`?v?YDIl}oUefqzfCjSHBQ+Whl+bRbYHeo)NQS2C0GB3%%C}O&@)g%9H(lSnIxEzB z6&(-5RwS%5pBAUov}dq$_Tc2ym>^Y~YRrj=N|QS{B`M$fvqhFfSzGjJkt!xn=Ds|g ze&=D`3oH-@2AcjgzZs@fe;l}@V#-}&X=&SxmO_bX;`P0JT5{PK=jwU8bLbHk`(`ca z?8SjCmv?sgzrXP$yJuyXmv1J*=uAO}G>5j}Si$p0=Cwomego{Qrvb<70Vb%ls8 this.props.messageList.length; - if (isIncoming && isNew) { - this.playIncomingMessageSound(); - } - }; - - Launcher.prototype.playIncomingMessageSound = function playIncomingMessageSound() { - var audio = new Audio(_notification2.default); - audio.play(); - }; - - Launcher.prototype.handleClick = function handleClick() { - if (this.props.handleClick !== undefined) { - this.props.handleClick(); - } else { - this.setState({ - isOpen: !this.state.isOpen - }); - } - }; - - Launcher.prototype.render = function render() { - var isOpen = this.props.hasOwnProperty('isOpen') ? this.props.isOpen : this.state.isOpen; - var classList = ['sc-launcher', isOpen ? 'opened' : '']; - return _react2.default.createElement( - 'div', - { id: 'sc-launcher' }, - _react2.default.createElement( - 'div', - { className: classList.join(' '), onClick: this.handleClick.bind(this) }, - _react2.default.createElement(MessageCount, { count: this.props.newMessagesCount, isOpen: isOpen }), - _react2.default.createElement('img', { className: 'sc-open-icon', src: _closeIcon2.default }), - _react2.default.createElement('img', { className: 'sc-closed-icon', src: _logoNoBg2.default }) - ), - _react2.default.createElement(_ChatWindow2.default, { - messageList: this.props.messageList, - onUserInputSubmit: this.props.onMessageWasSent, - onFilesSelected: this.props.onFilesSelected, - agentProfile: this.props.agentProfile, - isOpen: isOpen, - onClose: this.handleClick.bind(this), - showEmoji: this.props.showEmoji, - showFilePicker: this.props.showFilePicker - }) - ); - }; - - return Launcher; -}(_react.Component); - -var MessageCount = function MessageCount(props) { - if (props.count === 0 || props.isOpen === true) { - return null; - } - return _react2.default.createElement( - 'div', - { className: 'sc-new-messages-count' }, - props.count - ); -}; - -Launcher.propTypes = process.env.NODE_ENV !== "production" ? { - onMessageWasReceived: _propTypes2.default.func, - onMessageWasSent: _propTypes2.default.func, - newMessagesCount: _propTypes2.default.number, - isOpen: _propTypes2.default.bool, - handleClick: _propTypes2.default.func, - messageList: _propTypes2.default.arrayOf(_propTypes2.default.object), - mute: _propTypes2.default.bool, - showEmoji: _propTypes2.default.bool, - showFilePicker: _propTypes2.default.bool -} : {}; - -Launcher.defaultProps = { - newMessagesCount: 0, - showEmoji: true, - showFilePicker: true -}; - -exports.default = Launcher; -module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/MessageList.js b/lib/components/MessageList.js deleted file mode 100644 index cce84a6a6..000000000 --- a/lib/components/MessageList.js +++ /dev/null @@ -1,52 +0,0 @@ -'use strict'; - -exports.__esModule = true; - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _Messages = require('./Messages'); - -var _Messages2 = _interopRequireDefault(_Messages); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - -var MessageList = function (_Component) { - _inherits(MessageList, _Component); - - function MessageList() { - _classCallCheck(this, MessageList); - - return _possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - MessageList.prototype.componentDidUpdate = function componentDidUpdate(_prevProps, _prevState) { - this.scrollList.scrollTop = this.scrollList.scrollHeight; - }; - - MessageList.prototype.render = function render() { - var _this2 = this; - - return _react2.default.createElement( - 'div', - { className: 'sc-message-list', ref: function ref(el) { - return _this2.scrollList = el; - } }, - this.props.messages.map(function (message, i) { - return _react2.default.createElement(_Messages2.default, { message: message, key: i }); - }) - ); - }; - - return MessageList; -}(_react.Component); - -exports.default = MessageList; -module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/Messages/EmojiMessage.js b/lib/components/Messages/EmojiMessage.js deleted file mode 100644 index ba8d44cf5..000000000 --- a/lib/components/Messages/EmojiMessage.js +++ /dev/null @@ -1,20 +0,0 @@ -"use strict"; - -exports.__esModule = true; - -var _react = require("react"); - -var _react2 = _interopRequireDefault(_react); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var EmojiMessage = function EmojiMessage(props) { - return _react2.default.createElement( - "div", - { className: "sc-message--emoji" }, - props.data.emoji - ); -}; - -exports.default = EmojiMessage; -module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/components/Messages/FileMessage.js b/lib/components/Messages/FileMessage.js deleted file mode 100644 index a902462c1..000000000 --- a/lib/components/Messages/FileMessage.js +++ /dev/null @@ -1,29 +0,0 @@ -'use strict'; - -exports.__esModule = true; - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _FileIcon = require('./../icons/FileIcon'); - -var _FileIcon2 = _interopRequireDefault(_FileIcon); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var FileMessage = function FileMessage(props) { - return _react2.default.createElement( - 'a', - { className: 'sc-message--file', href: props.data.url, download: props.data.fileName }, - _react2.default.createElement(_FileIcon2.default, null), - _react2.default.createElement( - 'p', - null, - props.data.fileName - ) - ); -}; - -exports.default = FileMessage; -module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/Messages/TextMessage.js b/lib/components/Messages/TextMessage.js deleted file mode 100644 index 02f74e19e..000000000 --- a/lib/components/Messages/TextMessage.js +++ /dev/null @@ -1,28 +0,0 @@ -'use strict'; - -exports.__esModule = true; - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _reactLinkify = require('react-linkify'); - -var _reactLinkify2 = _interopRequireDefault(_reactLinkify); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var TextMessage = function TextMessage(props) { - return _react2.default.createElement( - 'div', - { className: 'sc-message--text' }, - _react2.default.createElement( - _reactLinkify2.default, - { properties: { target: '_blank' } }, - props.data.text - ) - ); -}; - -exports.default = TextMessage; -module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/Messages/index.js b/lib/components/Messages/index.js deleted file mode 100644 index 4a62575d7..000000000 --- a/lib/components/Messages/index.js +++ /dev/null @@ -1,75 +0,0 @@ -'use strict'; - -exports.__esModule = true; - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _TextMessage = require('./TextMessage'); - -var _TextMessage2 = _interopRequireDefault(_TextMessage); - -var _EmojiMessage = require('./EmojiMessage'); - -var _EmojiMessage2 = _interopRequireDefault(_EmojiMessage); - -var _FileMessage = require('./FileMessage'); - -var _FileMessage2 = _interopRequireDefault(_FileMessage); - -var _chatIcon = require('./../../assets/chat-icon.svg'); - -var _chatIcon2 = _interopRequireDefault(_chatIcon); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - -var Message = function (_Component) { - _inherits(Message, _Component); - - function Message() { - _classCallCheck(this, Message); - - return _possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - Message.prototype._renderMessageOfType = function _renderMessageOfType(type) { - switch (type) { - case 'text': - return _react2.default.createElement(_TextMessage2.default, this.props.message); - case 'emoji': - return _react2.default.createElement(_EmojiMessage2.default, this.props.message); - case 'file': - return _react2.default.createElement(_FileMessage2.default, this.props.message); - default: - console.error('Attempting to load message with unsupported file type \'' + type + '\''); - } - }; - - Message.prototype.render = function render() { - var contentClassList = ['sc-message--content', this.props.message.author === 'me' ? 'sent' : 'received']; - return _react2.default.createElement( - 'div', - { className: 'sc-message' }, - _react2.default.createElement( - 'div', - { className: contentClassList.join(' ') }, - _react2.default.createElement('div', { className: 'sc-message--avatar', style: { - backgroundImage: 'url(' + _chatIcon2.default + ')' - } }), - this._renderMessageOfType(this.props.message.type) - ) - ); - }; - - return Message; -}(_react.Component); - -exports.default = Message; -module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/UserInput.js b/lib/components/UserInput.js deleted file mode 100644 index 10bf998af..000000000 --- a/lib/components/UserInput.js +++ /dev/null @@ -1,228 +0,0 @@ -'use strict'; - -exports.__esModule = true; - -var _propTypes = require('prop-types'); - -var _propTypes2 = _interopRequireDefault(_propTypes); - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _SendIcon = require('./icons/SendIcon'); - -var _SendIcon2 = _interopRequireDefault(_SendIcon); - -var _FileIcon = require('./icons/FileIcon'); - -var _FileIcon2 = _interopRequireDefault(_FileIcon); - -var _EmojiIcon = require('./icons/EmojiIcon'); - -var _EmojiIcon2 = _interopRequireDefault(_EmojiIcon); - -var _PopupWindow = require('./popups/PopupWindow'); - -var _PopupWindow2 = _interopRequireDefault(_PopupWindow); - -var _EmojiPicker = require('./emoji-picker/EmojiPicker'); - -var _EmojiPicker2 = _interopRequireDefault(_EmojiPicker); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - -var UserInput = function (_Component) { - _inherits(UserInput, _Component); - - function UserInput() { - _classCallCheck(this, UserInput); - - var _this = _possibleConstructorReturn(this, _Component.call(this)); - - _this.toggleEmojiPicker = function (e) { - e.preventDefault(); - if (!_this.state.emojiPickerIsOpen) { - _this.setState({ emojiPickerIsOpen: true }); - } - }; - - _this.closeEmojiPicker = function (e) { - if (_this.emojiPickerButton.contains(e.target)) { - e.stopPropagation(); - e.preventDefault(); - } - _this.setState({ emojiPickerIsOpen: false }); - }; - - _this._handleEmojiPicked = function (emoji) { - _this.setState({ emojiPickerIsOpen: false }); - if (_this.state.inputHasText) { - _this.userInput.innerHTML += emoji; - } else { - _this.props.onSubmit({ - author: 'me', - type: 'emoji', - data: { emoji: emoji } - }); - } - }; - - _this.handleEmojiFilterChange = function (event) { - var emojiFilter = event.target.value; - _this.setState({ emojiFilter: emojiFilter }); - }; - - _this._renderEmojiPopup = function () { - return _react2.default.createElement( - _PopupWindow2.default, - { - isOpen: _this.state.emojiPickerIsOpen, - onClickedOutside: _this.closeEmojiPicker, - onInputChange: _this.handleEmojiFilterChange - }, - _react2.default.createElement(_EmojiPicker2.default, { - onEmojiPicked: _this._handleEmojiPicked, - filter: _this.state.emojiFilter - }) - ); - }; - - _this.state = { - inputActive: false, - inputHasText: false, - emojiPickerIsOpen: false, - emojiFilter: '' - }; - return _this; - } - - UserInput.prototype.componentDidMount = function componentDidMount() { - this.emojiPickerButton = document.querySelector('#sc-emoji-picker-button'); - }; - - UserInput.prototype.handleKeyDown = function handleKeyDown(event) { - if (event.keyCode === 13 && !event.shiftKey) { - return this._submitText(event); - } - }; - - UserInput.prototype.handleKeyUp = function handleKeyUp(event) { - var inputHasText = event.target.innerHTML.length !== 0 && event.target.innerText !== '\n'; - this.setState({ inputHasText: inputHasText }); - }; - - UserInput.prototype._showFilePicker = function _showFilePicker() { - this._fileUploadButton.click(); - }; - - UserInput.prototype._submitText = function _submitText(event) { - event.preventDefault(); - var text = this.userInput.textContent; - if (text && text.length > 0) { - this.props.onSubmit({ - author: 'me', - type: 'text', - data: { text: text } - }); - this.userInput.innerHTML = ''; - } - }; - - UserInput.prototype._onFilesSelected = function _onFilesSelected(event) { - if (event.target.files && event.target.files.length > 0) { - this.props.onFilesSelected(event.target.files); - } - }; - - UserInput.prototype._renderSendOrFileIcon = function _renderSendOrFileIcon() { - var _this2 = this; - - if (this.state.inputHasText) { - return _react2.default.createElement( - 'div', - { className: 'sc-user-input--button' }, - _react2.default.createElement(_SendIcon2.default, { onClick: this._submitText.bind(this) }) - ); - } else if (this.props.showFilePicker) { - return _react2.default.createElement( - 'div', - { className: 'sc-user-input--button' }, - _react2.default.createElement(_FileIcon2.default, { onClick: this._showFilePicker.bind(this) }), - _react2.default.createElement('input', { - type: 'file', - name: 'files[]', - multiple: true, - ref: function ref(e) { - _this2._fileUploadButton = e; - }, - onChange: this._onFilesSelected.bind(this) - }) - ); - } - }; - - UserInput.prototype.render = function render() { - var _this3 = this; - - var _state = this.state, - emojiPickerIsOpen = _state.emojiPickerIsOpen, - inputActive = _state.inputActive; - - return _react2.default.createElement( - 'form', - { className: 'sc-user-input ' + (inputActive ? 'active' : '') }, - _react2.default.createElement('div', { - role: 'button', - tabIndex: '0', - onFocus: function onFocus() { - _this3.setState({ inputActive: true }); - }, - onBlur: function onBlur() { - _this3.setState({ inputActive: false }); - }, - ref: function ref(e) { - _this3.userInput = e; - }, - onKeyDown: this.handleKeyDown.bind(this), - onKeyUp: this.handleKeyUp.bind(this), - contentEditable: 'true', - placeholder: 'Write a reply...', - className: 'sc-user-input--text' - }), - _react2.default.createElement( - 'div', - { className: 'sc-user-input--buttons' }, - _react2.default.createElement('div', { className: 'sc-user-input--button' }), - _react2.default.createElement( - 'div', - { className: 'sc-user-input--button' }, - this.props.showEmoji && _react2.default.createElement(_EmojiIcon2.default, { - onClick: this.toggleEmojiPicker, - isActive: emojiPickerIsOpen, - tooltip: this._renderEmojiPopup() - }) - ), - this._renderSendOrFileIcon() - ) - ); - }; - - return UserInput; -}(_react.Component); - -UserInput.propTypes = process.env.NODE_ENV !== "production" ? { - onSubmit: _propTypes2.default.func.isRequired, - onFilesSelected: _propTypes2.default.func.isRequired, - showEmoji: _propTypes2.default.bool, - showFilePicker: _propTypes2.default.bool -} : {}; - -exports.default = UserInput; -module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/emoji-picker/EmojiPicker.js b/lib/components/emoji-picker/EmojiPicker.js deleted file mode 100644 index 219f984e5..000000000 --- a/lib/components/emoji-picker/EmojiPicker.js +++ /dev/null @@ -1,63 +0,0 @@ -'use strict'; - -exports.__esModule = true; - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _emojiJs = require('emoji-js'); - -var _emojiJs2 = _interopRequireDefault(_emojiJs); - -var _emojiData = require('./emojiData'); - -var _emojiData2 = _interopRequireDefault(_emojiData); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var emojiConvertor = new _emojiJs2.default(); -emojiConvertor.init_env(); - -var EmojiPicker = function EmojiPicker(_ref) { - var onEmojiPicked = _ref.onEmojiPicked, - filter = _ref.filter; - return _react2.default.createElement( - 'div', - { className: 'sc-emoji-picker' }, - _emojiData2.default.map(function (category) { - var filteredEmojis = category.emojis.filter(function (_ref2) { - var name = _ref2.name; - return name.includes(filter); - }); - return _react2.default.createElement( - 'div', - { className: 'sc-emoji-picker--category', key: category.name }, - filteredEmojis.length > 0 && _react2.default.createElement( - 'div', - { className: 'sc-emoji-picker--category-title' }, - category.name - ), - filteredEmojis.map(function (_ref3) { - var char = _ref3.char, - _name = _ref3._name; - - return _react2.default.createElement( - 'span', - { - key: char, - className: 'sc-emoji-picker--emoji', - onClick: function onClick() { - return onEmojiPicked(char); - } - }, - char - ); - }) - ); - }) - ); -}; - -exports.default = EmojiPicker; -module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/emoji-picker/emojiData.json b/lib/components/emoji-picker/emojiData.json deleted file mode 100644 index 409c41b90..000000000 --- a/lib/components/emoji-picker/emojiData.json +++ /dev/null @@ -1 +0,0 @@ -[{"name":"People","emojis":[{"no":6,"code":"1F604","char":"๐Ÿ˜„","name":"grinning face with smiling eyes"},{"no":5,"code":"1F603","char":"๐Ÿ˜ƒ","name":"grinning face with big eyes"},{"no":1,"code":"1F600","char":"๐Ÿ˜€","name":"grinning face"},{"no":10,"code":"1F60A","char":"๐Ÿ˜Š","name":"smiling face with smiling eyes"},{"no":9,"code":"1F609","char":"๐Ÿ˜‰","name":"winking face"},{"no":13,"code":"1F60D","char":"๐Ÿ˜","name":"smiling face with heart-eyes"},{"no":14,"code":"1F618","char":"๐Ÿ˜˜","name":"face blowing a kiss"},{"no":17,"code":"1F61A","char":"๐Ÿ˜š","name":"kissing face with closed eyes"},{"no":15,"code":"1F617","char":"๐Ÿ˜—","name":"kissing face"},{"no":16,"code":"1F619","char":"๐Ÿ˜™","name":"kissing face with smiling eyes"},{"no":39,"code":"1F61C","char":"๐Ÿ˜œ","name":"winking face with tongue"},{"no":40,"code":"1F61D","char":"๐Ÿ˜","name":"squinting face with tongue"},{"no":38,"code":"1F61B","char":"๐Ÿ˜›","name":"face with tongue"},{"no":65,"code":"1F633","char":"๐Ÿ˜ณ","name":"flushed face"},{"no":2,"code":"1F601","char":"๐Ÿ˜","name":"beaming face with smiling eyes"},{"no":44,"code":"1F614","char":"๐Ÿ˜”","name":"pensive face"},{"no":37,"code":"1F60C","char":"๐Ÿ˜Œ","name":"relieved face"},{"no":42,"code":"1F612","char":"๐Ÿ˜’","name":"unamused face"},{"no":52,"code":"1F61E","char":"๐Ÿ˜ž","name":"disappointed face"},{"no":29,"code":"1F623","char":"๐Ÿ˜ฃ","name":"persevering face"},{"no":55,"code":"1F622","char":"๐Ÿ˜ข","name":"crying face"},{"no":3,"code":"1F602","char":"๐Ÿ˜‚","name":"face with tears of joy"},{"no":56,"code":"1F62D","char":"๐Ÿ˜ญ","name":"loudly crying face"},{"no":34,"code":"1F62A","char":"๐Ÿ˜ช","name":"sleepy face"},{"no":30,"code":"1F625","char":"๐Ÿ˜ฅ","name":"sad but relieved face"},{"no":63,"code":"1F630","char":"๐Ÿ˜ฐ","name":"anxious face with sweat"},{"no":7,"code":"1F605","char":"๐Ÿ˜…","name":"grinning face with sweat"},{"no":43,"code":"1F613","char":"๐Ÿ˜“","name":"downcast face with sweat"},{"no":60,"code":"1F629","char":"๐Ÿ˜ฉ","name":"weary face"},{"no":35,"code":"1F62B","char":"๐Ÿ˜ซ","name":"tired face"},{"no":59,"code":"1F628","char":"๐Ÿ˜จ","name":"fearful face"},{"no":64,"code":"1F631","char":"๐Ÿ˜ฑ","name":"face screaming in fear"},{"no":69,"code":"1F620","char":"๐Ÿ˜ ","name":"angry face"},{"no":68,"code":"1F621","char":"๐Ÿ˜ก","name":"pouting face"},{"no":54,"code":"1F624","char":"๐Ÿ˜ค","name":"face with steam from nose"},{"no":51,"code":"1F616","char":"๐Ÿ˜–","name":"confounded face"},{"no":8,"code":"1F606","char":"๐Ÿ˜†","name":"grinning squinting face"},{"no":11,"code":"1F60B","char":"๐Ÿ˜‹","name":"face savoring food"},{"no":71,"code":"1F637","char":"๐Ÿ˜ท","name":"face with medical mask"},{"no":12,"code":"1F60E","char":"๐Ÿ˜Ž","name":"smiling face with sunglasses"},{"no":36,"code":"1F634","char":"๐Ÿ˜ด","name":"sleeping face"},{"no":67,"code":"1F635","char":"๐Ÿ˜ต","name":"dizzy face"},{"no":48,"code":"1F632","char":"๐Ÿ˜ฒ","name":"astonished face"},{"no":53,"code":"1F61F","char":"๐Ÿ˜Ÿ","name":"worried face"},{"no":57,"code":"1F626","char":"๐Ÿ˜ฆ","name":"frowning face with open mouth"},{"no":58,"code":"1F627","char":"๐Ÿ˜ง","name":"anguished face"},{"no":86,"code":"1F47F","char":"๐Ÿ‘ฟ","name":"angry face with horns"},{"no":31,"code":"1F62E","char":"๐Ÿ˜ฎ","name":"face with open mouth"},{"no":62,"code":"1F62C","char":"๐Ÿ˜ฌ","name":"grimacing face"},{"no":24,"code":"1F610","char":"๐Ÿ˜","name":"neutral face"},{"no":45,"code":"1F615","char":"๐Ÿ˜•","name":"confused face"},{"no":33,"code":"1F62F","char":"๐Ÿ˜ฏ","name":"hushed face"},{"no":28,"code":"1F60F","char":"๐Ÿ˜","name":"smirking face"},{"no":25,"code":"1F611","char":"๐Ÿ˜‘","name":"expressionless face"},{"no":462,"code":"1F472","char":"๐Ÿ‘ฒ","name":"man with Chinese cap"},{"no":444,"code":"1F473","char":"๐Ÿ‘ณ","name":"person wearing turban"},{"no":360,"code":"1F46E","char":"๐Ÿ‘ฎ","name":"police officer"},{"no":414,"code":"1F477","char":"๐Ÿ‘ท","name":"construction worker"},{"no":396,"code":"1F482","char":"๐Ÿ’‚","name":"guard"},{"no":108,"code":"1F476","char":"๐Ÿ‘ถ","name":"baby"},{"no":120,"code":"1F466","char":"๐Ÿ‘ฆ","name":"boy"},{"no":126,"code":"1F467","char":"๐Ÿ‘ง","name":"girl"},{"no":138,"code":"1F468","char":"๐Ÿ‘จ","name":"man"},{"no":144,"code":"1F469","char":"๐Ÿ‘ฉ","name":"woman"},{"no":156,"code":"1F474","char":"๐Ÿ‘ด","name":"old man"},{"no":162,"code":"1F475","char":"๐Ÿ‘ต","name":"old woman"},{"no":480,"code":"1F471","char":"๐Ÿ‘ฑ","name":"blond-haired person"},{"no":522,"code":"1F47C","char":"๐Ÿ‘ผ","name":"baby angel"},{"no":438,"code":"1F478","char":"๐Ÿ‘ธ","name":"princess"},{"no":96,"code":"1F63A","char":"๐Ÿ˜บ","name":"grinning cat face"},{"no":97,"code":"1F638","char":"๐Ÿ˜ธ","name":"grinning cat face with smiling eyes"},{"no":99,"code":"1F63B","char":"๐Ÿ˜ป","name":"smiling cat face with heart-eyes"},{"no":101,"code":"1F63D","char":"๐Ÿ˜ฝ","name":"kissing cat face"},{"no":100,"code":"1F63C","char":"๐Ÿ˜ผ","name":"cat face with wry smile"},{"no":102,"code":"1F640","char":"๐Ÿ™€","name":"weary cat face"},{"no":103,"code":"1F63F","char":"๐Ÿ˜ฟ","name":"crying cat face"},{"no":98,"code":"1F639","char":"๐Ÿ˜น","name":"cat face with tears of joy"},{"no":104,"code":"1F63E","char":"๐Ÿ˜พ","name":"pouting cat face"},{"no":87,"code":"1F479","char":"๐Ÿ‘น","name":"ogre"},{"no":88,"code":"1F47A","char":"๐Ÿ‘บ","name":"goblin"},{"no":105,"code":"1F648","char":"๐Ÿ™ˆ","name":"see-no-evil monkey"},{"no":106,"code":"1F649","char":"๐Ÿ™‰","name":"hear-no-evil monkey"},{"no":107,"code":"1F64A","char":"๐Ÿ™Š","name":"speak-no-evil monkey"},{"no":89,"code":"1F480","char":"๐Ÿ’€","name":"skull"},{"no":92,"code":"1F47D","char":"๐Ÿ‘ฝ","name":"alien"},{"no":95,"code":"1F4A9","char":"๐Ÿ’ฉ","name":"pile of poo"},{"no":1927,"code":"1F525","char":"๐Ÿ”ฅ","name":"fire"},{"no":1934,"code":"2728","char":"โœจ","name":"sparkles"},{"no":1902,"code":"1F31F","char":"๐ŸŒŸ","name":"glowing star"},{"no":1469,"code":"1F4AB","char":"๐Ÿ’ซ","name":"dizzy"},{"no":1466,"code":"1F4A5","char":"๐Ÿ’ฅ","name":"collision"},{"no":1464,"code":"1F4A2","char":"๐Ÿ’ข","name":"anger symbol"},{"no":1467,"code":"1F4A6","char":"๐Ÿ’ฆ","name":"sweat droplets"},{"no":1928,"code":"1F4A7","char":"๐Ÿ’ง","name":"droplet"},{"no":1463,"code":"1F4A4","char":"๐Ÿ’ค","name":"zzz"},{"no":1468,"code":"1F4A8","char":"๐Ÿ’จ","name":"dashing away"},{"no":1425,"code":"1F442","char":"๐Ÿ‘‚","name":"ear"},{"no":1438,"code":"1F440","char":"๐Ÿ‘€","name":"eyes"},{"no":1431,"code":"1F443","char":"๐Ÿ‘ƒ","name":"nose"},{"no":1442,"code":"1F445","char":"๐Ÿ‘…","name":"tongue"},{"no":1443,"code":"1F444","char":"๐Ÿ‘„","name":"mouth"},{"no":1328,"code":"1F44D","char":"๐Ÿ‘","name":"thumbs up"},{"no":1334,"code":"1F44E","char":"๐Ÿ‘Ž","name":"thumbs down"},{"no":1322,"code":"1F44C","char":"๐Ÿ‘Œ","name":"OK hand"},{"no":1346,"code":"1F44A","char":"๐Ÿ‘Š","name":"oncoming fist"},{"no":1340,"code":"270A","char":"โœŠ","name":"raised fist"},{"no":1370,"code":"1F44B","char":"๐Ÿ‘‹","name":"waving hand"},{"no":1316,"code":"270B","char":"โœ‹","name":"raised hand"},{"no":1394,"code":"1F450","char":"๐Ÿ‘","name":"open hands"},{"no":1262,"code":"1F446","char":"๐Ÿ‘†","name":"backhand index pointing up"},{"no":1274,"code":"1F447","char":"๐Ÿ‘‡","name":"backhand index pointing down"},{"no":1250,"code":"1F449","char":"๐Ÿ‘‰","name":"backhand index pointing right"},{"no":1244,"code":"1F448","char":"๐Ÿ‘ˆ","name":"backhand index pointing left"},{"no":1400,"code":"1F64C","char":"๐Ÿ™Œ","name":"raising hands"},{"no":1412,"code":"1F64F","char":"๐Ÿ™","name":"folded hands"},{"no":1388,"code":"1F44F","char":"๐Ÿ‘","name":"clapping hands"},{"no":1238,"code":"1F4AA","char":"๐Ÿ’ช","name":"flexed biceps"},{"no":834,"code":"1F6B6","char":"๐Ÿšถ","name":"person walking"},{"no":852,"code":"1F3C3","char":"๐Ÿƒ","name":"person running"},{"no":870,"code":"1F483","char":"๐Ÿ’ƒ","name":"woman dancing"},{"no":1195,"code":"1F46B","char":"๐Ÿ‘ซ","name":"man and woman holding hands"},{"no":1206,"code":"1F46A","char":"๐Ÿ‘ช","name":"family"},{"no":1198,"code":"1F48F","char":"๐Ÿ’","name":"kiss"},{"no":1202,"code":"1F491","char":"๐Ÿ’‘","name":"couple with heart"},{"no":882,"code":"1F46F","char":"๐Ÿ‘ฏ","name":"people with bunny ears"},{"no":690,"code":"1F646","char":"๐Ÿ™†","name":"person gesturing OK"},{"no":672,"code":"1F645","char":"๐Ÿ™…","name":"person gesturing NO"},{"no":708,"code":"1F481","char":"๐Ÿ’","name":"person tipping hand"},{"no":726,"code":"1F64B","char":"๐Ÿ™‹","name":"person raising hand"},{"no":798,"code":"1F486","char":"๐Ÿ’†","name":"person getting massage"},{"no":816,"code":"1F487","char":"๐Ÿ’‡","name":"person getting haircut"},{"no":1419,"code":"1F485","char":"๐Ÿ’…","name":"nail polish"},{"no":504,"code":"1F470","char":"๐Ÿ‘ฐ","name":"bride with veil"},{"no":654,"code":"1F64E","char":"๐Ÿ™Ž","name":"person pouting"},{"no":636,"code":"1F64D","char":"๐Ÿ™","name":"person frowning"},{"no":744,"code":"1F647","char":"๐Ÿ™‡","name":"person bowing"},{"no":1500,"code":"1F3A9","char":"๐ŸŽฉ","name":"top hat"},{"no":1498,"code":"1F451","char":"๐Ÿ‘‘","name":"crown"},{"no":1499,"code":"1F452","char":"๐Ÿ‘’","name":"womanโ€™s hat"},{"no":1494,"code":"1F45F","char":"๐Ÿ‘Ÿ","name":"running shoe"},{"no":1493,"code":"1F45E","char":"๐Ÿ‘ž","name":"manโ€™s shoe"},{"no":1496,"code":"1F461","char":"๐Ÿ‘ก","name":"womanโ€™s sandal"},{"no":1495,"code":"1F460","char":"๐Ÿ‘ ","name":"high-heeled shoe"},{"no":1497,"code":"1F462","char":"๐Ÿ‘ข","name":"womanโ€™s boot"},{"no":1478,"code":"1F455","char":"๐Ÿ‘•","name":"t-shirt"},{"no":1477,"code":"1F454","char":"๐Ÿ‘”","name":"necktie"},{"no":1487,"code":"1F45A","char":"๐Ÿ‘š","name":"womanโ€™s clothes"},{"no":1484,"code":"1F457","char":"๐Ÿ‘—","name":"dress"},{"no":1976,"code":"1F3BD","char":"๐ŸŽฝ","name":"running shirt"},{"no":1479,"code":"1F456","char":"๐Ÿ‘–","name":"jeans"},{"no":1485,"code":"1F458","char":"๐Ÿ‘˜","name":"kimono"},{"no":1486,"code":"1F459","char":"๐Ÿ‘™","name":"bikini"},{"no":2097,"code":"1F4BC","char":"๐Ÿ’ผ","name":"briefcase"},{"no":1489,"code":"1F45C","char":"๐Ÿ‘œ","name":"handbag"},{"no":1490,"code":"1F45D","char":"๐Ÿ‘","name":"clutch bag"},{"no":1488,"code":"1F45B","char":"๐Ÿ‘›","name":"purse"},{"no":1475,"code":"1F453","char":"๐Ÿ‘“","name":"glasses"},{"no":1944,"code":"1F380","char":"๐ŸŽ€","name":"ribbon"},{"no":1918,"code":"1F302","char":"๐ŸŒ‚","name":"closed umbrella"},{"no":1505,"code":"1F484","char":"๐Ÿ’„","name":"lipstick"},{"no":1454,"code":"1F49B","char":"๐Ÿ’›","name":"yellow heart"},{"no":1452,"code":"1F499","char":"๐Ÿ’™","name":"blue heart"},{"no":1456,"code":"1F49C","char":"๐Ÿ’œ","name":"purple heart"},{"no":1453,"code":"1F49A","char":"๐Ÿ’š","name":"green heart"},{"no":1448,"code":"1F494","char":"๐Ÿ’”","name":"broken heart"},{"no":1451,"code":"1F497","char":"๐Ÿ’—","name":"growing heart"},{"no":1447,"code":"1F493","char":"๐Ÿ’“","name":"beating heart"},{"no":1449,"code":"1F495","char":"๐Ÿ’•","name":"two hearts"},{"no":1450,"code":"1F496","char":"๐Ÿ’–","name":"sparkling heart"},{"no":1459,"code":"1F49E","char":"๐Ÿ’ž","name":"revolving hearts"},{"no":1445,"code":"1F498","char":"๐Ÿ’˜","name":"heart with arrow"},{"no":1462,"code":"1F48C","char":"๐Ÿ’Œ","name":"love letter"},{"no":1444,"code":"1F48B","char":"๐Ÿ’‹","name":"kiss mark"},{"no":1506,"code":"1F48D","char":"๐Ÿ’","name":"ring"},{"no":1507,"code":"1F48E","char":"๐Ÿ’Ž","name":"gem stone"},{"no":958,"code":"1F464","char":"๐Ÿ‘ค","name":"bust in silhouette"},{"no":1470,"code":"1F4AC","char":"๐Ÿ’ฌ","name":"speech balloon"},{"no":1437,"code":"1F463","char":"๐Ÿ‘ฃ","name":"footprints"}]},{"name":"Nature","emojis":[{"no":1511,"code":"1F436","char":"๐Ÿถ","name":"dog face"},{"no":1514,"code":"1F43A","char":"๐Ÿบ","name":"wolf face"},{"no":1516,"code":"1F431","char":"๐Ÿฑ","name":"cat face"},{"no":1543,"code":"1F42D","char":"๐Ÿญ","name":"mouse face"},{"no":1546,"code":"1F439","char":"๐Ÿน","name":"hamster face"},{"no":1547,"code":"1F430","char":"๐Ÿฐ","name":"rabbit face"},{"no":1568,"code":"1F438","char":"๐Ÿธ","name":"frog face"},{"no":1519,"code":"1F42F","char":"๐Ÿฏ","name":"tiger face"},{"no":1553,"code":"1F428","char":"๐Ÿจ","name":"koala"},{"no":1552,"code":"1F43B","char":"๐Ÿป","name":"bear face"},{"no":1531,"code":"1F437","char":"๐Ÿท","name":"pig face"},{"no":1534,"code":"1F43D","char":"๐Ÿฝ","name":"pig nose"},{"no":1527,"code":"1F42E","char":"๐Ÿฎ","name":"cow face"},{"no":1533,"code":"1F417","char":"๐Ÿ—","name":"boar"},{"no":1508,"code":"1F435","char":"๐Ÿต","name":"monkey face"},{"no":1509,"code":"1F412","char":"๐Ÿ’","name":"monkey"},{"no":1522,"code":"1F434","char":"๐Ÿด","name":"horse face"},{"no":1536,"code":"1F411","char":"๐Ÿ‘","name":"ewe"},{"no":1541,"code":"1F418","char":"๐Ÿ˜","name":"elephant"},{"no":1554,"code":"1F43C","char":"๐Ÿผ","name":"panda face"},{"no":1563,"code":"1F427","char":"๐Ÿง","name":"penguin"},{"no":1562,"code":"1F426","char":"๐Ÿฆ","name":"bird"},{"no":1560,"code":"1F424","char":"๐Ÿค","name":"baby chick"},{"no":1561,"code":"1F425","char":"๐Ÿฅ","name":"front-facing baby chick"},{"no":1559,"code":"1F423","char":"๐Ÿฃ","name":"hatching chick"},{"no":1557,"code":"1F414","char":"๐Ÿ”","name":"chicken"},{"no":1572,"code":"1F40D","char":"๐Ÿ","name":"snake"},{"no":1570,"code":"1F422","char":"๐Ÿข","name":"turtle"},{"no":1591,"code":"1F41B","char":"๐Ÿ›","name":"bug"},{"no":1593,"code":"1F41D","char":"๐Ÿ","name":"honeybee"},{"no":1592,"code":"1F41C","char":"๐Ÿœ","name":"ant"},{"no":1594,"code":"1F41E","char":"๐Ÿž","name":"lady beetle"},{"no":1589,"code":"1F40C","char":"๐ŸŒ","name":"snail"},{"no":1584,"code":"1F419","char":"๐Ÿ™","name":"octopus"},{"no":1585,"code":"1F41A","char":"๐Ÿš","name":"spiral shell"},{"no":1581,"code":"1F420","char":"๐Ÿ ","name":"tropical fish"},{"no":1580,"code":"1F41F","char":"๐ŸŸ","name":"fish"},{"no":1579,"code":"1F42C","char":"๐Ÿฌ","name":"dolphin"},{"no":1577,"code":"1F433","char":"๐Ÿณ","name":"spouting whale"},{"no":1523,"code":"1F40E","char":"๐ŸŽ","name":"horse"},{"no":1573,"code":"1F432","char":"๐Ÿฒ","name":"dragon face"},{"no":1582,"code":"1F421","char":"๐Ÿก","name":"blowfish"},{"no":1539,"code":"1F42B","char":"๐Ÿซ","name":"two-hump camel"},{"no":1513,"code":"1F429","char":"๐Ÿฉ","name":"poodle"},{"no":1555,"code":"1F43E","char":"๐Ÿพ","name":"paw prints"},{"no":1599,"code":"1F490","char":"๐Ÿ’","name":"bouquet"},{"no":1600,"code":"1F338","char":"๐ŸŒธ","name":"cherry blossom"},{"no":1608,"code":"1F337","char":"๐ŸŒท","name":"tulip"},{"no":1617,"code":"1F340","char":"๐Ÿ€","name":"four leaf clover"},{"no":1603,"code":"1F339","char":"๐ŸŒน","name":"rose"},{"no":1606,"code":"1F33B","char":"๐ŸŒป","name":"sunflower"},{"no":1605,"code":"1F33A","char":"๐ŸŒบ","name":"hibiscus"},{"no":1618,"code":"1F341","char":"๐Ÿ","name":"maple leaf"},{"no":1620,"code":"1F343","char":"๐Ÿƒ","name":"leaf fluttering in wind"},{"no":1619,"code":"1F342","char":"๐Ÿ‚","name":"fallen leaf"},{"no":1615,"code":"1F33F","char":"๐ŸŒฟ","name":"herb"},{"no":1614,"code":"1F33E","char":"๐ŸŒพ","name":"sheaf of rice"},{"no":1645,"code":"1F344","char":"๐Ÿ„","name":"mushroom"},{"no":1613,"code":"1F335","char":"๐ŸŒต","name":"cactus"},{"no":1612,"code":"1F334","char":"๐ŸŒด","name":"palm tree"},{"no":1647,"code":"1F330","char":"๐ŸŒฐ","name":"chestnut"},{"no":1609,"code":"1F331","char":"๐ŸŒฑ","name":"seedling"},{"no":1607,"code":"1F33C","char":"๐ŸŒผ","name":"blossom"},{"no":1885,"code":"1F311","char":"๐ŸŒ‘","name":"new moon"},{"no":1887,"code":"1F313","char":"๐ŸŒ“","name":"first quarter moon"},{"no":1888,"code":"1F314","char":"๐ŸŒ”","name":"waxing gibbous moon"},{"no":1889,"code":"1F315","char":"๐ŸŒ•","name":"full moon"},{"no":1895,"code":"1F31B","char":"๐ŸŒ›","name":"first quarter moon face"},{"no":1893,"code":"1F319","char":"๐ŸŒ™","name":"crescent moon"},{"no":1725,"code":"1F30F","char":"๐ŸŒ","name":"globe showing Asia-Australia"},{"no":1731,"code":"1F30B","char":"๐ŸŒ‹","name":"volcano"},{"no":1777,"code":"1F30C","char":"๐ŸŒŒ","name":"milky way"},{"no":1903,"code":"1F320","char":"๐ŸŒ ","name":"shooting star"},{"no":1905,"code":"26C5","char":"โ›…","name":"sun behind cloud"},{"no":1925,"code":"26C4","char":"โ›„","name":"snowman without snow"},{"no":1916,"code":"1F300","char":"๐ŸŒ€","name":"cyclone"},{"no":1769,"code":"1F301","char":"๐ŸŒ","name":"foggy"},{"no":1917,"code":"1F308","char":"๐ŸŒˆ","name":"rainbow"},{"no":1929,"code":"1F30A","char":"๐ŸŒŠ","name":"water wave"}]},{"name":"Objects","emojis":[{"no":1939,"code":"1F38D","char":"๐ŸŽ","name":"pine decoration"},{"no":1458,"code":"1F49D","char":"๐Ÿ’","name":"heart with ribbon"},{"no":1940,"code":"1F38E","char":"๐ŸŽŽ","name":"Japanese dolls"},{"no":1492,"code":"1F392","char":"๐ŸŽ’","name":"school backpack"},{"no":1501,"code":"1F393","char":"๐ŸŽ“","name":"graduation cap"},{"no":1941,"code":"1F38F","char":"๐ŸŽ","name":"carp streamer"},{"no":1932,"code":"1F386","char":"๐ŸŽ†","name":"fireworks"},{"no":1933,"code":"1F387","char":"๐ŸŽ‡","name":"sparkler"},{"no":1942,"code":"1F390","char":"๐ŸŽ","name":"wind chime"},{"no":1943,"code":"1F391","char":"๐ŸŽ‘","name":"moon viewing ceremony"},{"no":1930,"code":"1F383","char":"๐ŸŽƒ","name":"jack-o-lantern"},{"no":91,"code":"1F47B","char":"๐Ÿ‘ป","name":"ghost"},{"no":528,"code":"1F385","char":"๐ŸŽ…","name":"Santa Claus"},{"no":1931,"code":"1F384","char":"๐ŸŽ„","name":"Christmas tree"},{"no":1945,"code":"1F381","char":"๐ŸŽ","name":"wrapped gift"},{"no":1938,"code":"1F38B","char":"๐ŸŽ‹","name":"tanabata tree"},{"no":1936,"code":"1F389","char":"๐ŸŽ‰","name":"party popper"},{"no":1937,"code":"1F38A","char":"๐ŸŽŠ","name":"confetti ball"},{"no":1935,"code":"1F388","char":"๐ŸŽˆ","name":"balloon"},{"no":2359,"code":"1F38C","char":"๐ŸŽŒ","name":"crossed flags"},{"no":2150,"code":"1F52E","char":"๐Ÿ”ฎ","name":"crystal ball"},{"no":2032,"code":"1F3A5","char":"๐ŸŽฅ","name":"movie camera"},{"no":2037,"code":"1F4F7","char":"๐Ÿ“ท","name":"camera"},{"no":2039,"code":"1F4F9","char":"๐Ÿ“น","name":"video camera"},{"no":2040,"code":"1F4FC","char":"๐Ÿ“ผ","name":"videocassette"},{"no":2030,"code":"1F4BF","char":"๐Ÿ’ฟ","name":"optical disk"},{"no":2031,"code":"1F4C0","char":"๐Ÿ“€","name":"dvd"},{"no":2028,"code":"1F4BD","char":"๐Ÿ’ฝ","name":"computer disk"},{"no":2029,"code":"1F4BE","char":"๐Ÿ’พ","name":"floppy disk"},{"no":2022,"code":"1F4BB","char":"๐Ÿ’ป","name":"laptop computer"},{"no":2014,"code":"1F4F1","char":"๐Ÿ“ฑ","name":"mobile phone"},{"no":2017,"code":"1F4DE","char":"๐Ÿ“ž","name":"telephone receiver"},{"no":2018,"code":"1F4DF","char":"๐Ÿ“Ÿ","name":"pager"},{"no":2019,"code":"1F4E0","char":"๐Ÿ“ ","name":"fax machine"},{"no":2045,"code":"1F4E1","char":"๐Ÿ“ก","name":"satellite antenna"},{"no":2036,"code":"1F4FA","char":"๐Ÿ“บ","name":"television"},{"no":2007,"code":"1F4FB","char":"๐Ÿ“ป","name":"radio"},{"no":1993,"code":"1F50A","char":"๐Ÿ”Š","name":"speaker high volume"},{"no":1997,"code":"1F514","char":"๐Ÿ””","name":"bell"},{"no":1994,"code":"1F4E2","char":"๐Ÿ“ข","name":"loudspeaker"},{"no":1995,"code":"1F4E3","char":"๐Ÿ“ฃ","name":"megaphone"},{"no":1855,"code":"23F3","char":"โณ","name":"hourglass not done"},{"no":1854,"code":"231B","char":"โŒ›","name":"hourglass done"},{"no":1857,"code":"23F0","char":"โฐ","name":"alarm clock"},{"no":1856,"code":"231A","char":"โŒš","name":"watch"},{"no":2121,"code":"1F513","char":"๐Ÿ”“","name":"unlocked"},{"no":2120,"code":"1F512","char":"๐Ÿ”’","name":"locked"},{"no":2122,"code":"1F50F","char":"๐Ÿ”","name":"locked with pen"},{"no":2123,"code":"1F510","char":"๐Ÿ”","name":"locked with key"},{"no":2124,"code":"1F511","char":"๐Ÿ”‘","name":"key"},{"no":2042,"code":"1F50E","char":"๐Ÿ”Ž","name":"magnifying glass tilted right"},{"no":2047,"code":"1F4A1","char":"๐Ÿ’ก","name":"light bulb"},{"no":2048,"code":"1F526","char":"๐Ÿ”ฆ","name":"flashlight"},{"no":2021,"code":"1F50C","char":"๐Ÿ”Œ","name":"electric plug"},{"no":2020,"code":"1F50B","char":"๐Ÿ”‹","name":"battery"},{"no":2041,"code":"1F50D","char":"๐Ÿ”","name":"magnifying glass tilted left"},{"no":939,"code":"1F6C0","char":"๐Ÿ›€","name":"person taking bath"},{"no":1851,"code":"1F6BD","char":"๐Ÿšฝ","name":"toilet"},{"no":2135,"code":"1F527","char":"๐Ÿ”ง","name":"wrench"},{"no":2136,"code":"1F529","char":"๐Ÿ”ฉ","name":"nut and bolt"},{"no":2126,"code":"1F528","char":"๐Ÿ”จ","name":"hammer"},{"no":1848,"code":"1F6AA","char":"๐Ÿšช","name":"door"},{"no":2145,"code":"1F6AC","char":"๐Ÿšฌ","name":"cigarette"},{"no":1465,"code":"1F4A3","char":"๐Ÿ’ฃ","name":"bomb"},{"no":2132,"code":"1F52B","char":"๐Ÿ”ซ","name":"pistol"},{"no":1721,"code":"1F52A","char":"๐Ÿ”ช","name":"kitchen knife"},{"no":2144,"code":"1F48A","char":"๐Ÿ’Š","name":"pill"},{"no":2143,"code":"1F489","char":"๐Ÿ’‰","name":"syringe"},{"no":2067,"code":"1F4B0","char":"๐Ÿ’ฐ","name":"money bag"},{"no":2068,"code":"1F4B4","char":"๐Ÿ’ด","name":"yen banknote"},{"no":2069,"code":"1F4B5","char":"๐Ÿ’ต","name":"dollar banknote"},{"no":2073,"code":"1F4B3","char":"๐Ÿ’ณ","name":"credit card"},{"no":2072,"code":"1F4B8","char":"๐Ÿ’ธ","name":"money with wings"},{"no":2015,"code":"1F4F2","char":"๐Ÿ“ฒ","name":"mobile phone with arrow"},{"no":2078,"code":"1F4E7","char":"๐Ÿ“ง","name":"e-mail"},{"no":2082,"code":"1F4E5","char":"๐Ÿ“ฅ","name":"inbox tray"},{"no":2081,"code":"1F4E4","char":"๐Ÿ“ค","name":"outbox tray"},{"no":2080,"code":"1F4E9","char":"๐Ÿ“ฉ","name":"envelope with arrow"},{"no":2079,"code":"1F4E8","char":"๐Ÿ“จ","name":"incoming envelope"},{"no":2084,"code":"1F4EB","char":"๐Ÿ“ซ","name":"closed mailbox with raised flag"},{"no":2085,"code":"1F4EA","char":"๐Ÿ“ช","name":"closed mailbox with lowered flag"},{"no":2088,"code":"1F4EE","char":"๐Ÿ“ฎ","name":"postbox"},{"no":2083,"code":"1F4E6","char":"๐Ÿ“ฆ","name":"package"},{"no":2096,"code":"1F4DD","char":"๐Ÿ“","name":"memo"},{"no":2061,"code":"1F4C4","char":"๐Ÿ“„","name":"page facing up"},{"no":2059,"code":"1F4C3","char":"๐Ÿ“ƒ","name":"page with curl"},{"no":2064,"code":"1F4D1","char":"๐Ÿ“‘","name":"bookmark tabs"},{"no":2108,"code":"1F4CA","char":"๐Ÿ“Š","name":"bar chart"},{"no":2106,"code":"1F4C8","char":"๐Ÿ“ˆ","name":"chart increasing"},{"no":2107,"code":"1F4C9","char":"๐Ÿ“‰","name":"chart decreasing"},{"no":2060,"code":"1F4DC","char":"๐Ÿ“œ","name":"scroll"},{"no":2109,"code":"1F4CB","char":"๐Ÿ“‹","name":"clipboard"},{"no":2101,"code":"1F4C5","char":"๐Ÿ“…","name":"calendar"},{"no":2102,"code":"1F4C6","char":"๐Ÿ“†","name":"tear-off calendar"},{"no":2105,"code":"1F4C7","char":"๐Ÿ“‡","name":"card index"},{"no":2098,"code":"1F4C1","char":"๐Ÿ“","name":"file folder"},{"no":2099,"code":"1F4C2","char":"๐Ÿ“‚","name":"open file folder"},{"no":2110,"code":"1F4CC","char":"๐Ÿ“Œ","name":"pushpin"},{"no":2112,"code":"1F4CE","char":"๐Ÿ“Ž","name":"paperclip"},{"no":2114,"code":"1F4CF","char":"๐Ÿ“","name":"straight ruler"},{"no":2115,"code":"1F4D0","char":"๐Ÿ“","name":"triangular ruler"},{"no":2051,"code":"1F4D5","char":"๐Ÿ“•","name":"closed book"},{"no":2053,"code":"1F4D7","char":"๐Ÿ“—","name":"green book"},{"no":2054,"code":"1F4D8","char":"๐Ÿ“˜","name":"blue book"},{"no":2055,"code":"1F4D9","char":"๐Ÿ“™","name":"orange book"},{"no":2057,"code":"1F4D3","char":"๐Ÿ““","name":"notebook"},{"no":2050,"code":"1F4D4","char":"๐Ÿ“”","name":"notebook with decorative cover"},{"no":2058,"code":"1F4D2","char":"๐Ÿ“’","name":"ledger"},{"no":2056,"code":"1F4DA","char":"๐Ÿ“š","name":"books"},{"no":2052,"code":"1F4D6","char":"๐Ÿ“–","name":"open book"},{"no":2065,"code":"1F516","char":"๐Ÿ”–","name":"bookmark"},{"no":2254,"code":"1F4DB","char":"๐Ÿ“›","name":"name badge"},{"no":2062,"code":"1F4F0","char":"๐Ÿ“ฐ","name":"newspaper"},{"no":1785,"code":"1F3A8","char":"๐ŸŽจ","name":"artist palette"},{"no":2035,"code":"1F3AC","char":"๐ŸŽฌ","name":"clapper board"},{"no":2005,"code":"1F3A4","char":"๐ŸŽค","name":"microphone"},{"no":2006,"code":"1F3A7","char":"๐ŸŽง","name":"headphone"},{"no":1999,"code":"1F3BC","char":"๐ŸŽผ","name":"musical score"},{"no":2000,"code":"1F3B5","char":"๐ŸŽต","name":"musical note"},{"no":2001,"code":"1F3B6","char":"๐ŸŽถ","name":"musical notes"},{"no":2010,"code":"1F3B9","char":"๐ŸŽน","name":"musical keyboard"},{"no":2012,"code":"1F3BB","char":"๐ŸŽป","name":"violin"},{"no":2011,"code":"1F3BA","char":"๐ŸŽบ","name":"trumpet"},{"no":2008,"code":"1F3B7","char":"๐ŸŽท","name":"saxophone"},{"no":2009,"code":"1F3B8","char":"๐ŸŽธ","name":"guitar"},{"no":93,"code":"1F47E","char":"๐Ÿ‘พ","name":"alien monster"},{"no":1980,"code":"1F3AE","char":"๐ŸŽฎ","name":"video game"},{"no":1987,"code":"1F0CF","char":"๐Ÿƒ","name":"joker"},{"no":1989,"code":"1F3B4","char":"๐ŸŽด","name":"flower playing cards"},{"no":1988,"code":"1F004","char":"๐Ÿ€„","name":"mahjong red dragon"},{"no":1982,"code":"1F3B2","char":"๐ŸŽฒ","name":"game die"},{"no":1972,"code":"1F3AF","char":"๐ŸŽฏ","name":"direct hit"},{"no":1959,"code":"1F3C8","char":"๐Ÿˆ","name":"american football"},{"no":1957,"code":"1F3C0","char":"๐Ÿ€","name":"basketball"},{"no":1955,"code":"26BD","char":"โšฝ","name":"soccer ball"},{"no":1956,"code":"26BE","char":"โšพ","name":"baseball"},{"no":1961,"code":"1F3BE","char":"๐ŸŽพ","name":"tennis"},{"no":1962,"code":"1F3B1","char":"๐ŸŽฑ","name":"pool 8 ball"},{"no":1963,"code":"1F3B3","char":"๐ŸŽณ","name":"bowling"},{"no":1973,"code":"26F3","char":"โ›ณ","name":"flag in hole"},{"no":2357,"code":"1F3C1","char":"๐Ÿ","name":"chequered flag"},{"no":1950,"code":"1F3C6","char":"๐Ÿ†","name":"trophy"},{"no":1977,"code":"1F3BF","char":"๐ŸŽฟ","name":"skis"},{"no":968,"code":"1F3C2","char":"๐Ÿ‚","name":"snowboarder"},{"no":1028,"code":"1F3CA","char":"๐ŸŠ","name":"person swimming"},{"no":992,"code":"1F3C4","char":"๐Ÿ„","name":"person surfing"},{"no":1975,"code":"1F3A3","char":"๐ŸŽฃ","name":"fishing pole"},{"no":1706,"code":"1F375","char":"๐Ÿต","name":"teacup without handle"},{"no":1707,"code":"1F376","char":"๐Ÿถ","name":"sake"},{"no":1712,"code":"1F37A","char":"๐Ÿบ","name":"beer mug"},{"no":1713,"code":"1F37B","char":"๐Ÿป","name":"clinking beer mugs"},{"no":1710,"code":"1F378","char":"๐Ÿธ","name":"cocktail glass"},{"no":1711,"code":"1F379","char":"๐Ÿน","name":"tropical drink"},{"no":1709,"code":"1F377","char":"๐Ÿท","name":"wine glass"},{"no":1719,"code":"1F374","char":"๐Ÿด","name":"fork and knife"},{"no":1660,"code":"1F355","char":"๐Ÿ•","name":"pizza"},{"no":1658,"code":"1F354","char":"๐Ÿ”","name":"hamburger"},{"no":1659,"code":"1F35F","char":"๐ŸŸ","name":"french fries"},{"no":1655,"code":"1F357","char":"๐Ÿ—","name":"poultry leg"},{"no":1654,"code":"1F356","char":"๐Ÿ–","name":"meat on bone"},{"no":1680,"code":"1F35D","char":"๐Ÿ","name":"spaghetti"},{"no":1678,"code":"1F35B","char":"๐Ÿ›","name":"curry rice"},{"no":1684,"code":"1F364","char":"๐Ÿค","name":"fried shrimp"},{"no":1674,"code":"1F371","char":"๐Ÿฑ","name":"bento box"},{"no":1683,"code":"1F363","char":"๐Ÿฃ","name":"sushi"},{"no":1685,"code":"1F365","char":"๐Ÿฅ","name":"fish cake with swirl"},{"no":1676,"code":"1F359","char":"๐Ÿ™","name":"rice ball"},{"no":1675,"code":"1F358","char":"๐Ÿ˜","name":"rice cracker"},{"no":1677,"code":"1F35A","char":"๐Ÿš","name":"cooked rice"},{"no":1679,"code":"1F35C","char":"๐Ÿœ","name":"steaming bowl"},{"no":1669,"code":"1F372","char":"๐Ÿฒ","name":"pot of food"},{"no":1682,"code":"1F362","char":"๐Ÿข","name":"oden"},{"no":1686,"code":"1F361","char":"๐Ÿก","name":"dango"},{"no":1667,"code":"1F373","char":"๐Ÿณ","name":"cooking"},{"no":1648,"code":"1F35E","char":"๐Ÿž","name":"bread"},{"no":1693,"code":"1F369","char":"๐Ÿฉ","name":"doughnut"},{"no":1701,"code":"1F36E","char":"๐Ÿฎ","name":"custard"},{"no":1690,"code":"1F366","char":"๐Ÿฆ","name":"soft ice cream"},{"no":1692,"code":"1F368","char":"๐Ÿจ","name":"ice cream"},{"no":1691,"code":"1F367","char":"๐Ÿง","name":"shaved ice"},{"no":1695,"code":"1F382","char":"๐ŸŽ‚","name":"birthday cake"},{"no":1696,"code":"1F370","char":"๐Ÿฐ","name":"shortcake"},{"no":1694,"code":"1F36A","char":"๐Ÿช","name":"cookie"},{"no":1698,"code":"1F36B","char":"๐Ÿซ","name":"chocolate bar"},{"no":1699,"code":"1F36C","char":"๐Ÿฌ","name":"candy"},{"no":1700,"code":"1F36D","char":"๐Ÿญ","name":"lollipop"},{"no":1702,"code":"1F36F","char":"๐Ÿฏ","name":"honey pot"},{"no":1628,"code":"1F34E","char":"๐ŸŽ","name":"red apple"},{"no":1629,"code":"1F34F","char":"๐Ÿ","name":"green apple"},{"no":1624,"code":"1F34A","char":"๐ŸŠ","name":"tangerine"},{"no":1632,"code":"1F352","char":"๐Ÿ’","name":"cherries"},{"no":1621,"code":"1F347","char":"๐Ÿ‡","name":"grapes"},{"no":1623,"code":"1F349","char":"๐Ÿ‰","name":"watermelon"},{"no":1633,"code":"1F353","char":"๐Ÿ“","name":"strawberry"},{"no":1631,"code":"1F351","char":"๐Ÿ‘","name":"peach"},{"no":1622,"code":"1F348","char":"๐Ÿˆ","name":"melon"},{"no":1626,"code":"1F34C","char":"๐ŸŒ","name":"banana"},{"no":1627,"code":"1F34D","char":"๐Ÿ","name":"pineapple"},{"no":1681,"code":"1F360","char":"๐Ÿ ","name":"roasted sweet potato"},{"no":1638,"code":"1F346","char":"๐Ÿ†","name":"eggplant"},{"no":1635,"code":"1F345","char":"๐Ÿ…","name":"tomato"},{"no":1641,"code":"1F33D","char":"๐ŸŒฝ","name":"ear of corn"}]},{"name":"Places","emojis":[{"no":1744,"code":"1F3E0","char":"๐Ÿ ","name":"house"},{"no":1745,"code":"1F3E1","char":"๐Ÿก","name":"house with garden"},{"no":1754,"code":"1F3EB","char":"๐Ÿซ","name":"school"},{"no":1746,"code":"1F3E2","char":"๐Ÿข","name":"office building"},{"no":1747,"code":"1F3E3","char":"๐Ÿฃ","name":"Japanese post office"},{"no":1749,"code":"1F3E5","char":"๐Ÿฅ","name":"hospital"},{"no":1750,"code":"1F3E6","char":"๐Ÿฆ","name":"bank"},{"no":1753,"code":"1F3EA","char":"๐Ÿช","name":"convenience store"},{"no":1752,"code":"1F3E9","char":"๐Ÿฉ","name":"love hotel"},{"no":1751,"code":"1F3E8","char":"๐Ÿจ","name":"hotel"},{"no":1759,"code":"1F492","char":"๐Ÿ’’","name":"wedding"},{"no":1762,"code":"26EA","char":"โ›ช","name":"church"},{"no":1755,"code":"1F3EC","char":"๐Ÿฌ","name":"department store"},{"no":1774,"code":"1F307","char":"๐ŸŒ‡","name":"sunset"},{"no":1773,"code":"1F306","char":"๐ŸŒ†","name":"cityscape at dusk"},{"no":1757,"code":"1F3EF","char":"๐Ÿฏ","name":"Japanese castle"},{"no":1758,"code":"1F3F0","char":"๐Ÿฐ","name":"castle"},{"no":1768,"code":"26FA","char":"โ›บ","name":"tent"},{"no":1756,"code":"1F3ED","char":"๐Ÿญ","name":"factory"},{"no":1760,"code":"1F5FC","char":"๐Ÿ—ผ","name":"Tokyo tower"},{"no":1728,"code":"1F5FE","char":"๐Ÿ—พ","name":"map of Japan"},{"no":1732,"code":"1F5FB","char":"๐Ÿ—ป","name":"mount fuji"},{"no":1771,"code":"1F304","char":"๐ŸŒ„","name":"sunrise over mountains"},{"no":1772,"code":"1F305","char":"๐ŸŒ…","name":"sunrise"},{"no":1770,"code":"1F303","char":"๐ŸŒƒ","name":"night with stars"},{"no":1761,"code":"1F5FD","char":"๐Ÿ—ฝ","name":"Statue of Liberty"},{"no":1775,"code":"1F309","char":"๐ŸŒ‰","name":"bridge at night"},{"no":1778,"code":"1F3A0","char":"๐ŸŽ ","name":"carousel horse"},{"no":1779,"code":"1F3A1","char":"๐ŸŽก","name":"ferris wheel"},{"no":1767,"code":"26F2","char":"โ›ฒ","name":"fountain"},{"no":1780,"code":"1F3A2","char":"๐ŸŽข","name":"roller coaster"},{"no":1834,"code":"1F6A2","char":"๐Ÿšข","name":"ship"},{"no":1828,"code":"26F5","char":"โ›ต","name":"sailboat"},{"no":1830,"code":"1F6A4","char":"๐Ÿšค","name":"speedboat"},{"no":1845,"code":"1F680","char":"๐Ÿš€","name":"rocket"},{"no":1839,"code":"1F4BA","char":"๐Ÿ’บ","name":"seat"},{"no":1794,"code":"1F689","char":"๐Ÿš‰","name":"station"},{"no":1789,"code":"1F684","char":"๐Ÿš„","name":"high-speed train"},{"no":1790,"code":"1F685","char":"๐Ÿš…","name":"bullet train"},{"no":1792,"code":"1F687","char":"๐Ÿš‡","name":"metro"},{"no":1788,"code":"1F683","char":"๐Ÿšƒ","name":"railway car"},{"no":1799,"code":"1F68C","char":"๐ŸšŒ","name":"bus"},{"no":1811,"code":"1F699","char":"๐Ÿš™","name":"sport utility vehicle"},{"no":1809,"code":"1F697","char":"๐Ÿš—","name":"automobile"},{"no":1807,"code":"1F695","char":"๐Ÿš•","name":"taxi"},{"no":1812,"code":"1F69A","char":"๐Ÿšš","name":"delivery truck"},{"no":1822,"code":"1F6A8","char":"๐Ÿšจ","name":"police car light"},{"no":1805,"code":"1F693","char":"๐Ÿš“","name":"police car"},{"no":1804,"code":"1F692","char":"๐Ÿš’","name":"fire engine"},{"no":1803,"code":"1F691","char":"๐Ÿš‘","name":"ambulance"},{"no":1815,"code":"1F6B2","char":"๐Ÿšฒ","name":"bicycle"},{"no":1781,"code":"1F488","char":"๐Ÿ’ˆ","name":"barber pole"},{"no":1818,"code":"1F68F","char":"๐Ÿš","name":"bus stop"},{"no":1948,"code":"1F3AB","char":"๐ŸŽซ","name":"ticket"},{"no":1823,"code":"1F6A5","char":"๐Ÿšฅ","name":"horizontal traffic light"},{"no":1825,"code":"1F6A7","char":"๐Ÿšง","name":"construction"},{"no":2255,"code":"1F530","char":"๐Ÿ”ฐ","name":"Japanese symbol for beginner"},{"no":1821,"code":"26FD","char":"โ›ฝ","name":"fuel pump"},{"no":2049,"code":"1F3EE","char":"๐Ÿฎ","name":"red paper lantern"},{"no":1786,"code":"1F3B0","char":"๐ŸŽฐ","name":"slot machine"},{"no":2148,"code":"1F5FF","char":"๐Ÿ—ฟ","name":"moai"},{"no":1782,"code":"1F3AA","char":"๐ŸŽช","name":"circus tent"},{"no":1783,"code":"1F3AD","char":"๐ŸŽญ","name":"performing arts"},{"no":2111,"code":"1F4CD","char":"๐Ÿ“","name":"round pushpin"},{"no":2358,"code":"1F6A9","char":"๐Ÿšฉ","name":"triangular flag"}]},{"name":"Symbols","emojis":[{"no":2294,"code":"1F51F","char":"๐Ÿ”Ÿ","name":"keycap 10"},{"no":2298,"code":"1F522","char":"๐Ÿ”ข","name":"input numbers"},{"no":2299,"code":"1F523","char":"๐Ÿ”ฃ","name":"input symbols"},{"no":2296,"code":"1F520","char":"๐Ÿ” ","name":"input latin uppercase"},{"no":2297,"code":"1F521","char":"๐Ÿ”ก","name":"input latin lowercase"},{"no":2300,"code":"1F524","char":"๐Ÿ”ค","name":"input latin letters"},{"no":2234,"code":"1F53C","char":"๐Ÿ”ผ","name":"up button"},{"no":2236,"code":"1F53D","char":"๐Ÿ”ฝ","name":"down button"},{"no":2232,"code":"23EA","char":"โช","name":"fast reverse button"},{"no":2228,"code":"23E9","char":"โฉ","name":"fast-forward button"},{"no":2235,"code":"23EB","char":"โซ","name":"fast up button"},{"no":2237,"code":"23EC","char":"โฌ","name":"fast down button"},{"no":2313,"code":"1F197","char":"๐Ÿ†—","name":"OK button"},{"no":2310,"code":"1F195","char":"๐Ÿ†•","name":"NEW button"},{"no":2316,"code":"1F199","char":"๐Ÿ†™","name":"UP! button"},{"no":2305,"code":"1F192","char":"๐Ÿ†’","name":"COOL button"},{"no":2306,"code":"1F193","char":"๐Ÿ†“","name":"FREE button"},{"no":2311,"code":"1F196","char":"๐Ÿ†–","name":"NG button"},{"no":2245,"code":"1F4F6","char":"๐Ÿ“ถ","name":"antenna bars"},{"no":2242,"code":"1F3A6","char":"๐ŸŽฆ","name":"cinema"},{"no":2318,"code":"1F201","char":"๐Ÿˆ","name":"Japanese โ€œhereโ€ button"},{"no":2322,"code":"1F22F","char":"๐Ÿˆฏ","name":"Japanese โ€œreservedโ€ button"},{"no":2330,"code":"1F233","char":"๐Ÿˆณ","name":"Japanese โ€œvacancyโ€ button"},{"no":2334,"code":"1F235","char":"๐Ÿˆต","name":"Japanese โ€œno vacancyโ€ button"},{"no":2329,"code":"1F234","char":"๐Ÿˆด","name":"Japanese โ€œpassing gradeโ€ button"},{"no":2326,"code":"1F232","char":"๐Ÿˆฒ","name":"Japanese โ€œprohibitedโ€ button"},{"no":2323,"code":"1F250","char":"๐Ÿ‰","name":"Japanese โ€œbargainโ€ button"},{"no":2324,"code":"1F239","char":"๐Ÿˆน","name":"Japanese โ€œdiscountโ€ button"},{"no":2333,"code":"1F23A","char":"๐Ÿˆบ","name":"Japanese โ€œopen for businessโ€ button"},{"no":2321,"code":"1F236","char":"๐Ÿˆถ","name":"Japanese โ€œnot free of chargeโ€ button"},{"no":2325,"code":"1F21A","char":"๐Ÿˆš","name":"Japanese โ€œfree of chargeโ€ button"},{"no":2158,"code":"1F6BB","char":"๐Ÿšป","name":"restroom"},{"no":2156,"code":"1F6B9","char":"๐Ÿšน","name":"menโ€™s room"},{"no":2157,"code":"1F6BA","char":"๐Ÿšบ","name":"womenโ€™s room"},{"no":2159,"code":"1F6BC","char":"๐Ÿšผ","name":"baby symbol"},{"no":2160,"code":"1F6BE","char":"๐Ÿšพ","name":"water closet"},{"no":2170,"code":"1F6AD","char":"๐Ÿšญ","name":"no smoking"},{"no":2328,"code":"1F238","char":"๐Ÿˆธ","name":"Japanese โ€œapplicationโ€ button"},{"no":2327,"code":"1F251","char":"๐Ÿ‰‘","name":"Japanese โ€œacceptableโ€ button"},{"no":2304,"code":"1F191","char":"๐Ÿ†‘","name":"CL button"},{"no":2315,"code":"1F198","char":"๐Ÿ†˜","name":"SOS button"},{"no":2308,"code":"1F194","char":"๐Ÿ†”","name":"ID button"},{"no":2168,"code":"1F6AB","char":"๐Ÿšซ","name":"prohibited"},{"no":2175,"code":"1F51E","char":"๐Ÿ”ž","name":"no one under eighteen"},{"no":2167,"code":"26D4","char":"โ›”","name":"no entry"},{"no":2262,"code":"274E","char":"โŽ","name":"cross mark button"},{"no":2257,"code":"2705","char":"โœ…","name":"white heavy check mark"},{"no":1460,"code":"1F49F","char":"๐Ÿ’Ÿ","name":"heart decoration"},{"no":2317,"code":"1F19A","char":"๐Ÿ†š","name":"VS button"},{"no":2246,"code":"1F4F3","char":"๐Ÿ“ณ","name":"vibration mode"},{"no":2247,"code":"1F4F4","char":"๐Ÿ“ด","name":"mobile phone off"},{"no":2302,"code":"1F18E","char":"๐Ÿ†Ž","name":"AB button (blood type)"},{"no":2349,"code":"1F4A0","char":"๐Ÿ’ ","name":"diamond with a dot"},{"no":2223,"code":"26CE","char":"โ›Ž","name":"Ophiuchus"},{"no":2210,"code":"1F52F","char":"๐Ÿ”ฏ","name":"dotted six-pointed star"},{"no":2152,"code":"1F3E7","char":"๐Ÿง","name":"ATM sign"},{"no":2074,"code":"1F4B9","char":"๐Ÿ’น","name":"chart increasing with yen"},{"no":2076,"code":"1F4B2","char":"๐Ÿ’ฒ","name":"heavy dollar sign"},{"no":2075,"code":"1F4B1","char":"๐Ÿ’ฑ","name":"currency exchange"},{"no":2261,"code":"274C","char":"โŒ","name":"cross mark"},{"no":2277,"code":"2757","char":"โ—","name":"exclamation mark"},{"no":2274,"code":"2753","char":"โ“","name":"question mark"},{"no":2276,"code":"2755","char":"โ•","name":"white exclamation mark"},{"no":2275,"code":"2754","char":"โ”","name":"white question mark"},{"no":2256,"code":"2B55","char":"โญ•","name":"heavy large circle"},{"no":2198,"code":"1F51D","char":"๐Ÿ”","name":"TOP arrow"},{"no":2195,"code":"1F51A","char":"๐Ÿ”š","name":"END arrow"},{"no":2194,"code":"1F519","char":"๐Ÿ”™","name":"BACK arrow"},{"no":2196,"code":"1F51B","char":"๐Ÿ”›","name":"ON! arrow"},{"no":2197,"code":"1F51C","char":"๐Ÿ”œ","name":"SOON arrow"},{"no":2192,"code":"1F503","char":"๐Ÿ”ƒ","name":"clockwise vertical arrows"},{"no":1861,"code":"1F55B","char":"๐Ÿ•›","name":"twelve oโ€™clock"},{"no":1863,"code":"1F550","char":"๐Ÿ•","name":"one oโ€™clock"},{"no":1865,"code":"1F551","char":"๐Ÿ•‘","name":"two oโ€™clock"},{"no":1867,"code":"1F552","char":"๐Ÿ•’","name":"three oโ€™clock"},{"no":1869,"code":"1F553","char":"๐Ÿ•“","name":"four oโ€™clock"},{"no":1871,"code":"1F554","char":"๐Ÿ•”","name":"five oโ€™clock"},{"no":1873,"code":"1F555","char":"๐Ÿ••","name":"six oโ€™clock"},{"no":1875,"code":"1F556","char":"๐Ÿ•–","name":"seven oโ€™clock"},{"no":1877,"code":"1F557","char":"๐Ÿ•—","name":"eight oโ€™clock"},{"no":1879,"code":"1F558","char":"๐Ÿ•˜","name":"nine oโ€™clock"},{"no":1881,"code":"1F559","char":"๐Ÿ•™","name":"ten oโ€™clock"},{"no":1883,"code":"1F55A","char":"๐Ÿ•š","name":"eleven oโ€™clock"},{"no":2263,"code":"2795","char":"โž•","name":"heavy plus sign"},{"no":2264,"code":"2796","char":"โž–","name":"heavy minus sign"},{"no":2265,"code":"2797","char":"โž—","name":"heavy division sign"},{"no":1601,"code":"1F4AE","char":"๐Ÿ’ฎ","name":"white flower"},{"no":2295,"code":"1F4AF","char":"๐Ÿ’ฏ","name":"hundred points"},{"no":2350,"code":"1F518","char":"๐Ÿ”˜","name":"radio button"},{"no":2141,"code":"1F517","char":"๐Ÿ”—","name":"link"},{"no":2266,"code":"27B0","char":"โžฐ","name":"curly loop"},{"no":2253,"code":"1F531","char":"๐Ÿ”ฑ","name":"trident emblem"},{"no":2347,"code":"1F53A","char":"๐Ÿ”บ","name":"red triangle pointed up"},{"no":2351,"code":"1F532","char":"๐Ÿ”ฒ","name":"black square button"},{"no":2352,"code":"1F533","char":"๐Ÿ”ณ","name":"white square button"},{"no":2355,"code":"1F534","char":"๐Ÿ”ด","name":"red circle"},{"no":2356,"code":"1F535","char":"๐Ÿ”ต","name":"blue circle"},{"no":2348,"code":"1F53B","char":"๐Ÿ”ป","name":"red triangle pointed down"},{"no":2342,"code":"2B1C","char":"โฌœ","name":"white large square"},{"no":2341,"code":"2B1B","char":"โฌ›","name":"black large square"},{"no":2343,"code":"1F536","char":"๐Ÿ”ถ","name":"large orange diamond"},{"no":2344,"code":"1F537","char":"๐Ÿ”ท","name":"large blue diamond"},{"no":2345,"code":"1F538","char":"๐Ÿ”ธ","name":"small orange diamond"},{"no":2346,"code":"1F539","char":"๐Ÿ”น","name":"small blue diamond"}]}] diff --git a/lib/components/icons/EmojiIcon.js b/lib/components/icons/EmojiIcon.js deleted file mode 100644 index 41d9d5838..000000000 --- a/lib/components/icons/EmojiIcon.js +++ /dev/null @@ -1,63 +0,0 @@ -"use strict"; - -exports.__esModule = true; - -var _react = require("react"); - -var _react2 = _interopRequireDefault(_react); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var EmojiIcon = function EmojiIcon(_ref) { - var tooltip = _ref.tooltip, - onClick = _ref.onClick, - isActive = _ref.isActive; - return _react2.default.createElement( - "div", - { className: "sc-user-input--picker-wrapper" }, - tooltip, - _react2.default.createElement( - "button", - { id: "sc-emoji-picker-button", className: "sc-user-input--emoji-icon-wrapper", onClick: onClick }, - _react2.default.createElement( - "svg", - { - className: "sc-user-input--emoji-icon " + (isActive ? 'active' : ''), - version: "1.1", - xmlns: "http://www.w3.org/2000/svg", - x: "0px", - y: "0px", - width: "100%", - height: "10px", - viewBox: "0 0 37 37", - enableBackground: "new 0 0 37 37" - }, - _react2.default.createElement( - "g", - null, - _react2.default.createElement("path", { d: "M18.696,37C8.387,37,0,29.006,0,18.696C0,8.387,8.387,0,18.696,0c10.31,0,18.696,8.387,18.696,18.696 C37,29.006,29.006,37,18.696,37z M18.696,2C9.49,2,2,9.49,2,18.696c0,9.206,7.49,16.696,16.696,16.696 c9.206,0,16.696-7.49,16.696-16.696C35.393,9.49,27.902,2,18.696,2z" - }) - ), - _react2.default.createElement( - "g", - null, - _react2.default.createElement("circle", { cx: "12.379", cy: "14.359", r: "1.938" }) - ), - _react2.default.createElement( - "g", - null, - _react2.default.createElement("circle", { cx: "24.371", cy: "14.414", r: "1.992" }) - ), - _react2.default.createElement( - "g", - null, - _react2.default.createElement("path", { d: "M18.035,27.453c-5.748,0-8.342-4.18-8.449-4.357c-0.286-0.473-0.135-1.087,0.338-1.373 c0.471-0.286,1.084-0.136,1.372,0.335c0.094,0.151,2.161,3.396,6.74,3.396c4.713,0,7.518-3.462,7.545-3.497 c0.343-0.432,0.973-0.504,1.405-0.161c0.433,0.344,0.505,0.973,0.161,1.405C27.009,23.374,23.703,27.453,18.035,27.453z" - }) - ) - ) - ) - ); -}; - -exports.default = EmojiIcon; -module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/components/icons/FileIcon.js b/lib/components/icons/FileIcon.js deleted file mode 100644 index 7dcac16d2..000000000 --- a/lib/components/icons/FileIcon.js +++ /dev/null @@ -1,65 +0,0 @@ -'use strict'; - -exports.__esModule = true; - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - -var FileIcon = function (_Component) { - _inherits(FileIcon, _Component); - - function FileIcon() { - _classCallCheck(this, FileIcon); - - return _possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - FileIcon.prototype._handleClick = function _handleClick(e) { - e.preventDefault(); - this.props.onClick && this.props.onClick(e); - }; - - FileIcon.prototype.render = function render() { - return _react2.default.createElement( - 'button', - { - onFocus: this.props.onFocus, - onBlur: this.props.onBlur, - onClick: this._handleClick.bind(this), - className: 'sc-user-input--file-icon-wrapper' - }, - _react2.default.createElement( - 'svg', - { - version: '1.1', - className: 'sc-user-input--file-icon', - xmlns: 'http://www.w3.org/2000/svg', - x: '0px', - y: '0px', - width: '60px', - height: '60px', - viewBox: '0 0 55 55', - enableBackground: 'new 0 0 60 60' }, - _react2.default.createElement( - 'g', - null, - _react2.default.createElement('path', { d: 'M43.922,6.653c-2.643-2.644-6.201-4.107-9.959-4.069c-3.774,0.019-7.32,1.497-9.983,4.161l-12.3,12.3l-8.523,8.521 c-4.143,4.144-4.217,10.812-0.167,14.862c1.996,1.996,4.626,2.989,7.277,2.989c2.73,0,5.482-1.055,7.583-3.156l15.547-15.545 c0.002-0.002,0.002-0.004,0.004-0.005l5.358-5.358c1.394-1.393,2.176-3.24,2.201-5.2c0.026-1.975-0.716-3.818-2.09-5.192 c-2.834-2.835-7.496-2.787-10.394,0.108L9.689,29.857c-0.563,0.563-0.563,1.474,0,2.036c0.281,0.28,0.649,0.421,1.018,0.421 c0.369,0,0.737-0.141,1.018-0.421l18.787-18.788c1.773-1.774,4.609-1.824,6.322-0.11c0.82,0.82,1.263,1.928,1.247,3.119 c-0.017,1.205-0.497,2.342-1.357,3.201l-5.55,5.551c-0.002,0.002-0.002,0.004-0.004,0.005L15.814,40.225 c-3.02,3.02-7.86,3.094-10.789,0.167c-2.928-2.929-2.854-7.77,0.167-10.791l0.958-0.958c0.001-0.002,0.004-0.002,0.005-0.004 L26.016,8.78c2.123-2.124,4.951-3.303,7.961-3.317c2.998,0.02,5.814,1.13,7.91,3.226c4.35,4.351,4.309,11.472-0.093,15.873 L25.459,40.895c-0.563,0.562-0.563,1.473,0,2.035c0.281,0.281,0.65,0.422,1.018,0.422c0.369,0,0.737-0.141,1.018-0.422 L43.83,26.596C49.354,21.073,49.395,12.126,43.922,6.653z' }) - ) - ) - ); - }; - - return FileIcon; -}(_react.Component); - -exports.default = FileIcon; -module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/icons/SendIcon.js b/lib/components/icons/SendIcon.js deleted file mode 100644 index bcbe0683c..000000000 --- a/lib/components/icons/SendIcon.js +++ /dev/null @@ -1,64 +0,0 @@ -'use strict'; - -exports.__esModule = true; - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - -var SendIcon = function (_Component) { - _inherits(SendIcon, _Component); - - function SendIcon() { - _classCallCheck(this, SendIcon); - - return _possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - SendIcon.prototype.render = function render() { - var _this2 = this; - - return _react2.default.createElement( - 'button', - { - onFocus: this.props.onFocus, - onBlur: this.props.onBlur, - onClick: function onClick(e) { - e.preventDefault();_this2.props.onClick(e); - }, - className: 'sc-user-input--send-icon-wrapper' - }, - _react2.default.createElement( - 'svg', - { - version: '1.1', - className: 'sc-user-input--send-icon', - xmlns: 'http://www.w3.org/2000/svg', - x: '0px', - y: '0px', - width: '37.393px', - height: '37.393px', - viewBox: '0 0 37.393 37.393', - enableBackground: 'new 0 0 37.393 37.393' }, - _react2.default.createElement( - 'g', - { id: 'Layer_2' }, - _react2.default.createElement('path', { d: 'M36.511,17.594L2.371,2.932c-0.374-0.161-0.81-0.079-1.1,0.21C0.982,3.43,0.896,3.865,1.055,4.241l5.613,13.263 L2.082,32.295c-0.115,0.372-0.004,0.777,0.285,1.038c0.188,0.169,0.427,0.258,0.67,0.258c0.132,0,0.266-0.026,0.392-0.08 l33.079-14.078c0.368-0.157,0.607-0.519,0.608-0.919S36.879,17.752,36.511,17.594z M4.632,30.825L8.469,18.45h8.061 c0.552,0,1-0.448,1-1s-0.448-1-1-1H8.395L3.866,5.751l29.706,12.757L4.632,30.825z' }) - ) - ) - ); - }; - - return SendIcon; -}(_react.Component); - -exports.default = SendIcon; -module.exports = exports['default']; \ No newline at end of file diff --git a/lib/components/popups/PopupWindow.js b/lib/components/popups/PopupWindow.js deleted file mode 100644 index 9bfeb3a5b..000000000 --- a/lib/components/popups/PopupWindow.js +++ /dev/null @@ -1,75 +0,0 @@ -'use strict'; - -exports.__esModule = true; - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - -var PopupWindow = function (_Component) { - _inherits(PopupWindow, _Component); - - function PopupWindow() { - var _temp, _this, _ret; - - _classCallCheck(this, PopupWindow); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.interceptLauncherClick = function (e) { - var isOpen = _this.props.isOpen; - - var clickedOutside = !_this.emojiPopup.contains(e.target) && isOpen; - clickedOutside && _this.props.onClickedOutside(e); - }, _temp), _possibleConstructorReturn(_this, _ret); - } - - PopupWindow.prototype.componentDidMount = function componentDidMount() { - this.scLauncher = document.querySelector('#sc-launcher'); - this.scLauncher.addEventListener('click', this.interceptLauncherClick); - }; - - PopupWindow.prototype.componentWillUnmount = function componentWillUnmount() { - this.scLauncher.removeEventListener('click', this.interceptLauncherClick); - }; - - PopupWindow.prototype.render = function render() { - var _this2 = this; - - var _props = this.props, - isOpen = _props.isOpen, - children = _props.children; - - return _react2.default.createElement( - 'div', - { className: 'sc-popup-window', ref: function ref(e) { - return _this2.emojiPopup = e; - } }, - _react2.default.createElement( - 'div', - { className: 'sc-popup-window--cointainer ' + (isOpen ? '' : 'closed') }, - _react2.default.createElement('input', { - onChange: this.props.onInputChange, - className: 'sc-popup-window--search', - placeholder: 'Search emoji...' - }), - children - ) - ); - }; - - return PopupWindow; -}(_react.Component); - -exports.default = PopupWindow; -module.exports = exports['default']; \ No newline at end of file diff --git a/lib/index.js b/lib/index.js deleted file mode 100644 index a795e3db5..000000000 --- a/lib/index.js +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; - -exports.__esModule = true; -exports.Launcher = undefined; - -require('./styles'); - -var _Launcher = require('./components/Launcher'); - -var _Launcher2 = _interopRequireDefault(_Launcher); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -exports.Launcher = _Launcher2.default; \ No newline at end of file diff --git a/lib/messageTypes.js b/lib/messageTypes.js deleted file mode 100644 index 5a56b671e..000000000 --- a/lib/messageTypes.js +++ /dev/null @@ -1,15 +0,0 @@ -'use strict'; - -var MESSAGE_TYPES = { - CLIENT: { - NEW_VISITOR: 'client.new_visitor', - MESSAGE: 'client.message', - RETURNING_VISITOR: 'client.returning_visitor' - }, - BROKER: { - VISITOR_ID: 'broker.visitor_id', - MESSAGE: 'broker.message' - } -}; - -module.exports = MESSAGE_TYPES; \ No newline at end of file diff --git a/lib/styles/chat-window.css b/lib/styles/chat-window.css deleted file mode 100644 index 8bf0eb295..000000000 --- a/lib/styles/chat-window.css +++ /dev/null @@ -1,55 +0,0 @@ -.sc-chat-window { - width: 370px; - height: calc(100% - 120px); - max-height: 590px; - position: fixed; - right: 25px; - bottom: 100px; - box-sizing: border-box; - box-shadow: 0px 7px 40px 2px rgba(148, 149, 150, 0.3); - background: white; - display: flex; - flex-direction: column; - justify-content: space-between; - transition: 0.3s ease-in-out; - border-radius: 10px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -} - -.sc-chat-window.closed { - opacity: 0; - visibility: hidden; - bottom: 90px; -} - -.sc-message-list { - height: 80%; - overflow-y: auto; - background-color: white; - background-size: 100%; - padding: 40px 0px; -} - -.sc-message--me { - text-align: right; -} -.sc-message--them { - text-align: left; -} - -@media (max-width: 450px) { - .sc-chat-window { - width: 100%; - height: 100%; - max-height: 100%; - right: 0px; - bottom: 0px; - border-radius: 0px; - } - .sc-chat-window { - transition: 0.1s ease-in-out; - } - .sc-chat-window.closed { - bottom: 0px; - } -} diff --git a/lib/styles/emojiPicker.css b/lib/styles/emojiPicker.css deleted file mode 100644 index 2b2991119..000000000 --- a/lib/styles/emojiPicker.css +++ /dev/null @@ -1,38 +0,0 @@ -.sc-emoji-picker { - overflow: auto; - width: 100%; - max-height: calc(100% - 40px); - box-sizing: border-box; - padding: 15px; -} - -.sc-emoji-picker--category { - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -.sc-emoji-picker--category-title { - min-width: 100%; - color: #b8c3ca; - font-weight: 200; - font-size: 13px; - margin: 5px; - letter-spacing: 1px; -} - -.sc-emoji-picker--emoji { - margin: 5px; - width: 30px; - line-height: 30px; - text-align: center; - cursor: pointer; - vertical-align: middle; - font-size: 28px; - transition: transform 60ms ease-out,-webkit-transform 60ms ease-out; - transition-delay: 60ms; -} - -.sc-emoji-picker--emoji:hover { - transform: scale(1.4); -} \ No newline at end of file diff --git a/lib/styles/header.css b/lib/styles/header.css deleted file mode 100644 index 2171d7d2e..000000000 --- a/lib/styles/header.css +++ /dev/null @@ -1,53 +0,0 @@ -.sc-header { - background: #4e8cff; - min-height: 75px; - border-top-left-radius: 9px; - border-top-right-radius: 9px; - color: white; - padding: 10px; - box-shadow: 0 1px 4px rgba(0,0,0,.2); - position: relative; - box-sizing: border-box; - display: flex; -} - -.sc-header--img { - border-radius: 50%; - align-self: center; - padding: 10px; -} - -.sc-header--team-name { - align-self: center; - padding: 10px; - flex: 1; - user-select: none; - border-radius: 5px; -} - -.sc-header--close-button { - width: 40px; - align-self: center; - height: 40px; - margin-right: 10px; - box-sizing: border-box; - cursor: pointer; - border-radius: 5px; -} - -.sc-header--close-button:hover { - background: #4882ed; -} - -.sc-header--close-button img { - width: 100%; - height: 100%; - padding: 13px; - box-sizing: border-box; -} - -@media (max-width: 450px) { - .sc-header { - border-radius: 0px; - } -} \ No newline at end of file diff --git a/lib/styles/index.js b/lib/styles/index.js deleted file mode 100644 index 515436a4e..000000000 --- a/lib/styles/index.js +++ /dev/null @@ -1,15 +0,0 @@ -'use strict'; - -require('./emojiPicker.css'); - -require('./chat-window.css'); - -require('./launcher.css'); - -require('./header.css'); - -require('./message.css'); - -require('./user-input.css'); - -require('./popup-window.css'); \ No newline at end of file diff --git a/lib/styles/launcher.css b/lib/styles/launcher.css deleted file mode 100644 index 5c3ae97da..000000000 --- a/lib/styles/launcher.css +++ /dev/null @@ -1,82 +0,0 @@ -.sc-launcher { - width: 60px; - height: 60px; - background-color: #4e8cff; - background-position: center; - background-repeat: no-repeat; - position: fixed; - right: 25px; - bottom: 25px; - border-radius: 50%; - box-shadow: none; - transition: box-shadow 0.2s ease-in-out; -} - -.sc-launcher:before { - content: ''; - position: relative; - display: block; - width: 60px; - height: 60px; - border-radius: 50%; - transition: box-shadow 0.2s ease-in-out; -} - -.sc-launcher .sc-open-icon, -.sc-launcher .sc-closed-icon { - width: 60px; - height: 60px; - position: fixed; - right: 25px; - bottom: 25px; - transition: opacity 100ms ease-in-out, transform 100ms ease-in-out; -} - -.sc-launcher .sc-closed-icon { - transition: opacity 100ms ease-in-out, transform 100ms ease-in-out; - width: 60px; - height: 60px; -} - -.sc-launcher .sc-open-icon { - padding: 20px; - box-sizing: border-box; - opacity: 0; -} - -.sc-launcher.opened .sc-open-icon { - transform: rotate(-90deg); - opacity: 1; -} - -.sc-launcher.opened .sc-closed-icon { - transform: rotate(-90deg); - opacity: 0; -} - -.sc-launcher.opened:before { - box-shadow: 0px 0px 400px 250px rgba(148, 149, 150, 0.2); -} - -.sc-launcher:hover { - box-shadow: 0 0px 27px 1.5px rgba(0,0,0,0.2); -} - -.sc-new-messages-count { - position: absolute; - top: -3px; - left: 41px; - display: flex; - justify-content: center; - flex-direction: column; - border-radius: 50%; - width: 22px; - height: 22px; - background: #ff4646; - color: white; - text-align: center; - margin: auto; - font-size: 12px; - font-weight: 500; - box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.3); -} \ No newline at end of file diff --git a/lib/styles/message.css b/lib/styles/message.css deleted file mode 100644 index f0b1cb63a..000000000 --- a/lib/styles/message.css +++ /dev/null @@ -1,88 +0,0 @@ -.sc-message { - width: 300px; - margin: auto; - padding-bottom: 10px; - display: flex; -} - -.sc-message--content { - width: 100%; - display: flex; -} - -.sc-message--content.sent { - justify-content: flex-end; -} - -.sc-message--content.sent .sc-message--avatar { - display: none; -} - -.sc-message--avatar { - background-image: url(https://d13yacurqjgara.cloudfront.net/assets/avatar-default-aa2eab7684294781f93bc99ad394a0eb3249c5768c21390163c9f55ea8ef83a4.gif); - background-repeat: no-repeat; - background-size: 100%; - background-position: center; - min-width: 30px; - min-height: 30px; - border-radius: 50%; - align-self: center; - margin-right: 15px; -} - -.sc-message--text { - padding: 17px 20px; - border-radius: 6px; - font-weight: 300; - font-size: 14px; - line-height: 1.4; - white-space: pre-wrap; - -webkit-font-smoothing: subpixel-antialiased; - word-wrap: break-word; - width: calc(100% - 90px); -} - -.sc-message--content.sent .sc-message--text { - color: white; - background-color: #4e8cff; - max-width: calc(100% - 120px); - word-wrap: break-word; -} - -.sc-message--content.received .sc-message--text { - color: #263238; - background-color: #f4f7f9; - margin-right: 40px; -} - -.sc-message--emoji { - font-size: 40px; -} - -.sc-message--file { - background: white; - border: solid 1px #CCCDD1; - padding: 15px 20px; - border-radius: 5px; - display: flex; - font-weight: 300; - font-size: 14px; - line-height: 1.4; - cursor: pointer; - text-decoration: none; -} - -.sc-message--file p { - margin: 0px 0px 0px 10px; - color: rgba(86, 88, 103, 0.6); -} - -.sc-message--file .sc-user-input--file-icon:hover path { - fill: rgba(86, 88, 103, 0.3); -} - -@media (max-width: 450px) { - .sc-message { - width: 80%; - } -} \ No newline at end of file diff --git a/lib/styles/popup-window.css b/lib/styles/popup-window.css deleted file mode 100644 index abdd3b3fa..000000000 --- a/lib/styles/popup-window.css +++ /dev/null @@ -1,61 +0,0 @@ -.sc-popup-window { - position: relative; - width: 150px; -} - -.sc-popup-window--cointainer { - position: absolute; - bottom: 20px; - right: 100px; - width: 330px; - max-height: 260px; - height: 260px; - box-shadow: 0px 7px 40px 2px rgba(148, 149, 150, 0.3); - background: white; - border-radius: 10px; - outline: none; - transition: 0.2s ease-in-out; - z-index: 1; - padding: 0px 5px 5px 5px; - box-sizing: border-box; -} - -.sc-popup-window--cointainer.closed { - opacity: 0; - visibility: hidden; - bottom: 14px; -} - -.sc-popup-window--cointainer:after { - content: ""; - width: 14px; - height: 14px; - background: white; - position: absolute; - z-index: -1; - bottom: -6px; - right: 28px; - transform: rotate(45deg); - border-radius: 2px; -} - -.sc-popup-window--search { - width: 290px; - box-sizing: border-box; - margin: auto; - display: block; - border-width: 0px 0px 1px 0px; - color: #565867; - padding-left: 25px; - height: 40px; - font-size: 14px; - background-image: url(https://js.intercomcdn.com/images/search@2x.32fca88e.png); - background-size: 16px 16px; - background-repeat: no-repeat; - background-position: 0 12px; - outline: none; -} - -.sc-popup-window--search::placeholder { - color: #C1C7CD; -} \ No newline at end of file diff --git a/lib/styles/user-input.css b/lib/styles/user-input.css deleted file mode 100644 index 7aa50cbb0..000000000 --- a/lib/styles/user-input.css +++ /dev/null @@ -1,140 +0,0 @@ -.sc-user-input { - min-height: 55px; - margin: 0px; - position: relative; - bottom: 0; - display: flex; - background-color: #f4f7f9; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - transition: background-color .2s ease,box-shadow .2s ease; -} - - -.sc-user-input--text { - width: 300px; - resize: none; - border: none; - outline: none; - border-bottom-left-radius: 10px; - box-sizing: border-box; - padding: 18px; - font-size: 15px; - font-weight: 400; - line-height: 1.33; - white-space: pre-wrap; - word-wrap: break-word; - color: #565867; - -webkit-font-smoothing: antialiased; - max-height: 200px; - overflow: scroll; - bottom: 0; - overflow-x: hidden; - overflow-y: auto; -} - -.sc-user-input--text:empty:before { - content: attr(placeholder); - display: block; /* For Firefox */ - color: rgba(86, 88, 103, 0.3); - outline: none; -} - -.sc-user-input--buttons { - width: 100px; - position: absolute; - right: 10px; - height: 100%; - display: flex; - justify-content: flex-end; -} - -.sc-user-input--button:first-of-type { - width: 40px; -} - -.sc-user-input--button { - width: 30px; - height: 55px; - display: flex; - flex-direction: column; - justify-content: center; -} - -.sc-user-input--button button { - cursor: pointer; -} - -.sc-user-input--buttons input[type="file"] { - display: none; -} - -.sc-user-input--picker-wrapper { - display: flex; - flex-direction: column; -} - -.sc-user-input.active { - box-shadow: none; - background-color: white; - box-shadow: 0px -5px 20px 0px rgba(150, 165, 190, 0.2); -} - -.sc-user-input--file-icon, -.sc-user-input--send-icon { - height: 20px; - width: 20px; - cursor: pointer; - align-self: center; - outline: none; -} - -.sc-user-input--file-icon path, -.sc-user-input--send-icon path { - fill: rgba(86, 88, 103, 0.3); -} - -.sc-user-input--file-icon:hover path, -.sc-user-input--send-icon:hover path { - fill: rgba(86, 88, 103, 1); -} - -.sc-user-input--emoji-icon-wrapper, -.sc-user-input--send-icon-wrapper, -.sc-user-input--file-icon-wrapper { - background: none; - border: none; - padding: 2px; - margin: 0px; - display: flex; - flex-direction: column; - justify-content: center; -} - -.sc-user-input--send-icon-wrapper, -.sc-user-input--file-icon-wrapper { - flex-direction: row; -} - -.sc-user-input--emoji-icon-wrapper:focus { - outline: none; -} - -.sc-user-input--emoji-icon { - height: 18px; - cursor: pointer; - align-self: center; -} - -.sc-user-input--emoji-icon path, .sc-user-input--emoji-icon circle { - fill: rgba(86, 88, 103, 0.3); -} - -.sc-user-input--emoji-icon-wrapper:focus .sc-user-input--emoji-icon path, -.sc-user-input--emoji-icon-wrapper:focus .sc-user-input--emoji-icon circle, -.sc-user-input--emoji-icon.active path, -.sc-user-input--emoji-icon.active circle, -.sc-user-input--emoji-icon:hover path, -.sc-user-input--emoji-icon:hover circle { - fill: rgba(86, 88, 103, 1); -} From 5991d9e41a95c1540258d4adc1f7f213ade5d3c4 Mon Sep 17 00:00:00 2001 From: Anmol Date: Fri, 23 Aug 2019 16:44:29 +0800 Subject: [PATCH 5/5] minor fix --- .gitignore | 1 + src/components/UserInput.js | 2 ++ 2 files changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index 13a6c1a10..138ba4d98 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ coverage/ demo/dist/ +.idea/ # Generated build files es/ diff --git a/src/components/UserInput.js b/src/components/UserInput.js index 9999038c1..5843b649a 100644 --- a/src/components/UserInput.js +++ b/src/components/UserInput.js @@ -124,6 +124,8 @@ class UserInput extends Component { /> ); + } else { + return null; } }