lark-cms
Version:
Multi terminal CMS component library
218 lines (217 loc) • 8.41 kB
TypeScript
import React, { Component } from "react";
import PropTypes from "prop-types";
/**
* Translates string positions like "top", "bottom" and "center" to style classes
*/
export declare function positionStyle(style: any, position: any): any[];
/**
* Global function to handle show messages that can be called anywhere in your app
* Pass some `message` object as first attribute to display flash messages in your app
*
* ```
* showMessage({ message: "Contact sent", description "Your message was sent with success", type: "success" })
* ```
*/
export declare function showMessage(...args: any[]): void;
/**
* Global function to programmatically hide messages that can be called anywhere in your app
*
* ```
* hideMessage()
* ```
*/
export declare function hideMessage(...args: any[]): void;
/**
* Default transition config for FlashMessage component
* You can create your own transition config with interpolation, just remember to return some style object with transform options
*/
export declare function FlashMessageTransition(animValue: any, position?: string): {
transform: {
translateY: any;
}[];
opacity: any;
} | {
opacity: any;
transform?: undefined;
};
export declare function renderFlashMessageIcon(icon?: string, style?: {}, iconProps?: {}): React.JSX.Element | null;
/**
* Default MessageComponent used in FlashMessage
* This component it's wrapped in `FlashMessageWrapper` to handle orientation change and extra inset padding in special devices
* For most of uses this component doesn't need to be change for custom versions, cause it's very customizable
*/
export declare const DefaultFlash: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
/**
* Main component of this package
* The FlashMessage component it's a global utility to help you with easily and highly customizable flashbars, top notifications or alerts (with iPhone X "notch" support)
* You can instace and use this component once in your main app screen
* To global use, please add your <FlasshMessage /> as a last component in your root main screen
*
* ```
* <View style={{ flex: 1 }}>
* <YourMainApp />
* <FlasshMessage /> <--- here as last component
* <View>
* ```
*/
export default class FlashMessage extends Component {
static defaultProps: {
/**
* Use to handle if the instance can be registed as default/global instance
*/
canRegisterAsDefault: boolean;
/**
* Controls if the flash message can be closed on press
*/
hideOnPress: boolean;
/**
* `onPress` callback for flash message press
*/
onPress: () => void;
/**
* `onLongPress` callback for flash message long press
*/
onLongPress: () => void;
/**
* Controls if the flash message will be shown with animation or not
*/
animated: boolean;
/**
* Animations duration/speed
*/
animationDuration: number;
/**
* Controls if the flash message can hide itself after some `duration` time
*/
autoHide: boolean;
/**
* How many milliseconds the flash message will be shown if the `autoHide` it's true
*/
duration: number;
/**
* Controls if the flash message will auto hide the native status bar
* Note: Works OK in iOS, not all Android versions support this.
*/
hideStatusBar: boolean;
/**
* Custom status bar height size prop to sum in message padding top
*/
statusBarHeight: null;
/**
* The `floating` prop unstick the message from the edges and applying some border radius to component
*/
floating: boolean;
/**
* The `position` prop set the position of a flash message
* Expected options: "top" (default), "bottom", "center" or a custom object with { top, left, right, bottom } position
*/
position: string;
/**
* The `render` prop will render JSX before the title of a flash message
* Expects a function that returns JSX
*/
renderBeforeContent: null;
/**
* The `render` prop will render JSX below the title of a flash message
* Expects a function that returns JSX
*/
renderCustomContent: null;
/**
* The `render` prop will render JSX after the title (or description) of a flash message
* Expects a function that returns JSX
*/
renderAfterContent: null;
/**
* The `icon` prop set the graphical icon of a flash message
* Expected options: "none" (default), "auto" (guided by `type`), "success", "info", "warning", "danger" or a custom object with icon type/name and position (left or right) attributes, e.g.: { icon: "success", position: "right" }
*/
icon: string;
/**
* The `renderFlashMessageIcon` prop set a custom render function for inside message icons
*/
renderFlashMessageIcon: typeof renderFlashMessageIcon;
/**
* The `transitionConfig` prop set the transition config function used in shown/hide anim interpolations
*/
transitionConfig: typeof FlashMessageTransition;
/**
* The `MessageComponent` prop set the default flash message render component used to show all the messages
*/
MessageComponent: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
};
static propTypes: {
canRegisterAsDefault: PropTypes.Requireable<boolean>;
hideOnPress: PropTypes.Requireable<boolean>;
onShow: PropTypes.Requireable<(...args: any[]) => any>;
onHide: PropTypes.Requireable<(...args: any[]) => any>;
onPress: PropTypes.Requireable<(...args: any[]) => any>;
onLongPress: PropTypes.Requireable<(...args: any[]) => any>;
animated: PropTypes.Requireable<boolean>;
animationDuration: PropTypes.Requireable<number>;
duration: PropTypes.Requireable<number>;
autoHide: PropTypes.Requireable<boolean>;
hideStatusBar: PropTypes.Requireable<boolean>;
floating: PropTypes.Requireable<boolean>;
position: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
renderBeforeContent: PropTypes.Requireable<(...args: any[]) => any>;
renderCustomContent: PropTypes.Requireable<(...args: any[]) => any>;
renderAfterContent: PropTypes.Requireable<(...args: any[]) => any>;
icon: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
renderFlashMessageIcon: PropTypes.Requireable<(...args: any[]) => any>;
transitionConfig: PropTypes.Requireable<(...args: any[]) => any>;
};
/**
* Your can customize the default ColorTheme of this component
* Use `setColorTheme` static method to override the primary colors/types of flash messages
*/
static ColorTheme: {
success: string;
info: string;
warning: string;
danger: string;
};
static setColorTheme: (theme: any) => void;
constructor(props: any);
componentDidMount(): void;
componentWillUnmount(): void;
/**
* Non-public method
*/
prop(message: any, prop: any): any;
/**
* Non-public method
*/
isAnimated(message: any): any;
/**
* Non-public method
*/
pressMessage(event: any): void;
/**
* Non-public method
*/
longPressMessage(event: any): void;
/**
* Non-public method
*/
toggleVisibility(visible: boolean | undefined, animated: boolean | undefined, done: any): void;
/**
* Instace ref function to handle show messages
* Pass some `message` object as first attribute to display a flash message
*
* ```
* this.refs.YOUR_REF.showMessage({ message: "Contact sent", description "Your message was sent with success", type: "success" })
* ```
*/
showMessage(message: any, description?: null, type?: string): void;
/**
* Instace ref function to programmatically hide message
*
* ```
* this.refs.YOUR_REF.hideMessage()
* ```
*/
hideMessage(): void;
render(): React.JSX.Element;
_hideTimeout: any;
_id: string;
}