this.foldRef = ref}
onClick={this.toggleExpand}
>
@@ -199,7 +194,7 @@ class FolderItem extends Component {
{this.state.isMouseEnter ?
@@ -210,13 +205,11 @@ class FolderItem extends Component {
}
{name}
{isEditing &&
-
}
@@ -226,7 +219,7 @@ class FolderItem extends Component {
changeItemFreeze={this.changeItemFreeze}
openFolderEditor={this.openFolderEditor}
onDeleteFolder={this.props.onDeleteFolder}
- onToggleAddView={this.props.onToggleAddView}
+ onToggleAddPage={this.props.onToggleAddPage}
folderId={folderId}
/>
}
@@ -235,13 +228,13 @@ class FolderItem extends Component {
))
}
{!folded && children &&
children.map((item, index) => {
- return item.type === 'folder' ? this.renderFolder(item, index, pagesLength, isOnlyOneView, id_view_map) : this.renderView(item, index, pagesLength, isOnlyOneView);
+ return item.type === 'folder' ? this.renderFolder(item, index, pagesLength, isOnlyOnePage, id_page_map) : this.renderPage(item, index, pagesLength, isOnlyOnePage);
})
}
@@ -255,7 +248,7 @@ FolderItem.propTypes = {
folder: PropTypes.object,
folderIndex: PropTypes.number,
pagesLength: PropTypes.number,
- id_view_map: PropTypes.object,
+ id_page_map: PropTypes.object,
isOver: PropTypes.bool,
canDrop: PropTypes.bool,
isDragging: PropTypes.bool,
@@ -266,16 +259,16 @@ FolderItem.propTypes = {
duplicatePage: PropTypes.func,
onSetFolderId: PropTypes.func,
toggleExpand: PropTypes.func,
- onToggleAddView: PropTypes.func,
+ onToggleAddPage: PropTypes.func,
onModifyFolder: PropTypes.func,
onDeleteFolder: PropTypes.func,
- onSelectView: PropTypes.func,
+ setCurrentPage: PropTypes.func,
onUpdatePage: PropTypes.func,
- onDeleteView: PropTypes.func,
- onMoveViewToFolder: PropTypes.func,
- onMoveView: PropTypes.func,
- isOnlyOneView: PropTypes.bool,
- views: PropTypes.array,
+ onDeletePage: PropTypes.func,
+ onMovePageToFolder: PropTypes.func,
+ onMovePage: PropTypes.func,
+ isOnlyOnePage: PropTypes.bool,
+ pages: PropTypes.array,
onMoveFolder: PropTypes.func,
moveFolderToFolder: PropTypes.func,
pathStr: PropTypes.string,
diff --git a/frontend/src/pages/wiki2/view-structure/folders/folder-operation-dropdownmenu.js b/frontend/src/pages/wiki2/wiki-nav/folders/folder-operation-dropdownmenu.js
similarity index 92%
rename from frontend/src/pages/wiki2/view-structure/folders/folder-operation-dropdownmenu.js
rename to frontend/src/pages/wiki2/wiki-nav/folders/folder-operation-dropdownmenu.js
index 913c2620d6..e9372e0d75 100644
--- a/frontend/src/pages/wiki2/view-structure/folders/folder-operation-dropdownmenu.js
+++ b/frontend/src/pages/wiki2/wiki-nav/folders/folder-operation-dropdownmenu.js
@@ -10,8 +10,7 @@ export default class FolderOperationDropdownMenu extends Component {
changeItemFreeze: PropTypes.func,
openFolderEditor: PropTypes.func,
onDeleteFolder: PropTypes.func,
- onToggleAddView: PropTypes.func,
- onToggleAddArchiveView: PropTypes.func,
+ onToggleAddPage: PropTypes.func,
folderId: PropTypes.string,
};
@@ -45,7 +44,7 @@ export default class FolderOperationDropdownMenu extends Component {
@@ -56,7 +55,7 @@ export default class FolderOperationDropdownMenu extends Component {
modifiers={{ preventOverflow: { boundariesElement: document.body } }}
positionFixed={true}
>
-
+
{gettext('Add page')}
diff --git a/frontend/src/pages/wiki2/view-structure/html5DragDropContext.js b/frontend/src/pages/wiki2/wiki-nav/html5DragDropContext.js
similarity index 100%
rename from frontend/src/pages/wiki2/view-structure/html5DragDropContext.js
rename to frontend/src/pages/wiki2/wiki-nav/html5DragDropContext.js
diff --git a/frontend/src/pages/wiki2/wiki-nav/index.js b/frontend/src/pages/wiki2/wiki-nav/index.js
new file mode 100644
index 0000000000..00064308a8
--- /dev/null
+++ b/frontend/src/pages/wiki2/wiki-nav/index.js
@@ -0,0 +1,3 @@
+import WikiNav from './wiki-nav';
+
+export default WikiNav;
diff --git a/frontend/src/pages/wiki2/view-structure/new-folder-dialog.js b/frontend/src/pages/wiki2/wiki-nav/new-folder-dialog.js
similarity index 100%
rename from frontend/src/pages/wiki2/view-structure/new-folder-dialog.js
rename to frontend/src/pages/wiki2/wiki-nav/new-folder-dialog.js
diff --git a/frontend/src/pages/wiki2/view-structure/page-utils.js b/frontend/src/pages/wiki2/wiki-nav/page-utils.js
similarity index 100%
rename from frontend/src/pages/wiki2/view-structure/page-utils.js
rename to frontend/src/pages/wiki2/wiki-nav/page-utils.js
diff --git a/frontend/src/pages/wiki2/view-structure/views/dragged-view-item.js b/frontend/src/pages/wiki2/wiki-nav/pages/dragged-page-item.js
similarity index 69%
rename from frontend/src/pages/wiki2/view-structure/views/dragged-view-item.js
rename to frontend/src/pages/wiki2/wiki-nav/pages/dragged-page-item.js
index d127e35248..9b5efb86f4 100644
--- a/frontend/src/pages/wiki2/view-structure/views/dragged-view-item.js
+++ b/frontend/src/pages/wiki2/wiki-nav/pages/dragged-page-item.js
@@ -1,12 +1,12 @@
import { DragSource, DropTarget } from 'react-dnd';
import { DRAGGED_FOLDER_MODE, DRAGGED_PAGE_MODE } from '../constant';
-import ViewItem from './view-item';
+import PageItem from './page-item';
const dragSource = {
beginDrag: props => {
return {
- idx: props.viewIndex,
- data: { ...props.view, index: props.viewIndex },
+ idx: props.pageIndex,
+ data: { ...props.page, index: props.pageIndex },
folderId: props.folderId,
mode: DRAGGED_PAGE_MODE,
};
@@ -20,7 +20,7 @@ const dragSource = {
}
},
isDragging(props) {
- const { draggedPage, viewIndex: targetIndex } = props;
+ const { draggedPage, pageIndex: targetIndex } = props;
const { idx } = draggedPage;
return idx > targetIndex;
}
@@ -31,12 +31,12 @@ const dropTarget = {
const sourceRow = monitor.getItem();
// 1 drag page
if (sourceRow.mode === DRAGGED_PAGE_MODE) {
- const { infolder, viewIndex: targetIndex, view: targetView, folderId: targetFolderId } = props;
+ const { infolder, pageIndex: targetIndex, page: targetPage, folderId: targetFolderId } = props;
const sourceFolderId = sourceRow.folderId;
- const draggedViewId = sourceRow.data.id;
- const targetViewId = targetView.id;
+ const draggedPageId = sourceRow.data.id;
+ const targetPageId = targetPage.id;
- if (draggedViewId !== targetViewId) {
+ if (draggedPageId !== targetPageId) {
const sourceIndex = sourceRow.idx;
let move_position;
if (infolder) {
@@ -45,11 +45,11 @@ const dropTarget = {
move_position = sourceIndex > targetIndex ? 'move_above' : 'move_below';
}
- props.onMoveView({
- moved_view_id: draggedViewId,
- target_view_id: targetViewId,
- source_view_folder_id: sourceFolderId,
- target_view_folder_id: targetFolderId,
+ props.onMovePage({
+ moved_page_id: draggedPageId,
+ target_page_id: targetPageId,
+ source_page_folder_id: sourceFolderId,
+ target_page_folder_id: targetFolderId,
move_position,
});
}
@@ -57,15 +57,15 @@ const dropTarget = {
}
// 1 drag folder
if (sourceRow.mode === DRAGGED_FOLDER_MODE) {
- const { viewIndex: targetIndex, view: targetView } = props;
+ const { pageIndex: targetIndex, page: targetPage } = props;
const draggedFolderId = sourceRow.data.id;
- const targetViewId = targetView.id;
+ const targetPageId = targetPage.id;
const sourceIndex = sourceRow.idx;
// Drag the parent folder to the child page, return
if (props.pathStr.split('-').includes(draggedFolderId)) return;
props.onMoveFolder(
draggedFolderId,
- targetViewId,
+ targetPageId,
sourceIndex > targetIndex ? 'move_above' : 'move_below',
);
return;
@@ -86,6 +86,6 @@ const dropCollect = (connect, monitor) => ({
draggedPage: monitor.getItem()
});
-export default DropTarget('ViewStructure', dropTarget, dropCollect)(
- DragSource('ViewStructure', dragSource, dragCollect)(ViewItem)
+export default DropTarget('WikiNav', dropTarget, dropCollect)(
+ DragSource('WikiNav', dragSource, dragCollect)(PageItem)
);
diff --git a/frontend/src/pages/wiki2/view-structure/views/page-dropdownmenu.js b/frontend/src/pages/wiki2/wiki-nav/pages/page-dropdownmenu.js
similarity index 80%
rename from frontend/src/pages/wiki2/view-structure/views/page-dropdownmenu.js
rename to frontend/src/pages/wiki2/wiki-nav/pages/page-dropdownmenu.js
index 2fbd5fb7dd..a9e1ea50ca 100644
--- a/frontend/src/pages/wiki2/view-structure/views/page-dropdownmenu.js
+++ b/frontend/src/pages/wiki2/wiki-nav/pages/page-dropdownmenu.js
@@ -8,21 +8,20 @@ import { getWikPageLink } from '../../utils';
export default class PageDropdownMenu extends Component {
static propTypes = {
- view: PropTypes.object.isRequired,
- views: PropTypes.array,
+ page: PropTypes.object.isRequired,
+ pages: PropTypes.array,
pagesLength: PropTypes.number,
folderId: PropTypes.string,
canDelete: PropTypes.bool,
canDuplicate: PropTypes.bool,
renderFolderMenuItems: PropTypes.func,
toggle: PropTypes.func,
- toggleViewEditor: PropTypes.func,
+ toggleNameEditor: PropTypes.func,
duplicatePage: PropTypes.func,
onSetFolderId: PropTypes.func,
- onDeleteView: PropTypes.func,
- onModifyViewType: PropTypes.func,
- onMoveViewToFolder: PropTypes.func,
- isOnlyOneView: PropTypes.bool,
+ onDeletePage: PropTypes.func,
+ onMovePageToFolder: PropTypes.func,
+ isOnlyOnePage: PropTypes.bool,
};
constructor(props) {
@@ -34,9 +33,9 @@ export default class PageDropdownMenu extends Component {
}
calculateNameMap = () => {
- const { views } = this.props;
- return views.reduce((map, view) => {
- map[view.name] = true;
+ const { pages } = this.props;
+ return pages.reduce((map, page) => {
+ map[page.name] = true;
return map;
}, {});
};
@@ -49,28 +48,23 @@ export default class PageDropdownMenu extends Component {
this.props.toggle();
};
- onRenameView = (event) => {
+ onRename = (event) => {
event.nativeEvent.stopImmediatePropagation();
- this.props.toggleViewEditor();
+ this.props.toggleNameEditor();
};
- onDeleteView = (event) => {
+ onDeletePage = (event) => {
event.nativeEvent.stopImmediatePropagation();
- this.props.onDeleteView();
+ this.props.onDeletePage();
};
- onModifyViewType = (event) => {
- event.nativeEvent.stopImmediatePropagation();
- this.props.onModifyViewType();
- };
-
- onMoveViewToFolder = (targetFolderId) => {
- this.props.onMoveViewToFolder(targetFolderId);
+ onMovePageToFolder = (targetFolderId) => {
+ this.props.onMovePageToFolder(targetFolderId);
};
onRemoveFromFolder = (evt) => {
evt.nativeEvent.stopImmediatePropagation();
- this.props.onMoveViewToFolder(null);
+ this.props.onMovePageToFolder(null);
};
onToggleFoldersMenu = () => {
@@ -78,8 +72,8 @@ export default class PageDropdownMenu extends Component {
};
duplicatePage = () => {
- const { view, folderId } = this.props;
- const { id: from_page_id, name } = view;
+ const { page, folderId } = this.props;
+ const { id: from_page_id, name } = page;
let duplicateCount = 1;
let newName = name + '(copy)';
while (this.pageNameMap[newName]) {
@@ -104,8 +98,8 @@ export default class PageDropdownMenu extends Component {
};
handleCopyLink = () => {
- const { view } = this.props;
- const wikiLink = getWikPageLink(view.id);
+ const { page } = this.props;
+ const wikiLink = getWikPageLink(page.id);
const successText = gettext('Copied link to clipboard');
const failedText = gettext('Copy failed');
@@ -117,26 +111,26 @@ export default class PageDropdownMenu extends Component {
};
handleOpenInNewTab = () => {
- const { view } = this.props;
- const wikiLink = getWikPageLink(view.id);
+ const { page } = this.props;
+ const wikiLink = getWikPageLink(page.id);
window.open(wikiLink);
};
render() {
const {
- folderId, canDelete, canDuplicate, renderFolderMenuItems, pagesLength, isOnlyOneView,
+ folderId, canDelete, canDuplicate, renderFolderMenuItems, pagesLength, isOnlyOnePage,
} = this.props;
- const folderMenuItems = renderFolderMenuItems && renderFolderMenuItems({ currentFolderId: folderId, onMoveViewToFolder: this.onMoveViewToFolder });
+ const folderMenuItems = renderFolderMenuItems && renderFolderMenuItems({ currentFolderId: folderId, onMovePageToFolder: this.onMovePageToFolder });
return (
-
+
{gettext('Copy link')}
-
+
{gettext('Modify name')}
@@ -155,8 +149,8 @@ export default class PageDropdownMenu extends Component {
{gettext('Duplicate page')}
}
- {(isOnlyOneView || pagesLength === 1 || !canDelete) ? '' : (
-
+ {(isOnlyOnePage || pagesLength === 1 || !canDelete) ? '' : (
+
{gettext('Delete page')}
diff --git a/frontend/src/pages/wiki2/view-structure/views/view-item.js b/frontend/src/pages/wiki2/wiki-nav/pages/page-item.js
similarity index 53%
rename from frontend/src/pages/wiki2/view-structure/views/view-item.js
rename to frontend/src/pages/wiki2/wiki-nav/pages/page-item.js
index ff6fce21ab..f83ce30342 100644
--- a/frontend/src/pages/wiki2/view-structure/views/view-item.js
+++ b/frontend/src/pages/wiki2/wiki-nav/pages/page-item.js
@@ -1,30 +1,30 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
-import ViewEditPopover from './view-edit-popover';
+import NameEditPopover from '../../common/name-edit-popover';
+import NavItemIcon from '../../common/nav-item-icon';
import PageDropdownMenu from './page-dropdownmenu';
-import DeleteDialog from './delete-dialog';
+import DeleteDialog from '../../common/delete-dialog';
import { gettext } from '../../../../utils/constants';
import AddNewPageDialog from '../add-new-page-dialog';
import Icon from '../../../../components/icon';
-import NavItemIcon from '../nav-item-icon';
-import DraggedViewItem from '../views/dragged-view-item';
+import DraggedPageItem from './dragged-page-item';
-class ViewItem extends Component {
+class PageItem extends Component {
constructor(props) {
super(props);
this.state = {
- isShowViewEditor: false,
- isShowViewOperationDropdown: false,
+ isShowNameEditor: false,
+ isShowOperationDropdown: false,
isShowDeleteDialog: false,
isShowInsertPage: false,
- viewName: props.view.name || '',
- viewIcon: props.view.icon,
- isSelected: props.currentPageId === props.view.id,
+ pageName: props.page.name || '',
+ pageIcon: props.page.icon,
+ isSelected: props.currentPageId === props.page.id,
isMouseEnter: false,
};
- this.viewItemRef = React.createRef();
+ this.pageItemRef = React.createRef();
}
onMouseEnter = () => {
@@ -43,18 +43,18 @@ class ViewItem extends Component {
onCurrentPageChanged = (currentPageId) => {
const { isSelected } = this.state;
- if (currentPageId === this.props.view.id && isSelected === false) {
+ if (currentPageId === this.props.page.id && isSelected === false) {
this.setState({ isSelected: true });
- } else if (currentPageId !== this.props.view.id && isSelected === true) {
+ } else if (currentPageId !== this.props.page.id && isSelected === true) {
this.setState({ isSelected: false });
}
};
- toggleViewEditor = (e) => {
+ toggleNameEditor = (e) => {
if (e) e.stopPropagation();
- this.setState({ isShowViewEditor: !this.state.isShowViewEditor }, () => {
- if (!this.state.isShowViewEditor) {
- this.saveViewProperties();
+ this.setState({ isShowNameEditor: !this.state.isShowNameEditor }, () => {
+ if (!this.state.isShowNameEditor) {
+ this.savePageProperties();
}
});
};
@@ -63,28 +63,28 @@ class ViewItem extends Component {
this.setState({ isShowInsertPage: !this.state.isShowInsertPage });
};
- saveViewProperties = () => {
- const { name, icon, id } = this.props.view;
- const { viewIcon } = this.state;
- let viewName = this.state.viewName.trim();
- if (viewIcon !== icon || viewName !== name) {
+ savePageProperties = () => {
+ const { name, icon, id } = this.props.page;
+ const { pageIcon } = this.state;
+ let pageName = this.state.pageName.trim();
+ if (pageIcon !== icon || pageName !== name) {
let newView = {};
- if (viewName !== name) {
- newView.name = viewName;
+ if (pageName !== name) {
+ newView.name = pageName;
}
- if (viewIcon !== icon) {
- newView.icon = viewIcon;
+ if (pageIcon !== icon) {
+ newView.icon = pageIcon;
}
this.props.onUpdatePage(id, newView);
}
};
- onChangeName = (newViewName) => {
- this.setState({ viewName: newViewName });
+ onChangeName = (newName) => {
+ this.setState({ pageName: newName });
};
- onChangeIcon = (newViewIcon) => {
- this.setState({ viewIcon: newViewIcon });
+ onChangeIcon = (newIcon) => {
+ this.setState({ pageIcon: newIcon });
};
openDeleteDialog = () => {
@@ -95,28 +95,17 @@ class ViewItem extends Component {
this.setState({ isShowDeleteDialog: false });
};
- onViewOperationDropdownToggle = () => {
- const isShowViewOperationDropdown = !this.state.isShowViewOperationDropdown;
- this.setState({ isShowViewOperationDropdown });
- this.changeItemFreeze(isShowViewOperationDropdown);
+ toggleDropdown = () => {
+ const isShowOperationDropdown = !this.state.isShowOperationDropdown;
+ this.setState({ isShowOperationDropdown });
+ this.changeItemFreeze(isShowOperationDropdown);
};
changeItemFreeze = (isFreeze) => {
if (isFreeze) {
- this.viewItemRef.classList.add('view-freezed');
+ this.pageItemRef.classList.add('wiki-page-freezed');
} else {
- this.viewItemRef.classList.remove('view-freezed');
- }
- };
-
- renderIcon = (icon) => {
- if (!icon) {
- return null;
- }
- if (icon.includes('dtable-icon')) {
- return ;
- } else {
- return ;
+ this.pageItemRef.classList.remove('wiki-page-freezed');
}
};
@@ -125,7 +114,7 @@ class ViewItem extends Component {
};
getFolderChildrenHeight = () => {
- const folded = this.props.getFoldState(this.props.view.id);
+ const folded = this.props.getFoldState(this.props.page.id);
if (folded) return 0;
return 'auto';
};
@@ -135,33 +124,33 @@ class ViewItem extends Component {
e.nativeEvent.stopImmediatePropagation();
};
- renderView = (view, index, pagesLength, isOnlyOneView) => {
- const { isEditMode, views, folderId, pathStr } = this.props;
- const id = view.id;
- if (!views.find(item => item.id === id)) return;
+ renderPage = (page, index, pagesLength, isOnlyOnePage) => {
+ const { isEditMode, pages, folderId, pathStr } = this.props;
+ const id = page.id;
+ if (!pages.find(item => item.id === id)) return;
return (
- item.id === id), view)}
- viewIndex={index}
+ page={Object.assign({}, pages.find(item => item.id === id), page)}
+ pageIndex={index}
folderId={folderId}
isEditMode={isEditMode}
renderFolderMenuItems={this.props.renderFolderMenuItems}
duplicatePage={this.props.duplicatePage}
onSetFolderId={this.props.onSetFolderId}
- onSelectView={this.props.onSelectView}
+ setCurrentPage={this.props.setCurrentPage}
onUpdatePage={this.props.onUpdatePage}
- onDeleteView={this.props.onDeleteView}
- onMoveViewToFolder={(targetFolderId) => {
- this.props.onMoveViewToFolder(folderId, view.id, targetFolderId);
+ onDeletePage={this.props.onDeletePage}
+ onMovePageToFolder={(targetFolderId) => {
+ this.props.onMovePageToFolder(folderId, page.id, targetFolderId);
}}
- onMoveView={this.props.onMoveView}
+ onMovePage={this.props.onMovePage}
onMoveFolder={this.props.onMoveFolder}
- views={views}
- pathStr={pathStr + '-' + view.id}
+ pages={pages}
+ pathStr={pathStr + '-' + page.id}
currentPageId={this.props.currentPageId}
addPageInside={this.props.addPageInside}
getFoldState={this.props.getFoldState}
@@ -172,58 +161,57 @@ class ViewItem extends Component {
toggleExpand = (e) => {
e.nativeEvent.stopImmediatePropagation();
- this.props.toggleExpand(this.props.view.id);
+ this.props.toggleExpand(this.props.page.id);
this.forceUpdate();
};
onAddNewPage = (newPage) => {
- const { view } = this.props;
- this.props.addPageInside(Object.assign({ parentPageId: view.id }, newPage));
+ this.props.addPageInside(Object.assign({ parentPageId: this.props.page.id }, newPage));
};
render() {
const {
connectDragSource, connectDragPreview, connectDropTarget, isOver, canDrop, isDragging,
- infolder, view, pagesLength, isEditMode, folderId, isOnlyOneView, pathStr,
+ infolder, page, pagesLength, isEditMode, folderId, isOnlyOnePage, pathStr,
} = this.props;
- const { isShowViewEditor, viewName, viewIcon, isSelected } = this.state;
- const isOverView = isOver && canDrop;
- if (isSelected) this.setDocUuid(view.docUuid);
+ const { isShowNameEditor, pageName, isSelected } = this.state;
+ const isOverPage = isOver && canDrop;
+ if (isSelected) this.setDocUuid(page.docUuid);
- let viewCanDropTop;
- let viewCanDrop;
+ let pageCanDropTop;
+ let pageCanDrop;
if (infolder) {
- viewCanDropTop = false;
- viewCanDrop = isOverView;
+ pageCanDropTop = false;
+ pageCanDrop = isOverPage;
} else {
- viewCanDropTop = isOverView && isDragging;
- viewCanDrop = isOverView && !isDragging;
+ pageCanDropTop = isOverPage && isDragging;
+ pageCanDrop = isOverPage && !isDragging;
}
- let viewEditorId = `view-editor-${view.id}`;
+ let navItemId = `page-editor-${page.id}`;
let fn = isEditMode ? connectDragSource : (argu) => {argu;};
- let childNumber = Array.isArray(view.children) ? view.children.length : 0;
+ let childNumber = Array.isArray(page.children) ? page.children.length : 0;
- const folded = this.props.getFoldState(view.id);
+ const folded = this.props.getFoldState(page.id);
return (
{
fn(connectDropTarget(
connectDragPreview(
this.viewItemRef = ref}
+ ref={ref => this.pageItemRef = ref}
onMouseEnter={this.onMouseEnter}
onMouseMove={this.onMouseMove}
onMouseLeave={this.onMouseLeave}
- id={viewEditorId}
+ id={navItemId}
>
-
{} : (e) => this.props.onSelectView(view.id)}>
-
+
{} : (e) => this.props.setCurrentPage(page.id)}>
+
{childNumber === 0 &&
}
@@ -235,16 +223,13 @@ class ViewItem extends Component {
}
- {/* {this.renderIcon(view.icon)} */}
-
{view.name}
- {isShowViewEditor && (
-
{page.name}
+ {isShowNameEditor && (
+
)}
@@ -252,24 +237,24 @@ class ViewItem extends Component {
{isEditMode &&
<>
-
+
- {this.state.isShowViewOperationDropdown &&
+ {this.state.isShowOperationDropdown &&
}
@@ -282,7 +267,7 @@ class ViewItem extends Component {
{this.state.isShowDeleteDialog &&
}
{this.state.isShowInsertPage &&
@@ -297,13 +282,13 @@ class ViewItem extends Component {
))
}
- {view.children &&
- view.children.map((item, index) => {
- return this.renderView(item, index, pagesLength, isOnlyOneView);
+ {page.children &&
+ page.children.map((item, index) => {
+ return this.renderPage(item, index, pagesLength, isOnlyOnePage);
})
}
@@ -312,17 +297,17 @@ class ViewItem extends Component {
}
}
-ViewItem.propTypes = {
+PageItem.propTypes = {
isOver: PropTypes.bool,
canDrop: PropTypes.bool,
isDragging: PropTypes.bool,
draggedPage: PropTypes.object,
isEditMode: PropTypes.bool,
infolder: PropTypes.bool,
- view: PropTypes.object,
+ page: PropTypes.object,
folder: PropTypes.object,
- views: PropTypes.array,
- viewIndex: PropTypes.number,
+ pages: PropTypes.array,
+ pageIndex: PropTypes.number,
folderId: PropTypes.string,
pagesLength: PropTypes.number,
connectDragSource: PropTypes.func,
@@ -331,12 +316,12 @@ ViewItem.propTypes = {
renderFolderMenuItems: PropTypes.func,
duplicatePage: PropTypes.func,
onSetFolderId: PropTypes.func,
- onSelectView: PropTypes.func,
+ setCurrentPage: PropTypes.func,
onUpdatePage: PropTypes.func,
- onDeleteView: PropTypes.func,
- onMoveViewToFolder: PropTypes.func,
- onMoveView: PropTypes.func,
- isOnlyOneView: PropTypes.bool,
+ onDeletePage: PropTypes.func,
+ onMovePageToFolder: PropTypes.func,
+ onMovePage: PropTypes.func,
+ isOnlyOnePage: PropTypes.bool,
onMoveFolder: PropTypes.func,
pathStr: PropTypes.string,
currentPageId: PropTypes.string,
@@ -345,4 +330,4 @@ ViewItem.propTypes = {
toggleExpand: PropTypes.func,
};
-export default ViewItem;
+export default PageItem;
diff --git a/frontend/src/pages/wiki2/view-structure/view-structure-footer.js b/frontend/src/pages/wiki2/wiki-nav/wiki-nav-footer.js
similarity index 67%
rename from frontend/src/pages/wiki2/view-structure/view-structure-footer.js
rename to frontend/src/pages/wiki2/wiki-nav/wiki-nav-footer.js
index a580a9e0c2..376e80b288 100644
--- a/frontend/src/pages/wiki2/view-structure/view-structure-footer.js
+++ b/frontend/src/pages/wiki2/wiki-nav/wiki-nav-footer.js
@@ -1,10 +1,10 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import CommonAddTool from '../../../components/common/common-add-tool';
-import AddViewDropdownMenu from './add-view-dropdownmenu';
+import AddPageDropdownMenu from './add-page-dropdownmenu';
import { gettext } from '../../../utils/constants';
-class ViewStructureFooter extends Component {
+class WikiNavFooter extends Component {
constructor(props) {
super(props);
@@ -20,17 +20,17 @@ class ViewStructureFooter extends Component {
render() {
return (
-
-
+
+
{this.state.isShowDropdownMenu &&
-
}
@@ -40,9 +40,9 @@ class ViewStructureFooter extends Component {
}
}
-ViewStructureFooter.propTypes = {
- onToggleAddView: PropTypes.func,
+WikiNavFooter.propTypes = {
+ onToggleAddPage: PropTypes.func,
onToggleAddFolder: PropTypes.func,
};
-export default ViewStructureFooter;
+export default WikiNavFooter;
diff --git a/frontend/src/pages/wiki2/view-structure/view-structure.js b/frontend/src/pages/wiki2/wiki-nav/wiki-nav.js
similarity index 66%
rename from frontend/src/pages/wiki2/view-structure/view-structure.js
rename to frontend/src/pages/wiki2/wiki-nav/wiki-nav.js
index a5fc1c3b62..de76f6ea70 100644
--- a/frontend/src/pages/wiki2/view-structure/view-structure.js
+++ b/frontend/src/pages/wiki2/wiki-nav/wiki-nav.js
@@ -4,28 +4,28 @@ import { DropdownItem } from 'reactstrap';
import { DropTarget, DragLayer } from 'react-dnd';
import html5DragDropContext from './html5DragDropContext';
import DraggedFolderItem from './folders/dragged-folder-item';
-import DraggedViewItem from './views/dragged-view-item';
-import ViewStructureFooter from './view-structure-footer';
+import DraggedPageItem from './pages/dragged-page-item';
+import WikiNavFooter from './wiki-nav-footer';
import { repoID } from '../../../utils/constants';
-import '../css/view-structure.css';
+import '../css/wiki-nav.css';
-class ViewStructure extends Component {
+class WikiNav extends Component {
static propTypes = {
isEditMode: PropTypes.bool,
navigation: PropTypes.array,
- views: PropTypes.array,
+ pages: PropTypes.array,
onTogglePinViewList: PropTypes.func,
- onToggleAddView: PropTypes.func,
+ onToggleAddPage: PropTypes.func,
onToggleAddFolder: PropTypes.func,
onModifyFolder: PropTypes.func,
onDeleteFolder: PropTypes.func,
onMoveFolder: PropTypes.func,
- onSelectView: PropTypes.func,
+ setCurrentPage: PropTypes.func,
onUpdatePage: PropTypes.func,
- onDeleteView: PropTypes.func,
- onMoveView: PropTypes.func,
+ onDeletePage: PropTypes.func,
+ onMovePage: PropTypes.func,
moveFolderToFolder: PropTypes.func,
movePageOut: PropTypes.func,
duplicatePage: PropTypes.func,
@@ -64,24 +64,24 @@ class ViewStructure extends Component {
this.idFoldedStatusMap = idFoldedStatusMap;
};
- onMoveViewToFolder = (source_view_folder_id, moved_view_id, target_view_folder_id) => {
- this.props.onMoveView({
- moved_view_id,
- source_view_folder_id,
- target_view_folder_id,
- target_view_id: null,
+ onMovePageToFolder = (source_page_folder_id, moved_page_id, target_page_folder_id) => {
+ this.props.onMovePage({
+ moved_page_id,
+ source_page_folder_id,
+ target_page_folder_id,
+ target_page_id: null,
move_position: 'move_below'
});
};
- renderFolderMenuItems = ({ currentFolderId, onMoveViewToFolder }) => {
+ renderFolderMenuItems = ({ currentFolderId, onMovePageToFolder }) => {
// folder lists (in the root directory)
const { navigation } = this.props;
let renderFolders = navigation.filter(item => item.type === 'folder' && item.id !== currentFolderId);
return renderFolders.map(folder => {
const { id, name } = folder;
return (
-
+
{name}
);
@@ -96,31 +96,31 @@ class ViewStructure extends Component {
return this.folderClassNameCache;
};
- renderFolder = (folder, index, pagesLength, isOnlyOneView, id_view_map, layerDragProps) => {
- const { isEditMode, views } = this.props;
+ renderFolder = (folder, index, pagesLength, isOnlyOnePage, id_page_map, layerDragProps) => {
+ const { isEditMode, pages } = this.props;
const folderId = folder.id;
return (
{
- const { isEditMode, views } = this.props;
- const id = view.id;
- if (!views.find(item => item.id === id)) return;
+ renderPage = (page, index, pagesLength, isOnlyOnePage, id_page_map) => {
+ const { isEditMode, pages } = this.props;
+ const id = page.id;
+ if (!pages.find(item => item.id === id)) return;
const folderId = null; // Pages in the root directory, no folders, use null
return (
- item.id === id), view)}
- views={views}
- viewIndex={index}
+ page={Object.assign({}, pages.find(item => item.id === id), page)}
+ pages={pages}
+ pageIndex={index}
folderId={folderId}
isEditMode={isEditMode}
renderFolderMenuItems={this.renderFolderMenuItems}
duplicatePage={this.props.duplicatePage}
onSetFolderId={this.props.onSetFolderId}
- onSelectView={this.props.onSelectView}
+ setCurrentPage={this.props.setCurrentPage}
onUpdatePage={this.props.onUpdatePage}
- onDeleteView={this.props.onDeleteView}
- onMoveViewToFolder={(targetFolderId) => {
- this.onMoveViewToFolder(folderId, view.id, targetFolderId);
+ onDeletePage={this.props.onDeletePage}
+ onMovePageToFolder={(targetFolderId) => {
+ this.onMovePageToFolder(folderId, page.id, targetFolderId);
}}
- onMoveView={this.props.onMoveView}
+ onMovePage={this.props.onMovePage}
onMoveFolder={this.props.onMoveFolder}
- pathStr={view.id}
+ pathStr={page.id}
currentPageId={this.props.currentPageId}
addPageInside={this.props.addPageInside}
getFoldState={this.getFoldState}
@@ -173,21 +173,21 @@ class ViewStructure extends Component {
// eslint-disable-next-line
renderStructureBody = React.forwardRef((layerDragProps, ref) => {
- const { navigation, views, isEditMode } = this.props;
- let isOnlyOneView = false;
- if (views.length === 1) {
- isOnlyOneView = true;
+ const { navigation, pages, isEditMode } = this.props;
+ let isOnlyOnePage = false;
+ if (pages.length === 1) {
+ isOnlyOnePage = true;
}
- const pagesLength = views.length;
- let id_view_map = {};
- views.forEach(view => id_view_map[view.id] = view);
+ const pagesLength = pages.length;
+ let id_page_map = {};
+ pages.forEach(page => id_page_map[page.id] = page);
const style = { maxHeight: isEditMode ? 'calc(100% - 40px)' : '100%' };
return (
-
+
{navigation.map((item, index) => {
return item.type === 'folder' ?
- this.renderFolder(item, index, pagesLength, isOnlyOneView, id_view_map, layerDragProps) :
- this.renderView(item, index, pagesLength, isOnlyOneView, id_view_map);
+ this.renderFolder(item, index, pagesLength, isOnlyOnePage, id_page_map, layerDragProps) :
+ this.renderPage(item, index, pagesLength, isOnlyOnePage, id_page_map);
})}
);
@@ -204,16 +204,16 @@ class ViewStructure extends Component {
render() {
const StructureBody = html5DragDropContext(
- DropTarget('ViewStructure', {}, connect => ({
+ DropTarget('WikiNav', {}, connect => ({
connectDropTarget: connect.dropTarget()
}))(DragLayer(this.collect)(this.renderStructureBody))
);
return (
-
+
{(this.props.isEditMode) &&
-
}
@@ -222,4 +222,4 @@ class ViewStructure extends Component {
}
}
-export default ViewStructure;
+export default WikiNav;