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

Intro screens for Mapeo Mobile for the WCMC ICCA registration app

"use strict";

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

var React = _interopRequireWildcard(require("react"));

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

var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));

var _reactNativeGestureHandler = require("react-native-gesture-handler");

var _MaterialIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialIcons"));

var _Octicons = _interopRequireDefault(require("react-native-vector-icons/Octicons"));

var _expoLinearGradient = require("expo-linear-gradient");

var _reactNativeRedash = require("react-native-redash");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const {
  interpolate,
  Extrapolate,
  useCode,
  block,
  greaterOrEq,
  set,
  sub
} = _reactNativeReanimated.default;
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] = (0, _reactNativeRedash.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, (0, _reactNativeRedash.withTimingTransition)(greaterOrEq(position, routes.length - 1.05), {
    duration: 150
  })), set(isNotLast, sub(1, isLast))]), []);
  return /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.root
  }, /*#__PURE__*/React.createElement(_expoLinearGradient.LinearGradient, {
    style: _reactNative.StyleSheet.absoluteFill,
    colors: ['#0000', '#0004']
  }), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.spacer
  }), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.dotContainer
  }, routes.map((route, index) => /*#__PURE__*/React.createElement(_reactNativeGestureHandler.TouchableOpacity, {
    key: route.key,
    onPress: () => jumpTo(index),
    hitSlop: DOT_HIT_SLOP,
    style: styles.dot,
    accessible: false
  })), /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, {
    style: [styles.dotHighlight, {
      transform: [{
        translateX
      }]
    }]
  })), /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, {
    style: {
      transform: [{
        scale: buttonScale
      }]
    }
  }, /*#__PURE__*/React.createElement(_reactNativeGestureHandler.TouchableOpacity, {
    onPress: onPressNext,
    style: styles.buttonContainer,
    accessibilityLabel: "Continue",
    accessibilityHint: "Navigate to the next page"
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.buttonContainer
  }, /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, {
    style: [styles.nextButton, {
      opacity: isLast
    }]
  }, /*#__PURE__*/React.createElement(_Octicons.default, {
    name: "check",
    color: "rgba(0,0,0,0.8)",
    size: 26
  })), /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, {
    style: [styles.nextButton, {
      opacity: isNotLast
    }]
  }, /*#__PURE__*/React.createElement(_MaterialIcons.default, {
    name: "navigate-next",
    size: 36,
    color: "rgba(0,0,0,0.8)"
  }))))));
};

var _default = /*#__PURE__*/React.memo(IntroDots);

exports.default = _default;

const styles = _reactNative.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: { ..._reactNative.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