mirror of https://github.com/fantasticit/think.git
tiptap: get data when visible
This commit is contained in:
parent
8543c77e06
commit
db53cc576c
|
@ -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={
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -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 () => {
|
||||||
|
|
Loading…
Reference in New Issue