140 lines
7.1 KiB
JavaScript
140 lines
7.1 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import Styles from './web.pc.module.less';
|
|
import { Input, Button, Divider, Modal, Tooltip } from 'antd';
|
|
import { EditOutlined, MinusOutlined, CopyOutlined } from '@ant-design/icons';
|
|
import copy from 'copy-to-clipboard';
|
|
export default function Render(props) {
|
|
const { rows, oakFullpath, onChildEditArticleChange, show, getBreadcrumbItemsByParent, breadcrumbItems, drawerOpen, changeDrawerOpen, selectedArticleId, openArray, getTopInfo, articleId, currentArticle, setCurrentArticle, setCopyArticleUrl } = props.data;
|
|
const { t, setMessage, addItem, removeItem, updateItem, execute } = props.methods;
|
|
const [modal, contextHolder] = Modal.useModal();
|
|
const [nameEditing, setNameEditing] = useState('');
|
|
const [name, setName] = useState(undefined);
|
|
const [onlyOne, setOnlyOne] = useState(false);
|
|
useEffect(() => {
|
|
if (openArray && openArray.length > 0 && rows && rows.length > 0 && !onlyOne) {
|
|
rows.map((row) => {
|
|
if (openArray.includes(row.id) && !articleId) {
|
|
onChildEditArticleChange(row.id);
|
|
getBreadcrumbItemsByParent([...breadcrumbItems, row.name]);
|
|
setOnlyOne(true);
|
|
}
|
|
});
|
|
}
|
|
}, [openArray, rows]);
|
|
useEffect(() => {
|
|
if (rows && rows.length > 0 && selectedArticleId) {
|
|
const data = rows.find((ele) => ele.id === selectedArticleId);
|
|
if (data) {
|
|
getTopInfo({ name: data.name, date: data.$$createAt$$ });
|
|
}
|
|
}
|
|
}, [selectedArticleId, rows]);
|
|
if (articleId && rows && rows.length > 0) {
|
|
rows.map((row) => {
|
|
if (openArray.includes(row.id) && currentArticle !== row.id) {
|
|
setCurrentArticle(row.id);
|
|
getBreadcrumbItemsByParent([...breadcrumbItems, row.name]);
|
|
}
|
|
});
|
|
}
|
|
;
|
|
if (show === 'doc' || show === 'preview') {
|
|
if (rows?.length > 0) {
|
|
return (<React.Fragment>
|
|
{rows.map((ele, idx) => (<React.Fragment key={ele.id}>
|
|
<div className={Styles.docContainer} onClick={() => {
|
|
onChildEditArticleChange(ele.id);
|
|
getBreadcrumbItemsByParent([...breadcrumbItems, ele.name]);
|
|
changeDrawerOpen(!drawerOpen);
|
|
getTopInfo({ name: ele.name, date: ele.$$createAt$$ });
|
|
}}>
|
|
<div className={Styles.ne}>
|
|
{selectedArticleId === ele.id ? (<div className={Styles.name}>
|
|
<div className={Styles.dot}/>
|
|
<div className={Styles.title}>{ele?.name}</div>
|
|
</div>) : (<div className={Styles.name}>
|
|
<div className={Styles.dot2}/>
|
|
<div>{ele?.name}</div>
|
|
</div>)}
|
|
|
|
</div>
|
|
</div>
|
|
</React.Fragment>))}
|
|
{contextHolder}
|
|
</React.Fragment>);
|
|
}
|
|
return null;
|
|
}
|
|
if (rows?.length > 0) {
|
|
return (<React.Fragment>
|
|
{rows.map((ele, idx) => (<React.Fragment key={ele.id}>
|
|
<div className={Styles.container} onClick={() => {
|
|
onChildEditArticleChange(ele.id);
|
|
}}>
|
|
<div className={Styles.ne}>
|
|
{nameEditing === ele.id ? <div className={Styles.name}>
|
|
<Input autoFocus value={name !== undefined ? name : ele?.name} onChange={(evt) => setName(evt.target.value)} onPressEnter={async () => {
|
|
if (name && name !== ele?.name) {
|
|
updateItem({ name }, ele.id);
|
|
await execute();
|
|
}
|
|
setNameEditing('');
|
|
}} onBlur={async () => {
|
|
if (name !== ele?.name) {
|
|
updateItem({ name }, ele.id);
|
|
await execute();
|
|
}
|
|
setNameEditing('');
|
|
}}/>
|
|
</div> : <>
|
|
<Tooltip title={'编辑标题'}>
|
|
<Button type="text" icon={<EditOutlined />} size="small" onClick={(e) => {
|
|
setName(ele.name);
|
|
setNameEditing(ele.id);
|
|
e.stopPropagation();
|
|
}}/>
|
|
</Tooltip>
|
|
<div className={Styles.name}>
|
|
<div style={{ marginLeft: 4, overflow: 'hidden', width: '150px', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{ele?.name}</div>
|
|
</div>
|
|
</>}
|
|
</div>
|
|
<Divider type="vertical" style={{ height: '100%', marginTop: 4, marginBottom: 4 }}/>
|
|
<div className={Styles.control}>
|
|
<Tooltip title={'复制链接'}>
|
|
<Button type="text" icon={<CopyOutlined />} size="small" onClick={(e) => {
|
|
e.stopPropagation();
|
|
const url = setCopyArticleUrl(ele.id);
|
|
copy(url);
|
|
setMessage({
|
|
content: '复制成功',
|
|
type: 'success',
|
|
});
|
|
}}/>
|
|
</Tooltip>
|
|
<Tooltip title={'删除文档'}>
|
|
<Button type="text" icon={<MinusOutlined />} size="small" onClick={(e) => {
|
|
e.stopPropagation();
|
|
modal.confirm({
|
|
title: '请确认',
|
|
content: '确认删除吗？',
|
|
okText: '确定',
|
|
cancelText: '取消',
|
|
onOk: async () => {
|
|
onChildEditArticleChange('');
|
|
removeItem(ele.id);
|
|
await execute();
|
|
}
|
|
});
|
|
}}/>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
<Divider style={{ margin: 1 }}/>
|
|
</React.Fragment>))}
|
|
{contextHolder}
|
|
</React.Fragment>);
|
|
}
|
|
return null;
|
|
}
|