react-native-qrcode-mask/lib/module/index.js

React Native QR Code Mask Library

/**
 * Created by nghinv on Thu Jul 15 2021
 * Copyright (c) 2021 nghinv@lumi.biz
 */
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import equals from 'react-fast-compare';
import Overlay from './Overlay';
import Edge from './Edge';
import AnimatedLine from './AnimatedLine';
QrCodeMask.defaultProps = {
  width: 260,
  height: 200,
  edgeWidth: 20,
  edgeHeight: 20,
  edgeBorderWidth: 2,
  edgeColor: 'white',
  showLineAnimated: true,
  lineThick: 2,
  lineBorderRadius: 2,
  lineSize: '80%',
  lineColor: 'green',
  lineAnimationDuration: 1500,
  lineDirection: 'vertical',
  topTitleColor: 'white',
  bottomTitleColor: 'white'
};

function QrCodeMask(props) {
  const {
    width,
    height,
    overlayOpacity,
    showLineAnimated,
    lineThick,
    lineSize,
    lineBorderRadius,
    lineColor,
    lineDirection,
    lineAnimationDuration,
    edgeColor,
    edgeWidth,
    edgeHeight,
    edgeBorderWidth,
    topTitle,
    topTitleColor,
    topTitleStyle,
    renderTop,
    viewTopTitleStyle,
    bottomTitle,
    bottomTitleColor,
    bottomTitleStyle,
    viewBottomTitleStyle,
    renderBottom,
    renderFrame
  } = props;
  return /*#__PURE__*/React.createElement(View, {
    style: StyleSheet.absoluteFillObject
  }, /*#__PURE__*/React.createElement(Overlay, {
    overlayOpacity: overlayOpacity
  }, renderTop ? renderTop() : !!topTitle ? /*#__PURE__*/React.createElement(View, {
    style: [styles.viewTopTitle, {
      zIndex: 200
    }, viewTopTitleStyle]
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.txtTitle, {
      color: topTitleColor
    }, topTitleStyle]
  }, topTitle)) : null), /*#__PURE__*/React.createElement(View, {
    style: styles.viewCenter
  }, /*#__PURE__*/React.createElement(Overlay, {
    overlayOpacity: overlayOpacity
  }), /*#__PURE__*/React.createElement(View, {
    style: [styles.mask, {
      width,
      height
    }]
  }, /*#__PURE__*/React.createElement(Edge, {
    type: "Top_Left",
    edgeColor,
    edgeWidth,
    edgeHeight,
    edgeBorderWidth
  }), /*#__PURE__*/React.createElement(Edge, {
    type: "Top_Right",
    edgeColor,
    edgeWidth,
    edgeHeight,
    edgeBorderWidth
  }), /*#__PURE__*/React.createElement(Edge, {
    type: "Bottom_Left",
    edgeColor,
    edgeWidth,
    edgeHeight,
    edgeBorderWidth
  }), /*#__PURE__*/React.createElement(Edge, {
    type: "Bottom_Right",
    edgeColor,
    edgeWidth,
    edgeHeight,
    edgeBorderWidth
  }), renderFrame && renderFrame(), showLineAnimated && /*#__PURE__*/React.createElement(AnimatedLine, {
    width,
    height,
    edgeBorderWidth: edgeBorderWidth + 3,
    lineThick,
    lineSize,
    lineBorderRadius,
    lineColor,
    lineDirection,
    lineAnimationDuration
  })), /*#__PURE__*/React.createElement(Overlay, {
    overlayOpacity: overlayOpacity
  })), /*#__PURE__*/React.createElement(Overlay, {
    overlayOpacity: overlayOpacity
  }, renderBottom ? renderBottom() : !!bottomTitle ? /*#__PURE__*/React.createElement(View, {
    style: [styles.viewBottomTitle, viewBottomTitleStyle]
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.txtTitle, {
      color: bottomTitleColor
    }, bottomTitleStyle]
  }, bottomTitle)) : null));
}

const styles = StyleSheet.create({
  viewCenter: {
    flexDirection: 'row'
  },
  mask: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  viewTopTitle: {
    flex: 1,
    justifyContent: 'flex-end',
    padding: 16
  },
  viewBottomTitle: {
    flex: 1,
    padding: 16
  },
  txtTitle: {
    fontSize: 16,
    textAlign: 'center'
  }
});
export default /*#__PURE__*/React.memo(QrCodeMask, equals);
//# sourceMappingURL=index.js.map