[@types/react-native-popup-dialog] Update for major new version

This commit is contained in:
Paito Anderson
2019-01-24 10:08:56 -05:00
parent d5fe4dcadb
commit 6de70ef31c
2 changed files with 51 additions and 29 deletions
+31 -14
View File
@@ -7,41 +7,52 @@
// TypeScript Version: 2.8
import * as React from 'react';
import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle } from 'react-native';
import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle, View } from 'react-native';
export type AlignTypes = 'left' | 'right' | 'center';
export type OverlayPointerEventTypes = 'auto' | 'none';
export type SlideFromTypes = 'top' | 'bottom' | 'left' | 'right';
export interface DialogContentProps {
style?: StyleProp<ViewStyle>;
}
export interface DialogActionListProps {
bordered?: boolean;
style?: StyleProp<ViewStyle>;
}
export interface DialogButtonProps {
text: string;
align?: AlignTypes;
onPress?: (event: GestureResponderEvent) => void;
buttonStyle?: StyleProp<ViewStyle>;
textStyle?: StyleProp<TextStyle>;
textContainerStyle?: StyleProp<ViewStyle>;
style?: StyleProp<ViewStyle>;
disabled?: boolean;
activeOpacity?: number;
bordered?: boolean;
}
export interface DialogTitleProps {
title: string;
titleStyle?: StyleProp<ViewStyle>;
titleTextStyle?: StyleProp<ViewStyle>;
titleAlign?: AlignTypes;
haveTitleBar?: boolean;
style?: StyleProp<ViewStyle>;
textStyle?: StyleProp<TextStyle>;
align?: AlignTypes;
hasTitleBar?: boolean;
}
export interface OverlayProps {
visible?: boolean;
onPress: (event: GestureResponderEvent) => void;
backgroundColor?: string;
opacity?: number;
animationDuration?: number;
showOverlay?: boolean;
pointerEvents?: string;
useNativeDriver?: boolean;
}
export interface PopupDialogProps {
export interface DialogProps {
dialogTitle?: any;
width?: number;
height?: number;
@@ -49,16 +60,20 @@ export interface PopupDialogProps {
dialogStyle?: StyleProp<ViewStyle>;
containerStyle?: StyleProp<ViewStyle>;
animationDuration?: number;
hasOverlay?: boolean;
overlayPointerEvents?: OverlayPointerEventTypes;
overlayBackgroundColor?: string;
overlayOpacity?: number;
dismissOnTouchOutside?: boolean;
dismissOnHardwareBackPress?: boolean;
haveOverlay?: boolean;
visible?: boolean;
onShown?: () => void;
onDismissed?: () => void;
rounded?: boolean;
onShow?: () => void;
onDismiss?: () => void;
onTouchOutside?: () => void;
onHardwareBackPress?: () => boolean;
actions?: any[];
actionContainerStyle?: StyleProp<ViewStyle>;
actionsBordered?: boolean;
useNativeDriver?: boolean;
}
export class FadeAnimation {
@@ -81,10 +96,12 @@ export class SlideAnimation {
createAnimations(): object;
}
export class DialogContent extends React.Component<DialogContentProps, any> { }
export class DialogActionList extends React.Component<DialogActionListProps, any> { }
export class DialogButton extends React.Component<DialogButtonProps, any> { }
export class DialogTitle extends React.Component<DialogTitleProps, any> { }
export class Overlay extends React.Component<OverlayProps, any> { }
export default class PopupDialog extends React.Component<PopupDialogProps, any> {
export default class Dialog extends React.Component<DialogProps, any> {
show(onShown?: () => void): void;
dismiss(onDismissed?: () => void): void;
}
@@ -1,7 +1,8 @@
import * as React from 'react';
import { StyleSheet, View, Button } from 'react-native';
import PopupDialog, {
import Dialog, {
DialogTitle,
DialogContent,
DialogButton,
SlideAnimation,
ScaleAnimation,
@@ -13,17 +14,17 @@ const scaleAnimation = new ScaleAnimation();
const fadeAnimation = new FadeAnimation({ animationDuration: 150 });
class Test extends React.Component<any> {
fadingPopupDialog: PopupDialog | null;
scalingPopupDialog: PopupDialog | null;
slidingPopupDialog: PopupDialog | null;
fadingPopupDialog: Dialog | null;
scalingPopupDialog: Dialog | null;
slidingPopupDialog: Dialog | null;
showPopupDialog(popupDialog: PopupDialog | null) {
showPopupDialog(popupDialog: Dialog | null) {
if (popupDialog !== null) {
popupDialog.show(() => console.log('show callback'));
}
}
dismissPopupDialog(popupDialog: PopupDialog | null) {
dismissPopupDialog(popupDialog: Dialog | null) {
if (popupDialog !== null) {
popupDialog.dismiss(() => console.log('dismiss callback'));
}
@@ -42,11 +43,11 @@ class Test extends React.Component<any> {
onPress={() => this.showPopupDialog(this.slidingPopupDialog)}
title="Show Sliding Dialog" />
<PopupDialog ref={(popupDialog) => this.fadingPopupDialog = popupDialog}
<Dialog ref={(popupDialog) => this.fadingPopupDialog = popupDialog}
dialogTitle={<DialogTitle title="Popup Dialog - Fade Animation" />}
dialogAnimation={fadeAnimation}
/>
<PopupDialog ref={(popupDialog) => this.scalingPopupDialog = popupDialog}
<Dialog ref={(popupDialog) => this.scalingPopupDialog = popupDialog}
dialogTitle={<DialogTitle title="Popup Dialog - Scale Animation" />}
dialogAnimation={scaleAnimation}
actions={[
@@ -58,7 +59,7 @@ class Test extends React.Component<any> {
/>,
]}
/>
<PopupDialog ref={(popupDialog) => this.slidingPopupDialog = popupDialog}
<Dialog ref={(popupDialog) => this.slidingPopupDialog = popupDialog}
dialogTitle={<DialogTitle title="Popup Dialog - Slide Animation" />}
width={300}
height={300}
@@ -69,13 +70,17 @@ class Test extends React.Component<any> {
overlayPointerEvents='auto'
overlayBackgroundColor='white'
overlayOpacity={0.5}
dismissOnTouchOutside={false}
dismissOnHardwareBackPress={false}
haveOverlay={true}
hasOverlay={true}
visible={true}
onShown={() => { console.log('onShown'); }}
onDismissed={() => { console.log('onDismissed'); }}
/>
onShow={() => { console.log('onShow'); }}
onDismiss={() => { console.log('onDismiss'); }}
onTouchOutside={() => { console.log('onTouchOutside'); }}
onHardwareBackPress={() => true }
>
<DialogContent>
</DialogContent>
></Dialog>
</View>);
}
}