feat: improve tocs event

This commit is contained in:
fantasticit 2022-04-03 10:46:12 +08:00
parent 6113ecc101
commit a8d9f41734
5 changed files with 53 additions and 36 deletions

View File

@ -3,7 +3,7 @@ import Router from 'next/router';
import { Typography, Space, Modal } from '@douyinfe/semi-ui'; import { Typography, Space, Modal } from '@douyinfe/semi-ui';
import { IconDelete } from '@douyinfe/semi-icons'; import { IconDelete } from '@douyinfe/semi-icons';
import { useDeleteDocument } from 'data/document'; import { useDeleteDocument } from 'data/document';
import { triggerRefreshTocs } from 'components/wiki/tocs'; import { triggerRefreshTocs } from 'components/wiki/tocs/event';
interface IProps { interface IProps {
wikiId: string; wikiId: string;

View File

@ -0,0 +1,20 @@
import { IDocument, IWiki } from '@think/domains';
import { event } from 'helpers/event-emitter';
export const REFRESH_TOCS = `REFRESH_TOCS`; // 刷新知识库目录
export const CREATE_DOCUMENT = `CREATE_DOCUMENT`;
/**
*
*/
export const triggerRefreshTocs = () => {
event.emit(REFRESH_TOCS);
};
/**
*
* @param data
*/
export const triggerCreateDocument = (data: { wikiId: IWiki['id']; documentId: IDocument['id'] | null }) => {
event.emit(CREATE_DOCUMENT, data);
};

View File

@ -2,25 +2,18 @@ import { useRouter } from 'next/router';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Avatar, Button, Typography, Skeleton, Tooltip } from '@douyinfe/semi-ui'; import { Avatar, Button, Typography, Skeleton, Tooltip } from '@douyinfe/semi-ui';
import { IconPlus } from '@douyinfe/semi-icons'; import { IconPlus } from '@douyinfe/semi-icons';
import { isPublicWiki } from '@think/domains';
import { useWikiDetail, useWikiTocs } from 'data/wiki'; import { useWikiDetail, useWikiTocs } from 'data/wiki';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import { Seo } from 'components/seo'; import { Seo } from 'components/seo';
import { findParents } from 'components/wiki/tocs/utils'; import { findParents } from 'components/wiki/tocs/utils';
import { IconDocument, IconSetting, IconOverview, IconGlobe } from 'components/icons'; import { IconDocument, IconSetting, IconOverview, IconGlobe } from 'components/icons';
import { DocumentCreator } from 'components/document/create';
import { DataRender } from 'components/data-render'; import { DataRender } from 'components/data-render';
import { EventEmitter } from 'helpers/event-emitter'; import { event } from 'helpers/event-emitter';
import { REFRESH_TOCS, triggerCreateDocument } from './event';
import { NavItem } from './nav-item'; import { NavItem } from './nav-item';
import { Tree } from './tree'; import { Tree } from './tree';
import styles from './index.module.scss'; import styles from './index.module.scss';
import { isPublicWiki } from '@think/domains';
const em = new EventEmitter();
const EVENT_KEY = 'REFRESH_TOCS';
export const triggerRefreshTocs = () => {
em.emit(EVENT_KEY);
};
interface IProps { interface IProps {
wikiId: string; wikiId: string;
@ -52,12 +45,11 @@ export const WikiTocs: React.FC<IProps> = ({
}, [tocs, documentId]); }, [tocs, documentId]);
useEffect(() => { useEffect(() => {
em.on(EVENT_KEY, () => { const handler = () => refresh();
refresh(); event.on(REFRESH_TOCS, handler);
});
return () => { return () => {
em.destroy(); event.off(REFRESH_TOCS, handler);
}; };
}, []); }, []);
@ -197,17 +189,16 @@ export const WikiTocs: React.FC<IProps> = ({
}} }}
isActive={pathname === '/wiki/[wikiId]/documents'} isActive={pathname === '/wiki/[wikiId]/documents'}
rightNode={ rightNode={
<>
<Button <Button
style={{ fontSize: '1em' }} style={{ fontSize: '1em' }}
theme="borderless" theme="borderless"
type="tertiary" type="tertiary"
icon={<IconPlus style={{ fontSize: '1em' }} />} icon={<IconPlus style={{ fontSize: '1em' }} />}
size="small" size="small"
onClick={toggleVisible} onClick={() => {
triggerCreateDocument({ wikiId: wiki.id, documentId: null });
}}
/> />
<DocumentCreator wikiId={wiki.id} visible={visible} toggleVisible={toggleVisible} />
</>
} }
/> />
)} )}

View File

@ -5,11 +5,10 @@ import { IconMore, IconPlus } from '@douyinfe/semi-icons';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import { DocumentActions } from 'components/document/actions'; import { DocumentActions } from 'components/document/actions';
import { DocumentCreator as DocumenCreatorForm } from 'components/document/create'; import { DocumentCreator as DocumenCreatorForm } from 'components/document/create';
import { EventEmitter } from 'helpers/event-emitter'; import { event } from 'helpers/event-emitter';
import { CREATE_DOCUMENT, triggerCreateDocument } from './event';
import styles from './index.module.scss'; import styles from './index.module.scss';
const em = new EventEmitter();
const Actions = ({ node }) => { const Actions = ({ node }) => {
return ( return (
<span className={styles.right}> <span className={styles.right}>
@ -27,7 +26,7 @@ const Actions = ({ node }) => {
<Button <Button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
em.emit('plus', node); triggerCreateDocument({ wikiId: node.wikiId, documentId: node.id });
}} }}
type="tertiary" type="tertiary"
theme="borderless" theme="borderless"
@ -44,14 +43,19 @@ const AddDocument = () => {
const [visible, toggleVisible] = useToggle(false); const [visible, toggleVisible] = useToggle(false);
useEffect(() => { useEffect(() => {
em.on('plus', (node) => { const handler = ({ wikiId, documentId }) => {
setWikiId(node.wikiId); if (!wikiId) {
setDocumentId(node.id); throw new Error(`wikiId 未知,无法创建文档`);
}
setWikiId(wikiId);
setDocumentId(documentId);
toggleVisible(true); toggleVisible(true);
}); };
event.on(CREATE_DOCUMENT, handler);
return () => { return () => {
em.destroy(); event.off(CREATE_DOCUMENT, handler);
}; };
}, []); }, []);

View File

@ -6,7 +6,7 @@ export class EventEmitter {
this.callbacks[event] = []; this.callbacks[event] = [];
} }
this.callbacks[event].push(fn); this.callbacks[event] = [...this.callbacks[event], fn];
return this; return this;
} }
@ -39,3 +39,5 @@ export class EventEmitter {
this.callbacks = {}; this.callbacks = {};
} }
} }
export const event = new EventEmitter();