@nghinv/react-native-app-tour/lib/module/AppTourStep.js

React Native app tour Library

/**
 * Created by nghinv on Tue Jun 22 2021
 * Copyright (c) 2021 nghinv@lumi.biz
 */
import React, { useRef } from 'react';
import equals from 'react-fast-compare';
import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
import { setVector, setVectorLayout, useAppTour, useVector, useVectorLayout } from './hook';

function AppTourStep(props) {
  const {
    children,
    id,
    describe,
    title,
    maskType = 'rect',
    scrollTo
  } = props;
  const target = useVectorLayout();
  const targetPosition = useVector();
  const {
    addNode,
    debug
  } = useAppTour();
  const nodeRef = useRef();
  useAnimatedReaction(() => {
    return scrollTo === null || scrollTo === void 0 ? void 0 : scrollTo.value;
  }, scroll => {
    if (scroll) {
      target.x.value = targetPosition.x.value + scroll.x;
      target.y.value = targetPosition.y.value - scroll.y;
      runOnJS(addNode)({
        id,
        title,
        describe,
        onPress: children.props.onPress,
        maskType,
        target
      });
    }
  });

  const onLayout = () => {
    // eslint-disable-next-line no-undef
    requestAnimationFrame(() => {
      var _nodeRef$current;

      (_nodeRef$current = nodeRef.current) === null || _nodeRef$current === void 0 ? void 0 : _nodeRef$current.measure((_x, _y, width, height, pageX, pageY) => {
        const layout = {
          x: pageX,
          y: pageY,
          width,
          height
        };
        setVectorLayout(target, layout);
        setVector(targetPosition, {
          x: layout.x,
          y: layout.y
        });
        debug && console.log('ADD_NODE::', id, target, layout);
        addNode({
          id,
          title,
          describe,
          onPress: children.props.onPress,
          maskType,
          target
        });
      });
    });
  };

  return /*#__PURE__*/React.cloneElement(children, {
    ref: nodeRef,
    onLayout
  });
}

export default /*#__PURE__*/React.memo(AppTourStep, equals);
//# sourceMappingURL=AppTourStep.js.map