@orfeas126/box-ui-elements
Version:
Box UI Elements
180 lines (179 loc) • 5.12 kB
JavaScript
/**
*
* @file Item list component
* @author Box
*/
import * as React from 'react';
import classNames from 'classnames';
import { injectIntl } from 'react-intl';
import { Table, Column } from '@box/react-virtualized/dist/es/Table';
import AutoSizer from '@box/react-virtualized/dist/es/AutoSizer';
import KeyBinder from '../common/KeyBinder';
import nameCellRenderer from '../common/item/nameCellRenderer';
import iconCellRenderer from '../common/item/iconCellRenderer';
import { focus } from '../../utils/dom';
import messages from '../common/messages';
import headerCellRenderer from './headerCellRenderer';
import sizeCellRenderer from './sizeCellRenderer';
import dateCellRenderer from './dateCellRenderer';
import moreOptionsCellRenderer from './moreOptionsCellRenderer';
import { FIELD_DATE, FIELD_ID, FIELD_NAME, FIELD_SIZE, VIEW_FOLDER, VIEW_RECENTS } from '../../constants';
import '@box/react-virtualized/styles.css';
import './ItemList.scss';
const ItemList = ({
view,
isSmall,
isMedium,
isTouch,
rootId,
rootElement,
canShare,
canDownload,
canDelete,
canPreview,
canRename,
onItemClick,
onItemSelect,
onItemDelete,
onItemDownload,
onItemRename,
onItemShare,
onItemPreview,
onSortChange,
currentCollection,
tableRef,
focusedRow,
intl
}) => {
const nameCell = nameCellRenderer(rootId, view, onItemClick, onItemSelect, canPreview, isSmall,
// shows details if false
isTouch);
const iconCell = iconCellRenderer();
const dateCell = dateCellRenderer();
const sizeAccessCell = sizeCellRenderer();
const moreOptionsCell = moreOptionsCellRenderer(canPreview, canShare, canDownload, canDelete, canRename, onItemSelect, onItemDelete, onItemDownload, onItemRename, onItemShare, onItemPreview, isSmall);
const isRecents = view === VIEW_RECENTS;
const hasSort = view === VIEW_FOLDER;
const {
id,
items = [],
sortBy,
sortDirection
} = currentCollection;
const rowCount = items.length;
const rowClassName = ({
index
}) => {
if (index === -1) {
return 'bce-item-header-row';
}
const {
selected
} = items[index];
return classNames(`bce-item-row bce-item-row-${index}`, {
'bce-item-row-selected': selected
});
};
const sort = ({
sortBy: by,
sortDirection: direction
}) => {
onSortChange(by, direction);
};
return /*#__PURE__*/React.createElement(KeyBinder, {
id: id,
items: items,
columnCount: 1,
rowCount: rowCount,
className: "bce-item-grid",
onRename: onItemRename,
onShare: onItemShare,
onDownload: onItemDownload,
onOpen: onItemClick,
onSelect: onItemSelect,
onDelete: onItemDelete,
scrollToRow: focusedRow,
onScrollToChange: ({
scrollToRow
}) => focus(rootElement, `.bce-item-row-${scrollToRow}`)
}, ({
onSectionRendered,
scrollToRow,
focusOnRender
}) => /*#__PURE__*/React.createElement(AutoSizer, null, ({
width,
height
}) => /*#__PURE__*/React.createElement(Table, {
width: width,
height: height,
headerHeight: isSmall ? 0 : 40,
rowHeight: 50,
rowCount: rowCount,
rowGetter: ({
index
}) => items[index],
ref: tableRef,
rowClassName: rowClassName,
scrollToIndex: scrollToRow,
sort: sort,
sortBy: sortBy,
sortDirection: sortDirection,
onRowClick: ({
rowData
}) => onItemSelect(rowData),
onRowsRendered: ({
startIndex,
stopIndex
}) => {
onSectionRendered({
rowStartIndex: startIndex,
rowStopIndex: stopIndex
});
if (focusOnRender) {
focus(rootElement, `.bce-item-row-${scrollToRow}`);
}
}
}, /*#__PURE__*/React.createElement(Column, {
disableSort: true,
dataKey: FIELD_ID,
cellRenderer: iconCell,
headerRole: "gridcell",
width: isSmall ? 30 : 50,
flexShrink: 0
}), /*#__PURE__*/React.createElement(Column, {
disableSort: !hasSort,
label: intl.formatMessage(messages.name),
dataKey: FIELD_NAME,
cellRenderer: nameCell,
headerRenderer: headerCellRenderer,
width: 300,
flexGrow: 1
}), isSmall ? null : /*#__PURE__*/React.createElement(Column, {
className: "bce-item-column",
disableSort: !hasSort,
label: isRecents ? intl.formatMessage(messages.interacted) : intl.formatMessage(messages.modified),
dataKey: FIELD_DATE,
cellRenderer: dateCell,
headerRenderer: headerCellRenderer,
width: isRecents ? 120 : 300,
flexGrow: 1
}), isSmall || isMedium ? null : /*#__PURE__*/React.createElement(Column, {
className: "bce-item-column",
disableSort: !hasSort,
label: intl.formatMessage(messages.size),
dataKey: FIELD_SIZE,
cellRenderer: sizeAccessCell,
headerRenderer: headerCellRenderer,
width: 80,
flexShrink: 0
}), /*#__PURE__*/React.createElement(Column, {
disableSort: true,
dataKey: FIELD_ID,
cellRenderer: moreOptionsCell,
headerRole: "gridcell",
width: isSmall || !canShare ? 58 : 140,
flexShrink: 0
}))));
};
export default injectIntl(ItemList);
//# sourceMappingURL=ItemList.js.map