mirror of https://github.com/fantasticit/think.git
feat: improve tocs event
This commit is contained in:
parent
6113ecc101
commit
a8d9f41734
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
};
|
|
@ -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} />
|
|
||||||
</>
|
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -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);
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
|
|
Loading…
Reference in New Issue