stream-chat-react-native-core/lib/module/utils/animations/createBoundedZoomTransition.js

The official React Native and Expo components for Stream Chat, a service for building chat applications

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createBoundedZoomTransition = void 0;
var _reactNativeReanimated = require("react-native-reanimated");
var getInitialOffset = (direction, values) => {
  'worklet';

  switch (direction) {
    case 'bottom':
      return {
        translateX: 0,
        translateY: values.targetHeight / 2
      };
    case 'left':
      return {
        translateX: -values.targetWidth / 2,
        translateY: 0
      };
    case 'right':
      return {
        translateX: values.targetWidth / 2,
        translateY: 0
      };
    case 'top':
      return {
        translateX: 0,
        translateY: -values.targetHeight / 2
      };
    default:
      return {
        translateX: 0,
        translateY: 0
      };
  }
};
var getTargetOffset = (direction, values) => {
  'worklet';

  switch (direction) {
    case 'bottom':
      return {
        translateX: 0,
        translateY: values.currentHeight / 2
      };
    case 'left':
      return {
        translateX: -values.currentWidth / 2,
        translateY: 0
      };
    case 'right':
      return {
        translateX: values.currentWidth / 2,
        translateY: 0
      };
    case 'top':
      return {
        translateX: 0,
        translateY: -values.currentHeight / 2
      };
    default:
      return {
        translateX: 0,
        translateY: 0
      };
  }
};
var createBoundedZoomTransition = ({
  duration
}) => {
  var createBoundedZoomIn = direction => values => {
    'worklet';

    var initialOffset = getInitialOffset(direction, values);
    return {
      animations: {
        transform: [{
          translateX: (0, _reactNativeReanimated.withTiming)(0, {
            duration
          })
        }, {
          translateY: (0, _reactNativeReanimated.withTiming)(0, {
            duration
          })
        }, {
          scale: (0, _reactNativeReanimated.withTiming)(1, {
            duration
          })
        }]
      },
      initialValues: {
        transform: [{
          translateX: initialOffset.translateX
        }, {
          translateY: initialOffset.translateY
        }, {
          scale: 0
        }]
      }
    };
  };
  var createBoundedZoomOut = direction => values => {
    'worklet';

    var targetOffset = getTargetOffset(direction, values);
    return {
      animations: {
        transform: [{
          translateX: (0, _reactNativeReanimated.withTiming)(targetOffset.translateX, {
            duration
          })
        }, {
          translateY: (0, _reactNativeReanimated.withTiming)(targetOffset.translateY, {
            duration
          })
        }, {
          scale: (0, _reactNativeReanimated.withTiming)(0, {
            duration
          })
        }]
      },
      initialValues: {
        transform: [{
          translateX: 0
        }, {
          translateY: 0
        }, {
          scale: 1
        }]
      }
    };
  };
  return {
    boundedZoomIn: {
      bottom: createBoundedZoomIn('bottom'),
      left: createBoundedZoomIn('left'),
      right: createBoundedZoomIn('right'),
      top: createBoundedZoomIn('top')
    },
    boundedZoomOut: {
      bottom: createBoundedZoomOut('bottom'),
      left: createBoundedZoomOut('left'),
      right: createBoundedZoomOut('right'),
      top: createBoundedZoomOut('top')
    }
  };
};
exports.createBoundedZoomTransition = createBoundedZoomTransition;
//# sourceMappingURL=createBoundedZoomTransition.js.map