uilib-native 3.0.4 → 3.0.5

package/android/src/main/java/com/wix/reactnativeuilib/keyboardinput/CustomKeyboardLayout.java

@@ -1,5 +1,6 @@
 package com.wix.reactnativeuilib.keyboardinput;
 
+import android.app.Activity;
 import android.content.Context;
 import android.view.View;
 import android.view.Window;
@@ -24,6 +25,8 @@ public class CustomKeyboardLayout implements ReactSoftKeyboardMonitor.Listener,
     private final InputMethodManager mInputMethodManager;
     private final ReactSoftKeyboardMonitor mKeyboardMonitor;
     private WeakReference<CustomKeyboardRootViewShadow> mShadowNode = new WeakReference<>(null);
+    private int mSoftInputMode;
+    private boolean mIsShown = false;
 
     public CustomKeyboardLayout(ReactContext reactContext, ReactSoftKeyboardMonitor keyboardMonitor, ReactScreenMonitor screenMonitor) {
         mKeyboardMonitor = keyboardMonitor;
@@ -33,6 +36,18 @@ public class CustomKeyboardLayout implements ReactSoftKeyboardMonitor.Listener,
         screenMonitor.addListener(this);
     }
 
+    public void setShown(boolean isShown) {
+        mIsShown = isShown;
+        Window window = getWindow();
+        if (window != null) {
+            if (mIsShown) {
+                mSoftInputMode = window.getAttributes().softInputMode;
+            } else {
+                window.setSoftInputMode(mSoftInputMode);
+            }
+        }
+    }
+
     @Override
     public void onSoftKeyboardVisible(boolean distinct) {
         if (distinct) {
@@ -75,14 +90,17 @@ public class CustomKeyboardLayout implements ReactSoftKeyboardMonitor.Listener,
         runOnUIThread(new Runnable() {
             @Override
             public void run() {
-                final View focusedView = getCurrentActivity().getCurrentFocus();
-                if (focusedView instanceof EditText) {
-                    showSoftKeyboard();
-                } else {
-                    hideCustomKeyboardContent();
-                    clearKeyboardOverlayMode();
+                Activity currentActivity = getCurrentActivity();
+                if (currentActivity != null) {
+                    final View focusedView = currentActivity.getCurrentFocus();
+                    if (focusedView instanceof EditText) {
+                        showSoftKeyboard();
+                    } else {
+                        hideCustomKeyboardContent();
+                        clearKeyboardOverlayMode();
+                    }
+                    promise.resolve(null);
                 }
-                promise.resolve(null);
             }
         });
     }
@@ -91,9 +109,12 @@ public class CustomKeyboardLayout implements ReactSoftKeyboardMonitor.Listener,
         runOnUIThread(new Runnable() {
             @Override
             public void run() {
-                final View focusedView = getCurrentActivity().getCurrentFocus();
-                if (focusedView != null) {
-                    focusedView.clearFocus();
+                Activity currentActivity = getCurrentActivity();
+                if (currentActivity != null) {
+                    final View focusedView = currentActivity.getCurrentFocus();
+                    if (focusedView != null) {
+                        focusedView.clearFocus();
+                    }
                 }
             }
         });
@@ -167,16 +188,19 @@ public class CustomKeyboardLayout implements ReactSoftKeyboardMonitor.Listener,
     }
 
     private void setKeyboardOverlayMode() {
-        Window window = getWindow();
-        if (window != null) {
-            window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
-        }
+        setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
     }
 
     private void clearKeyboardOverlayMode() {
-        Window window = getWindow();
-        if (window != null) {
-            window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
+        setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
+    }
+
+    private void setSoftInputMode(int softInputMode) {
+        if (mIsShown) {
+            Window window = getWindow();
+            if (window != null) {
+                window.setSoftInputMode(softInputMode);
+            }
         }
     }
 

package/android/src/main/java/com/wix/reactnativeuilib/keyboardinput/CustomKeyboardRootView.java

@@ -24,4 +24,16 @@ public class CustomKeyboardRootView extends FrameLayout {
         }
         super.onViewAdded(child);
     }
+
+    @Override
+    protected void onAttachedToWindow() {
+        super.onAttachedToWindow();
+        mLayout.setShown(true);
+    }
+
+    @Override
+    protected void onDetachedFromWindow() {
+        mLayout.setShown(false);
+        super.onDetachedFromWindow();
+    }
 }

package/components/{HighlighterOverlayView.js → HighlighterOverlayView.tsx}

@@ -1,11 +1,41 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import {requireNativeComponent, processColor, Platform, StyleSheet, Modal} from 'react-native';
+import {requireNativeComponent, processColor, Platform, StyleSheet, Modal, ViewStyle} from 'react-native';
 
-const NativeHighlighterView = requireNativeComponent('HighlighterView', null);
+const NativeHighlighterView = requireNativeComponent('HighlighterView');
 const DefaultOverlayColor = 'rgba(0, 0, 0, 0.5)';
 
-const HighlighterOverlayView = (props) => {
+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 {
     overlayColor,
     borderRadius,
@@ -19,13 +49,15 @@ const HighlighterOverlayView = (props) => {
     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);
   }
 
@@ -34,9 +66,10 @@ const HighlighterOverlayView = (props) => {
       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}
@@ -53,44 +86,5 @@ const HighlighterOverlayView = (props) => {
   );
 };
 
-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;

package/components/Keyboard/KeyboardInput/{CustomKeyboardView.android.js → CustomKeyboardView/CustomKeyboardView.android.tsx}

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

package/components/Keyboard/KeyboardInput/{CustomKeyboardView.ios.js → CustomKeyboardView/CustomKeyboardView.ios.tsx}

@@ -1,25 +1,24 @@
-import PropTypes from 'prop-types';
-import TextInputKeyboardManager from './TextInputKeyboardManager';
-import KeyboardRegistry from './KeyboardRegistry';
-import CustomKeyboardViewBase from './CustomKeyboardViewBase';
+import TextInputKeyboardManager from './../TextInputKeyboardManager/TextInputKeyboardManager.ios';
+import KeyboardRegistry from './../KeyboardRegistry';
+import CustomKeyboardViewBase, {CustomKeyboardViewBaseProps} from './../CustomKeyboardViewBase';
 
-export default class CustomKeyboardView extends CustomKeyboardViewBase {
-  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
-  };
+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> {
+  static displayName = 'IGNORE';
 
   static defaultProps = {
+    initialProps: {},
     useSafeArea: true
   };
 
-  constructor(props) {
+  constructor(props: CustomKeyboardViewProps) {
     super(props);
 
     const {component} = props;
@@ -27,7 +26,7 @@ export default class CustomKeyboardView extends CustomKeyboardViewBase {
       this.registeredRequestShowKeyboard = false;
     }
 
-    KeyboardRegistry.addListener('onToggleExpandedKeyboard', args => {
+    KeyboardRegistry.addListener('onToggleExpandedKeyboard', (args: any) => {
       const {inputRef, initialProps} = this.props;
       if (inputRef) {
         if (this.keyboardExpandedToggle[args.keyboardId] === undefined) {
@@ -46,9 +45,9 @@ export default class CustomKeyboardView extends CustomKeyboardViewBase {
     super.componentWillUnmount();
   }
 
-  async UNSAFE_componentWillReceiveProps(nextProps) {
-    const {inputRef: nextInputRef, component: nextComponent, initialProps: nextInitialProps, useSafeArea} = nextProps;
-    const {component} = this.props;
+  componentDidUpdate(prevProps: CustomKeyboardViewProps) {
+    const {inputRef: nextInputRef, component: nextComponent, initialProps: nextInitialProps, useSafeArea} = this.props;
+    const {component} = prevProps;
 
     if (nextInputRef && nextComponent !== component) {
       if (nextComponent) {
@@ -62,7 +61,7 @@ export default class CustomKeyboardView extends CustomKeyboardViewBase {
       }
     }
 
-    await super.UNSAFE_componentWillReceiveProps(nextProps);
+    super.componentDidUpdate(prevProps);
   }
 
   render() {

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Platform} from 'react-native';
+import {default as CustomKeyboardViewIOS, CustomKeyboardViewProps} from './CustomKeyboardView.ios';
+import {default as CustomKeyboardViewAndroid} from './CustomKeyboardView.android';
+
+const IsAndroid = Platform.OS === 'android';
+
+const CustomKeyboardView = (props: CustomKeyboardViewProps) => {
+  const Container = IsAndroid ? CustomKeyboardViewAndroid : CustomKeyboardViewIOS;
+
+  return (
+    <Container {...props}/>
+  );
+};
+
+export default CustomKeyboardView;

package/components/Keyboard/KeyboardInput/{CustomKeyboardViewBase.js → CustomKeyboardViewBase.tsx}

@@ -1,32 +1,37 @@
-import {Component} from 'react';
-import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import KeyboardRegistry from './KeyboardRegistry';
+import {EventSubscription} from 'react-native';
 
-export default class CustomKeyboardViewBase extends Component {
-  static propTypes = {
-    initialProps: PropTypes.object,
-    component: PropTypes.string,
-    onItemSelected: PropTypes.func
-  };
+export type CustomKeyboardViewBaseProps = {
+  inputRef?: any;
+  initialProps?: any;
+  component?: string;
+  onItemSelected?: (component?: string, args?: any) => void;
+  onRequestShowKeyboard?: (keyboardId: string) => void;
+  children?: React.ReactChild | React.ReactChild[];
+};
 
+export default class CustomKeyboardViewBase<T extends CustomKeyboardViewBaseProps> extends Component<T> {
   static defaultProps = {
     initialProps: {}
   };
 
-  constructor(props) {
+  registeredRequestShowKeyboard = false;
+  keyboardExpandedToggle: any;
+  keyboardEventListeners: EventSubscription[] = [];
+
+  constructor(props: T) {
     super(props);
 
     const {component, onItemSelected} = props;
     if (component) {
       this.addOnItemSelectListener(onItemSelected, component);
-
-      this.registeredRequestShowKeyboard = false;
     }
 
     this.keyboardExpandedToggle = {};
   }
 
-  shouldComponentUpdate(nextProps) {
+  shouldComponentUpdate(nextProps: T) {
     return nextProps.component !== this.props.component;
   }
 
@@ -35,7 +40,7 @@ export default class CustomKeyboardViewBase extends Component {
     KeyboardRegistry.removeListeners('onRequestShowKeyboard');
 
     if (this.keyboardEventListeners) {
-      this.keyboardEventListeners.forEach(eventListener => eventListener.remove());
+      this.keyboardEventListeners.forEach((eventListener: EventSubscription) => eventListener.remove());
     }
 
     if (component) {
@@ -43,28 +48,29 @@ export default class CustomKeyboardViewBase extends Component {
     }
   }
 
-  addOnItemSelectListener(onItemSelected, component) {
+  addOnItemSelectListener(onItemSelected: CustomKeyboardViewBaseProps['onItemSelected'],
+    component: CustomKeyboardViewBaseProps['component']) {
     if (onItemSelected) {
-      KeyboardRegistry.addListener(`${component}.onItemSelected`, args => {
+      KeyboardRegistry.addListener(`${component}.onItemSelected`, (args: any) => {
         onItemSelected(component, args);
       });
     }
   }
 
-  async UNSAFE_componentWillReceiveProps(nextProps) {
-    const {onRequestShowKeyboard} = nextProps;
+  componentDidUpdate(prevProps: T) {
+    const {onRequestShowKeyboard} = this.props;
 
     if (onRequestShowKeyboard && !this.registeredRequestShowKeyboard) {
       this.registeredRequestShowKeyboard = true;
-      KeyboardRegistry.addListener('onRequestShowKeyboard', args => {
+      KeyboardRegistry.addListener('onRequestShowKeyboard', (args: any) => {
         onRequestShowKeyboard(args.keyboardId);
       });
     }
 
-    this.registerListener(this.props, nextProps);
+    this.registerListener(prevProps, this.props);
   }
 
-  registerListener(props, nextProps) {
+  registerListener(props: T, nextProps: T) {
     const {component, onItemSelected} = nextProps;
     if (component && props.component !== component) {
       if (props.component) {