online/src/login/AccountConfig.js

import React, {Component} from 'react';
import {FormattedMessage} from 'react-intl';
import {Icon, Row, Col, Input, Button} from 'antd';
import './index.css'
import avatar from '../images/avatar.jpg';
import classnames from 'classnames';

class AccountConfig extends Component {
    constructor(props) {
        super(props);
        this.state = {
            overNickname: false,
            editNickname: false,
            overTel: false,
            editTel: false,
            overEmail: false,
            editEmail: false
        };

    }

    cancelEdit = (kind) => {
        let key = `edit${kind[0].toUpperCase()}${kind.slice(1)}`;
        this.setState({
            [key]: false
        })
    };

    render() {
        return (
            <div>
                <Row style={{marginTop: 100}}>
                    <Col span={12} offset={6} className={'login-wrapper'}>
                        <div className={'mask'} style={{backgroundImage: `url(${avatar})`}}>
                            <div className={'mask-black'}>
                                <div className={'tip'}>
                                    <Icon style={{fontSize: 30, display: 'block'}} type="camera"/>
                                    <span style={{paddingTop: 5, display: 'block'}} className={'tip-span'}>
                                        <FormattedMessage id="modify avatar"/>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <Row>
                            <Col span={20} offset={4} className={'message-wrapper'}>
                                <Row>
                                    <Col span={22}>
                                        {
                                            this.state.editNickname ?
                                                <EditNickname kind={'nickname'} cancelEdit={this.cancelEdit}/>
                                                :
                                                <div className={'nickname'} onMouseOver={() => {
                                                    this.setState({overNickname: true})
                                                }} onMouseLeave={() => {
                                                    this.setState({overNickname: false})
                                                }}>
                                                    xxx
                                                    {
                                                        this.state.overNickname ?
                                                            <span style={{paddingLeft: '5px', paddingRight: '5px'}}
                                                                  onClick={() => {
                                                                      this.setState({
                                                                          editNickname: true,
                                                                          overNickname: false
                                                                      })
                                                                  }}>
                                                                <Icon style={{fontSize: '18px'}} type="edit"
                                                                      theme="twoTone"/>
                                                                <span className={'modify'}> <FormattedMessage id="modify"/></span>
                                                            </span>
                                                            :
                                                            ''
                                                    }
                                                </div>
                                        }
                                    </Col>
                                    <Col span={2}>
                                        <div className="back-to-login" onClick={() => {
                                            this.props.history.push({
                                                pathname: '/login',
                                            })
                                        }}>
                                            <FormattedMessage id="login"/> <Icon type="right" style={{color: '#848fa6'}}/>
                                        </div>
                                    </Col>
                                </Row>

                                <Row className={'message'}>
                                    <Col span={5}>
                                        <span className={'message-title'}><FormattedMessage id="tel"/></span>
                                    </Col>
                                    <Col span={19}>
                                        {
                                            this.state.editTel ?
                                                <Edit kind={'tel'} cancelEdit={this.cancelEdit}/>
                                                :
                                                <div className={'message-content'} onMouseOver={() => {
                                                    this.setState({overTel: true})
                                                }} onMouseLeave={() => {
                                                    this.setState({overTel: false})
                                                }}>
                                                    110
                                                    {
                                                        this.state.overTel ?
                                                            <span style={{paddingLeft: '5px', paddingRight: '5px'}}
                                                                  onClick={() => {
                                                                      this.setState({
                                                                          editTel: true,
                                                                          overTel: false
                                                                      })
                                                                  }}>
                                                                <Icon style={{fontSize: '18px'}} type="edit"
                                                                      theme="twoTone"/>
                                                                <span className={'modify'}> <FormattedMessage id="modify"/></span>
                                                            </span>
                                                            :
                                                            ''
                                                    }
                                                </div>
                                        }
                                    </Col>
                                </Row>

                                <Row className={'message'}>
                                    <Col span={5}>
                                        <span className={'message-title'}><FormattedMessage id="email"/></span>
                                    </Col>

                                    <Col span={19}>

                                        {
                                            this.state.editEmail ?
                                                <Edit kind={'email'} cancelEdit={this.cancelEdit}/>
                                                :
                                                <div className={'message-content'} onMouseOver={() => {
                                                    this.setState({overEmail: true})
                                                }} onMouseLeave={() => {
                                                    this.setState({overEmail: false})
                                                }}>
                                                    xxx@ioobot.com
                                                    {
                                                        this.state.overEmail ?
                                                            <span style={{paddingLeft: '5px', paddingRight: '5px'}}
                                                                  onClick={() => {
                                                                      this.setState({
                                                                          editEmail: true,
                                                                          overEmail: false
                                                                      })
                                                                  }}>
                                                                <Icon style={{fontSize: '18px'}} type="edit"
                                                                      theme="twoTone"/>
                                                                <span className={'modify'}> modify</span>
                                                            </span>
                                                            :
                                                            ''
                                                    }
                                                </div>
                                        }
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default AccountConfig;

class EditNickname extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <Row className={'message-top'}>
                <Col span={5}>
                    <span className={'message-title message-title-high'}>{this.props.kind}</span>
                </Col>
                <Col span={19}>
                    <span className={'message-content'}>
                        <Input/>
                        <Button type={'primary'}><FormattedMessage id="save"/></Button>
                        <Button onClick={() => this.props.cancelEdit(this.props.kind)}><FormattedMessage id="cancel"/></Button>
                    </span>
                </Col>
            </Row>
        )
    }
}

class Edit extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <span className={'message-content'}>
                <Input/>
                <Button type={'primary'}><FormattedMessage id="save"/></Button>
                <Button onClick={() => this.props.cancelEdit(this.props.kind)}><FormattedMessage id="cancel"/></Button>
            </span>
        )
    }
}