@digidem/wcmc-mapeo-mobile-intro/lib/module/IntroDots.js

Intro screens for Mapeo Mobile for the WCMC ICCA registration app

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import Animated from 'react-native-reanimated';
import { TouchableOpacity } from 'react-native-gesture-handler';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Octicons from 'react-native-vector-icons/Octicons';
import { LinearGradient } from 'expo-linear-gradient';
import { withTimingTransition, useValues } from 'react-native-redash';
const {
  interpolate,
  Extrapolate,
  useCode,
  block,
  greaterOrEq,
  set,
  sub
} = Animated;
const DOT_SIZE = 10;
const DOT_SPACING = 10;
const DOT_HIT_SLOP = {
  left: DOT_SPACING / 2,
  right: DOT_SPACING / 2,
  top: 20,
  bottom: 10
};

const IntroDots = ({
  position,
  routes,
  jumpTo,
  onPressNext
}) => {
  const [isLast, isNotLast] = useValues([0, 0], []);
  const translateX = interpolate(position, {
    inputRange: [0, routes.length - 1],
    outputRange: [0, (DOT_SPACING + DOT_SIZE) * (routes.length - 1)],
    extrapolate: Extrapolate.CLAMP
  });
  const buttonScale = interpolate(position, {
    inputRange: [routes.length - 1, routes.length],
    outputRange: [1, 3],
    extrapolateLeft: Extrapolate.CLAMP
  });
  useCode(() => block([set(isLast, withTimingTransition(greaterOrEq(position, routes.length - 1.05), {
    duration: 150
  })), set(isNotLast, sub(1, isLast))]), []);
  return /*#__PURE__*/React.createElement(View, {
    style: styles.root
  }, /*#__PURE__*/React.createElement(LinearGradient, {
    style: StyleSheet.absoluteFill,
    colors: ['#0000', '#0004']
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.spacer
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.dotContainer
  }, routes.map((route, index) => /*#__PURE__*/React.createElement(TouchableOpacity, {
    key: route.key,
    onPress: () => jumpTo(index),
    hitSlop: DOT_HIT_SLOP,
    style: styles.dot,
    accessible: false
  })), /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.dotHighlight, {
      transform: [{
        translateX
      }]
    }]
  })), /*#__PURE__*/React.createElement(Animated.View, {
    style: {
      transform: [{
        scale: buttonScale
      }]
    }
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: onPressNext,
    style: styles.buttonContainer,
    accessibilityLabel: "Continue",
    accessibilityHint: "Navigate to the next page"
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.buttonContainer
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.nextButton, {
      opacity: isLast
    }]
  }, /*#__PURE__*/React.createElement(Octicons, {
    name: "check",
    color: "rgba(0,0,0,0.8)",
    size: 26
  })), /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.nextButton, {
      opacity: isNotLast
    }]
  }, /*#__PURE__*/React.createElement(MaterialIcons, {
    name: "navigate-next",
    size: 36,
    color: "rgba(0,0,0,0.8)"
  }))))));
};

export default /*#__PURE__*/React.memo(IntroDots);
const styles = StyleSheet.create({
  root: {
    paddingBottom: 15,
    paddingTop: 5,
    paddingHorizontal: 20,
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row'
  },
  spacer: {
    width: 48
  },
  buttonContainer: {
    width: 48,
    height: 48
  },
  nextButton: { ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(220,220,220,1)',
    borderWidth: 0,
    borderRadius: 24,
    alignItems: 'center',
    justifyContent: 'center'
  },
  dotHighlight: {
    width: DOT_SIZE,
    height: DOT_SIZE,
    borderRadius: DOT_SIZE / 2,
    backgroundColor: 'white',
    position: 'absolute',
    left: DOT_SPACING
  },
  dot: {
    width: DOT_SIZE,
    height: DOT_SIZE,
    borderRadius: DOT_SIZE / 2,
    borderWidth: 0,
    marginHorizontal: DOT_SPACING / 2,
    backgroundColor: 'rgba(255,255,255,0.5)'
  },
  dotContainer: {
    flexDirection: 'row',
    minHeight: 'auto',
    paddingVertical: DOT_SPACING,
    paddingHorizontal: DOT_SPACING / 2,
    flex: 0,
    zIndex: 0,
    alignItems: 'center',
    justifyContent: 'center'
  }
});
//# sourceMappingURL=IntroDots.js.map