/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 * @flow
 */

'use strict';

const Keyboard = require('Keyboard');
const LayoutAnimation = require('LayoutAnimation');
const Platform = require('Platform');
const React = require('React');
const StyleSheet = require('StyleSheet');
const View = require('View');

import type EmitterSubscription from 'EmitterSubscription';
import type {ViewStyleProp} from 'StyleSheet';
import type {ViewProps, ViewLayout, ViewLayoutEvent} from 'ViewPropTypes';
import type {KeyboardEvent} from 'Keyboard';

type Props = $ReadOnly<{|
  ...ViewProps,

  /**
   * Specify how to react to the presence of the keyboard.
   */
  behavior?: ?('height' | 'position' | 'padding'),

  /**
   * Style of the content container when `behavior` is 'position'.
   */
  contentContainerStyle?: ?ViewStyleProp,

  /**
   * Controls whether this `KeyboardAvoidingView` instance should take effect.
   * This is useful when more than one is on the screen. Defaults to true.
   */
  enabled: ?boolean,

  /**
   * Distance between the top of the user screen and the React Native view. This
   * may be non-zero in some cases. Defaults to 0.
   */
  keyboardVerticalOffset: number,
|}>;

type State = {|
  bottom: number,
|};

/**
 * View that moves out of the way when the keyboard appears by automatically
 * adjusting its height, position, or bottom padding.
 */
class KeyboardAvoidingView extends React.Component<Props, State> {
  static defaultProps = {
    enabled: true,
    keyboardVerticalOffset: 0,
  };

  _frame: ?ViewLayout = null;
  _subscriptions: Array<EmitterSubscription> = [];
  viewRef: {current: React.ElementRef<any> | null};

  constructor(props: Props) {
    super(props);
    this.state = {bottom: 0};
    this.viewRef = React.createRef();
  }

  _relativeKeyboardHeight(keyboardFrame): number {
    const frame = this._frame;
    if (!frame || !keyboardFrame) {
      return 0;
    }

    const keyboardY = keyboardFrame.screenY - this.props.keyboardVerticalOffset;

    // Calculate the displacement needed for the view such that it
    // no longer overlaps with the keyboard
    return Math.max(frame.y + frame.height - keyboardY, 0);
  }

  _onKeyboardChange = (event: ?KeyboardEvent) => {
    if (event == null) {
      this.setState({bottom: 0});
      return;
    }

    const {duration, easing, endCoordinates} = event;
    const height = this._relativeKeyboardHeight(endCoordinates);

    if (this.state.bottom === height) {
      return;
    }

    if (duration && easing) {
      LayoutAnimation.configureNext({
        // We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m
        duration: duration > 10 ? duration : 10,
        update: {
          duration: duration > 10 ? duration : 10,
          type: LayoutAnimation.Types[easing] || 'keyboard',
        },
      });
    }
    this.setState({bottom: height});
  };

  _onLayout = (event: ViewLayoutEvent) => {
    this._frame = event.nativeEvent.layout;
  };

  UNSAFE_componentWillUpdate(nextProps: Props, nextState: State): void {
    if (
      nextState.bottom === this.state.bottom &&
      this.props.behavior === 'height' &&
      nextProps.behavior === 'height'
    ) {
      // If the component rerenders without an internal state change, e.g.
      // triggered by parent component re-rendering, no need for bottom to change.
      nextState.bottom = 0;
    }
  }

  componentDidMount(): void {
    if (Platform.OS === 'ios') {
      this._subscriptions = [
        Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange),
      ];
    } else {
      this._subscriptions = [
        Keyboard.addListener('keyboardDidHide', this._onKeyboardChange),
        Keyboard.addListener('keyboardDidShow', this._onKeyboardChange),
      ];
    }
  }

  componentWillUnmount(): void {
    this._subscriptions.forEach(subscription => {
      subscription.remove();
    });
  }

  render(): React.Node {
    const {
      behavior,
      children,
      contentContainerStyle,
      enabled,
      keyboardVerticalOffset,
      style,
      ...props
    } = this.props;
    const bottomHeight = enabled ? this.state.bottom : 0;
    switch (behavior) {
      case 'height':
        let heightStyle;
        if (this._frame != null && this.state.bottom > 0) {
          // Note that we only apply a height change when there is keyboard present,
          // i.e. this.state.bottom is greater than 0. If we remove that condition,
          // this.frame.height will never go back to its original value.
          // When height changes, we need to disable flex.
          heightStyle = {
            height: this._frame.height - bottomHeight,
            flex: 0,
          };
        }
        return (
          <View
            ref={this.viewRef}
            style={StyleSheet.compose(
              style,
              heightStyle,
            )}
            onLayout={this._onLayout}
            {...props}>
            {children}
          </View>
        );

      case 'position':
        return (
          <View
            ref={this.viewRef}
            style={style}
            onLayout={this._onLayout}
            {...props}>
            <View
              style={StyleSheet.compose(
                contentContainerStyle,
                {
                  bottom: bottomHeight,
                },
              )}>
              {children}
            </View>
          </View>
        );

      case 'padding':
        return (
          <View
            ref={this.viewRef}
            style={StyleSheet.compose(
              style,
              {paddingBottom: bottomHeight},
            )}
            onLayout={this._onLayout}
            {...props}>
            {children}
          </View>
        );

      default:
        return (
          <View
            ref={this.viewRef}
            onLayout={this._onLayout}
            style={style}
            {...props}>
            {children}
          </View>
        );
    }
  }
}

module.exports = KeyboardAvoidingView;

@@ -1801,16 +1801,51 @@
 %7C null%7D;
+%0A  _initialFrameHeight: number = 0;
 %0A%0A  cons
@@ -3191,414 +3191,165 @@
 ;%0A  
-%7D;%0A%0A  UNSAFE_componentWillUpdate(nextProps: Props, nextState: State): void %7B%0A    if (%0A      nextState.bottom === this.state.bottom &&%0A      this.props.behavior === 'height' &&%0A      nextProps.behavior === 'height'%0A    ) %7B%0A      // If the component rerenders without an internal state change, e.g.%0A      // triggered by parent component re-rendering, no need for bottom to change.%0A      nextState.bottom = 0
+  if (!this._initialFrameHeight) %7B%0A      // save the initial frame height, before the keyboard is visible%0A      this._initialFrameHeight = this._frame.height
 ;%0A  
@@ -3347,32 +3347,33 @@
 eight;%0A    %7D%0A  %7D
+;
 %0A%0A  componentDid
@@ -4603,31 +4603,37 @@
 ight: this._
-f
+initialF
 rame
-.h
+H
 eight - bott

Make KeyboardAvoidingView with behavior="height" resize on keyboard close (#18889)