Revert "Typescript/keyboard (#1449)"

This reverts commit 8a36fa7.

Author: ethanshar

README.md

@@ -118,3 +118,4 @@ class MyScreen extends Component {
   }
 }
 ```
+

demo/src/screens/nativeComponentScreens/SafeAreaSpacerViewScreen.tsx renamed to demo/src/screens/nativeComponentScreens/SafeAreaSpacerViewScreen.js

@@ -1,14 +1,15 @@
 import React, {PureComponent} from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
-import {Text, View, SafeAreaSpacerView} from 'react-native-ui-lib';
+import {Text, View, SafeAreaSpacerView} from 'react-native-ui-lib'; //eslint-disable-line
 
 export default class SafeAreaSpacerViewScreen extends PureComponent {
+
   static options() {
     return {
       topBar: {
         drawBehind: true,
-        visible: false
-      }
+        visible: false,
+      },
     };
   }
 
@@ -18,7 +19,7 @@ export default class SafeAreaSpacerViewScreen extends PureComponent {
         <ScrollView contentContainerStyle={styles.scrollView}>
           <View paddingH-25 center>
             <Text text50 center>
-              {'When there are absolute-positioned view at the bottom and top,' +
+              {'When there are absolute-positioned view at the bottom and top,' + 
                 'it is sometimes hard or impossible to change the layout and avoid it.'}
               <Text red50> SafeAreaSpacerView </Text>
               {'can be used as a BOTTOM or TOP spacer and will get the height of the safe area insets'}
@@ -42,16 +43,16 @@ const styles = StyleSheet.create({
   scrollView: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   topView: {
     position: 'absolute',
     top: 0,
-    left: 0
+    left: 0,
   },
   bottomView: {
     position: 'absolute',
     bottom: 0,
-    left: 0
-  }
+    left: 0,
+  },
 });

generatedTypes/index.d.ts

@@ -85,14 +85,6 @@ export {default as Wizard, WizardProps, WizardStepProps, WizardStepStates, Wizar
 export {default as ListItem, ListItemProps} from './components/listItem';
 export {default as StateScreen, StateScreenProps} from './components/stateScreen';
 export {default as LoaderScreen, LoaderScreenProps} from './components/loaderScreen';
-export {
-  Keyboard,
-  SafeAreaSpacerView,
-  WheelPicker,
-  WheelPickerProps,
-  HighlighterOverlayView,
-  SafeAreaInsetsManager
-} from '../lib/components';
 
 /* All components with manual typings */
 export {
@@ -113,6 +105,8 @@ export {
   UIComponent,
   forwardRef,
   AvatarHelper,
+  WheelPicker,
+  WheelPickerProps,
   Picker,
   PickerItemValue,
   PickerProps
@@ -122,5 +116,11 @@ export {
 export const AnimatedImage;
 export const AnimatedScanner;
 export const DateTimePicker;
+export const HighlighterOverlayView;
+export const Keyboard;
+export const KeyboardAwareListView;
+export const KeyboardAwareScrollView;
+export const SafeAreaInsetsManager;
+export const SafeAreaSpacerView;
 export const SelectableComponent;
 export const TextField;

jest-setup.js

@@ -10,8 +10,3 @@ jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock
 global.__reanimatedWorkletInit = jest.fn();
 jest.mock('react-native-gesture-handler', () => {});
 jest.mock('@react-native-picker/picker', () => ({Picker: {Item: {}}}));
-jest.mock('react-native', () => {
-  const reactNative = jest.requireActual('react-native');
-  reactNative.NativeModules.KeyboardTrackingViewTempManager = {};
-  return reactNative;
-});

lib/components/HighlighterOverlayView.tsx renamed to lib/components/HighlighterOverlayView.js

@@ -1,41 +1,11 @@
 import React from 'react';
-import {requireNativeComponent, processColor, Platform, StyleSheet, Modal, ViewStyle} from 'react-native';
+import PropTypes from 'prop-types';
+import {requireNativeComponent, processColor, Platform, StyleSheet, Modal} from 'react-native';
 
-const NativeHighlighterView = requireNativeComponent('HighlighterView');
+const NativeHighlighterView = requireNativeComponent('HighlighterView', null);
 const DefaultOverlayColor = 'rgba(0, 0, 0, 0.5)';
 
-type HighlightFrameType = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-type HighlightViewTagParams = {
-  padding: number | ViewStyle['padding'];
-  offset: Pick<HighlightFrameType, 'x' | 'y'>;
-}
-
-export type HighlighterOverlayViewProps = {
-  visible: boolean;
-  overlayColor?: string;
-  borderRadius?: number;
-  strokeColor?: string;
-  strokeWidth?: number;
-  onRequestClose?: () => void;
-  highlightFrame?: HighlightFrameType;
-  style?: ViewStyle;
-  highlightViewTag?: number | null;
-  children?: JSX.Element[] | JSX.Element;
-  highlightViewTagParams?: HighlightViewTagParams;
-  minimumRectSize?: Pick<HighlightFrameType, 'width' | 'height'>;
-  innerPadding?: number;
-  accessible?: boolean;
-  testID?: string;
-};
-
-
-const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => {
+const HighlighterOverlayView = (props) => {
   const {
     overlayColor,
     borderRadius,
@@ -49,15 +19,13 @@ const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => {
     highlightViewTag,
     highlightViewTagParams,
     minimumRectSize,
-    innerPadding
+    innerPadding,
   } = props;
 
   let overlayColorToUse = overlayColor || DefaultOverlayColor;
   let strokeColorToUse = strokeColor;
   if (Platform.OS === 'android') {
-    // @ts-ignore
     overlayColorToUse = processColor(overlayColorToUse);
-    // @ts-ignore
     strokeColorToUse = processColor(strokeColorToUse);
   }
 
@@ -66,10 +34,9 @@ const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => {
       visible={!!(visible)}
       animationType={'fade'}
       transparent
-      onRequestClose={() => onRequestClose?.()}
+      onRequestClose={() => onRequestClose && onRequestClose()}
     >
       <NativeHighlighterView
-        // @ts-ignore, this became private, not sure if I should remove it 
         highlightFrame={highlightFrame}
         style={[style, {...StyleSheet.absoluteFillObject, backgroundColor: 'transparent'}]}
         overlayColor={overlayColorToUse}
@@ -86,5 +53,46 @@ const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => {
   );
 };
 
+HighlighterOverlayView.propTypes = {
+  overlayColor: PropTypes.string,
+  borderRadius: PropTypes.number,
+  strokeColor: PropTypes.string,
+  strokeWidth: PropTypes.number,
+  visible: PropTypes.bool.isRequired,
+  onRequestClose: PropTypes.func,
+  highlightFrame: PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number,
+    width: PropTypes.number,
+    height: PropTypes.number,
+  }),
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
+  highlightViewTag: PropTypes.number,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+  highlightViewTagParams: PropTypes.shape({
+    padding: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        top: PropTypes.number,
+        left: PropTypes.number,
+        bottom: PropTypes.number,
+        right: PropTypes.number}),
+    ]),
+    offset: PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number,
+    }),
+  }),
+  minimumRectSize: PropTypes.shape({
+    width: PropTypes.number,
+    height: PropTypes.number,
+  }),
+  innerPadding: PropTypes.number,
+};
+
 HighlighterOverlayView.displayName = 'IGNORE';
+
 export default HighlighterOverlayView;

lib/components/Keyboard/KeyboardInput/CustomKeyboardView/CustomKeyboardView.android.tsx renamed to lib/components/Keyboard/KeyboardInput/CustomKeyboardView.android.js

@@ -1,13 +1,19 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {requireNativeComponent} from 'react-native';
-import TextInputKeyboardManager from '../TextInputKeyboardManager/TextInputKeyboardManager.android';
-import KeyboardRegistry from '../KeyboardRegistry';
-import CustomKeyboardViewBase, {CustomKeyboardViewBaseProps} from '../CustomKeyboardViewBase';
+import TextInputKeyboardManager from './TextInputKeyboardManager';
+import KeyboardRegistry from './KeyboardRegistry';
+import CustomKeyboardViewBase from './CustomKeyboardViewBase';
 
 const CustomKeyboardViewNativeAndroid = requireNativeComponent('CustomKeyboardViewNativeTemp');
 
-export default class CustomKeyboardView extends CustomKeyboardViewBase<CustomKeyboardViewBaseProps> {
+export default class CustomKeyboardView extends CustomKeyboardViewBase {
   static displayName = 'IGNORE';
+  static propTypes = {
+    initialProps: PropTypes.object,
+    component: PropTypes.string,
+    onItemSelected: PropTypes.func
+  };
 
   async componentDidUpdate(prevProps) {
     const {component} = this.props;

lib/components/Keyboard/KeyboardInput/CustomKeyboardView/CustomKeyboardView.ios.tsx renamed to lib/components/Keyboard/KeyboardInput/CustomKeyboardView.ios.js

@@ -1,26 +1,25 @@
-import TextInputKeyboardManager from './../TextInputKeyboardManager/TextInputKeyboardManager.ios';
-import KeyboardRegistry from './../KeyboardRegistry';
-import CustomKeyboardViewBase, {CustomKeyboardViewBaseProps} from './../CustomKeyboardViewBase';
+import PropTypes from 'prop-types';
+import TextInputKeyboardManager from './TextInputKeyboardManager';
+import KeyboardRegistry from './KeyboardRegistry';
+import CustomKeyboardViewBase from './CustomKeyboardViewBase';
 
-export type CustomKeyboardViewProps = CustomKeyboardViewBaseProps & {
-  /**
-   * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.)
-   */
-  inputRef?: any;
-  useSafeArea?: boolean;
-};
-
-export default class CustomKeyboardView extends CustomKeyboardViewBase<CustomKeyboardViewProps> {
+export default class CustomKeyboardView extends CustomKeyboardViewBase {
   static displayName = 'IGNORE';
+  static propTypes = {
+    /**
+     * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.)
+     */
+    inputRef: PropTypes.object,
+    initialProps: PropTypes.object,
+    component: PropTypes.string,
+    onItemSelected: PropTypes.func,
+    useSafeArea: PropTypes.bool
+  };
 
   static defaultProps = {
-    initialProps: {},
     useSafeArea: true
   };
 
-  registeredRequestShowKeyboard: boolean;
-  keyboardExpandedToggle: [any];
-
   constructor(props) {
     super(props);
 

lib/components/Keyboard/KeyboardInput/CustomKeyboardView/index.tsx

@@ -1,32 +1,26 @@
-import React, {Component} from 'react';
+import {Component} from 'react';
+import PropTypes from 'prop-types';
 import KeyboardRegistry from './KeyboardRegistry';
-import {EventSubscription} from 'react-native';
 
-export type CustomKeyboardViewBaseProps = {
-  inputRef?: any;
-  initialProps?: any;
-  component?: string;
-  onItemSelected?: () => void;
-  onRequestShowKeyboard?: (keyboardId: string) => void;
-  children?: React.ReactChild | React.ReactChild[];
-}
+export default class CustomKeyboardViewBase extends Component {
+  static propTypes = {
+    initialProps: PropTypes.object,
+    component: PropTypes.string,
+    onItemSelected: PropTypes.func
+  };
 
-export default class CustomKeyboardViewBase<T extends CustomKeyboardViewBaseProps> extends Component<T> {
-  
   static defaultProps = {
     initialProps: {}
   };
 
-  registeredRequestShowKeyboard = false;
-  keyboardExpandedToggle: any;
-  keyboardEventListeners: [EventSubscription];
-
   constructor(props) {
     super(props);
 
     const {component, onItemSelected} = props;
     if (component) {
       this.addOnItemSelectListener(onItemSelected, component);
+
+      this.registeredRequestShowKeyboard = false;
     }
 
     this.keyboardExpandedToggle = {};
@@ -41,7 +35,7 @@ export default class CustomKeyboardViewBase<T extends CustomKeyboardViewBaseProp
     KeyboardRegistry.removeListeners('onRequestShowKeyboard');
 
     if (this.keyboardEventListeners) {
-      this.keyboardEventListeners.forEach((eventListener: EventSubscription) => eventListener.remove());
+      this.keyboardEventListeners.forEach(eventListener => eventListener.remove());
     }
 
     if (component) {