Skip to content

Commit a868fc0

Browse files
Mingzemergify[bot]
Mingze
authored and
mergify[bot]
committed
feat(virtualized-table): add virtualized-table feature (#1770)
* feat(virtualized-table): add virtualized-table feature * feat(virtualized-table): address comments * feat(virtualized-table): inject intl to VirtualizedTable * feat(virtualized-table): address comments * feat(virtualized-table): address comments * feat(virtualized-table): add onClick prop to fileNameCellRenderer * feat(virtualized-table): address comments * feat(virtualized-table): address comments * feat(virtualized-table): add itemNameCellRenderer * feat(virtualized-table): address comments * feat(virtualized-table): address comments * feat(virtualized-table): fix flow
1 parent 012a7d1 commit a868fc0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+2049
-6
lines changed

‎flow-typed/npm/react-intl_v2.x.x.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,8 @@ declare module "react-intl" {
7878

7979
declare type $npm$ReactIntl$RelativeFormatOptions = {
8080
style?: "best fit" | "numeric",
81-
units?: "second" | "minute" | "hour" | "day" | "month" | "year"
81+
units?: "second" | "minute" | "hour" | "day" | "month" | "year" | "second-short"
82+
| "minute-short" | "hour-short" | "day-short" | "month-short" | "year-short"
8283
};
8384

8485
declare type $npm$ReactIntl$NumberFormatOptions = {
@@ -197,7 +198,7 @@ declare module "react-intl" {
197198
$npm$ReactIntl$MessageDescriptor & {
198199
values?: Object,
199200
tagName?: string,
200-
children?:
201+
children?:
201202
| ((...formattedMessage: Array<React$Node>) => React$Node)
202203
| (string => React$Node)
203204
}

‎i18n/en-US.properties‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -746,6 +746,18 @@ boxui.datePicker.iconAlertText = Invalid Date
746746
boxui.draftjs.mentionSelector.startMention = Mention someone to notify them
747747
# Icon showing a sad Box cloud
748748
boxui.errorMask.iconSadCloudText = Sad Box Cloud
749+
# Text to show when root folder is external
750+
boxui.features.VirtualizedTableRenderers.allFiles = All Files
751+
# The user is an anonymous user
752+
boxui.features.VirtualizedTableRenderers.anonymousUser = Anonymous User
753+
# Text to show when a file is external
754+
boxui.features.VirtualizedTableRenderers.externalFile = External File
755+
# Text to show when a folder is external
756+
boxui.features.VirtualizedTableRenderers.externalFolder = External Folder
757+
# Text to show on "modified by" table cell. Note that "lastModified" will contain additional localized text. Example: 2 days ago by John Smith
758+
boxui.features.VirtualizedTableRenderers.lastModifiedBy = {lastModified} by {user}
759+
# The user is unknown in the database.
760+
boxui.features.VirtualizedTableRenderers.unknownUser = Unknown User
749761
# Warning message in the sidebar that this bookmark will be automatically deleted on a certain date, {expiration} is the date
750762
boxui.itemDetails.bookmarkExpiration = This bookmark will be deleted on {expiration}.
751763
# Label for created date under item properties in the sidebar

‎jest.config.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,8 @@ module.exports = {
77
'react-intl-locale-data': '<rootDir>/node_modules/react-intl/locale-data/en.js',
88
'box-ui-elements-locale-data': '<rootDir>/i18n/en-US.js',
99
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
10-
'<rootDir>/scripts/jest/fileMock.js',
10+
'<rootDir>/scripts/jest/mocks/fileMock.js',
1111
'\\.(css|less|scss|md)$': '<rootDir>/scripts/jest/mocks/styleMock.js',
12-
'react-virtualized/dist/es': 'react-virtualized/dist/commonjs',
1312
},
1413
transformIgnorePatterns: ['node_modules/(?!(react-virtualized/dist/es))'],
1514
testPathIgnorePatterns: ['/node_modules/', 'stories.test.js$'],

‎src/components/grid-view/__tests__/__snapshots__/GridView.test.js.snap‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,30 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`components/grid-view/GridView should render() 1`] = `
4-
<Component
4+
<Table
55
className="bdl-GridView"
66
disableHeader={true}
7+
estimatedRowSize={30}
78
gridClassName="bdl-GridView-body"
9+
headerHeight={0}
10+
headerRowRenderer={[Function]}
11+
headerStyle={Object {}}
812
height={600}
13+
noRowsRenderer={[Function]}
14+
onRowsRendered={[Function]}
15+
onScroll={[Function]}
16+
overscanIndicesGetter={[Function]}
17+
overscanRowCount={10}
918
rowClassName="bdl-GridView-tableRow"
1019
rowCount={1}
1120
rowGetter={[Function]}
1221
rowHeight={[Function]}
22+
rowRenderer={[Function]}
23+
rowStyle={Object {}}
24+
scrollToAlignment="auto"
1325
scrollToIndex={0}
1426
sortDirection="ASC"
27+
style={Object {}}
1528
width={400}
1629
>
1730
<Column
@@ -25,5 +38,5 @@ exports[`components/grid-view/GridView should render() 1`] = `
2538
style={Object {}}
2639
width={400}
2740
/>
28-
</Component>
41+
</Table>
2942
`;

‎src/features/virtualized-table-renderers/FilePathCell.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import '../../styles/variables';
2+
@import './mixins';
3+
4+
.bdl-FilePathCell {
5+
display: flex;
6+
align-items: center;
7+
8+
.breadcrumb-item {
9+
font-size: 13px;
10+
}
11+
12+
&.bdl-is-external {
13+
.breadcrumb-item-last .bdl-FilePathCell-breadcrumbName {
14+
@include isExternal;
15+
}
16+
}
17+
}

‎src/features/virtualized-table-renderers/FormattedUser.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// @flow
2+
import * as React from 'react';
3+
import { FormattedMessage } from 'react-intl';
4+
import type { IntlShape } from 'react-intl';
5+
import messages from './messages';
6+
import { ANONYMOUS_USER_ID } from './constants';
7+
8+
type Props = {
9+
email?: string,
10+
id: string,
11+
name?: string,
12+
};
13+
14+
const formatUser = ({ email, id, name }: Props, intl?: IntlShape, isComponent: boolean = false) => {
15+
const { anonymousUser, unknownUser } = messages;
16+
17+
let targetUser = isComponent || !intl ? <FormattedMessage {...unknownUser} /> : intl.formatMessage(unknownUser);
18+
let targetUserInfo = `(${email || id})`;
19+
20+
if (id === ANONYMOUS_USER_ID) {
21+
targetUser = isComponent || !intl ? <FormattedMessage {...anonymousUser} /> : intl.formatMessage(anonymousUser);
22+
targetUserInfo = '';
23+
} else if (name) {
24+
targetUser = name;
25+
targetUserInfo = `(${email || id})`;
26+
} else if (email) {
27+
targetUser = id;
28+
targetUserInfo = `(${email || id})`;
29+
}
30+
31+
const formattedUser = isComponent ? (
32+
<>
33+
{targetUser}
34+
{targetUserInfo ? ` ${targetUserInfo}` : ''}
35+
</>
36+
) : (
37+
`${String(targetUser)} ${targetUserInfo}`.trim()
38+
);
39+
return formattedUser;
40+
};
41+
42+
const FormattedUser = (props: Props) => formatUser(props, undefined, true);
43+
44+
export { formatUser };
45+
export default FormattedUser;

‎src/features/virtualized-table-renderers/ItemNameCell.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@import '../../styles/variables';
2+
@import './mixins';
3+
4+
.bdl-ItemNameCell {
5+
display: flex;
6+
align-items: center;
7+
justify-content: flex-start;
8+
9+
svg {
10+
flex-shrink: 0;
11+
}
12+
}
13+
14+
.bdl-ItemNameCell-name {
15+
@include itemName;
16+
17+
margin-left: 5px;
18+
overflow: hidden;
19+
color: $bdl-gray;
20+
line-height: 1.5em;
21+
white-space: nowrap;
22+
text-decoration: none;
23+
text-overflow: ellipsis;
24+
25+
&.bdl-is-folder:hover {
26+
margin-left: 5px;
27+
text-decoration: underline;
28+
}
29+
}

‎src/features/virtualized-table-renderers/__tests__/__snapshots__/filePathCellRenderer.test.js.snap‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`features/virtualized-table-renderers/filePathCellRenderer should render a FilePathCell when all fields are available 1`] = `
4+
<span
5+
className="bdl-FilePathCell"
6+
title="YouFooMe > CooMooFoo > fancy.jpg (123 Bytes)"
7+
>
8+
<FileIcon
9+
extension="jpg"
10+
/>
11+
<Breadcrumb
12+
label="contentPath"
13+
>
14+
<span
15+
className="bdl-FilePathCell-breadcrumbName"
16+
key="YouFooMe"
17+
>
18+
YouFooMe
19+
</span>
20+
<span
21+
className="bdl-FilePathCell-breadcrumbName"
22+
key="CooMooFoo"
23+
>
24+
CooMooFoo
25+
</span>
26+
<span
27+
className="bdl-FilePathCell-breadcrumbName"
28+
key="fancy.jpg (123 Bytes)"
29+
>
30+
fancy.jpg (123 Bytes)
31+
</span>
32+
</Breadcrumb>
33+
</span>
34+
`;
35+
36+
exports[`features/virtualized-table-renderers/filePathCellRenderer should render a FilePathCell when only id is available 1`] = `
37+
<span
38+
className="bdl-FilePathCell"
39+
title="123"
40+
>
41+
<FileIcon
42+
extension=""
43+
/>
44+
<Breadcrumb
45+
label="contentPath"
46+
>
47+
<span
48+
className="bdl-FilePathCell-breadcrumbName"
49+
key="123"
50+
>
51+
123
52+
</span>
53+
</Breadcrumb>
54+
</span>
55+
`;
56+
57+
exports[`features/virtualized-table-renderers/filePathCellRenderer should render a FilePathCell with "All Files" text when given an external file 1`] = `
58+
<span
59+
className="bdl-FilePathCell bdl-is-external"
60+
title="All Files > External File > External File (123 Bytes)"
61+
>
62+
<FileIcon
63+
extension="jpg"
64+
/>
65+
<Breadcrumb
66+
label="contentPath"
67+
>
68+
<span
69+
className="bdl-FilePathCell-breadcrumbName"
70+
key="All Files"
71+
>
72+
All Files
73+
</span>
74+
<span
75+
className="bdl-FilePathCell-breadcrumbName"
76+
key="External File"
77+
>
78+
External File
79+
</span>
80+
<span
81+
className="bdl-FilePathCell-breadcrumbName"
82+
key="External File (123 Bytes)"
83+
>
84+
External File (123 Bytes)
85+
</span>
86+
</Breadcrumb>
87+
</span>
88+
`;

‎src/features/virtualized-table-renderers/__tests__/__snapshots__/itemNameCellRenderer.test.js.snap‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`features/virtualized-table-renderers/itemNameCellRenderer should render a itemNameCell 1`] = `
4+
<span
5+
className="bdl-ItemNameCell"
6+
title="fancy.jpg"
7+
>
8+
<FileIcon
9+
dimension={32}
10+
extension="jpg"
11+
/>
12+
<span
13+
className="bdl-ItemNameCell-name"
14+
>
15+
fancy.jpg
16+
</span>
17+
</span>
18+
`;

‎src/features/virtualized-table-renderers/__tests__/__snapshots__/lastModifiedByCellRenderer.test.js.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`features/virtualized-table-renderers/lastModifiedByCellRenderer should render a LastModifiedByCell 1`] = `"1563482709000 eons ago by [email protected]"`;

0 commit comments

Comments
 (0)