react-native-alert-notification
Version:
Toast notification and dialog box notification for react native
443 lines (442 loc) • 12.4 kB
TypeScript
import * as React from 'react';
import { ALERT_TYPE } from '../config';
export declare type IConfigDialog = {
type: ALERT_TYPE;
title?: string;
textBody?: string;
button?: string;
autoClose?: number | boolean;
closeOnOverlayTap?: boolean;
onPressButton?: () => void;
onShow?: () => void;
onHide?: () => void;
};
declare type IProps = {
isDark: boolean;
config?: Pick<IConfigDialog, 'closeOnOverlayTap' | 'autoClose'>;
};
declare type IState = {
styles: ReturnType<typeof __styles>;
overlayClose?: boolean;
visible: boolean;
config?: IConfigDialog;
};
export declare class Dialog extends React.Component<IProps, IState> {
/**
* @type {React.RefObject<Dialog>}
*/
static instance: React.RefObject<Dialog>;
/**
* @param {IConfig} args
*/
static show: (args: IConfigDialog) => void;
/**
*
*/
static hide: () => void;
private _timeout?;
/**
* @type {Animated.Value}
* @private
*/
private readonly _opacity;
/**
* @type {Animated.Value}
* @private
*/
private readonly _positionDialog;
/**
* @type {number}
* @private
*/
private _popupHeight;
/**
* @param {IProps} props
*/
constructor(props: IProps);
/**
* @param {Readonly<IProps>} prevProps
*/
componentDidUpdate: (prevProps: Readonly<IProps>) => void;
/**
* @param {IConfig} config
*/
private _open;
/**
* @return {Promise<void>}
*/
private _close;
/**
* @return {Promise<void>}
*/
private _showModalHandler;
/**
* @param {ACTION} action
* @param opacity
* @return {Promise<void>}
*/
private _startAnimation;
/**
* @return {JSX.Element}
*/
private _buttonRender;
/**
* @return {JSX.Element}
*/
private _OverlayCloseRender;
/**
* @return {JSX.Element}
*/
private _CardRender;
/**
* @return {JSX.Element}
*/
render: () => JSX.Element;
}
declare const __styles: (isDark: boolean) => {
[x: string]: {
backgroundColor: string;
position: "absolute";
left: 0;
right: 0;
top: 0;
bottom: 0;
alignSelf?: undefined;
maxWidth?: undefined;
width?: undefined;
minHeight?: undefined;
borderRadius?: undefined;
paddingHorizontal?: undefined;
paddingTop?: undefined;
paddingBottom?: undefined;
flex?: undefined;
justifyContent?: undefined;
alignItems?: undefined;
overflow?: undefined;
fontWeight?: undefined;
fontSize?: undefined;
color?: undefined;
textAlign?: undefined;
height?: undefined;
marginTop?: undefined;
aspectRatio?: undefined;
tintColor?: undefined;
} | {
alignSelf: "center";
maxWidth: number;
width: string;
minHeight: number;
borderRadius: number;
paddingHorizontal: number;
paddingTop: number;
paddingBottom: number;
position: "absolute";
backgroundColor: string | import("react-native").OpaqueColorValue | undefined;
flex?: undefined;
justifyContent?: undefined;
alignItems?: undefined;
overflow?: undefined;
fontWeight?: undefined;
fontSize?: undefined;
color?: undefined;
textAlign?: undefined;
height?: undefined;
marginTop?: undefined;
aspectRatio?: undefined;
top?: undefined;
tintColor?: undefined;
} | {
flex: number;
justifyContent: "space-evenly";
alignItems: "center";
overflow: "hidden";
alignSelf?: undefined;
maxWidth?: undefined;
width?: undefined;
minHeight?: undefined;
borderRadius?: undefined;
paddingHorizontal?: undefined;
paddingTop?: undefined;
paddingBottom?: undefined;
position?: undefined;
backgroundColor?: undefined;
fontWeight?: undefined;
fontSize?: undefined;
color?: undefined;
textAlign?: undefined;
height?: undefined;
marginTop?: undefined;
aspectRatio?: undefined;
top?: undefined;
tintColor?: undefined;
} | {
alignSelf?: undefined;
maxWidth?: undefined;
width?: undefined;
minHeight?: undefined;
borderRadius?: undefined;
paddingHorizontal?: undefined;
paddingTop?: undefined;
paddingBottom?: undefined;
position?: undefined;
backgroundColor?: undefined;
flex?: undefined;
justifyContent?: undefined;
alignItems?: undefined;
overflow?: undefined;
fontWeight?: undefined;
fontSize?: undefined;
color?: undefined;
textAlign?: undefined;
height?: undefined;
marginTop?: undefined;
aspectRatio?: undefined;
top?: undefined;
tintColor?: undefined;
} | {
fontWeight: "bold";
fontSize: number;
color: string | import("react-native").OpaqueColorValue | undefined;
alignSelf?: undefined;
maxWidth?: undefined;
width?: undefined;
minHeight?: undefined;
borderRadius?: undefined;
paddingHorizontal?: undefined;
paddingTop?: undefined;
paddingBottom?: undefined;
position?: undefined;
backgroundColor?: undefined;
flex?: undefined;
justifyContent?: undefined;
alignItems?: undefined;
overflow?: undefined;
textAlign?: undefined;
height?: undefined;
marginTop?: undefined;
aspectRatio?: undefined;
top?: undefined;
tintColor?: undefined;
} | {
textAlign: "center";
color: string | import("react-native").OpaqueColorValue | undefined;
alignSelf?: undefined;
maxWidth?: undefined;
width?: undefined;
minHeight?: undefined;
borderRadius?: undefined;
paddingHorizontal?: undefined;
paddingTop?: undefined;
paddingBottom?: undefined;
position?: undefined;
backgroundColor?: undefined;
flex?: undefined;
justifyContent?: undefined;
alignItems?: undefined;
overflow?: undefined;
fontWeight?: undefined;
fontSize?: undefined;
height?: undefined;
marginTop?: undefined;
aspectRatio?: undefined;
top?: undefined;
tintColor?: undefined;
} | {
borderRadius: number;
height: number;
width: number;
justifyContent: "center";
alignItems: "center";
alignSelf: "center";
marginTop: number;
maxWidth?: undefined;
minHeight?: undefined;
paddingHorizontal?: undefined;
paddingTop?: undefined;
paddingBottom?: undefined;
position?: undefined;
backgroundColor?: undefined;
flex?: undefined;
overflow?: undefined;
fontWeight?: undefined;
fontSize?: undefined;
color?: undefined;
textAlign?: undefined;
aspectRatio?: undefined;
top?: undefined;
tintColor?: undefined;
} | {
backgroundColor: string | import("react-native").OpaqueColorValue | undefined;
alignSelf?: undefined;
maxWidth?: undefined;
width?: undefined;
minHeight?: undefined;
borderRadius?: undefined;
paddingHorizontal?: undefined;
paddingTop?: undefined;
paddingBottom?: undefined;
position?: undefined;
flex?: undefined;
justifyContent?: undefined;
alignItems?: undefined;
overflow?: undefined;
fontWeight?: undefined;
fontSize?: undefined;
color?: undefined;
textAlign?: undefined;
height?: undefined;
marginTop?: undefined;
aspectRatio?: undefined;
top?: undefined;
tintColor?: undefined;
} | {
position: "absolute";
alignSelf: "center";
justifyContent: "center";
height: number;
width: number;
backgroundColor: string;
borderRadius: number;
marginTop: number;
maxWidth?: undefined;
minHeight?: undefined;
paddingHorizontal?: undefined;
paddingTop?: undefined;
paddingBottom?: undefined;
flex?: undefined;
alignItems?: undefined;
overflow?: undefined;
fontWeight?: undefined;
fontSize?: undefined;
color?: undefined;
textAlign?: undefined;
aspectRatio?: undefined;
top?: undefined;
tintColor?: undefined;
} | {
alignSelf: "center";
width: number;
aspectRatio: number;
position: "absolute";
top: number;
maxWidth?: undefined;
minHeight?: undefined;
borderRadius?: undefined;
paddingHorizontal?: undefined;
paddingTop?: undefined;
paddingBottom?: undefined;
backgroundColor?: undefined;
flex?: undefined;
justifyContent?: undefined;
alignItems?: undefined;
overflow?: undefined;
fontWeight?: undefined;
fontSize?: undefined;
color?: undefined;
textAlign?: undefined;
height?: undefined;
marginTop?: undefined;
tintColor?: undefined;
} | {
tintColor: string | import("react-native").OpaqueColorValue | undefined;
alignSelf?: undefined;
maxWidth?: undefined;
width?: undefined;
minHeight?: undefined;
borderRadius?: undefined;
paddingHorizontal?: undefined;
paddingTop?: undefined;
paddingBottom?: undefined;
position?: undefined;
backgroundColor?: undefined;
flex?: undefined;
justifyContent?: undefined;
alignItems?: undefined;
overflow?: undefined;
fontWeight?: undefined;
fontSize?: undefined;
color?: undefined;
textAlign?: undefined;
height?: undefined;
marginTop?: undefined;
aspectRatio?: undefined;
top?: undefined;
};
backgroundContainer: {
backgroundColor: string;
position: "absolute";
left: 0;
right: 0;
top: 0;
bottom: 0;
};
cardContainer: {
alignSelf: "center";
maxWidth: number;
width: string;
minHeight: number;
borderRadius: number;
paddingHorizontal: number;
paddingTop: number;
paddingBottom: number;
position: "absolute";
backgroundColor: string | import("react-native").OpaqueColorValue | undefined;
};
cardBody: {
flex: number;
justifyContent: "space-evenly";
alignItems: "center";
overflow: "hidden";
};
cardFooter: {};
titleLabel: {
fontWeight: "bold";
fontSize: number;
color: string | import("react-native").OpaqueColorValue | undefined;
};
descLabel: {
textAlign: "center";
color: string | import("react-native").OpaqueColorValue | undefined;
};
button: {
borderRadius: number;
height: number;
width: number;
justifyContent: "center";
alignItems: "center";
alignSelf: "center";
marginTop: number;
};
buttonLabel: {
color: string;
fontWeight: "bold";
fontSize: number;
};
SUCCESS: {
backgroundColor: string | import("react-native").OpaqueColorValue | undefined;
};
DANGER: {
backgroundColor: string | import("react-native").OpaqueColorValue | undefined;
};
WARNING: {
backgroundColor: string | import("react-native").OpaqueColorValue | undefined;
};
backendImage: {
position: "absolute";
alignSelf: "center";
justifyContent: "center";
height: number;
width: number;
backgroundColor: string;
borderRadius: number;
marginTop: number;
};
image: {
alignSelf: "center";
width: number;
aspectRatio: number;
position: "absolute";
top: number;
};
};
export {};