Gorji 3 years ago
parent 57e7269d23
commit 9042f31b7f
  1. 6
      src/views/ChatRoom/Body/Body.js
  2. 35
      src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
  3. 28
      src/views/ChatRoom/Body/Message/Message.js
  4. 27
      src/views/ChatRoom/Body/Message/Message2D/Message2D.js
  5. 2
      src/views/ChatRoom/Body/Message/Message2D/Message2D.scss
  6. 25
      src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js
  7. 18
      src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss
  8. 58
      src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js
  9. 46
      src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.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

@ -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 (
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginRight: isSelf ? 0 : 70,
marginLeft: isSelf ? 70 : 0,
maxWidth: 400,
}}
>
<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 className="message-2d d-flex flex-column d-flex">
<SortableList items={this.state.options} onSortEnd={this.onSortEnd} disabled={!isActive} />
{isActive && (
<button className="message-2d__submit" onClick={() => toast.success('ثبت شد')}>
ثبت
<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>
);

@ -18,20 +18,20 @@ export default class Message extends Component {
isSelf={isSelf}
file={file}
document={document}
/>
{message.type === '2d' ? (
<Message2D message={message} user={user} isSelf={isSelf} isActive={isActive} />
) : null}
{message.type === 'draggable' ? (
<DraggableMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
) : null}
{message.type === 'slider' ? (
<SliderMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
) : null}
{message.type === 'radio' ? (
<RadioMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
) : null}
>
{message.type === '2d' ? (
<Message2D message={message} user={user} isSelf={isSelf} isActive={isActive} />
) : null}
{message.type === 'draggable' ? (
<DraggableMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
) : null}
{message.type === 'slider' ? (
<SliderMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
) : null}
{message.type === 'radio' ? (
<RadioMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
) : null}
</NormalMessage>
</div>
);
}

@ -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
className="message-2d d-flex flex-column d-flex"
style={{
marginRight: isSelf ? 0 : 70,
marginLeft: isSelf ? 70 : 0,
maxWidth: 400,
}}
>
<div className="message-2d d-flex flex-column d-flex">
<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} )` }}
draggable={true}
style={{
width: `calc(100% / ${option.length} )`,
backgroundColor: item.id == this.state.value ? '#6f42c1' : '',
}}
onClick={() => this.click(item.id)}
>
<span>{item.name}</span>
</div>

@ -1,5 +1,7 @@
@media screen and (max-width: 4500px) {
.message-2d {
display: flex;
justify-content: flex-end;
// width: 100%;
position: relative;
img {

@ -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>
);
}

@ -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;

@ -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 (
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginRight: isSelf ? 0 : 70,
marginLeft: isSelf ? 70 : 0,
maxWidth: 400,
}}
>
<div className="message-2d d-flex flex-column d-flex">
<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">
ثبت
<ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
</button>
{isActive && (
<button className="message-2d__submit" onClick={() => toast.success('ثبت شد')}>
ثبت
<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
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',
}
}
>
<div className="message-2d__options--row d-flex">
{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>
);
};

@ -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 (
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginTop: 5,
marginBottom: 5,
marginRight: isSelf ? 0 : 70,
marginLeft: isSelf ? 70 : 0,
maxWidth: 400,
marginTop: 2,
}}
>
<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">
ثبت
<ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
</button>
{isActive && (
<button className="message-2d__submit" onClick={() => toast.success('ثبت شد')}>
ثبت
<ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
</button>
)}
</div>
);
}

Loading…
Cancel
Save