From e8f7af97188cdc84f22c797421fedfe67488878b Mon Sep 17 00:00:00 2001 From: "Y." Date: Mon, 11 Nov 2024 14:40:31 +0800 Subject: [PATCH] chore: make sure that the package can be imported normally in ssr (#544) --- src/_common | 2 +- src/_util/canUseDom.ts | 8 -------- src/_util/renderToContainer.ts | 4 ++-- src/_util/supportsPassive.ts | 4 ++-- src/avatar/Avatar.tsx | 4 ++-- src/hooks/useLayoutEffect.ts | 6 ++++++ src/loading/Loading.tsx | 3 ++- src/sticky/Sticky.tsx | 3 ++- src/swipe-cell/SwipeCell.tsx | 3 ++- 9 files changed, 19 insertions(+), 18 deletions(-) delete mode 100644 src/_util/canUseDom.ts create mode 100644 src/hooks/useLayoutEffect.ts diff --git a/src/_common b/src/_common index 18d16385..aff70309 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 18d16385623e9c919b7ce8dead3a8caa9a05af0a +Subproject commit aff7030919f99fce6093fbec65317e5f07762af0 diff --git a/src/_util/canUseDom.ts b/src/_util/canUseDom.ts deleted file mode 100644 index 496eaebd..00000000 --- a/src/_util/canUseDom.ts +++ /dev/null @@ -1,8 +0,0 @@ -import isUndefined from 'lodash/isUndefined'; - -export const canUseDom = !!( - !isUndefined(window) && - !isUndefined(document) && - window.document && - window.document.createElement -); diff --git a/src/_util/renderToContainer.ts b/src/_util/renderToContainer.ts index 24876335..bb0c31ef 100644 --- a/src/_util/renderToContainer.ts +++ b/src/_util/renderToContainer.ts @@ -1,12 +1,12 @@ import { createPortal } from 'react-dom'; import { ReactElement, ReactPortal } from 'react'; import { resolveContainer } from './getContainer'; -import { canUseDom } from './canUseDom'; +import { canUseDocument } from './dom'; export type GetContainer = HTMLElement | (() => HTMLElement) | null; export function renderToContainer(getContainer: GetContainer, node: ReactElement) { - if (canUseDom && getContainer) { + if (canUseDocument && getContainer) { const container = resolveContainer(getContainer); return createPortal(node, container as Element) as ReactPortal; } diff --git a/src/_util/supportsPassive.ts b/src/_util/supportsPassive.ts index 0014253e..ab6b6126 100644 --- a/src/_util/supportsPassive.ts +++ b/src/_util/supportsPassive.ts @@ -1,9 +1,9 @@ -import { canUseDom } from './canUseDom'; +import { canUseDocument } from './dom'; // eslint-disable-next-line export let supportsPassive = false; -if (canUseDom) { +if (canUseDocument) { try { const opts = {}; Object.defineProperty(opts, 'passive', { diff --git a/src/avatar/Avatar.tsx b/src/avatar/Avatar.tsx index 8103d35f..6c2dfe1a 100644 --- a/src/avatar/Avatar.tsx +++ b/src/avatar/Avatar.tsx @@ -1,8 +1,8 @@ import type { FC } from 'react'; import React, { useContext } from 'react'; import cls from 'classnames'; -import Image from 'tdesign-mobile-react/image'; -import Badge from 'tdesign-mobile-react/badge'; +import Image from '../image'; +import Badge from '../badge'; import { AvatarGroupContext } from './AvatarGroupContext'; import { isValidSize } from '../_common/js/avatar/utils'; import parseTNode from '../_util/parseTNode'; diff --git a/src/hooks/useLayoutEffect.ts b/src/hooks/useLayoutEffect.ts new file mode 100644 index 00000000..197dba61 --- /dev/null +++ b/src/hooks/useLayoutEffect.ts @@ -0,0 +1,6 @@ +import { useLayoutEffect, useEffect } from 'react'; +import { canUseDocument } from '../_util/dom'; + +const useIsomorphicLayoutEffect = canUseDocument ? useLayoutEffect : useEffect; + +export default useIsomorphicLayoutEffect; diff --git a/src/loading/Loading.tsx b/src/loading/Loading.tsx index a11012ff..2c6c0bfc 100644 --- a/src/loading/Loading.tsx +++ b/src/loading/Loading.tsx @@ -6,6 +6,7 @@ import { StyledProps } from '../common'; import Spinner from './icon/Spinner'; import Gradient from './icon/Gradient'; import Portal from '../common/Portal'; +import { canUseDocument } from '../_util/dom'; import { useLockScroll } from '../hooks/useLockScroll'; import useDefaultProps from '../hooks/useDefaultProps'; import { usePrefixClass } from '../hooks/useClass'; @@ -43,7 +44,7 @@ const Loading: React.FC = (props) => { const fullClass = `${loadingClass}--full`; const relativeClass = `${loadingClass}__parent`; - useLockScroll(loadingRef, loading && fullscreen && preventScrollThrough, loadingClass); + useLockScroll(loadingRef, canUseDocument && loading && fullscreen && preventScrollThrough, loadingClass); // 当延时加载delay有值时，值会发生变化 const [reloading, setReloading] = useState(!delay && loading); diff --git a/src/sticky/Sticky.tsx b/src/sticky/Sticky.tsx index 52457769..b4811aa8 100644 --- a/src/sticky/Sticky.tsx +++ b/src/sticky/Sticky.tsx @@ -1,9 +1,10 @@ -import React, { FC, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'; +import React, { FC, useCallback, useEffect, useRef, useState } from 'react'; import useConfig from '../_util/useConfig'; import { TdStickyProps } from './type'; import { stickyDefaultProps } from './defaultProps'; import { resolveContainer } from '../_util/getContainer'; import useDefaultProps from '../hooks/useDefaultProps'; +import useLayoutEffect from '../hooks/useLayoutEffect'; const Sticky: FC = (originProps) => { const props = useDefaultProps(originProps, stickyDefaultProps); diff --git a/src/swipe-cell/SwipeCell.tsx b/src/swipe-cell/SwipeCell.tsx index 85eb9bd6..29b3b547 100644 --- a/src/swipe-cell/SwipeCell.tsx +++ b/src/swipe-cell/SwipeCell.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, useImperativeHandle, useRef, useLayoutEffect, useMemo, useState } from 'react'; +import React, { forwardRef, useImperativeHandle, useRef, useMemo, useState } from 'react'; import type { ReactNode } from 'react'; import isArray from 'lodash/isArray'; import isBoolean from 'lodash/isBoolean'; @@ -12,6 +12,7 @@ import { TdSwipeCellProps, SwipeActionItem, Sure } from './type'; import { swipeCellDefaultProps } from './defaultProps'; import { usePrefixClass } from '../hooks/useClass'; import useDefaultProps from '../hooks/useDefaultProps'; +import useLayoutEffect from '../hooks/useLayoutEffect'; import { Styles, StyledProps } from '../common'; import './style';