@fluentui-react-native/experimental-avatar 0.14.42 → 0.14.45

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.
Files changed (88) hide show
  1. package/CHANGELOG.json +53 -2
  2. package/CHANGELOG.md +27 -2
  3. package/FRNAvatar.podspec +0 -2
  4. package/MIGRATION.md +1 -2
  5. package/SPEC.md +1 -11
  6. package/lib/JSAvatar.d.ts +2 -2
  7. package/lib/JSAvatar.d.ts.map +1 -1
  8. package/lib/JSAvatar.js +17 -8
  9. package/lib/JSAvatar.js.map +1 -1
  10. package/lib/JSAvatar.styling.d.ts.map +1 -1
  11. package/lib/JSAvatar.styling.js +69 -25
  12. package/lib/JSAvatar.styling.js.map +1 -1
  13. package/lib/JSAvatar.types.d.ts +43 -22
  14. package/lib/JSAvatar.types.d.ts.map +1 -1
  15. package/lib/JSAvatarTokens.d.ts.map +1 -1
  16. package/lib/JSAvatarTokens.js +0 -2
  17. package/lib/JSAvatarTokens.js.map +1 -1
  18. package/lib/JSAvatarTokens.win32.d.ts.map +1 -1
  19. package/lib/JSAvatarTokens.win32.js +0 -2
  20. package/lib/JSAvatarTokens.win32.js.map +1 -1
  21. package/lib/useAvatar.d.ts +3 -5
  22. package/lib/useAvatar.d.ts.map +1 -1
  23. package/lib/useAvatar.js +27 -17
  24. package/lib/useAvatar.js.map +1 -1
  25. package/lib-commonjs/JSAvatar.d.ts +2 -2
  26. package/lib-commonjs/JSAvatar.d.ts.map +1 -1
  27. package/lib-commonjs/JSAvatar.js +16 -7
  28. package/lib-commonjs/JSAvatar.js.map +1 -1
  29. package/lib-commonjs/JSAvatar.styling.d.ts.map +1 -1
  30. package/lib-commonjs/JSAvatar.styling.js +69 -25
  31. package/lib-commonjs/JSAvatar.styling.js.map +1 -1
  32. package/lib-commonjs/JSAvatar.types.d.ts +43 -22
  33. package/lib-commonjs/JSAvatar.types.d.ts.map +1 -1
  34. package/lib-commonjs/JSAvatarTokens.d.ts.map +1 -1
  35. package/lib-commonjs/JSAvatarTokens.js +0 -2
  36. package/lib-commonjs/JSAvatarTokens.js.map +1 -1
  37. package/lib-commonjs/JSAvatarTokens.win32.d.ts.map +1 -1
  38. package/lib-commonjs/JSAvatarTokens.win32.js +0 -2
  39. package/lib-commonjs/JSAvatarTokens.win32.js.map +1 -1
  40. package/lib-commonjs/useAvatar.d.ts +3 -5
  41. package/lib-commonjs/useAvatar.d.ts.map +1 -1
  42. package/lib-commonjs/useAvatar.js +29 -19
  43. package/lib-commonjs/useAvatar.js.map +1 -1
  44. package/package.json +1 -1
  45. package/src/JSAvatar.styling.ts +74 -32
  46. package/src/JSAvatar.tsx +40 -24
  47. package/src/JSAvatar.types.ts +51 -24
  48. package/src/JSAvatarTokens.ts +0 -2
  49. package/src/JSAvatarTokens.win32.ts +0 -2
  50. package/src/__tests__/JSAvatar.test.jsx +75 -137
  51. package/src/__tests__/__snapshots__/JSAvatar.test.jsx.snap +52 -55
  52. package/src/useAvatar.ts +32 -16
  53. package/lib/JSAvatar.helpers.d.ts +0 -7
  54. package/lib/JSAvatar.helpers.d.ts.map +0 -1
  55. package/lib/JSAvatar.helpers.js +0 -28
  56. package/lib/JSAvatar.helpers.js.map +0 -1
  57. package/lib/utils/getInitials.d.ts +0 -15
  58. package/lib/utils/getInitials.d.ts.map +0 -1
  59. package/lib/utils/getInitials.js +0 -78
  60. package/lib/utils/getInitials.js.map +0 -1
  61. package/lib/utils/getInitials.test.d.ts +0 -2
  62. package/lib/utils/getInitials.test.d.ts.map +0 -1
  63. package/lib/utils/getInitials.test.js +0 -116
  64. package/lib/utils/getInitials.test.js.map +0 -1
  65. package/lib/utils/index.d.ts +0 -2
  66. package/lib/utils/index.d.ts.map +0 -1
  67. package/lib/utils/index.js +0 -2
  68. package/lib/utils/index.js.map +0 -1
  69. package/lib-commonjs/JSAvatar.helpers.d.ts +0 -7
  70. package/lib-commonjs/JSAvatar.helpers.d.ts.map +0 -1
  71. package/lib-commonjs/JSAvatar.helpers.js +0 -32
  72. package/lib-commonjs/JSAvatar.helpers.js.map +0 -1
  73. package/lib-commonjs/utils/getInitials.d.ts +0 -15
  74. package/lib-commonjs/utils/getInitials.d.ts.map +0 -1
  75. package/lib-commonjs/utils/getInitials.js +0 -82
  76. package/lib-commonjs/utils/getInitials.js.map +0 -1
  77. package/lib-commonjs/utils/getInitials.test.d.ts +0 -2
  78. package/lib-commonjs/utils/getInitials.test.d.ts.map +0 -1
  79. package/lib-commonjs/utils/getInitials.test.js +0 -118
  80. package/lib-commonjs/utils/getInitials.test.js.map +0 -1
  81. package/lib-commonjs/utils/index.d.ts +0 -2
  82. package/lib-commonjs/utils/index.d.ts.map +0 -1
  83. package/lib-commonjs/utils/index.js +0 -6
  84. package/lib-commonjs/utils/index.js.map +0 -1
  85. package/src/JSAvatar.helpers.ts +0 -35
  86. package/src/utils/getInitials.test.ts +0 -154
  87. package/src/utils/getInitials.ts +0 -92
  88. package/src/utils/index.ts +0 -1
@@ -6,8 +6,6 @@ import { globalTokens } from '@fluentui-react-native/theme-tokens';
6
6
  export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: Theme) =>
7
7
  ({
8
8
  badgeSize: 'smallest',
9
- horizontalIconAlignment: 'end',
10
- verticalIconAlignment: 'end',
11
9
  color: t.colors.neutralForeground3,
12
10
  backgroundColor: t.colors.neutralBackground6,
13
11
  avatarOpacity: 1,
@@ -1,26 +1,71 @@
1
1
  import * as React from 'react';
2
2
  import { JSAvatar } from '..';
3
- import { getInitials, validateAlphabeticalCharacters, removeTitlesFromName } from '../useAvatar';
3
+ import { getInitials } from '../useAvatar';
4
4
  import * as renderer from 'react-test-renderer';
5
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}',
6
+ const emptyData = [
7
+ [undefined, ''],
8
+ [null, ''],
9
+ ['', ''],
10
+ ];
11
+ const testData = [
12
+ ['Marie', 'M'],
13
+ ['Aadi KaPoor', 'AK'],
14
+ ['Marie Beaudouin', 'MB'],
15
+ ['Aadi Meni KaPoor', 'AK'],
16
+ ['Will Little (Teams)', 'WL'],
17
+ ['Will Little-Tanaka', 'WL'],
18
+ ['-Aadi Kapoor', 'AK'],
19
+ ['Richard 23 Feynman', 'RF'],
20
+ ['* Richard *', 'R'],
21
+ ['Richard Feynman [Teams],', 'RF'],
22
+ ['Richard Feynman {Teams}', 'RF'],
23
+ ['-Test str with *spaces', 'TS'],
24
+ ['Second, First', 'SF'],
25
+ ];
26
+ const namesWithTitles = [
27
+ ['Mr Feynman', 'F'],
28
+ ['Dr Richard Feynman', 'RF'],
29
+ ['Aadi Meni Ka Jr', 'AK'],
30
+ ['Consul General Richard Faynman', 'RF'],
31
+ ['Major General Victor', 'V'],
32
+ ];
33
+
34
+ const languageTestData = [
35
+ ['خسرو رحیمی', 'خ'], // Arabic
36
+ ['桂英', '桂'], // Chinese
37
+ ['佳', '佳'],
38
+ ['宋智洋', '宋'],
39
+ ['강현', '강'], // Korean
40
+ ['최종래', '최'],
41
+ ['남궁 성종', '남'],
42
+ ['松田', '松'], // Japanese
43
+ ['海野', '海'],
44
+ ['かり', 'か'],
45
+ ['Илон Маск', 'ИМ'], // Cyrillic
46
+ ['Írissa Þórðardóttir', 'ÍÞ'], // non-ASCII characters
47
+ ['Øyvind Åsen', 'ØÅ'],
48
+ ['ثابت بن قره', 'ث'], // Thābit ibn Qurra - result in PCX - ثابت
49
+ ['שירה לוי', 'של'], // Hebrew - Shira Levi
50
+ ];
51
+
52
+ const phoneNumbersAndDigits = [
53
+ ['12345678', ''],
54
+ ['+47 12 34 56 78 (X 5678)', ''],
55
+ ['47 12 34', ''],
56
+ ['47 12', ''],
57
+ ['James Ext 2', 'JE'],
58
+ ['1', ''],
59
+ ['A2', 'A'],
60
+ ];
61
+
62
+ const edgeCaseData = [
63
+ ['4lex 5loo', 'LL'],
64
+ [' !@#$%^&*()=+ (Alpha) David (The man) `~<>,./?[]{}| Goff (Gamma) ', 'DG'],
65
+ ['+1 (555) 123-4567 ext.4567', 'E'],
66
+ ['1 Ext 2', 'E'],
67
+ ['1x1', 'X'],
19
68
  ];
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
69
 
25
70
  describe('Avatar rendering', () => {
26
71
  it('renders Avatar', () => {
@@ -29,130 +74,23 @@ describe('Avatar rendering', () => {
29
74
  });
30
75
  });
31
76
 
32
- describe('validateAlphabeticalCharacters method', () => {
33
- it('validates alphabetical characters', () => {
34
- for (let i = 0; i < alphabeticalTestNames.length; i++) {
35
- expect(validateAlphabeticalCharacters(alphabeticalTestNames[i])).toBeTruthy();
36
- }
37
- for (let i = 0; i < otherTestNames.length; i++) {
38
- expect(validateAlphabeticalCharacters(otherTestNames[i])).toBeFalsy();
39
- }
40
- });
41
-
42
- it("doesn't validate undefined name", () => {
43
- expect(validateAlphabeticalCharacters(undefined)).toBeFalsy();
44
- });
45
- it("doesn't validate an empty string", () => {
46
- expect(validateAlphabeticalCharacters('')).toBeFalsy();
47
- });
48
- it("doesn't validate null name", () => {
49
- expect(validateAlphabeticalCharacters(null)).toBeFalsy();
50
- });
51
- });
52
-
53
- describe('removeTitlesFromName method', () => {
54
- it('removes titles from the name', () => {
55
- const words = ['Mr', 'Faynman'];
56
- expect(removeTitlesFromName(words)).toStrictEqual(['Faynman']);
57
- });
58
- // it('removes multiword titles from the name', () => {
59
- // const name = 'Consul General Richard Faynman';
60
- // expect(removeTitlesFromName(name)).toStrictEqual(['Richard Faynman']);
61
- // });
62
- });
63
-
64
77
  describe('getInitials method', () => {
65
- it('returns correct initials', () => {
66
- const test = getInitials('-Test str with *spaces');
67
- expect(test).toBe('TS');
78
+ it.each(emptyData)("returns an empty string for '%s'", (text, expected) => {
79
+ expect(getInitials(text)).toBe(expected);
68
80
  });
69
-
70
- it('returns an empty string if name is undefined', () => {
71
- expect(getInitials(undefined)).toBe('');
81
+ it.each(testData)("render correct initials for input '%s'", (text, expected) => {
82
+ expect(getInitials(text)).toBe(expected);
72
83
  });
73
-
74
- it('return initials for alphabetical words', () => {
75
- for (let i = 0; i < alphabeticalTestNames.length; i++) {
76
- expect(getInitials(alphabeticalTestNames[i])).toBe(alphabeticalInitials[i]);
77
- }
84
+ it.each(namesWithTitles)("render initials for names with titles: '%s'", (text, expected) => {
85
+ expect(getInitials(text)).toBe(expected);
78
86
  });
79
-
80
- it('return initials for words with titles', () => {
81
- for (let i = 0; i < namesWithTitles.length; i++) {
82
- expect(getInitials(namesWithTitles[i])).toBe(initialsForNameWithTitles[i]);
83
- }
84
- });
85
-
86
- it("returns initials when there's a coma", () => {
87
- expect(getInitials('Second, First')).toEqual('SF');
88
- });
89
-
90
- // Unit tests from Web
91
- it('handles null inputs', () => {
92
- expect(getInitials(null)).toEqual('');
93
- expect(getInitials(undefined)).toEqual('');
87
+ it.each(languageTestData)("render initials for different languages: '%s'", (text, expected) => {
88
+ expect(getInitials(text)).toBe(expected);
94
89
  });
95
-
96
- // it('calculates an expected initials in LTR for non-ASCII characters', () => {
97
- // expect(getInitials('Írissa Þórðardóttir')).toEqual('ÍÞ');
98
- // expect(getInitials('Øyvind Åsen')).toEqual('ØÅ');
99
- // });
100
-
101
- it('calculates an expected initials in LTR with a hypen', () => {
102
- expect(getInitials('David Zearing-Goff')).toEqual('DZ');
90
+ it.each(phoneNumbersAndDigits)("returns an empty string for phone numbers: '%s'", (text, expected) => {
91
+ expect(getInitials(text)).toBe(expected);
103
92
  });
104
-
105
- // it('calculates an expected initials in LTR with numbers', () => {
106
- // expect(getInitials('4lex 5loo')).toEqual('45');
107
- // });
108
- it('calculates an expected initials in LTR with multiple parentheses, extra spaces, and unwanted characters', () => {
109
- const result = getInitials(' !@#$%^&*()=+ (Alpha) David (The man) `~<>,./?[]{}| Goff (Gamma) ');
110
- expect(result).toEqual('DG');
111
- });
112
-
113
- it('calculates an expected initials in LTR with multiple types of unwanted text', () => {
114
- const result = getInitials(' !@#$%^&*()=+ (Alpha) David (The man) `~<>,./?[]{}| Goff (Gamma) [Beta] ');
115
- expect(result).toEqual('DG');
93
+ it.each(edgeCaseData)("render initials for edge cases: '%s'", (text, expected) => {
94
+ expect(getInitials(text)).toBe(expected);
116
95
  });
117
-
118
- it('calculates an expected initials for Arabic names', () => {
119
- expect(getInitials('خسرو رحیمی')).toEqual('');
120
- });
121
-
122
- it('calculates an expected initials for Chinese names', () => {
123
- expect(getInitials('桂英')).toEqual('');
124
- expect(getInitials('佳')).toEqual('');
125
- expect(getInitials('宋智洋')).toEqual('');
126
- });
127
-
128
- it('calculates an expected initials for Korean names', () => {
129
- expect(getInitials('강현')).toEqual('');
130
- expect(getInitials('최종래')).toEqual('');
131
- expect(getInitials('남궁 성종')).toEqual('');
132
- });
133
-
134
- it('calculates an expected initials for Japanese names', () => {
135
- expect(getInitials('松田')).toEqual('');
136
- expect(getInitials('海野')).toEqual('');
137
- expect(getInitials('かり')).toEqual('');
138
- });
139
-
140
- // it('validates phone numbers', () => {
141
- // expect(getInitials('12345678')).toEqual('');
142
- // expect(getInitials('+1 (555) 123-4567 ext.4567')).toEqual('');
143
- // expect(getInitials('+47 12 34 56 78 (X 5678)')).toEqual('4');
144
- // expect(getInitials('47 12 34')).toEqual('');
145
- // expect(getInitials('47 12')).toEqual('');
146
- // expect(getInitials('1 Ext 2')).toEqual('');
147
- // result = getInitials('James Ext 2');
148
- // expect(result).toEqual('JE');
149
- // result = getInitials('1x1');
150
- // expect(result).toEqual('');
151
- // result = getInitials('1y1');
152
- // expect(result).toEqual('');
153
- // result = getInitials('1');
154
- // expect(result).toEqual('');
155
- // result = getInitials('A 2');
156
- // expect(result).toEqual('A');
157
- // });
158
96
  });
@@ -5,16 +5,15 @@ exports[`Avatar rendering renders Avatar 1`] = `
5
5
  accessibilityLabel=""
6
6
  accessibilityRole="image"
7
7
  accessible={true}
8
+ icon={null}
9
+ initials=""
8
10
  shape="circular"
9
11
  style={
10
12
  Object {
11
- "alignItems": "flex-end",
12
- "flexDirection": "row",
13
+ "alignItems": "center",
13
14
  "height": 24,
14
- "horizontalIconAlignment": "end",
15
- "justifyContent": "flex-end",
15
+ "justifyContent": "center",
16
16
  "opacity": 1,
17
- "verticalIconAlignment": "end",
18
17
  "width": 24,
19
18
  }
20
19
  }
@@ -24,73 +23,71 @@ exports[`Avatar rendering renders Avatar 1`] = `
24
23
  style={
25
24
  Object {
26
25
  "alignItems": "center",
27
- "alignSelf": "stretch",
28
26
  "backgroundColor": "#e6e6e6",
29
27
  "borderColor": "#ffffff",
30
28
  "borderRadius": 9999,
31
29
  "borderWidth": 0,
32
- "flexGrow": 1,
33
30
  "height": 24,
34
31
  "justifyContent": "center",
32
+ "marginLeft": 2,
33
+ "marginTop": 2,
35
34
  "width": 24,
36
35
  }
37
36
  }
38
37
  >
39
- <RNSVGSvgView
40
- align="xMidYMid"
41
- bbHeight={16}
42
- bbWidth={14}
43
- fill="none"
44
- focusable={false}
45
- height={16}
46
- meetOrSlice={0}
47
- minX={0}
48
- minY={0}
38
+ <View
39
+ accessibilityRole="image"
40
+ accessible={false}
49
41
  style={
50
- Array [
51
- Object {
52
- "backgroundColor": "transparent",
53
- "borderWidth": 0,
54
- },
55
- Object {
56
- "flex": 0,
57
- "height": 16,
58
- "width": 14,
59
- },
60
- ]
42
+ Object {
43
+ "fontSize": 16,
44
+ "height": 16,
45
+ "position": "absolute",
46
+ "width": 16,
47
+ }
61
48
  }
62
- vbHeight={16}
63
- vbWidth={14}
64
- width={14}
65
- xml="<svg width=\\"14\\" height=\\"16\\" viewBox=\\"0 0 14 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\">
66
- <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\\"/>
67
- </svg>
68
- "
69
- xmlns="http://www.w3.org/2000/svg"
70
49
  >
71
- <RNSVGGroup
72
- fill={null}
73
- propList={
50
+ <RNSVGSvgView
51
+ align="xMidYMid"
52
+ bbHeight="100%"
53
+ bbWidth="100%"
54
+ focusable={false}
55
+ meetOrSlice={0}
56
+ minX={0}
57
+ minY={0}
58
+ style={
74
59
  Array [
75
- "fill",
60
+ Object {
61
+ "backgroundColor": "transparent",
62
+ "borderWidth": 0,
63
+ },
64
+ Object {
65
+ "flex": 0,
66
+ "height": "100%",
67
+ "width": "100%",
68
+ },
76
69
  ]
77
70
  }
71
+ vbHeight={16}
72
+ vbWidth={14}
78
73
  >
79
- <RNSVGPath
80
- 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"
81
- fill={
82
- Array [
83
- 2,
84
- ]
85
- }
86
- propList={
87
- Array [
88
- "fill",
89
- ]
90
- }
91
- />
92
- </RNSVGGroup>
93
- </RNSVGSvgView>
74
+ <RNSVGGroup>
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>
94
91
  </View>
95
92
  </View>
96
93
  `;
package/src/useAvatar.ts CHANGED
@@ -2,6 +2,7 @@ import { JSAvatarProps, AvatarInfo, JSAvatarState, AvatarColors } from './JSAvat
2
2
  import { PresenceBadgeProps } from '@fluentui-react-native/badge';
3
3
  import { titles } from './titles';
4
4
  import { getHashCodeWeb } from './getHashCode';
5
+ import { createIconProps } from '@fluentui-react-native/interactive-hooks';
5
6
  /**
6
7
  * Re-usable hook for FURN Avatar.
7
8
  * This hook configures Avatar props and state for FURN Avatar.
@@ -20,13 +21,13 @@ export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
20
21
  idForColor,
21
22
  initials,
22
23
  name,
23
- ring,
24
24
  shape,
25
+ transparentRing,
26
+ icon,
25
27
  ...rest
26
28
  } = props;
27
29
 
28
30
  const showRing = active === 'active' && activeAppearance === 'ring';
29
- const transparentRing = !!ring?.transparent;
30
31
  const showBadge = (!active || active === 'unset') && !!badge && !!badge.status;
31
32
  const accessibilityText = `${name || ''}${showBadge ? `, ${badge.status}` : ''}`;
32
33
 
@@ -37,7 +38,7 @@ export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
37
38
 
38
39
  const state: JSAvatarState = {
39
40
  showRing,
40
- transparentRing,
41
+ transparentRing: !!transparentRing,
41
42
  showBadge,
42
43
  };
43
44
 
@@ -45,6 +46,8 @@ export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
45
46
  const avatarColorsIdx = getHashCodeWeb(idForColor ?? name ?? '') % AvatarColors.length;
46
47
  const _avatarColor = avatarColor === 'colorful' ? AvatarColors[avatarColorsIdx] : avatarColor;
47
48
 
49
+ const iconProps = createIconProps(icon);
50
+
48
51
  return {
49
52
  props: {
50
53
  accessible: true,
@@ -57,6 +60,7 @@ export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
57
60
  activeAppearance,
58
61
  badge: badgeProps,
59
62
  initials: _initials,
63
+ icon: iconProps,
60
64
  },
61
65
  state: {
62
66
  ...state,
@@ -73,30 +77,42 @@ export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
73
77
  * Words in braces, titles, special characters, parantheses and dashes should be ignored.
74
78
  */
75
79
  export const getInitials = (name: string): string => {
76
- if (!name && !validateAlphabeticalCharacters(name)) {
80
+ if (!name) {
77
81
  return '';
78
82
  }
79
- const nonWordRegExp = new RegExp('\\W+(?<!\\S-)', 'g');
80
- const wordsInBracesRegExp = new RegExp('(\\(|\\[|\\{)\\w+(\\)|\\]|\\})', 'g');
81
- let words = name.replace(wordsInBracesRegExp, ' ').replace(nonWordRegExp, ' ').trim().split(' ');
82
- words = removeTitlesFromName(words);
83
+ const ARABIC_ASIAN_REGEXP = new RegExp(
84
+ '[\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]',
85
+ 'g',
86
+ );
87
+ const words = removeRedundantCharacters(name);
83
88
  const wordsLength = words.length;
84
89
  const lastWordIdx = wordsLength - 1;
85
- const initials = `${words[0].charAt(0).toUpperCase()}${wordsLength > 1 ? words[lastWordIdx].charAt(0).toUpperCase() : ''}`;
90
+ const firstLetter = words[0].charAt(0).toUpperCase();
91
+ const lastLetter = wordsLength > 1 ? words[lastWordIdx].charAt(0).toUpperCase() : '';
92
+ const initials = `${firstLetter}${ARABIC_ASIAN_REGEXP.test(name) ? '' : lastLetter}`;
86
93
  return initials;
87
94
  };
88
95
 
89
96
  /**
90
- * A function which verifies whether a name contains non-alphabetical characters
97
+ * A function which takes a name and returns array of valid words
91
98
  *
92
99
  * @param name
93
- * @returns true if the name contains alphabetical characters. Returns false if there are
94
- * numeric values or the first character is non-alphabetical. In this case avatar should
95
- * fall back to icon.
100
+ * @returns array of words without phone numbers and special characters.
96
101
  */
97
- export const validateAlphabeticalCharacters = (name: string): boolean => {
98
- const alphabeticalRegExp = new RegExp('[a-zA-Z]', 'g');
99
- return name ? alphabeticalRegExp.test(name) : false;
102
+ export const removeRedundantCharacters = (name: string): string[] => {
103
+ if (!name) {
104
+ return [];
105
+ }
106
+ const WORDS_IN_BRACES_REGEXP = new RegExp('[(\\[\\{][^\\)\\]\\}]*[\\)\\]\\}]', 'g');
107
+ const PHONE_NUMBER_REGEXP = new RegExp('(\\+|(\\d|\\s))', 'g');
108
+ const SPECIAL_CHARACTERS_REGEXP = new RegExp('[!"#\'$%&*+,-./:;>=<?@^_`|~¡¢£¤¥¦§¨©ª«¬®ˉ°±²¼½¾¿×÷]', 'g');
109
+ const words = name
110
+ .replace(WORDS_IN_BRACES_REGEXP, '')
111
+ .replace(PHONE_NUMBER_REGEXP, ' ')
112
+ .replace(SPECIAL_CHARACTERS_REGEXP, '')
113
+ .trim()
114
+ .split(' ');
115
+ return removeTitlesFromName(words);
100
116
  };
101
117
 
102
118
  /**
@@ -1,7 +0,0 @@
1
- export declare type AvatarSizeConfig = {
2
- iconSize: number;
3
- iconStrokeWidth: number;
4
- initialsSize: number;
5
- };
6
- export declare function getRingConfig(size: number): any;
7
- //# sourceMappingURL=JSAvatar.helpers.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"JSAvatar.helpers.d.ts","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":"AAQA,oBAAY,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAoB/C"}
@@ -1,28 +0,0 @@
1
- import { globalTokens } from '@fluentui-react-native/theme-tokens';
2
- var sizeAdjustment = {
3
- small: 8,
4
- medium: 12,
5
- large: 16,
6
- };
7
- export function getRingConfig(size) {
8
- if (size <= 48) {
9
- return {
10
- size: size + sizeAdjustment.small,
11
- stroke: globalTokens.stroke.width.thick,
12
- innerStroke: globalTokens.stroke.width.thick,
13
- };
14
- }
15
- if (size <= 71) {
16
- return {
17
- size: size + sizeAdjustment.medium,
18
- stroke: globalTokens.stroke.width.thicker,
19
- innerStroke: globalTokens.stroke.width.thicker,
20
- };
21
- }
22
- return {
23
- size: size + sizeAdjustment.large,
24
- stroke: globalTokens.stroke.width.thickest,
25
- innerStroke: globalTokens.stroke.width.thickest,
26
- };
27
- }
28
- //# sourceMappingURL=JSAvatar.helpers.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"JSAvatar.helpers.js","sourceRoot":"","sources":["../src/JSAvatar.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAEnE,IAAM,cAAc,GAAG;IACrB,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACV,CAAC;AAQF,MAAM,UAAU,aAAa,CAAC,IAAY;IACxC,IAAI,IAAI,IAAI,EAAE,EAAE;QACd,OAAO;YACL,IAAI,EAAE,IAAI,GAAG,cAAc,CAAC,KAAK;YACjC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK;YACvC,WAAW,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK;SAC7C,CAAC;KACH;IACD,IAAI,IAAI,IAAI,EAAE,EAAE;QACd,OAAO;YACL,IAAI,EAAE,IAAI,GAAG,cAAc,CAAC,MAAM;YAClC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO;YACzC,WAAW,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO;SAC/C,CAAC;KACH;IACD,OAAO;QACL,IAAI,EAAE,IAAI,GAAG,cAAc,CAAC,KAAK;QACjC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ;QAC1C,WAAW,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ;KAChD,CAAC;AACJ,CAAC"}
@@ -1,15 +0,0 @@
1
- /**
2
- * Regular expressions matching characters to ignore when calculating the initials.
3
- */
4
- /**
5
- * Get (up to 2 characters) initials based on display name of the persona.
6
- *
7
- * @param displayName - The full name of the person or entity
8
- * @param isRtl - Whether the display is in RTL
9
- * @param allowPhoneInitials - Should initials be generated from phone numbers (default false)
10
- *
11
- * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
12
- * could be derived from the name.
13
- */
14
- export declare function getInitials(displayName: string | undefined | null, isRtl: boolean, allowPhoneInitials?: boolean): string;
15
- //# sourceMappingURL=getInitials.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"getInitials.d.ts","sourceRoot":"","sources":["../../src/utils/getInitials.ts"],"names":[],"mappings":"AAAA;;GAEG;AAkEH;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,CAAC,EAAE,OAAO,GAAG,MAAM,CAaxH"}
@@ -1,78 +0,0 @@
1
- /**
2
- * Regular expressions matching characters to ignore when calculating the initials.
3
- */
4
- /**
5
- * Regular expression matching characters within various types of enclosures, including the enclosures themselves
6
- * so for example, (xyz) [xyz] {xyz} all would be ignored
7
- */
8
- var UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
9
- /**
10
- * Regular expression matching special ASCII characters except space, plus some unicode special characters.
11
- * Applies after unwanted enclosures have been removed
12
- */
13
- var UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
14
- /**
15
- * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed
16
- * and number has been trimmed for whitespaces
17
- */
18
- var PHONENUMBER_REGEX = /^\d+[\d\s]*(:?ext|x|)\s*\d+$/i;
19
- /** Regular expression matching one or more spaces. */
20
- var MULTIPLE_WHITESPACES_REGEX = /\s+/g;
21
- /**
22
- * Regular expression matching languages for which we currently don't support initials.
23
- * Arabic: Arabic, Arabic Supplement, Arabic Extended-A.
24
- * Korean: Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.
25
- * Japanese: Hiragana, Katakana.
26
- * CJK: CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs,
27
- * CJK Unified Ideographs Extension B
28
- */
29
- // eslint-disable-next-line @fluentui/max-len
30
- var UNSUPPORTED_TEXT_REGEX = /[\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]/;
31
- function getInitialsLatin(displayName, isRtl) {
32
- var initials = '';
33
- var splits = displayName.split(' ');
34
- if (splits.length === 2) {
35
- initials += splits[0].charAt(0).toUpperCase();
36
- initials += splits[1].charAt(0).toUpperCase();
37
- }
38
- else if (splits.length === 3) {
39
- initials += splits[0].charAt(0).toUpperCase();
40
- initials += splits[2].charAt(0).toUpperCase();
41
- }
42
- else if (splits.length !== 0) {
43
- initials += splits[0].charAt(0).toUpperCase();
44
- }
45
- if (isRtl && initials.length > 1) {
46
- return initials.charAt(1) + initials.charAt(0);
47
- }
48
- return initials;
49
- }
50
- function cleanupDisplayName(displayName) {
51
- displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');
52
- displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');
53
- displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');
54
- displayName = displayName.trim();
55
- return displayName;
56
- }
57
- /**
58
- * Get (up to 2 characters) initials based on display name of the persona.
59
- *
60
- * @param displayName - The full name of the person or entity
61
- * @param isRtl - Whether the display is in RTL
62
- * @param allowPhoneInitials - Should initials be generated from phone numbers (default false)
63
- *
64
- * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
65
- * could be derived from the name.
66
- */
67
- export function getInitials(displayName, isRtl, allowPhoneInitials) {
68
- if (!displayName) {
69
- return '';
70
- }
71
- displayName = cleanupDisplayName(displayName);
72
- // For names containing CJK characters, and phone numbers, we don't display initials
73
- if (UNSUPPORTED_TEXT_REGEX.test(displayName) || (!allowPhoneInitials && PHONENUMBER_REGEX.test(displayName))) {
74
- return '';
75
- }
76
- return getInitialsLatin(displayName, isRtl);
77
- }
78
- //# sourceMappingURL=getInitials.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"getInitials.js","sourceRoot":"","sources":["../../src/utils/getInitials.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;GAGG;AACH,IAAM,yBAAyB,GAAW,6BAA6B,CAAC;AAExE;;;GAGG;AACH,IAAM,oBAAoB,GAAW,4DAA4D,CAAC;AAElG;;;GAGG;AACH,IAAM,iBAAiB,GAAW,+BAA+B,CAAC;AAElE,sDAAsD;AACtD,IAAM,0BAA0B,GAAW,MAAM,CAAC;AAElD;;;;;;;GAOG;AACH,6CAA6C;AAC7C,IAAM,sBAAsB,GAC1B,4MAA4M,CAAC;AAE/M,SAAS,gBAAgB,CAAC,WAAmB,EAAE,KAAc;IAC3D,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,IAAM,MAAM,GAAa,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAEhD,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;QACvB,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC9C,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;KAC/C;SAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;QAC9B,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC9C,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;KAC/C;SAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;QAC9B,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;KAC/C;IAED,IAAI,KAAK,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;QAChC,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;KAChD;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,SAAS,kBAAkB,CAAC,WAAmB;IAC7C,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC,CAAC;IACjE,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;IAC5D,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,0BAA0B,EAAE,GAAG,CAAC,CAAC;IACnE,WAAW,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC;IAEjC,OAAO,WAAW,CAAC;AACrB,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CAAC,WAAsC,EAAE,KAAc,EAAE,kBAA4B;IAC9G,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,EAAE,CAAC;KACX;IAED,WAAW,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAE9C,oFAAoF;IACpF,IAAI,sBAAsB,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,kBAAkB,IAAI,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE;QAC5G,OAAO,EAAE,CAAC;KACX;IAED,OAAO,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAC9C,CAAC"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=getInitials.test.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"getInitials.test.d.ts","sourceRoot":"","sources":["../../src/utils/getInitials.test.ts"],"names":[],"mappings":""}