From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001 From: gabrhr <73925454+gabrhr@users.noreply.github.com> Date: Wed, 20 Apr 2022 10:19:29 -0500 Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Base para front --- front/odiparpack/app/components/Chat/ChatHeader.js | 122 +++++++++++++++++ front/odiparpack/app/components/Chat/ChatRoom.js | 106 +++++++++++++++ .../odiparpack/app/components/Chat/MessageField.js | 69 ++++++++++ .../app/components/Chat/chatStyle-jss.js | 148 +++++++++++++++++++++ .../app/components/Chat/svg/trigger-opaque.svg | 66 +++++++++ .../components/Chat/svg/trigger-transparent.svg | 68 ++++++++++ 6 files changed, 579 insertions(+) create mode 100644 front/odiparpack/app/components/Chat/ChatHeader.js create mode 100644 front/odiparpack/app/components/Chat/ChatRoom.js create mode 100644 front/odiparpack/app/components/Chat/MessageField.js create mode 100644 front/odiparpack/app/components/Chat/chatStyle-jss.js create mode 100644 front/odiparpack/app/components/Chat/svg/trigger-opaque.svg create mode 100644 front/odiparpack/app/components/Chat/svg/trigger-transparent.svg (limited to 'front/odiparpack/app/components/Chat') diff --git a/front/odiparpack/app/components/Chat/ChatHeader.js b/front/odiparpack/app/components/Chat/ChatHeader.js new file mode 100644 index 0000000..b3456e9 --- /dev/null +++ b/front/odiparpack/app/components/Chat/ChatHeader.js @@ -0,0 +1,122 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; +import ArrowBack from '@material-ui/icons/ArrowBack'; +import { Typography, AppBar, Menu, MenuItem, Avatar, IconButton, Toolbar } from '@material-ui/core'; +import styles from '../Contact/contact-jss'; + + +const optionsOpt = [ + 'Delete Conversation', + 'Option 1', + 'Option 2', + 'Option 3', +]; + +const ITEM_HEIGHT = 48; + +class ChatHeader extends React.Component { + state = { + anchorElOpt: null, + }; + + handleClickOpt = event => { + this.setState({ anchorElOpt: event.currentTarget }); + }; + + handleCloseOpt = () => { + this.setState({ anchorElOpt: null }); + }; + + handleRemove = (person) => { + this.props.remove(person); + } + + render() { + const { + classes, + chatSelected, + dataContact, + showMobileDetail, + hideDetail, + } = this.props; + const { anchorElOpt } = this.state; + return ( + + + {showMobileDetail && ( + hideDetail()} + className={classes.navIconHide} + > + + + )} + + + {dataContact.getIn([chatSelected, 'name'])} + + + {' '} +Online + + + + + + + + {optionsOpt.map(option => { + if (option === 'Delete Conversation') { + return ( + + {option} + + ); + } + return ( + + {option} + + ); + })} + + + ); + } +} + +ChatHeader.propTypes = { + classes: PropTypes.object.isRequired, + dataContact: PropTypes.object.isRequired, + showMobileDetail: PropTypes.bool.isRequired, + hideDetail: PropTypes.func.isRequired, + remove: PropTypes.func.isRequired, + chatSelected: PropTypes.number.isRequired, +}; + +export default withStyles(styles)(ChatHeader); diff --git a/front/odiparpack/app/components/Chat/ChatRoom.js b/front/odiparpack/app/components/Chat/ChatRoom.js new file mode 100644 index 0000000..9abef89 --- /dev/null +++ b/front/odiparpack/app/components/Chat/ChatRoom.js @@ -0,0 +1,106 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import Send from '@material-ui/icons/Send'; +import dummyContents from 'ba-api/dummyContents'; +import Type from 'ba-styles/Typography.scss'; +import { Avatar, Typography, Paper, Tooltip, IconButton } from '@material-ui/core'; +import MessageField from './MessageField'; +import styles from './chatStyle-jss'; + + +class ChatRoom extends React.Component { + constructor() { + super(); + this.state = { message: '' }; + this.handleWrite = this.handleWrite.bind(this); + } + + handleWrite = (e, value) => { + this.setState({ message: value }); + }; + + resetInput = () => { + const ctn = document.getElementById('roomContainer'); + this.setState({ message: '' }); + this._field.setState({ value: '' }); + setTimeout(() => { + ctn.scrollTo(0, ctn.scrollHeight); + }, 300); + } + + sendMessageByEnter = (event, message) => { + if (event.key === 'Enter' && event.target.value !== '') { + this.props.sendMessage(message.__html); + this.resetInput(); + } + } + + sendMessage = message => { + this.props.sendMessage(message.__html); + this.resetInput(); + } + + render() { + const html = { __html: this.state.message }; + const { + classes, + dataChat, + chatSelected, + dataContact, + showMobileDetail, + } = this.props; + const { message } = this.state; + const getChat = dataArray => dataArray.map(data => { + const renderHTML = { __html: data.get('message') }; + return ( +
  • + + {data.get('from') === 'contact' + ? + : + } +
    +

    +
    +
    • + ); + }); + return ( +
    + + + { this._field = _field; return this._field; }} + placeholder="Type a message" + fieldType="input" + value={message} + onKeyPress={(event) => this.sendMessageByEnter(event, html)} + /> + +
    + this.sendMessage(html)} aria-label="send" className={classes.sendBtn}> + + +
    +     +     +
    + ); + } +} + +ChatRoom.propTypes = { + classes: PropTypes.object.isRequired, + dataChat: PropTypes.object.isRequired, + showMobileDetail: PropTypes.bool.isRequired, + chatSelected: PropTypes.number.isRequired, + dataContact: PropTypes.object.isRequired, + sendMessage: PropTypes.func.isRequired, +}; + +export default withStyles(styles)(ChatRoom); diff --git a/front/odiparpack/app/components/Chat/MessageField.js b/front/odiparpack/app/components/Chat/MessageField.js new file mode 100644 index 0000000..947bed4 --- /dev/null +++ b/front/odiparpack/app/components/Chat/MessageField.js @@ -0,0 +1,69 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import 'ba-styles/vendors/emoji-picker-react/emoji-picker-react.css'; + +class MessageField extends Component { + constructor(props) { + super(props); + + this.state = { + value: props.value || '', + }; + + this.onChange = this.onChange.bind(this); + } + + onChange(e) { + const { val } = this.state; + const { onChange } = this.props; + const value = e ? e.target.value : val; + + this.setState({ value }, () => { + if (typeof onChange === 'function') { + onChange(e, value); + } + }); + } + + onPickerkeypress(e) { + if (e.keyCode === 27 || e.which === 27 || e.key === 'Escape' || e.code === 'Escape') { + this.closePicker(); + } + } + + render() { + const { + onChange, + fieldType, + ...rest + } = this.props; + + const className = `emoji-text-field emoji-${fieldType}`; + const { value } = this.state; + const isInput = fieldType === 'input'; + const ref = (_field) => { + this._field = _field; + return this._field; + }; + + return ( +
    + { (isInput) && () } + { (!isInput) && (