mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-17 17:27:52 +03:00
feat(ProfilePhoto): update size prop to be responsive
This commit is contained in:
parent
513498f4d4
commit
1e924092e2
@ -612,7 +612,7 @@ export default class Profile extends React.Component {
|
|||||||
<div css={STYLES_PROFILE_BACKGROUND}>
|
<div css={STYLES_PROFILE_BACKGROUND}>
|
||||||
<div css={STYLES_PROFILE_INFO}>
|
<div css={STYLES_PROFILE_INFO}>
|
||||||
<div css={STYLES_PROFILE_IMAGE}>
|
<div css={STYLES_PROFILE_IMAGE}>
|
||||||
<ProfilePhoto user={user} size={120} />
|
<ProfilePhoto user={user} size={{ base: 64, mobile: 120 }} />
|
||||||
{showStatusIndicator && this.checkStatus({ id: user.id }) && (
|
{showStatusIndicator && this.checkStatus({ id: user.id }) && (
|
||||||
<div css={STYLES_STATUS_INDICATOR} />
|
<div css={STYLES_STATUS_INDICATOR} />
|
||||||
)}
|
)}
|
||||||
|
@ -1,7 +1,10 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import * as Constants from "~/common/constants";
|
import * as Constants from "~/common/constants";
|
||||||
|
import * as Utilities from "~/common/utilities";
|
||||||
|
|
||||||
import { css } from "@emotion/react";
|
import { css } from "@emotion/react";
|
||||||
|
import { useMemoCompare } from "~/common/hooks";
|
||||||
|
import isEqual from "lodash/isEqual";
|
||||||
|
|
||||||
import Dismissible from "~/components/core/Dismissible";
|
import Dismissible from "~/components/core/Dismissible";
|
||||||
|
|
||||||
@ -26,56 +29,59 @@ const STYLES_AVATAR_ONLINE = css`
|
|||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
function BoringAvatar(props) {
|
function BoringAvatar({ avatarCss, ...props }) {
|
||||||
let colors = ['A9B9C1', '5B6B74', '3C444A', 'D4DBDF', '293137'];
|
let colors = ["A9B9C1", "5B6B74", "3C444A", "D4DBDF", "293137"];
|
||||||
let avatarUrl = `https://source.boringavatars.com/marble/${props.size}/${props.userId}?square&colors=${colors}`;
|
let avatarUrl = `https://source.boringavatars.com/marble/${props.size}/${props.userId}?square&colors=${colors}`;
|
||||||
return (
|
return (
|
||||||
<Dismissible
|
<Dismissible captureResize={false} captureScroll={true}>
|
||||||
captureResize={false}
|
<img
|
||||||
captureScroll={true}
|
src={avatarUrl}
|
||||||
>
|
css={[avatarCss, STYLES_AVATAR]}
|
||||||
<img
|
|
||||||
src={avatarUrl}
|
|
||||||
css={STYLES_AVATAR}
|
|
||||||
style={{
|
style={{
|
||||||
width: `${props.size}px`,
|
|
||||||
height: `${props.size}px`,
|
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
}}
|
}}
|
||||||
|
alt="profile preview"
|
||||||
/>
|
/>
|
||||||
</Dismissible>
|
</Dismissible>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function UploadedAvatar(props) {
|
function UploadedAvatar({ avatarCss, ...props }) {
|
||||||
return (
|
return (
|
||||||
<Dismissible
|
<Dismissible
|
||||||
css={STYLES_AVATAR}
|
css={[avatarCss, STYLES_AVATAR]}
|
||||||
captureResize={false}
|
captureResize={false}
|
||||||
captureScroll={true}
|
captureScroll={true}
|
||||||
style={{
|
style={{
|
||||||
...props.style,
|
...props.style,
|
||||||
width: `${props.size}px`,
|
backgroundImage: `url('${props.url}')`,
|
||||||
height: `${props.size}px`,
|
cursor: "pointer",
|
||||||
backgroundImage: `url('${props.url}')`,
|
}}
|
||||||
cursor: "pointer",
|
>
|
||||||
}}
|
{props.visible ? props.popover : null}
|
||||||
>
|
{props.online ? <span css={STYLES_AVATAR_ONLINE} /> : null}
|
||||||
{props.visible ? props.popover : null}
|
</Dismissible>
|
||||||
{props.online ? <span css={STYLES_AVATAR_ONLINE} /> : null}
|
);
|
||||||
</Dismissible>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class ProfilePhoto extends React.Component {
|
export default function ProfilePhoto({ size, ...props }) {
|
||||||
render() {
|
// NOTE(amine): will calculate only when the size prop changes
|
||||||
return (
|
const memoizedSizeProp = useMemoCompare(size, isEqual);
|
||||||
<>
|
const STYLES_SIZE = React.useMemo(() => {
|
||||||
{this.props.user.data.photo
|
const responsiveStyles = Utilities.mapResponsiveProp(size, (size) => ({
|
||||||
? <UploadedAvatar url={this.props.user.data.photo} size={this.props.size} />
|
width: size,
|
||||||
: <BoringAvatar userId={this.props.user.id} size={this.props.size} />
|
height: size,
|
||||||
}
|
}));
|
||||||
</>
|
return css(responsiveStyles);
|
||||||
);
|
}, [memoizedSizeProp]);
|
||||||
}
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{props.user.data.photo ? (
|
||||||
|
<UploadedAvatar url={props.user.data.photo} avatarCss={STYLES_SIZE} />
|
||||||
|
) : (
|
||||||
|
<BoringAvatar userId={props.user.id} avatarCss={STYLES_SIZE} />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user