@fluentui-react-native/experimental-avatar 0.14.25 → 0.14.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +52 -1
- package/CHANGELOG.md +27 -2
- package/jest.config.js +2 -0
- package/lib/JSAvatar.d.ts.map +1 -1
- package/lib/JSAvatar.js +3 -1
- package/lib/JSAvatar.js.map +1 -1
- package/lib/JSAvatar.styling.d.ts.map +1 -1
- package/lib/JSAvatar.styling.js +20 -13
- package/lib/JSAvatar.styling.js.map +1 -1
- package/lib/JSAvatar.types.d.ts +5 -6
- package/lib/JSAvatar.types.d.ts.map +1 -1
- package/lib/JSAvatarTokens.d.ts.map +1 -1
- package/lib/JSAvatarTokens.js +109 -105
- package/lib/JSAvatarTokens.js.map +1 -1
- package/lib/JSAvatarTokens.win32.d.ts +5 -0
- package/lib/JSAvatarTokens.win32.d.ts.map +1 -0
- package/lib/JSAvatarTokens.win32.js +210 -0
- package/lib/JSAvatarTokens.win32.js.map +1 -0
- package/lib/titles.d.ts +2 -0
- package/lib/titles.d.ts.map +1 -0
- package/lib/titles.js +109 -0
- package/lib/titles.js.map +1 -0
- package/lib/useAvatar.d.ts +25 -0
- package/lib/useAvatar.d.ts.map +1 -1
- package/lib/useAvatar.js +47 -2
- package/lib/useAvatar.js.map +1 -1
- package/lib/utils/getInitials.d.ts +15 -0
- package/lib/utils/getInitials.d.ts.map +1 -0
- package/lib/utils/getInitials.js +78 -0
- package/lib/utils/getInitials.js.map +1 -0
- package/lib/utils/getInitials.test.d.ts +2 -0
- package/lib/utils/getInitials.test.d.ts.map +1 -0
- package/lib/utils/getInitials.test.js +116 -0
- package/lib/utils/getInitials.test.js.map +1 -0
- package/lib/utils/index.d.ts +2 -0
- package/lib/utils/index.d.ts.map +1 -0
- package/lib/utils/index.js +2 -0
- package/lib/utils/index.js.map +1 -0
- package/lib-commonjs/JSAvatar.d.ts.map +1 -1
- package/lib-commonjs/JSAvatar.js +3 -1
- package/lib-commonjs/JSAvatar.js.map +1 -1
- package/lib-commonjs/JSAvatar.styling.d.ts.map +1 -1
- package/lib-commonjs/JSAvatar.styling.js +19 -12
- package/lib-commonjs/JSAvatar.styling.js.map +1 -1
- package/lib-commonjs/JSAvatar.types.d.ts +5 -6
- package/lib-commonjs/JSAvatar.types.d.ts.map +1 -1
- package/lib-commonjs/JSAvatarTokens.d.ts.map +1 -1
- package/lib-commonjs/JSAvatarTokens.js +109 -105
- package/lib-commonjs/JSAvatarTokens.js.map +1 -1
- package/lib-commonjs/JSAvatarTokens.win32.d.ts +5 -0
- package/lib-commonjs/JSAvatarTokens.win32.d.ts.map +1 -0
- package/lib-commonjs/JSAvatarTokens.win32.js +214 -0
- package/lib-commonjs/JSAvatarTokens.win32.js.map +1 -0
- package/lib-commonjs/titles.d.ts +2 -0
- package/lib-commonjs/titles.d.ts.map +1 -0
- package/lib-commonjs/titles.js +112 -0
- package/lib-commonjs/titles.js.map +1 -0
- package/lib-commonjs/useAvatar.d.ts +25 -0
- package/lib-commonjs/useAvatar.d.ts.map +1 -1
- package/lib-commonjs/useAvatar.js +51 -3
- package/lib-commonjs/useAvatar.js.map +1 -1
- package/lib-commonjs/utils/getInitials.d.ts +15 -0
- package/lib-commonjs/utils/getInitials.d.ts.map +1 -0
- package/lib-commonjs/utils/getInitials.js +82 -0
- package/lib-commonjs/utils/getInitials.js.map +1 -0
- package/lib-commonjs/utils/getInitials.test.d.ts +2 -0
- package/lib-commonjs/utils/getInitials.test.d.ts.map +1 -0
- package/lib-commonjs/utils/getInitials.test.js +118 -0
- package/lib-commonjs/utils/getInitials.test.js.map +1 -0
- package/lib-commonjs/utils/index.d.ts +2 -0
- package/lib-commonjs/utils/index.d.ts.map +1 -0
- package/lib-commonjs/utils/index.js +6 -0
- package/lib-commonjs/utils/index.js.map +1 -0
- package/package.json +5 -4
- package/src/.eslintrc.js +3 -0
- package/src/JSAvatar.styling.ts +25 -10
- package/src/JSAvatar.tsx +12 -1
- package/src/JSAvatar.types.ts +5 -6
- package/src/JSAvatarTokens.ts +110 -105
- package/src/JSAvatarTokens.win32.ts +213 -0
- package/src/__tests__/JSAvatar.test.jsx +156 -0
- package/src/__tests__/__snapshots__/JSAvatar.test.jsx.snap +92 -0
- package/src/titles.ts +108 -0
- package/src/useAvatar.ts +51 -1
- package/src/utils/getInitials.test.ts +154 -0
- package/src/utils/getInitials.ts +92 -0
- package/src/utils/index.ts +1 -0
- package/tsconfig.json +2 -1
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { JSAvatar } from '..';
|
|
3
|
+
import { getInitials, validateAlphabeticalCharacters, removeTitlesFromName } from '../useAvatar';
|
|
4
|
+
import * as renderer from 'react-test-renderer';
|
|
5
|
+
|
|
6
|
+
const alphabeticalTestNames = [
|
|
7
|
+
'Marie',
|
|
8
|
+
'Aadi KaPoor',
|
|
9
|
+
'Marie Beaudouin',
|
|
10
|
+
'Aadi Meni KaPoor',
|
|
11
|
+
'Aadi Meni Ka Jr',
|
|
12
|
+
'Will Little (Teams)',
|
|
13
|
+
'Will Little-Tanaka',
|
|
14
|
+
'-Aadi Kapoor',
|
|
15
|
+
'Richard 23 Feynman',
|
|
16
|
+
'* Richard *',
|
|
17
|
+
'Richard Feynman [Teams]',
|
|
18
|
+
'Richard Feynman {Teams}',
|
|
19
|
+
];
|
|
20
|
+
const alphabeticalInitials = ['M', 'AK', 'MB', 'AK', 'AK', 'WL', 'WL', 'AK', 'RF', 'R', 'RF', 'RF'];
|
|
21
|
+
const otherTestNames = ['(206) 123-4567', '耿盈盈']; // will return this case after bug bash - '耿 James'
|
|
22
|
+
const namesWithTitles = ['Mr Feynman', 'Dr Richard Feynman'];
|
|
23
|
+
const initialsForNameWithTitles = ['F', 'RF'];
|
|
24
|
+
|
|
25
|
+
it('renders Avatar', () => {
|
|
26
|
+
const tree = renderer.create(<JSAvatar />).toJSON();
|
|
27
|
+
expect(tree).toMatchSnapshot();
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
describe('validateAlphabeticalCharacters method', () => {
|
|
31
|
+
it('validates alphabetical characters', () => {
|
|
32
|
+
for (let i = 0; i < alphabeticalTestNames.length; i++) {
|
|
33
|
+
expect(validateAlphabeticalCharacters(alphabeticalTestNames[i])).toBeTruthy();
|
|
34
|
+
}
|
|
35
|
+
for (let i = 0; i < otherTestNames.length; i++) {
|
|
36
|
+
expect(validateAlphabeticalCharacters(otherTestNames[i])).toBeFalsy();
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
it("doesn't validate undefined name", () => {
|
|
41
|
+
expect(validateAlphabeticalCharacters(undefined)).toBeFalsy();
|
|
42
|
+
});
|
|
43
|
+
it("doesn't validate an empty string", () => {
|
|
44
|
+
expect(validateAlphabeticalCharacters('')).toBeFalsy();
|
|
45
|
+
});
|
|
46
|
+
it("doesn't validate null name", () => {
|
|
47
|
+
expect(validateAlphabeticalCharacters(null)).toBeFalsy();
|
|
48
|
+
});
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
describe('removeTitlesFromName method', () => {
|
|
52
|
+
it('removes titles from the name', () => {
|
|
53
|
+
const words = ['Mr', 'Faynman'];
|
|
54
|
+
expect(removeTitlesFromName(words)).toStrictEqual(['Faynman']);
|
|
55
|
+
});
|
|
56
|
+
// it('removes multiword titles from the name', () => {
|
|
57
|
+
// const name = 'Consul General Richard Faynman';
|
|
58
|
+
// expect(removeTitlesFromName(name)).toStrictEqual(['Richard Faynman']);
|
|
59
|
+
// });
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
describe('getInitials method', () => {
|
|
63
|
+
it('returns correct initials', () => {
|
|
64
|
+
const test = getInitials('-Test str with *spaces');
|
|
65
|
+
expect(test).toBe('TS');
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
it('returns an empty string if name is undefined', () => {
|
|
69
|
+
expect(getInitials(undefined)).toBe('');
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
it('return initials for alphabetical words', () => {
|
|
73
|
+
for (let i = 0; i < alphabeticalTestNames.length; i++) {
|
|
74
|
+
expect(getInitials(alphabeticalTestNames[i])).toBe(alphabeticalInitials[i]);
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
it('return initials for words with titles', () => {
|
|
79
|
+
for (let i = 0; i < namesWithTitles.length; i++) {
|
|
80
|
+
expect(getInitials(namesWithTitles[i])).toBe(initialsForNameWithTitles[i]);
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
it("returns initials when there's a coma", () => {
|
|
85
|
+
expect(getInitials('Second, First')).toEqual('SF');
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
// Unit tests from Web
|
|
89
|
+
it('handles null inputs', () => {
|
|
90
|
+
expect(getInitials(null)).toEqual('');
|
|
91
|
+
expect(getInitials(undefined)).toEqual('');
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
// it('calculates an expected initials in LTR for non-ASCII characters', () => {
|
|
95
|
+
// expect(getInitials('Írissa Þórðardóttir')).toEqual('ÍÞ');
|
|
96
|
+
// expect(getInitials('Øyvind Åsen')).toEqual('ØÅ');
|
|
97
|
+
// });
|
|
98
|
+
|
|
99
|
+
it('calculates an expected initials in LTR with a hypen', () => {
|
|
100
|
+
expect(getInitials('David Zearing-Goff')).toEqual('DZ');
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
// it('calculates an expected initials in LTR with numbers', () => {
|
|
104
|
+
// expect(getInitials('4lex 5loo')).toEqual('45');
|
|
105
|
+
// });
|
|
106
|
+
it('calculates an expected initials in LTR with multiple parentheses, extra spaces, and unwanted characters', () => {
|
|
107
|
+
const result = getInitials(' !@#$%^&*()=+ (Alpha) David (The man) `~<>,./?[]{}| Goff (Gamma) ');
|
|
108
|
+
expect(result).toEqual('DG');
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
it('calculates an expected initials in LTR with multiple types of unwanted text', () => {
|
|
112
|
+
const result = getInitials(' !@#$%^&*()=+ (Alpha) David (The man) `~<>,./?[]{}| Goff (Gamma) [Beta] ');
|
|
113
|
+
expect(result).toEqual('DG');
|
|
114
|
+
});
|
|
115
|
+
|
|
116
|
+
it('calculates an expected initials for Arabic names', () => {
|
|
117
|
+
expect(getInitials('خسرو رحیمی')).toEqual('');
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
it('calculates an expected initials for Chinese names', () => {
|
|
121
|
+
expect(getInitials('桂英')).toEqual('');
|
|
122
|
+
expect(getInitials('佳')).toEqual('');
|
|
123
|
+
expect(getInitials('宋智洋')).toEqual('');
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
it('calculates an expected initials for Korean names', () => {
|
|
127
|
+
expect(getInitials('강현')).toEqual('');
|
|
128
|
+
expect(getInitials('최종래')).toEqual('');
|
|
129
|
+
expect(getInitials('남궁 성종')).toEqual('');
|
|
130
|
+
});
|
|
131
|
+
|
|
132
|
+
it('calculates an expected initials for Japanese names', () => {
|
|
133
|
+
expect(getInitials('松田')).toEqual('');
|
|
134
|
+
expect(getInitials('海野')).toEqual('');
|
|
135
|
+
expect(getInitials('かり')).toEqual('');
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
// it('validates phone numbers', () => {
|
|
139
|
+
// expect(getInitials('12345678')).toEqual('');
|
|
140
|
+
// expect(getInitials('+1 (555) 123-4567 ext.4567')).toEqual('');
|
|
141
|
+
// expect(getInitials('+47 12 34 56 78 (X 5678)')).toEqual('4');
|
|
142
|
+
// expect(getInitials('47 12 34')).toEqual('');
|
|
143
|
+
// expect(getInitials('47 12')).toEqual('');
|
|
144
|
+
// expect(getInitials('1 Ext 2')).toEqual('');
|
|
145
|
+
// result = getInitials('James Ext 2');
|
|
146
|
+
// expect(result).toEqual('JE');
|
|
147
|
+
// result = getInitials('1x1');
|
|
148
|
+
// expect(result).toEqual('');
|
|
149
|
+
// result = getInitials('1y1');
|
|
150
|
+
// expect(result).toEqual('');
|
|
151
|
+
// result = getInitials('1');
|
|
152
|
+
// expect(result).toEqual('');
|
|
153
|
+
// result = getInitials('A 2');
|
|
154
|
+
// expect(result).toEqual('A');
|
|
155
|
+
// });
|
|
156
|
+
});
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`renders Avatar 1`] = `
|
|
4
|
+
<View
|
|
5
|
+
shape="circular"
|
|
6
|
+
style={
|
|
7
|
+
Object {
|
|
8
|
+
"alignItems": "flex-end",
|
|
9
|
+
"flexDirection": "row",
|
|
10
|
+
"height": 24,
|
|
11
|
+
"horizontalIconAlignment": "end",
|
|
12
|
+
"justifyContent": "flex-end",
|
|
13
|
+
"opacity": 1,
|
|
14
|
+
"verticalIconAlignment": "end",
|
|
15
|
+
"width": 24,
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
>
|
|
19
|
+
<View
|
|
20
|
+
style={
|
|
21
|
+
Object {
|
|
22
|
+
"alignItems": "center",
|
|
23
|
+
"alignSelf": "stretch",
|
|
24
|
+
"backgroundColor": "#4f6bed",
|
|
25
|
+
"borderColor": "#ffffff",
|
|
26
|
+
"borderRadius": 9999,
|
|
27
|
+
"borderWidth": 0,
|
|
28
|
+
"flexGrow": 1,
|
|
29
|
+
"height": 24,
|
|
30
|
+
"justifyContent": "center",
|
|
31
|
+
"width": 24,
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
>
|
|
35
|
+
<RNSVGSvgView
|
|
36
|
+
align="xMidYMid"
|
|
37
|
+
bbHeight={16}
|
|
38
|
+
bbWidth={14}
|
|
39
|
+
fill="none"
|
|
40
|
+
focusable={false}
|
|
41
|
+
height={16}
|
|
42
|
+
meetOrSlice={0}
|
|
43
|
+
minX={0}
|
|
44
|
+
minY={0}
|
|
45
|
+
style={
|
|
46
|
+
Array [
|
|
47
|
+
Object {
|
|
48
|
+
"backgroundColor": "transparent",
|
|
49
|
+
"borderWidth": 0,
|
|
50
|
+
},
|
|
51
|
+
Object {
|
|
52
|
+
"flex": 0,
|
|
53
|
+
"height": 16,
|
|
54
|
+
"width": 14,
|
|
55
|
+
},
|
|
56
|
+
]
|
|
57
|
+
}
|
|
58
|
+
vbHeight={16}
|
|
59
|
+
vbWidth={14}
|
|
60
|
+
width={14}
|
|
61
|
+
xml="<svg width=\\"14\\" height=\\"16\\" viewBox=\\"0 0 14 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\">
|
|
62
|
+
<path d=\\"M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z\\" fill=\\"currentColor\\"/>
|
|
63
|
+
</svg>
|
|
64
|
+
"
|
|
65
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
66
|
+
>
|
|
67
|
+
<RNSVGGroup
|
|
68
|
+
fill={null}
|
|
69
|
+
propList={
|
|
70
|
+
Array [
|
|
71
|
+
"fill",
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
>
|
|
75
|
+
<RNSVGPath
|
|
76
|
+
d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z"
|
|
77
|
+
fill={
|
|
78
|
+
Array [
|
|
79
|
+
2,
|
|
80
|
+
]
|
|
81
|
+
}
|
|
82
|
+
propList={
|
|
83
|
+
Array [
|
|
84
|
+
"fill",
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
/>
|
|
88
|
+
</RNSVGGroup>
|
|
89
|
+
</RNSVGSvgView>
|
|
90
|
+
</View>
|
|
91
|
+
</View>
|
|
92
|
+
`;
|
package/src/titles.ts
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
export const titles = new Set<string>([
|
|
2
|
+
'Mr',
|
|
3
|
+
'Mrs',
|
|
4
|
+
'Miss',
|
|
5
|
+
'Ms',
|
|
6
|
+
'Dr',
|
|
7
|
+
'Admiral',
|
|
8
|
+
'Air Comm',
|
|
9
|
+
'Ambassador',
|
|
10
|
+
'Baron',
|
|
11
|
+
'Baroness',
|
|
12
|
+
'Brig & Mrs',
|
|
13
|
+
'Brig Gen',
|
|
14
|
+
'Brigadier',
|
|
15
|
+
'Brother',
|
|
16
|
+
'Canon',
|
|
17
|
+
'Capt',
|
|
18
|
+
'Chief',
|
|
19
|
+
'Cllr',
|
|
20
|
+
'Col',
|
|
21
|
+
'Commander',
|
|
22
|
+
'Commander & Mrs',
|
|
23
|
+
'Consul',
|
|
24
|
+
'Consul General',
|
|
25
|
+
'Count',
|
|
26
|
+
'Countess',
|
|
27
|
+
'Countess of',
|
|
28
|
+
'Cpl',
|
|
29
|
+
'Dame',
|
|
30
|
+
'Deputy',
|
|
31
|
+
'Dr & Mrs',
|
|
32
|
+
'Drs',
|
|
33
|
+
'Duchess',
|
|
34
|
+
'Duke',
|
|
35
|
+
'Earl',
|
|
36
|
+
'Father',
|
|
37
|
+
'General',
|
|
38
|
+
'Gräfin',
|
|
39
|
+
'HE',
|
|
40
|
+
'HMA',
|
|
41
|
+
'Her Grace',
|
|
42
|
+
'His Excellency',
|
|
43
|
+
'Jr',
|
|
44
|
+
'Judge',
|
|
45
|
+
'Justice',
|
|
46
|
+
'Lady',
|
|
47
|
+
'Lic',
|
|
48
|
+
'Llc',
|
|
49
|
+
'Lord',
|
|
50
|
+
'Lord & Lady',
|
|
51
|
+
'Lt',
|
|
52
|
+
'Lt Col',
|
|
53
|
+
'Lt Cpl',
|
|
54
|
+
'M',
|
|
55
|
+
'Madam',
|
|
56
|
+
'Madame',
|
|
57
|
+
'Major',
|
|
58
|
+
'Major General',
|
|
59
|
+
'Marchioness',
|
|
60
|
+
'Marquis',
|
|
61
|
+
'Minister',
|
|
62
|
+
'Mme',
|
|
63
|
+
'Mr & Dr',
|
|
64
|
+
'Mr & Mrs',
|
|
65
|
+
'Mr & Ms',
|
|
66
|
+
'Prince',
|
|
67
|
+
'Princess',
|
|
68
|
+
'Professor',
|
|
69
|
+
'Prof',
|
|
70
|
+
'Prof & Dr',
|
|
71
|
+
'Prof & Mrs',
|
|
72
|
+
'Prof & Rev',
|
|
73
|
+
'Prof Dame',
|
|
74
|
+
'Prof Dr',
|
|
75
|
+
'Pvt',
|
|
76
|
+
'Rabbi',
|
|
77
|
+
'Rear Admiral',
|
|
78
|
+
'Rev',
|
|
79
|
+
'Rev & Mrs',
|
|
80
|
+
'Rev Canon',
|
|
81
|
+
'Rev Dr',
|
|
82
|
+
'Senator',
|
|
83
|
+
'Sgt',
|
|
84
|
+
'Sheriff',
|
|
85
|
+
'Sir',
|
|
86
|
+
'Sir & Lady',
|
|
87
|
+
'Sister',
|
|
88
|
+
'Sr',
|
|
89
|
+
'Sqr. Leader',
|
|
90
|
+
'The Earl of',
|
|
91
|
+
'The Hon',
|
|
92
|
+
'The Hon Dr',
|
|
93
|
+
'The Hon Lady',
|
|
94
|
+
'The Hon Lord',
|
|
95
|
+
'The Hon Mrs',
|
|
96
|
+
'The Hon Sir',
|
|
97
|
+
'The Honourable',
|
|
98
|
+
'The Rt Hon',
|
|
99
|
+
'The Rt Hon Dr',
|
|
100
|
+
'The Rt Hon Lord',
|
|
101
|
+
'The Rt Hon Sir',
|
|
102
|
+
'The Rt Hon Visc',
|
|
103
|
+
'Viscount',
|
|
104
|
+
'van',
|
|
105
|
+
'I',
|
|
106
|
+
'II',
|
|
107
|
+
'III',
|
|
108
|
+
]);
|
package/src/useAvatar.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { JSAvatarProps, AvatarInfo, JSAvatarState } from './JSAvatar.types';
|
|
2
2
|
import { ImageProps, ImageSourcePropType } from 'react-native';
|
|
3
3
|
import { PresenceBadgeProps } from '@fluentui-react-native/badge';
|
|
4
|
+
import { titles } from './titles';
|
|
4
5
|
/**
|
|
5
6
|
* Re-usable hook for FURN Avatar.
|
|
6
7
|
* This hook configures Avatar props and state for FURN Avatar.
|
|
@@ -9,7 +10,7 @@ import { PresenceBadgeProps } from '@fluentui-react-native/badge';
|
|
|
9
10
|
* @returns configured props and state for FURN Avatar
|
|
10
11
|
*/
|
|
11
12
|
export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
|
|
12
|
-
const { active, accessibilityLabel, activeAppearance, badge,
|
|
13
|
+
const { active, accessibilityLabel, activeAppearance, badge, initials, name, src, ring, shape, ...rest } = props;
|
|
13
14
|
|
|
14
15
|
const showRing = active === 'active' && activeAppearance === 'ring';
|
|
15
16
|
const transparentRing = !!ring?.transparent;
|
|
@@ -31,6 +32,8 @@ export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
|
|
|
31
32
|
showBadge,
|
|
32
33
|
};
|
|
33
34
|
|
|
35
|
+
const _initials = initials || getInitials(name);
|
|
36
|
+
|
|
34
37
|
return {
|
|
35
38
|
props: {
|
|
36
39
|
shape: shape || 'circular',
|
|
@@ -39,9 +42,56 @@ export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
|
|
|
39
42
|
activeAppearance,
|
|
40
43
|
image: imageProps,
|
|
41
44
|
badge: badgeProps,
|
|
45
|
+
initials: _initials,
|
|
42
46
|
},
|
|
43
47
|
state: {
|
|
44
48
|
...state,
|
|
45
49
|
},
|
|
46
50
|
};
|
|
47
51
|
};
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* A function which takes a name and returns initials
|
|
55
|
+
*
|
|
56
|
+
* @param name
|
|
57
|
+
* @returns initials. First letter of the word if only one word was provided.
|
|
58
|
+
* First letters of the first and last words if more words were provided.
|
|
59
|
+
* Words in braces, titles, special characters, parantheses and dashes should be ignored.
|
|
60
|
+
*/
|
|
61
|
+
export const getInitials = (name: string): string => {
|
|
62
|
+
if (!name && !validateAlphabeticalCharacters(name)) {
|
|
63
|
+
return '';
|
|
64
|
+
}
|
|
65
|
+
// prettier-ignore
|
|
66
|
+
const nonWordRegExp = new RegExp('\\W+(?<!\\S-)', 'g');
|
|
67
|
+
const wordsInBracesRegExp = new RegExp('(\\(|\\[|\\{)\\w+(\\)|\\]|\\})', 'g');
|
|
68
|
+
let words = name.replace(wordsInBracesRegExp, ' ').replace(nonWordRegExp, ' ').trim().split(' ');
|
|
69
|
+
words = removeTitlesFromName(words);
|
|
70
|
+
const wordsLength = words.length;
|
|
71
|
+
const lastWordIdx = wordsLength - 1;
|
|
72
|
+
const initials = `${words[0].charAt(0).toUpperCase()}${wordsLength > 1 ? words[lastWordIdx].charAt(0).toUpperCase() : ''}`;
|
|
73
|
+
return initials;
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* A function which verifies whether a name contains non-alphabetical characters
|
|
78
|
+
*
|
|
79
|
+
* @param name
|
|
80
|
+
* @returns true if the name contains alphabetical characters. Returns false if there are
|
|
81
|
+
* numeric values or the first character is non-alphabetical. In this case avatar should
|
|
82
|
+
* fall back to icon.
|
|
83
|
+
*/
|
|
84
|
+
export const validateAlphabeticalCharacters = (name: string): boolean => {
|
|
85
|
+
const alphabeticalRegExp = new RegExp('[a-zA-Z]', 'g');
|
|
86
|
+
return name ? alphabeticalRegExp.test(name) : false;
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* A function which verifies whether words array contains title
|
|
91
|
+
*
|
|
92
|
+
* @param words array of words in name
|
|
93
|
+
* @returns array of words without titles
|
|
94
|
+
*/
|
|
95
|
+
export const removeTitlesFromName = (words: string[]): string[] => {
|
|
96
|
+
return words.filter((word) => !titles.has(word));
|
|
97
|
+
};
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import { getInitials } from './getInitials';
|
|
2
|
+
|
|
3
|
+
describe('getInitials', () => {
|
|
4
|
+
it('handles null inputs', () => {
|
|
5
|
+
let result = getInitials(null, false);
|
|
6
|
+
expect(result).toEqual('');
|
|
7
|
+
|
|
8
|
+
result = getInitials(undefined, false);
|
|
9
|
+
expect(result).toEqual('');
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
it('calculates an expected initials in LTR', () => {
|
|
13
|
+
const result = getInitials('Kat Larrson', false);
|
|
14
|
+
expect(result).toEqual('KL');
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
it('calculates an expected initials in LTR for non-ASCII characters', () => {
|
|
18
|
+
let result = getInitials('Írissa Þórðardóttir', false);
|
|
19
|
+
expect(result).toEqual('ÍÞ');
|
|
20
|
+
|
|
21
|
+
result = getInitials('Øyvind Åsen', false);
|
|
22
|
+
expect(result).toEqual('ØÅ');
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
it('calculates an expected initials in LTR with a hypen', () => {
|
|
26
|
+
const result = getInitials('David Zearing-Goff', false);
|
|
27
|
+
expect(result).toEqual('DZ');
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
it('calculates an expected initials in LTR with numbers', () => {
|
|
31
|
+
const result = getInitials('4lex 5loo', false);
|
|
32
|
+
expect(result).toEqual('45');
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
it('calculates an expected initials in LTR with parentheses', () => {
|
|
36
|
+
const result = getInitials('David (The man) Goff', false);
|
|
37
|
+
expect(result).toEqual('DG');
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
it('calculates an expected initials in LTR with brackets', () => {
|
|
41
|
+
const result = getInitials('David Goff [The man]', false);
|
|
42
|
+
expect(result).toEqual('DG');
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
it('calculates an expected initials in LTR with curly braces', () => {
|
|
46
|
+
const result = getInitials('David {The man} Goff', false);
|
|
47
|
+
expect(result).toEqual('DG');
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
it('calculates an expected initials in LTR with multiple parentheses, extra spaces, and unwanted characters', () => {
|
|
51
|
+
const result = getInitials(' !@#$%^&*()=+ (Alpha) David (The man) `~<>,./?[]{}| Goff (Gamma) ', false);
|
|
52
|
+
expect(result).toEqual('DG');
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
it('calculates an expected initials in LTR with multiple types of unwanted text', () => {
|
|
56
|
+
const result = getInitials(' !@#$%^&*()=+ (Alpha) David (The man) `~<>,./?[]{}| Goff (Gamma) [Beta] ', false);
|
|
57
|
+
expect(result).toEqual('DG');
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
it('calculates an expected initials in RTL if one was not specified', () => {
|
|
61
|
+
const result = getInitials('Kat Larrson', true);
|
|
62
|
+
expect(result).toEqual('LK');
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
it('calculates an expected initials in LTR for names with multiple components', () => {
|
|
66
|
+
let result = getInitials('A', false);
|
|
67
|
+
expect(result).toEqual('A');
|
|
68
|
+
|
|
69
|
+
result = getInitials('A B', false);
|
|
70
|
+
expect(result).toEqual('AB');
|
|
71
|
+
|
|
72
|
+
result = getInitials('A B C', false);
|
|
73
|
+
expect(result).toEqual('AC');
|
|
74
|
+
|
|
75
|
+
result = getInitials('A B C D', false);
|
|
76
|
+
expect(result).toEqual('A');
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
it('calculates an expected initials for Arabic names', () => {
|
|
80
|
+
const result = getInitials('خسرو رحیمی', true);
|
|
81
|
+
expect(result).toEqual('');
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
it('calculates an expected initials for Chinese names', () => {
|
|
85
|
+
let result = getInitials('桂英', false);
|
|
86
|
+
expect(result).toEqual('');
|
|
87
|
+
|
|
88
|
+
result = getInitials('佳', false);
|
|
89
|
+
expect(result).toEqual('');
|
|
90
|
+
|
|
91
|
+
result = getInitials('宋智洋', false);
|
|
92
|
+
expect(result).toEqual('');
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
it('calculates an expected initials for Korean names', () => {
|
|
96
|
+
let result = getInitials('강현', false);
|
|
97
|
+
expect(result).toEqual('');
|
|
98
|
+
|
|
99
|
+
result = getInitials('최종래', false);
|
|
100
|
+
expect(result).toEqual('');
|
|
101
|
+
|
|
102
|
+
result = getInitials('남궁 성종', false);
|
|
103
|
+
expect(result).toEqual('');
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
it('calculates an expected initials for Japanese names', () => {
|
|
107
|
+
let result = getInitials('松田', false);
|
|
108
|
+
expect(result).toEqual('');
|
|
109
|
+
|
|
110
|
+
result = getInitials('海野', false);
|
|
111
|
+
expect(result).toEqual('');
|
|
112
|
+
|
|
113
|
+
result = getInitials('かり', false);
|
|
114
|
+
expect(result).toEqual('');
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
it('calculates expected initials for phone numbers', () => {
|
|
118
|
+
let result = getInitials('12345678', false);
|
|
119
|
+
expect(result).toEqual('');
|
|
120
|
+
|
|
121
|
+
result = getInitials('+1 (555) 123-4567 ext.4567', false);
|
|
122
|
+
expect(result).toEqual('');
|
|
123
|
+
|
|
124
|
+
result = getInitials('+47 12 34 56 78 (X 5678)', false);
|
|
125
|
+
expect(result).toEqual('');
|
|
126
|
+
|
|
127
|
+
result = getInitials('+47 12 34 56 78 (X 5678)', false, true);
|
|
128
|
+
expect(result).toEqual('4');
|
|
129
|
+
|
|
130
|
+
result = getInitials('47 12 34', false, true);
|
|
131
|
+
expect(result).toEqual('43');
|
|
132
|
+
|
|
133
|
+
result = getInitials('47 12', false, true);
|
|
134
|
+
expect(result).toEqual('41');
|
|
135
|
+
|
|
136
|
+
result = getInitials('1 Ext 2', false);
|
|
137
|
+
expect(result).toEqual('');
|
|
138
|
+
|
|
139
|
+
result = getInitials('James Ext 2', false);
|
|
140
|
+
expect(result).toEqual('J2');
|
|
141
|
+
|
|
142
|
+
result = getInitials('1x1', false);
|
|
143
|
+
expect(result).toEqual('');
|
|
144
|
+
|
|
145
|
+
result = getInitials('1y1', false);
|
|
146
|
+
expect(result).toEqual('1');
|
|
147
|
+
|
|
148
|
+
result = getInitials('1', false);
|
|
149
|
+
expect(result).toEqual('1');
|
|
150
|
+
|
|
151
|
+
result = getInitials('A 2', false);
|
|
152
|
+
expect(result).toEqual('A2');
|
|
153
|
+
});
|
|
154
|
+
});
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Regular expressions matching characters to ignore when calculating the initials.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Regular expression matching characters within various types of enclosures, including the enclosures themselves
|
|
7
|
+
* so for example, (xyz) [xyz] {xyz} all would be ignored
|
|
8
|
+
*/
|
|
9
|
+
const UNWANTED_ENCLOSURES_REGEX: RegExp = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Regular expression matching special ASCII characters except space, plus some unicode special characters.
|
|
13
|
+
* Applies after unwanted enclosures have been removed
|
|
14
|
+
*/
|
|
15
|
+
const UNWANTED_CHARS_REGEX: RegExp = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed
|
|
19
|
+
* and number has been trimmed for whitespaces
|
|
20
|
+
*/
|
|
21
|
+
const PHONENUMBER_REGEX: RegExp = /^\d+[\d\s]*(:?ext|x|)\s*\d+$/i;
|
|
22
|
+
|
|
23
|
+
/** Regular expression matching one or more spaces. */
|
|
24
|
+
const MULTIPLE_WHITESPACES_REGEX: RegExp = /\s+/g;
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Regular expression matching languages for which we currently don't support initials.
|
|
28
|
+
* Arabic: Arabic, Arabic Supplement, Arabic Extended-A.
|
|
29
|
+
* Korean: Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.
|
|
30
|
+
* Japanese: Hiragana, Katakana.
|
|
31
|
+
* CJK: CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs,
|
|
32
|
+
* CJK Unified Ideographs Extension B
|
|
33
|
+
*/
|
|
34
|
+
// eslint-disable-next-line @fluentui/max-len
|
|
35
|
+
const UNSUPPORTED_TEXT_REGEX: RegExp =
|
|
36
|
+
/[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/;
|
|
37
|
+
|
|
38
|
+
function getInitialsLatin(displayName: string, isRtl: boolean): string {
|
|
39
|
+
let initials = '';
|
|
40
|
+
|
|
41
|
+
const splits: string[] = displayName.split(' ');
|
|
42
|
+
|
|
43
|
+
if (splits.length === 2) {
|
|
44
|
+
initials += splits[0].charAt(0).toUpperCase();
|
|
45
|
+
initials += splits[1].charAt(0).toUpperCase();
|
|
46
|
+
} else if (splits.length === 3) {
|
|
47
|
+
initials += splits[0].charAt(0).toUpperCase();
|
|
48
|
+
initials += splits[2].charAt(0).toUpperCase();
|
|
49
|
+
} else if (splits.length !== 0) {
|
|
50
|
+
initials += splits[0].charAt(0).toUpperCase();
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
if (isRtl && initials.length > 1) {
|
|
54
|
+
return initials.charAt(1) + initials.charAt(0);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
return initials;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
function cleanupDisplayName(displayName: string): string {
|
|
61
|
+
displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');
|
|
62
|
+
displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');
|
|
63
|
+
displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');
|
|
64
|
+
displayName = displayName.trim();
|
|
65
|
+
|
|
66
|
+
return displayName;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Get (up to 2 characters) initials based on display name of the persona.
|
|
71
|
+
*
|
|
72
|
+
* @param displayName - The full name of the person or entity
|
|
73
|
+
* @param isRtl - Whether the display is in RTL
|
|
74
|
+
* @param allowPhoneInitials - Should initials be generated from phone numbers (default false)
|
|
75
|
+
*
|
|
76
|
+
* @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
|
|
77
|
+
* could be derived from the name.
|
|
78
|
+
*/
|
|
79
|
+
export function getInitials(displayName: string | undefined | null, isRtl: boolean, allowPhoneInitials?: boolean): string {
|
|
80
|
+
if (!displayName) {
|
|
81
|
+
return '';
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
displayName = cleanupDisplayName(displayName);
|
|
85
|
+
|
|
86
|
+
// For names containing CJK characters, and phone numbers, we don't display initials
|
|
87
|
+
if (UNSUPPORTED_TEXT_REGEX.test(displayName) || (!allowPhoneInitials && PHONENUMBER_REGEX.test(displayName))) {
|
|
88
|
+
return '';
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
return getInitialsLatin(displayName, isRtl);
|
|
92
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { getInitials } from './getInitials';
|