From 37b5d02b6d402a9c05025534b8d73391f74ec6da Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Thu, 23 Feb 2023 11:58:23 +0800 Subject: [PATCH] fix: use open, remove visible --- .gitignore | 4 + .../_util/cssinjs/hooks/useStyleRegister.tsx | 152 +++++++++--------- components/affix/index.tsx | 14 +- components/config-provider/demo/direction.vue | 2 +- components/config-provider/demo/locale.vue | 2 +- .../date-picker/generatePicker/props.ts | 6 + components/dropdown/demo/overlay-visible.vue | 2 +- components/form/ErrorList.tsx | 14 +- components/form/demo/form-context.vue | 2 +- components/form/demo/form-in-modal.vue | 2 +- components/form/demo/lable-width.vue | 2 +- components/menu/demo/template.vue | 54 +++---- components/menu/src/MenuItem.tsx | 2 +- .../popconfirm/demo/dynamic-trigger.vue | 4 +- components/popconfirm/index.tsx | 6 + components/popover/demo/control.vue | 2 +- components/popover/demo/hover-with-click.vue | 11 +- components/popover/index.tsx | 7 +- components/segmented/src/segmented.tsx | 34 ++-- components/space/demo/wrap.vue | 2 +- .../tabs/src/TabNavList/OperationNode.tsx | 4 +- components/tooltip/__tests__/tooltip.test.js | 44 ++--- components/upload/demo/picture-card.vue | 2 +- components/vc-input/inputProps.ts | 52 +++--- site/src/components/rice/sponsors.vue | 2 +- site/src/demo.js | 6 + site/src/layouts/header/index.vue | 2 +- 27 files changed, 232 insertions(+), 204 deletions(-) diff --git a/.gitignore b/.gitignore index e68dd6e1d..b45e673a2 100644 --- a/.gitignore +++ b/.gitignore @@ -59,6 +59,7 @@ jspm_packages/ dist lib es +/locale _site yarn.lock package-lock.json @@ -78,5 +79,8 @@ report.html site/src/router/demoRoutes.js +components/version/version.ts components/version/version.tsx +components/version/token.json +components/version/token-meta.json ~component-api.json diff --git a/components/_util/cssinjs/hooks/useStyleRegister.tsx b/components/_util/cssinjs/hooks/useStyleRegister.tsx index 85700e7fa..f0f154fd8 100644 --- a/components/_util/cssinjs/hooks/useStyleRegister.tsx +++ b/components/_util/cssinjs/hooks/useStyleRegister.tsx @@ -1,4 +1,4 @@ -// import hash from '@emotion/hash'; +import hash from '@emotion/hash'; import type * as CSS from 'csstype'; // @ts-ignore import unitless from '@emotion/unitless'; @@ -10,22 +10,22 @@ import type { Linter } from '../linters'; import { contentQuotesLinter, hashedAnimationLinter } from '../linters'; import type { HashPriority } from '../StyleContext'; import { - // useStyleInject, - // ATTR_DEV_CACHE_PATH, + useStyleInject, + ATTR_DEV_CACHE_PATH, ATTR_MARK, ATTR_TOKEN, - // CSS_IN_JS_INSTANCE, - // CSS_IN_JS_INSTANCE_ID, + CSS_IN_JS_INSTANCE, + CSS_IN_JS_INSTANCE_ID, } from '../StyleContext'; import { supportLayer } from '../util'; -// import useGlobalCache from './useGlobalCache'; -// import canUseDom from '../../canUseDom'; -// import { removeCSS, updateCSS } from '../../../vc-util/Dom/dynamicCSS'; +import useGlobalCache from './useGlobalCache'; +import canUseDom from '../../canUseDom'; +import { removeCSS, updateCSS } from '../../../vc-util/Dom/dynamicCSS'; import type { Ref } from 'vue'; -// import { computed } from 'vue'; +import { computed } from 'vue'; import type { VueNode } from '../../type'; -// const isClientSide = canUseDom(); +const isClientSide = canUseDom(); const SKIP_CHECK = '_skip_check_'; @@ -275,9 +275,9 @@ export const parseStyle = ( // ============================================================================ // == Register == // ============================================================================ -// function uniqueHash(path: (string | number)[], styleStr: string) { -// return hash(`${path.join('%')}${styleStr}`); -// } +function uniqueHash(path: (string | number)[], styleStr: string) { + return hash(`${path.join('%')}${styleStr}`); +} // function Empty() { // return null; @@ -287,90 +287,88 @@ export const parseStyle = ( * Register a style to the global style sheet. */ export default function useStyleRegister( - // eslint-disable-next-line @typescript-eslint/no-unused-vars - _info: Ref<{ + info: Ref<{ theme: Theme; token: any; path: string[]; hashId?: string; layer?: string; }>, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - _styleFn: () => CSSInterpolation, + styleFn: () => CSSInterpolation, ) { - // const styleContext = useStyleInject(); + const styleContext = useStyleInject(); - // const tokenKey = computed(() => info.value.token._tokenKey as string); + const tokenKey = computed(() => info.value.token._tokenKey as string); - // const fullPath = computed(() => [tokenKey.value, ...info.value.path]); + const fullPath = computed(() => [tokenKey.value, ...info.value.path]); // Check if need insert style - // let isMergedClientSide = isClientSide; - // if (process.env.NODE_ENV !== 'production' && styleContext.mock !== undefined) { - // isMergedClientSide = styleContext.mock === 'client'; - // } + let isMergedClientSide = isClientSide; + if (process.env.NODE_ENV !== 'production' && styleContext.mock !== undefined) { + isMergedClientSide = styleContext.mock === 'client'; + } // const [cacheStyle[0], cacheStyle[1], cacheStyle[2]] - // const cacheStyle = useGlobalCache( - // 'style', - // fullPath, - // // Create cache if needed - // () => { - // const styleObj = styleFn(); - // const { hashPriority, container, transformers, linters } = styleContext; - // const { path, hashId, layer } = info.value; - // const [parsedStyle, effectStyle] = parseStyle(styleObj, { - // hashId, - // hashPriority, - // layer, - // path: path.join('-'), - // transformers, - // linters, - // }); - // const styleStr = normalizeStyle(parsedStyle); - // const styleId = uniqueHash(fullPath.value, styleStr); + useGlobalCache( + 'style', + fullPath, + // Create cache if needed + () => { + const styleObj = styleFn(); + const { hashPriority, container, transformers, linters } = styleContext; + const { path, hashId, layer } = info.value; + const [parsedStyle, effectStyle] = parseStyle(styleObj, { + hashId, + hashPriority, + layer, + path: path.join('-'), + transformers, + linters, + }); + const styleStr = normalizeStyle(parsedStyle); + const styleId = uniqueHash(fullPath.value, styleStr); - // if (isMergedClientSide) { - // const style = updateCSS(styleStr, styleId, { - // mark: ATTR_MARK, - // prepend: 'queue', - // attachTo: container, - // }); + if (isMergedClientSide) { + const style = updateCSS(styleStr, styleId, { + mark: ATTR_MARK, + prepend: 'queue', + attachTo: container, + }); - // (style as any)[CSS_IN_JS_INSTANCE] = CSS_IN_JS_INSTANCE_ID; + (style as any)[CSS_IN_JS_INSTANCE] = CSS_IN_JS_INSTANCE_ID; - // // Used for `useCacheToken` to remove on batch when token removed - // style.setAttribute(ATTR_TOKEN, tokenKey.value); + // Used for `useCacheToken` to remove on batch when token removed + style.setAttribute(ATTR_TOKEN, tokenKey.value); - // // Dev usage to find which cache path made this easily - // if (process.env.NODE_ENV !== 'production') { - // style.setAttribute(ATTR_DEV_CACHE_PATH, fullPath.value.join('|')); - // } + // Dev usage to find which cache path made this easily + if (process.env.NODE_ENV !== 'production') { + style.setAttribute(ATTR_DEV_CACHE_PATH, fullPath.value.join('|')); + } - // // Inject client side effect style - // Object.keys(effectStyle).forEach(effectKey => { - // if (!globalEffectStyleKeys.has(effectKey)) { - // globalEffectStyleKeys.add(effectKey); + // Inject client side effect style + Object.keys(effectStyle).forEach(effectKey => { + if (!globalEffectStyleKeys.has(effectKey)) { + globalEffectStyleKeys.add(effectKey); - // // Inject - // updateCSS(normalizeStyle(effectStyle[effectKey]), `_effect-${effectKey}`, { - // mark: ATTR_MARK, - // prepend: 'queue', - // attachTo: container, - // }); - // } - // }); - // } + // Inject + updateCSS(normalizeStyle(effectStyle[effectKey]), `_effect-${effectKey}`, { + mark: ATTR_MARK, + prepend: 'queue', + attachTo: container, + }); + } + }); + } - // return [styleStr, tokenKey.value, styleId]; - // }, - // // Remove cache if no need - // ([, , styleId], fromHMR) => { - // if ((fromHMR || styleContext.autoClear) && isClientSide) { - // removeCSS(styleId, { mark: ATTR_MARK }); - // } - // }, - // ); + return [styleStr, tokenKey.value, styleId]; + }, + // Remove cache if no need + ([, , styleId], fromHMR) => { + if ((fromHMR || styleContext.autoClear) && isClientSide) { + removeCSS(styleId, { mark: ATTR_MARK }); + } + }, + ); return (node: VueNode) => { return node; diff --git a/components/affix/index.tsx b/components/affix/index.tsx index 2a6b84741..5b59347d6 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -111,15 +111,15 @@ const Affix = defineComponent({ status: AffixStatus.None, } as AffixState; const targetRect = getTargetRect(targetNode); - const placeholderReact = getTargetRect(placeholderNode.value as HTMLElement); - const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop.value); - const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom.value); + const placeholderRect = getTargetRect(placeholderNode.value as HTMLElement); + const fixedTop = getFixedTop(placeholderRect, targetRect, offsetTop.value); + const fixedBottom = getFixedBottom(placeholderRect, targetRect, offsetBottom.value); if ( - placeholderReact.top === 0 && - placeholderReact.left === 0 && - placeholderReact.width === 0 && - placeholderReact.height === 0 + placeholderRect.top === 0 && + placeholderRect.left === 0 && + placeholderRect.width === 0 && + placeholderRect.height === 0 ) { return; } diff --git a/components/config-provider/demo/direction.vue b/components/config-provider/demo/direction.vue index f8564144b..1676728f5 100644 --- a/components/config-provider/demo/direction.vue +++ b/components/config-provider/demo/direction.vue @@ -226,7 +226,7 @@ Components which support rtl direction are listed here, you can toggle the direc Modal example
Open Modal - +

نگاشته‌های خود را اینجا قراردهید

نگاشته‌های خود را اینجا قراردهید

نگاشته‌های خود را اینجا قراردهید

diff --git a/components/config-provider/demo/locale.vue b/components/config-provider/demo/locale.vue index 1faf0825a..f60c0213f 100644 --- a/components/config-provider/demo/locale.vue +++ b/components/config-provider/demo/locale.vue @@ -54,7 +54,7 @@ Components which need localization support are listed here, you can toggle the l
- +

Locale Modal
diff --git a/components/date-picker/generatePicker/props.ts b/components/date-picker/generatePicker/props.ts index 21f5fdd15..58c8707f1 100644 --- a/components/date-picker/generatePicker/props.ts +++ b/components/date-picker/generatePicker/props.ts @@ -29,6 +29,10 @@ import type { InputStatus } from '../../_util/statusUtils'; const DataPickerPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as const; type DataPickerPlacement = (typeof DataPickerPlacements)[number]; +type RangeShowTimeObject = Omit, 'defaultValue'> & { + defaultValue?: DateType[]; +}; + function commonProps() { return { id: String, @@ -205,6 +209,7 @@ function rangePickerProps() { format: String, renderExtraFooter: functionType<() => VueNode>(), separator: { type: String }, + showTime: someType>([Boolean, Object]), ranges: objectType< Record< @@ -250,6 +255,7 @@ export interface RangePickerProps { format?: string; renderExtraFooter?: () => VueNode; separator?: string; + showTime?: boolean | RangeShowTimeObject; ranges?: Record< string, Exclude, null> | (() => Exclude, null>) diff --git a/components/dropdown/demo/overlay-visible.vue b/components/dropdown/demo/overlay-visible.vue index bc8043c12..97fe04e04 100644 --- a/components/dropdown/demo/overlay-visible.vue +++ b/components/dropdown/demo/overlay-visible.vue @@ -17,7 +17,7 @@ The default is to close the menu when you click on menu items, this feature can