You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.1 KiB
92 lines
2.1 KiB
/*
|
|
* @Description: 左侧编辑 / 评论 / 提交记录
|
|
* @Author: tangjiang
|
|
* @Date: 2019-11-19 11:35:30
|
|
* @Last Modified by: tangjiang
|
|
* @Last Modified time: 2019-11-19 19:07:02
|
|
*/
|
|
|
|
import './index.scss';
|
|
import React, { useState, useMemo } from 'react';
|
|
// import { Tabs } from 'antd';
|
|
import EditorTab from './editorTab';
|
|
import PrevTab from './prevTab';
|
|
import CommitTab from './commitTab';
|
|
|
|
// const { TabPane } = Tabs;
|
|
|
|
function LeftPane (props) {
|
|
|
|
const navItem = [
|
|
{
|
|
title: '编辑',
|
|
key: 'editor'
|
|
}, {
|
|
title: '预览',
|
|
key: 'prev'
|
|
}
|
|
];
|
|
|
|
const Comp = {
|
|
editor: (<EditorTab />),
|
|
prev: (<PrevTab />)
|
|
};
|
|
|
|
const [defaultActiveKey, setDefaultActiveKey] = useState('editor');
|
|
|
|
// const tabArrs = [
|
|
// { title: '编辑', key: 'editor', content: (<EditorTab />) },
|
|
// { title: '预览', key: 'prev', content: (<PrevTab />) },
|
|
// // { title: '提交记录', key: 'commit', content: (<CommitTab />) },
|
|
// ];
|
|
|
|
// const tabs = tabArrs.map((tab) => {
|
|
// const Comp = tab.content;
|
|
// return (
|
|
// <TabPane tab={tab.title} key={tab.key}>
|
|
// { Comp }
|
|
// </TabPane>
|
|
// )
|
|
// });
|
|
|
|
// tab切换时
|
|
// const handleTabChange = (key) => {
|
|
// setDefaultActiveKey(key);
|
|
// }
|
|
|
|
// 执行表单提交函数
|
|
|
|
const renderComp = useMemo(() => {
|
|
return Comp[defaultActiveKey];
|
|
}, [defaultActiveKey]);
|
|
|
|
const renderNavItem = navItem.map((item) => {
|
|
const _classes = item.key === defaultActiveKey ? 'add_editor_item active' : 'add_editor_item';
|
|
return (
|
|
<li
|
|
key={item.key}
|
|
className={_classes}
|
|
onClick={() => setDefaultActiveKey(item.key)}
|
|
>
|
|
<span className={'item-span'}>{item.title}</span>
|
|
</li>
|
|
)
|
|
});
|
|
|
|
return (
|
|
// <Tabs activeKey={defaultActiveKey} onChange={handleTabChange}>
|
|
// { tabs }
|
|
// </Tabs>
|
|
<React.Fragment>
|
|
<ul className={'add_editor_list_area'}>
|
|
{ renderNavItem }
|
|
</ul>
|
|
<div className="comp_ctx">
|
|
{ renderComp }
|
|
</div>
|
|
</React.Fragment>
|
|
)
|
|
};
|
|
|
|
export default LeftPane;
|