[英]Where I can change the profile picture in the react-admin header?
I am using social login in react-admin (former admin-on-rest) and I have the user picture from his social media, however I didn't find how to change the user profile image in the top right corner of the screen: 我在react-admin(原为休息时管理)中使用社交登录,并且从他的社交媒体中获得了用户图片,但是在屏幕的右上角找不到如何更改用户个人资料图像:
Is there any prop to be set, like custom login or custom logout button? 是否有任何道具需要设置,例如自定义登录或自定义退出按钮?
Thanks. 谢谢。
Currently, the process involves a lot of code as you'll have to rewrite the UserMenu
completely. 当前,该过程涉及许多代码,因为您必须完全重写UserMenu
。 To use it, you'll also have to implement a custom Layout
with a custom AppBar
. 要使用它,您还必须使用自定义AppBar
实现自定义Layout
。 The process will be simplified when https://github.com/marmelab/react-admin/pull/2391 will be merged. 将https://github.com/marmelab/react-admin/pull/2391合并时,将简化该过程。
// in src/MyUserMenu.js
import React, { Children, cloneElement } from 'react';
import PropTypes from 'prop-types';
import Tooltip from '@material-ui/core/Tooltip';
import IconButton from '@material-ui/core/IconButton';
import Menu from '@material-ui/core/Menu';
import AccountCircle from '@material-ui/icons/AccountCircle';
import { translate } from 'ra-core';
class UserMenu extends React.Component {
static propTypes = {
children: PropTypes.node,
label: PropTypes.string.isRequired,
logout: PropTypes.node,
translate: PropTypes.func.isRequired,
};
static defaultProps = {
label: 'ra.auth.user_menu',
};
state = {
auth: true,
anchorEl: null,
};
handleChange = (event, checked) => {
this.setState({ auth: checked });
};
handleMenu = event => {
this.setState({ anchorEl: event.currentTarget });
};
handleClose = () => {
this.setState({ anchorEl: null });
};
render() {
const { children, label, logout, translate } = this.props;
if (!logout && !children) return null;
const { anchorEl } = this.state;
const open = Boolean(anchorEl);
return (
<div>
<Tooltip title={label && translate(label, { _: label })}>
<IconButton
arial-label={label && translate(label, { _: label })}
aria-owns={open ? 'menu-appbar' : null}
aria-haspopup="true"
onClick={this.handleMenu}
color="inherit"
>
{/* Replace this icon with whatever you want, a user avatar or another icon */}
<AccountCircle />
</IconButton>
</Tooltip>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={open}
onClose={this.handleClose}
>
{Children.map(children, menuItem =>
cloneElement(menuItem, { onClick: this.handleClose })
)}
{logout}
</Menu>
</div>
);
}
}
export default translate(UserMenu);
// in src/MyAppBar.js
import { AppBar } from 'react-admin';
import MyUserMenu from './MyUserMenu';
const MyAppBar = (props) => <AppBar {...props} userMenu={MyUserMenu} />;
// in src/MyLayout.js
import { Layout } from 'react-admin';
import MyAppBar from './MyAppBar';
const MyLayout = (props) => <Layout {...props} appBar={MyAppBar} />;
export default MyLayout;
Documentation: https://marmelab.com/react-admin/Theming.html#using-a-custom-appbar 文档: https : //marmelab.com/react-admin/Theming.html#using-a-custom-appbar
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.