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

React Native QR Code Mask Library

"use strict";

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

var _react = _interopRequireDefault(require("react"));

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

var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));

var _Overlay = _interopRequireDefault(require("./Overlay"));

var _Edge = _interopRequireDefault(require("./Edge"));

var _AnimatedLine = _interopRequireDefault(require("./AnimatedLine"));

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

/**
 * Created by nghinv on Thu Jul 15 2021
 * Copyright (c) 2021 nghinv@lumi.biz
 */
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.default.createElement(_reactNative.View, {
    style: _reactNative.StyleSheet.absoluteFillObject
  }, /*#__PURE__*/_react.default.createElement(_Overlay.default, {
    overlayOpacity: overlayOpacity
  }, renderTop ? renderTop() : !!topTitle ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.viewTopTitle, {
      zIndex: 200
    }, viewTopTitleStyle]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
    style: [styles.txtTitle, {
      color: topTitleColor
    }, topTitleStyle]
  }, topTitle)) : null), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.viewCenter
  }, /*#__PURE__*/_react.default.createElement(_Overlay.default, {
    overlayOpacity: overlayOpacity
  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.mask, {
      width,
      height
    }]
  }, /*#__PURE__*/_react.default.createElement(_Edge.default, {
    type: "Top_Left",
    edgeColor,
    edgeWidth,
    edgeHeight,
    edgeBorderWidth
  }), /*#__PURE__*/_react.default.createElement(_Edge.default, {
    type: "Top_Right",
    edgeColor,
    edgeWidth,
    edgeHeight,
    edgeBorderWidth
  }), /*#__PURE__*/_react.default.createElement(_Edge.default, {
    type: "Bottom_Left",
    edgeColor,
    edgeWidth,
    edgeHeight,
    edgeBorderWidth
  }), /*#__PURE__*/_react.default.createElement(_Edge.default, {
    type: "Bottom_Right",
    edgeColor,
    edgeWidth,
    edgeHeight,
    edgeBorderWidth
  }), renderFrame && renderFrame(), showLineAnimated && /*#__PURE__*/_react.default.createElement(_AnimatedLine.default, {
    width,
    height,
    edgeBorderWidth: edgeBorderWidth + 3,
    lineThick,
    lineSize,
    lineBorderRadius,
    lineColor,
    lineDirection,
    lineAnimationDuration
  })), /*#__PURE__*/_react.default.createElement(_Overlay.default, {
    overlayOpacity: overlayOpacity
  })), /*#__PURE__*/_react.default.createElement(_Overlay.default, {
    overlayOpacity: overlayOpacity
  }, renderBottom ? renderBottom() : !!bottomTitle ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.viewBottomTitle, viewBottomTitleStyle]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
    style: [styles.txtTitle, {
      color: bottomTitleColor
    }, bottomTitleStyle]
  }, bottomTitle)) : null));
}

const styles = _reactNative.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'
  }
});

var _default = /*#__PURE__*/_react.default.memo(QrCodeMask, _reactFastCompare.default);

exports.default = _default;
//# sourceMappingURL=index.js.map