import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {dialogEnhancer, actions as dialogActions} from 'nexshop-web-dialog';
import {contentsActions} from 'nexshop-web-store';
class MoveTo extends Component {
constructor(props) {
super(props);
this.onClickCancel = this.onClickCancel.bind(this);
this.onClickMove = this.onClickMove.bind(this);
this.getFolderIdsUnderBreadcrumb = this.getFolderIdsUnderBreadcrumb.bind(this);
this.onFolderItemClicked = this.onFolderItemClicked.bind(this);
this.onFolderItemArrowClicked = this.onFolderItemArrowClicked.bind(this);
this.state = {
folders: [],
selectedFolderId: props.breadcrumb[props.breadcrumb.length - 1].id
};
}
componentWillMount() {
this.props.actions.fetchFoldersUnderFoldersAsync(this.getFolderIdsUnderBreadcrumb());
}
componentWillReceiveProps(nextProps) {
const {foldersUnderBreadcrumb, breadcrumb} = nextProps;
this.setState({
folders: listToTree(foldersUnderBreadcrumb, breadcrumb)
});
}
onClickCancel() {
this.props.actions.closeDialog();
}
onClickMove() {
}
getFolderIdsUnderBreadcrumb() {
return this.props.breadcrumb.map(item => {
return item.id;
});
}
onFolderItemClicked(id) {
this.setState({selectedFolderId: id});
this.onFolderItemArrowClicked(id, false);
}
onFolderItemArrowClicked(id, isClosable) {
const prevFolder = [{...this.state.folders}];
function findFolderRecursive(folders) {
folders.forEach(folder => {
if (folder.id === id && folder.hasChildFolder === 'Y') {
if (isClosable) {
folder.collapsed = !folder.collapsed;
}
else {
folder.collapsed = false;
}
} else {
Eif (folder.children) {
findFolderRecursive(folder.children);
}
}
});
}
findFolderRecursive(prevFolder);
this.setState({folders: prevFolder[0]});
}
render() {
const {folders, selectedFolderId} = this.state;
const drawTreeHierarchy = (item) => {
return (
<div key={item.id} className='move-to-folder-item-wrapper'>
<div className='move-to-folder-item'>
<div className={`move-to-folder-item-row${selectedFolderId === item.id ? '--selected' : ''}`}
onClick={() => this.onFolderItemClicked(item.id)}/>
<div
className={`move-to-folder-item-arrow${item.hasChildFolder === 'Y' ? (item.collapsed ? '--closed' : '--opened') : ''}`}
onClick={() => this.onFolderItemArrowClicked(item.id, true)}/>
<i className='move-to-folder-item-icon'/>
<div
className={`move-to-folder-item-name${selectedFolderId === item.id ? '--selected' : (item.collapsed ? '' : '--opened')}`}>{item.name}</div>
</div>
{
!item.collapsed &&
item.children.map((child) => (
drawTreeHierarchy(child)
))
}
</div>);
};
return (
<div className='move-to-wrapper'>
<div className='move-to-header'>Move to selected 1 contents</div>
<div className='move-to-body'>
<div className='move-to-body-tree'>
<div className='move-to-folder-item-wrapper'>
{
folders &&
folders.children &&
[folders].map(folder => (
drawTreeHierarchy(folder)
))
}
</div>
</div>
<div className='move-to-body-new'>
+ New Folder
</div>
</div>
<div className='move-to-footer'>
<div className='move-to-footer__cancel' onClick={this.onClickCancel}>CANCEL</div>
<div className='move-to-footer__move' onClick={this.onClickMove}>MOVE</div>
</div>
</div>
);
}
}
const listToTree = (inputList, breadcrumb) => {
if (inputList.length === 0) {
return null;
}
const list = inputList.map(item => ({...item, children: [], collapsed: true}));
let mapById = list.reduce((map, item) => {
map[item.id] = item;
return map;
}, {});
list.forEach(item => {
if (item.parentId === null || item.parentId === undefined || !mapById[item.parentId]) {
return;
}
mapById[item.parentId.toString()].children.push(item);
});
breadcrumb.forEach((folder) => {
mapById[folder.id.toString()].collapsed = false;
}
);
return list.find(item => item.parentId === null || item.parentId === undefined);
};
const mapStateToProps = (state) => {
let {dialog, contents: {breadcrumb, foldersUnderBreadcrumb}} = state;
const visibility = dialog === 'move-to';
return {visibility, breadcrumb, foldersUnderBreadcrumb};
};
const mapDispatchToProps = (dispatch) => {
const {openDialog, closeDialog} = dialogActions;
const {fetchFoldersUnderFoldersAsync} = contentsActions;
return {
actions: bindActionCreators({openDialog, closeDialog, fetchFoldersUnderFoldersAsync}, dispatch)
}
};
export default connect(mapStateToProps, mapDispatchToProps)(dialogEnhancer(MoveTo)); |