Browse Source
* refactor: rename qrcode to qr-code * test: patch test case * chore: fix Form missing displayName * chore: patch displayName * chore: style path * chore: fix compilepull/43620/head
二货爱吃白萝卜
1 year ago
committed by
GitHub
GitHub
50 changed files with 205 additions and 136 deletions
@ -1,3 +1,3 @@ |
|||
import { extendTest } from '../../../tests/shared/demoTest'; |
|||
|
|||
extendTest('qrcode'); |
|||
extendTest('qr-code'); |
|||
@ -1,3 +1,3 @@ |
|||
import demoTest from '../../../tests/shared/demoTest'; |
|||
|
|||
demoTest('qrcode'); |
|||
demoTest('qr-code'); |
|||
@ -1,5 +1,5 @@ |
|||
import { imageDemoTest } from '../../../tests/shared/imageTest'; |
|||
|
|||
describe('QRCode image', () => { |
|||
imageDemoTest('qrcode'); |
|||
imageDemoTest('qr-code'); |
|||
}); |
|||
@ -0,0 +1,37 @@ |
|||
import type { CSSProperties } from 'react'; |
|||
|
|||
interface ImageSettings { |
|||
src: string; |
|||
height: number; |
|||
width: number; |
|||
excavate: boolean; |
|||
x?: number; |
|||
y?: number; |
|||
} |
|||
|
|||
export interface QRProps { |
|||
value: string; |
|||
type?: 'canvas' | 'svg'; |
|||
size?: number; |
|||
color?: string; |
|||
style?: CSSProperties; |
|||
includeMargin?: boolean; |
|||
imageSettings?: ImageSettings; |
|||
bgColor?: string; |
|||
} |
|||
|
|||
export type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>; |
|||
|
|||
export type QRPropsSvg = QRProps & React.SVGAttributes<SVGSVGElement>; |
|||
|
|||
export interface QRCodeProps extends QRProps { |
|||
className?: string; |
|||
rootClassName?: string; |
|||
prefixCls?: string; |
|||
icon?: string; |
|||
iconSize?: number; |
|||
bordered?: boolean; |
|||
errorLevel?: 'L' | 'M' | 'Q' | 'H'; |
|||
status?: 'active' | 'expired' | 'loading'; |
|||
onRefresh?: () => void; |
|||
} |
|||
@ -0,0 +1,65 @@ |
|||
import { resetComponent } from '../../style'; |
|||
import type { FullToken, GenerateStyle } from '../../theme/internal'; |
|||
import { genComponentStyleHook, mergeToken } from '../../theme/internal'; |
|||
|
|||
export interface ComponentToken {} |
|||
|
|||
interface QRCodeToken extends FullToken<'QRCode'> { |
|||
QRCodeExpiredTextColor: string; |
|||
QRCodeMaskBackgroundColor: string; |
|||
} |
|||
|
|||
const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => { |
|||
const { componentCls } = token; |
|||
return { |
|||
[componentCls]: { |
|||
...resetComponent(token), |
|||
display: 'flex', |
|||
justifyContent: 'center', |
|||
alignItems: 'center', |
|||
padding: token.paddingSM, |
|||
backgroundColor: token.colorWhite, |
|||
borderRadius: token.borderRadiusLG, |
|||
border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`, |
|||
position: 'relative', |
|||
width: '100%', |
|||
height: '100%', |
|||
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`]: { |
|||
color: token.QRCodeExpiredTextColor, |
|||
}, |
|||
}, |
|||
'&-icon': { |
|||
marginBlockEnd: token.marginXS, |
|||
fontSize: token.controlHeight, |
|||
}, |
|||
}, |
|||
[`${componentCls}-borderless`]: { |
|||
borderColor: 'transparent', |
|||
}, |
|||
}; |
|||
}; |
|||
|
|||
export default genComponentStyleHook<'QRCode'>('QRCode', (token) => |
|||
genQRCodeStyle( |
|||
mergeToken<QRCodeToken>(token, { |
|||
QRCodeExpiredTextColor: 'rgba(0, 0, 0, 0.88)', |
|||
QRCodeMaskBackgroundColor: 'rgba(255, 255, 255, 0.96)', |
|||
}), |
|||
), |
|||
); |
|||
@ -0,0 +1,5 @@ |
|||
// Legacy path. Please use `qr-code` instead.
|
|||
// Keep file here in case developer import directly from the old path.
|
|||
import QRCode from '../qr-code'; |
|||
|
|||
export default QRCode; |
|||
@ -1,37 +1,3 @@ |
|||
import type { CSSProperties } from 'react'; |
|||
|
|||
interface ImageSettings { |
|||
src: string; |
|||
height: number; |
|||
width: number; |
|||
excavate: boolean; |
|||
x?: number; |
|||
y?: number; |
|||
} |
|||
|
|||
export interface QRProps { |
|||
value: string; |
|||
type?: 'canvas' | 'svg'; |
|||
size?: number; |
|||
color?: string; |
|||
style?: CSSProperties; |
|||
includeMargin?: boolean; |
|||
imageSettings?: ImageSettings; |
|||
bgColor?: string; |
|||
} |
|||
|
|||
export type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>; |
|||
|
|||
export type QRPropsSvg = QRProps & React.SVGAttributes<SVGSVGElement>; |
|||
|
|||
export interface QRCodeProps extends QRProps { |
|||
className?: string; |
|||
rootClassName?: string; |
|||
prefixCls?: string; |
|||
icon?: string; |
|||
iconSize?: number; |
|||
bordered?: boolean; |
|||
errorLevel?: 'L' | 'M' | 'Q' | 'H'; |
|||
status?: 'active' | 'expired' | 'loading'; |
|||
onRefresh?: () => void; |
|||
} |
|||
// Legacy path. Please use `qr-code` instead.
|
|||
// Keep file here in case developer import directly from the old path.
|
|||
export * from '../qr-code/interface'; |
|||
|
|||
@ -1,65 +1,3 @@ |
|||
import { resetComponent } from '../../style'; |
|||
import type { FullToken, GenerateStyle } from '../../theme/internal'; |
|||
import { genComponentStyleHook, mergeToken } from '../../theme/internal'; |
|||
|
|||
export interface ComponentToken {} |
|||
|
|||
interface QRCodeToken extends FullToken<'QRCode'> { |
|||
QRCodeExpiredTextColor: string; |
|||
QRCodeMaskBackgroundColor: string; |
|||
} |
|||
|
|||
const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => { |
|||
const { componentCls } = token; |
|||
return { |
|||
[componentCls]: { |
|||
...resetComponent(token), |
|||
display: 'flex', |
|||
justifyContent: 'center', |
|||
alignItems: 'center', |
|||
padding: token.paddingSM, |
|||
backgroundColor: token.colorWhite, |
|||
borderRadius: token.borderRadiusLG, |
|||
border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`, |
|||
position: 'relative', |
|||
width: '100%', |
|||
height: '100%', |
|||
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`]: { |
|||
color: token.QRCodeExpiredTextColor, |
|||
}, |
|||
}, |
|||
'&-icon': { |
|||
marginBlockEnd: token.marginXS, |
|||
fontSize: token.controlHeight, |
|||
}, |
|||
}, |
|||
[`${componentCls}-borderless`]: { |
|||
borderColor: 'transparent', |
|||
}, |
|||
}; |
|||
}; |
|||
|
|||
export default genComponentStyleHook<'QRCode'>('QRCode', (token) => |
|||
genQRCodeStyle( |
|||
mergeToken<QRCodeToken>(token, { |
|||
QRCodeExpiredTextColor: 'rgba(0, 0, 0, 0.88)', |
|||
QRCodeMaskBackgroundColor: 'rgba(255, 255, 255, 0.96)', |
|||
}), |
|||
), |
|||
); |
|||
// Legacy path. Please use `qr-code` instead.
|
|||
// Keep file here in case developer import directly from the old path.
|
|||
export * from '../../qr-code/style'; |
|||
|
|||
Loading…
Reference in new issue