88 lines
5.3 KiB
JavaScript
88 lines
5.3 KiB
JavaScript
import React from 'react';
|
|
import { List, DatePicker, Tag, Button, Input, Radio, Space, } from 'antd-mobile';
|
|
import ExtraFileCommit from '../../extraFile/commit';
|
|
import dayjs from 'dayjs';
|
|
import OakAvatar from '../../../components/extraFile/avatar';
|
|
import Style from './mobile.module.less';
|
|
export default function render(props) {
|
|
const { data, methods } = props;
|
|
const { t, clean, editMobile, goAuthenticate, refreshWechatPublicUserInfo, editPassword, editNickname, editName, editGender, cancelEdit, update, editBirth, execute, } = methods;
|
|
const { oakFullpath, executable, nickname, name, birth, gender, mobile, isCreation, id, canSyncPublic, refreshing, editAttr, genderOptions, oakDirty, nnDirty, birthDirty, nameDirty, genderDirty, userStateColor, userStateStr, idStateColor, idStateStr, idState, editable, } = data;
|
|
return (<div className={Style.container}>
|
|
<div className={Style['avatar_container']}>
|
|
<OakAvatar oakAutoUnmount={true} oakPath={oakFullpath + '.extraFile$entity'} entity="user" entityId={id} autoUpload={true}/>
|
|
</div>
|
|
<List className={Style.list}>
|
|
<List.Item extra={editAttr !== 'nickname' ? (<div className={nnDirty ? Style.dirty : undefined}>
|
|
{nickname ? nickname : t('unset')}
|
|
</div>) : (<Input disabled={!editable} placeholder={t('placeholder.nickname')} autoFocus value={nickname} onChange={(value) => update({
|
|
nickname: value,
|
|
})} onBlur={() => cancelEdit()} onEnterPress={() => cancelEdit()}/>)} onClick={editAttr === 'nickname' ? undefined : () => editNickname()}>
|
|
{t('user:attr.nickname')}
|
|
</List.Item>
|
|
<List.Item extra={editAttr !== 'name' ? (<div className={nameDirty ? Style.dirty : undefined}>
|
|
{name ? name : t('unset')}
|
|
</div>) : (<Input disabled={!editable} placeholder={t('placeholder.name')} autoFocus value={name} onChange={(value) => update({
|
|
name: value,
|
|
})} onBlur={() => cancelEdit()} onEnterPress={() => cancelEdit()}/>)} onClick={editAttr === 'name' ? undefined : () => editName()} clickable={editable && idState !== 'verified'}>
|
|
{t('user:attr.name')}
|
|
</List.Item>
|
|
<List.Item extra={editAttr !== 'gender' ? (<div className={genderDirty ? Style.dirty : undefined}>
|
|
{gender ? t(`user:v.gender.${gender}`) : t('unset')}
|
|
</div>) : (<Radio.Group disabled={!editable} value={gender} onChange={(value) => {
|
|
update({
|
|
gender: value,
|
|
});
|
|
cancelEdit();
|
|
}}>
|
|
<Space direction="horizontal">
|
|
{genderOptions.map((ele) => (<Radio value={ele.value}>
|
|
{ele.label}
|
|
</Radio>))}
|
|
</Space>
|
|
</Radio.Group>)} onClick={editAttr === 'gender' ? undefined : () => editGender()} clickable={editable && idState !== 'verified'}>
|
|
{t('user:attr.gender')}
|
|
</List.Item>
|
|
<List.Item extra={<div className={birthDirty ? Style.dirty : undefined}>
|
|
{birth ? dayjs(birth).format('YYYY-MM-DD') : t('unset')}
|
|
</div>} onClick={editAttr === 'birth' ? undefined : () => editBirth()} clickable={editable && idState !== 'verified'}>
|
|
{t('user:attr.birth')}
|
|
</List.Item>
|
|
{!isCreation && <List.Item extra={mobile ? mobile : t('unset')} onClick={() => {
|
|
editMobile();
|
|
}}>
|
|
{t('mobile')}
|
|
</List.Item>}
|
|
{!isCreation && <List.Item extra={'********'} onClick={() => {
|
|
editPassword();
|
|
}}>
|
|
{t('password')}
|
|
</List.Item>}
|
|
<List.Item extra={<Tag fill="outline" color={userStateColor}>
|
|
{userStateStr}
|
|
</Tag>}>
|
|
{t('user:attr.userState')}
|
|
</List.Item>
|
|
<List.Item extra={<Tag fill="outline" color={idStateColor}>
|
|
{idStateStr}
|
|
</Tag>} onClick={() => goAuthenticate()}>
|
|
{t('user:attr.idState')}
|
|
</List.Item>
|
|
</List>
|
|
<DatePicker visible={editAttr === 'birth'} onClose={() => cancelEdit()} precision='day' min={new Date('1900-01-01')} max={new Date()} value={new Date(birth)} onConfirm={(value) => {
|
|
update({
|
|
birth: dayjs(value).startOf('day').valueOf(),
|
|
});
|
|
}}/>
|
|
<div className={Style.btnContainer}>
|
|
{!oakDirty && canSyncPublic && editable && <Button className={Style.syncWechat} block onClick={() => refreshWechatPublicUserInfo()}>
|
|
{t('syncWeChat')}
|
|
</Button>}
|
|
{executable === true && <ExtraFileCommit buttonProps={{
|
|
color: 'primary',
|
|
block: true,
|
|
}} oakPath={oakFullpath} entity="user"/>}
|
|
</div>
|
|
</div>);
|
|
}
|