@fluentui-react-native/experimental-avatar 0.14.45 → 0.15.0
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 +16 -1
- package/CHANGELOG.md +10 -2
- package/{lib-commonjs/Avatar.d.ts → lib/NativeAvatar.d.ts} +6 -6
- package/lib/NativeAvatar.d.ts.map +1 -0
- package/lib/{Avatar.js → NativeAvatar.js} +3 -3
- package/lib/NativeAvatar.js.map +1 -0
- package/lib/index.d.ts +1 -3
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +1 -3
- package/lib/index.js.map +1 -1
- package/{lib/Avatar.d.ts → lib-commonjs/NativeAvatar.d.ts} +6 -6
- package/lib-commonjs/NativeAvatar.d.ts.map +1 -0
- package/lib-commonjs/{Avatar.js → NativeAvatar.js} +4 -4
- package/lib-commonjs/NativeAvatar.js.map +1 -0
- package/lib-commonjs/index.d.ts +1 -3
- package/lib-commonjs/index.d.ts.map +1 -1
- package/lib-commonjs/index.js +1 -3
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +2 -10
- package/src/{Avatar.tsx → NativeAvatar.tsx} +11 -11
- package/src/__tests__/Avatar.test.jsx +129 -0
- package/src/__tests__/__snapshots__/{JSAvatar.test.jsx.snap → Avatar.test.jsx.snap} +0 -0
- package/src/index.ts +1 -3
- package/MIGRATION.md +0 -157
- package/SPEC.md +0 -295
- package/jest.config.js +0 -2
- package/lib/Avatar.d.ts.map +0 -1
- package/lib/Avatar.js.map +0 -1
- package/lib/JSAvatar.d.ts +0 -12
- package/lib/JSAvatar.d.ts.map +0 -1
- package/lib/JSAvatar.js +0 -84
- package/lib/JSAvatar.js.map +0 -1
- package/lib/JSAvatar.styling.d.ts +0 -5
- package/lib/JSAvatar.styling.d.ts.map +0 -1
- package/lib/JSAvatar.styling.js +0 -158
- package/lib/JSAvatar.styling.js.map +0 -1
- package/lib/JSAvatar.types.d.ts +0 -213
- package/lib/JSAvatar.types.d.ts.map +0 -1
- package/lib/JSAvatar.types.js +0 -56
- package/lib/JSAvatar.types.js.map +0 -1
- package/lib/JSAvatarTokens.d.ts +0 -5
- package/lib/JSAvatarTokens.d.ts.map +0 -1
- package/lib/JSAvatarTokens.js +0 -198
- package/lib/JSAvatarTokens.js.map +0 -1
- package/lib/JSAvatarTokens.win32.d.ts +0 -5
- package/lib/JSAvatarTokens.win32.d.ts.map +0 -1
- package/lib/JSAvatarTokens.win32.js +0 -201
- package/lib/JSAvatarTokens.win32.js.map +0 -1
- package/lib/getHashCode.d.ts +0 -8
- package/lib/getHashCode.d.ts.map +0 -1
- package/lib/getHashCode.js +0 -16
- package/lib/getHashCode.js.map +0 -1
- package/lib/titles.d.ts +0 -2
- package/lib/titles.d.ts.map +0 -1
- package/lib/titles.js +0 -109
- package/lib/titles.js.map +0 -1
- package/lib/useAvatar.d.ts +0 -33
- package/lib/useAvatar.d.ts.map +0 -1
- package/lib/useAvatar.js +0 -106
- package/lib/useAvatar.js.map +0 -1
- package/lib-commonjs/Avatar.d.ts.map +0 -1
- package/lib-commonjs/Avatar.js.map +0 -1
- package/lib-commonjs/JSAvatar.d.ts +0 -12
- package/lib-commonjs/JSAvatar.d.ts.map +0 -1
- package/lib-commonjs/JSAvatar.js +0 -88
- package/lib-commonjs/JSAvatar.js.map +0 -1
- package/lib-commonjs/JSAvatar.styling.d.ts +0 -5
- package/lib-commonjs/JSAvatar.styling.d.ts.map +0 -1
- package/lib-commonjs/JSAvatar.styling.js +0 -161
- package/lib-commonjs/JSAvatar.styling.js.map +0 -1
- package/lib-commonjs/JSAvatar.types.d.ts +0 -213
- package/lib-commonjs/JSAvatar.types.d.ts.map +0 -1
- package/lib-commonjs/JSAvatar.types.js +0 -59
- package/lib-commonjs/JSAvatar.types.js.map +0 -1
- package/lib-commonjs/JSAvatarTokens.d.ts +0 -5
- package/lib-commonjs/JSAvatarTokens.d.ts.map +0 -1
- package/lib-commonjs/JSAvatarTokens.js +0 -202
- package/lib-commonjs/JSAvatarTokens.js.map +0 -1
- package/lib-commonjs/JSAvatarTokens.win32.d.ts +0 -5
- package/lib-commonjs/JSAvatarTokens.win32.d.ts.map +0 -1
- package/lib-commonjs/JSAvatarTokens.win32.js +0 -205
- package/lib-commonjs/JSAvatarTokens.win32.js.map +0 -1
- package/lib-commonjs/getHashCode.d.ts +0 -8
- package/lib-commonjs/getHashCode.d.ts.map +0 -1
- package/lib-commonjs/getHashCode.js +0 -20
- package/lib-commonjs/getHashCode.js.map +0 -1
- package/lib-commonjs/titles.d.ts +0 -2
- package/lib-commonjs/titles.d.ts.map +0 -1
- package/lib-commonjs/titles.js +0 -112
- package/lib-commonjs/titles.js.map +0 -1
- package/lib-commonjs/useAvatar.d.ts +0 -33
- package/lib-commonjs/useAvatar.d.ts.map +0 -1
- package/lib-commonjs/useAvatar.js +0 -113
- package/lib-commonjs/useAvatar.js.map +0 -1
- package/src/JSAvatar.styling.ts +0 -201
- package/src/JSAvatar.tsx +0 -96
- package/src/JSAvatar.types.ts +0 -286
- package/src/JSAvatarTokens.ts +0 -201
- package/src/JSAvatarTokens.win32.ts +0 -204
- package/src/__tests__/JSAvatar.test.jsx +0 -96
- package/src/getHashCode.ts +0 -16
- package/src/titles.ts +0 -108
- package/src/useAvatar.ts +0 -126
package/src/useAvatar.ts
DELETED
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
import { JSAvatarProps, AvatarInfo, JSAvatarState, AvatarColors } from './JSAvatar.types';
|
|
2
|
-
import { PresenceBadgeProps } from '@fluentui-react-native/badge';
|
|
3
|
-
import { titles } from './titles';
|
|
4
|
-
import { getHashCodeWeb } from './getHashCode';
|
|
5
|
-
import { createIconProps } from '@fluentui-react-native/interactive-hooks';
|
|
6
|
-
/**
|
|
7
|
-
* Re-usable hook for FURN Avatar.
|
|
8
|
-
* This hook configures Avatar props and state for FURN Avatar.
|
|
9
|
-
*
|
|
10
|
-
* @param props user props sent to FURN Avatar
|
|
11
|
-
* @returns configured props and state for FURN Avatar
|
|
12
|
-
*/
|
|
13
|
-
export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
|
|
14
|
-
const {
|
|
15
|
-
avatarColor,
|
|
16
|
-
active,
|
|
17
|
-
accessibilityLabel,
|
|
18
|
-
accessibilityRole,
|
|
19
|
-
activeAppearance,
|
|
20
|
-
badge,
|
|
21
|
-
idForColor,
|
|
22
|
-
initials,
|
|
23
|
-
name,
|
|
24
|
-
shape,
|
|
25
|
-
transparentRing,
|
|
26
|
-
icon,
|
|
27
|
-
...rest
|
|
28
|
-
} = props;
|
|
29
|
-
|
|
30
|
-
const showRing = active === 'active' && activeAppearance === 'ring';
|
|
31
|
-
const showBadge = (!active || active === 'unset') && !!badge && !!badge.status;
|
|
32
|
-
const accessibilityText = `${name || ''}${showBadge ? `, ${badge.status}` : ''}`;
|
|
33
|
-
|
|
34
|
-
const badgeProps: PresenceBadgeProps = {
|
|
35
|
-
size: 'small',
|
|
36
|
-
...badge,
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
const state: JSAvatarState = {
|
|
40
|
-
showRing,
|
|
41
|
-
transparentRing: !!transparentRing,
|
|
42
|
-
showBadge,
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
const _initials = initials || getInitials(name);
|
|
46
|
-
const avatarColorsIdx = getHashCodeWeb(idForColor ?? name ?? '') % AvatarColors.length;
|
|
47
|
-
const _avatarColor = avatarColor === 'colorful' ? AvatarColors[avatarColorsIdx] : avatarColor;
|
|
48
|
-
|
|
49
|
-
const iconProps = createIconProps(icon);
|
|
50
|
-
|
|
51
|
-
return {
|
|
52
|
-
props: {
|
|
53
|
-
accessible: true,
|
|
54
|
-
accessibilityLabel: accessibilityLabel || accessibilityText,
|
|
55
|
-
accessibilityRole: accessibilityRole ?? 'image',
|
|
56
|
-
avatarColor: _avatarColor,
|
|
57
|
-
shape: shape || 'circular',
|
|
58
|
-
...rest,
|
|
59
|
-
active,
|
|
60
|
-
activeAppearance,
|
|
61
|
-
badge: badgeProps,
|
|
62
|
-
initials: _initials,
|
|
63
|
-
icon: iconProps,
|
|
64
|
-
},
|
|
65
|
-
state: {
|
|
66
|
-
...state,
|
|
67
|
-
},
|
|
68
|
-
};
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
/**
|
|
72
|
-
* A function which takes a name and returns initials
|
|
73
|
-
*
|
|
74
|
-
* @param name
|
|
75
|
-
* @returns initials. First letter of the word if only one word was provided.
|
|
76
|
-
* First letters of the first and last words if more words were provided.
|
|
77
|
-
* Words in braces, titles, special characters, parantheses and dashes should be ignored.
|
|
78
|
-
*/
|
|
79
|
-
export const getInitials = (name: string): string => {
|
|
80
|
-
if (!name) {
|
|
81
|
-
return '';
|
|
82
|
-
}
|
|
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);
|
|
88
|
-
const wordsLength = words.length;
|
|
89
|
-
const lastWordIdx = wordsLength - 1;
|
|
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}`;
|
|
93
|
-
return initials;
|
|
94
|
-
};
|
|
95
|
-
|
|
96
|
-
/**
|
|
97
|
-
* A function which takes a name and returns array of valid words
|
|
98
|
-
*
|
|
99
|
-
* @param name
|
|
100
|
-
* @returns array of words without phone numbers and special characters.
|
|
101
|
-
*/
|
|
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);
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
/**
|
|
119
|
-
* A function which verifies whether words array contains title
|
|
120
|
-
*
|
|
121
|
-
* @param words array of words in name
|
|
122
|
-
* @returns array of words without titles
|
|
123
|
-
*/
|
|
124
|
-
export const removeTitlesFromName = (words: string[]): string[] => {
|
|
125
|
-
return words.filter((word) => !titles.has(word));
|
|
126
|
-
};
|