gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tiptap: get data when visible

This commit is contained in:
fantasticit 2022-06-21 23:08:34 +08:00
parent 8543c77e06
commit db53cc576c
3 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/src/components/document/actions/index.tsx
View File

@ -55,7 +55,6 @@ export const DocumentActions: React.FC<IProps> = ({
<Popover <Popover
showArrow showArrow
style={{ padding: 0 }} style={{ padding: 0 }}
trigger="click"
visible={popoverVisible} visible={popoverVisible}
onVisibleChange={wrapOnVisibleChange} onVisibleChange={wrapOnVisibleChange}
content={ content={

20
packages/client/src/components/document/star/index.tsx
View File

@ -1,7 +1,9 @@
import { IconStar } from '@douyinfe/semi-icons'; import { IconStar } from '@douyinfe/semi-icons';
import { Button, Tooltip } from '@douyinfe/semi-ui'; import { Button, Tooltip } from '@douyinfe/semi-ui';
import { useDocumentCollectToggle } from 'data/collector'; import { useDocumentCollectToggle } from 'data/collector';
import React from 'react'; import { useToggle } from 'hooks/use-toggle';
import React, { useCallback } from 'react';
import VisibilitySensor from 'react-visibility-sensor';
interface IProps { interface IProps {
documentId: string; documentId: string;
@ -15,11 +17,21 @@ interface IProps {
} }
export const DocumentStar: React.FC<IProps> = ({ documentId, disabled = false, render }) => { export const DocumentStar: React.FC<IProps> = ({ documentId, disabled = false, render }) => {
const { data, toggle: toggleStar } = useDocumentCollectToggle(documentId); const [visible, toggleVisible] = useToggle(false);
const { data, toggle: toggleStar } = useDocumentCollectToggle(documentId, { enabled: visible });
const text = data ? '取消收藏' : '收藏文档'; const text = data ? '取消收藏' : '收藏文档';
const onViewportChange = useCallback(
(visible) => {
if (visible) {
toggleVisible(true);
}
},
[toggleVisible]
);
return ( return (
<> <VisibilitySensor onChange={onViewportChange}>
{render ? ( {render ? (
render({ star: data, disabled, toggleStar, text }) render({ star: data, disabled, toggleStar, text })
) : ( ) : (
@ -39,6 +51,6 @@ export const DocumentStar: React.FC<IProps> = ({ documentId, disabled = false, r
/> />
</Tooltip> </Tooltip>
)} )}
</> </VisibilitySensor>
); );
}; };

10
packages/client/src/data/collector.ts
View File

@ -7,7 +7,7 @@ import {
triggerToggleCollectWiki, triggerToggleCollectWiki,
} from 'event'; } from 'event';
import { useCallback, useEffect } from 'react'; import { useCallback, useEffect } from 'react';
import { useQuery } from 'react-query'; import { useQuery, UseQueryOptions } from 'react-query';
import { HttpClient } from 'services/http-client'; import { HttpClient } from 'services/http-client';
export type IWikiWithIsMember = IWiki & { isMember?: boolean }; export type IWikiWithIsMember = IWiki & { isMember?: boolean };
@ -168,9 +168,11 @@ export const toggleCollectDocument = (documentId, cookie = null): Promise<boolea
* @param documentId * @param documentId
* @returns * @returns
*/ */
export const useDocumentCollectToggle = (documentId) => { export const useDocumentCollectToggle = (documentId, options?: UseQueryOptions<boolean>) => {
const { data, error, refetch } = useQuery([CollectorApiDefinition.check.client(), documentId], () => const { data, error, refetch } = useQuery(
getDocumentIsCollected(documentId) [CollectorApiDefinition.check.client(), documentId],
() => getDocumentIsCollected(documentId),
options
); );
const toggle = useCallback(async () => { const toggle = useCallback(async () => {