@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
154 lines (153 loc) • 5.88 kB
TypeScript
/**
* Web FormStatus Component
*/
import React from 'react';
import type { GlobalStatusConfigObject } from '../GlobalStatus';
import type { IconIcon, IconSize } from '../Icon';
import type { SkeletonShow } from '../Skeleton';
import type { SpacingProps, SpaceTypeAll } from '../../shared/types';
export type FormStatusText = string | boolean | (() => React.ReactNode) | React.ReactNode;
export type FormStatusState = 'error' | 'warning' | 'information' | 'success' | 'marketing';
export type FormStatusVariant = 'plain' | 'outlined';
export type FormStatusSize = 'default' | 'large';
export type FormStatusAttributes = string | Record<string, unknown>;
export type FormStatusChildren = string | (() => React.ReactNode) | React.ReactNode;
/**
* Shared status-related props used by form components that display a FormStatus.
*/
export type FormStatusBaseProps = {
/**
* Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
*/
status?: FormStatusText;
/**
* Defines the state of the status. Valid states are `error`, `warning`, `information`, `success` and `marketing`. Defaults to `error`.
*/
statusState?: FormStatusState;
/**
* Use an object to define additional FormStatus properties.
*/
statusProps?: FormStatusProps;
/**
* Set to `true` to disable the status animation. Defaults to `false`.
*/
statusNoAnimation?: boolean;
/**
* The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).
*/
globalStatus?: GlobalStatusConfigObject;
};
export type FormStatusProps = {
id?: string;
/**
* The `title` attribute in the status.
*/
title?: string;
label?: React.ReactNode;
/**
* Provide `false` if you want to animate the visibility. Defaults to `true`.
*/
show?: boolean;
/**
* The `text` appears as the status message. Beside plain text, you can send in a React component as well.
*/
text?: FormStatusText;
/**
* The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).
*/
globalStatus?: GlobalStatusConfigObject;
/**
* The `icon` show before the status text. Default: `error`
*/
icon?: IconIcon;
/**
* The icon size of the icon shows. Default: `medium`
*/
iconSize?: IconSize;
/**
* Defines the visual appearance of the status. These are the statuses `error`, `warning`, `information` and `marketing`. The default status is `error`.
*/
state?: FormStatusState;
/**
* As of now, there is the `plain` and the `outlined` variant. Defaults to `plain`.
*/
variant?: FormStatusVariant;
/**
* Defines the appearance size. There are these sizes `default`, `large`. The default status is `default`.
*/
size?: FormStatusSize;
attributes?: FormStatusAttributes;
textId?: string;
widthSelector?: string;
widthElement?: {
current: HTMLElement | null;
} | null;
/**
* NB: Animation is disabled as of now. ~~use `true` to omit the animation on content visibility. Defaults to `false`.~~
*/
noAnimation?: boolean;
/**
* If set to `true`, an overlaying skeleton with animation will be shown.
*/
skeleton?: SkeletonShow;
/**
* If set to `true`, then the FormStatus will be 100% in available `width`. **NB:** Only use this on independent status messages.
*/
stretch?: boolean;
/**
* The `role` attribute for accessibility, defaults to `alert`.
*/
role?: string;
/**
* Use it to set an inner margin. It supports the same properties as [Space](/uilib/layout/space/properties). Useful for animation.
*/
shellSpace?: SpaceTypeAll;
className?: string;
/**
* The `text` appears as the status message. Beside plain text, you can send in a React component as well.
*/
children?: FormStatusChildren;
} & Omit<React.HTMLProps<HTMLElement>, 'ref' | 'label' | 'value' | 'onFocus' | 'onBlur' | 'children' | 'size'> & SpacingProps;
export type ErrorIconProps = React.SVGProps<SVGSVGElement> & {
/**
* The `title` attribute in the status.
*/
title?: string;
state?: FormStatusState;
};
export type WarnIconProps = React.SVGProps<SVGSVGElement> & {
/**
* The `title` attribute in the status.
*/
title?: string;
state?: FormStatusState;
};
export type InfoIconProps = React.SVGProps<SVGSVGElement> & {
/**
* The `title` attribute in the status.
*/
title?: string;
state?: FormStatusState;
};
export type MarketingIconProps = React.SVGProps<SVGSVGElement> & {
/**
* The `title` attribute in the status.
*/
title?: string;
state?: FormStatusState;
};
export type FormStatusIcon = typeof ErrorIcon | typeof WarnIcon | typeof InfoIcon | typeof MarketingIcon;
declare const FormStatus: React.MemoExoticComponent<(props: FormStatusProps & {
ref?: React.Ref<HTMLElement>;
}) => React.ReactNode>;
export default FormStatus;
export declare const ErrorIcon: (props: ErrorIconProps) => import("react/jsx-runtime").JSX.Element;
export declare const WarnIcon: (props: WarnIconProps) => import("react/jsx-runtime").JSX.Element;
export declare const InfoIcon: (props: InfoIconProps) => import("react/jsx-runtime").JSX.Element;
export declare const MarketingIcon: (props: MarketingIconProps) => import("react/jsx-runtime").JSX.Element;
export declare function setMaxWidthToElement({ element, id, widthElement, widthSelector, }: {
element: HTMLElement;
id?: string | null;
widthElement?: HTMLElement | null;
widthSelector?: string | null;
}): void;