From 9042f31b7fc0390ea0556e4fef64699fca8fb0d7 Mon Sep 17 00:00:00 2001 From: Gorji Date: Thu, 27 May 2021 13:45:44 +0430 Subject: [PATCH] fix --- src/views/ChatRoom/Body/Body.js | 6 +- .../DraggableMessage/DraggableMessage.js | 35 +++++------ src/views/ChatRoom/Body/Message/Message.js | 28 ++++----- .../Body/Message/Message2D/Message2D.js | 27 +++++---- .../Body/Message/Message2D/Message2D.scss | 2 + .../Message/NormalMessage/NormalMessage.js | 25 +++++++- .../Message/NormalMessage/NormalMessage.scss | 18 ++++-- .../Body/Message/RadioMessage/RadioMessage.js | 58 +++++++++---------- .../Message/SliderMessage/SliderMessage.js | 46 ++++++++------- 9 files changed, 138 insertions(+), 107 deletions(-) diff --git a/src/views/ChatRoom/Body/Body.js b/src/views/ChatRoom/Body/Body.js index 7014321..5b5b2b9 100644 --- a/src/views/ChatRoom/Body/Body.js +++ b/src/views/ChatRoom/Body/Body.js @@ -371,13 +371,13 @@ class Body extends Component { this.state.music === null && this.state.video === null ? ( 0 ? messageList[i - 1].userId : 0} - isSelf={1 == item.userId} + isSelf={1 != item.userId} key={i} file={this.state.image} document={this.state.document} - message={item} + message={{ ...item, value: 1 }} user={userIdx[item.userId] || { id: 0, fileId: 0, name: 'null' }} /> ) : null diff --git a/src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js b/src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js index abdd70f..6f16693 100644 --- a/src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js +++ b/src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js @@ -3,6 +3,7 @@ import { SortableContainer, SortableElement } from 'react-sortable-hoc'; import arrayMove from 'array-move'; import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'; import Avatar from '@material-ui/core/Avatar'; +import { toast } from 'react-toastify'; export default class DraggableMessage extends Component { constructor(props) { @@ -10,38 +11,34 @@ export default class DraggableMessage extends Component { this.state = this.props.message; } onSortEnd = ({ oldIndex, newIndex }) => { - this.setState(({ options }) => ({ - options: arrayMove(options, oldIndex, newIndex), - })); + if (this.props.isActive) + this.setState(({ options }) => ({ + options: arrayMove(options, oldIndex, newIndex), + })); }; render() { - const { message, user, isSelf } = this.props; + const { message, user, isSelf, isActive } = this.props; return ( -
- - +
+ + {isActive && ( + + )}
); } } -const SortableList = SortableContainer(({ items }) => { +const SortableList = SortableContainer(({ items, disabled }) => { return (
{items.map((row, index) => ( - + ))}
); diff --git a/src/views/ChatRoom/Body/Message/Message.js b/src/views/ChatRoom/Body/Message/Message.js index e302c71..9220c9b 100644 --- a/src/views/ChatRoom/Body/Message/Message.js +++ b/src/views/ChatRoom/Body/Message/Message.js @@ -18,20 +18,20 @@ export default class Message extends Component { isSelf={isSelf} file={file} document={document} - /> - - {message.type === '2d' ? ( - - ) : null} - {message.type === 'draggable' ? ( - - ) : null} - {message.type === 'slider' ? ( - - ) : null} - {message.type === 'radio' ? ( - - ) : null} + > + {message.type === '2d' ? ( + + ) : null} + {message.type === 'draggable' ? ( + + ) : null} + {message.type === 'slider' ? ( + + ) : null} + {message.type === 'radio' ? ( + + ) : null} +
); } diff --git a/src/views/ChatRoom/Body/Message/Message2D/Message2D.js b/src/views/ChatRoom/Body/Message/Message2D/Message2D.js index f34ca09..7d112c5 100644 --- a/src/views/ChatRoom/Body/Message/Message2D/Message2D.js +++ b/src/views/ChatRoom/Body/Message/Message2D/Message2D.js @@ -2,19 +2,20 @@ import React, { Component } from 'react'; import Avatar from '@material-ui/core/Avatar'; import './Message2D.scss'; +import { toast } from 'react-toastify'; export default class Message2D extends Component { + state = { value: this.props.message.value }; + click(id) { + if (this.props.isActive) { + this.setState({ value: id }); + toast.success('ثبت شد'); + } + } render() { - const { message, user, isSelf } = this.props; + const { message, user, isSelf, isActive } = this.props; return ( -
+
{message.options.map((option, i) => (
this.click(item.id)} > {item.name}
diff --git a/src/views/ChatRoom/Body/Message/Message2D/Message2D.scss b/src/views/ChatRoom/Body/Message/Message2D/Message2D.scss index 601f745..89fe18c 100644 --- a/src/views/ChatRoom/Body/Message/Message2D/Message2D.scss +++ b/src/views/ChatRoom/Body/Message/Message2D/Message2D.scss @@ -1,5 +1,7 @@ @media screen and (max-width: 4500px) { .message-2d { + display: flex; + justify-content: flex-end; // width: 100%; position: relative; img { diff --git a/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js b/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js index 2cf060c..a9f21c3 100644 --- a/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js +++ b/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js @@ -29,9 +29,10 @@ export default class NormalMessage extends Component { }); }; render() { - const { message, user, document, isSelf, prevUserId } = this.props; + const { message, user, document, isSelf, prevUserId, children } = this.props; const { messageMenu } = this.state; const hasavatar = prevUserId != message.userId; + return (
: null} {message.image !== null ? ( -
+
{ + console.log(refElem); + }} + > @@ -192,6 +198,7 @@ export default class NormalMessage extends Component {
{message.document.name}
) : null} +
{message.status == 1 && } @@ -208,6 +215,7 @@ export default class NormalMessage extends Component {
+
@@ -223,6 +231,17 @@ export default class NormalMessage extends Component {
*/}
+
+ {children} +
); } diff --git a/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss b/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss index 1e2192d..2a1db1c 100644 --- a/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss +++ b/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss @@ -1,4 +1,9 @@ @media screen and (max-width: 4500px) { + .keys { + max-width: 465px; + min-width: 250px; + padding: 2px 0; + } .icons { //position: absolute; width: 90px; @@ -49,12 +54,13 @@ z-index: 50; } &__box { - line-height: 1em; - max-width: 400px; + line-height: 1.3em; + max-width: 500px; + min-width: 250px; display: flex; justify-content: flex-end; - width: 100%; - padding: 20px 7px 5px; + // width: 100%; + padding: 20px 10px 5px; background-color: white; border-radius: 15px; position: relative; @@ -62,9 +68,9 @@ width: 100%; text-align: right; direction: rtl; - font-size: 16px; + font-size: 15px; // font-family: IRANSansNumeral; - font-weight: 500; + font-weight: 200; } &--detail { position: absolute; diff --git a/src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js b/src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js index af71696..aacd485 100644 --- a/src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js +++ b/src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js @@ -1,41 +1,38 @@ import React, { Component } from 'react'; import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'; import Avatar from '@material-ui/core/Avatar'; +import { toast } from 'react-toastify'; export default class RadioMessage extends Component { constructor(props) { super(props); this.state = { - value: null, + value: this.props.message.value, }; } handleRadioChange = (newValue) => { - this.setState({ - value: newValue, - }); + if (this.props.isActive) + this.setState({ + value: newValue, + }); }; render() { - const { message, user, isSelf } = this.props; + const { message, user, isSelf, isActive } = this.props; return ( -
+
{message.options.map((row) => ( - + ))}
- + {isActive && ( + + )}
); } @@ -43,23 +40,24 @@ export default class RadioMessage extends Component { const Row = (props) => { return ( -
this.handleRadioChange(item.name)} - className="message-2d__options--row d-flex" - style={ - { - // backgroundColor: item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)', - // color: item.name === this.state.value ? 'white' : 'black', - } - } - > +
{props.list.map((item) => ( - + ))}
); }; const Item = (props) => { - return
{props.item.name}
; + return ( +
props.handleRadioChange(props.item.name)} + style={{ + backgroundColor: props.item.name === props.value ? '#6f42c1' : 'rgb(181 224 252 / 47%)', + color: props.item.name === props.value ? 'white' : 'black', + }} + > + {props.item.name} +
+ ); }; diff --git a/src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js b/src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js index 6ad4cf6..03b2ee4 100644 --- a/src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js +++ b/src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js @@ -4,6 +4,7 @@ import Slider from '@material-ui/core/Slider'; import Input from '@material-ui/core/Input'; import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'; import Avatar from '@material-ui/core/Avatar'; +import { toast } from 'react-toastify'; export default class SliderMessage extends Component { constructor(props) { super(props); @@ -13,40 +14,40 @@ export default class SliderMessage extends Component { } handleSliderChange = (event, newValue) => { - this.setState({ - value: newValue, - }); + if (this.props.isActive) + this.setState({ + value: newValue, + }); }; handleInputChange = (event) => { - this.setState({ - value: event.target.value === '' ? '' : Number(event.target.value), - }); + if (this.props.isActive) + this.setState({ + value: event.target.value === '' ? '' : Number(event.target.value), + }); }; handleBlur = () => { - if (this.state.value < 0) { - this.setState({ value: 0 }); - } else if (this.state.value > 20) { - this.setState({ value: 20 }); - } + if (this.props.isActive) + if (this.state.value < 0) { + this.setState({ value: 0 }); + } else if (this.state.value > 20) { + this.setState({ value: 20 }); + } }; render() { - const { message, user, isSelf } = this.props; + const { message, user, isSelf, isActive } = this.props; return (
this.handleInputChange(e)} @@ -79,10 +81,12 @@ export default class SliderMessage extends Component { /> - + {isActive && ( + + )}
); }