Reza_ashrafi
/
ChatPWA
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix

Browse Source
front
Gorji 4 years ago
parent 57e7269d23
commit 9042f31b7f
9 changed files with 138 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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

6
src/views/ChatRoom/Body/Body.js
Unescape View File

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

35
src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
Unescape View File

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

28
src/views/ChatRoom/Body/Message/Message.js
Unescape View File

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

27
src/views/ChatRoom/Body/Message/Message2D/Message2D.js
Unescape View File

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

2
src/views/ChatRoom/Body/Message/Message2D/Message2D.scss
Unescape View File

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

25
src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js
Unescape View File

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

18
src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss
Unescape View File

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

58
src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js
Unescape View File

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

46
src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save