communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
76 lines • 2.51 kB
TypeScript
import { IStyle } from '@fluentui/react';
import React from 'react';
import { BaseCustomStyles } from '../types';
/**
* Props for {@link GridLayout}.
*
* @public
*/
export interface GridLayoutProps {
children: React.ReactNode;
/**
* Allows users to pass in an object contains custom CSS styles.
* @Example
* ```
* <GridLayout styles={{ root: { background: 'blue' } }} />
* ```
*/
styles?: BaseCustomStyles;
}
/**
* {@link GridLayout} Component Styles.
* @public
*/
export interface GridLayoutStyles extends BaseCustomStyles {
/** Styles for each child of {@link GridLayout} */
children?: IStyle;
}
/**
* A component to lay out audio / video participants tiles in a call.
*
* @public
*/
export declare const GridLayout: (props: GridLayoutProps) => JSX.Element;
/**
* Properties to describe a grid. The number of rows, number of columns and whether it fills horizontally or vertically.
*
* @Example
* ```
* ______________________
* |_______|_______|______|
* |___________|__________| This grid has 2 rows, 3 columns and fills horizontally.
* ______________
* | | | |
* |____|____| |
* | | | |
* |____|____|____| This grid has 2 rows, 3 columns and fills vertically.
* _______________
* | | |
* |_______|_______|
* | | | If all cells are equal, we default the fill direction as horizontal.
* |_______|_______| This grid has 2 rows, 2 columns and fills horizontally.
* ```
*/
type GridProps = {
fillDirection: FillDirection;
rows: number;
columns: number;
};
type FillDirection = 'horizontal' | 'vertical';
/**
* Get the best GridProps to place a number of items in a grid as evenly as possible given the width and height of the grid
* @param numberOfItems - number of items to place in grid
* @param width - width of grid
* @param height - height of grid
* @returns GridProps
*/
export declare const calculateGridProps: (numberOfItems: number, width: number, height: number) => GridProps;
/**
* Creates a styles classname with CSS Grid related styles given GridProps and the number of items to distribute as evenly as possible.
* @param numberOfItems - number of items to place in grid
* @param gridProps - GridProps that define the number of rows, number of columns, and the fill direction
* @returns - classname
*/
export declare const createGridStyles: (numberOfItems: number, gridProps: GridProps) => string;
export {};
//# sourceMappingURL=GridLayout.d.ts.map