mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-16 05:55:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(CardItem): remove lazy render

Browse Source
This commit is contained in:
Zeke Zhang 2024-10-24 21:03:28 +08:00
parent ff978c5328
commit 3ee1f18068
1 changed files with 3 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/core/client/src/schema-component/antd/card-item/CardItem.tsx
View File

@ -8,9 +8,8 @@
*/ */
import { useFieldSchema } from '@formily/react'; import { useFieldSchema } from '@formily/react';
import { Skeleton, CardProps } from 'antd'; import { CardProps } from 'antd';
import React, { FC } from 'react'; import React, { FC } from 'react';
import { IntersectionOptions, useInView } from 'react-intersection-observer';
import { useSchemaTemplate } from '../../../schema-templates'; import { useSchemaTemplate } from '../../../schema-templates';
import { BlockItem } from '../block-item'; import { BlockItem } from '../block-item';
import { BlockItemCard } from '../block-item/BlockItemCard'; import { BlockItemCard } from '../block-item/BlockItemCard';
@ -20,38 +19,22 @@ import useStyles from './style';
export interface CardItemProps extends CardProps { export interface CardItemProps extends CardProps {
name?: string; name?: string;
children?: React.ReactNode; children?: React.ReactNode;
/**
* lazy render options
* @default { threshold: 0, initialInView: true, triggerOnce: true }
* @see https://github.com/thebuilder/react-intersection-observer
*/
lazyRender?: IntersectionOptions & { element?: React.JSX.Element };
heightMode?: string; heightMode?: string;
height?: number; height?: number;
} }
export const CardItem: FC<CardItemProps> = (props) => { export const CardItem: FC<CardItemProps> = (props) => {
const { children, name, lazyRender = {}, heightMode, ...restProps } = props; const { children, name, heightMode, ...restProps } = props;
const template = useSchemaTemplate(); const template = useSchemaTemplate();
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
const templateKey = fieldSchema?.['x-template-key']; const templateKey = fieldSchema?.['x-template-key'];
const { element: lazyRenderElement, ...resetLazyRenderOptions } = lazyRender;
const { ref, inView } = useInView({
threshold: 0,
initialInView: true,
triggerOnce: true,
skip: !!process.env.__E2E__,
...resetLazyRenderOptions,
});
const { wrapSSR, componentCls, hashId } = useStyles(); const { wrapSSR, componentCls, hashId } = useStyles();
if (templateKey && !template) return null; if (templateKey && !template) return null;
return wrapSSR( return wrapSSR(
<BlockItemError> <BlockItemError>
<BlockItem name={name} className={`${componentCls} ${hashId} noco-card-item`}> <BlockItem name={name} className={`${componentCls} ${hashId} noco-card-item`}>
<BlockItemCard ref={ref} {...restProps}> <BlockItemCard {...restProps}>{props.children}</BlockItemCard>
{inView ? props.children : lazyRenderElement ?? <Skeleton paragraph={{ rows: 4 }} />}
</BlockItemCard>
</BlockItem> </BlockItem>
</BlockItemError>, </BlockItemError>,
); );