@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.
136 lines (135 loc) • 4.49 kB
TypeScript
import * as React from 'react';
import { IPermissionLevel, IShareUser } from './model';
import { IAccessManager } from './components/AccessManagement/AccessManager';
import { IOrgShare } from './components/OrgShare/OrgShare';
import { DialogProps } from '../Dialog';
export type IInviteConfig = {
/**
* List the available users that in the email autocomplete dropdown.
*
*```
* export type IShareUser = {
* id: string;
* firstName: string;
* lastName: string;
* email: string;
* avatar: string;
* backgroundColor?: string;
* textColor?: string;
* disabled?: boolean;
* permissionLevels?: IPermissionLevel[];
* permissionLevel?: string;
* permissionEditable?: boolean;
* };
* ```
* @default []
*/
availableUsers?: ReadonlyArray<IShareUser>;
/**
* If true, the email autocomplete component is in a loading state.
*
* @default false
*/
loading?: boolean;
/**
* Callback function triggered when the email input changes.
*/
onSearch?: (keyword: string) => void;
/**
* Callback function triggered when the Invite button is pressed.
*/
onInvite: (emails: string[], permission: string, commentMessage?: string) => void;
/**
* List of permissions that will be available in the permissions selection dropdown for invite panel.
*
* ```
* export type IPermissionLevel = {
* value: string;
* label: string;
* };
* ```
* @default `[{ value: 'readOnly', label: 'Viewer' }, { value: 'readWrite', label: 'Editor' }]`
*/
permissionLevels?: ReadonlyArray<IPermissionLevel>;
/**
* The default role to use in the invitation dropdown.
*/
initialPermissionLevel?: string;
/**
* If true, the role selector for invitees will be editable.
*/
canEditInvitePermission?: boolean;
/**
* If false, the Invite button will be disabled.
*/
canInvite?: boolean;
/**
* Optional informational message that will appear below the invitees input field.
*/
inviteMessage?: string;
/**
* Maximum number of emails/recipients allowed
* @default undefined (no limitation)
*/
emailLimit?: number;
/**
* If true, an input that is used to add an comment to the invited user will be shown.
* @default false
*/
showComment?: boolean;
/**
* A callback for invitation permission change
*/
onPermissionChange?: (permission: string) => void;
};
export type IShareDialog = Omit<DialogProps, 'leftActions' | 'rightActions'> & IOrgShare & Omit<IAccessManager, 'extraActions'> & {
/**
* Configuration options for the invitation section of the dialog.
*
* ```
* export type IInviteConfig = {
* availableUsers?: ReadonlyArray<IShareUser>;
* loading?: boolean;
* onSearch?: (keyword: string) => void;
* onInvite: (emails: string[], permission: string, commentMessage?: string) => void;
* permissionLevels?: IPermissionLevel[];
* initialPermissionLevel?: string;
* canEditInvitePermission?: boolean;
* inviteMessage?: string;
* emailLimit?: number;
* showComment?: boolean;
* onPermissionChange?: (permission: string) => void;
* };
* ```
*/
inviteConfig: IInviteConfig;
/**
* If true, a spinner will appear and block interaction with the rest of the dialog.
*
* @default false
*/
loading?: boolean;
/**
* The text to show below the loading spinner for additional context.
*/
loadingMessage?: string;
/**
* The shareable URL for the current page/project/resource, etc. If a value is specified, a 'Copy Link' button will be visible in the 'rightActions' of the footer.
*/
shareURL?: string;
/**
* The share dialog title.
*/
title?: string;
/**
* Actions / buttons to render on the left side of the ShareDialog footer.
* @default []
*/
leftActions?: DialogProps['leftActions'];
/**
* Actions / buttons to render on the right side of the ShareDialog footer. Any actions passed will override the default actions.
* @default 'Close' and 'Copy link' buttons shown at desktop resolution
*/
rightActions?: DialogProps['rightActions'];
};
export declare const ShareDialogContainer: React.FC<IShareDialog>;