communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
50 lines • 1.9 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { createContext, useContext, useMemo } from 'react';
import { ThemeProvider, getTheme, mergeThemes, mergeStyles } from '@fluentui/react';
import { lightTheme } from './themes';
const wrapper = mergeStyles({
height: '100%',
width: '100%',
// Add NorthStar styling used previously in the library
'*': {
boxSizing: 'border-box'
},
'*:before': {
boxSizing: 'border-box'
},
'*:after': {
boxSizing: 'border-box'
},
/* Adding priority for HTML `hidden` attribute to be applied correctly */
'[hidden]': {
display: 'none!important'
}
});
const defaultTheme = Object.assign({}, mergeThemes(getTheme(), lightTheme));
/** Theme context for library's react components */
const ThemeContext = createContext(defaultTheme);
/**
* Provider to apply a Fluent theme across this library's react components.
*
* @remarks Components in this library are composed primarily from [Fluent UI](https://developer.microsoft.com/fluentui#/controls/web),
* controls, mixing v8 and v9 controls.
* This provider handles applying any theme provided to the underlying Fluent UI controls. *
* @public
*/
export const FluentThemeProvider = (props) => {
const { fluentTheme, rtl, children, rootStyle } = props;
const fluentV8Theme = useMemo(() => {
const mergedTheme = mergeThemes(defaultTheme, fluentTheme);
return mergeThemes(mergedTheme, { rtl });
}, [fluentTheme, rtl]);
return (React.createElement(ThemeContext.Provider, { value: fluentV8Theme },
React.createElement(ThemeProvider, { theme: fluentV8Theme, className: wrapper, style: rootStyle }, children)));
};
/**
* React hook to access theme
*
* @public
*/
export const useTheme = () => useContext(ThemeContext);
//# sourceMappingURL=FluentThemeProvider.js.map