mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-16 03:35:10 +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 { Skeleton, CardProps } from 'antd';
import { CardProps } from 'antd';
import React, { FC } from 'react';
import { IntersectionOptions, useInView } from 'react-intersection-observer';
import { useSchemaTemplate } from '../../../schema-templates';
import { BlockItem } from '../block-item';
import { BlockItemCard } from '../block-item/BlockItemCard';
@ -20,38 +19,22 @@ import useStyles from './style';
export interface CardItemProps extends CardProps {
name?: string;
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;
height?: number;
}
export const CardItem: FC<CardItemProps> = (props) => {
const { children, name, lazyRender = {}, heightMode, ...restProps } = props;
const { children, name, heightMode, ...restProps } = props;
const template = useSchemaTemplate();
const fieldSchema = useFieldSchema();
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();
if (templateKey && !template) return null;
return wrapSSR(
<BlockItemError>
<BlockItem name={name} className={`${componentCls} ${hashId} noco-card-item`}>
<BlockItemCard ref={ref} {...restProps}>
{inView ? props.children : lazyRenderElement ?? <Skeleton paragraph={{ rows: 4 }} />}
</BlockItemCard>
<BlockItemCard {...restProps}>{props.children}</BlockItemCard>
</BlockItem>
</BlockItemError>,
);