From 698c0ff3b4165c6c42309935bf4fab979e8238ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=9C=E5=86=BB=E6=A9=99?= Date: Wed, 17 May 2023 11:05:47 +0800 Subject: [PATCH] feat: add tour (#6332) * feat v4 add tour * fix type error * sync tour from antd5.4.6 & fix type error * fix error --- components/_util/hooks/useId.ts | 30 + components/components.ts | 3 + components/locale/en_US.ts | 5 + components/locale/index.tsx | 2 + components/locale/pt_BR.ts | 5 + components/locale/zh_CN.ts | 5 + components/locale/zh_HK.ts | 5 + components/locale/zh_TW.ts | 5 + components/theme/interface/alias.ts | 1 + components/theme/interface/components.ts | 4 +- components/theme/util/alias.ts | 5 + .../__snapshots__/demo-extend.test.ts.snap | 478 ++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 478 ++++++++++++ .../__snapshots__/index.test.tsx.snap | 706 ++++++++++++++++++ components/tour/__tests__/demo-extend.test.ts | 3 + components/tour/__tests__/demo.test.ts | 3 + components/tour/__tests__/image.test.ts | 5 + components/tour/__tests__/index.test.tsx | 287 +++++++ components/tour/demo/basic.vue | 70 ++ components/tour/demo/index.vue | 35 + components/tour/demo/indicator.vue | 70 ++ components/tour/demo/mask.vue | 86 +++ components/tour/demo/non-modal.vue | 69 ++ components/tour/demo/placement.vue | 57 ++ components/tour/index.en-US.md | 59 ++ components/tour/index.tsx | 82 ++ components/tour/index.zh-CN.md | 60 ++ components/tour/interface.ts | 41 + components/tour/panelRender.tsx | 154 ++++ components/tour/style/index.ts | 250 +++++++ components/tour/useMergedType.ts | 35 + components/vc-tour/Mask.tsx | 130 ++++ components/vc-tour/Tour.tsx | 243 ++++++ components/vc-tour/TourStep/DefaultPanel.tsx | 55 ++ components/vc-tour/TourStep/index.tsx | 25 + components/vc-tour/hooks/useScrollLocker.tsx | 44 ++ components/vc-tour/hooks/useTarget.ts | 100 +++ components/vc-tour/index.tsx | 6 + components/vc-tour/interface.ts | 36 + components/vc-tour/placements.tsx | 135 ++++ components/vc-tour/util.ts | 7 + components/vc-trigger/Trigger.tsx | 56 +- components/vc-trigger/index.ts | 5 + components/vc-trigger/interface.ts | 59 +- 44 files changed, 3943 insertions(+), 56 deletions(-) create mode 100644 components/_util/hooks/useId.ts create mode 100644 components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap create mode 100644 components/tour/__tests__/__snapshots__/demo.test.ts.snap create mode 100644 components/tour/__tests__/__snapshots__/index.test.tsx.snap create mode 100644 components/tour/__tests__/demo-extend.test.ts create mode 100644 components/tour/__tests__/demo.test.ts create mode 100644 components/tour/__tests__/image.test.ts create mode 100644 components/tour/__tests__/index.test.tsx create mode 100644 components/tour/demo/basic.vue create mode 100644 components/tour/demo/index.vue create mode 100644 components/tour/demo/indicator.vue create mode 100644 components/tour/demo/mask.vue create mode 100644 components/tour/demo/non-modal.vue create mode 100644 components/tour/demo/placement.vue create mode 100644 components/tour/index.en-US.md create mode 100644 components/tour/index.tsx create mode 100644 components/tour/index.zh-CN.md create mode 100644 components/tour/interface.ts create mode 100644 components/tour/panelRender.tsx create mode 100644 components/tour/style/index.ts create mode 100644 components/tour/useMergedType.ts create mode 100644 components/vc-tour/Mask.tsx create mode 100644 components/vc-tour/Tour.tsx create mode 100644 components/vc-tour/TourStep/DefaultPanel.tsx create mode 100644 components/vc-tour/TourStep/index.tsx create mode 100644 components/vc-tour/hooks/useScrollLocker.tsx create mode 100644 components/vc-tour/hooks/useTarget.ts create mode 100644 components/vc-tour/index.tsx create mode 100644 components/vc-tour/interface.ts create mode 100644 components/vc-tour/placements.tsx create mode 100644 components/vc-tour/util.ts diff --git a/components/_util/hooks/useId.ts b/components/_util/hooks/useId.ts new file mode 100644 index 000000000..fea54f908 --- /dev/null +++ b/components/_util/hooks/useId.ts @@ -0,0 +1,30 @@ +import { ref } from 'vue'; +import canUseDom from '../../_util/canUseDom'; + +let uuid = 0; + +/** Is client side and not jsdom */ +export const isBrowserClient = process.env.NODE_ENV !== 'test' && canUseDom(); + +/** Get unique id for accessibility usage */ +export function getUUID(): number | string { + let retId: string | number; + + // Test never reach + /* istanbul ignore if */ + if (isBrowserClient) { + retId = uuid; + uuid += 1; + } else { + retId = 'TEST_OR_SSR'; + } + + return retId; +} + +export default function useId(id = ref('')) { + // Inner id for accessibility usage. Only work in client side + const innerId = `vc_unique_${getUUID()}`; + + return id.value || innerId; +} diff --git a/components/components.ts b/components/components.ts index d6b1e6d80..f9db584a6 100644 --- a/components/components.ts +++ b/components/components.ts @@ -258,3 +258,6 @@ export { default as Segmented } from './segmented'; export type { QRCodeProps } from './qrcode'; export { default as QRCode } from './qrcode'; + +export type { TourProps, TourStepProps } from './tour'; +export { default as Tour } from './tour'; diff --git a/components/locale/en_US.ts b/components/locale/en_US.ts index 1038f45df..ae0af4a55 100644 --- a/components/locale/en_US.ts +++ b/components/locale/en_US.ts @@ -35,6 +35,11 @@ const localeValues: Locale = { triggerAsc: 'Click to sort ascending', cancelSort: 'Click to cancel sorting', }, + Tour: { + Next: 'Next', + Previous: 'Previous', + Finish: 'Finish', + }, Modal: { okText: 'OK', cancelText: 'Cancel', diff --git a/components/locale/index.tsx b/components/locale/index.tsx index 0f7a8c59f..2985422d7 100644 --- a/components/locale/index.tsx +++ b/components/locale/index.tsx @@ -10,6 +10,7 @@ import type { PickerLocale as DatePickerLocale } from '../date-picker/generatePi import type { PaginationLocale } from '../pagination/Pagination'; import type { TableLocale } from '../table/interface'; import type { UploadLocale } from '../upload/interface'; +import type { TourLocale } from '../tour/interface'; interface TransferLocaleForEmpty { description: string; @@ -43,6 +44,7 @@ export interface Locale { copied?: any; expand?: any; }; + Tour?: TourLocale; QRCode?: { expired?: string; refresh?: string; diff --git a/components/locale/pt_BR.ts b/components/locale/pt_BR.ts index ec779f0cb..99c5ceff2 100644 --- a/components/locale/pt_BR.ts +++ b/components/locale/pt_BR.ts @@ -33,6 +33,11 @@ const localeValues: Locale = { triggerAsc: 'Clique organiza por ascendente', cancelSort: 'Clique para cancelar organização', }, + Tour: { + Next: 'Próximo', + Previous: 'Anterior', + Finish: 'Finalizar', + }, Modal: { okText: 'OK', cancelText: 'Cancelar', diff --git a/components/locale/zh_CN.ts b/components/locale/zh_CN.ts index 65e601980..3455f4f08 100644 --- a/components/locale/zh_CN.ts +++ b/components/locale/zh_CN.ts @@ -35,6 +35,11 @@ const localeValues: Locale = { triggerAsc: '点击升序', cancelSort: '取消排序', }, + Tour: { + Next: '下一步', + Previous: '上一步', + Finish: '结束导览', + }, Modal: { okText: '确定', cancelText: '取消', diff --git a/components/locale/zh_HK.ts b/components/locale/zh_HK.ts index 17a491d5b..858719081 100644 --- a/components/locale/zh_HK.ts +++ b/components/locale/zh_HK.ts @@ -32,6 +32,11 @@ const localeValues: Locale = { triggerAsc: '點擊升序', cancelSort: '取消排序', }, + Tour: { + Next: '下一步', + Previous: '上一步', + Finish: '結束導覽', + }, Modal: { okText: '確定', cancelText: '取消', diff --git a/components/locale/zh_TW.ts b/components/locale/zh_TW.ts index 3100f87d4..fc639d4d4 100644 --- a/components/locale/zh_TW.ts +++ b/components/locale/zh_TW.ts @@ -32,6 +32,11 @@ const localeValues: Locale = { triggerAsc: '點擊升序', cancelSort: '取消排序', }, + Tour: { + Next: '下一步', + Previous: '上一步', + Finish: '結束導覽', + }, Modal: { okText: '確定', cancelText: '取消', diff --git a/components/theme/interface/alias.ts b/components/theme/interface/alias.ts index 50353a82e..bd6f228db 100644 --- a/components/theme/interface/alias.ts +++ b/components/theme/interface/alias.ts @@ -94,6 +94,7 @@ export interface AliasToken extends MapToken { boxShadow: string; boxShadowSecondary: string; + boxShadowTertiary: string; linkDecoration: CSSProperties['textDecoration']; linkHoverDecoration: CSSProperties['textDecoration']; diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 8ac020484..92f2fffb8 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -44,7 +44,7 @@ import type { ComponentToken as TooltipComponentToken } from '../../tooltip/styl import type { ComponentToken as TransferComponentToken } from '../../transfer/style'; import type { ComponentToken as TypographyComponentToken } from '../../typography/style'; import type { ComponentToken as UploadComponentToken } from '../../upload/style'; -// import type { ComponentToken as TourComponentToken } from '../../tour/style'; +import type { ComponentToken as TourComponentToken } from '../../tour/style'; import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style'; // import type { ComponentToken as AppComponentToken } from '../../app/style'; import type { ComponentToken as WaveToken } from '../../_util/wave/style'; @@ -110,7 +110,7 @@ export interface ComponentTokenMap { Table?: TableComponentToken; Space?: SpaceComponentToken; Progress?: ProgressComponentToken; - // Tour?: TourComponentToken; + Tour?: TourComponentToken; QRCode?: QRCodeComponentToken; // App?: AppComponentToken; diff --git a/components/theme/util/alias.ts b/components/theme/util/alias.ts index 91d2d4f6e..b886bd1db 100644 --- a/components/theme/util/alias.ts +++ b/components/theme/util/alias.ts @@ -134,6 +134,11 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) `, + boxShadowTertiary: ` + 0 1px 2px 0 rgba(0, 0, 0, 0.03), + 0 1px 6px -1px rgba(0, 0, 0, 0.02), + 0 2px 4px 0 rgba(0, 0, 0, 0.02) + `, screenXS, screenXSMin: screenXS, diff --git a/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap new file mode 100644 index 000000000..6e4007551 --- /dev/null +++ b/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -0,0 +1,478 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/tour/demo/basic.tsx extend context correctly 1`] = ` +Array [ + , +