tuya-panel-kit/lib/components/layout/react-navigation/TransitionPresets.js

a functional component library for developing tuya device panels!

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ModalPresentationDarkThemeIOS = exports.ModalPresentationIOS = exports.SlideFromRightIOS = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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

var _stack = require('@react-navigation/stack');

var _utils = require('../../../utils');

var add = _reactNative.Animated.add,
    multiply = _reactNative.Animated.multiply;
var isIphoneX = _utils.RatioUtils.isIphoneX,
    isIos = _utils.RatioUtils.isIos;


var SlideFromRightWithMargin = {
  gestureDirection: 'horizontal',
  transitionSpec: {
    open: _stack.TransitionSpecs.TransitionIOSSpec,
    close: _stack.TransitionSpecs.TransitionIOSSpec
  },
  cardStyleInterpolator: function cardStyleInterpolator(_ref) {
    var current = _ref.current,
        next = _ref.next,
        inverted = _ref.inverted,
        screen = _ref.layouts.screen,
        insets = _ref.insets;

    var isLandscape = screen.width > screen.height;
    var topOffset = isLandscape ? 0 : 10;
    var translateFocused = multiply(current.progress.interpolate({
      inputRange: [0, 1],
      outputRange: [screen.width, 0],
      extrapolate: 'clamp'
    }), inverted);

    var progress = add(current.progress.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 1],
      extrapolate: 'clamp'
    }), next ? next.progress.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 1],
      extrapolate: 'clamp'
    }) : 0);

    var overlayOpacity = progress.interpolate({
      inputRange: [0, 0.3, 0.6, 1, 1.3, 1.7, 2],
      outputRange: [0, 0.1, 0.2, 0.3, 0.2, 0.1, 0]
    });

    var statusBarHeight = insets.top - (isIos ? 44 : 0);

    return {
      cardStyle: {
        flex: 1,
        overflow: 'hidden',
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,
        marginTop: statusBarHeight + topOffset,
        transform: [{ translateX: translateFocused }]
      },
      overlayStyle: { opacity: overlayOpacity }
    };
  },
  headerStyleInterpolator: _stack.HeaderStyleInterpolators.forFade
};

var createModalPresentationIOS = function createModalPresentationIOS() {
  var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  var theme = params.theme || 'light';

  return {
    gestureDirection: 'vertical',
    transitionSpec: {
      open: _stack.TransitionSpecs.TransitionIOSSpec,
      close: _stack.TransitionSpecs.TransitionIOSSpec
    },
    cardStyleInterpolator: function cardStyleInterpolator(_ref2) {
      var current = _ref2.current,
          next = _ref2.next,
          inverted = _ref2.inverted,
          screen = _ref2.layouts.screen,
          insets = _ref2.insets;

      var isLandscape = screen.width > screen.height;
      var topOffset = isLandscape ? 0 : 10;
      var statusBarHeight = insets.top - (isIos ? 44 : 0);
      var aspectRatio = screen.height / screen.width;

      var progress = add(current.progress.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 1],
        extrapolate: 'clamp'
      }), next ? next.progress.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 1],
        extrapolate: 'clamp'
      }) : 0);

      var translateY = multiply(progress.interpolate({
        inputRange: [0, 1, 2],
        outputRange: [screen.height, next ? 0 : topOffset, (next ? statusBarHeight : 0) - topOffset * aspectRatio]
      }), inverted);

      var overlayOpacity = progress.interpolate({
        inputRange: theme === 'light' ? [0, 0.5, 0.9, 1, 2] : [0, 1, 1.0001, 2],
        outputRange: theme === 'light' ? [0, 0.1, 0.2, 0.3, 0.3] : [0, 0.3, 1, 1]
      });

      var scale = isLandscape ? 1 : progress.interpolate({
        inputRange: [0, 1, 2],
        outputRange: [1, 1, screen.width ? 1 - topOffset * 2 / screen.width : 1]
      });

      var borderRadius = isLandscape ? 0 : next ? progress.interpolate({
        inputRange: [0, 1, 1.0001, 2],
        outputRange: [0, 0, isIphoneX ? 38 : 0, 10]
      }) : 10;

      return {
        cardStyle: {
          overflow: 'hidden',
          borderTopLeftRadius: borderRadius,
          borderTopRightRadius: borderRadius,
          marginTop: next ? 0 : statusBarHeight,
          marginBottom: next ? 0 : topOffset,
          transform: [{ translateY: translateY }, { scale: scale }]
        },
        overlayStyle: { opacity: overlayOpacity }
      };
    },
    headerStyleInterpolator: _stack.HeaderStyleInterpolators.forFade
  };
};

var SlideFromRightIOS = exports.SlideFromRightIOS = {
  gestureDirection: 'horizontal',
  transitionSpec: {
    open: _stack.TransitionSpecs.TransitionIOSSpec,
    close: _stack.TransitionSpecs.TransitionIOSSpec
  },
  cardStyleInterpolator: function cardStyleInterpolator(_ref3) {
    var current = _ref3.current,
        inverted = _ref3.inverted,
        screen = _ref3.layouts.screen;

    var translateFocused = multiply(current.progress.interpolate({
      inputRange: [0, 1],
      outputRange: [screen.width, 0],
      extrapolate: 'clamp'
    }), inverted);

    var overlayOpacity = current.progress.interpolate({
      inputRange: [0, 0.3, 0.6, 1, 1.3, 1.7, 2],
      outputRange: [0, 0.1, 0.2, 0.3, 0.2, 0.1, 0],
      extrapolate: 'clamp'
    });

    var shadowOpacity = current.progress.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 0.3],
      extrapolate: 'clamp'
    });

    return {
      cardStyle: {
        transform: [{ translateX: translateFocused }]
      },
      overlayStyle: { opacity: overlayOpacity },
      shadowStyle: { shadowOpacity: shadowOpacity }
    };
  },
  headerStyleInterpolator: _stack.HeaderStyleInterpolators.forFade
};

var ModalPresentationIOS = exports.ModalPresentationIOS = _extends({}, createModalPresentationIOS());

var ModalPresentationDarkThemeIOS = exports.ModalPresentationDarkThemeIOS = _extends({}, createModalPresentationIOS({ theme: 'dark' }));

exports.default = _extends({}, _stack.TransitionPresets, {
  SlideFromRightWithMargin: SlideFromRightWithMargin,
  ModalPresentationIOS: ModalPresentationIOS,
  ModalPresentationDarkThemeIOS: ModalPresentationDarkThemeIOS,
  SlideFromRightIOS: SlideFromRightIOS
});