@matrix-widget-toolkit/mui 2.0.5 → 2.1.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/README.md +3 -1
- package/build/cjs/components/ElementAvatar/ElementAvatar.d.cts +27 -0
- package/build/cjs/components/ElementAvatar/ElementAvatar.test.d.cts +1 -0
- package/build/cjs/components/ElementAvatar/createAvatarUrl.d.cts +3 -0
- package/build/cjs/components/ElementAvatar/createAvatarUrl.test.d.cts +1 -0
- package/build/cjs/components/ElementAvatar/getInitialLetter.d.cts +1 -0
- package/build/cjs/components/ElementAvatar/getInitialLetter.test.d.cts +1 -0
- package/build/cjs/components/ElementAvatar/index.d.cts +2 -0
- package/build/cjs/components/ElementAvatar/useIdColorHash.d.cts +12 -0
- package/build/cjs/components/ElementAvatar/useIdColorHash.test.d.cts +1 -0
- package/build/cjs/components/LoadingView/LoadingView.d.cts +2 -0
- package/build/cjs/components/LoadingView/LoadingView.test.d.cts +1 -0
- package/build/cjs/components/LoadingView/index.d.cts +1 -0
- package/build/cjs/components/MissingCapabilitiesError/MissingCapabilitiesError.d.cts +4 -0
- package/build/cjs/components/MissingCapabilitiesError/MissingCapabilitiesError.test.d.cts +1 -0
- package/build/cjs/components/MissingCapabilitiesError/index.d.cts +1 -0
- package/build/cjs/components/MuiCapabilitiesGuard/MuiCapabilitiesGuard.d.cts +19 -0
- package/build/cjs/components/MuiCapabilitiesGuard/MuiCapabilitiesGuard.test.d.cts +1 -0
- package/build/cjs/components/MuiCapabilitiesGuard/index.d.cts +2 -0
- package/build/cjs/components/MuiThemeProvider/EmotionCacheProvider.d.cts +2 -0
- package/build/cjs/components/MuiThemeProvider/MuiThemeProvider.d.cts +14 -0
- package/build/cjs/components/MuiThemeProvider/MuiThemeProvider.test.d.cts +1 -0
- package/build/cjs/components/MuiThemeProvider/environment.d.cts +23 -0
- package/build/cjs/components/MuiThemeProvider/environment.test.d.cts +1 -0
- package/build/cjs/components/MuiThemeProvider/index.d.cts +4 -0
- package/build/cjs/components/MuiThemeProvider/nonce.d.cts +6 -0
- package/build/cjs/components/MuiThemeProvider/theme.d.cts +5 -0
- package/build/cjs/components/MuiThemeProvider/theme.test.d.cts +1 -0
- package/build/cjs/components/MuiWidgetApiProvider/ChildError.d.cts +4 -0
- package/build/cjs/components/MuiWidgetApiProvider/ChildError.test.d.cts +1 -0
- package/build/cjs/components/MuiWidgetApiProvider/CopyableCode.d.cts +4 -0
- package/build/cjs/components/MuiWidgetApiProvider/CopyableCode.test.d.cts +1 -0
- package/build/cjs/components/MuiWidgetApiProvider/MissingParametersError.d.cts +6 -0
- package/build/cjs/components/MuiWidgetApiProvider/MissingParametersError.test.d.cts +1 -0
- package/build/cjs/components/MuiWidgetApiProvider/MobileClientError.d.cts +2 -0
- package/build/cjs/components/MuiWidgetApiProvider/MobileClientError.test.d.cts +1 -0
- package/build/cjs/components/MuiWidgetApiProvider/MuiWidgetApiProvider.d.cts +22 -0
- package/build/cjs/components/MuiWidgetApiProvider/MuiWidgetApiProvider.test.d.cts +1 -0
- package/build/cjs/components/MuiWidgetApiProvider/OutsideClientError.d.cts +2 -0
- package/build/cjs/components/MuiWidgetApiProvider/OutsideClientError.test.d.cts +1 -0
- package/build/cjs/components/MuiWidgetApiProvider/index.d.cts +2 -0
- package/build/cjs/components/index.d.cts +4 -0
- package/build/cjs/i18n/i18n.d.cts +12 -0
- package/build/cjs/i18n/index.d.cts +1 -0
- package/build/cjs/{index.js → index.cjs} +104 -31
- package/build/cjs/index.d.cts +6 -0
- package/build/cjs/setupTests.d.cts +1 -0
- package/build/esm/components/ElementAvatar/ElementAvatar.d.ts +27 -0
- package/build/esm/components/ElementAvatar/ElementAvatar.test.d.ts +1 -0
- package/build/esm/components/ElementAvatar/createAvatarUrl.d.ts +3 -0
- package/build/esm/components/ElementAvatar/createAvatarUrl.test.d.ts +1 -0
- package/build/esm/components/ElementAvatar/getInitialLetter.d.ts +1 -0
- package/build/esm/components/ElementAvatar/getInitialLetter.test.d.ts +1 -0
- package/build/esm/components/ElementAvatar/index.d.ts +2 -0
- package/build/esm/components/ElementAvatar/useIdColorHash.d.ts +12 -0
- package/build/esm/components/ElementAvatar/useIdColorHash.test.d.ts +1 -0
- package/build/esm/components/LoadingView/LoadingView.d.ts +2 -0
- package/build/esm/components/LoadingView/LoadingView.test.d.ts +1 -0
- package/build/esm/components/LoadingView/index.d.ts +1 -0
- package/build/esm/components/MissingCapabilitiesError/MissingCapabilitiesError.d.ts +4 -0
- package/build/esm/components/MissingCapabilitiesError/MissingCapabilitiesError.test.d.ts +1 -0
- package/build/esm/components/MissingCapabilitiesError/index.d.ts +1 -0
- package/build/esm/components/MuiCapabilitiesGuard/MuiCapabilitiesGuard.d.ts +19 -0
- package/build/esm/components/MuiCapabilitiesGuard/MuiCapabilitiesGuard.test.d.ts +1 -0
- package/build/esm/components/MuiCapabilitiesGuard/index.d.ts +2 -0
- package/build/esm/components/MuiThemeProvider/EmotionCacheProvider.d.ts +2 -0
- package/build/esm/components/MuiThemeProvider/MuiThemeProvider.d.ts +14 -0
- package/build/esm/components/MuiThemeProvider/MuiThemeProvider.test.d.ts +1 -0
- package/build/esm/components/MuiThemeProvider/environment.d.ts +23 -0
- package/build/esm/components/MuiThemeProvider/environment.test.d.ts +1 -0
- package/build/esm/components/MuiThemeProvider/index.d.ts +4 -0
- package/build/esm/components/MuiThemeProvider/nonce.d.ts +6 -0
- package/build/esm/components/MuiThemeProvider/theme.d.ts +5 -0
- package/build/esm/components/MuiThemeProvider/theme.test.d.ts +1 -0
- package/build/esm/components/MuiWidgetApiProvider/ChildError.d.ts +4 -0
- package/build/esm/components/MuiWidgetApiProvider/ChildError.test.d.ts +1 -0
- package/build/esm/components/MuiWidgetApiProvider/CopyableCode.d.ts +4 -0
- package/build/esm/components/MuiWidgetApiProvider/CopyableCode.test.d.ts +1 -0
- package/build/esm/components/MuiWidgetApiProvider/MissingParametersError.d.ts +6 -0
- package/build/esm/components/MuiWidgetApiProvider/MissingParametersError.test.d.ts +1 -0
- package/build/esm/components/MuiWidgetApiProvider/MobileClientError.d.ts +2 -0
- package/build/esm/components/MuiWidgetApiProvider/MobileClientError.test.d.ts +1 -0
- package/build/esm/components/MuiWidgetApiProvider/MuiWidgetApiProvider.d.ts +22 -0
- package/build/esm/components/MuiWidgetApiProvider/MuiWidgetApiProvider.test.d.ts +1 -0
- package/build/esm/components/MuiWidgetApiProvider/OutsideClientError.d.ts +2 -0
- package/build/esm/components/MuiWidgetApiProvider/OutsideClientError.test.d.ts +1 -0
- package/build/esm/components/MuiWidgetApiProvider/index.d.ts +2 -0
- package/build/esm/components/index.d.ts +4 -0
- package/build/esm/i18n/i18n.d.ts +12 -0
- package/build/esm/i18n/index.d.ts +1 -0
- package/build/esm/index.d.ts +6 -0
- package/build/esm/index.js +104 -31
- package/build/esm/setupTests.d.ts +1 -0
- package/package.json +48 -37
package/README.md
CHANGED
|
@@ -79,7 +79,9 @@ import { EventDirection, WidgetEventCapability } from 'matrix-widget-api';
|
|
|
79
79
|
|
|
80
80
|
## Customization
|
|
81
81
|
|
|
82
|
-
You can override the primary color by setting the `
|
|
82
|
+
You can override the light primary color by setting the `REACT_APP_LIGHT_PRIMARY_COLOR` environment variable.
|
|
83
|
+
|
|
84
|
+
You can override the dark primary color by setting the `REACT_APP_DARK_PRIMARY_COLOR` environment variable.
|
|
83
85
|
|
|
84
86
|
> **Warning** Choosing a different primary color might result in not meeting contrast requirements for accessability.
|
|
85
87
|
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { AvatarProps } from '@mui/material';
|
|
2
|
+
/**
|
|
3
|
+
* Props for the {@link ElementAvatar} component.
|
|
4
|
+
*/
|
|
5
|
+
export type ElementAvatarProps = {
|
|
6
|
+
/**
|
|
7
|
+
* The id of the user.
|
|
8
|
+
* Even though the field is called userId, it can also be used to display
|
|
9
|
+
* avatars for rooms.
|
|
10
|
+
*/
|
|
11
|
+
userId: string;
|
|
12
|
+
/**
|
|
13
|
+
* The display name of the user.
|
|
14
|
+
* If not provided, the userId is used instead.
|
|
15
|
+
*/
|
|
16
|
+
displayName?: string;
|
|
17
|
+
/**
|
|
18
|
+
* The url of the avatar.
|
|
19
|
+
* If not provided, the initial letter based on the display name or userId is used instead.
|
|
20
|
+
*/
|
|
21
|
+
avatarUrl?: string;
|
|
22
|
+
} & AvatarProps;
|
|
23
|
+
/**
|
|
24
|
+
* A component to display user and room avatars in the style of Element.
|
|
25
|
+
* @param param0 - {@link ElementAvatarProps}
|
|
26
|
+
*/
|
|
27
|
+
export declare const ElementAvatar: import("react").ForwardRefExoticComponent<Omit<ElementAvatarProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getInitialLetter(name: string): string | undefined;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Determines a number for a given Matrix ID or room ID, helps disambiguating users
|
|
3
|
+
* who are trying to impersonate someone else.
|
|
4
|
+
*
|
|
5
|
+
* {@link https://github.com/element-hq/compound-web/blob/5950e6827aaaca5a0b2540093f0b168ca590e8ca/src/components/Avatar/useIdColorHash.ts#L23}
|
|
6
|
+
* @copyright Copyright 2023 New Vector Ltd
|
|
7
|
+
*
|
|
8
|
+
* @param id - a Matrix ID or room ID
|
|
9
|
+
* @returns a hash of the ID provided
|
|
10
|
+
*/
|
|
11
|
+
export declare function useIdColorHash(id: string): number;
|
|
12
|
+
export declare const isColorHash: (value: number) => value is 1 | 2 | 3 | 4 | 5 | 6;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { LoadingView } from './LoadingView';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { MissingCapabilitiesError } from './MissingCapabilitiesError';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Capability, WidgetEventCapability } from 'matrix-widget-api';
|
|
2
|
+
import { PropsWithChildren, ReactElement } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Props for the {@link MuiCapabilitiesGuard} component.
|
|
5
|
+
*/
|
|
6
|
+
export type MuiCapabilitiesGuardProps = PropsWithChildren<{
|
|
7
|
+
/**
|
|
8
|
+
* Required capabilities to display the `children`.
|
|
9
|
+
*/
|
|
10
|
+
capabilities: Array<WidgetEventCapability | Capability>;
|
|
11
|
+
}>;
|
|
12
|
+
/**
|
|
13
|
+
* A guard that ask the user for capabilities and only shows the `children`
|
|
14
|
+
* if all capabilities were accepted.
|
|
15
|
+
* If capabilities are denied, a message and a button to retry is displayed
|
|
16
|
+
* instead.
|
|
17
|
+
* @param param0 - {@link MuiCapabilitiesGuardProps}
|
|
18
|
+
*/
|
|
19
|
+
export declare function MuiCapabilitiesGuard({ capabilities, children, }: MuiCapabilitiesGuardProps): ReactElement;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import '@fontsource/inter/400.css';
|
|
2
|
+
import '@fontsource/inter/600.css';
|
|
3
|
+
import { ThemeOptions } from '@mui/material';
|
|
4
|
+
import { PropsWithChildren, ReactElement } from 'react';
|
|
5
|
+
/**
|
|
6
|
+
* Props for the {@link MuiThemeProvider} component.
|
|
7
|
+
*/
|
|
8
|
+
export type MuiThemeProviderProps = PropsWithChildren;
|
|
9
|
+
/**
|
|
10
|
+
* Provide a semantic UI based theme to the child components.
|
|
11
|
+
* @param param0 - {@link MuiThemeProviderProps}
|
|
12
|
+
*/
|
|
13
|
+
export declare function MuiThemeProvider({ children, }: MuiThemeProviderProps): ReactElement;
|
|
14
|
+
export declare function chooseTheme(theme: string): ThemeOptions;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
declare global {
|
|
2
|
+
interface Window {
|
|
3
|
+
__ENVIRONMENT__: string | undefined;
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Reads environment variables starting with `REACT_APP_` from a global variable
|
|
8
|
+
* at runtime and falls back to `process.env` build time variables.
|
|
9
|
+
*
|
|
10
|
+
* @param name - The name of the environment variable, should start with
|
|
11
|
+
* `REACT_APP_`.
|
|
12
|
+
*/
|
|
13
|
+
export declare function getEnvironment(name: string): string | undefined;
|
|
14
|
+
/**
|
|
15
|
+
* Reads environment variables starting with `REACT_APP_` from a global variable
|
|
16
|
+
* at runtime and falls back to `process.env` build time variables.
|
|
17
|
+
*
|
|
18
|
+
* @param name - The name of the environment variable, should start with
|
|
19
|
+
* `REACT_APP_`.
|
|
20
|
+
* @param defaultValue - The default value to return if the environment variable
|
|
21
|
+
* is not provided.
|
|
22
|
+
*/
|
|
23
|
+
export declare function getEnvironment(name: string, defaultValue: string): string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { WidgetRegistration } from '@matrix-widget-toolkit/api';
|
|
2
|
+
import { ReactElement } from 'react';
|
|
3
|
+
export declare const STATE_EVENT_WIDGETS = "im.vector.modular.widgets";
|
|
4
|
+
export declare function MissingParametersError({ widgetRegistration, }: {
|
|
5
|
+
widgetRegistration?: WidgetRegistration;
|
|
6
|
+
}): ReactElement;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { WidgetApi, WidgetRegistration } from '@matrix-widget-toolkit/api';
|
|
2
|
+
import { PropsWithChildren, ReactElement } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Props for the {@link (MuiWidgetApiProvider:function)} component.
|
|
5
|
+
*/
|
|
6
|
+
export type MuiWidgetApiProviderProps = PropsWithChildren<{
|
|
7
|
+
/**
|
|
8
|
+
* Configuration to set during Widget registration.
|
|
9
|
+
*/
|
|
10
|
+
widgetRegistration?: WidgetRegistration;
|
|
11
|
+
/**
|
|
12
|
+
* Result from a call to `WidgetApiImpl.create`.
|
|
13
|
+
*/
|
|
14
|
+
widgetApiPromise: Promise<WidgetApi>;
|
|
15
|
+
}>;
|
|
16
|
+
/**
|
|
17
|
+
* Provides the `WidgetApi` in the React context once it's fully
|
|
18
|
+
* initialized without errors.
|
|
19
|
+
* Use `useWidgetApi` to access it.
|
|
20
|
+
* @param param0 - {@link MuiWidgetApiProviderProps}
|
|
21
|
+
*/
|
|
22
|
+
export declare function MuiWidgetApiProvider({ widgetRegistration, widgetApiPromise, children, }: MuiWidgetApiProviderProps): ReactElement;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import LanguageDetector from 'i18next-browser-languagedetector';
|
|
2
|
+
/**
|
|
3
|
+
* Backend for usage with `i18n-next` that provides translations for internal
|
|
4
|
+
* messages.
|
|
5
|
+
*/
|
|
6
|
+
export declare const WidgetToolkitI18nBackend: import("i18next").BackendModule<object>;
|
|
7
|
+
/**
|
|
8
|
+
* A language detector that reads the language from the widget url.
|
|
9
|
+
*/
|
|
10
|
+
export declare class WidgetApiLanguageDetector extends LanguageDetector {
|
|
11
|
+
constructor();
|
|
12
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { WidgetApiLanguageDetector, WidgetToolkitI18nBackend } from './i18n';
|
|
@@ -11,7 +11,6 @@ var utils = require('@mui/utils');
|
|
|
11
11
|
var i18n = require('i18next');
|
|
12
12
|
var createCache = require('@emotion/cache');
|
|
13
13
|
var react = require('@emotion/react');
|
|
14
|
-
var lodash = require('lodash');
|
|
15
14
|
var reactI18next = require('react-i18next');
|
|
16
15
|
var reactUse = require('react-use');
|
|
17
16
|
var ErrorIcon = require('@mui/icons-material/Error');
|
|
@@ -131,9 +130,11 @@ var fontFamily = [
|
|
|
131
130
|
'"Segoe UI Emoji"',
|
|
132
131
|
'"Noto Color Emoji"',
|
|
133
132
|
].join(',');
|
|
134
|
-
var
|
|
133
|
+
var primaryColorlight = getEnvironment('REACT_APP_LIGHT_PRIMARY_COLOR', '#007a61');
|
|
134
|
+
var primaryColorDark = getEnvironment('REACT_APP_DARK_PRIMARY_COLOR', '#129a78');
|
|
135
135
|
var primaryColorHighContrast = '#075D53';
|
|
136
|
-
var
|
|
136
|
+
var errorColorLight = '#d51928';
|
|
137
|
+
var errorColorDark = '#fd3e3c';
|
|
137
138
|
var errorColorHighContrast = '#AA0904';
|
|
138
139
|
function createSwitchStyleOverrides(_a) {
|
|
139
140
|
var trackColor = _a.trackColor, thumbColor = _a.thumbColor;
|
|
@@ -210,11 +211,11 @@ var baseTheme = {
|
|
|
210
211
|
},
|
|
211
212
|
palette: {
|
|
212
213
|
primary: {
|
|
213
|
-
main:
|
|
214
|
+
main: primaryColorlight,
|
|
214
215
|
contrastText: '#ffffff',
|
|
215
216
|
},
|
|
216
217
|
error: {
|
|
217
|
-
main:
|
|
218
|
+
main: errorColorLight,
|
|
218
219
|
contrastText: '#ffffff',
|
|
219
220
|
},
|
|
220
221
|
tonalOffset: 0.025,
|
|
@@ -461,6 +462,12 @@ var lightTheme = {
|
|
|
461
462
|
default: '#ffffff',
|
|
462
463
|
paper: '#f2f5f8',
|
|
463
464
|
},
|
|
465
|
+
primary: {
|
|
466
|
+
main: primaryColorlight,
|
|
467
|
+
},
|
|
468
|
+
error: {
|
|
469
|
+
main: errorColorLight,
|
|
470
|
+
},
|
|
464
471
|
text: {
|
|
465
472
|
primary: '#17191c',
|
|
466
473
|
secondary: '#61708b',
|
|
@@ -619,6 +626,12 @@ var darkTheme = {
|
|
|
619
626
|
default: '#15191e',
|
|
620
627
|
paper: '#20252b',
|
|
621
628
|
},
|
|
629
|
+
primary: {
|
|
630
|
+
main: primaryColorDark,
|
|
631
|
+
},
|
|
632
|
+
error: {
|
|
633
|
+
main: errorColorDark,
|
|
634
|
+
},
|
|
622
635
|
text: {
|
|
623
636
|
primary: '#ffffff',
|
|
624
637
|
secondary: '#b9bec6',
|
|
@@ -725,20 +738,28 @@ function createAvatarUrl(url, _a) {
|
|
|
725
738
|
* See the License for the specific language governing permissions and
|
|
726
739
|
* limitations under the License.
|
|
727
740
|
*/
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
741
|
+
// Based on the way Element selects the initial letter
|
|
742
|
+
// https://github.com/matrix-org/matrix-react-sdk/blob/667ec166d736dfb0ac49f67398a8b7a13db7d5ef/src/Avatar.ts#L121
|
|
743
|
+
function getInitialLetter(name) {
|
|
744
|
+
if (name.length < 1) {
|
|
745
|
+
return undefined;
|
|
746
|
+
}
|
|
747
|
+
var initial = name[0];
|
|
748
|
+
if ((initial === '@' || initial === '#' || initial === '+') && name[1]) {
|
|
749
|
+
name = name.substring(1);
|
|
735
750
|
}
|
|
736
|
-
|
|
737
|
-
return
|
|
751
|
+
// rely on the grapheme cluster splitter in the Intl.Segmenter to get the first character
|
|
752
|
+
return Array.from(new Intl.Segmenter().segment(name))
|
|
753
|
+
.map(function (_a) {
|
|
754
|
+
var segment = _a.segment;
|
|
755
|
+
return segment;
|
|
756
|
+
})
|
|
757
|
+
.slice(0, 1)[0]
|
|
758
|
+
.toUpperCase();
|
|
738
759
|
}
|
|
739
760
|
|
|
740
761
|
/*
|
|
741
|
-
* Copyright
|
|
762
|
+
* Copyright 2024 Nordeck IT + Consulting GmbH
|
|
742
763
|
*
|
|
743
764
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
744
765
|
* you may not use this file except in compliance with the License.
|
|
@@ -752,19 +773,28 @@ function getColor(id) {
|
|
|
752
773
|
* See the License for the specific language governing permissions and
|
|
753
774
|
* limitations under the License.
|
|
754
775
|
*/
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
776
|
+
/**
|
|
777
|
+
* Determines a number for a given Matrix ID or room ID, helps disambiguating users
|
|
778
|
+
* who are trying to impersonate someone else.
|
|
779
|
+
*
|
|
780
|
+
* {@link https://github.com/element-hq/compound-web/blob/5950e6827aaaca5a0b2540093f0b168ca590e8ca/src/components/Avatar/useIdColorHash.ts#L23}
|
|
781
|
+
* @copyright Copyright 2023 New Vector Ltd
|
|
782
|
+
*
|
|
783
|
+
* @param id - a Matrix ID or room ID
|
|
784
|
+
* @returns a hash of the ID provided
|
|
785
|
+
*/
|
|
786
|
+
function useIdColorHash(id) {
|
|
787
|
+
var MIN = 1;
|
|
788
|
+
var MAX = 6;
|
|
789
|
+
// Sum up the values of all the char codes in the string
|
|
790
|
+
var charCodeSum = id.split('').reduce(function (sum, char) {
|
|
791
|
+
return sum + char.charCodeAt(0);
|
|
792
|
+
}, 0);
|
|
793
|
+
return (charCodeSum % MAX) + MIN;
|
|
767
794
|
}
|
|
795
|
+
var isColorHash = function (value) {
|
|
796
|
+
return [1, 2, 3, 4, 5, 6].includes(value);
|
|
797
|
+
};
|
|
768
798
|
|
|
769
799
|
var __assign = (undefined && undefined.__assign) || function () {
|
|
770
800
|
__assign = Object.assign || function(t) {
|
|
@@ -788,17 +818,60 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
|
|
|
788
818
|
}
|
|
789
819
|
return t;
|
|
790
820
|
};
|
|
821
|
+
/**
|
|
822
|
+
* {@link https://github.com/element-hq/compound-design-tokens}
|
|
823
|
+
*/
|
|
824
|
+
var bgColors = {
|
|
825
|
+
dark: {
|
|
826
|
+
1: '#002600',
|
|
827
|
+
2: '#001b4e',
|
|
828
|
+
3: '#37004e',
|
|
829
|
+
4: '#22006a',
|
|
830
|
+
5: '#450018',
|
|
831
|
+
6: '#470000',
|
|
832
|
+
},
|
|
833
|
+
light: {
|
|
834
|
+
1: '#e0f8d9',
|
|
835
|
+
2: '#e3f5f8',
|
|
836
|
+
3: '#faeefb',
|
|
837
|
+
4: '#f1efff',
|
|
838
|
+
5: '#ffecf0',
|
|
839
|
+
6: '#ffefe4',
|
|
840
|
+
},
|
|
841
|
+
};
|
|
842
|
+
var colors = {
|
|
843
|
+
dark: {
|
|
844
|
+
1: '#56c02c',
|
|
845
|
+
2: '#21bacd',
|
|
846
|
+
3: '#d991de',
|
|
847
|
+
4: '#ad9cfe',
|
|
848
|
+
5: '#fe84a2',
|
|
849
|
+
6: '#f6913d',
|
|
850
|
+
},
|
|
851
|
+
light: {
|
|
852
|
+
1: '#005f00',
|
|
853
|
+
2: '#00548c',
|
|
854
|
+
3: '#822198',
|
|
855
|
+
4: '#5d26cd',
|
|
856
|
+
5: '#9f0850',
|
|
857
|
+
6: '#9b2200',
|
|
858
|
+
},
|
|
859
|
+
};
|
|
791
860
|
var StyledAvatar = material.styled(material.Avatar, {
|
|
792
861
|
shouldForwardProp: function (p) { return p !== 'color'; },
|
|
793
862
|
})(function (_a) {
|
|
794
|
-
var theme = _a.theme,
|
|
863
|
+
var theme = _a.theme, colorHash = _a.colorHash;
|
|
795
864
|
return ({
|
|
796
865
|
// increase the specificity of the css selector to override styles of
|
|
797
866
|
// chip or button components that provide their own css for avatars.
|
|
798
867
|
'&, &&.MuiChip-avatar': {
|
|
799
868
|
fontSize: 18,
|
|
800
|
-
background:
|
|
801
|
-
|
|
869
|
+
background: isColorHash(colorHash)
|
|
870
|
+
? bgColors[theme.palette.mode][colorHash]
|
|
871
|
+
: bgColors[theme.palette.mode][1],
|
|
872
|
+
color: isColorHash(colorHash)
|
|
873
|
+
? colors[theme.palette.mode][colorHash]
|
|
874
|
+
: colors[theme.palette.mode][1],
|
|
802
875
|
},
|
|
803
876
|
width: 24,
|
|
804
877
|
height: 24,
|
|
@@ -812,7 +885,7 @@ var ElementAvatar = react$2.forwardRef(function ElementAvatar(_a, ref) {
|
|
|
812
885
|
var avatarUrl = _a.avatarUrl, userId = _a.userId, displayName = _a.displayName, props = __rest(_a, ["avatarUrl", "userId", "displayName"]);
|
|
813
886
|
var src = avatarUrl ? createAvatarUrl(avatarUrl) : undefined;
|
|
814
887
|
var name = displayName !== null && displayName !== void 0 ? displayName : userId;
|
|
815
|
-
return (jsxRuntime.jsx(StyledAvatar, __assign({ ref: ref, alt: "", "aria-hidden": true, src: src,
|
|
888
|
+
return (jsxRuntime.jsx(StyledAvatar, __assign({ ref: ref, alt: "", "aria-hidden": true, src: src, colorHash: useIdColorHash(userId) }, props, { children: getInitialLetter(name) })));
|
|
816
889
|
});
|
|
817
890
|
|
|
818
891
|
function LoadingView() {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '@testing-library/jest-dom/vitest';
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { AvatarProps } from '@mui/material';
|
|
2
|
+
/**
|
|
3
|
+
* Props for the {@link ElementAvatar} component.
|
|
4
|
+
*/
|
|
5
|
+
export type ElementAvatarProps = {
|
|
6
|
+
/**
|
|
7
|
+
* The id of the user.
|
|
8
|
+
* Even though the field is called userId, it can also be used to display
|
|
9
|
+
* avatars for rooms.
|
|
10
|
+
*/
|
|
11
|
+
userId: string;
|
|
12
|
+
/**
|
|
13
|
+
* The display name of the user.
|
|
14
|
+
* If not provided, the userId is used instead.
|
|
15
|
+
*/
|
|
16
|
+
displayName?: string;
|
|
17
|
+
/**
|
|
18
|
+
* The url of the avatar.
|
|
19
|
+
* If not provided, the initial letter based on the display name or userId is used instead.
|
|
20
|
+
*/
|
|
21
|
+
avatarUrl?: string;
|
|
22
|
+
} & AvatarProps;
|
|
23
|
+
/**
|
|
24
|
+
* A component to display user and room avatars in the style of Element.
|
|
25
|
+
* @param param0 - {@link ElementAvatarProps}
|
|
26
|
+
*/
|
|
27
|
+
export declare const ElementAvatar: import("react").ForwardRefExoticComponent<Omit<ElementAvatarProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getInitialLetter(name: string): string | undefined;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Determines a number for a given Matrix ID or room ID, helps disambiguating users
|
|
3
|
+
* who are trying to impersonate someone else.
|
|
4
|
+
*
|
|
5
|
+
* {@link https://github.com/element-hq/compound-web/blob/5950e6827aaaca5a0b2540093f0b168ca590e8ca/src/components/Avatar/useIdColorHash.ts#L23}
|
|
6
|
+
* @copyright Copyright 2023 New Vector Ltd
|
|
7
|
+
*
|
|
8
|
+
* @param id - a Matrix ID or room ID
|
|
9
|
+
* @returns a hash of the ID provided
|
|
10
|
+
*/
|
|
11
|
+
export declare function useIdColorHash(id: string): number;
|
|
12
|
+
export declare const isColorHash: (value: number) => value is 1 | 2 | 3 | 4 | 5 | 6;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { LoadingView } from './LoadingView';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { MissingCapabilitiesError } from './MissingCapabilitiesError';
|