Merge pull request #17908 from abdulrahuman5196/warnings-removal

Ignoring invalid text style warnings
Expensify · Apr 26, 2023 · 6f0888c · 6f0888c
2 parents 9ec7704 + f95739d
commit 6f0888c
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 38 deletions.
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
@@ -181,12 +181,10 @@ function getNavigationDrawerType(isSmallScreenWidth) {
  */
 function getZoomCursorStyle(isZoomed, isDragging) {
     if (!isZoomed) {
-        return {cursor: 'zoom-in'};
+        return styles.cursorZoomIn;
     }
 
-    return {
-        cursor: isDragging ? 'grabbing' : 'zoom-out',
-    };
+    return isDragging ? styles.cursorGrabbing : styles.cursorZoomOut;
 }
 
 /**
@@ -543,7 +541,7 @@ function getReportActionItemStyle(isHovered = false, isLoading = false) {
             // Warning: Setting this to a non-transparent color will cause unread indicator to break on Android
             : colors.transparent,
         opacity: isLoading ? 0.5 : 1,
-        cursor: 'initial',
+        ...styles.cursorInitial,
     };
 }
 

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -20,6 +20,8 @@ import pointerEventsNone from './pointerEventsNone';
 import pointerEventsAuto from './pointerEventsAuto';
 import overflowXHidden from './overflowXHidden';
 import CONST from '../CONST';
+import cursor from './utilities/cursor';
+import userSelect from './utilities/userSelect';
 
 const picker = {
     backgroundColor: themeColors.transparent,
@@ -157,6 +159,8 @@ const styles = {
     ...wordBreak,
     ...whiteSpace,
     ...writingDirection,
+    ...cursor,
+    ...userSelect,
     ...themeColors,
 
     rateCol: {
@@ -628,8 +632,8 @@ const styles = {
             appearance: 'none',
             height: 26,
             opacity: 1,
-            cursor: 'pointer',
             backgroundColor,
+            ...cursor.cursorPointer,
         },
         inputAndroid: {
             fontFamily: fontFamily.EXP_NEUE,
@@ -941,7 +945,7 @@ const styles = {
 
         inputWeb: {
             appearance: 'none',
-            cursor: disabled ? 'not-allowed' : 'pointer',
+            ...(disabled ? cursor.cursorDisabled : cursor.cursorPointer),
             ...picker,
             backgroundColor,
         },
@@ -1341,8 +1345,7 @@ const styles = {
         // Starting version 6.3.2 @react-navigation/drawer adds "user-select: none;" to its container.
         // We add user-select-auto to the inner component to prevent incorrect triple-click text selection.
         // For further explanation see - https://github.com/Expensify/App/pull/12730/files#r1022883823
-        userSelect: 'text',
-        WebkitUserSelect: 'text',
+        ...userSelect.userSelectText,
     },
 
     appContentHeader: {
@@ -1437,7 +1440,7 @@ const styles = {
         fontFamily: fontFamily.EXP_NEUE,
         lineHeight: variables.lineHeightXLarge,
         maxWidth: '100%',
-        cursor: 'auto',
+        ...cursor.cursorAuto,
         ...whiteSpace.preWrap,
         ...wordBreak.breakWord,
     },
@@ -1660,8 +1663,7 @@ const styles = {
     },
 
     navigationModalOverlay: {
-        userSelect: 'none',
-        WebkitUserSelect: 'none',
+        ...userSelect.userSelectNone,
         position: 'absolute',
         width: '100%',
         height: '100%',
@@ -2176,7 +2178,7 @@ const styles = {
         flexDirection: 'row',
         alignItems: 'center',
         zIndex: 1,
-        cursor: 'default',
+        ...cursor.cursorDefault,
     },
 
     unreadIndicatorLine: {
@@ -2232,9 +2234,9 @@ const styles = {
     attachmentModalArrowsContainer: {
         display: 'flex',
         justifyContent: 'center',
-        cursor: 'unset',
         height: '100%',
         width: '100%',
+        ...cursor.cursorUnset,
     },
 
     leftAttachmentArrow: {
@@ -2498,23 +2500,11 @@ const styles = {
         marginVertical: 4,
     },
 
-    cursorDefault: {
-        cursor: 'default',
-    },
-
-    cursorDisabled: {
-        cursor: 'not-allowed',
-    },
-
     noSelect: {
         boxShadow: 'none',
         outline: 'none',
     },
 
-    cursorPointer: {
-        cursor: 'pointer',
-    },
-
     fullscreenCard: {
         position: 'absolute',
         left: 0,
@@ -2875,7 +2865,7 @@ const styles = {
         alignItems: 'center',
         justifyContent: 'center',
         backgroundColor: themeColors.imageCropBackgroundColor,
-        cursor: 'move',
+        ...cursor.cursorMove,
     },
 
     sliderKnobTooltipView: {
@@ -2891,7 +2881,7 @@ const styles = {
         width: variables.sliderKnobSize,
         borderRadius: variables.sliderKnobSize / 2,
         left: -(variables.sliderKnobSize / 2),
-        cursor: 'pointer',
+        ...cursor.cursorPointer,
     },
 
     sliderBar: {
@@ -2902,16 +2892,6 @@ const styles = {
         justifyContent: 'center',
     },
 
-    userSelectText: {
-        userSelect: 'text',
-        WebkitUserSelect: 'text',
-    },
-
-    userSelectNone: {
-        userSelect: 'none',
-        WebkitUserSelect: 'none',
-    },
-
     screenCenteredContainer: {
         flex: 1,
         justifyContent: 'center',

diff --git a/src/styles/utilities/cursor/index.js b/src/styles/utilities/cursor/index.js
@@ -0,0 +1,32 @@
+export default {
+    cursorDefault: {
+        cursor: 'default',
+    },
+    cursorDisabled: {
+        cursor: 'not-allowed',
+    },
+    cursorPointer: {
+        cursor: 'pointer',
+    },
+    cursorMove: {
+        cursor: 'move',
+    },
+    cursorUnset: {
+        cursor: 'unset',
+    },
+    cursorAuto: {
+        cursor: 'auto',
+    },
+    cursorZoomIn: {
+        cursor: 'zoom-in',
+    },
+    cursorGrabbing: {
+        cursor: 'grabbing',
+    },
+    cursorZoomOut: {
+        cursor: 'zoom-out',
+    },
+    cursorInitial: {
+        cursor: 'initial',
+    },
+};
diff --git a/src/styles/utilities/cursor/index.native.js b/src/styles/utilities/cursor/index.native.js
@@ -0,0 +1,12 @@
+export default {
+    cursorDefault: {},
+    cursorDisabled: {},
+    cursorPointer: {},
+    cursorMove: {},
+    cursorUnset: {},
+    cursorAuto: {},
+    cursorZoomIn: {},
+    cursorGrabbing: {},
+    cursorZoomOut: {},
+    cursorInitial: {},
+};
diff --git a/src/styles/utilities/userSelect/index.js b/src/styles/utilities/userSelect/index.js
@@ -0,0 +1,10 @@
+export default {
+    userSelectText: {
+        userSelect: 'text',
+        WebkitUserSelect: 'text',
+    },
+    userSelectNone: {
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
+    },
+};
diff --git a/src/styles/utilities/userSelect/index.native.js b/src/styles/utilities/userSelect/index.native.js
@@ -0,0 +1,8 @@
+export default {
+    userSelectText: {
+        userSelect: 'text',
+    },
+    userSelectNone: {
+        userSelect: 'none',
+    },
+};