diff --git a/build/webpack.common.config.js b/build/webpack.common.config.js index 2af79d87f1..ee8c07e74a 100644 --- a/build/webpack.common.config.js +++ b/build/webpack.common.config.js @@ -25,7 +25,6 @@ module.exports = language => { path.resolve('src/lib'), path.resolve('node_modules/box-annotations'), path.resolve('node_modules/box-ui-elements'), - path.resolve('../box-ui-elements'), ], }, { diff --git a/package.json b/package.json index 07d11d643a..f8305b951f 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "babel-plugin-react-remove-properties": "^0.3.0", "babel-plugin-transform-require-ignore": "^0.1.1", "box-annotations": "^2.3.0", - "box-ui-elements": "^11.0.2", + "box-ui-elements": "^11.1.0-beta.18", "chai": "^4.2.0", "chai-dom": "^1.8.1", "conventional-changelog-cli": "^2.0.23", @@ -89,6 +89,8 @@ "raw-loader": "^3.1.0", "react": "^16.7.0", "react-dom": "^16.7.0", + "react-intl": "^2.9.0", + "react-tether": "^1.0.0", "react-virtualized": "^9.13.0", "sass-loader": "^7.1.0", "sinon": "^7.4.2", diff --git a/src/i18n/en-US.properties b/src/i18n/en-US.properties index ac3e3af3bf..1bea37bebb 100644 --- a/src/i18n/en-US.properties +++ b/src/i18n/en-US.properties @@ -69,6 +69,14 @@ error_not_downloadable=Oops! It looks like something is wrong with this file. We # Preview error message shown when flash is not enabled on their browser error_flash_not_enabled=We’re sorry, the preview didn’t load because Flash is not enabled on your browser. If possible, please enable Flash and refresh the page. +# Archive Preview +# Label for filename column name +filename=Filename +# Label for last modified date column name +last_modified_date=Last modified date +# Label for size column name +size=Size + # Media Preview # Label for autoplay in media player media_autoplay=Autoplay diff --git a/src/lib/viewers/archive/ArchiveExplorer.js b/src/lib/viewers/archive/ArchiveExplorer.js index 2321cda26e..bb7c2972ea 100644 --- a/src/lib/viewers/archive/ArchiveExplorer.js +++ b/src/lib/viewers/archive/ArchiveExplorer.js @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import memoize from 'lodash/memoize'; import Internationalize from 'box-ui-elements/es/elements/common/Internationalize'; import { readableTimeCellRenderer, @@ -14,7 +15,7 @@ const { KEY_NAME, KEY_MODIFIED_AT } = TABLE_COLUMNS; class ArchiveExplorer extends React.Component { static propTypes = { - itemList: PropTypes.arrayOf( + itemCollection: PropTypes.arrayOf( PropTypes.shape({ type: PropTypes.string.isRequired, absolute_path: PropTypes.string.isRequired, @@ -46,19 +47,7 @@ class ArchiveExplorer extends React.Component { ).isRequired, }; - constructor(props) { - super(props); - const { cache, root } = this.buildCache(props.itemList); - this.cache = cache; - this.root = root; - - this.state = { - itemList: cache[root], - fullPath: root, - }; - } - - buildCache = itemList => { + buildCache = memoize(itemList => { const folders = []; const temp = {}; const cache = {}; @@ -79,27 +68,27 @@ class ArchiveExplorer extends React.Component { }); return { cache, root }; - }; + }); - updateData = absolutePath => { - this.setState({ - itemList: this.cache[absolutePath], - }); - }; + constructor(props) { + super(props); + + this.state = { + fullPath: undefined, + }; + } - getRowData = ({ index }) => { - const { itemList } = this.state; - const currentRow = itemList[index]; - const { name, type, modified_at: modifiedAt } = currentRow; + getRowData = itemList => ({ index }) => { + const { name, type, modified_at: modifiedAt, ...rest } = itemList[index]; const rowData = { - ...currentRow, [KEY_NAME]: { isExternal: false, name, type, }, [KEY_MODIFIED_AT]: `20${modifiedAt}`, + ...rest, }; return rowData; }; @@ -108,17 +97,32 @@ class ArchiveExplorer extends React.Component { const { name } = cellValue; const { fullPath } = this.state; const nextFullPath = `${fullPath}${name}/`; - this.updateData(nextFullPath); this.setState({ fullPath: nextFullPath, }); }; render() { - const { itemList } = this.state; + const { itemCollection } = this.props; + const { fullPath } = this.state; + const { cache, root } = this.buildCache(itemCollection); + + if (!fullPath) { + this.setState({ + fullPath: root, + }); + return null; + } + + const itemList = cache[fullPath]; + return ( - + {intl => [ , , , ]} diff --git a/src/lib/viewers/archive/ArchiveLoader.js b/src/lib/viewers/archive/ArchiveLoader.js index 3d0c3e9c31..9ab14b7e92 100644 --- a/src/lib/viewers/archive/ArchiveLoader.js +++ b/src/lib/viewers/archive/ArchiveLoader.js @@ -7,13 +7,13 @@ const VIEWERS = [ NAME: 'Archive', CONSTRUCTOR: ArchiveViewer, REP: 'json', - EXT: ['zip'], + EXT: ['zip', 'jar'], }, { NAME: 'Archive', CONSTRUCTOR: ArchiveViewer, - REP: ORIGINAL_REP_NAME, - EXT: ['zip'], + REP: ORIGINAL_REP_NAME, // for testing purposes, will remove later + EXT: ['zip', 'jar'], }, ]; @@ -27,15 +27,6 @@ class ArchiveLoader extends AssetLoader { super(); this.viewers = VIEWERS; } - - /** - * @inheritdoc - */ - determineViewer(file, disabledViewers = []) { - const viewer = super.determineViewer(file, disabledViewers); - - return viewer; - } } export default new ArchiveLoader(); diff --git a/src/lib/viewers/archive/ArchiveViewer.js b/src/lib/viewers/archive/ArchiveViewer.js index 36003fce57..072b33788d 100644 --- a/src/lib/viewers/archive/ArchiveViewer.js +++ b/src/lib/viewers/archive/ArchiveViewer.js @@ -225,43 +225,6 @@ const testData = [ }, ]; -const virtualizedTestData = [ - { - id: 0, - name: "01 - Adam Sanders - Life I'm Livin'.m4a", - modified_at: '2019-05-10T18:02:30Z', - size: 6823316, - type: 'file', - modified_by: { - id: '666', - name: 'Mingze', - email: 'mxiao@box.com', - login: 'mxiao', - }, - path: { - id: 0, - name: "01 - Adam Sanders - Life I'm Livin'.m4a", - size: 6823316, - itemPath: [{ name: 'folder1' }, { name: 'folder2' }], - itemType: 'file', - }, - }, - { - id: 1, - name: 'coraline.mp4', - modified_at: '2013-02-19T19:56:50Z', - size: 4464268, - type: 'file', - path: { - id: 1, - name: 'coraline.mp4', - size: 4464268, - itemPath: [{ id: '0' }], - itemType: 'file', - }, - }, -]; - class ArchiveViewer extends BaseViewer { /** * @inheritdoc @@ -315,18 +278,15 @@ class ArchiveViewer extends BaseViewer { const contentUrl = this.createContentUrlWithAuthParams(template); this.startLoadTimer(); - this.api - .get(contentUrl) - .then(data => { - if (this.isDestroyed()) { - return; - } + this.api.get(contentUrl).then(data => { + if (this.isDestroyed()) { + return; + } - this.data = testData; + this.data = testData; - this.finishLoading(); - }) - .catch(this.handleAssetError); + this.finishLoading(); + }); }; /** @@ -336,7 +296,10 @@ class ArchiveViewer extends BaseViewer { * @return {void} */ finishLoading() { - /* global BoxArchive */ + /* + global BoxArchive + The BoxArchive is loaded from archive.js + */ this.archiveComponent = new BoxArchive(this.archiveEl, this.data); this.loaded = true; diff --git a/src/lib/viewers/archive/BoxArchive.js b/src/lib/viewers/archive/BoxArchive.js index 27b3494c44..e5fa8b317c 100644 --- a/src/lib/viewers/archive/BoxArchive.js +++ b/src/lib/viewers/archive/BoxArchive.js @@ -12,7 +12,7 @@ class BoxArchive { */ constructor(archiveEl, data) { this.archiveEl = archiveEl; - this.archiveExplorer = ReactDOM.render(, this.archiveEl); + this.archiveExplorer = ReactDOM.render(, this.archiveEl); } /** diff --git a/yarn.lock b/yarn.lock index d91ed3df65..0d28312d94 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2055,10 +2055,10 @@ box-annotations@^2.3.0: resolved "https://registry.yarnpkg.com/box-annotations/-/box-annotations-2.3.0.tgz#5cac38171f7f8d9283659e2b243310f19d5ab7d3" integrity sha512-Ea7tPgyJjX7vcnmZIfCorbzHd6oYx/OHVMPnZVQL/dUHR5vRKhLM0610xqwmVlUpk627sqHw5x/APaa+kt4SXg== -box-ui-elements@^11.0.2: - version "11.0.2" - resolved "https://registry.yarnpkg.com/box-ui-elements/-/box-ui-elements-11.0.2.tgz#e8d462c2daa4f06809b591571fa74fac545cae61" - integrity sha512-Wq+1M3AHK5aE+sbV7T5LBhwkKq7OFsbRQUfKSX5TliybncsAEG2nbdeo9k8fKabaTisnp4jgYTgf4MnTKzAtKg== +box-ui-elements@^11.1.0-beta.18: + version "11.1.0-beta.18" + resolved "https://registry.yarnpkg.com/box-ui-elements/-/box-ui-elements-11.1.0-beta.18.tgz#988e5dd2bfdde01676815e37962909126f5a04fc" + integrity sha512-XFY49xHpHJR0zJ+2jTaqETPHwFIQvwfFZavSRWGaEo2dAJpdTIvX60Q72QWbN6ohsr8Wq35BYpB2C5AXnt0fjg== brace-expansion@^1.1.7: version "1.1.11" @@ -6115,6 +6115,13 @@ hoek@6.x.x: resolved "https://registry.yarnpkg.com/hoek/-/hoek-6.1.2.tgz#99e6d070561839de74ee427b61aa476bd6bddfd6" integrity sha512-6qhh/wahGYZHFSFw12tBbJw5fsAhhwrrG/y3Cs0YMTv2WzMnL0oLPnQJjv1QJvEfylRSOFuP+xCu+tdx0tD16Q== +hoist-non-react-statics@^3.3.0: + version "3.3.1" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#101685d3aff3b23ea213163f6e8e12f4f111e19f" + integrity sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw== + dependencies: + react-is "^16.7.0" + homedir-polyfill@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8" @@ -6490,6 +6497,30 @@ interpret@^1.0.0: resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614" integrity sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ= +intl-format-cache@^2.0.5: + version "2.2.9" + resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-2.2.9.tgz#fb560de20c549cda20b569cf1ffb6dc62b5b93b4" + integrity sha512-Zv/u8wRpekckv0cLkwpVdABYST4hZNTDaX7reFetrYTJwxExR2VyTqQm+l0WmL0Qo8Mjb9Tf33qnfj0T7pjxdQ== + +intl-messageformat-parser@1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz#b43d45a97468cadbe44331d74bb1e8dea44fc075" + integrity sha1-tD1FqXRoytvkQzHXS7Ho3qRPwHU= + +intl-messageformat@^2.0.0, intl-messageformat@^2.1.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-2.2.0.tgz#345bcd46de630b7683330c2e52177ff5eab484fc" + integrity sha1-NFvNRt5jC3aDMwwuUhd/9eq0hPw= + dependencies: + intl-messageformat-parser "1.4.0" + +intl-relativeformat@^2.1.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/intl-relativeformat/-/intl-relativeformat-2.2.0.tgz#6aca95d019ec8d30b6c5653b6629f9983ea5b6c5" + integrity sha512-4bV/7kSKaPEmu6ArxXf9xjv1ny74Zkwuey8Pm01NH4zggPP7JHwg2STk8Y3JdspCKRDriwIyLRfEXnj2ZLr4Bw== + dependencies: + intl-messageformat "^2.0.0" + into-stream@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/into-stream/-/into-stream-3.1.0.tgz#96fb0a936c12babd6ff1752a17d05616abd094c6" @@ -6498,6 +6529,13 @@ into-stream@^3.1.0: from2 "^2.1.1" p-is-promise "^1.1.0" +invariant@^2.1.1: + version "2.2.4" + resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" + integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== + dependencies: + loose-envify "^1.0.0" + invariant@^2.2.2: version "2.2.3" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.3.tgz#1a827dfde7dcbd7c323f0ca826be8fa7c5e9d688" @@ -10604,11 +10642,35 @@ react-dom@^16.7.0: prop-types "^15.6.2" scheduler "^0.12.0" +react-intl@^2.9.0: + version "2.9.0" + resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-2.9.0.tgz#c97c5d17d4718f1575fdbd5a769f96018a3b1843" + integrity sha512-27jnDlb/d2A7mSJwrbOBnUgD+rPep+abmoJE511Tf8BnoONIAUehy/U1zZCHGO17mnOwMWxqN4qC0nW11cD6rA== + dependencies: + hoist-non-react-statics "^3.3.0" + intl-format-cache "^2.0.5" + intl-messageformat "^2.1.0" + intl-relativeformat "^2.1.0" + invariant "^2.1.1" + +react-is@^16.7.0: + version "16.12.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c" + integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q== + react-is@^16.8.1: version "16.8.6" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== +react-tether@^1.0.0: + version "1.0.5" + resolved "https://registry.yarnpkg.com/react-tether/-/react-tether-1.0.5.tgz#6d106e0039b1aa0e14d1266925486cd9cff2d217" + integrity sha512-dehXHK82Xx0aXZldYiGR6dzlIAruAvnDvtp5O6AyT1EC1TTMYem/kIXNHsyjFNEA1hhhL7c98GmP6ANYVbq+GQ== + dependencies: + prop-types "^15.6.2" + tether "^1.4.5" + react-virtualized@^9.13.0: version "9.18.5" resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.18.5.tgz#42dd390ebaa7ea809bfcaf775d39872641679b89" @@ -12495,6 +12557,11 @@ test-exclude@^5.2.3: read-pkg-up "^4.0.0" require-main-filename "^2.0.0" +tether@^1.4.5: + version "1.4.7" + resolved "https://registry.yarnpkg.com/tether/-/tether-1.4.7.tgz#d56a818590d8fe72e387f77a67f93ab96d8e1fb2" + integrity sha512-Z0J1aExjoFU8pybVkQAo/vD2wfSO63r+XOPfWQMC5qtf1bI7IWqNk4MiyBcgvvnY8kqnY06dVdvwTK2S3PU/Fw== + text-extensions@^1.0.0: version "1.9.0" resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-1.9.0.tgz#1853e45fee39c945ce6f6c36b2d659b5aabc2a26"