@alyzenpublic/react-keyed-file-browser
Version:
Folder based file browser given a flat keyed list of objects, powered by React.
1,367 lines (1,134 loc) • 127 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("prop-types"), require("react"), require("react-dnd-html5-backend"), require("react-dnd"), require("classnames"), require("moment"));
else if(typeof define === 'function' && define.amd)
define(["prop-types", "react", "react-dnd-html5-backend", "react-dnd", "classnames", "moment"], factory);
else if(typeof exports === 'object')
exports["react-keyed-file-browser"] = factory(require("prop-types"), require("react"), require("react-dnd-html5-backend"), require("react-dnd"), require("classnames"), require("moment"));
else
root["react-keyed-file-browser"] = factory(root["prop-types"], root["react"], root["react-dnd-html5-backend"], root["react-dnd"], root["classnames"], root["moment"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_12__, __WEBPACK_EXTERNAL_MODULE_17__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Icons = exports.Sorters = exports.Groupers = exports.Filters = exports.Details = exports.FolderRenderers = exports.FileRenderers = exports.Headers = exports.BaseFolderConnectors = exports.BaseFolder = exports.BaseFileConnectors = exports.BaseFile = exports.RawFileBrowser = undefined;
var _browser = __webpack_require__(1);
var _browser2 = _interopRequireDefault(_browser);
var _baseFile = __webpack_require__(13);
var _baseFile2 = _interopRequireDefault(_baseFile);
var _baseFolder = __webpack_require__(23);
var _baseFolder2 = _interopRequireDefault(_baseFolder);
var _headers = __webpack_require__(10);
var Headers = _interopRequireWildcard(_headers);
var _files = __webpack_require__(15);
var FileRenderers = _interopRequireWildcard(_files);
var _folders = __webpack_require__(21);
var FolderRenderers = _interopRequireWildcard(_folders);
var _details = __webpack_require__(6);
var Details = _interopRequireWildcard(_details);
var _filters = __webpack_require__(8);
var Filters = _interopRequireWildcard(_filters);
var _groupers = __webpack_require__(25);
var Groupers = _interopRequireWildcard(_groupers);
var _sorters = __webpack_require__(29);
var Sorters = _interopRequireWildcard(_sorters);
var _icons = __webpack_require__(33);
var Icons = _interopRequireWildcard(_icons);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _browser2.default;
exports.RawFileBrowser = _browser.RawFileBrowser;
exports.BaseFile = _baseFile2.default;
exports.BaseFileConnectors = _baseFile.BaseFileConnectors;
exports.BaseFolder = _baseFolder2.default;
exports.BaseFolderConnectors = _baseFolder.BaseFolderConnectors;
exports.Headers = Headers;
exports.FileRenderers = FileRenderers;
exports.FolderRenderers = FolderRenderers;
exports.Details = Details;
exports.Filters = Filters;
exports.Groupers = Groupers;
exports.Sorters = Sorters;
exports.Icons = Icons;
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RawFileBrowser = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _class, _temp2, _dec, _class2;
// drag and drop
// default components (most overridable)
// default renderers
// default processors
var _propTypes = __webpack_require__(2);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
var _reactDndHtml5Backend = __webpack_require__(4);
var _reactDndHtml5Backend2 = _interopRequireDefault(_reactDndHtml5Backend);
var _reactDnd = __webpack_require__(5);
var _details = __webpack_require__(6);
var _filters = __webpack_require__(8);
var _headers = __webpack_require__(10);
var _files = __webpack_require__(15);
var _folders = __webpack_require__(21);
var _groupers = __webpack_require__(25);
var _sorters = __webpack_require__(29);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var SEARCH_RESULTS_PER_PAGE = 20;
function getItemProps(file, browserProps) {
return {
key: 'file-' + file.key,
fileKey: file.key,
isSelected: file.key === browserProps.selection,
isOpen: file.key in browserProps.openFolders || browserProps.nameFilter,
isRenaming: browserProps.activeAction === 'rename' && browserProps.actionTarget === file.key,
isDeleting: browserProps.activeAction === 'delete' && browserProps.actionTarget === file.key,
isDraft: !!file.draft
};
}
var RawFileBrowser = (_temp2 = _class = function (_React$Component) {
_inherits(RawFileBrowser, _React$Component);
function RawFileBrowser() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, RawFileBrowser);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RawFileBrowser.__proto__ || Object.getPrototypeOf(RawFileBrowser)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
openFolders: {},
selection: null,
activeAction: null,
actionTarget: null,
nameFilter: '',
searchResultsShown: SEARCH_RESULTS_PER_PAGE,
previewFile: null,
addFolder: null
}, _this.getFile = function (key) {
return _this.props.files.find(function (f) {
return f.key === key;
});
}, _this.createFiles = function (files, prefix) {
_this.setState(function (prevState) {
var stateChanges = { selection: null };
if (prefix) {
stateChanges.openFolders = _extends({}, prevState.openFolders, _defineProperty({}, prefix, true));
}
return stateChanges;
}, function () {
_this.props.onCreateFiles(files, prefix);
});
}, _this.createFolder = function (key) {
_this.setState({
activeAction: null,
actionTarget: null,
selection: key
}, _this.props.onCreateFolder(key));
}, _this.moveFile = function (oldKey, newKey) {
_this.setState({
activeAction: null,
actionTarget: null,
selection: newKey
}, function () {
_this.props.onMoveFile(oldKey, newKey);
});
}, _this.moveFolder = function (oldKey, newKey) {
_this.setState(function (prevState) {
var stateChanges = {
activeAction: null,
actionTarget: null,
selection: newKey
};
if (oldKey in prevState.openFolders) {
stateChanges.openFolders = _extends({}, prevState.openFolders, _defineProperty({}, newKey, true));
}
return stateChanges;
}, function () {
_this.props.onMoveFolder(oldKey, newKey);
});
}, _this.renameFile = function (oldKey, newKey) {
_this.setState({
activeAction: null,
actionTarget: null,
selection: newKey
}, function () {
_this.props.onRenameFile(oldKey, newKey);
});
}, _this.renameFolder = function (oldKey, newKey) {
_this.setState(function (prevState) {
var stateChanges = {
activeAction: null,
actionTarget: null
};
if (prevState.selection.substr(0, oldKey.length) === oldKey) {
stateChanges.selection = prevState.selection.replace(oldKey, newKey);
}
if (oldKey in prevState.openFolders) {
stateChanges.openFolders = _extends({}, prevState.openFolders, _defineProperty({}, newKey, true));
}
return stateChanges;
}, function () {
_this.props.onRenameFolder(oldKey, newKey);
});
}, _this.deleteFile = function (key) {
_this.setState({
activeAction: null,
actionTarget: null,
selection: null
}, function () {
_this.props.onDeleteFile(key);
});
}, _this.deleteFolder = function (key) {
_this.setState(function (prevState) {
var stateChanges = {
activeAction: null,
actionTarget: null,
selection: null
};
if (key in prevState.openFolders) {
stateChanges.openFolders = _extends({}, prevState.openFolders);
delete stateChanges.openFolders[key];
}
return stateChanges;
}, function () {
_this.props.onDeleteFolder(key);
});
}, _this.downloadFile = function (key) {
_this.setState({
activeAction: null,
actionTarget: null
}, function () {
_this.props.onDownloadFile(key);
});
}, _this.beginAction = function (action, key) {
_this.setState({
activeAction: action,
actionTarget: key
});
}, _this.endAction = function () {
if (_this.state.selection !== null && _this.state.selection.indexOf('__new__') !== -1) {
_this.setState({ selection: null });
}
_this.beginAction(null, null);
}, _this.select = function (key, selectedType) {
var actionTarget = _this.state.actionTarget;
var shouldClearState = actionTarget !== null && actionTarget !== key;
var selected = _this.getFile(key);
_this.setState(function (prevState) {
return {
selection: key,
actionTarget: shouldClearState ? null : actionTarget,
activeAction: shouldClearState ? null : prevState.activeAction
};
}, function () {
_this.props.onSelect(selected);
if (selectedType === 'file') _this.props.onSelectFile(selected);
if (selectedType === 'folder') _this.props.onSelectFolder(selected);
});
}, _this.preview = function (file) {
if (_this.state.previewFile && _this.state.previewFile.key !== file.key) _this.closeDetail();
_this.setState({
previewFile: file
}, function () {
_this.props.onPreviewOpen(file);
});
}, _this.closeDetail = function () {
_this.setState({
previewFile: null
}, function () {
_this.props.onPreviewClose(_this.state.previewFile);
});
}, _this.handleShowMoreClick = function (event) {
event.preventDefault();
_this.setState(function (prevState) {
return {
searchResultsShown: prevState.searchResultsShown + SEARCH_RESULTS_PER_PAGE
};
});
}, _this.toggleFolder = function (folderKey) {
var isOpen = folderKey in _this.state.openFolders;
_this.setState(function (prevState) {
var stateChanges = {
openFolders: _extends({}, prevState.openFolders)
};
if (isOpen) {
delete stateChanges.openFolders[folderKey];
} else {
stateChanges.openFolders[folderKey] = true;
}
return stateChanges;
}, function () {
var callback = isOpen ? 'onFolderClose' : 'onFolderOpen';
_this.props[callback](_this.getFile(folderKey));
});
}, _this.openFolder = function (folderKey) {
_this.setState(function (prevState) {
return {
openFolders: _extends({}, prevState.openFolders, _defineProperty({}, folderKey, true))
};
}, function () {
_this.props.onFolderOpen(_this.getFile(folderKey));
});
}, _this.handleGlobalClick = function (event) {
var inBrowser = !!(_this.browserRef && _this.browserRef.contains(event.target));
// TODO: updated old-to-new ref styles, but this ref was never set
var inPreview = !!(_this.previewRef && _this.previewRef.contains(event.target));
if (!inBrowser && !inPreview) {
_this.setState({
selection: null,
actionTarget: null,
activeAction: null
});
}
}, _this.handleActionBarRenameClick = function (event) {
event.preventDefault();
_this.beginAction('rename', _this.state.selection);
}, _this.handleActionBarDeleteClick = function (event) {
event.preventDefault();
_this.beginAction('delete', _this.state.selection);
}, _this.handleActionBarAddFolderClick = function (event) {
event.preventDefault();
if (_this.state.activeAction === 'createFolder') {
return;
}
_this.setState(function (prevState) {
var addKey = '';
if (prevState.selection) {
addKey += prevState.selection;
if (addKey.substr(addKey.length - 1, addKey.length) !== '/') {
addKey += '/';
}
}
addKey += '__new__/';
var stateChanges = {
actionTarget: addKey,
activeAction: 'createFolder',
selection: addKey
};
if (prevState.selection) {
stateChanges.openFolders = _extends({}, prevState.openFolders, _defineProperty({}, _this.state.selection, true));
}
return stateChanges;
});
}, _this.handleActionBarDownloadClick = function (event) {
event.preventDefault();
_this.downloadFile(_this.state.selection);
}, _this.updateFilter = function (newValue) {
_this.setState({
nameFilter: newValue,
searchResultsShown: SEARCH_RESULTS_PER_PAGE
});
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(RawFileBrowser, [{
key: 'componentDidMount',
value: function componentDidMount() {
if (this.props.renderStyle === 'table' && this.props.nestChildren) {
console.warn('Invalid settings: Cannot nest table children in file browser');
}
window.addEventListener('click', this.handleGlobalClick);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
window.removeEventListener('click', this.handleGlobalClick);
}
// item manipulation
// browser manipulation
// event handlers
}, {
key: 'getBrowserProps',
value: function getBrowserProps() {
return {
// browser config
nestChildren: this.props.nestChildren,
fileRenderer: this.props.fileRenderer,
fileRendererProps: this.props.fileRendererProps,
folderRenderer: this.props.folderRenderer,
folderRendererProps: this.props.folderRendererProps,
icons: this.props.icons,
// browser state
openFolders: this.state.openFolders,
nameFilter: this.state.nameFilter,
selection: this.state.selection,
activeAction: this.state.activeAction,
actionTarget: this.state.actionTarget,
// browser manipulation
select: this.select,
openFolder: this.openFolder,
toggleFolder: this.toggleFolder,
beginAction: this.beginAction,
endAction: this.endAction,
preview: this.preview,
// item manipulation
createFiles: this.props.onCreateFiles ? this.createFiles : undefined,
createFolder: this.props.onCreateFolder ? this.createFolder : undefined,
renameFile: this.props.onRenameFile ? this.renameFile : undefined,
renameFolder: this.props.onRenameFolder ? this.renameFolder : undefined,
moveFile: this.props.onMoveFile ? this.moveFile : undefined,
moveFolder: this.props.onMoveFolder ? this.moveFolder : undefined,
deleteFile: this.props.onDeleteFile ? this.deleteFile : undefined,
deleteFolder: this.props.onDeleteFolder ? this.deleteFolder : undefined,
getItemProps: getItemProps
};
}
}, {
key: 'renderActionBar',
value: function renderActionBar(selectedItem) {
var _props = this.props,
icons = _props.icons,
canFilter = _props.canFilter,
allowFolderDownloads = _props.allowFolderDownloads,
filterRendererProps = _props.filterRendererProps,
FilterRenderer = _props.filterRenderer,
onCreateFolder = _props.onCreateFolder,
onRenameFile = _props.onRenameFile,
onRenameFolder = _props.onRenameFolder,
onDeleteFile = _props.onDeleteFile,
onDeleteFolder = _props.onDeleteFolder,
onDownloadFile = _props.onDownloadFile;
var selectionIsFolder = selectedItem && !selectedItem.size;
var filter = void 0;
if (canFilter) {
filter = _react2.default.createElement(FilterRenderer, _extends({
value: this.state.nameFilter,
updateFilter: this.updateFilter
}, filterRendererProps));
}
var actions = void 0;
if (selectedItem) {
// Something is selected. Build custom actions depending on what it is.
if (selectedItem.action) {
// Selected item has an active action against it. Disable all other actions.
var actionText = void 0;
switch (selectedItem.action) {
case 'delete':
actionText = 'Deleting ...';
break;
case 'rename':
actionText = 'Renaming ...';
break;
default:
actionText = 'Moving ...';
break;
}
actions =
// TODO: Enable plugging in custom spinner.
_react2.default.createElement(
'div',
{ className: 'item-actions' },
icons.Loading,
' ',
actionText
);
} else {
actions = [];
if (selectionIsFolder && typeof onCreateFolder === 'function' && !this.state.nameFilter) {
actions.push(_react2.default.createElement(
'li',
{ key: 'action-add-folder' },
_react2.default.createElement(
'a',
{
onClick: this.handleActionBarAddFolderClick,
href: '#',
role: 'button'
},
icons.Folder,
'\xA0Add Subfolder'
)
));
}
if (selectedItem.keyDerived && (!selectionIsFolder && typeof onRenameFile === 'function' || selectionIsFolder && typeof onRenameFolder === 'function')) {
actions.push(_react2.default.createElement(
'li',
{ key: 'action-rename' },
_react2.default.createElement(
'a',
{
onClick: this.handleActionBarRenameClick,
href: '#',
role: 'button'
},
icons.Rename,
'\xA0Rename'
)
));
}
if (selectedItem.keyDerived && (!selectionIsFolder && typeof onDeleteFile === 'function' || selectionIsFolder && typeof onDeleteFolder === 'function')) {
actions.push(_react2.default.createElement(
'li',
{ key: 'action-delete' },
_react2.default.createElement(
'a',
{
onClick: this.handleActionBarDeleteClick,
href: '#',
role: 'button'
},
icons.Delete,
'\xA0Delete'
)
));
}
if ((!selectionIsFolder || allowFolderDownloads) && typeof onDownloadFile === 'function') {
actions.push(_react2.default.createElement(
'li',
{ key: 'action-download' },
_react2.default.createElement(
'a',
{
onClick: this.handleActionBarDownloadClick,
href: '#',
role: 'button'
},
icons.Download,
'\xA0Download'
)
));
}
if (actions.length) {
actions = _react2.default.createElement(
'ul',
{ className: 'item-actions' },
actions
);
} else {
actions = _react2.default.createElement(
'div',
{ className: 'item-actions' },
'\xA0'
);
}
}
} else {
// Nothing selected: We're in the 'root' folder. Only allowed action is adding a folder.
actions = [];
if (typeof onCreateFolder === 'function' && !this.state.nameFilter) {
actions.push(_react2.default.createElement(
'li',
{ key: 'action-add-folder' },
_react2.default.createElement(
'a',
{
onClick: this.handleActionBarAddFolderClick,
href: '#',
role: 'button'
},
icons.Folder,
'\xA0Add Folder'
)
));
}
if (actions.length) {
actions = _react2.default.createElement(
'ul',
{ className: 'item-actions' },
actions
);
} else {
actions = _react2.default.createElement(
'div',
{ className: 'item-actions' },
'\xA0'
);
}
}
return _react2.default.createElement(
'div',
{ className: 'action-bar' },
filter,
actions
);
}
}, {
key: 'renderFiles',
value: function renderFiles(files, depth) {
var _this2 = this;
var _props2 = this.props,
FileRenderer = _props2.fileRenderer,
fileRendererProps = _props2.fileRendererProps,
FolderRenderer = _props2.folderRenderer,
folderRendererProps = _props2.folderRendererProps;
var browserProps = this.getBrowserProps();
var renderedFiles = [];
files.map(function (file) {
var thisItemProps = _extends({}, browserProps.getItemProps(file, browserProps), {
depth: _this2.state.nameFilter ? 0 : depth
});
if (file.size) {
renderedFiles.push(_react2.default.createElement(FileRenderer, _extends({}, file, thisItemProps, {
browserProps: browserProps
}, fileRendererProps)));
} else {
if (!_this2.state.nameFilter) {
renderedFiles.push(_react2.default.createElement(FolderRenderer, _extends({}, file, thisItemProps, {
browserProps: browserProps
}, folderRendererProps)));
}
if (_this2.state.nameFilter || thisItemProps.isOpen && !browserProps.nestChildren) {
renderedFiles = renderedFiles.concat(_this2.renderFiles(file.children, depth + 1));
}
}
});
return renderedFiles;
}
}, {
key: 'render',
value: function render() {
var _this3 = this;
var browserProps = this.getBrowserProps();
var headerProps = {
browserProps: browserProps,
fileKey: '',
fileCount: this.props.files.length
};
var renderedFiles = void 0;
var files = this.props.files.concat([]);
if (this.state.activeAction === 'createFolder') {
files.push({
key: this.state.actionTarget,
size: 0,
draft: true
});
}
if (this.state.nameFilter) {
var filteredFiles = [];
var terms = this.state.nameFilter.toLowerCase().split(' ');
files.map(function (file) {
var skip = false;
terms.map(function (term) {
if (file.key.toLowerCase().trim().indexOf(term) === -1) {
skip = true;
}
});
if (skip) {
return;
}
filteredFiles.push(file);
});
files = filteredFiles;
}
if (typeof this.props.group === 'function') {
files = this.props.group(files, '');
} else {
var newFiles = [];
files.map(function (file) {
if (file.size) {
newFiles.push(file);
}
});
files = newFiles;
}
var selectedItem = null;
var findSelected = function findSelected(item) {
if (item.key === _this3.state.selection) {
selectedItem = item;
}
if (item.children) {
item.children.map(findSelected);
}
};
files.map(findSelected);
if (typeof this.props.sort === 'function') {
files = this.props.sort(files);
}
var header = void 0;
var contents = this.renderFiles(files, 0);
switch (this.props.renderStyle) {
case 'table':
if (!contents.length) {
if (this.state.nameFilter) {
contents = _react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'td',
{ colSpan: '100' },
'No files matching "',
this.state.nameFilter,
'".'
)
);
} else {
contents = _react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'td',
{ colSpan: '100' },
this.props.noFilesMessage
)
);
}
} else {
if (this.state.nameFilter) {
var numFiles = contents.length;
contents = contents.slice(0, this.state.searchResultsShown);
if (numFiles > contents.length) {
contents.push(_react2.default.createElement(
'tr',
{ key: 'show-more' },
_react2.default.createElement(
'td',
{ colSpan: '100' },
_react2.default.createElement(
'a',
{
onClick: this.handleShowMoreClick,
href: '#'
},
'Show more results'
)
)
));
}
}
}
if (this.props.headerRenderer) {
header = _react2.default.createElement(
'thead',
null,
_react2.default.createElement(this.props.headerRenderer, _extends({}, headerProps, this.props.headerRendererProps))
);
}
renderedFiles = _react2.default.createElement(
'table',
{ cellSpacing: '0', cellPadding: '0' },
header,
_react2.default.createElement(
'tbody',
null,
contents
)
);
break;
case 'list':
if (!contents.length) {
if (this.state.nameFilter) {
contents = _react2.default.createElement(
'p',
{ className: 'empty' },
'No files matching "',
this.state.nameFilter,
'"'
);
} else {
contents = _react2.default.createElement(
'p',
{ className: 'empty' },
'No files.'
);
}
} else {
var more = void 0;
if (this.state.nameFilter) {
var _numFiles = contents.length;
contents = contents.slice(0, this.state.searchResultsShown);
if (_numFiles > contents.length) {
more = _react2.default.createElement(
'a',
{
onClick: this.handleShowMoreClick,
href: '#'
},
'Show more results'
);
}
}
contents = _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'ul',
null,
contents
),
more
);
}
if (this.props.headerRenderer) {
header = _react2.default.createElement(this.props.headerRenderer, _extends({}, headerProps, this.props.headerRendererProps));
}
renderedFiles = _react2.default.createElement(
'div',
null,
header,
contents
);
break;
}
return _react2.default.createElement(
'div',
{ className: 'rendered-react-keyed-file-browser' },
this.props.actions,
_react2.default.createElement(
'div',
{ className: 'rendered-file-browser', ref: function ref(el) {
_this3.browserRef = el;
} },
this.props.showActionBar && this.renderActionBar(selectedItem),
_react2.default.createElement(
'div',
{ className: 'files' },
renderedFiles
)
),
this.state.previewFile !== null && _react2.default.createElement(this.props.detailRenderer, _extends({
file: this.state.previewFile,
close: this.closeDetail
}, this.props.detailRendererProps))
);
}
}]);
return RawFileBrowser;
}(_react2.default.Component), _class.propTypes = {
files: _propTypes2.default.array.isRequired,
actions: _propTypes2.default.node,
showActionBar: _propTypes2.default.bool.isRequired,
canFilter: _propTypes2.default.bool.isRequired,
allowFolderDownloads: _propTypes2.default.bool.isRequired,
noFilesMessage: _propTypes2.default.string,
group: _propTypes2.default.func.isRequired,
sort: _propTypes2.default.func.isRequired,
icons: _propTypes2.default.shape({
Folder: _propTypes2.default.element,
FolderOpen: _propTypes2.default.element,
File: _propTypes2.default.element,
PDF: _propTypes2.default.element,
Image: _propTypes2.default.element,
Delete: _propTypes2.default.element,
Rename: _propTypes2.default.element,
Loading: _propTypes2.default.element,
Download: _propTypes2.default.element
}),
nestChildren: _propTypes2.default.bool.isRequired,
renderStyle: _propTypes2.default.oneOf(['list', 'table']).isRequired,
startOpen: _propTypes2.default.bool.isRequired, // TODO: remove?
headerRenderer: _propTypes2.default.func,
headerRendererProps: _propTypes2.default.object,
filterRenderer: _propTypes2.default.func,
filterRendererProps: _propTypes2.default.object,
fileRenderer: _propTypes2.default.func,
fileRendererProps: _propTypes2.default.object,
folderRenderer: _propTypes2.default.func,
folderRendererProps: _propTypes2.default.object,
detailRenderer: _propTypes2.default.func,
detailRendererProps: _propTypes2.default.object,
onCreateFiles: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.bool]),
onCreateFolder: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.bool]),
onMoveFile: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.bool]),
onMoveFolder: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.bool]),
onRenameFile: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.bool]),
onRenameFolder: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.bool]),
onDeleteFile: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.bool]),
onDeleteFolder: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.bool]),
onDownloadFile: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.bool]),
onSelect: _propTypes2.default.func,
onSelectFile: _propTypes2.default.func,
onSelectFolder: _propTypes2.default.func,
onPreviewOpen: _propTypes2.default.func,
onPreviewClose: _propTypes2.default.func,
onFolderOpen: _propTypes2.default.func,
onFolderClose: _propTypes2.default.func
}, _class.defaultProps = {
showActionBar: true,
canFilter: true,
allowFolderDownloads: false,
noFilesMessage: 'No files.',
group: _groupers.GroupByFolder,
sort: _sorters.SortByName,
nestChildren: false,
renderStyle: 'table',
startOpen: false,
headerRenderer: _headers.TableHeader,
headerRendererProps: {},
filterRenderer: _filters.DefaultFilter,
filterRendererProps: {},
fileRenderer: _files.TableFile,
fileRendererProps: {},
folderRenderer: _folders.TableFolder,
folderRendererProps: {},
detailRenderer: _details.DefaultDetail,
detailRendererProps: {},
icons: {},
onSelect: function onSelect(fileOrFolder) {}, // Always called when a file or folder is selected
onSelectFile: function onSelectFile(file) {}, // Called after onSelect, only on file selection
onSelectFolder: function onSelectFolder(folder) {}, // Called after onSelect, only on folder selection
onPreviewOpen: function onPreviewOpen(file) {}, // File opened
onPreviewClose: function onPreviewClose(file) {}, // File closed
onFolderOpen: function onFolderOpen(folder) {}, // Folder opened
onFolderClose: function onFolderClose(folder) {} // Folder closed
}, _temp2);
var FileBrowser = (_dec = (0, _reactDnd.DragDropContext)(_reactDndHtml5Backend2.default), _dec(_class2 = function (_RawFileBrowser) {
_inherits(FileBrowser, _RawFileBrowser);
function FileBrowser() {
_classCallCheck(this, FileBrowser);
return _possibleConstructorReturn(this, (FileBrowser.__proto__ || Object.getPrototypeOf(FileBrowser)).apply(this, arguments));
}
return FileBrowser;
}(RawFileBrowser)) || _class2);
exports.default = FileBrowser;
exports.RawFileBrowser = RawFileBrowser;
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = require("prop-types");
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = require("react");
/***/ }),
/* 4 */
/***/ (function(module, exports) {
module.exports = require("react-dnd-html5-backend");
/***/ }),
/* 5 */
/***/ (function(module, exports) {
module.exports = require("react-dnd");
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DefaultDetail = undefined;
var _default = __webpack_require__(7);
var _default2 = _interopRequireDefault(_default);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.DefaultDetail = _default2.default;
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _class, _temp2;
var _propTypes = __webpack_require__(2);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Detail = (_temp2 = _class = function (_React$Component) {
_inherits(Detail, _React$Component);
function Detail() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, Detail);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Detail.__proto__ || Object.getPrototypeOf(Detail)).call.apply(_ref, [this].concat(args))), _this), _this.handleCloseClick = function (event) {
if (event) {
event.preventDefault();
}
_this.props.close();
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Detail, [{
key: 'render',
value: function render() {
var name = this.props.file.key.split('/');
name = name.length ? name[name.length - 1] : '';
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'h2',
null,
'Item Detail'
),
_react2.default.createElement(
'dl',
null,
_react2.default.createElement(
'dt',
null,
'Key'
),
_react2.default.createElement(
'dd',
null,
this.props.file.key
),
_react2.default.createElement(
'dt',
null,
'Name'
),
_react2.default.createElement(
'dd',
null,
name
)
),
_react2.default.createElement(
'a',
{ href: '#', onClick: this.handleCloseClick },
'Close'
)
);
}
}]);
return Detail;
}(_react2.default.Component), _class.propTypes = {
file: _propTypes2.default.shape({
key: _propTypes2.default.string.isRequired,
name: _propTypes2.default.string.isRequired,
extension: _propTypes2.default.string.isRequired,
url: _propTypes2.default.string
}).isRequired,
close: _propTypes2.default.func
}, _temp2);
exports.default = Detail;
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DefaultFilter = undefined;
var _default = __webpack_require__(9);
var _default2 = _interopRequireDefault(_default);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.DefaultFilter = _default2.default;
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _class, _temp2;
var _propTypes = __webpack_require__(2);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Filter = (_temp2 = _class = function (_React$Component) {
_inherits(Filter, _React$Component);
function Filter() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, Filter);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Filter.__proto__ || Object.getPrototypeOf(Filter)).call.apply(_ref, [this].concat(args))), _this), _this.handleFilterChange = function (event) {
var newValue = _this.filterRef.value;
_this.props.updateFilter(newValue);
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Filter, [{
key: 'render',
value: function render() {
var _this2 = this,
_React$createElement;
return _react2.default.createElement('input', (_React$createElement = {
ref: 'filter'
}, _defineProperty(_React$createElement, 'ref', function ref(el) {
_this2.filterRef = el;
}), _defineProperty(_React$createElement, 'type', 'search'), _defineProperty(_React$createElement, 'placeholder', 'Filter files'), _defineProperty(_React$createElement, 'value', this.props.value), _defineProperty(_React$createElement, 'onChange', this.handleFilterChange), _React$createElement));
}
}]);
return Filter;
}(_react2.default.Component), _class.propTypes = {
value: _propTypes2.default.string.isRequired,
updateFilter: _propTypes2.default.func
}, _temp2);
exports.default = Filter;
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TableHeader = undefined;
var _table = __webpack_require__(11);
var _table2 = _interopRequireDefault(_table);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.TableHeader = _table2.default;
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RawTableHeader = undefined;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _class, _temp, _dec, _class2;
var _propTypes = __webpack_require__(2);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
var _classnames = __webpack_require__(12);
var _classnames2 = _interopRequireDefault(_classnames);
var _reactDnd = __webpack_require__(5);
var _reactDndHtml5Backend = __webpack_require__(4);
var _baseFile = __webpack_require__(13);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var RawTableHeader = (_temp = _class = function (_React$Component) {
_inherits(RawTableHeader, _React$Component);
function RawTableHeader() {