@devopness/ui-react
Version:
Devopness Design System React Components - Painless essential DevOps to everyone
73 lines (72 loc) • 2.42 kB
TypeScript
import { ComponentType, CSSProperties, ReactNode } from 'react';
import { Icon } from '../../../icons';
/** Props for the icon component */
type IconProps = (Icon | Omit<string, Icon>) | {
name: Omit<string, Icon>;
size?: number;
color?: string;
tooltip?: string;
};
/**
* Props for the navigation component
*/
type NavigationComponentProps = {
/** URL string for the navigation component */
to: string | undefined;
/** Target attribute for the navigation component */
target?: '_blank' | '_self' | undefined;
/** Node to render */
children: ReactNode;
/** Indicates if the URL should be opened in a new tab */
isExternalUrl?: boolean;
/** Style to apply to the navigation component */
style?: CSSProperties;
};
type DetailsContentProps = {
/** Label for the detail item */
label?: string;
/** Value for the detail item */
value: ReactNode;
/** Icon to display alongside the label */
icon?: IconProps;
/** URL string or props object for the navigation component */
url?: string | Partial<NavigationComponentProps>;
/** If true, the URL is a resource within the application */
isResourceUrl?: boolean;
/** If true, adds copy-to-clipboard functionality */
isCopyToClipboard?: boolean;
/** If true, hides sensitive content */
isHidden?: boolean;
/**
* When true, long text will show an ellipsis
* when it overflows the container and show
* full content in tooltip on hover
* @default false
*/
shouldDisableTextWrap?: boolean;
/** Tooltip content to display */
tooltip?: string | {
label?: string;
value?: string;
};
statusIcon?: IconProps;
/**
* Component to use for navigation links
*/
navigationComponent?: ComponentType<NavigationComponentProps>;
};
/**
* Component to display a single detail row with optional icon, link, copy-to-clipboard, and tooltip.
*
* @example
* ```tsx
* <DetailsContent
* label="Username"
* value="johndoe"
* navigationComponent={NavigationLink}
* />
* ```
*/
declare const ViewDetailsContent: ({ label, value, url, icon, isCopyToClipboard, isHidden, isResourceUrl, statusIcon, tooltip, shouldDisableTextWrap, navigationComponent, }: DetailsContentProps) => import("react/jsx-runtime").JSX.Element;
export { ViewDetailsContent };
export type { IconProps, DetailsContentProps };