index.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. "use client";
  2. var __rest = this && this.__rest || function (s, e) {
  3. var t = {};
  4. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  6. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  7. }
  8. return t;
  9. };
  10. import React, { useContext } from 'react';
  11. import { QRCodeCanvas, QRCodeSVG } from '@rc-component/qrcode';
  12. import classNames from 'classnames';
  13. import omit from "rc-util/es/omit";
  14. import pickAttrs from "rc-util/es/pickAttrs";
  15. import { devUseWarning } from '../_util/warning';
  16. import { ConfigContext } from '../config-provider';
  17. import { useLocale } from '../locale';
  18. import { useToken } from '../theme/internal';
  19. import QRcodeStatus from './QrcodeStatus';
  20. import useStyle from './style/index';
  21. const QRCode = props => {
  22. var _a, _b, _c, _d;
  23. const [, token] = useToken();
  24. const {
  25. value,
  26. type = 'canvas',
  27. icon = '',
  28. size = 160,
  29. iconSize,
  30. color = token.colorText,
  31. errorLevel = 'M',
  32. status = 'active',
  33. bordered = true,
  34. onRefresh,
  35. style,
  36. className,
  37. rootClassName,
  38. prefixCls: customizePrefixCls,
  39. bgColor = 'transparent',
  40. statusRender
  41. } = props,
  42. rest = __rest(props, ["value", "type", "icon", "size", "iconSize", "color", "errorLevel", "status", "bordered", "onRefresh", "style", "className", "rootClassName", "prefixCls", "bgColor", "statusRender"]);
  43. const {
  44. getPrefixCls
  45. } = useContext(ConfigContext);
  46. const prefixCls = getPrefixCls('qrcode', customizePrefixCls);
  47. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
  48. const imageSettings = {
  49. src: icon,
  50. x: undefined,
  51. y: undefined,
  52. height: typeof iconSize === 'number' ? iconSize : (_a = iconSize === null || iconSize === void 0 ? void 0 : iconSize.height) !== null && _a !== void 0 ? _a : 40,
  53. width: typeof iconSize === 'number' ? iconSize : (_b = iconSize === null || iconSize === void 0 ? void 0 : iconSize.width) !== null && _b !== void 0 ? _b : 40,
  54. excavate: true,
  55. crossOrigin: 'anonymous'
  56. };
  57. const a11yProps = pickAttrs(rest, true);
  58. const restProps = omit(rest, Object.keys(a11yProps));
  59. const qrCodeProps = Object.assign({
  60. value,
  61. size,
  62. level: errorLevel,
  63. bgColor,
  64. fgColor: color,
  65. style: {
  66. width: style === null || style === void 0 ? void 0 : style.width,
  67. height: style === null || style === void 0 ? void 0 : style.height
  68. },
  69. imageSettings: icon ? imageSettings : undefined
  70. }, a11yProps);
  71. const [locale] = useLocale('QRCode');
  72. if (process.env.NODE_ENV !== 'production') {
  73. const warning = devUseWarning('QRCode');
  74. process.env.NODE_ENV !== "production" ? warning(!!value, 'usage', 'need to receive `value` props') : void 0;
  75. process.env.NODE_ENV !== "production" ? warning(!(icon && errorLevel === 'L'), 'usage', 'ErrorLevel `L` is not recommended to be used with `icon`, for scanning result would be affected by low level.') : void 0;
  76. }
  77. if (!value) {
  78. return null;
  79. }
  80. const mergedCls = classNames(prefixCls, className, rootClassName, hashId, cssVarCls, {
  81. [`${prefixCls}-borderless`]: !bordered
  82. });
  83. const mergedStyle = Object.assign(Object.assign({
  84. backgroundColor: bgColor
  85. }, style), {
  86. width: (_c = style === null || style === void 0 ? void 0 : style.width) !== null && _c !== void 0 ? _c : size,
  87. height: (_d = style === null || style === void 0 ? void 0 : style.height) !== null && _d !== void 0 ? _d : size
  88. });
  89. return wrapCSSVar(/*#__PURE__*/React.createElement("div", Object.assign({}, restProps, {
  90. className: mergedCls,
  91. style: mergedStyle
  92. }), status !== 'active' && (/*#__PURE__*/React.createElement("div", {
  93. className: `${prefixCls}-mask`
  94. }, /*#__PURE__*/React.createElement(QRcodeStatus, {
  95. prefixCls: prefixCls,
  96. locale: locale,
  97. status: status,
  98. onRefresh: onRefresh,
  99. statusRender: statusRender
  100. }))), type === 'canvas' ? /*#__PURE__*/React.createElement(QRCodeCanvas, Object.assign({}, qrCodeProps)) : /*#__PURE__*/React.createElement(QRCodeSVG, Object.assign({}, qrCodeProps))));
  101. };
  102. if (process.env.NODE_ENV !== 'production') {
  103. QRCode.displayName = 'QRCode';
  104. }
  105. export default QRCode;