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); if (await this.refresh()) return this.result(url, (await fetch()).data.data);
break; break;
default: default:
toast(response.data.message); toast.error(response.data.message);
} }
return false; return false;
}; };

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

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

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

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

@ -6,16 +6,20 @@
// height : 40px; // height : 40px;
padding: 2px 0px 0px; padding: 2px 0px 0px;
align-items: flex-end; align-items: flex-end;
&__item { &__row{
padding: 8px 6px; width: 100%;
background-color: white; &--item {
border-radius: 5px; padding: 8px 6px;
margin: 5px; background-color: white;
width: 100% !important; border-radius: 5px;
justify-content: center; margin: 5px;
color: black; width: 100% !important;
min-height: 60px; 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 arrayMove from 'array-move';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'; import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
const SortableItem = SortableElement(({ value }) => ( const SortableItem = SortableElement(({ row }) => (
<div className="message-2d__options--draggable d-flex">{value}</div> <div className="message-2d__options--row d-flex">
{row.map((item) => (
<div>{item.text}</div>
))}
</div>
)); ));
const SortableList = SortableContainer(({ items }) => { const SortableList = SortableContainer(({ items }) => {
return ( return (
<div className="message-2d__options d-flex flex-column"> <div className="message-2d__options d-flex flex-column">
{items.map((value, index) => ( {items.map((row, index) => (
<SortableItem key={`item-${value}`} index={index} value={value} /> <SortableItem key={`item-${index}`} index={index} value={row} />
))} ))}
</div> </div>
); );

@ -38,19 +38,8 @@ export default class RadioMessage extends Component {
) : null} ) : null}
</div> </div>
<div className="message-2d__options d-flex flex-wrap justify-content-center"> <div className="message-2d__options d-flex flex-wrap justify-content-center">
{message.options.map((item, i) => ( {message.options.map((row, i) => (
<div <Row row={row} key={i} />
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>
))} ))}
</div> </div>
<button className="message-2d__submit"> <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