This repository has been archived by the owner on Jul 29, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
/
ContactMessage.tsx
69 lines (65 loc) · 1.97 KB
/
ContactMessage.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
/* Copyright (c) 2017 Juri Torhoff
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import { StyleSheet, css } from "aphrodite/no-important";
import { PhoneNumberUtil, PhoneNumberFormat } from "google-libphonenumber";
import * as React from "react";
import { API } from "../../../tg/Codegen/API/APISchema";
import { Avatar } from "../../misc/Avatar";
export const contactMessage = (contact: API.MessageMediaContact) => {
const title = [contact.firstName.string, contact.lastName.string].join(" ");
let phoneNumber = contact.phoneNumber.string;
if (phoneNumber.startsWith("+")) {
try {
const phoneUtil = PhoneNumberUtil.getInstance();
phoneNumber = phoneUtil.format(
phoneUtil.parse(phoneNumber),
PhoneNumberFormat.INTERNATIONAL);
} catch (e) {
// Ignore errors
}
}
return (
<div className={css(styles.root)}>
<div className={css(styles.avatar)}>
<Avatar id={contact.userId.value} title={title}/>
</div>
<div className={css(styles.info)}>
<span className={css(styles.name)}>
{
title
}
</span>
<span>
{
phoneNumber
}
</span>
</div>
</div>
);
};
const styles = StyleSheet.create({
root: {
height: 48,
width: "100%",
display: "flex",
},
avatar: {
float: "left",
alignSelf: "center",
flexShrink: 0,
},
info: {
height: "100%",
paddingLeft: 12,
display: "flex",
flexDirection: "column",
justifyContent: "center",
},
name: {
fontWeight: 500,
}
});