replace deprecated nativeID with id

getusha · getusha · commit 822efb502d14 · 2023-08-12T07:25:11.000+03:00
diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.js
@@ -15,14 +15,14 @@ const propTypes = {
     longPressHandlerStateChanged: PropTypes.func,
 
     /** Used to locate this view from native classes. */
-    nativeID: PropTypes.string,
+    id: PropTypes.string,
 
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     longPressHandlerStateChanged: () => {},
-    nativeID: 'numPadView',
+    id: 'numPadView',
 };
 
 const padNumbers = [
@@ -57,7 +57,7 @@ function BigNumberPad(props) {
     return (
         <View
             style={[styles.flexColumn, styles.w100]}
-            nativeID={props.nativeID}
+            id={props.id}
         >
             {_.map(padNumbers, (row, rowIndex) => (
                 <View
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
@@ -112,7 +112,7 @@ const propTypes = {
     isFocused: PropTypes.bool.isRequired,
 
     /** Id to use for this button */
-    nativeID: PropTypes.string,
+    id: PropTypes.string,
 
     /** Accessibility label for the component */
     accessibilityLabel: PropTypes.string,
@@ -152,7 +152,7 @@ const defaultProps = {
     shouldRemoveRightBorderRadius: false,
     shouldRemoveLeftBorderRadius: false,
     shouldEnableHapticFeedback: false,
-    nativeID: '',
+    id: '',
     accessibilityLabel: '',
     forwardedRef: undefined,
 };
@@ -303,7 +303,7 @@ class Button extends Component {
                     this.props.success && !this.props.isDisabled ? styles.buttonSuccessHovered : undefined,
                     this.props.danger && !this.props.isDisabled ? styles.buttonDangerHovered : undefined,
                 ]}
-                nativeID={this.props.nativeID}
+                id={this.props.id}
                 accessibilityLabel={this.props.accessibilityLabel}
                 hoverDimmingValue={1}
             >
diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -15,7 +15,7 @@ const propTypes = {
     isDisabled: PropTypes.bool,
 
     /** Id to use for the emoji picker button */
-    nativeID: PropTypes.string,
+    id: PropTypes.string,
 
     /**
      * ReportAction for EmojiPicker.
@@ -29,7 +29,7 @@ const propTypes = {
 
 const defaultProps = {
     isDisabled: false,
-    nativeID: '',
+    id: '',
     reportAction: {},
 };
 
@@ -51,7 +51,7 @@ function EmojiPickerButton(props) {
                         EmojiPickerAction.emojiPickerRef.current.hideEmojiPicker();
                     }
                 }}
-                nativeID={props.nativeID}
+                id={props.id}
                 accessibilityLabel={props.translate('reportActionCompose.emoji')}
             >
                 {({hovered, pressed}) => (
diff --git a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
@@ -42,7 +42,7 @@ function EmojiPickerButtonDropdown(props) {
                 style={styles.emojiPickerButtonDropdown}
                 disabled={props.isDisabled}
                 onPress={onPress}
-                nativeID="emojiDropdownButton"
+                id="emojiDropdownButton"
                 accessibilityLabel="statusEmoji"
                 accessibilityRole="text"
             >
diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js
@@ -167,7 +167,7 @@ class BaseModal extends PureComponent {
                             <View
                                 style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !this.props.isVisible ? styles.pointerEventsNone : {}]}
                                 ref={this.props.forwardedRef}
-                                nativeID="no-drag-area"
+                                id="no-drag-area"
                             >
                                 {this.props.children}
                             </View>
diff --git a/src/components/Pressable/GenericPressable/index.js b/src/components/Pressable/GenericPressable/index.js
@@ -10,11 +10,11 @@ const WebGenericPressable = forwardRef((props, ref) => (
         // change native accessibility props to web accessibility props
         tabIndex={!props.accessible || !props.focusable ? -1 : 0}
         role={props.accessibilityRole}
-        id={props.nativeID}
+        id={props.id}
         aria-label={props.accessibilityLabel}
         aria-labelledby={props.accessibilityLabelledBy}
         aria-valuenow={props.accessibilityValue}
-        nativeID={props.nativeID || 'no-drag-area'}
+        id={props.id || 'no-drag-area'}
     />
 ));
 
diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js
@@ -26,14 +26,14 @@ const PressableWithFeedbackPropTypes = {
     /**
      *  Used to locate this view from native classes.
      */
-    nativeID: propTypes.string,
+    id: propTypes.string,
 };
 
 const PressableWithFeedbackDefaultProps = {
     ...GenericPressablePropTypes.defaultProps,
     pressDimmingValue: variables.pressDimValue,
     hoverDimmingValue: variables.hoverDimValue,
-    nativeID: '',
+    id: '',
     wrapperStyle: [],
 };
 
diff --git a/src/components/TextInput/BaseTextInput/index.js b/src/components/TextInput/BaseTextInput/index.js
@@ -280,7 +280,7 @@ function BaseTextInput(props) {
                                     label={props.label}
                                     labelTranslateY={labelTranslateY}
                                     labelScale={labelScale}
-                                    for={props.nativeID}
+                                    for={props.id}
                                 />
                             </>
                         ) : null}
diff --git a/src/components/TextInput/BaseTextInput/index.native.js b/src/components/TextInput/BaseTextInput/index.native.js
@@ -281,7 +281,7 @@ function BaseTextInput(props) {
                                     label={props.label}
                                     labelTranslateY={labelTranslateY}
                                     labelScale={labelScale}
-                                    for={props.nativeID}
+                                    for={props.id}
                                 />
                             </>
                         ) : null}
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
@@ -138,7 +138,7 @@ function HeaderView(props) {
     return (
         <View
             style={[styles.appContentHeader, shouldShowBorderBottom && styles.borderBottom]}
-            nativeID="drag-area"
+            id="drag-area"
         >
             <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
                 {props.isSmallScreenWidth && (
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -285,7 +285,7 @@ function ReportActionItemMessageEdit(props) {
                         <PressableWithFeedback
                             onPress={deleteDraft}
                             style={styles.chatItemSubmitButton}
-                            nativeID={cancelButtonID}
+                            id={cancelButtonID}
                             accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                             accessibilityLabel={translate('common.close')}
                             // disable dimming
@@ -320,7 +320,7 @@ function ReportActionItemMessageEdit(props) {
                                 // eslint-disable-next-line no-param-reassign
                                 props.forwardedRef.current = el;
                             }}
-                            nativeID={messageEditInput}
+                            id={messageEditInput}
                             onChangeText={updateDraft} // Debounced saveDraftComment
                             onKeyPress={triggerSaveOrCancel}
                             value={draft}
@@ -357,7 +357,7 @@ function ReportActionItemMessageEdit(props) {
                                 focus(true);
                             }}
                             onEmojiSelected={addEmojiToTextBox}
-                            nativeID={emojiButtonID}
+                            id={emojiButtonID}
                             reportAction={props.action}
                         />
                     </View>
@@ -367,7 +367,7 @@ function ReportActionItemMessageEdit(props) {
                             <PressableWithFeedback
                                 style={[styles.chatItemSubmitButton, hasExceededMaxCommentLength ? {} : styles.buttonSuccess]}
                                 onPress={publishDraft}
-                                nativeID={saveButtonID}
+                                id={saveButtonID}
                                 disabled={hasExceededMaxCommentLength}
                                 accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                                 accessibilityLabel={translate('common.saveChanges')}
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
@@ -165,7 +165,7 @@ class SidebarLinks extends React.PureComponent {
             <View style={[styles.flex1, styles.h100]}>
                 <View
                     style={[styles.flexRow, styles.ph5, styles.pv3, styles.justifyContentBetween, styles.alignItemsCenter]}
-                    nativeID="drag-area"
+                    id="drag-area"
                 >
                     <Header
                         title={
diff --git a/src/pages/iou/steps/MoneyRequestAmountForm.js b/src/pages/iou/steps/MoneyRequestAmountForm.js
@@ -76,11 +76,11 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu
      * Event occurs when a user presses a mouse button over an DOM element.
      *
      * @param {Event} event
-     * @param {Array<string>} nativeIds
+     * @param {Array<string>} ids
      */
-    const onMouseDown = (event, nativeIds) => {
+    const onMouseDown = (event, ids) => {
         const relatedTargetId = lodashGet(event, 'nativeEvent.target.id');
-        if (!_.contains(nativeIds, relatedTargetId)) {
+        if (!_.contains(ids, relatedTargetId)) {
             return;
         }
         event.preventDefault();
@@ -200,7 +200,7 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu
     return (
         <>
             <View
-                nativeID={AMOUNT_VIEW_ID}
+                id={AMOUNT_VIEW_ID}
                 onMouseDown={(event) => onMouseDown(event, [AMOUNT_VIEW_ID])}
                 style={[styles.flex1, styles.flexRow, styles.w100, styles.alignItemsCenter, styles.justifyContentCenter]}
             >
@@ -231,11 +231,11 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu
             <View
                 onMouseDown={(event) => onMouseDown(event, [NUM_PAD_CONTAINER_VIEW_ID, NUM_PAD_VIEW_ID])}
                 style={[styles.w100, styles.justifyContentEnd, styles.pageWrapper]}
-                nativeID={NUM_PAD_CONTAINER_VIEW_ID}
+                id={NUM_PAD_CONTAINER_VIEW_ID}
             >
                 {DeviceCapabilities.canUseTouchScreen() ? (
                     <BigNumberPad
-                        nativeID={NUM_PAD_VIEW_ID}
+                        id={NUM_PAD_VIEW_ID}
                         numberPressed={updateAmountNumberPad}
                         longPressHandlerStateChanged={updateLongPressHandlerState}
                     />
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js
@@ -88,7 +88,7 @@ function BaseTwoFactorAuthForm(props) {
             autoComplete={props.autoComplete}
             textContentType="oneTimeCode"
             label={props.translate('common.twoFactorCode')}
-            nativeID="twoFactorAuthCode"
+            id="twoFactorAuthCode"
             name="twoFactorAuthCode"
             value={twoFactorAuthCode}
             onChangeText={onTextInput}
diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js
@@ -194,7 +194,7 @@ function LoginForm(props) {
                     value={login}
                     autoCompleteType="username"
                     textContentType="username"
-                    nativeID="username"
+                    id="username"
                     name="username"
                     onChangeText={onTextInput}
                     onSubmitEditing={validateAndSubmitForm}
diff --git a/src/stories/Composer.stories.js b/src/stories/Composer.stories.js
@@ -42,7 +42,7 @@ function Default(args) {
             <View style={[styles.flexRow, styles.mv5, styles.flexWrap, styles.w100]}>
                 <View
                     style={[styles.border, styles.noLeftBorderRadius, styles.noRightBorderRadius, styles.p5, styles.flex1]}
-                    nativeID={CONST.REPORT.DROP_NATIVE_ID}
+                    id={CONST.REPORT.DROP_NATIVE_ID}
                 >
                     <Text style={[styles.mb2, styles.textLabelSupporting]}>Entered Comment (Drop Enabled)</Text>
                     <Text>{comment}</Text>

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ function EmojiPickerButtonDropdown(props) {`
`42`	`42`	`style={styles.emojiPickerButtonDropdown}`
`43`	`43`	`disabled={props.isDisabled}`
`44`	`44`	`onPress={onPress}`
`45`		`- nativeID="emojiDropdownButton"`
	`45`	`+ id="emojiDropdownButton"`
`46`	`46`	`accessibilityLabel="statusEmoji"`
`47`	`47`	`accessibilityRole="text"`
`48`	`48`	`>`
Original file line number	Diff line number	Diff line change
`@@ -167,7 +167,7 @@ class BaseModal extends PureComponent {`
`167`	`167`	`<View`
`168`	`168`	`style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !this.props.isVisible ? styles.pointerEventsNone : {}]}`
`169`	`169`	`ref={this.props.forwardedRef}`
`170`		`- nativeID="no-drag-area"`
	`170`	`+ id="no-drag-area"`
`171`	`171`	`>`
`172`	`172`	`{this.props.children}`
`173`	`173`	`</View>`
Original file line number	Diff line number	Diff line change
`@@ -138,7 +138,7 @@ function HeaderView(props) {`
`138`	`138`	`return (`
`139`	`139`	`<View`
`140`	`140`	`style={[styles.appContentHeader, shouldShowBorderBottom && styles.borderBottom]}`
`141`		`- nativeID="drag-area"`
	`141`	`+ id="drag-area"`
`142`	`142`	`>`
`143`	`143`	`<View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>`
`144`	`144`	`{props.isSmallScreenWidth && (`
Original file line number	Diff line number	Diff line change
`@@ -165,7 +165,7 @@ class SidebarLinks extends React.PureComponent {`
`165`	`165`	`<View style={[styles.flex1, styles.h100]}>`
`166`	`166`	`<View`
`167`	`167`	`style={[styles.flexRow, styles.ph5, styles.pv3, styles.justifyContentBetween, styles.alignItemsCenter]}`
`168`		`- nativeID="drag-area"`
	`168`	`+ id="drag-area"`
`169`	`169`	`>`
`170`	`170`	`<Header`
`171`	`171`	`title={`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ function Default(args) {`
`42`	`42`	`<View style={[styles.flexRow, styles.mv5, styles.flexWrap, styles.w100]}>`
`43`	`43`	`<View`
`44`	`44`	`style={[styles.border, styles.noLeftBorderRadius, styles.noRightBorderRadius, styles.p5, styles.flex1]}`
`45`		`- nativeID={CONST.REPORT.DROP_NATIVE_ID}`
	`45`	`+ id={CONST.REPORT.DROP_NATIVE_ID}`
`46`	`46`	`>`
`47`	`47`	`<Text style={[styles.mb2, styles.textLabelSupporting]}>Entered Comment (Drop Enabled)</Text>`
`48`	`48`	`<Text>{comment}</Text>`