index.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. import { unit } from '@ant-design/cssinjs';
  2. import { FastColor } from '@ant-design/fast-color';
  3. import { resetComponent } from '../../style';
  4. import { genStyleHooks, mergeToken } from '../../theme/internal';
  5. const genQRCodeStyle = token => {
  6. const {
  7. componentCls,
  8. lineWidth,
  9. lineType,
  10. colorSplit
  11. } = token;
  12. return {
  13. [componentCls]: Object.assign(Object.assign({}, resetComponent(token)), {
  14. display: 'flex',
  15. justifyContent: 'center',
  16. alignItems: 'center',
  17. padding: token.paddingSM,
  18. backgroundColor: token.colorWhite,
  19. borderRadius: token.borderRadiusLG,
  20. border: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
  21. position: 'relative',
  22. overflow: 'hidden',
  23. [`& > ${componentCls}-mask`]: {
  24. position: 'absolute',
  25. insetBlockStart: 0,
  26. insetInlineStart: 0,
  27. zIndex: 10,
  28. display: 'flex',
  29. flexDirection: 'column',
  30. justifyContent: 'center',
  31. alignItems: 'center',
  32. width: '100%',
  33. height: '100%',
  34. color: token.colorText,
  35. lineHeight: token.lineHeight,
  36. background: token.QRCodeMaskBackgroundColor,
  37. textAlign: 'center',
  38. [`& > ${componentCls}-expired, & > ${componentCls}-scanned`]: {
  39. color: token.QRCodeTextColor
  40. }
  41. },
  42. '> canvas': {
  43. alignSelf: 'stretch',
  44. flex: 'auto',
  45. minWidth: 0
  46. },
  47. '&-icon': {
  48. marginBlockEnd: token.marginXS,
  49. fontSize: token.controlHeight
  50. }
  51. }),
  52. [`${componentCls}-borderless`]: {
  53. borderColor: 'transparent',
  54. padding: 0,
  55. borderRadius: 0
  56. }
  57. };
  58. };
  59. export const prepareComponentToken = token => ({
  60. QRCodeMaskBackgroundColor: new FastColor(token.colorBgContainer).setA(0.96).toRgbString()
  61. });
  62. export default genStyleHooks('QRCode', token => {
  63. const mergedToken = mergeToken(token, {
  64. QRCodeTextColor: token.colorText
  65. });
  66. return genQRCodeStyle(mergedToken);
  67. }, prepareComponentToken);