refactor: fix eslint errors

Author: luizbaldi

.eslintrc.js

@@ -39,5 +39,6 @@ module.exports = {
     'react/jsx-props-no-spreading': 'off',
     'react/prop-types': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
   },
 };

example/babel.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
 const pak = require('../package.json');
 

example/metro.config.js

@@ -1,7 +1,8 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable import/no-extraneous-dependencies */
+
 const path = require('path');
-/* eslint-disable-next-line */
 const blacklist = require('metro-config/src/defaults/blacklist');
-/* eslint-disable-next-line */
 const escape = require('escape-string-regexp');
 const pak = require('../package.json');
 

example/src/examples/SelectBoxExample.tsx

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
 import { Panel, SelectBox, Fieldset } from 'react95-native';
 
-const options = ['apple', 'orange', 'banana', 'pear', 'watermelon'].map(o => ({
-  label: o,
-  value: o,
-}));
+const options = ['apple', 'orange', 'banana', 'pear', 'watermelon'].map(
+  option => ({
+    label: option,
+    value: option,
+  }),
+);
 
 const SelectBoxExample = () => {
   const [value, setValue] = useState(options[0].value);

example/webpack.config.js

@@ -1,5 +1,7 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable import/no-extraneous-dependencies */
+
 const path = require('path');
-/* eslint-disable-next-line */
 const createExpoWebpackConfigAsync = require('@expo/webpack-config');
 const { resolver } = require('./metro.config');
 

src/Fieldset/Fieldset.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { StyleSheet, View, Text } from 'react-native';
+import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
 
 import { ThemeContext } from '../common/theming/Theme';
 import { Border } from '../common/styleElements';
@@ -9,7 +9,7 @@ export const testId = 'fieldset';
 type Props = {
   label?: React.ReactNode;
   children: React.ReactNode;
-  style?: Object;
+  style?: StyleProp<ViewStyle>;
 };
 
 const Fieldset = ({ children, label, style = {} }: Props) => {

src/Menu/Menu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 import { Panel } from '..';
 
@@ -10,7 +10,7 @@ type MenuProps = {
   // see react-native-paper
   children: React.ReactNode;
   orientation?: 'vertical' | 'horizontal';
-  style?: Object;
+  style?: StyleProp<ViewStyle>;
 };
 
 const Menu = ({

src/Menu/MenuItem.tsx

@@ -1,5 +1,11 @@
 import React, { useContext, useState } from 'react';
-import { StyleSheet, View, TouchableHighlight } from 'react-native';
+import {
+  StyleSheet,
+  View,
+  TouchableHighlight,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 
 import { ThemeContext } from '../common/theming/Theme';
 import { blockSizes } from '../common/styles';
@@ -15,7 +21,7 @@ type Props = {
   // icon: React.ReactNode;
   onPress: () => void;
   disabled?: boolean;
-  style?: Object;
+  style?: StyleProp<ViewStyle>;
 };
 
 export const Item = ({

src/Select/Select.tsx

@@ -5,6 +5,8 @@ import {
   Text,
   TouchableHighlight,
   ImageBackground,
+  StyleProp,
+  ViewStyle,
 } from 'react-native';
 
 import { ThemeContext } from '../common/theming/Theme';
@@ -26,8 +28,8 @@ type SelectProps = {
   value: any;
   disabled?: boolean;
   // TODO: what to put below?
-  onChange: () => void;
-  style?: Object;
+  onChange: (value: any) => void;
+  style?: StyleProp<ViewStyle>;
   menuMaxHeight?: number;
 };
 
@@ -47,6 +49,19 @@ const Select = ({
     onChange(option.value);
     setIsOpen(false);
   }
+
+  function getLabelContainerBackgroundColor() {
+    if (disabled) {
+      return theme.material;
+    }
+
+    if (isPressed) {
+      return theme.hoverBackground;
+    }
+
+    return theme.canvas;
+  }
+
   const [selectedOptions, selectOptions] = getSelectOptions({
     options,
     values: [value],
@@ -86,11 +101,7 @@ const Select = ({
                 {
                   borderWidth: 2,
                   borderColor: disabled ? theme.material : theme.canvas,
-                  backgroundColor: disabled
-                    ? theme.material
-                    : isPressed
-                    ? theme.hoverBackground
-                    : theme.canvas,
+                  backgroundColor: getLabelContainerBackgroundColor(),
                 },
 
                 isPressed && theme.border.focusSecondaryOutline,

src/Select/SelectBase.tsx

@@ -12,7 +12,7 @@ export type Option = {
 
 type SelectItemProps = {
   option: Option;
-  onPress: () => void;
+  onPress: (value: any) => void;
   isSelected: boolean;
 };
 
@@ -81,7 +81,7 @@ type SelectOptionsProps = {
   values: [any];
   disabled?: boolean;
   // TODO: what to put below?
-  onChange: () => void;
+  onChange: (value: any) => void;
 };
 
 export default function getSelectOptions({

src/Select/SelectBox.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { Border } from '../common/styleElements';
 import { ThemeContext } from '../common/theming/Theme';
@@ -15,8 +15,8 @@ type SelectBoxProps = {
   value: [any] | any;
   //   disabled?: boolean;
   // TODO: what to put below?
-  onChange: () => void;
-  style?: Object;
+  onChange: (value: any) => void;
+  style?: StyleProp<ViewStyle>;
 };
 
 const SelectBox = ({

src/Text/Text.tsx

@@ -35,14 +35,22 @@ const Text = ({
     Linking.openURL(linkUrl || '');
   };
 
+  const getTextStyle = () => {
+    if (disabled) {
+      return theme.text.disabled;
+    }
+
+    if (secondary) {
+      return theme.text.secondary;
+    }
+
+    return theme.text.default;
+  };
+
   return (
     <NativeText
       style={[
-        disabled
-          ? theme.text.disabled
-          : secondary
-          ? theme.text.secondary
-          : theme.text.default,
+        getTextStyle(),
         linkUrl ? { ...styles.link, color: theme.anchor } : {},
         {
           fontWeight: bold ? 'bold' : 'normal',

src/common/styleElements.tsx

@@ -9,8 +9,8 @@ import { ThemeContext } from './theming/Theme';
 type BorderProps = {
   invert?: boolean;
   variant?: 'default' | 'well' | 'outside' | 'cutout';
-  style?: object;
-  sharedStyle?: object;
+  style?: StyleProp<ViewStyle>;
+  sharedStyle?: StyleProp<ViewStyle>;
   radius?: number;
   children?: React.ReactNode;
 };