FileBrowserWidget

Source

index.js
import React from 'react';
import PropTypes from 'prop-types';

import style from 'PVWStyle/ReactWidgets/FileBrowserWidget.mcss';

import ActionList from '../ActionListWidget';

export default class FileBrowserWidget extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [],
};

// Bind callback
this.onPathChange = this.onPathChange.bind(this);
this.onAction = this.onAction.bind(this);
}

componentDidMount() {
this.processProps(this.props);
}

componentWillReceiveProps(nextProps) {
this.processProps(nextProps);
}

onAction(name, action, data) {
if (this.props.onAction) {
this.props.onAction(
action,
name,
data.length ? JSON.parse(atob(data)) : null
);
}
}

onPathChange(event) {
let target = event.target;
while (target.localName !== 'li') {
target = target.parentNode;
}
if (this.props.onAction) {
const path = [];
const pathSize = Number(target.dataset.idx);
while (path.length <= pathSize) {
path.push(this.props.path[path.length]);
}
this.props.onAction('path', path.join('/'), path);
}
}

processProps(props) {
const list = [];
props.directories.forEach((name) => {
list.push({ name, icon: style.folderIcon, action: 'directory' });
});
props.groups.forEach((g) => {
list.push({
name: g.label,
icon: style.groupIcon,
action: 'group',
data: btoa(JSON.stringify(g.files)),
});
});
props.files.forEach((name) => {
list.push({ name, icon: style.fileIcon, action: 'file' });
});
this.setState({ list });
}

render() {
return (
<div className={style.container}>
<ul className={style.breadcrumb}>
{this.props.path.map((name, idx) => (
<li
className={style.breadcrumbItem}
key={idx}
data-idx={idx}
title={name}
onClick={this.onPathChange}
>
<i className={style.breadcrumbFolderIcon} />
<span className={style.breadcrumbLabel}>{name}</span>
</li>
))}
</ul>
<ActionList list={this.state.list} onClick={this.onAction} />
</div>
);
}
}

/* eslint-disable react/no-unused-prop-types */
FileBrowserWidget.propTypes = {
directories: PropTypes.array.isRequired,
files: PropTypes.array.isRequired,
groups: PropTypes.array.isRequired,
onAction: PropTypes.func.isRequired,
path: PropTypes.array.isRequired,
};
/* eslint-enable react/no-unused-prop-types */