-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
AccountConnection.tsx
86 lines (78 loc) · 2.05 KB
/
AccountConnection.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import * as React from 'react';
import {Avatar, buttonFrom, Card, Stack, TextStyle} from '..';
import SettingAction from '../SettingAction';
import {Action} from '../../types';
import * as styles from './AccountConnection.scss';
export interface Props {
/** Content to display as title */
title?: React.ReactNode;
/** Content to display as additional details */
details?: React.ReactNode;
/** Content to display as terms of service */
termsOfService?: React.ReactNode;
/** The name of the service */
accountName?: string;
/** URL for the user’s avatar image */
avatarUrl?: string;
/** Set if the account is connected */
connected?: boolean;
/** Action for account connection */
action?: Action;
}
export default function AccountConnection({
connected = false,
action,
avatarUrl,
accountName = '',
title,
details,
termsOfService,
}: Props) {
const initials = accountName
? accountName
.split(/\s+/)
.map((name) => name[0])
.join('')
: undefined;
const avatarMarkup = connected ? (
<Avatar
accessibilityLabel=""
name={accountName}
initials={initials}
source={avatarUrl}
/>
) : null;
let titleMarkup: React.ReactNode = null;
if (title) {
titleMarkup = <div>{title}</div>;
} else if (accountName) {
titleMarkup = <div>{accountName}</div>;
}
const detailsMarkup = details ? (
<div>
<TextStyle variation="subdued">{details}</TextStyle>
</div>
) : null;
const termsOfServiceMarkup = termsOfService ? (
<div className={styles.TermsOfService}>{termsOfService}</div>
) : null;
const actionElement = action
? buttonFrom(action, {primary: !connected})
: null;
return (
<Card sectioned>
<SettingAction action={actionElement}>
<Stack>
{avatarMarkup}
<Stack.Item fill>
<div className={styles.Content}>
{titleMarkup}
{detailsMarkup}
</div>
</Stack.Item>
</Stack>
</SettingAction>
{termsOfServiceMarkup}
</Card>
);
}