61 lines
4.8 KiB
JavaScript
61 lines
4.8 KiB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
import { useState } from 'react';
|
|
import Styles from './web.pc.module.less';
|
|
import { Button, List, Modal, Tag, Input, Radio } from 'antd';
|
|
import MyAvatar from '../avatar';
|
|
import OakIcon from 'oak-frontend-base/es/components/icon';
|
|
const PrimaryColor = getComputedStyle(document.documentElement).getPropertyValue('--oak-color-primary');
|
|
const WarningColor = getComputedStyle(document.documentElement).getPropertyValue('--oak-color-warning');
|
|
const ErrorColor = getComputedStyle(document.documentElement).getPropertyValue('--oak-color-error');
|
|
const SuccessColor = getComputedStyle(document.documentElement).getPropertyValue('--oak-color-success');
|
|
const UserStateColor = {
|
|
normal: PrimaryColor,
|
|
merged: WarningColor,
|
|
shadow: WarningColor,
|
|
disabled: ErrorColor,
|
|
};
|
|
const IdStateColor = {
|
|
unverified: WarningColor,
|
|
verifying: PrimaryColor,
|
|
verified: SuccessColor,
|
|
};
|
|
export default function Render(props) {
|
|
const { nameText, mobileText, userId, nickname, name, idState, userState, gender, showLogout } = props.data;
|
|
const { t, logout, navigateTo, updateAttribute } = props.methods;
|
|
const [updateAttr, setUpdateAttr] = useState(undefined);
|
|
const [updateValue, setUpdateValue] = useState(undefined);
|
|
if (!userId) {
|
|
return (_jsxs("div", { className: Styles.container, children: [_jsx("div", { className: Styles.header, children: _jsx(Button, { onClick: () => navigateTo({
|
|
url: '/login',
|
|
}), children: t('login') }) }), _jsx("div", { className: Styles.body })] }));
|
|
}
|
|
const GenderOptions = [
|
|
{
|
|
label: t('user:v.gender.male'),
|
|
value: 'male',
|
|
},
|
|
{
|
|
label: t('user:v.gender.female'),
|
|
value: 'female',
|
|
}
|
|
];
|
|
return (_jsxs("div", { className: Styles.container, children: [_jsxs("div", { className: Styles.header, children: [_jsx(MyAvatar, { size: 66, iconColor: "white" }), _jsx("div", { className: Styles.name, children: nameText || t('unset') }), showLogout && _jsx(Button, { size: 'small', onClick: () => logout(), children: t('logout') })] }), _jsx("div", { className: Styles.body, children: _jsxs(List, { itemLayout: "vertical", children: [_jsx(List.Item, { extra: _jsx(OakIcon, { name: "pen-to-square" }), onClick: () => setUpdateAttr('nickname'), children: _jsx(List.Item.Meta, { title: t('user:attr.nickname'), description: nickname || t('unset') }) }), _jsx(List.Item, { extra: _jsx(OakIcon, { name: "pen-to-square" }), onClick: () => setUpdateAttr('name'), children: _jsx(List.Item.Meta, { title: t('user:attr.name'), description: name || t('unset') }) }), _jsx(List.Item, { children: _jsx(List.Item.Meta, { title: t('user:attr.userState'), description: _jsx(Tag, { color: UserStateColor[userState], children: t(`user:v.userState.${userState}`) }) }) }), _jsx(List.Item, { children: _jsx(List.Item.Meta, { title: t('user:attr.idState'), description: _jsx(Tag, { color: IdStateColor[idState], children: t(`user:v.idState.${idState}`) }) }) }), _jsx(List.Item, { extra: _jsx(OakIcon, { name: "pen-to-square" }), onClick: () => setUpdateAttr('gender'), children: _jsx(List.Item.Meta, { title: t('user:attr.gender'), description: gender ? t(`user:v.gender.${gender}`) : t('unset') }) }), _jsx("a", { href: '/mobile/me', children: _jsx(List.Item, { extra: _jsx(OakIcon, { name: "chevron-right" }), children: _jsx(List.Item.Meta, { title: t('mobile'), description: mobileText }) }) })] }) }), _jsx("div", { className: Styles.extraContainer, children: _jsx("div", { className: Styles.extra, children: _jsx("a", { href: "/user/manage", children: _jsx(OakIcon, { name: "wand-magic-sparkles", size: 26, color: "warning" }) }) }) }), _jsxs(Modal, { open: !!updateAttr, onOk: async () => {
|
|
await updateAttribute(updateAttr, updateValue);
|
|
setUpdateAttr(undefined);
|
|
setUpdateValue(undefined);
|
|
}, onCancel: () => {
|
|
setUpdateAttr(undefined);
|
|
setUpdateValue(undefined);
|
|
}, okButtonProps: {
|
|
disabled: updateValue === undefined,
|
|
}, children: [updateAttr !== 'gender'
|
|
&& _jsx(Input, { maxLength: updateAttr === 'name' ? 16 : 64, value: updateValue || props.data[updateAttr], onChange: ({ target }) => {
|
|
const { value } = target;
|
|
setUpdateValue(value);
|
|
} }), updateAttr === 'gender'
|
|
&& _jsx(Radio.Group, { options: GenderOptions, value: updateValue || gender, onChange: (e) => {
|
|
const { value } = e.target;
|
|
setUpdateValue(value);
|
|
} })] })] }));
|
|
}
|