A component that displays user details.
A component that displays user details.
<div id="demo"></div>
import React, {Component} from 'react';
import {render} from 'react-dom';
import {UserCard, UserCardTooltip} from '@jetbrains/ring-ui/components/user-card/user-card';
import hubConfig from '@ring-ui/docs/components/hub-config';
const user = {
login: 'testuser',
name: 'Test User',
email: 'testuser@mail.com',
avatarUrl: `${hubConfig.serverUri}/api/rest/avatar/default?username=Jet%20Brains`,
href: `${hubConfig.serverUri}/users/0`
};
class UserCardDemo extends Component {
render() {
return (
<div>
<div>Inline user card:</div>
<UserCard user={user} data-test="user-card-inline"/>
<UserCardTooltip user={user}>
<span>Hover this text see card in tooltip mode</span>
</UserCardTooltip>
</div>
);
}
}
render(<UserCardDemo />, document.getElementById('demo'));
<div id="demo"></div>
import React, {Component} from 'react';
import {render} from 'react-dom';
import {SmartUserCardTooltip} from '@jetbrains/ring-ui/components/user-card/user-card';
const user = {
login: 'testuser',
name: 'Test User',
email: 'testuser@mail.com',
avatarUrl: `${hubConfig.serverUri}/api/rest/avatar/default?username=Jet%20Brains`,
href: `${hubConfig.serverUri}/users/0`,
banned: true,
online: false,
banReason: 'Bad guy: is accused of stealing potatoes'
};
async function loadUser() {
return new Promise(resolve => setTimeout(resolve, 10000)).
then(() => user);
}
class UserCardDemo extends Component {
render() {
return (
<div>
<SmartUserCardTooltip userDataSource={loadUser}>
<span>Hover this text load user information</span>
</SmartUserCardTooltip>
</div>
);
}
}
render(<UserCardDemo />, document.getElementById('demo'));
<div id="demo"></div>
import React, {Component} from 'react';
import {render} from 'react-dom';
import {SmartUserCardTooltip} from '@jetbrains/ring-ui/components/user-card/user-card';
import {createHubUserCardSource} from '@jetbrains/ring-ui/components/hub-source/hub-source__user.js';
import Auth from '@jetbrains/ring-ui/components/auth/auth';
import hubConfig from '@ring-ui/docs/components/hub-config';
(async function () {
const auth = new Auth(hubConfig);
await auth.init();
const userSource = createHubUserCardSource(auth, auth.user.id);
class UserCardDemo extends Component {
render() {
return (
<div>
<SmartUserCardTooltip userDataSource={userSource}>
<span>Hover this text load user information</span>
</SmartUserCardTooltip>
</div>
);
}
}
render(<UserCardDemo />, document.getElementById('demo'));
})();