@wordpress/components/build/mobile/bottom-sheet/index.native.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _reactNative = require("react-native");

var _reactNativeModal = _interopRequireDefault(require("react-native-modal"));

var _reactNativeSafeArea = _interopRequireDefault(require("react-native-safe-area"));

var _reactNativeBridge = require("@wordpress/react-native-bridge");

var _compose = require("@wordpress/compose");

var _styles = _interopRequireDefault(require("./styles.scss"));

var _button = _interopRequireDefault(require("./button"));

var _cell = _interopRequireDefault(require("./cell"));

var _cyclePickerCell = _interopRequireDefault(require("./cycle-picker-cell"));

var _pickerCell = _interopRequireDefault(require("./picker-cell"));

var _switchCell = _interopRequireDefault(require("./switch-cell"));

var _rangeCell = _interopRequireDefault(require("./range-cell"));

var _colorCell = _interopRequireDefault(require("./color-cell"));

var _linkCell = _interopRequireDefault(require("./link-cell"));

var _linkSuggestionItemCell = _interopRequireDefault(require("./link-suggestion-item-cell"));

var _radioCell = _interopRequireDefault(require("./radio-cell"));

var _navigationScreen = _interopRequireDefault(require("./bottom-sheet-navigation/navigation-screen"));

var _navigationContainer = _interopRequireDefault(require("./bottom-sheet-navigation/navigation-container"));

var _keyboardAvoidingView = _interopRequireDefault(require("./keyboard-avoiding-view"));

var _subSheet = _interopRequireDefault(require("./sub-sheet"));

var _navigationHeader = _interopRequireDefault(require("./navigation-header"));

var _bottomSheetContext = require("./bottom-sheet-context");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
class BottomSheet extends _element.Component {
  constructor() {
    super(...arguments);
    this.onSafeAreaInsetsUpdate = this.onSafeAreaInsetsUpdate.bind(this);
    this.onScroll = this.onScroll.bind(this);
    this.isScrolling = this.isScrolling.bind(this);
    this.onShouldEnableScroll = this.onShouldEnableScroll.bind(this);
    this.onDismiss = this.onDismiss.bind(this);
    this.onShouldSetBottomSheetMaxHeight = this.onShouldSetBottomSheetMaxHeight.bind(this);
    this.setIsFullScreen = this.setIsFullScreen.bind(this);
    this.onDimensionsChange = this.onDimensionsChange.bind(this);
    this.onCloseBottomSheet = this.onCloseBottomSheet.bind(this);
    this.onHandleClosingBottomSheet = this.onHandleClosingBottomSheet.bind(this);
    this.onHardwareButtonPress = this.onHardwareButtonPress.bind(this);
    this.onHandleHardwareButtonPress = this.onHandleHardwareButtonPress.bind(this);
    this.keyboardWillShow = this.keyboardWillShow.bind(this);
    this.keyboardDidHide = this.keyboardDidHide.bind(this);
    this.state = {
      safeAreaBottomInset: 0,
      safeAreaTopInset: 0,
      bounces: false,
      maxHeight: 0,
      keyboardHeight: 0,
      scrollEnabled: true,
      isScrolling: false,
      handleClosingBottomSheet: null,
      handleHardwareButtonPress: null,
      isMaxHeightSet: true,
      isFullScreen: this.props.isFullScreen || false
    };

    _reactNativeSafeArea.default.getSafeAreaInsetsForRootView().then(this.onSafeAreaInsetsUpdate);

    _reactNative.Dimensions.addEventListener('change', this.onDimensionsChange);
  }

  keyboardWillShow(e) {
    const {
      height
    } = e.endCoordinates;
    this.setState({
      keyboardHeight: height
    }, () => this.onSetMaxHeight());
  }

  keyboardDidHide() {
    this.setState({
      keyboardHeight: 0
    }, () => this.onSetMaxHeight());
  }

  componentDidMount() {
    if (_reactNative.Platform.OS === 'android') {
      this.androidModalClosedSubscription = (0, _reactNativeBridge.subscribeAndroidModalClosed)(() => {
        this.props.onClose();
      });
    }

    this.keyboardWillShowListener = _reactNative.Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
    this.keyboardDidHideListener = _reactNative.Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
    this.safeAreaEventSubscription = _reactNativeSafeArea.default.addEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate);
    this.onSetMaxHeight();
  }

  componentWillUnmount() {
    this.keyboardWillShowListener.remove();
    this.keyboardDidHideListener.remove();

    if (this.androidModalClosedSubscription) {
      this.androidModalClosedSubscription.remove();
    }

    if (this.safeAreaEventSubscription === null) {
      return;
    }

    this.safeAreaEventSubscription.remove();
    this.safeAreaEventSubscription = null;

    _reactNativeSafeArea.default.removeEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate);
  }

  onSafeAreaInsetsUpdate(result) {
    const {
      safeAreaBottomInset,
      safeAreaTopInset
    } = this.state;

    if (this.safeAreaEventSubscription === null) {
      return;
    }

    const {
      safeAreaInsets
    } = result;

    if (safeAreaBottomInset !== safeAreaInsets.bottom || safeAreaTopInset !== safeAreaInsets.top) {
      this.setState({
        safeAreaBottomInset: safeAreaInsets.bottom,
        safeAreaTopInset: safeAreaInsets.top
      });
    }
  }

  onSetMaxHeight() {
    const {
      height,
      width
    } = _reactNative.Dimensions.get('window');

    const {
      safeAreaBottomInset,
      keyboardHeight
    } = this.state;
    const statusBarHeight = _reactNative.Platform.OS === 'android' ? _reactNative.StatusBar.currentHeight : 0; // `maxHeight` when modal is opened along with a keyboard

    const maxHeightWithOpenKeyboard = 0.95 * (_reactNative.Dimensions.get('window').height - keyboardHeight - statusBarHeight); // On horizontal mode `maxHeight` has to be set on 90% of width

    if (width > height) {
      this.setState({
        maxHeight: Math.min(0.9 * height, maxHeightWithOpenKeyboard)
      }); //	On vertical mode `maxHeight` has to be set on 50% of width
    } else {
      this.setState({
        maxHeight: Math.min(height / 2 - safeAreaBottomInset, maxHeightWithOpenKeyboard)
      });
    }
  }

  onDimensionsChange() {
    this.onSetMaxHeight();
    this.setState({
      bounces: false
    });
  }

  isCloseToBottom({
    layoutMeasurement,
    contentOffset,
    contentSize
  }) {
    return layoutMeasurement.height + contentOffset.y >= contentSize.height - contentOffset.y;
  }

  isCloseToTop({
    contentOffset
  }) {
    return contentOffset.y < 10;
  }

  onScroll({
    nativeEvent
  }) {
    if (this.isCloseToTop(nativeEvent)) {
      this.setState({
        bounces: false
      });
    } else if (this.isCloseToBottom(nativeEvent)) {
      this.setState({
        bounces: true
      });
    }
  }

  onDismiss() {
    const {
      onDismiss
    } = this.props;

    if (onDismiss) {
      onDismiss();
    }

    this.onCloseBottomSheet();
  }

  onShouldEnableScroll(value) {
    this.setState({
      scrollEnabled: value
    });
  }

  onShouldSetBottomSheetMaxHeight(value) {
    this.setState({
      isMaxHeightSet: value
    });
  }

  isScrolling(value) {
    this.setState({
      isScrolling: value
    });
  }

  onHandleClosingBottomSheet(action) {
    this.setState({
      handleClosingBottomSheet: action
    });
  }

  onHandleHardwareButtonPress(action) {
    this.setState({
      handleHardwareButtonPress: action
    });
  }

  onCloseBottomSheet() {
    const {
      onClose
    } = this.props;
    const {
      handleClosingBottomSheet
    } = this.state;

    if (handleClosingBottomSheet) {
      handleClosingBottomSheet();
      this.onHandleClosingBottomSheet(null);
    }

    if (onClose) {
      onClose();
    }

    this.onShouldSetBottomSheetMaxHeight(true);
  }

  setIsFullScreen(isFullScreen) {
    if (isFullScreen !== this.state.isFullScreen) {
      if (isFullScreen) {
        this.setState({
          isFullScreen,
          isMaxHeightSet: false
        });
      } else {
        this.setState({
          isFullScreen,
          isMaxHeightSet: true
        });
      }
    }
  }

  onHardwareButtonPress() {
    const {
      onClose
    } = this.props;
    const {
      handleHardwareButtonPress
    } = this.state;

    if (handleHardwareButtonPress && handleHardwareButtonPress()) {
      return;
    }

    if (onClose) {
      return onClose();
    }
  }

  getContentStyle() {
    const {
      safeAreaBottomInset
    } = this.state;
    return {
      paddingBottom: (safeAreaBottomInset || 0) + _styles.default.scrollableContent.paddingBottom
    };
  }

  render() {
    const {
      title = '',
      isVisible,
      leftButton,
      rightButton,
      hideHeader,
      style = {},
      contentStyle = {},
      getStylesFromColorScheme,
      children,
      withHeaderSeparator = false,
      hasNavigation,
      ...rest
    } = this.props;
    const {
      maxHeight,
      bounces,
      safeAreaBottomInset,
      safeAreaTopInset,
      isScrolling,
      scrollEnabled,
      isMaxHeightSet,
      isFullScreen
    } = this.state;

    const panResponder = _reactNative.PanResponder.create({
      onMoveShouldSetPanResponder: (evt, gestureState) => {
        // 'swiping-to-close' option is temporarily and partially disabled
        //	on Android ( swipe / drag is still available in the top most area - near drag indicator)
        if (_reactNative.Platform.OS === 'ios') {
          // Activates swipe down over child Touchables if the swipe is long enough.
          // With this we can adjust sensibility on the swipe vs tap gestures.
          if (gestureState.dy > 3 && !bounces) {
            gestureState.dy = 0;
            return true;
          }
        }

        return false;
      }
    });

    const backgroundStyle = getStylesFromColorScheme(_styles.default.background, _styles.default.backgroundDark);
    const bottomSheetHeaderTitleStyle = getStylesFromColorScheme(_styles.default.bottomSheetHeaderTitle, _styles.default.bottomSheetHeaderTitleDark);
    let listStyle = {};

    if (isFullScreen) {
      listStyle = {
        flexGrow: 1
      };
    } else if (isMaxHeightSet) {
      listStyle = {
        maxHeight
      }; // Allow setting a "static" height of the bottom sheet
      // by settting the min height to the max height.

      if (this.props.setMinHeightToMaxHeight) {
        listStyle.minHeight = maxHeight;
      }
    }

    const listProps = {
      disableScrollViewPanResponder: true,
      bounces,
      onScroll: this.onScroll,
      onScrollBeginDrag: this.onScrollBeginDrag,
      onScrollEndDrag: this.onScrollEndDrag,
      scrollEventThrottle: 16,
      contentContainerStyle: [_styles.default.content, hideHeader && _styles.default.emptyHeader, contentStyle, isFullScreen && {
        flexGrow: 1
      }],
      style: listStyle,
      safeAreaBottomInset,
      scrollEnabled,
      automaticallyAdjustContentInsets: false
    };
    const WrapperView = hasNavigation ? _reactNative.View : _reactNative.ScrollView;

    const getHeader = () => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_reactNative.View, {
      style: _styles.default.bottomSheetHeader
    }, (0, _element.createElement)(_reactNative.View, {
      style: _styles.default.flex
    }, leftButton), (0, _element.createElement)(_reactNative.Text, {
      style: bottomSheetHeaderTitleStyle,
      maxFontSizeMultiplier: 3
    }, title), (0, _element.createElement)(_reactNative.View, {
      style: _styles.default.flex
    }, rightButton)), withHeaderSeparator && (0, _element.createElement)(_reactNative.View, {
      style: _styles.default.separator
    }));

    return (0, _element.createElement)(_reactNativeModal.default, (0, _extends2.default)({
      isVisible: isVisible,
      style: _styles.default.bottomModal,
      animationInTiming: 400,
      animationOutTiming: 300,
      backdropTransitionInTiming: 50,
      backdropTransitionOutTiming: 50,
      backdropOpacity: 0.2,
      onBackdropPress: this.onCloseBottomSheet,
      onBackButtonPress: this.onHardwareButtonPress,
      onSwipe: this.onCloseBottomSheet,
      onDismiss: _reactNative.Platform.OS === 'ios' ? this.onDismiss : undefined,
      onModalHide: _reactNative.Platform.OS === 'android' ? this.onDismiss : undefined,
      swipeDirection: "down",
      onMoveShouldSetResponder: scrollEnabled && panResponder.panHandlers.onMoveShouldSetResponder,
      onMoveShouldSetResponderCapture: scrollEnabled && panResponder.panHandlers.onMoveShouldSetResponderCapture,
      onAccessibilityEscape: this.onCloseBottomSheet
    }, rest), (0, _element.createElement)(_keyboardAvoidingView.default, {
      behavior: _reactNative.Platform.OS === 'ios' && 'padding',
      style: { ...backgroundStyle,
        borderColor: 'rgba(0, 0, 0, 0.1)',
        marginTop: _reactNative.Platform.OS === 'ios' && isFullScreen ? safeAreaTopInset : 0,
        flex: isFullScreen ? 1 : undefined,
        ...(_reactNative.Platform.OS === 'android' && isFullScreen ? _styles.default.backgroundFullScreen : {}),
        ...style
      },
      keyboardVerticalOffset: -safeAreaBottomInset
    }, !(_reactNative.Platform.OS === 'android' && isFullScreen) && (0, _element.createElement)(_reactNative.View, {
      style: _styles.default.dragIndicator
    }), !hideHeader && getHeader(), (0, _element.createElement)(WrapperView, hasNavigation ? {
      style: listProps.style
    } : listProps, (0, _element.createElement)(_bottomSheetContext.BottomSheetProvider, {
      value: {
        shouldEnableBottomSheetScroll: this.onShouldEnableScroll,
        shouldEnableBottomSheetMaxHeight: this.onShouldSetBottomSheetMaxHeight,
        isBottomSheetContentScrolling: isScrolling,
        onHandleClosingBottomSheet: this.onHandleClosingBottomSheet,
        onHandleHardwareButtonPress: this.onHandleHardwareButtonPress,
        listProps,
        setIsFullScreen: this.setIsFullScreen,
        safeAreaBottomInset
      }
    }, hasNavigation ? (0, _element.createElement)(_element.Fragment, null, children) : (0, _element.createElement)(_reactNative.TouchableHighlight, {
      accessible: false
    }, (0, _element.createElement)(_element.Fragment, null, children))), !hasNavigation && (0, _element.createElement)(_reactNative.View, {
      style: {
        height: safeAreaBottomInset || _styles.default.scrollableContent.paddingBottom
      }
    }))));
  }

}

function getWidth() {
  return Math.min(_reactNative.Dimensions.get('window').width, _styles.default.background.maxWidth);
}

const ThemedBottomSheet = (0, _compose.withPreferredColorScheme)(BottomSheet);
ThemedBottomSheet.getWidth = getWidth;
ThemedBottomSheet.Button = _button.default;
ThemedBottomSheet.Cell = _cell.default;
ThemedBottomSheet.SubSheet = _subSheet.default;
ThemedBottomSheet.NavigationHeader = _navigationHeader.default;
ThemedBottomSheet.CyclePickerCell = _cyclePickerCell.default;
ThemedBottomSheet.PickerCell = _pickerCell.default;
ThemedBottomSheet.SwitchCell = _switchCell.default;
ThemedBottomSheet.RangeCell = _rangeCell.default;
ThemedBottomSheet.ColorCell = _colorCell.default;
ThemedBottomSheet.LinkCell = _linkCell.default;
ThemedBottomSheet.LinkSuggestionItemCell = _linkSuggestionItemCell.default;
ThemedBottomSheet.RadioCell = _radioCell.default;
ThemedBottomSheet.NavigationScreen = _navigationScreen.default;
ThemedBottomSheet.NavigationContainer = _navigationContainer.default;
var _default = ThemedBottomSheet;
exports.default = _default;
//# sourceMappingURL=index.native.js.map