fix

src/views/ChatRoom/Body/Body.js

@@ -371,13 +371,13 @@ class Body extends Component {
               this.state.music === null &&
               this.state.video === null ? (
                 <Message
-                  isActive={i == messageList.length - 1}
+                  isActive={true || i == messageList.length - 1}
                   prevUserId={i > 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

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 }) => ({
+    if (this.props.isActive)
-      options: arrayMove(options, oldIndex, newIndex),
+      this.setState(({ options }) => ({
-    }));
+        options: arrayMove(options, oldIndex, newIndex),
+      }));
   };
 
   render() {
-    const { message, user, isSelf } = this.props;
+    const { message, user, isSelf, isActive } = this.props;
 
     return (
-      <div
+      <div className="message-2d d-flex flex-column d-flex">
-        className="message-2d d-flex flex-column d-flex"
+        <SortableList items={this.state.options} onSortEnd={this.onSortEnd} disabled={!isActive} />
-        style={{
+        {isActive && (
-          marginRight: isSelf ? 0 : 70,
+          <button className="message-2d__submit" onClick={() => toast.success('ثبت شد')}>
-          marginLeft: isSelf ? 70 : 0,
+            ثبت
-          maxWidth: 400,
+            <ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
-        }}
+          </button>
-      >
+        )}
-        <SortableList items={this.state.options} onSortEnd={this.onSortEnd} />
-        <button className="message-2d__submit">
-          ثبت
-          <ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
-        </button>
       </div>
     );
   }
 }
 
-const SortableList = SortableContainer(({ items }) => {
+const SortableList = SortableContainer(({ items, disabled }) => {
   return (
     <div className="message-2d__options d-flex flex-column">
       {items.map((row, index) => (
-        <SortableItem key={`item-${index}`} index={index} value={row} />
+        <SortableItem key={`item-${index}`} index={index} value={row} disabled={disabled} />
       ))}
     </div>
   );

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' ? (
-        {message.type === '2d' ? (
+            <Message2D message={message} user={user} isSelf={isSelf} isActive={isActive} />
-          <Message2D message={message} user={user} isSelf={isSelf} isActive={isActive} />
+          ) : null}
-        ) : null}
+          {message.type === 'draggable' ? (
-        {message.type === 'draggable' ? (
+            <DraggableMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
-          <DraggableMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
+          ) : null}
-        ) : null}
+          {message.type === 'slider' ? (
-        {message.type === 'slider' ? (
+            <SliderMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
-          <SliderMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
+          ) : null}
-        ) : null}
+          {message.type === 'radio' ? (
-        {message.type === 'radio' ? (
+            <RadioMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
-          <RadioMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
+          ) : null}
-        ) : null}
+        </NormalMessage>
       </div>
     );
   }

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 (
-      <div
+      <div className="message-2d d-flex flex-column d-flex">
-        className="message-2d d-flex flex-column d-flex"
-        style={{
-          marginRight: isSelf ? 0 : 70,
-          marginLeft: isSelf ? 70 : 0,
-          maxWidth: 400,
-        }}
-      >
         <div className="message-2d__options d-flex flex-column">
           {message.options.map((option, i) => (
             <div
@@ -25,8 +26,12 @@ export default class Message2D extends Component {
                 <div
                   key={message.id + '_' + item.id + '_' + i}
                   className="d-flex"
-                  style={{ width: `calc(100% / ${option.length} )` }}
+                  style={{
-                  draggable={true}
+                    width: `calc(100% / ${option.length} )`,
+
+                    backgroundColor: item.id == this.state.value ? '#6f42c1' : '',
+                  }}
+                  onClick={() => this.click(item.id)}
                 >
                   <span>{item.name}</span>
                 </div>

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 {

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 (
       <div
         className="normal-message d-flex flex-column d-flex"
@@ -65,7 +66,7 @@ export default class NormalMessage extends Component {
                 : `normal-message__box  normal-message__box--file`
             }
             style={{
-              paddingTop: hasavatar ? 25 : 10,
+              paddingTop: hasavatar ? 25 : 15,
               backgroundColor: isSelf ? 'rgb(15, 93, 190)' : 'white',
               width: 'calc(100%-70px)',
             }}
@@ -141,7 +142,12 @@ export default class NormalMessage extends Component {
             ) : null}
             {message.voice !== null ? <ReactAudioPlayer src={message.voice.url} controls /> : null}
             {message.image !== null ? (
-              <div className="normal-message__box--caption">
+              <div
+                className="normal-message__box--caption"
+                ref={(refElem) => {
+                  console.log(refElem);
+                }}
+              >
                 <a href={message.image} download>
                   <img src={message.image} download alt="" />
                 </a>
@@ -192,6 +198,7 @@ export default class NormalMessage extends Component {
                 <div>{message.document.name}</div>
               </a>
             ) : null}
+
             <div className="normal-message__box--date d-flex">
               <span style={{ color: isSelf ? '#aaa' : 'gray' }}>
                 {message.status == 1 && <DoneIcon fontSize="small" />}
@@ -208,6 +215,7 @@ export default class NormalMessage extends Component {
               </span>
             </div>
           </div>
+
           <div className={isSelf ? 'icons self' : 'icons'}>
             <div>
               <FavoriteIcon fontSize="samall" color="primary" />
@@ -223,6 +231,17 @@ export default class NormalMessage extends Component {
             </div> */}
           </div>
         </div>
+        <div
+          className="f-flex keys"
+          style={{
+            width: 'calc(100% - 70px)',
+            marginRight: isSelf ? 0 : 70,
+            marginLeft: isSelf ? 70 : 0,
+            alignSelf: isSelf ? 'flex-end' : 'flex-start',
+          }}
+        >
+          {children}
+        </div>
       </div>
     );
   }

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;
+      line-height: 1.3em;
-      max-width: 400px;
+      max-width: 500px;
+      min-width: 250px;
       display: flex;
       justify-content: flex-end;
-      width: 100%;
+      // width: 100%;
-      padding: 20px 7px 5px;
+      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;

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({
+    if (this.props.isActive)
-      value: newValue,
+      this.setState({
-    });
+        value: newValue,
+      });
   };
 
   render() {
-    const { message, user, isSelf } = this.props;
+    const { message, user, isSelf, isActive } = this.props;
     return (
-      <div
+      <div className="message-2d d-flex flex-column d-flex">
-        className="message-2d d-flex flex-column d-flex"
-        style={{
-          marginRight: isSelf ? 0 : 70,
-          marginLeft: isSelf ? 70 : 0,
-          maxWidth: 400,
-        }}
-      >
         <div className="message-2d__options d-flex flex-wrap justify-content-center">
           {message.options.map((row) => (
-            <Row list={row} />
+            <Row list={row} handleRadioChange={this.handleRadioChange} value={this.state.value} />
           ))}
         </div>
-        <button className="message-2d__submit">
+        {isActive && (
-          ثبت
+          <button className="message-2d__submit" onClick={() => toast.success('ثبت شد')}>
-          <ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
+            ثبت
-        </button>
+            <ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
+          </button>
+        )}
       </div>
     );
   }
@@ -43,23 +40,24 @@ export default class RadioMessage extends Component {
 
 const Row = (props) => {
   return (
-    <div
+    <div className="message-2d__options--row d-flex">
-      onClick={() => 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) => (
-        <Item item={item} />
+        <Item item={item} {...props} />
       ))}
     </div>
   );
 };
 
 const Item = (props) => {
-  return <div>{props.item.name}</div>;
+  return (
+    <div
+      onClick={() => 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}
+    </div>
+  );
 };

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({
+    if (this.props.isActive)
-      value: newValue,
+      this.setState({
-    });
+        value: newValue,
+      });
   };
 
   handleInputChange = (event) => {
-    this.setState({
+    if (this.props.isActive)
-      value: event.target.value === '' ? '' : Number(event.target.value),
+      this.setState({
-    });
+        value: event.target.value === '' ? '' : Number(event.target.value),
+      });
   };
 
   handleBlur = () => {
-    if (this.state.value < 0) {
+    if (this.props.isActive)
-      this.setState({ value: 0 });
+      if (this.state.value < 0) {
-    } else if (this.state.value > 20) {
+        this.setState({ value: 0 });
-      this.setState({ value: 20 });
+      } 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 (
       <div
         className="message-2d d-flex flex-column d-flex"
         style={{
-          marginTop: 5,
+          marginTop: 2,
-          marginBottom: 5,
-          marginRight: isSelf ? 0 : 70,
-          marginLeft: isSelf ? 70 : 0,
-          maxWidth: 400,
         }}
       >
         <Grid container spacing={2} alignItems="center">
           <Grid item xs>
             <Slider
+              // disabled={!isActive}
               value={typeof this.state.value === 'number' ? this.state.value : 0}
               onChange={this.handleSliderChange}
               aria-labelledby="input-slider"
@@ -58,6 +59,7 @@ export default class SliderMessage extends Component {
           </Grid>
           <Grid item>
             <Input
+              disabled={!isActive}
               value={this.state.value}
               margin="dense"
               onChange={(e) => this.handleInputChange(e)}
@@ -79,10 +81,12 @@ export default class SliderMessage extends Component {
             />
           </Grid>
         </Grid>
-        <button className="message-2d__submit">
+        {isActive && (
-          ثبت
+          <button className="message-2d__submit" onClick={() => toast.success('ثبت شد')}>
-          <ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
+            ثبت
-        </button>
+            <ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
+          </button>
+        )}
       </div>
     );
   }