@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
106 lines (105 loc) • 4.62 kB
TypeScript
import { ReactNode } from 'react';
import { Theme } from '@mui/material/styles';
import { PopoverOrigin } from '@mui/material/Popover';
import { IBasicUser } from '../../models';
/**
* Get full name by user object
* @param {object} user
* @return {string} full name
*/
export declare const getFullName: <T extends IBasicUser>(user: T) => string;
/**
* @param {string} firstName - provides the user first name
* @param {string} lastName - provides the user last name
* @return {string} - user name initials
**/
export declare const getInitials: (firstName?: string, lastName?: string) => string;
/**
* @param {object} user - provides the user object
* @return {string} - provides initials by full name, otherwise by email
**/
export declare const getInitialsByUser: <T extends IBasicUser>(user: T) => string;
/**
* @param {string} avatarInitials - avatar initials
* @return {string} - A fixed highlight color by avatar initials
**/
export declare const getHighlightColor: (theme: Theme, avatarInitials: string) => any;
/**
* user - provides the user object
* @param {object} user - provides the user object
* @return {string} - A fixed highlight color by user
**/
export declare const getHighlightColorByUser: <T extends IBasicUser>(theme: Theme, user: T) => any;
/**
* @param {size} size - file size
* @return {string} - human readable file size
**/
export declare const getFileSize: (size: number) => string;
/**
* @param {string} color - a CSS named color string
* @return {string} - A standardized (hex) color representation of the CSS named color (e.g., 'red' -> '#FF0000')
**/
export declare function standardizeNamedColorToHex(color: any): any;
/**
* @param {string} color - the CSS color or theme palette string to convert to Hex
* @return {string} - A numeric representation of the color (hex, rgb, or hsl — a value that is compatible with the getContrastText function)
**/
export declare const standardizeColorToHex: (theme: Theme, color: string) => any;
/**
* @param {string} backgroundColor - background color
* @param {string} textColor - text color
* @return {string} - A fixed highlight color by background color
**/
export declare const getContrastTextColor: (theme: Theme, backgroundColor: string, textColor?: string) => string;
/**
* Get transformed file size from the bytes number
* @param {number} bytes Bytes number used to transform to file size.
* @param {boolean} [si=false] Should we use SI units, default is yes
* @param {number} [dp=1] Indicates that it needs to be accurate to a few decimal places
* @returns transformed file size which contains units
*/
export declare const getHumanFileSize: (bytes: number, si?: boolean, dp?: number) => string;
/**
* @name isReactNode
* @description Determine whether the incoming value is a valid ReactNode
* @param obj
* @return boolean
*/
export declare function isReactNode(obj: any): obj is ReactNode;
/**
* A utility function that determines how to open a link based on the current environment (CEF Browser, Web Browser).
* 1) If in a CEF browser, the system default browser will be launched to open the link. The required CEF browser "Hexagon.Framework.WebBrowser" version should be higher than "2023.0.9000.9032".
* 2) If a link is currently open in a web browser, how the link is opened depends on the target.
* @param url The url of the link
* @param target '_blank' or '_self'
*/
export declare const openLink: (url: string | undefined, target?: string) => void;
/**
* Flattens a tree structure into a list of all node IDs.
*
* @param {readonly Array<T>} tree - The tree structure represented as a array of nodes.
* @param {string} [idKey='itemId'] - The key used to identify the node ID. Defaults to 'itemId'.
* @param {string} [childrenKey='children'] - The key used to identify the children nodes. Defaults to 'children'.
* @returns {Array<string>} - A flat array of node IDs.
*
* @example
* // Example tree structure:
* const tree = [
* { itemId: '1', children: [{ itemId: '2' }, { itemId: '3', children: [{ itemId: '4' }] }] },
* { itemId: '5' }
* ];
*
* // Usage of the utility function:
* const nodeIds = flattenTreeIds(tree);
* console.log(nodeIds); // Output: ['1', '2', '3', '4', '5']
*/
export declare const flattenTreeIds: <T>(tree: readonly T[], idKey?: string, childrenKey?: string) => string[];
/**
* Get menu anchor position compared to screen
* @param anchorEl HTMLElement
* @returns menu origin
*/
export declare const getMenuOrigin: (anchorEl: HTMLElement | null | undefined) => {
anchorOrigin: PopoverOrigin;
transformOrigin: PopoverOrigin;
};