From 5bf08faeea02ecacb2459b575a5f257e0343238c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Mon, 17 Jul 2023 23:43:32 +0800 Subject: [PATCH] refactor: rename qrcode to qr-code (#43607) * refactor: rename qrcode to qr-code * test: patch test case * chore: fix Form missing displayName * chore: patch displayName * chore: style path * chore: fix compile --- components/auto-complete/index.tsx | 3 +- components/back-top/index.tsx | 2 +- .../generatePicker/generateRangePicker.tsx | 4 ++ .../date-picker/generatePicker/index.tsx | 7 +- components/float-button/FloatButton.tsx | 8 +-- components/form/Form.tsx | 8 ++- components/grid/__tests__/demo.test.ts | 1 + components/icon/__tests__/demo.test.ts | 1 + components/index.ts | 4 +- components/message/__tests__/demo.test.ts | 1 + .../notification/__tests__/demo.test.ts | 1 + .../__snapshots__/demo-extend.test.ts.snap | 18 ++--- .../__tests__/__snapshots__/demo.test.ts.snap | 18 ++--- .../__snapshots__/index.test.tsx.snap | 0 .../__tests__/demo-extend.test.ts | 2 +- .../__tests__/demo.test.ts | 2 +- .../__tests__/image.test.ts | 2 +- .../__tests__/index.test.tsx | 0 .../{qrcode => qr-code}/demo/Popover.md | 0 .../{qrcode => qr-code}/demo/Popover.tsx | 0 components/{qrcode => qr-code}/demo/base.md | 0 components/{qrcode => qr-code}/demo/base.tsx | 0 .../{qrcode => qr-code}/demo/customColor.md | 0 .../{qrcode => qr-code}/demo/customColor.tsx | 0 .../{qrcode => qr-code}/demo/customSize.md | 0 .../{qrcode => qr-code}/demo/customSize.tsx | 0 .../{qrcode => qr-code}/demo/download.md | 0 .../{qrcode => qr-code}/demo/download.tsx | 0 .../{qrcode => qr-code}/demo/errorlevel.md | 0 .../{qrcode => qr-code}/demo/errorlevel.tsx | 0 components/{qrcode => qr-code}/demo/icon.md | 0 components/{qrcode => qr-code}/demo/icon.tsx | 0 components/{qrcode => qr-code}/demo/status.md | 0 .../{qrcode => qr-code}/demo/status.tsx | 0 components/{qrcode => qr-code}/demo/type.md | 0 components/{qrcode => qr-code}/demo/type.tsx | 0 components/{qrcode => qr-code}/index.en-US.md | 0 components/{qrcode => qr-code}/index.tsx | 0 components/{qrcode => qr-code}/index.zh-CN.md | 0 components/qr-code/interface.ts | 37 ++++++++++ components/qr-code/style/index.ts | 65 ++++++++++++++++++ components/qrcode/index.ts | 5 ++ components/qrcode/interface.ts | 40 +---------- components/qrcode/style/index.ts | 68 +------------------ components/select/index.tsx | 5 ++ components/table/Table.tsx | 5 ++ components/theme/interface/components.ts | 2 +- components/tree-select/index.tsx | 5 ++ scripts/generate-cssinjs.ts | 2 +- tests/shared/demoTest.tsx | 25 +++++++ 50 files changed, 205 insertions(+), 136 deletions(-) rename components/{qrcode => qr-code}/__tests__/__snapshots__/demo-extend.test.ts.snap (94%) rename components/{qrcode => qr-code}/__tests__/__snapshots__/demo.test.ts.snap (94%) rename components/{qrcode => qr-code}/__tests__/__snapshots__/index.test.tsx.snap (100%) rename components/{qrcode => qr-code}/__tests__/demo-extend.test.ts (72%) rename components/{qrcode => qr-code}/__tests__/demo.test.ts (72%) rename components/{qrcode => qr-code}/__tests__/image.test.ts (78%) rename components/{qrcode => qr-code}/__tests__/index.test.tsx (100%) rename components/{qrcode => qr-code}/demo/Popover.md (100%) rename components/{qrcode => qr-code}/demo/Popover.tsx (100%) rename components/{qrcode => qr-code}/demo/base.md (100%) rename components/{qrcode => qr-code}/demo/base.tsx (100%) rename components/{qrcode => qr-code}/demo/customColor.md (100%) rename components/{qrcode => qr-code}/demo/customColor.tsx (100%) rename components/{qrcode => qr-code}/demo/customSize.md (100%) rename components/{qrcode => qr-code}/demo/customSize.tsx (100%) rename components/{qrcode => qr-code}/demo/download.md (100%) rename components/{qrcode => qr-code}/demo/download.tsx (100%) rename components/{qrcode => qr-code}/demo/errorlevel.md (100%) rename components/{qrcode => qr-code}/demo/errorlevel.tsx (100%) rename components/{qrcode => qr-code}/demo/icon.md (100%) rename components/{qrcode => qr-code}/demo/icon.tsx (100%) rename components/{qrcode => qr-code}/demo/status.md (100%) rename components/{qrcode => qr-code}/demo/status.tsx (100%) rename components/{qrcode => qr-code}/demo/type.md (100%) rename components/{qrcode => qr-code}/demo/type.tsx (100%) rename components/{qrcode => qr-code}/index.en-US.md (100%) rename components/{qrcode => qr-code}/index.tsx (100%) rename components/{qrcode => qr-code}/index.zh-CN.md (100%) create mode 100644 components/qr-code/interface.ts create mode 100644 components/qr-code/style/index.ts create mode 100644 components/qrcode/index.ts diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx index 40b060027b..d48a2b41ba 100755 --- a/components/auto-complete/index.tsx +++ b/components/auto-complete/index.tsx @@ -168,6 +168,7 @@ const RefAutoComplete = React.forwardRef( ref?: React.Ref; }, ) => React.ReactElement) & { + displayName?: string; Option: typeof Option; _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel; }; @@ -180,7 +181,7 @@ RefAutoComplete.Option = Option; RefAutoComplete._InternalPanelDoNotUseOrYouWillBeFired = PurePanel; if (process.env.NODE_ENV !== 'production') { - AutoComplete.displayName = 'AutoComplete'; + RefAutoComplete.displayName = 'AutoComplete'; } export default RefAutoComplete; diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx index 97b11277e6..7ade5fa225 100644 --- a/components/back-top/index.tsx +++ b/components/back-top/index.tsx @@ -121,4 +121,4 @@ if (process.env.NODE_ENV !== 'production') { BackTop.displayName = 'BackTop'; } -export default React.memo(BackTop); +export default BackTop; diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index 2a6d83993d..e2b0c748e4 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -146,5 +146,9 @@ export default function generateRangePicker(generateConfig: GenerateCo ); }); + if (process.env.NODE_ENV !== 'production') { + RangePicker.displayName = 'RangePicker'; + } + return RangePicker as unknown as PickerComponentClass; } diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx index 2aeacc16b5..18f28d417c 100644 --- a/components/date-picker/generatePicker/index.tsx +++ b/components/date-picker/generatePicker/index.tsx @@ -17,7 +17,7 @@ import generateRangePicker from './generateRangePicker'; import generateSinglePicker from './generateSinglePicker'; const DataPickerPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as const; -type DataPickerPlacement = (typeof DataPickerPlacements)[number]; +type DataPickerPlacement = typeof DataPickerPlacements[number]; type InjectDefaultProps = Omit< Props, @@ -85,6 +85,7 @@ function generatePicker(generateConfig: GenerateConfig) { // =========================== Export =========================== type MergedDatePickerType = typeof DatePicker & { + displayName?: string; WeekPicker: typeof WeekPicker; MonthPicker: typeof MonthPicker; YearPicker: typeof YearPicker; @@ -101,6 +102,10 @@ function generatePicker(generateConfig: GenerateConfig) { MergedDatePicker.TimePicker = TimePicker; MergedDatePicker.QuarterPicker = QuarterPicker; + if (process.env.NODE_ENV !== 'production') { + MergedDatePicker.displayName = 'DatePicker'; + } + return MergedDatePicker; } diff --git a/components/float-button/FloatButton.tsx b/components/float-button/FloatButton.tsx index 89c5bc6f15..243cf83148 100644 --- a/components/float-button/FloatButton.tsx +++ b/components/float-button/FloatButton.tsx @@ -101,13 +101,13 @@ const FloatButton: React.ForwardRefRenderFunction< ); }; -if (process.env.NODE_ENV !== 'production') { - FloatButton.displayName = 'FloatButton'; -} - const ForwardFloatButton = React.forwardRef< HTMLAnchorElement | HTMLButtonElement, FloatButtonProps >(FloatButton) as CompoundedComponent; +if (process.env.NODE_ENV !== 'production') { + ForwardFloatButton.displayName = 'FloatButton'; +} + export default ForwardFloatButton; diff --git a/components/form/Form.tsx b/components/form/Form.tsx index 72922d0a0a..c853d9c30c 100644 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -186,9 +186,13 @@ const InternalForm: React.ForwardRefRenderFunction = (p ); }; -const Form = React.forwardRef(InternalForm) as ( +const Form = React.forwardRef(InternalForm) as (( props: React.PropsWithChildren> & { ref?: React.Ref> }, -) => React.ReactElement; +) => React.ReactElement) & { displayName?: string }; + +if (process.env.NODE_ENV !== 'production') { + Form.displayName = 'Form'; +} export { List, useForm, useWatch, type FormInstance }; diff --git a/components/grid/__tests__/demo.test.ts b/components/grid/__tests__/demo.test.ts index 740a1914f1..e6e6a473fd 100644 --- a/components/grid/__tests__/demo.test.ts +++ b/components/grid/__tests__/demo.test.ts @@ -2,4 +2,5 @@ import demoTest from '../../../tests/shared/demoTest'; demoTest('grid', { testRootProps: false, + nameCheckPathOnly: true, }); diff --git a/components/icon/__tests__/demo.test.ts b/components/icon/__tests__/demo.test.ts index 09643ed0e4..77e692cbba 100644 --- a/components/icon/__tests__/demo.test.ts +++ b/components/icon/__tests__/demo.test.ts @@ -2,4 +2,5 @@ import demoTest from '../../../tests/shared/demoTest'; demoTest('icon', { testRootProps: false, + nameCheckPathOnly: true, }); diff --git a/components/index.ts b/components/index.ts index 302dbe5a4f..f01c121ab1 100644 --- a/components/index.ts +++ b/components/index.ts @@ -95,8 +95,8 @@ export { default as Popover } from './popover'; export type { PopoverProps } from './popover'; export { default as Progress } from './progress'; export type { ProgressProps } from './progress'; -export { default as QRCode } from './qrcode'; -export type { QRCodeProps, QRPropsCanvas, QRPropsSvg } from './qrcode/interface'; +export { default as QRCode } from './qr-code'; +export type { QRCodeProps, QRPropsCanvas, QRPropsSvg } from './qr-code/interface'; export { default as Radio } from './radio'; export type { RadioChangeEvent, RadioGroupProps, RadioProps } from './radio'; export { default as Rate } from './rate'; diff --git a/components/message/__tests__/demo.test.ts b/components/message/__tests__/demo.test.ts index d5e8b94500..707bf8f164 100644 --- a/components/message/__tests__/demo.test.ts +++ b/components/message/__tests__/demo.test.ts @@ -2,4 +2,5 @@ import demoTest from '../../../tests/shared/demoTest'; demoTest('message', { testRootProps: false, + nameCheckPathOnly: true, }); diff --git a/components/notification/__tests__/demo.test.ts b/components/notification/__tests__/demo.test.ts index c98085ed20..b024226c58 100644 --- a/components/notification/__tests__/demo.test.ts +++ b/components/notification/__tests__/demo.test.ts @@ -2,4 +2,5 @@ import demoTest from '../../../tests/shared/demoTest'; demoTest('notification', { testRootProps: false, + nameCheckPathOnly: true, }); diff --git a/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap similarity index 94% rename from components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap rename to components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap index f496c28534..62ff945880 100644 --- a/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`renders components/qrcode/demo/Popover.tsx extend context correctly 1`] = ` +exports[`renders components/qr-code/demo/Popover.tsx extend context correctly 1`] = ` Array [ icon @@ -77,7 +77,7 @@ exports[`renders components/qrcode/demo/base.tsx extend context correctly 1`] = `; -exports[`renders components/qrcode/demo/customColor.tsx extend context correctly 1`] = ` +exports[`renders components/qr-code/demo/customColor.tsx extend context correctly 1`] = `
@@ -113,7 +113,7 @@ exports[`renders components/qrcode/demo/customColor.tsx extend context correctly
`; -exports[`renders components/qrcode/demo/customSize.tsx extend context correctly 1`] = ` +exports[`renders components/qr-code/demo/customSize.tsx extend context correctly 1`] = ` Array [
@@ -230,7 +230,7 @@ exports[`renders components/qrcode/demo/download.tsx extend context correctly 1`
`; -exports[`renders components/qrcode/demo/errorlevel.tsx extend context correctly 1`] = ` +exports[`renders components/qr-code/demo/errorlevel.tsx extend context correctly 1`] = ` Array [
`; -exports[`renders components/qrcode/demo/status.tsx extend context correctly 1`] = ` +exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`] = `
`; -exports[`renders components/qrcode/demo/type.tsx extend context correctly 1`] = ` +exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] = `
diff --git a/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap similarity index 94% rename from components/qrcode/__tests__/__snapshots__/demo.test.ts.snap rename to components/qr-code/__tests__/__snapshots__/demo.test.ts.snap index a1dcc054ed..466f0be83c 100644 --- a/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`renders components/qrcode/demo/Popover.tsx correctly 1`] = ` +exports[`renders components/qr-code/demo/Popover.tsx correctly 1`] = ` icon `; -exports[`renders components/qrcode/demo/base.tsx correctly 1`] = ` +exports[`renders components/qr-code/demo/base.tsx correctly 1`] = `
@@ -42,7 +42,7 @@ exports[`renders components/qrcode/demo/base.tsx correctly 1`] = `
`; -exports[`renders components/qrcode/demo/customColor.tsx correctly 1`] = ` +exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = `
@@ -78,7 +78,7 @@ exports[`renders components/qrcode/demo/customColor.tsx correctly 1`] = `
`; -exports[`renders components/qrcode/demo/customSize.tsx correctly 1`] = ` +exports[`renders components/qr-code/demo/customSize.tsx correctly 1`] = ` Array [
@@ -195,7 +195,7 @@ exports[`renders components/qrcode/demo/download.tsx correctly 1`] = `
`; -exports[`renders components/qrcode/demo/errorlevel.tsx correctly 1`] = ` +exports[`renders components/qr-code/demo/errorlevel.tsx correctly 1`] = ` Array [
`; -exports[`renders components/qrcode/demo/status.tsx correctly 1`] = ` +exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
`; -exports[`renders components/qrcode/demo/type.tsx correctly 1`] = ` +exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
diff --git a/components/qrcode/__tests__/__snapshots__/index.test.tsx.snap b/components/qr-code/__tests__/__snapshots__/index.test.tsx.snap similarity index 100% rename from components/qrcode/__tests__/__snapshots__/index.test.tsx.snap rename to components/qr-code/__tests__/__snapshots__/index.test.tsx.snap diff --git a/components/qrcode/__tests__/demo-extend.test.ts b/components/qr-code/__tests__/demo-extend.test.ts similarity index 72% rename from components/qrcode/__tests__/demo-extend.test.ts rename to components/qr-code/__tests__/demo-extend.test.ts index 79dea1e4fa..4f084aa2f9 100644 --- a/components/qrcode/__tests__/demo-extend.test.ts +++ b/components/qr-code/__tests__/demo-extend.test.ts @@ -1,3 +1,3 @@ import { extendTest } from '../../../tests/shared/demoTest'; -extendTest('qrcode'); +extendTest('qr-code'); diff --git a/components/qrcode/__tests__/demo.test.ts b/components/qr-code/__tests__/demo.test.ts similarity index 72% rename from components/qrcode/__tests__/demo.test.ts rename to components/qr-code/__tests__/demo.test.ts index 1cb1d77dd4..3333ff7dac 100644 --- a/components/qrcode/__tests__/demo.test.ts +++ b/components/qr-code/__tests__/demo.test.ts @@ -1,3 +1,3 @@ import demoTest from '../../../tests/shared/demoTest'; -demoTest('qrcode'); +demoTest('qr-code'); diff --git a/components/qrcode/__tests__/image.test.ts b/components/qr-code/__tests__/image.test.ts similarity index 78% rename from components/qrcode/__tests__/image.test.ts rename to components/qr-code/__tests__/image.test.ts index df82d405e5..46d23d37f9 100644 --- a/components/qrcode/__tests__/image.test.ts +++ b/components/qr-code/__tests__/image.test.ts @@ -1,5 +1,5 @@ import { imageDemoTest } from '../../../tests/shared/imageTest'; describe('QRCode image', () => { - imageDemoTest('qrcode'); + imageDemoTest('qr-code'); }); diff --git a/components/qrcode/__tests__/index.test.tsx b/components/qr-code/__tests__/index.test.tsx similarity index 100% rename from components/qrcode/__tests__/index.test.tsx rename to components/qr-code/__tests__/index.test.tsx diff --git a/components/qrcode/demo/Popover.md b/components/qr-code/demo/Popover.md similarity index 100% rename from components/qrcode/demo/Popover.md rename to components/qr-code/demo/Popover.md diff --git a/components/qrcode/demo/Popover.tsx b/components/qr-code/demo/Popover.tsx similarity index 100% rename from components/qrcode/demo/Popover.tsx rename to components/qr-code/demo/Popover.tsx diff --git a/components/qrcode/demo/base.md b/components/qr-code/demo/base.md similarity index 100% rename from components/qrcode/demo/base.md rename to components/qr-code/demo/base.md diff --git a/components/qrcode/demo/base.tsx b/components/qr-code/demo/base.tsx similarity index 100% rename from components/qrcode/demo/base.tsx rename to components/qr-code/demo/base.tsx diff --git a/components/qrcode/demo/customColor.md b/components/qr-code/demo/customColor.md similarity index 100% rename from components/qrcode/demo/customColor.md rename to components/qr-code/demo/customColor.md diff --git a/components/qrcode/demo/customColor.tsx b/components/qr-code/demo/customColor.tsx similarity index 100% rename from components/qrcode/demo/customColor.tsx rename to components/qr-code/demo/customColor.tsx diff --git a/components/qrcode/demo/customSize.md b/components/qr-code/demo/customSize.md similarity index 100% rename from components/qrcode/demo/customSize.md rename to components/qr-code/demo/customSize.md diff --git a/components/qrcode/demo/customSize.tsx b/components/qr-code/demo/customSize.tsx similarity index 100% rename from components/qrcode/demo/customSize.tsx rename to components/qr-code/demo/customSize.tsx diff --git a/components/qrcode/demo/download.md b/components/qr-code/demo/download.md similarity index 100% rename from components/qrcode/demo/download.md rename to components/qr-code/demo/download.md diff --git a/components/qrcode/demo/download.tsx b/components/qr-code/demo/download.tsx similarity index 100% rename from components/qrcode/demo/download.tsx rename to components/qr-code/demo/download.tsx diff --git a/components/qrcode/demo/errorlevel.md b/components/qr-code/demo/errorlevel.md similarity index 100% rename from components/qrcode/demo/errorlevel.md rename to components/qr-code/demo/errorlevel.md diff --git a/components/qrcode/demo/errorlevel.tsx b/components/qr-code/demo/errorlevel.tsx similarity index 100% rename from components/qrcode/demo/errorlevel.tsx rename to components/qr-code/demo/errorlevel.tsx diff --git a/components/qrcode/demo/icon.md b/components/qr-code/demo/icon.md similarity index 100% rename from components/qrcode/demo/icon.md rename to components/qr-code/demo/icon.md diff --git a/components/qrcode/demo/icon.tsx b/components/qr-code/demo/icon.tsx similarity index 100% rename from components/qrcode/demo/icon.tsx rename to components/qr-code/demo/icon.tsx diff --git a/components/qrcode/demo/status.md b/components/qr-code/demo/status.md similarity index 100% rename from components/qrcode/demo/status.md rename to components/qr-code/demo/status.md diff --git a/components/qrcode/demo/status.tsx b/components/qr-code/demo/status.tsx similarity index 100% rename from components/qrcode/demo/status.tsx rename to components/qr-code/demo/status.tsx diff --git a/components/qrcode/demo/type.md b/components/qr-code/demo/type.md similarity index 100% rename from components/qrcode/demo/type.md rename to components/qr-code/demo/type.md diff --git a/components/qrcode/demo/type.tsx b/components/qr-code/demo/type.tsx similarity index 100% rename from components/qrcode/demo/type.tsx rename to components/qr-code/demo/type.tsx diff --git a/components/qrcode/index.en-US.md b/components/qr-code/index.en-US.md similarity index 100% rename from components/qrcode/index.en-US.md rename to components/qr-code/index.en-US.md diff --git a/components/qrcode/index.tsx b/components/qr-code/index.tsx similarity index 100% rename from components/qrcode/index.tsx rename to components/qr-code/index.tsx diff --git a/components/qrcode/index.zh-CN.md b/components/qr-code/index.zh-CN.md similarity index 100% rename from components/qrcode/index.zh-CN.md rename to components/qr-code/index.zh-CN.md diff --git a/components/qr-code/interface.ts b/components/qr-code/interface.ts new file mode 100644 index 0000000000..59c4324a21 --- /dev/null +++ b/components/qr-code/interface.ts @@ -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; + +export type QRPropsSvg = QRProps & React.SVGAttributes; + +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; +} diff --git a/components/qr-code/style/index.ts b/components/qr-code/style/index.ts new file mode 100644 index 0000000000..f40e1f30a9 --- /dev/null +++ b/components/qr-code/style/index.ts @@ -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 = (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(token, { + QRCodeExpiredTextColor: 'rgba(0, 0, 0, 0.88)', + QRCodeMaskBackgroundColor: 'rgba(255, 255, 255, 0.96)', + }), + ), +); diff --git a/components/qrcode/index.ts b/components/qrcode/index.ts new file mode 100644 index 0000000000..f5fce35367 --- /dev/null +++ b/components/qrcode/index.ts @@ -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; diff --git a/components/qrcode/interface.ts b/components/qrcode/interface.ts index 59c4324a21..28ba47cc8e 100644 --- a/components/qrcode/interface.ts +++ b/components/qrcode/interface.ts @@ -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; - -export type QRPropsSvg = QRProps & React.SVGAttributes; - -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'; diff --git a/components/qrcode/style/index.ts b/components/qrcode/style/index.ts index f40e1f30a9..cb88b4260b 100644 --- a/components/qrcode/style/index.ts +++ b/components/qrcode/style/index.ts @@ -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 = (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(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'; diff --git a/components/select/index.tsx b/components/select/index.tsx index 5f3f1b7367..5da5353afb 100755 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -275,6 +275,7 @@ const Select = React.forwardRef(InternalSelect) as unknown as (< ref?: React.Ref; }, ) => React.ReactElement) & { + displayName?: string; SECRET_COMBOBOX_MODE_DO_NOT_USE: string; Option: typeof Option; OptGroup: typeof OptGroup; @@ -290,4 +291,8 @@ Select.Option = Option; Select.OptGroup = OptGroup; Select._InternalPanelDoNotUseOrYouWillBeFired = PurePanel; +if (process.env.NODE_ENV !== 'production') { + Select.displayName = 'Select'; +} + export default Select; diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 4ab399bffd..12a136a955 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -23,6 +23,7 @@ const Table = ( }; const ForwardTable = React.forwardRef(Table) as unknown as RefTable & { + displayName?: string; SELECTION_COLUMN: typeof SELECTION_COLUMN; EXPAND_COLUMN: typeof EXPAND_COLUMN; SELECTION_ALL: typeof SELECTION_ALL; @@ -42,4 +43,8 @@ ForwardTable.Column = Column; ForwardTable.ColumnGroup = ColumnGroup; ForwardTable.Summary = Summary; +if (process.env.NODE_ENV !== 'production') { + ForwardTable.displayName = 'Table'; +} + export default ForwardTable; diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index d8edbf6000..8ae0623864 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -33,7 +33,7 @@ import type { ComponentToken as PaginationComponentToken } from '../../paginatio import type { ComponentToken as PopconfirmComponentToken } from '../../popconfirm/style'; import type { ComponentToken as PopoverComponentToken } from '../../popover/style'; import type { ComponentToken as ProgressComponentToken } from '../../progress/style'; -import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style'; +import type { ComponentToken as QRCodeComponentToken } from '../../qr-code/style'; import type { ComponentToken as RadioComponentToken } from '../../radio/style'; import type { ComponentToken as RateComponentToken } from '../../rate/style'; import type { ComponentToken as ResultComponentToken } from '../../result/style'; diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index 017494a1cd..48a6b2ed53 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -292,6 +292,7 @@ const TreeSelectRef = React.forwardRef(InternalTreeSelect) as < type InternalTreeSelectType = typeof TreeSelectRef; type CompoundedComponent = InternalTreeSelectType & { + displayName?: string; TreeNode: typeof TreeNode; SHOW_ALL: typeof SHOW_ALL; SHOW_PARENT: typeof SHOW_PARENT; @@ -311,6 +312,10 @@ TreeSelect.SHOW_PARENT = SHOW_PARENT; TreeSelect.SHOW_CHILD = SHOW_CHILD; TreeSelect._InternalPanelDoNotUseOrYouWillBeFired = PurePanel; +if (process.env.NODE_ENV !== 'production') { + TreeSelect.displayName = 'TreeSelect'; +} + export { TreeNode }; export default TreeSelect; diff --git a/scripts/generate-cssinjs.ts b/scripts/generate-cssinjs.ts index deea372cfb..ee54670f1e 100644 --- a/scripts/generate-cssinjs.ts +++ b/scripts/generate-cssinjs.ts @@ -13,7 +13,7 @@ interface GenCssinjsOptions { export const styleFiles = globSync( path.join( process.cwd(), - 'components/!(version|config-provider|icon|auto-complete|col|row|time-picker)/style/index.?(ts|tsx)', + 'components/!(version|config-provider|icon|auto-complete|col|row|time-picker|qrcode)/style/index.?(ts|tsx)', ), ); diff --git a/tests/shared/demoTest.tsx b/tests/shared/demoTest.tsx index ac120a780e..176b2b54c8 100644 --- a/tests/shared/demoTest.tsx +++ b/tests/shared/demoTest.tsx @@ -4,6 +4,7 @@ import { globSync } from 'glob'; import path from 'path'; import * as React from 'react'; import { renderToString } from 'react-dom/server'; +import { kebabCase } from 'lodash'; import { render } from '../utils'; import { TriggerMockContext } from './demoTestContext'; import { excludeWarning } from './excludeWarning'; @@ -17,6 +18,10 @@ export type Options = { skip?: boolean | string[]; testingLib?: boolean; testRootProps?: false | object; + /** + * Not check component `displayName`, check path only + */ + nameCheckPathOnly?: boolean; }; function baseText(doInject: boolean, component: string, options: Options = {}) { @@ -71,13 +76,33 @@ function baseText(doInject: boolean, component: string, options: Options = {}) { }); } +/** + * Inject Trigger to force open in test snapshots + */ export function extendTest(component: string, options: Options = {}) { baseText(true, component, options); } +/** + * Test all the demo snapshots + */ export default function demoTest(component: string, options: Options = {}) { baseText(false, component, options); + // Test component name is match the kebab-case + const testName = test; + testName('component name is match the kebab-case', () => { + const kebabName = kebabCase(component); + + // Path should exist + // eslint-disable-next-line global-require, import/no-dynamic-require + const { default: Component } = require(`../../components/${kebabName}`); + + if (options.nameCheckPathOnly !== true) { + expect(kebabCase(Component.displayName || '')).toEqual(kebabName); + } + }); + if (options?.testRootProps !== false) { rootPropsTest(component, null!, { props: options?.testRootProps,