reza add 2d support

src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js

@@ -1,26 +1,8 @@
-import React, { Component } from 'react';
+import React, { Component, useEffect } from 'react';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import arrayMove from 'array-move';
 import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
 
-const SortableItem = SortableElement(({ row }) => (
-  <div className="message-2d__options--row d-flex">
-    {row.map((item) => (
-      <div>{item.text}</div>
-    ))}
-  </div>
-));
-
-const SortableList = SortableContainer(({ items }) => {
-  return (
-    <div className="message-2d__options d-flex flex-column">
-      {items.map((row, index) => (
-        <SortableItem key={`item-${index}`} index={index} value={row} />
-      ))}
-    </div>
-  );
-});
-
 export default class DraggableMessage extends Component {
   state = {
     items: ['استقلال', 'پرسپولیس', 'سپاهان'],
@@ -31,6 +13,7 @@ export default class DraggableMessage extends Component {
       items: arrayMove(items, oldIndex, newIndex),
     }));
   };
+
   render() {
     const { message, user, isSelf } = this.props;
     return (
@@ -53,7 +36,7 @@ export default class DraggableMessage extends Component {
             </p>
           ) : null}
         </div>
-        <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />
+        <SortableList items={message.options} onSortEnd={this.onSortEnd} />
         <button className="message-2d__submit">
           ثبت
           <ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
@@ -62,3 +45,21 @@ export default class DraggableMessage extends Component {
     );
   }
 }
+
+const SortableList = SortableContainer(({ items }) => {
+  return (
+    <div className="message-2d__options d-flex flex-column">
+      {items.map((row, index) => (
+        <SortableItem key={`item-${index}`} index={index} value={row} />
+      ))}
+    </div>
+  );
+});
+
+const SortableItem = SortableElement(({ value }) => (
+  <div className="message-2d__options--row d-flex">
+    {value.map((item) => (
+      <div>{item.text}</div>
+    ))}
+  </div>
+));

src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js

@@ -38,8 +38,8 @@ export default class RadioMessage extends Component {
           ) : null}
         </div>
         <div className="message-2d__options d-flex flex-wrap justify-content-center">
-          {message.options.map((row, i) => (
-            <Row row={row} key={i} />
+          {message.options.map((row) => (
+            <Row list={row} />
           ))}
         </div>
         <button className="message-2d__submit">
@@ -51,24 +51,25 @@ export default class RadioMessage extends Component {
   }
 }
 
-const Row = (row) => {
+const Row = (props) => {
   return (
     <div
-      key={i}
       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',
+        // backgroundColor: item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)',
+        // color: item.name === this.state.value ? 'white' : 'black',
       }}
     >
-      {row.map((item) => (
+      {
+        props.list.map((item) => (
           <Item item={item} />
-      ))}
+        )) 
+      }
     </div>
   );
 };
 
-const Item = (item) => {
-  return <div>{item.name}</div>;
+const Item = (props) => {
+  return <div>{props.item.name}</div>;
 };