From 5e3d81c000bd22f9c3e5b6c544b967c314cacba9 Mon Sep 17 00:00:00 2001 From: "bai.zixv" Date: Thu, 30 May 2024 19:58:29 +0800 Subject: [PATCH] feat/sancongtou-v5 (#1031) Co-authored-by: sealday Co-authored-by: wjh Co-authored-by: wangjiahui Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachybase/pulls/1031 Co-authored-by: bai.zixv Co-committed-by: bai.zixv --- .../antd/grid-card/GridCard.tsx | 32 +++++++++---------- .../client/custom-components/ShareProduct.tsx | 6 ++-- .../client/custom-components/ShowDetail.tsx | 10 +++--- .../src/client/custom-components/style.less | 11 ------- .../src/client/custom-components/style.ts | 14 ++++++++ 5 files changed, 38 insertions(+), 35 deletions(-) delete mode 100644 packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/style.less create mode 100644 packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/style.ts diff --git a/packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx b/packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx index 9b2dee4a1..d0d36ebfe 100644 --- a/packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx +++ b/packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx @@ -72,6 +72,7 @@ const InternalGridCard = (props) => { const { run, params } = service; const meta = service?.data?.meta; const fieldSchema = useFieldSchema(); + const field = useField(); const Designer = useDesigner(); const [schemaMap] = useState(new Map()); @@ -108,28 +109,24 @@ const InternalGridCard = (props) => { ); /* 以下为无限滚动逻辑 */ - // XXX: 需要仔细梳理这里的逻辑, 目前的实现有点效果问题 - const [data, setData] = useState(field.value || []); + // XXX: 需要仔细梳理这里的逻辑, 目前的实现有点效果问题, 刷新不顺滑; + // 似乎和 tachybase 本身的渲染机制有关, 渲染单个列表项的时候, 总是去取对应的 fieldSchema, 然后赋值上field.value. 这个机制导致了总是会刷新整个区块, 而不是期望的只更新增量部分. + // HACK: 这里其实是借用原本的翻页刷新机制, 模拟了无限滚动的机制. 没有时间成本去更改上游, 这样处理还算是个比较好的实现 const [hasMore, setHasMore] = useState(true); + const [fetchCount, setFetchCount] = useState(1); - const loadMore = async () => { - const { count, pageSize = 10, page = 1 } = meta || {}; - await onPaginationChange(page + 1, pageSize); + const loadMore = useCallback(async () => { + const { pageSize = 5 } = meta || {}; + await onPaginationChange(1, fetchCount * pageSize); + setFetchCount((prevFetchCount) => prevFetchCount + 1); setHasMore(false); - }; + }, [meta, onPaginationChange, setHasMore]); useEffect(() => { const { count, pageSize = 10, page = 1 } = meta || {}; const hasMore = count > page * pageSize; - - setData((val = []) => { - const currentVal = field.value || []; - return [...val, ...currentVal]; - }); - setHasMore(hasMore); - }, [meta?.page]); - + }, [meta?.pageSize]); /* 以上为无限滚动逻辑 */ return ( @@ -153,7 +150,7 @@ const InternalGridCard = (props) => { pageSizeOptions, } } - dataSource={needInfiniteScroll ? data : field.value} + dataSource={field.value} grid={{ ...columnCount, sm: columnCount.xs, @@ -161,6 +158,7 @@ const InternalGridCard = (props) => { gutter: [rowGutter, rowGutter], }} renderItem={(item, index) => { + const schema = getSchema(index); return ( { basePath={field.address} name={index} onlyRenderProperties - schema={getSchema(index)} - > + schema={schema} + /> ); }} diff --git a/packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/ShareProduct.tsx b/packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/ShareProduct.tsx index ea2c925dc..15cbc6d3d 100644 --- a/packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/ShareProduct.tsx +++ b/packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/ShareProduct.tsx @@ -5,12 +5,12 @@ import { CustomComponentType } from '@hera/plugin-core/client'; import { Button, Image, Modal, Toast } from 'antd-mobile'; import downloadImage from '../assets/download.svg'; - -import './style.less'; +import { useStyles } from './style'; export const ShareProduct = () => { + const styles = useStyles(); return ( - diff --git a/packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/ShowDetail.tsx b/packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/ShowDetail.tsx index 809652ef6..383576388 100644 --- a/packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/ShowDetail.tsx +++ b/packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/ShowDetail.tsx @@ -3,9 +3,8 @@ import React from 'react'; import { CustomComponentType } from '@hera/plugin-core/client'; import { Link, useNavigate } from 'react-router-dom'; -import './style.less'; - import { getPathProductDetail } from '../utils/path'; +import { useStyles } from './style'; // @deprecated export const ShowDetail = () => { @@ -13,12 +12,15 @@ export const ShowDetail = () => { // const handleClick = () => { // navigate('/mobile/'); // }; + const styles = useStyles(); return ( - + 显示详情 ); - Ø; }; ShowDetail.displayName = 'ShowDetail'; diff --git a/packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/style.less b/packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/style.less deleted file mode 100644 index 2685473d0..000000000 --- a/packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/style.less +++ /dev/null @@ -1,11 +0,0 @@ -.m-detail { - /* background-color: red; */ - display: flex; - flex-direction: row; - justify-content: flex-end; -} - -.m-share { - align-self: 'center'; - font-size: 16; -} \ No newline at end of file diff --git a/packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/style.ts b/packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/style.ts new file mode 100644 index 000000000..068e5bec0 --- /dev/null +++ b/packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/style.ts @@ -0,0 +1,14 @@ +import { createStyles } from '@tachybase/client'; + +export const useStyles = createStyles(({ css }) => ({ + ['m-detail']: css` + /* background-color: red; */ + display: flex; + flex-direction: row; + justify-content: flex-end; + `, + ['m-share']: css` + align-self: 'center'; + font-size: 16; + `, +}));