linkmore-design/es/q-r-code/index.js

🌈 🚀lm组件库。🚀

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import React, { useMemo, useContext } from 'react';
import { QRCodeCanvas } from 'qrcode.react';
import classNames from 'classnames';
import { ReloadOutlined } from '@ant-design/icons';
import { ConfigContext } from "../config-provider";
import LocaleReceiver from "../locale-provider/LocaleReceiver";
import warning from "../_util/warning";
import Spin from "../spin";
import Button from "../button";
var QRCode = function QRCode(props) {
  var value = props.value,
    _props$icon = props.icon,
    icon = _props$icon === void 0 ? '' : _props$icon,
    _props$size = props.size,
    size = _props$size === void 0 ? 160 : _props$size,
    _props$iconSize = props.iconSize,
    iconSize = _props$iconSize === void 0 ? 40 : _props$iconSize,
    _props$color = props.color,
    color = _props$color === void 0 ? '#000' : _props$color,
    _props$errorLevel = props.errorLevel,
    errorLevel = _props$errorLevel === void 0 ? 'M' : _props$errorLevel,
    _props$status = props.status,
    status = _props$status === void 0 ? 'active' : _props$status,
    _props$bordered = props.bordered,
    bordered = _props$bordered === void 0 ? true : _props$bordered,
    onRefresh = props.onRefresh,
    style = props.style,
    className = props.className,
    customizePrefixCls = props.prefixCls;
  var _useContext = useContext(ConfigContext),
    getPrefixCls = _useContext.getPrefixCls;
  var prefixCls = getPrefixCls('qrcode', customizePrefixCls);
  var qrCodeProps = useMemo(function () {
    var imageSettings = {
      src: icon,
      x: undefined,
      y: undefined,
      height: iconSize,
      width: iconSize,
      excavate: true
    };
    return {
      value: value,
      size: size - (12 + 1) * 2,
      level: errorLevel,
      bgColor: 'transparent',
      fgColor: color,
      imageSettings: icon ? imageSettings : undefined
    };
  }, [errorLevel, color, icon, iconSize, size, value]);
  if (!value) {
    if (process.env.NODE_ENV !== 'production') {
      warning(false, 'QRCode', 'need to receive `value` props');
    }
    return null;
  }
  if (process.env.NODE_ENV !== 'production') {
    warning(!(icon && errorLevel === 'L'), 'QRCode', 'ErrorLevel `L` is not recommended to be used with `icon`, for scanning result would be affected by low level.');
  }
  var cls = classNames(prefixCls, className, _defineProperty({}, "".concat(prefixCls, "-borderless"), !bordered));
  return /*#__PURE__*/React.createElement(LocaleReceiver, {
    componentName: "QRCode"
  }, function (locale) {
    return /*#__PURE__*/React.createElement("div", {
      style: _objectSpread(_objectSpread({}, style), {}, {
        width: size,
        height: size
      }),
      className: cls
    }, status !== 'active' && /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-mask")
    }, status === 'loading' && /*#__PURE__*/React.createElement(Spin, null), status === 'expired' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
      className: "".concat(prefixCls, "-expired")
    }, locale.expired), typeof onRefresh === 'function' && /*#__PURE__*/React.createElement(Button, {
      type: "link",
      icon: /*#__PURE__*/React.createElement(ReloadOutlined, null),
      onClick: onRefresh
    }, locale.refresh))), /*#__PURE__*/React.createElement(QRCodeCanvas, qrCodeProps));
  });
};
if (process.env.NODE_ENV !== 'production') {
  QRCode.displayName = 'QRCode';
}
export default QRCode;