ingreza added someth

front
Reza_ashrafi 3 years ago
parent 36afd8c740
commit 55d88e895a
  1. 2
      src/Redux/proxy.js
  2. 2
      src/views/Auth/Auth.js
  3. 83
      src/views/Auth/Login/Code/Code.js
  4. 5
      src/views/Auth/Login/Login.js
  5. 33
      src/views/Auth/Login/Mobile/Mobile.js
  6. 13
      src/views/ChatRoom/Body/Body.js
  7. 22
      src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss
  8. 12
      src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
  9. 37
      src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js

@ -31,7 +31,7 @@ class Proxy {
if (await this.refresh()) return this.result(url, (await fetch()).data.data);
break;
default:
toast(response.data.message);
toast.error(response.data.message);
}
return false;
};

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import {ToastContainer} from 'react-toastify';
import Logo from './Logo/Logo';
import Bio from './Bio/Bio';
import Login from './Login/Login';

@ -6,10 +6,6 @@ export default class Code extends Component {
super(props);
this.state = {
auth_code1: '',
auth_code2: '',
auth_code3: '',
auth_code4: '',
flag: false,
resendStatus: false,
};
@ -23,19 +19,21 @@ export default class Code extends Component {
changeValue = (e) => {
if (e.target.value.match('^[0-9]{1}$')) {
this.setState({
[e.target.name]: e.target.value,
});
if (e.target.name === 'auth_code1') {
this.setState({ o1: e.target.value });
if (e.target.name === 'o1') {
if(typeof this.state.o1 === Number){
console.log(e.target.value);
}else{
this.setState({ o1 : e.target.value });
}
this.inputRef2.focus();
} else if (e.target.name === 'auth_code2') {
} else if (e.target.name === 'o2') {
this.setState({ o2: e.target.value });
this.inputRef3.focus();
} else if (e.target.name === 'auth_code3') {
} else if (e.target.name === 'o3') {
this.setState({ o3: e.target.value });
this.inputRef4.focus();
} else if (e.target.name === 'auth_code4') {
} else if (e.target.name === 'o4') {
this.setState({ o4: e.target.value });
const o4 = e.target.value;
const { o1, o2, o3 } = this.state;
this.props.parent.setState({ otp: `${o1}${o2}${o3}${o4}` });
@ -51,15 +49,15 @@ export default class Code extends Component {
this.setState({
[e.target.name]: '',
});
if (e.target.name === 'auth_code1') {
if (e.target.name === 'o1') {
return;
} else if (e.target.name === 'auth_code2') {
} else if (e.target.name === 'o2') {
this.inputRef1.focus();
return;
} else if (e.target.name === 'auth_code3') {
} else if (e.target.name === 'o3') {
this.inputRef2.focus();
return;
} else if (e.target.name === 'auth_code4') {
} else if (e.target.name === 'o4') {
this.inputRef3.focus();
return;
}
@ -70,6 +68,17 @@ export default class Code extends Component {
this.inputRef1.focus();
}
onInput= (e) => {
e.target.value = e.target.value
.replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) {
return c.charCodeAt(0) & 0xf;
})
.replace(/[^\d]/, '')
.slice(-1);
}
render() {
return (
<>
@ -79,55 +88,63 @@ export default class Code extends Component {
</div>
<div className="login-code__bottom d-flex">
<input
name="auth_code1"
type="number"
name="o1"
type="text"
onChange={(e) => this.changeValue(e)}
maxLength="1"
maxLength="2"
inputMode="numeric"
ref={(input) => {
this.inputRef1 = input;
}}
autoComplete="false"
value={this.state.auth_code1}
value={this.state.o1}
onKeyDown={(e) => this.keyboardEvent(e)}
onInput={this.onInput}
/>
<input
name="auth_code2"
type="number"
name="o2"
type="text"
onChange={(e) => this.changeValue(e)}
maxLength="1"
maxLength="2"
inputMode="numeric"
ref={(input) => {
this.inputRef2 = input;
}}
autoComplete="false"
value={this.state.auth_code2}
value={this.state.o2}
onKeyDown={(e) => this.keyboardEvent(e)}
onInput={this.onInput}
/>
<input
name="auth_code3"
type="number"
name="o3"
type="text"
onChange={(e) => this.changeValue(e)}
maxLength="1"
maxLength="2"
inputMode="numeric"
ref={(input) => {
this.inputRef3 = input;
}}
autoComplete="false"
value={this.state.auth_code3}
value={this.state.o3}
onKeyDown={(e) => this.keyboardEvent(e)}
onInput={this.onInput}
/>
<input
name="auth_code4"
type="number"
name="o4"
type="text"
onChange={(e) => this.changeValue(e)}
maxLength="1"
maxLength="2"
inputMode="numeric"
ref={(input) => {
this.inputRef4 = input;
}}
autoComplete="false"
value={this.state.auth_code4}
value={this.state.o4}
onKeyDown={(e) => this.keyboardEvent(e)}
onInput={this.onInput}
/>
{!this.state.resendStatus ? (
<Timer seconds={119} parent={this} />
<Timer seconds={5} parent={this} />
) : (
<span
style={{ top: 150, color: 'blue', textDecoration: 'underline' }}

@ -15,6 +15,11 @@ class Login extends Component {
}
async componentDidUpdate() {
const { cellphone, otp, section } = this.state;
// if(cellphone.length === 9 && !otp){
// this.setState({section: 1});
// this.props.otp({cellphone});
// }
if (cellphone && !otp) this.props.otp({ cellphone });
if (section && cellphone && otp) this.props.login({ cellphone, otp });
}

@ -3,6 +3,7 @@ import phonenumber from '../../../../assets/icons/phonenumber.png';
export default class Mobile extends Component {
render() {
return (
<>
<div className="login-mobile__top d-flex">
@ -11,20 +12,24 @@ export default class Mobile extends Component {
<img src={phonenumber} alt="" />
</div>
<div className="login-mobile__input d-flex">
<input
type="text"
maxLength={9}
inputMode="numeric"
onChange={(e) => this.setState({ cellphone: e.target.value })}
onInput={(e) =>
(e.target.value = e.target.value
.replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) {
return c.charCodeAt(0) & 0xf;
})
.replace(/[^\d]/, ''))
}
/>
<div>09</div>
<form onSubmit={() => this.props.parent.setState({ section: 1, cellphone: '09' + this.state.cellphone })} >
<input
type="text"
maxLength={9}
inputMode="numeric"
onChange={(e) => this.setState({ cellphone: e.target.value })}
onInput={(e) =>
(e.target.value = e.target.value
.replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) {
return c.charCodeAt(0) & 0xf;
})
.replace(/[^\d]/, ''))
}
// onAction={}
/>
<div>09</div>
</form>
</div>
<button
onClick={() =>

@ -5,7 +5,7 @@ import ChatSuggest from './ChatSuggest/ChatSuggest';
import { RecordState } from 'audio-react-recorder';
import ReactPlayer from 'react-player';
import ReactAudioPlayer from 'react-audio-player';
import { ToastContainer } from 'react-toastify';
import photo from '../../../assets/images/reza.png';
import photo1 from '../../../assets/images/user2.png';
import './Body.scss';
@ -419,6 +419,17 @@ class Body extends Component {
) : null}
{this.state.footer === 'suggest' ? <ChatSuggest suggest={this.state.suggest} /> : null}
</div>
<ToastContainer
position="bottom-right"
autoClose={1500}
hideProgressBar={true}
newestOnTop={true}
closeOnClick
rtl={true}
pauseOnFocusLoss
draggable
pauseOnHover
/>
</div>
);
}

@ -6,16 +6,20 @@
// height : 40px;
padding: 2px 0px 0px;
align-items: flex-end;
&__item {
padding: 8px 6px;
background-color: white;
border-radius: 5px;
margin: 5px;
width: 100% !important;
justify-content: center;
color: black;
min-height: 60px;
&__row{
width: 100%;
&--item {
padding: 8px 6px;
background-color: white;
border-radius: 5px;
margin: 5px;
width: 100% !important;
justify-content: center;
color: black;
min-height: 60px;
}
}
}
}

@ -3,15 +3,19 @@ import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import arrayMove from 'array-move';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
const SortableItem = SortableElement(({ value }) => (
<div className="message-2d__options--draggable d-flex">{value}</div>
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((value, index) => (
<SortableItem key={`item-${value}`} index={index} value={value} />
{items.map((row, index) => (
<SortableItem key={`item-${index}`} index={index} value={row} />
))}
</div>
);

@ -38,19 +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((item, i) => (
<div
key={i}
onClick={() => this.handleRadioChange(item.name)}
className="message-2d__options--radio"
style={{
backgroundColor:
item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)',
color: item.name === this.state.value ? 'white' : 'black',
}}
>
{item.name}
</div>
{message.options.map((row, i) => (
<Row row={row} key={i} />
))}
</div>
<button className="message-2d__submit">
@ -61,3 +50,25 @@ export default class RadioMessage extends Component {
);
}
}
const Row = (row) => {
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',
}}
>
{row.map((item) => (
<Item item={item} />
))}
</div>
);
};
const Item = (item) => {
return <div>{item.name}</div>;
};

Loading…
Cancel
Save