Skip to content

Commit 074ee03

Browse files
lidord-wixlidord-wix
authored
Infra/ change _.invoke to optional chaining (#1411)
* change _.invoke() to optional chaining * add optional chaining * add ts-expect-error
1 parent 9c91942 commit 074ee03

File tree

34 files changed

+93
-103
lines changed

34 files changed

+93
-103
lines changed

‎demo/src/screens/componentScreens/WithScrollEnablerScreen/AutoLockFlatList.tsx

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,21 +39,16 @@ const WithScrollEnabler = (props: AutoLockScrollViewProps) => {
3939

4040
const onContentSizeChange = useCallback(
4141
(contentWidth: number, contentHeight: number) => {
42-
_.invoke(props, 'onContentSizeChange', contentWidth, contentHeight);
43-
_.invoke(
44-
props,
45-
'scrollEnablerProps.onContentSizeChange',
46-
contentWidth,
47-
contentHeight
48-
);
42+
props.onContentSizeChange?.(contentWidth, contentHeight);
43+
props.scrollEnablerProps.onContentSizeChange?.(contentWidth, contentHeight);
4944
},
5045
[props.onContentSizeChange, props.scrollEnablerProps.onContentSizeChange]
5146
);
5247

5348
const onLayout = useCallback(
5449
(nativeEvent: LayoutChangeEvent) => {
55-
_.invoke(props, 'onLayout', nativeEvent);
56-
_.invoke(props, 'scrollEnablerProps.onLayout', nativeEvent);
50+
props.onLayout?.(nativeEvent);
51+
props.scrollEnablerProps.onLayout?.(nativeEvent);
5752
},
5853
[props.onLayout, props.scrollEnablerProps.onLayout]
5954
);

‎demo/src/screens/componentScreens/WithScrollEnablerScreen/AutoLockScrollView.tsx

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,21 +30,16 @@ const WithScrollEnabler = (props: AutoLockScrollViewProps) => {
3030

3131
const onContentSizeChange = useCallback(
3232
(contentWidth: number, contentHeight: number) => {
33-
_.invoke(props, 'onContentSizeChange', contentWidth, contentHeight);
34-
_.invoke(
35-
props,
36-
'scrollEnablerProps.onContentSizeChange',
37-
contentWidth,
38-
contentHeight
39-
);
33+
props.onContentSizeChange?.(contentWidth, contentHeight);
34+
props.scrollEnablerProps.onContentSizeChange?.(contentWidth, contentHeight);
4035
},
4136
[props.onContentSizeChange, props.scrollEnablerProps.onContentSizeChange]
4237
);
4338

4439
const onLayout = useCallback(
4540
(nativeEvent: LayoutChangeEvent) => {
46-
_.invoke(props, 'onLayout', nativeEvent);
47-
_.invoke(props, 'scrollEnablerProps.onLayout', nativeEvent);
41+
props.onLayout?.(nativeEvent);
42+
props.scrollEnablerProps.onLayout?.(nativeEvent);
4843
},
4944
[props.onLayout, props.scrollEnablerProps.onLayout]
5045
);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export interface DialogProps extends AlignmentModifiers, RNPartialProps {
1212
/**
1313
* Dismiss callback for when clicking on the background
1414
*/
15-
onDismiss?: (props: any) => void;
15+
onDismiss?: (props?: any) => void;
1616
/**
1717
* Whether or not to ignore background press
1818
*/

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export declare type RadioGroupProps = ViewProps & {
99
/**
1010
* Invoked once when value changes, by selecting one of the radio buttons in the group
1111
*/
12-
onValueChange?: ((value: string) => void) | ((value: number) => void) | ((value: boolean) => void) | ((value: any) => void);
12+
onValueChange?: ((value?: string) => void) | ((value?: number) => void) | ((value?: boolean) => void) | ((value?: any) => void);
1313
};
1414
export declare type RadioGroupPropTypes = RadioGroupProps;
1515
interface RadioGroupState {
@@ -43,7 +43,7 @@ declare const _default: React.ComponentClass<ViewProps & {
4343
/**
4444
* Invoked once when value changes, by selecting one of the radio buttons in the group
4545
*/
46-
onValueChange?: ((value: string) => void) | ((value: number) => void) | ((value: boolean) => void) | ((value: any) => void) | undefined;
46+
onValueChange?: ((value?: string | undefined) => void) | ((value?: number | undefined) => void) | ((value?: boolean | undefined) => void) | ((value?: any) => void) | undefined;
4747
} & {
4848
useCustomTheme?: boolean | undefined;
4949
}, any>;

‎src/components/actionSheet/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,8 +139,8 @@ class ActionSheet extends Component<ActionSheetProps> {
139139
}
140140

141141
onOptionPress(optionIndex: number) {
142-
_.invoke(this.props, `options[${optionIndex}].onPress`);
143-
_.invoke(this.props, 'onDismiss');
142+
this.props.options?.[optionIndex].onPress?.();
143+
this.props.onDismiss?.();
144144
}
145145

146146
handleRenderIcon = (option: ButtonProps) => {

‎src/components/carousel/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -251,14 +251,14 @@ class Carousel extends Component<CarouselProps, CarouselState> {
251251

252252
onMomentumScrollEnd = () => {
253253
// finished full page scroll
254-
const {currentStandingPage, currentPage} = this.state;
254+
const {currentStandingPage = 0, currentPage} = this.state;
255255
const index = this.getCalcIndex(currentPage);
256256

257257
const pagesCount = presenter.getChildrenLength(this.props);
258258
if (index < pagesCount) {
259259
this.setState({currentStandingPage: index});
260260
if (currentStandingPage !== index) {
261-
_.invoke(this.props, 'onChangePage', index, currentStandingPage);
261+
this.props.onChangePage?.(index, currentStandingPage);
262262
}
263263
}
264264
};
@@ -316,7 +316,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
316316
this.resetAutoPlay();
317317
}
318318

319-
_.invoke(this.props, 'onScroll', event);
319+
this.props.onScroll?.(event);
320320
};
321321

322322
// @ts-ignore

‎src/components/checkbox/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import _ from 'lodash';
21
import React, {Component} from 'react';
32
import {
43
Animated,
@@ -173,7 +172,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
173172
const {disabled} = this.props;
174173

175174
if (!disabled) {
176-
_.invoke(this.props, 'onValueChange', !this.props.value);
175+
this.props.onValueChange?.(!this.props.value);
177176
}
178177
};
179178

‎src/components/colorPicker/ColorPalette.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ class ColorPalette extends PureComponent<Props, State> {
247247
};
248248

249249
onValueChange = (value: string, options: object) => {
250-
_.invoke(this.props, 'onValueChange', value, options);
250+
this.props.onValueChange?.(value, options);
251251
};
252252

253253
onLayout = () => {

‎src/components/colorPicker/ColorPickerDialog.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,14 +212,14 @@ class ColorPickerDialog extends PureComponent<Props, State> {
212212
const {hex} = this.getValidColorString(text);
213213

214214
if (hex) {
215-
_.invoke(this.props, 'onSubmit', hex, this.getTextColor(hex));
215+
this.props.onSubmit?.(hex, this.getTextColor(hex));
216216
this.onDismiss();
217217
}
218218
};
219219

220220
onDismiss = () => {
221221
this.resetValues();
222-
_.invoke(this.props, 'onDismiss');
222+
this.props.onDismiss?.();
223223
};
224224

225225
renderHeader() {

‎src/components/colorPicker/ColorSwatch.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import _ from 'lodash';
21
import React, {PureComponent} from 'react';
32
import {StyleSheet, Animated, Easing, LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
43
import Assets from '../../assets';
@@ -104,9 +103,9 @@ class ColorSwatch extends PureComponent<Props> {
104103
}
105104

106105
onPress = () => {
107-
const {color, value, index} = this.props;
106+
const {color = '', value, index} = this.props;
108107
const tintColor = this.getTintColor(value);
109-
_.invoke(this.props, 'onPress', value || color, {tintColor, index});
108+
this.props.onPress?.(value || color, {tintColor, index});
110109
};
111110

112111
getTintColor(color?: string) {

‎src/components/colorPicker/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import _ from 'lodash';
21
import React, {PureComponent} from 'react';
32
import {StyleSheet, StyleProp, ViewStyle} from 'react-native';
43
import ColorPalette from './ColorPalette';
@@ -133,7 +132,7 @@ class ColorPicker extends PureComponent<Props> {
133132

134133
// ColorPalette
135134
onValueChange = (value: string, options: object) => {
136-
_.invoke(this.props, 'onValueChange', value, options);
135+
this.props.onValueChange?.(value, options);
137136
};
138137
}
139138

‎src/components/dialog/index.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export interface DialogProps extends AlignmentModifiers, RNPartialProps {
3131
/**
3232
* Dismiss callback for when clicking on the background
3333
*/
34-
onDismiss?: (props: any) => void;
34+
onDismiss?: (props?: any) => void;
3535
/**
3636
* Whether or not to ignore background press
3737
*/
@@ -170,8 +170,8 @@ class Dialog extends Component<DialogProps, DialogState> {
170170
onFadeDone = () => {
171171
if (!this.state.modalVisibility) {
172172
setTimeout(() => { // unfortunately this is needed if a modal needs to open on iOS
173-
_.invoke(this.props, 'onDialogDismissed', this.props);
174-
_.invoke(this.props, 'onModalDismissed', this.props);
173+
this.props.onDialogDismissed?.(this.props);
174+
this.props.onModalDismissed?.(this.props);
175175
}, 100);
176176
}
177177
}
@@ -180,11 +180,11 @@ class Dialog extends Component<DialogProps, DialogState> {
180180
this.setState({modalVisibility: false, fadeOut: false}, () => {
181181
const props = this.props;
182182
if (props.visible) {
183-
_.invoke(props, 'onDismiss', props);
183+
props.onDismiss?.(props);
184184
}
185185
// Parity with iOS Modal's onDismiss
186186
if (Constants.isAndroid) {
187-
_.invoke(props, 'onDialogDismissed', props);
187+
props.onDialogDismissed?.(props);
188188
}
189189
});
190190
}
@@ -200,8 +200,8 @@ class Dialog extends Component<DialogProps, DialogState> {
200200
};
201201

202202
onModalDismissed = () => {
203-
_.invoke(this.props, 'onDialogDismissed', this.props);
204-
_.invoke(this.props, 'onModalDismissed', this.props);
203+
this.props.onDialogDismissed?.(this.props);
204+
this.props.onModalDismissed?.(this.props);
205205
}
206206

207207
hideDialogView = () => {

‎src/components/drawer/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -208,15 +208,15 @@ class Drawer extends PureComponent<Props> {
208208
if (!item.keepOpen) {
209209
this.closeDrawer();
210210
}
211-
_.invoke(item, 'onPress', this.props);
211+
item.onPress?.(this.props);
212212
};
213213

214214
private onSwipeableWillOpen = () => {
215-
_.invoke(this.props, 'onSwipeableWillOpen', this.props);
215+
this.props.onSwipeableWillOpen?.(this.props);
216216
};
217217

218218
private onSwipeableWillClose = () => {
219-
_.invoke(this.props, 'onSwipeableWillClose', this.props);
219+
this.props.onSwipeableWillClose?.(this.props);
220220
};
221221

222222
private onToggleSwipeLeft = (options?: any) => {
@@ -240,7 +240,7 @@ class Drawer extends PureComponent<Props> {
240240
this.animateItem({released: false, resetItemPosition: true});
241241
this.closeDrawer();
242242
setTimeout(() => {
243-
_.invoke(this.props, 'onToggleSwipeLeft', this.props);
243+
this.props.onToggleSwipeLeft?.(this.props);
244244
}, 150);
245245
}
246246
});
@@ -280,7 +280,7 @@ class Drawer extends PureComponent<Props> {
280280
// return o.text === event.nativeEvent.action;
281281
return o.name === event.nativeEvent.actionName;
282282
});
283-
_.invoke(action, 'onPress');
283+
action.onPress?.();
284284
};
285285

286286
/** Renders */

‎src/components/featureHighlight/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import _ from 'lodash';
21
import React, {Component, ElementRef} from 'react';
32
import {
43
StyleSheet,
@@ -288,7 +287,7 @@ class FeatureHighlight extends Component<FeatureHighlightProps, State> {
288287
this.contentHeight = contentViewHeight;
289288
this.targetPosition = undefined;
290289
const {confirmButtonProps} = this.props;
291-
_.invoke(confirmButtonProps, 'onPress');
290+
confirmButtonProps?.onPress?.();
292291
};
293292

294293
renderHighlightMessage() {

‎src/components/image/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ class Image extends PureComponent<Props, State> {
153153
onError = (event: NativeSyntheticEvent<ImageErrorEventData>) => {
154154
if (event.nativeEvent.error) {
155155
this.setState({error: true});
156-
_.invoke(this.props, 'onError', event);
156+
this.props.onError?.(event);
157157
}
158158
}
159159

‎src/components/pageControl/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ class PageControl extends PureComponent<PageControlProps, State> {
185185

186186
onPagePress = ({customValue: index}: TouchableOpacityProps) => {
187187
PageControl.animate(this.props);
188-
_.invoke(this.props, 'onPagePress', index);
188+
this.props.onPagePress?.(index);
189189
};
190190

191191
renderIndicator(index: number, size: number, enlargeActive?: boolean) {

‎src/components/panningViews/panDismissibleView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -381,7 +381,7 @@ class PanDismissibleView extends PureComponent<Props, State> {
381381

382382
onDismissAnimationFinished = ({finished}: {finished: boolean}) => {
383383
if (finished) {
384-
_.invoke(this.props, 'onDismiss');
384+
this.props.onDismiss?.();
385385
}
386386
};
387387

‎src/components/panningViews/panGestureView.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import _ from 'lodash';
21
import React, {Component} from 'react';
32
import {
43
PanResponder,
@@ -161,7 +160,7 @@ class PanGestureView extends Component<PanGestureViewProps, State> {
161160

162161
onDismiss = () => {
163162
this.initPositions();
164-
_.invoke(this.props, 'onDismiss');
163+
this.props.onDismiss?.();
165164
}
166165

167166
initPositions() {

‎src/components/panningViews/panListenerView.tsx

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -147,8 +147,8 @@ class PanListenerView extends PureComponent<Props> {
147147
};
148148

149149
handlePanStart = () => {
150-
_.invoke(this.props, 'onPanStart');
151-
_.invoke(this.props.context, 'onPanStart');
150+
this.props.onPanStart?.();
151+
this.props.context?.onPanStart?.();
152152
};
153153

154154
getSwipeDirection = ({vx, vy}: ({vx: number, vy: number})): PanningResultProps => {
@@ -201,26 +201,29 @@ class PanListenerView extends PureComponent<Props> {
201201
if (this.panResultHasValue(panResult)) {
202202
// @ts-ignore
203203
const data = {directions: panResult.selectedDirections, velocities: panResult.selectedAmounts};
204-
_.invoke(this.props, 'onSwipe', data);
205-
_.invoke(context, 'onSwipe', data);
204+
this.props.onSwipe?.(data);
205+
context?.onSwipe?.(data);
206206
} else if (hasDrag || hasContext) {
207207
panResult = this.getDragDirection(gestureState);
208208
if (this.panResultHasValue(panResult)) {
209209
const data = {directions: panResult.selectedDirections, deltas: panResult.selectedAmounts};
210-
_.invoke(this.props, 'onDrag', data);
211-
_.invoke(context, 'onDrag', data);
210+
this.props.onDrag?.(data);
211+
context?.onDrag?.(data);
212+
212213
}
213214
}
214215
};
215216

216217
handlePanRelease = () => {
217-
_.invoke(this.props, 'onPanRelease');
218-
_.invoke(this.props.context, 'onPanRelease');
218+
this.props.onPanRelease?.();
219+
this.props.context?.onPanRelease?.();
220+
219221
};
220222

221223
handlePanTerminate = () => {
222-
_.invoke(this.props, 'onPanTerminated');
223-
_.invoke(this.props.context, 'onPanTerminated');
224+
this.props.onPanTerminated?.();
225+
this.props.context?.onPanTerminated?.();
226+
224227
};
225228

226229
render() {

‎src/components/panningViews/panResponderView.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import _ from 'lodash';
21
import React, {PureComponent} from 'react';
32
import View, {ViewProps} from '../view';
43
import asPanViewConsumer from './asPanViewConsumer';
@@ -77,8 +76,9 @@ class PanResponderView extends PureComponent<Props> {
7776
const location: PanLocationProps = {left: this.left, top: this.top};
7877
this.initialLeft = this.left || this.initialLeft;
7978
this.initialTop = this.top || this.initialTop;
80-
_.invoke(this.props, 'onPanLocationChanged', location);
81-
_.invoke(this.props.context, 'onPanLocationChanged', location);
79+
this.props.onPanLocationChanged?.(location);
80+
//@ts-expect-error
81+
this.props.context.onPanLocationChanged?.(location);
8282
}
8383

8484
onDrag(deltas: PanAmountsProps) {

0 commit comments

Comments
 (0)