-
Notifications
You must be signed in to change notification settings - Fork 116
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(archive-viewer): add archive loader, viewer, and archive explorer
- Loading branch information
Mingze Xiao
committed
Dec 13, 2019
1 parent
dc71bed
commit 2c13107
Showing
22 changed files
with
1,134 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { configure } from 'enzyme'; | ||
| import Adapter from 'enzyme-adapter-react-16'; | ||
|
|
||
| configure({ adapter: new Adapter() }); | ||
|
|
||
| function importAll(r) { | ||
| r.keys().forEach(r); | ||
| } | ||
|
|
||
| importAll(require.context('../src/lib/viewers/archive/__tests__', true, /-test-react\.js$/)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| @import '../../boxuiVariables'; | ||
|
|
||
| .bp-archive { | ||
| display: flex; | ||
| width: 100%; | ||
| height: 100%; | ||
| background: $white; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| import * as React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import get from 'lodash/get'; | ||
| import Internationalize from 'box-ui-elements/es/elements/common/Internationalize'; | ||
| import { | ||
| readableTimeCellRenderer, | ||
| sizeCellRenderer, | ||
| itemNameCellRenderer, | ||
| } from 'box-ui-elements/es/features/virtualized-table-renderers'; | ||
| import VirtualizedTable from 'box-ui-elements/es/features/virtualized-table'; | ||
| import { Column } from 'react-virtualized/dist/es/Table/index'; | ||
| import { TABLE_COLUMNS } from './constants'; | ||
|
|
||
| const { KEY_NAME, KEY_MODIFIED_AT, KEY_SIZE } = TABLE_COLUMNS; | ||
|
|
||
| class ArchiveExplorer extends React.Component { | ||
| static propTypes = { | ||
| itemCollection: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| type: PropTypes.string.isRequired, | ||
| absolute_path: PropTypes.string.isRequired, | ||
| name: PropTypes.string.isRequired, | ||
| modified_at: PropTypes.string.isRequired, | ||
| size: PropTypes.number.isRequired, | ||
| path_collection: PropTypes.shape({ | ||
| total_count: PropTypes.number, | ||
| entries: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| type: PropTypes.string, | ||
| absolute_path: PropTypes.string, | ||
| name: PropTypes.string, | ||
| }), | ||
| ), | ||
| }), | ||
| parent: PropTypes.string, | ||
| item_collection: PropTypes.shape({ | ||
| total_count: PropTypes.number, | ||
| entries: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| type: PropTypes.string, | ||
| absolute_path: PropTypes.string.isRequired, | ||
| name: PropTypes.string, | ||
| }), | ||
| ).isRequired, | ||
| }).isRequired, | ||
| }), | ||
| ).isRequired, | ||
| }; | ||
|
|
||
| /** | ||
| * [constructor] | ||
| * | ||
| * @param {Object} props - React element properties | ||
| */ | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| fullPath: props.itemCollection.find(info => !info.parent).absolute_path, | ||
| }; | ||
| } | ||
|
|
||
| /** | ||
| * Filter itemlist for target folder | ||
| * | ||
| * @param {Array<Object>} itemCollection - raw data | ||
| * @param {string} fullPath - target folder path | ||
| * @return {Array<Object>} filtered itemlist for target folder | ||
| */ | ||
| getItemList = (itemCollection, fullPath) => { | ||
| const folderInfo = itemCollection.find(item => item.absolute_path === fullPath); | ||
| const subItems = get(folderInfo, 'item_collection.entries'); | ||
| if (!subItems) { | ||
| return []; | ||
| } | ||
| const subItemsPath = subItems.map(item => item.absolute_path); | ||
|
|
||
| return itemCollection.filter(item => subItemsPath.includes(item.absolute_path)); | ||
| }; | ||
|
|
||
| /** | ||
| * Prepare data to render | ||
| * Will be passed as row getter into VirtaulizedTable | ||
| * | ||
| * @param {Array<Object>} itemList - list of data object | ||
| * @param {number} index - row index of the data to selected | ||
| * @return {Object} formatted data | ||
| */ | ||
| getRowData = itemList => ({ index }) => { | ||
| const { modified_at: modifiedAt, name, size, type, ...rest } = itemList[index]; | ||
|
|
||
| return { | ||
| [KEY_NAME]: { | ||
| isExternal: false, | ||
| name, | ||
| type, | ||
| }, | ||
| // TODO: fix when conversion changes it to standard date format | ||
| [KEY_MODIFIED_AT]: `20${modifiedAt}`, | ||
| [KEY_SIZE]: size, | ||
| ...rest, | ||
| }; | ||
| }; | ||
|
|
||
| /** | ||
| * Handle click event, update fullPath state | ||
| * | ||
| * @param {Object} cellValue - the cell being clicked | ||
| * @return {void} | ||
| */ | ||
| handleClick = ({ name }) => { | ||
| const { fullPath } = this.state; | ||
| this.setState({ | ||
| fullPath: `${fullPath}${name}/`, | ||
| }); | ||
| }; | ||
|
|
||
| /** | ||
| * render data | ||
| * | ||
| * @return {jsx} VirtualizedTable | ||
| */ | ||
| render() { | ||
| const { itemCollection } = this.props; | ||
| const { fullPath } = this.state; | ||
| const itemList = this.getItemList(itemCollection, fullPath); | ||
|
|
||
| return ( | ||
| <Internationalize language="en-us" messages={{}}> | ||
| <VirtualizedTable | ||
| className="ArchiveFilesTable" | ||
| rowData={itemList} | ||
| rowGetter={this.getRowData(itemList)} | ||
| > | ||
| {intl => [ | ||
| <Column | ||
| key={KEY_NAME} | ||
| cellRenderer={itemNameCellRenderer(intl, this.handleClick)} | ||
| dataKey={KEY_NAME} | ||
| disableSort | ||
| flexGrow={3} | ||
| label={__('filename')} | ||
| width={1} | ||
| />, | ||
| <Column | ||
| key={KEY_MODIFIED_AT} | ||
| cellRenderer={readableTimeCellRenderer} | ||
| dataKey={KEY_MODIFIED_AT} | ||
| disableSort | ||
| flexGrow={2} | ||
| label={__('last_modified_date')} | ||
| width={1} | ||
| />, | ||
| <Column | ||
| key={KEY_SIZE} | ||
| cellRenderer={sizeCellRenderer()} | ||
| dataKey={KEY_SIZE} | ||
| disableSort | ||
| flexGrow={1} | ||
| label={__('size')} | ||
| width={1} | ||
| />, | ||
| ]} | ||
| </VirtualizedTable> | ||
| </Internationalize> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default ArchiveExplorer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import AssetLoader from '../AssetLoader'; | ||
| import ArchiveViewer from './ArchiveViewer'; | ||
|
|
||
| const VIEWERS = [ | ||
| { | ||
| NAME: 'Archive', | ||
| CONSTRUCTOR: ArchiveViewer, | ||
| REP: 'json', | ||
| EXT: ['jar', 'zip'], | ||
| }, | ||
| ]; | ||
|
|
||
| class ArchiveLoader extends AssetLoader { | ||
| viewers = VIEWERS; | ||
| } | ||
|
|
||
| export default new ArchiveLoader(); |
Oops, something went wrong.