mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-17 02:18:07 +08:00
3fa9d45dd5
* feat: qrcode canvas supports style configuration * Update components/qr-code/index.zh-CN.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: thinkasany <480968828@qq.com> * docs: update version * fix: typos * fix: ant-qrcode * fix: update padding for canvas / svg * fix: update * fix: typos * fix: when borderless padding shouble be 0 * fix: when borderless borderRadius should be 0 * fix: rm Variant --------- Signed-off-by: thinkasany <480968828@qq.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
import { unit } from '@ant-design/cssinjs';
|
|
import { TinyColor } from '@ctrl/tinycolor';
|
|
|
|
import { resetComponent } from '../../style';
|
|
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
|
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
|
|
|
export interface ComponentToken {}
|
|
|
|
interface QRCodeToken extends FullToken<'QRCode'> {
|
|
QRCodeTextColor: string;
|
|
QRCodeMaskBackgroundColor: string;
|
|
}
|
|
|
|
const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
|
|
const { componentCls, lineWidth, lineType, colorSplit } = token;
|
|
return {
|
|
[componentCls]: {
|
|
...resetComponent(token),
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: token.paddingSM,
|
|
backgroundColor: token.colorWhite,
|
|
borderRadius: token.borderRadiusLG,
|
|
border: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
|
|
[`& > ${componentCls}-mask`]: {
|
|
position: 'absolute',
|
|
insetBlockStart: 0,
|
|
insetInlineStart: 0,
|
|
zIndex: 10,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
height: '100%',
|
|
color: token.colorText,
|
|
lineHeight: token.lineHeight,
|
|
background: token.QRCodeMaskBackgroundColor,
|
|
textAlign: 'center',
|
|
[`& > ${componentCls}-expired, & > ${componentCls}-scanned`]: {
|
|
color: token.QRCodeTextColor,
|
|
},
|
|
},
|
|
|
|
'> canvas': {
|
|
alignSelf: 'stretch',
|
|
flex: 'auto',
|
|
minWidth: 0,
|
|
},
|
|
|
|
'&-icon': {
|
|
marginBlockEnd: token.marginXS,
|
|
fontSize: token.controlHeight,
|
|
},
|
|
},
|
|
[`${componentCls}-borderless`]: {
|
|
borderColor: 'transparent',
|
|
padding: 0,
|
|
borderRadius: 0,
|
|
},
|
|
};
|
|
};
|
|
|
|
export const prepareComponentToken: GetDefaultToken<'QRCode'> = (token) => ({
|
|
QRCodeMaskBackgroundColor: new TinyColor(token.colorBgContainer).setAlpha(0.96).toRgbString(),
|
|
});
|
|
|
|
export default genStyleHooks<'QRCode'>(
|
|
'QRCode',
|
|
(token) => {
|
|
const mergedToken = mergeToken<QRCodeToken>(token, {
|
|
QRCodeTextColor: token.colorText,
|
|
});
|
|
|
|
return genQRCodeStyle(mergedToken);
|
|
},
|
|
prepareComponentToken,
|
|
);
|