UNPKG

@payla-io/mantine-ui-accelerate

Version:

Collection of mantine ui components to help you accelerate your development

688 lines (631 loc) 25.4 kB
import * as react_jsx_runtime from 'react/jsx-runtime'; import { UseFormReturnType } from '@mantine/form'; import * as React$1 from 'react'; import React__default, { FC } from 'react'; import * as _mantine_core from '@mantine/core'; import { StackProps, GridColProps, Stack, Box, Button, ButtonProps, TextInputProps, Flex, RangeSliderProps, Text, SelectProps, TextareaProps, TableProps, TextProps, TableTheadProps, SkeletonProps, Card, AnchorProps, DrawerProps, Title, ImageProps, DividerProps, FlexProps, TitleProps, CardProps, BoxProps, Menu, ScrollAreaProps, NavLinkProps, PopoverProps, PopoverDropdownProps, GroupProps, TimelineItemProps, TimelineProps } from '@mantine/core'; import { DatePickerProps, DatePickerType } from '@mantine/dates'; import { PhoneInputProps } from 'react-phone-input-2'; import { Props } from 'react-infinite-scroll-component'; declare function isValidUrl(value: string): boolean; declare const isValidHttpUrl: (value: string) => boolean; declare const conditionValidator: { [key: string]: any; }; type ILogic = "and" | "or"; interface ICondition { formName: string; logic?: ILogic; method: string; value?: any; options?: IOption[]; failedMessage?: string; getCurrentValue?: () => any; validate?: (value: unknown, values: Record<string, unknown>) => any; } declare const validateConditions: (conditions: ICondition[], values: Record<string, unknown>) => { isValid: boolean; failed: string[]; }; interface CFieldInputProps { name: string; align?: string; helpText?: string; infoText?: React.ReactNode; label?: string; description?: string; inputType: string; inputProps?: any; hidden?: boolean; visibilityConditions?: ICondition[]; valueConditions?: ICondition[]; formInstance?: UseFormReturnType<Record<string, unknown>, (values: Record<string, unknown>) => Record<string, unknown>>; containerProps?: StackProps; } declare function CFieldInput(props: Readonly<CFieldInputProps>): react_jsx_runtime.JSX.Element; interface IScreenSize { xs?: number; sm?: number; md?: number; lg?: number; xl?: number; base?: number; } interface IOption { label: string; value: string | number; } interface ICFormField extends CFieldInputProps { initialValue?: | sting | number | string[] | number[] | Date | Date[] | undefined | IOption | IOption[] | null; span?: GridColProps["span"]; validate?: (value: unknown, values: Record<string, unknown>) => any; } interface CFormProps { data: ICFormField[]; gutter?: string; grow?: boolean; noFormTag?: boolean; currentIndex?: number; singleQuestion?: boolean; validationRule?: { [key: string]: (value: unknown, values: Record<string, unknown>) => any; }; hideSubmit?: boolean; submitComponent?: React__default.ReactNode; getSubmitComponent?: (formInstance: UseFormReturnType<Record<string, unknown>>) => React__default.ReactNode; submitLabel?: string; continueLabel?: string; skipLabel?: string; fixedFooter?: boolean; disableBack?: boolean; onSubmit?: (values: { [key: string]: ICFormField["initialValue"]; }) => void; onContinue?: () => void; formContainerProps?: React__default.ComponentProps<typeof Stack>; footerContainerProps?: React__default.ComponentProps<typeof Box>; footerContainerWrapperProps?: React__default.ComponentProps<typeof Box>; submitButtonContainerProps?: React__default.ComponentProps<typeof Box>; submitButtonProps?: React__default.ComponentProps<typeof Button>; backButtonProps?: React__default.ComponentProps<typeof Button>; fullHeight?: boolean; isPending?: boolean; noFooter?: boolean; errorMessages?: Record<string, string>; refreshSeed?: number; setFormInstance?: (formInstance: UseFormReturnType<Record<string, unknown>, (values: Record<string, unknown>) => Record<string, unknown>>) => void; onValueChange?: (values: { [key: string]: ICFormField["initialValue"]; }) => void; onCurrentIndexChange?: (currentIndex: number) => void; inputFieldContainerProps?: StackProps; } declare function CForm(props: Readonly<CFormProps>): react_jsx_runtime.JSX.Element; interface CDropzoneProps { form: UseFormReturnType<Record<string, unknown>, (values: Record<string, unknown>) => Record<string, unknown>>; fileTypes: string[]; name: string; error?: string | null; setError: (error: string | null) => void; show?: boolean; fileSizeInfo?: string; userInstructions?: string; maxSize?: number; fileSizeError?: string; fileFormatError?: string; placeholder?: string; noBase64?: boolean; getDisplayInfo?: () => React__default.ReactNode; } type RefType = () => void | undefined; declare const CDropzone: React__default.ForwardRefExoticComponent<CDropzoneProps & React__default.RefAttributes<RefType>>; declare const MIME_TYPE_MAP: { audio: string[]; video: string[]; file: "application/pdf"[]; image: ("image/png" | "image/jpeg" | "image/svg+xml" | "image/gif")[]; all: string[]; }; interface CFileUploadProps { fileTypes?: string[]; name: string; form: UseFormReturnType<Record<string, unknown>, (values: Record<string, unknown>) => Record<string, unknown>>; dropzoneProps?: CDropzoneProps; getDisplayInfo?: () => React__default.ReactNode; componentType?: string; } declare const CFileUpload: ({ fileTypes, name, form, dropzoneProps, getDisplayInfo, componentType, }: CFileUploadProps) => react_jsx_runtime.JSX.Element; interface CUploadedFileProps { handleRemoveImage: () => void; componentType: string; file: any; openSelect: () => void | null; label?: string | null; error?: string | null; changeButtonLabel?: string; removeButtonLabel?: string; } declare const CUploadedFile: FC<CUploadedFileProps>; interface CButtonProps extends ButtonProps { inputProps: any; label: string; } declare function CButton(props: Readonly<CButtonProps>): react_jsx_runtime.JSX.Element; interface CDateInputPickerProps extends TextInputProps { mask?: string; pickerProps?: DatePickerProps<DatePickerType>; form: any; name: string; maskSeparator?: string; formatDate?: (date: string) => string; } declare const parseMaskedDate: (dateString: string, partSplit: string) => Date; declare function CDateInputPicker(props: Readonly<CDateInputPickerProps>): react_jsx_runtime.JSX.Element; interface CFormFooterProps { singleQuestion?: boolean; currentIndex: number; data: ICFormField; totalQuestions: number; formInstance: UseFormReturnType<Record<string, unknown>, (values: Record<string, unknown>) => Record<string, unknown>>; isPending?: boolean; backLabel?: string; submitLabel?: string; continueLabel?: string; skipLabel?: string; disableBack?: boolean; containerProps?: React__default.ComponentProps<typeof Flex>; backButtonProps?: React__default.ComponentProps<typeof Button>; submitButtonProps?: React__default.ComponentProps<typeof Button>; submitButtonContainerProps?: React__default.ComponentProps<typeof Flex>; skipButtonProps?: React__default.ComponentProps<typeof Button>; handleContinue: () => void; handleBack: () => void; } declare function CFormFooter(props: Readonly<CFormFooterProps>): react_jsx_runtime.JSX.Element; interface CLocationInputProps { form: any; value: Record<string, unknown>; name: string; noFooter?: boolean; } declare function CLocationInput(props: Readonly<CLocationInputProps>): react_jsx_runtime.JSX.Element; declare function CPhoneInput(props: Readonly<PhoneInputProps>): react_jsx_runtime.JSX.Element; interface CRangeSliderProps extends RangeSliderProps { label?: string; description?: string; labelProps?: React__default.ComponentProps<typeof Text>; descriptionProps?: React__default.ComponentProps<typeof Text>; } declare function CRangeSlider(props: Readonly<CRangeSliderProps>): react_jsx_runtime.JSX.Element; interface CSearchInputProps { value?: string; onChange?: (value: string) => void; onClick?: () => void; inputProps?: TextInputProps; } declare function CSearchInput(props: Readonly<CSearchInputProps>): react_jsx_runtime.JSX.Element; interface CSelectProps extends SelectProps { form: any; name: string; } declare function CSelect(props: Readonly<CSelectProps>): react_jsx_runtime.JSX.Element; declare function CTextArea(props: Readonly<TextareaProps>): react_jsx_runtime.JSX.Element; interface CTextInputProps extends TextInputProps { mask?: string; } declare function CTextInput(props: Readonly<CTextInputProps>): react_jsx_runtime.JSX.Element; declare enum IOrderByDirection { asc = "asc", desc = "desc" } interface IOrderBy<T> { column: CTableDataColumn<T>; direction: IOrderByDirection; } interface CDataSortingProps<T> { onChange?: (column: CTableDataColumn<T>, direction: IOrderByDirection) => void; column: CTableDataColumn<T>; orderBy: IOrderBy<T> | undefined; descIndicator?: React.ReactNode; ascIndicator?: React.ReactNode; } declare function CDataSort<T>({ column, orderBy, descIndicator, ascIndicator, onChange, }: Readonly<CDataSortingProps<T>>): react_jsx_runtime.JSX.Element | null; interface CNavigationsLink { label: string; icon?: JSX.Element; href?: string; to?: string; onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void; hidden?: boolean; children?: CNavigationsLink[]; isActive?: () => boolean; } interface CDataFilterProps { options?: IOption[]; selectedOptions?: IOption[]; onChange?: (options: IOption[]) => void; renderLabel?: (option: IOption) => React.ReactNode; } interface CTableDataFilterProps<T> extends CDataFilterProps { valueField?: string; labelField?: string; getLabel?: (item: T) => string; getValue?: (item: T) => string; onSelect?: (fieldName: string, option: IOption[]) => void; } interface CTableDataColumn<T> { fieldName?: string; label: React__default.ReactNode; renderValue?: (item: T) => React__default.ReactNode; getValue?: (item: T) => string; filter?: CTableDataFilterProps<T>; sorting?: string | boolean; hidden?: boolean; } interface CIKeyValue { [key: string]: string; } interface CTableDataProps<T> { data: T[]; searchTerm?: string; columns: CTableDataColumn<T>[]; paginationSize?: number; dataCount?: number; currentPage?: number; onPaginationChange?: (page: number) => void; getFilterValue?: (item: T, filterName: string) => string; onRowClick?: ( item: T, event: React__default.MouseEvent<HTMLTableRowElement, MouseEvent>, ) => void; tableProps?: TableProps; labelProps?: TextProps; flagSelectedRow?: boolean; selectedRowColor?: string; isItemSelected?: (item: T, selectedItem: T) => boolean; loading?: boolean; noRecordText?: string; enablePageJump?: boolean; enableColumnVisibility?: boolean; defaultOrderBy?: IOrderBy<T>; jumpToPageLabel?: string; enableRowPointer?: boolean; singleRowToggle?: boolean; getCollapsibleContent?: (item: T) => React__default.ReactNode; handleSortChange?: ( column: CTableDataColumn<T>, direction: IOrderByDirection, ) => void; decSortIndicator?: React__default.ReactNode; ascSortIndicator?: React__default.ReactNode; theadProps?: TableTheadProps; withHeaderBorderBottom?: boolean; } declare const CTableData: <T extends object>(props: CTableDataProps<T>) => react_jsx_runtime.JSX.Element; declare function CDataFilter(props: Readonly<CDataFilterProps>): react_jsx_runtime.JSX.Element; interface CInfiniteScrollTableProps<T extends object> extends CTableDataProps<T> { loadMore?: () => void; hasNextPage?: boolean; infiniteScrollProps?: Props; } declare const CInfiniteScrollTable: <T extends object>(props: CInfiniteScrollTableProps<T>) => react_jsx_runtime.JSX.Element; interface SkeletonRowProps { count?: number; skeletonProps?: SkeletonProps; containerProps?: StackProps; } declare function CSkeletonRow(props: Readonly<SkeletonRowProps>): react_jsx_runtime.JSX.Element; interface CCopyButtonProps { value: string; copiedColor?: string; copyColor?: string; copiedText: string; copyText: string; } declare function CCopyButton(props: Readonly<CCopyButtonProps>): react_jsx_runtime.JSX.Element; interface CDetailAccordionCardProps { title: string; headerRight?: React__default.ReactNode; children: React__default.ReactNode; cardProps?: React__default.ComponentProps<typeof Card>; closeByDefault?: boolean; } declare function CDetailAccordionCard(props: Readonly<CDetailAccordionCardProps>): react_jsx_runtime.JSX.Element; interface CDrawerProps { anchorProps?: AnchorProps; anchorLabel: string | React__default.ReactNode; drawerProps?: Partial<DrawerProps>; bg?: string; title?: DrawerProps["title"]; children: React__default.ReactNode; getHeader?: (close: () => void) => React__default.ReactNode; } declare function CDrawer(props: Readonly<CDrawerProps>): react_jsx_runtime.JSX.Element; interface IFilterItem { name: string; label: TextInputProps["label"]; value?: ICFormField["initialValue"]; inputType?: ICFormField["inputType"]; } interface IUseFilters { formatDate?: (date: Date) => string; getSelected: () => Record<string, IFilterItem>; setSelected: (selected: Record<string, IFilterItem>) => void; } declare const useFilters: ({ formatDate, setSelected, getSelected, }: IUseFilters) => { selected: Record<string, IFilterItem>; setSelectedFilter: (name: string, filter: IFilterItem) => void; setSelectedFilters: (filters: Record<string, IFilterItem>) => void; refreshFilters: () => void; getFilters: () => { [key: string]: string; }; getFilterItems: (filter: IFilterItem, rangeFields?: string[], getFilterLabel?: (name: string, value: string) => string) => { label: any; onClose: () => void; }[]; }; interface CSearchFilterHeaderProps { title?: string; titleProps?: React__default.ComponentProps<typeof Title>; searchProps?: CSearchInputProps; hideSearch?: boolean; hideFilter?: boolean; rightSection?: React__default.ReactNode; drawerTrigger?: React__default.ReactNode | string; formProps?: CFormProps; onFormSubmit?: CFormProps["onSubmit"]; drawerTitle?: DrawerProps["title"]; drawerTitleProps?: React__default.ComponentProps<typeof Title>; drawerColor?: string; drawerBackgroundColor?: string; enableRefresh?: boolean; rangeFields?: string[]; getFilterLabel?: (name: string, value: string) => string; getStateFilters: () => Record<string, IFilterItem>; setStateFilters: (filters: Record<string, IFilterItem>) => void; formatDate?: (date: Date) => string; updateFilterOnlyOnSubmit?: boolean; refreshSeed?: number; } declare function CSearchFilterHeader(props: Readonly<CSearchFilterHeaderProps>): react_jsx_runtime.JSX.Element; interface ClosableBadgeProps { color?: string; label: string; onClose?: () => void; } declare function ClosableBadge(props: Readonly<ClosableBadgeProps>): react_jsx_runtime.JSX.Element; interface CFilterOptionsProps { label: TextInputProps["label"]; items: ClosableBadgeProps[]; } declare function CFilterOptions(props: Readonly<CFilterOptionsProps>): react_jsx_runtime.JSX.Element; interface CIconProps { src: string; size?: number; imageProps?: ImageProps; } declare function CIcon(props: Readonly<CIconProps>): react_jsx_runtime.JSX.Element; interface CItemProps { imageProps?: ImageProps; label?: string; labelProps?: TextProps; icon?: React__default.ReactNode; vertical?: boolean; reverse?: boolean; divider?: boolean; dividerProps?: DividerProps; itemComponent?: React__default.ElementType; data?: any; value?: string | React__default.ReactNode; valueProps?: TextProps; containerProps?: FlexProps; onClick?: (item: CItemProps) => void; renderItem?: (item?: CItemProps) => React__default.ReactNode; } declare function CItem(props: Readonly<CItemProps>): react_jsx_runtime.JSX.Element; interface CItemListProps { items: CItemProps[]; defaultItemProps?: Partial<CItemProps>; gap?: string; align?: string; justify?: string; wrap?: FlexProps["wrap"]; horizontal?: boolean; reverse?: boolean; } declare function CItemList(props: Readonly<CItemListProps>): react_jsx_runtime.JSX.Element; interface CItemListSectionProps { title?: string; titleProps?: TitleProps; cardProps?: CardProps; itemListProps: CItemListProps; containerProps?: BoxProps; } declare function CItemListSection(props: Readonly<CItemListSectionProps>): react_jsx_runtime.JSX.Element; interface CLinkItem { label: string; href?: string; onClick?: () => void; style?: React__default.CSSProperties; } interface CLinkListProps { items: CLinkItem[]; style?: React__default.CSSProperties; containerProps?: React__default.ComponentProps<typeof Flex>; } declare function CLinkList(props: Readonly<CLinkListProps>): react_jsx_runtime.JSX.Element; interface CMenuItem { label: string; icon?: React__default.ReactNode; onClick?: (item: CMenuItem) => void; hidden?: boolean; } interface CMenuData { label?: string; hidden?: boolean; dividerAfter?: boolean; items?: CMenuItem[]; } interface CMenuProps { data: CMenuData[]; target?: React__default.ReactNode; getTarget?: (item: CMenuItem | undefined) => React__default.ReactNode; targetLabel?: string; menuProps?: React__default.ComponentProps<typeof Menu>; } declare function CMenu(props: Readonly<CMenuProps>): react_jsx_runtime.JSX.Element; interface CNavigationsProps { setMinimisedNav?: (minimised: boolean) => void; minimisedNav?: boolean; links: CNavigationsLink[]; component?: any; scrollAreaProps?: ScrollAreaProps; } declare function CNavigations(props: Readonly<CNavigationsProps>): react_jsx_runtime.JSX.Element; interface CNavlinkProps extends NavLinkProps { minimised?: boolean; disableTooltip?: boolean; component?: any; links?: CNavigationsLink[]; } declare const CNavLink: (<C = "a">(props: _mantine_core.PolymorphicComponentProps<C, CNavlinkProps>) => React.ReactElement) & Omit<React$1.FunctionComponent<(CNavlinkProps & { component?: any; } & Omit<Omit<any, "ref">, keyof CNavlinkProps> & { ref?: any; renderRoot?: (props: any) => any; }) | (CNavlinkProps & { component: React.ElementType; renderRoot?: (props: Record<string, any>) => any; })>, never> & Record<string, never>; interface CPopoverOptionsProps { selectedOptions?: any[]; trigger?: React__default.ReactNode; triggerSelected?: React__default.ReactNode; maxHeight?: number; options: any[]; renderItem?: (option: any, onSelect: (option: any) => void, isSelected: boolean) => React__default.ReactNode; getValue?: (option: any) => string; getLabel?: (option: any) => string; onChange?: (selected: any[]) => void; popoverProps?: PopoverProps; dropdownProps?: PopoverDropdownProps; title?: string; } declare function CPopoverOptions(props: Readonly<CPopoverOptionsProps>): react_jsx_runtime.JSX.Element; interface CCopyValueProps { containerProps?: GroupProps; copyProps: CCopyButtonProps; children: React.ReactNode; } declare const CCopyValue: (props: CCopyValueProps) => react_jsx_runtime.JSX.Element; interface CConfirmModaProps { message: string; confirmButtonLabel: string; confirmButtonProps?: ButtonProps; cancelButtonLabel: string; cancelButtonProps?: ButtonProps; buttonLabel?: string | React.ReactNode; buttonProps?: ButtonProps; opened?: boolean; formData?: CFormProps["data"]; onConfirm: (data?: any) => void; onCancel?: () => void; } declare const CConfirmModal: (props: CConfirmModaProps) => react_jsx_runtime.JSX.Element; interface CDetailTableRow { fieldName?: string; label?: string; renderValue?: (data: never) => React__default.ReactNode | string | number | undefined; renderLabel?: (data?: never) => React__default.ReactNode | string | number | undefined; } interface CDetailTableProps { tableProps?: TableProps; rows: CDetailTableRow[]; data: never; renderValue?: (data: never) => React__default.ReactNode | string | number | undefined; } declare const CDetailTable: (props: CDetailTableProps) => react_jsx_runtime.JSX.Element; interface State { hasError: boolean; } interface CErrorBoundaryProps { fallback: React__default.ReactNode; children: React__default.ReactNode; degug?: boolean; onError?: (error: Error, info: React__default.ErrorInfo) => void; } declare class CErrorBoundary extends React__default.Component<CErrorBoundaryProps, State> { constructor(props: CErrorBoundaryProps); static getDerivedStateFromError(): { hasError: boolean; }; componentDidCatch(error: Error, info: React__default.ErrorInfo): void; render(): React__default.ReactNode; } interface CFullScreenLoaderProps { loading?: boolean; } declare function CFullScreenLoader(props: Readonly<CFullScreenLoaderProps>): react_jsx_runtime.JSX.Element | null; interface CTimelineItemProps { title?: string; description?: string; author?: string; time?: string; data?: any; icon?: React__default.ReactNode; itemProps?: TimelineItemProps; renderItem?: (item: CTimelineItemProps) => React__default.ReactNode; } interface CTimelineProps { renderItem?: (item: CTimelineItemProps) => React__default.ReactNode; items: CTimelineItemProps[]; timelineProps?: TimelineProps; } declare const CTimeline: (props: CTimelineProps) => react_jsx_runtime.JSX.Element; declare const usePermissions: ({ permissionList, profile, }: { permissionList: string[]; profile: any; }) => { hasAll: () => boolean; hasAny: () => boolean; breakdown: any[]; }; interface UseUniqueOptionsProps { data: any[]; valueField?: string; labelField?: string; } declare const useUniqueOptions: ({ data, valueField, labelField, }: UseUniqueOptionsProps) => { getUniqueOptions: (valueField?: string, labelField?: string, getFilterValue?: (item: any, field: string) => string) => any[]; getUniqueOptionsByMethod: (getValue: (item: any) => string, getLabel: (item: any) => string) => any[]; options: any[]; }; interface OpenConfirmModalPayload { title: string; children: React__default.ReactNode; labels: { confirm: string; cancel: string; }; onCancel: () => void; onConfirm: () => void; } declare const openConfirmModal: (payload: OpenConfirmModalPayload) => string; declare function getFormattedIban(iban?: string): string; declare const fileToBase64: (file: File) => Promise<string | null>; declare function currencySymbolForCode(currencyCode: string): string; declare function convertNumberToMonetaryValue(value: number, minimumFractionDigits?: number, locales?: string): string; declare const displayCurrency: (value: number, symbol?: string) => string; declare function parseJwt(token: string): any; export { CButton, type CConfirmModaProps, CConfirmModal, CCopyButton, type CCopyButtonProps, CCopyValue, type CCopyValueProps, CDataFilter, type CDataFilterProps, CDataSort, type CDataSortingProps, CDateInputPicker, CDetailAccordionCard, type CDetailAccordionCardProps, CDetailTable, type CDetailTableProps, type CDetailTableRow, CDrawer, type CDrawerProps, CDropzone, type CDropzoneProps, CErrorBoundary, type CErrorBoundaryProps, CFieldInput, type CFieldInputProps, CFileUpload, type CFileUploadProps, CFilterOptions, type CFilterOptionsProps, CForm, CFormFooter, type CFormFooterProps, type CFormProps, CFullScreenLoader, type CFullScreenLoaderProps, type CIKeyValue, CIcon, type CIconProps, CInfiniteScrollTable, type CInfiniteScrollTableProps, CItem, CItemList, type CItemListProps, CItemListSection, type CItemListSectionProps, type CItemProps, type CLinkItem, CLinkList, type CLinkListProps, CLocationInput, type CLocationInputProps, CMenu, type CMenuData, type CMenuItem, type CMenuProps, CNavLink, CNavigations, type CNavigationsLink, type CNavigationsProps, type CNavlinkProps, CPhoneInput, CPopoverOptions, type CPopoverOptionsProps, CRangeSlider, type CRangeSliderProps, CSearchFilterHeader, type CSearchFilterHeaderProps, CSearchInput, type CSearchInputProps, CSelect, type CSelectProps, CSkeletonRow, CTableData, type CTableDataColumn, type CTableDataFilterProps, type CTableDataProps, CTextArea, CTextInput, type CTextInputProps, CTimeline, type CTimelineItemProps, type CTimelineProps, CUploadedFile, type CUploadedFileProps, ClosableBadge, type ClosableBadgeProps, type ICFormField, type ICondition, type IFilterItem, type IOption, type IOrderBy, IOrderByDirection, type IScreenSize, MIME_TYPE_MAP, type OpenConfirmModalPayload, type SkeletonRowProps, conditionValidator, convertNumberToMonetaryValue, currencySymbolForCode, displayCurrency, fileToBase64, getFormattedIban, isValidHttpUrl, isValidUrl, openConfirmModal, parseJwt, parseMaskedDate, useFilters, usePermissions, useUniqueOptions, validateConditions };