Skip to content

Commit 129e053

Browse files
M-i-k-e-lM-i-k-e-l
authored
Dialog - migrate to typescript (and some fixes) (#930)
* Rename DialogDismissibleView from .js to .tsx * Migrate DialogDismissibleView to typescript * Rename dialog/index from .js to .tsx * Migrate Dialog to typescript
1 parent b1a11cf commit 129e053

File tree

10 files changed

+262
-119
lines changed

10 files changed

+262
-119
lines changed

‎generatedTypes/components/dialog/DialogDismissibleView.d.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import { StyleProp, ViewStyle } from 'react-native';
3+
import { PanningDirections } from '../panningViews/panningProvider';
4+
interface DialogDismissibleProps {
5+
/**
6+
* Additional styling
7+
*/
8+
style?: StyleProp<ViewStyle>;
9+
/**
10+
* The direction of the allowed pan (default is DOWN)
11+
* Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
12+
*/
13+
direction?: PanningDirections;
14+
/**
15+
* onDismiss callback
16+
*/
17+
onDismiss?: () => void;
18+
/**
19+
* The dialog`s container style
20+
*/
21+
containerStyle?: StyleProp<ViewStyle>;
22+
/**
23+
* Whether to show the dialog or not
24+
*/
25+
visible?: boolean;
26+
}
27+
declare const _default: React.ComponentClass<DialogDismissibleProps, any>;
28+
export default _default;

‎generatedTypes/components/dialog/OverlayFadingBackground.d.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/// <reference types="react" />
22
interface Props {
3-
dialogVisibility: boolean;
4-
modalVisibility: boolean;
5-
overlayBackgroundColor: string;
3+
dialogVisibility?: boolean;
4+
modalVisibility?: boolean;
5+
overlayBackgroundColor?: string;
66
}
77
declare const OverlayFadingBackground: {
88
({ dialogVisibility, modalVisibility, overlayBackgroundColor }: Props): JSX.Element;

‎generatedTypes/components/dialog/index.d.ts

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react';
2+
import { StyleProp, ViewStyle, ModalPropsIOS, AccessibilityProps } from 'react-native';
3+
import { AlignmentModifiers } from '../../commons/modifiers';
4+
import { PanningDirections } from '../panningViews/panningProvider';
5+
interface RNPartialProps extends Pick<ModalPropsIOS, 'supportedOrientations'>, Pick<AccessibilityProps, 'accessibilityLabel'> {
6+
}
7+
export interface DialogProps extends AlignmentModifiers, RNPartialProps {
8+
/**
9+
* Control visibility of the dialog
10+
*/
11+
visible?: boolean;
12+
/**
13+
* Dismiss callback for when clicking on the background
14+
*/
15+
onDismiss?: (props: any) => void;
16+
/**
17+
* The color of the overlay background
18+
*/
19+
overlayBackgroundColor?: string;
20+
/**
21+
* The dialog width (default: 90%)
22+
*/
23+
width?: string | number;
24+
/**
25+
* The dialog height (default: undefined)
26+
*/
27+
height?: string | number;
28+
/**
29+
* The direction of the allowed pan (default is DOWN).
30+
* Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###).
31+
* Pass null to remove pan.
32+
*/
33+
panDirection?: PanningDirections;
34+
/**
35+
* Whether or not to handle SafeArea
36+
*/
37+
useSafeArea?: boolean;
38+
/**
39+
* Called once the modal has been dismissed (iOS only) - Deprecated, use onDialogDismissed instead
40+
*/
41+
onModalDismissed?: (props: any) => void;
42+
/**
43+
* Called once the dialog has been dismissed completely
44+
*/
45+
onDialogDismissed?: (props: any) => void;
46+
/**
47+
* If this is added only the header will be pannable;
48+
* this allows for scrollable content (the children of the dialog)
49+
* props are transferred to the renderPannableHeader
50+
*/
51+
renderPannableHeader?: (props: any) => JSX.Element;
52+
/**
53+
* The props that will be passed to the pannable header
54+
*/
55+
pannableHeaderProps?: any;
56+
/**
57+
* The Dialog`s container style
58+
*/
59+
containerStyle?: StyleProp<ViewStyle>;
60+
/**
61+
* Used as a testing identifier
62+
*/
63+
testID?: string;
64+
}
65+
declare const _default: React.ComponentClass<DialogProps & {
66+
useCustomTheme?: boolean | undefined;
67+
}, any>;
68+
export default _default;

‎generatedTypes/components/view/index.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export interface ViewPropTypes extends Omit<ViewProps, 'style'>, ContainerModifi
3030
* Set background color
3131
*/
3232
backgroundColor?: string;
33-
style?: StyleProp<ViewStyle> | Animated.AnimatedProps<StyleProp<ViewStyle>>;
33+
style?: StyleProp<ViewStyle | Animated.AnimatedProps<ViewStyle>>;
3434
}
3535
declare const _default: React.ComponentClass<ViewPropTypes & {
3636
useCustomTheme?: boolean | undefined;

‎generatedTypes/helpers/Constants.d.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1+
export declare enum orientations {
2+
PORTRAIT = "portrait",
3+
LANDSCAPE = "landscape"
4+
}
15
export declare function updateConstants(dimensions: any): void;
26
declare const constants: {
3-
orientations: {
4-
PORTRAIT: string;
5-
LANDSCAPE: string;
6-
};
7+
orientations: typeof orientations;
78
isAndroid: boolean;
89
isIOS: boolean;
910
getAndroidVersion: () => number | undefined;
1011
readonly statusBarHeight: number;
1112
isRTL: boolean;
12-
readonly orientation: string;
13+
readonly orientation: orientations;
1314
readonly isLandscape: boolean;
1415
readonly screenWidth: number;
1516
readonly screenHeight: number;

‎src/components/dialog/DialogDismissibleView.js renamed to ‎src/components/dialog/DialogDismissibleView.tsx

Lines changed: 85 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,90 @@
11
import _ from 'lodash';
2-
import PropTypes from 'prop-types';
32
import React, {PureComponent} from 'react';
4-
import {Animated, Easing, StyleSheet} from 'react-native';
3+
import {Animated, Easing, StyleSheet, StyleProp, ViewStyle, LayoutChangeEvent} from 'react-native';
54
import {Constants} from '../../helpers';
65
import View from '../view';
76
import asPanViewConsumer from '../panningViews/asPanViewConsumer';
8-
import PanningProvider from '../panningViews/panningProvider';
7+
import PanningProvider, {PanningDirections, PanAmountsProps, PanDirectionsProps, PanLocationProps} from '../panningViews/panningProvider';
98
import PanResponderView from '../panningViews/panResponderView';
109

1110
const MAXIMUM_DRAGS_AFTER_SWIPE = 2;
1211

13-
class DialogDismissibleView extends PureComponent {
14-
static propTypes = {
15-
/**
16-
* The direction of the allowed pan (default is DOWN)
17-
* Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
18-
*/
19-
direction: PropTypes.oneOf(Object.values(PanningProvider.Directions)),
20-
/**
21-
* onDismiss callback
22-
*/
23-
onDismiss: PropTypes.func,
24-
/**
25-
* The dialog`s container style
26-
*/
27-
containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
28-
/**
29-
* Whether to show the dialog or not
30-
*/
31-
visible: PropTypes.bool
32-
};
12+
interface PanContextProps {
13+
isPanning: boolean;
14+
dragDeltas: PanAmountsProps;
15+
swipeDirections: PanDirectionsProps;
16+
}
17+
18+
interface DialogDismissibleProps {
19+
/**
20+
* Additional styling
21+
*/
22+
style?: StyleProp<ViewStyle>;
23+
/**
24+
* The direction of the allowed pan (default is DOWN)
25+
* Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
26+
*/
27+
direction?: PanningDirections;
28+
/**
29+
* onDismiss callback
30+
*/
31+
onDismiss?: () => void;
32+
/**
33+
* The dialog`s container style
34+
*/
35+
containerStyle?: StyleProp<ViewStyle>;
36+
/**
37+
* Whether to show the dialog or not
38+
*/
39+
visible?: boolean;
40+
}
41+
42+
interface Props extends DialogDismissibleProps {
43+
context: PanContextProps;
44+
}
45+
46+
interface State {
47+
visible?: boolean;
48+
hide: boolean;
49+
}
50+
51+
interface LocationProps {
52+
left: number;
53+
top: number;
54+
}
3355

34-
static defaultProps = {
35-
direction: PanningProvider.Directions.DOWN,
36-
onDismiss: _.noop
56+
const DEFAULT_DIRECTION = PanningProvider.Directions.DOWN;
57+
58+
class DialogDismissibleView extends PureComponent<Props, State> {
59+
60+
public static defaultProps: Partial<Props> = {
61+
direction: DEFAULT_DIRECTION,
62+
onDismiss: () => {}
3763
};
3864

39-
constructor(props) {
65+
private hiddenLocation: LocationProps;
66+
private animatedValue = new Animated.Value(0);
67+
private width = Constants.screenWidth;
68+
private height = Constants.screenHeight;
69+
private counter = 0;
70+
private swipe: PanDirectionsProps = {};
71+
private thresholdX = 0;
72+
private thresholdY = 0;
73+
private ref = React.createRef<any>();
74+
75+
constructor(props: Props) {
4076
super(props);
4177

42-
this.setInitialValues();
78+
this.hiddenLocation = this.getHiddenLocation(0, 0);
4379
this.state = {
4480
visible: props.visible,
4581
hide: false
4682
};
4783
}
4884

49-
setInitialValues() {
50-
this.hiddenLocation = {};
51-
this.resetSwipe();
52-
this.animatedValue = new Animated.Value(0);
53-
this.width = Constants.screenWidth;
54-
this.height = Constants.screenHeight;
55-
this.hiddenLocation = this.getHiddenLocation(0, 0);
56-
}
57-
58-
componentDidUpdate(prevProps) {
59-
const {isPanning, dragDeltas, swipeDirections} = this.props.context; // eslint-disable-line
60-
const {dragDeltas: prevDragDeltas, swipeDirections: prevSwipeDirections} = prevProps.context; // eslint-disable-line
85+
componentDidUpdate(prevProps: Props) {
86+
const {isPanning, dragDeltas, swipeDirections} = this.props.context;
87+
const {dragDeltas: prevDragDeltas, swipeDirections: prevSwipeDirections} = prevProps.context;
6188
const {hide} = this.state;
6289

6390
if (
@@ -81,7 +108,7 @@ class DialogDismissibleView extends PureComponent {
81108
}
82109
}
83110

84-
static getDerivedStateFromProps(nextProps, prevState) {
111+
static getDerivedStateFromProps(nextProps: DialogDismissibleProps, prevState: State) {
85112
const {visible} = nextProps;
86113
const {visible: prevVisible} = prevState;
87114

@@ -97,8 +124,8 @@ class DialogDismissibleView extends PureComponent {
97124
this.swipe = {};
98125
};
99126

100-
isSwiping = () => {
101-
return this.swipe.x || this.swipe.y;
127+
isSwiping = (): boolean => {
128+
return !_.isUndefined(this.swipe.x) || !_.isUndefined(this.swipe.y);
102129
};
103130

104131
onDrag = () => {
@@ -111,11 +138,11 @@ class DialogDismissibleView extends PureComponent {
111138
}
112139
};
113140

114-
onSwipe = swipeDirections => {
141+
onSwipe = (swipeDirections: PanDirectionsProps) => {
115142
this.swipe = swipeDirections;
116143
};
117144

118-
getHiddenLocation = (left, top) => {
145+
getHiddenLocation = (left: number, top: number): LocationProps => {
119146
const {direction} = this.props;
120147
const topInset = Constants.isIphoneX ? Constants.getSafeAreaInsets().top : Constants.isIOS ? 20 : 0;
121148
const bottomInset = Constants.isIphoneX ? Constants.getSafeAreaInsets().bottom : Constants.isIOS ? 20 : 0;
@@ -140,7 +167,7 @@ class DialogDismissibleView extends PureComponent {
140167
return result;
141168
};
142169

143-
animateTo = (toValue, animationEndCallback) => {
170+
animateTo = (toValue: number, animationEndCallback?: Animated.EndCallback) => {
144171
Animated.timing(this.animatedValue, {
145172
toValue,
146173
duration: 300,
@@ -168,17 +195,19 @@ class DialogDismissibleView extends PureComponent {
168195
};
169196
};
170197

171-
onLayout = event => {
198+
onLayout = (event: LayoutChangeEvent) => {
172199
// DO NOT move the width\height into the measureInWindow - it causes errors with orientation change
173200
const layout = event.nativeEvent.layout;
174201
this.width = layout.width;
175202
this.height = layout.height;
176203
this.thresholdX = this.width / 2;
177204
this.thresholdY = this.height / 2;
178-
this.ref.measureInWindow((x, y) => {
179-
this.hiddenLocation = this.getHiddenLocation(x, y);
180-
this.animateTo(1);
181-
});
205+
if (this.ref.current) {
206+
this.ref.current.measureInWindow((x: number, y: number) => {
207+
this.hiddenLocation = this.getHiddenLocation(x, y);
208+
this.animateTo(1);
209+
});
210+
}
182211
};
183212

184213
hide = () => {
@@ -187,16 +216,16 @@ class DialogDismissibleView extends PureComponent {
187216
this.animateTo(0, () => this.setState({visible: false, hide: false}, onDismiss));
188217
};
189218

190-
resetToShown = (left, top, direction) => {
219+
resetToShown = (left: number, top: number, direction: PanningDirections) => {
191220
const toValue = [PanningProvider.Directions.LEFT, PanningProvider.Directions.RIGHT].includes(direction)
192221
? 1 + left / this.hiddenLocation.left
193222
: 1 + top / this.hiddenLocation.top;
194223

195224
this.animateTo(toValue);
196225
};
197226

198-
onPanLocationChanged = ({left, top}) => {
199-
const {direction} = this.props;
227+
onPanLocationChanged = ({left = 0, top = 0}: PanLocationProps) => {
228+
const {direction = DEFAULT_DIRECTION} = this.props;
200229
const endValue = {x: Math.round(left), y: Math.round(top)};
201230
if (this.isSwiping()) {
202231
this.hide();
@@ -220,7 +249,7 @@ class DialogDismissibleView extends PureComponent {
220249
const {visible} = this.state;
221250

222251
return (
223-
<View ref={r => (this.ref = r)} style={containerStyle} onLayout={this.onLayout}>
252+
<View ref={this.ref} style={containerStyle} onLayout={this.onLayout}>
224253
<PanResponderView
225254
// !visible && styles.hidden is done to fix a bug is iOS
226255
style={[style, this.getAnimationStyle(), !visible && styles.hidden]}
@@ -234,7 +263,7 @@ class DialogDismissibleView extends PureComponent {
234263
}
235264
}
236265

237-
export default asPanViewConsumer(DialogDismissibleView);
266+
export default asPanViewConsumer<DialogDismissibleProps>(DialogDismissibleView);
238267

239268
const styles = StyleSheet.create({
240269
hidden: {

‎src/components/dialog/OverlayFadingBackground.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import View from '../view';
33
import {Animated} from 'react-native';
44

55
interface Props {
6-
dialogVisibility: boolean;
7-
modalVisibility: boolean;
8-
overlayBackgroundColor: string;
6+
dialogVisibility?: boolean;
7+
modalVisibility?: boolean;
8+
overlayBackgroundColor?: string;
99
}
1010

1111
const OverlayFadingBackground = ({

0 commit comments

Comments
 (0)