box-ui-elements 23.1.0-beta.4 → 23.1.0-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/elements/common/item/IconCell.js.map +1 -1
- package/es/features/content-explorer/item-list/ItemListIcon.js +4 -2
- package/es/features/content-explorer/item-list/ItemListIcon.js.flow +9 -2
- package/es/features/content-explorer/item-list/ItemListIcon.js.map +1 -1
- package/es/src/elements/common/item/IconCell.d.ts +1 -1
- package/package.json +2 -2
- package/src/elements/common/item/IconCell.tsx +1 -1
- package/src/features/content-explorer/item-list/ItemListIcon.js +9 -2
- package/src/features/content-explorer/item-list/__tests__/ItemListIcon.test.js +18 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconCell.js","names":["React","useIntl","Archive","FolderArchive","FileBookmark","FileIcon","FolderIcon","TYPE_FOLDER","TYPE_FILE","TYPE_WEBLINK","messages","IconCell","rowData","dimension","formatMessage","type","extension","has_collaborations","is_externally_owned","archive_type","isArchive","isArchiveFolder","createElement","archive","height","width","archivedFolder","isCollab","isExternal","bookmark"],"sources":["../../../../src/elements/common/item/IconCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Archive, FolderArchive, FileBookmark } from '@box/blueprint-web-assets/icons/Content';\nimport FileIcon from '../../../icons/file-icon/FileIcon';\nimport FolderIcon from '../../../icons/folder-icon/FolderIcon';\n\nimport type { BoxItem } from '../../../common/types/core';\n\nimport { TYPE_FOLDER, TYPE_FILE, TYPE_WEBLINK } from '../../../constants';\nimport messages from '../messages';\n\nimport './IconCell.scss';\n\nexport interface IconCellProps {\n dimension
|
|
1
|
+
{"version":3,"file":"IconCell.js","names":["React","useIntl","Archive","FolderArchive","FileBookmark","FileIcon","FolderIcon","TYPE_FOLDER","TYPE_FILE","TYPE_WEBLINK","messages","IconCell","rowData","dimension","formatMessage","type","extension","has_collaborations","is_externally_owned","archive_type","isArchive","isArchiveFolder","createElement","archive","height","width","archivedFolder","isCollab","isExternal","bookmark"],"sources":["../../../../src/elements/common/item/IconCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Archive, FolderArchive, FileBookmark } from '@box/blueprint-web-assets/icons/Content';\nimport FileIcon from '../../../icons/file-icon/FileIcon';\nimport FolderIcon from '../../../icons/folder-icon/FolderIcon';\n\nimport type { BoxItem } from '../../../common/types/core';\n\nimport { TYPE_FOLDER, TYPE_FILE, TYPE_WEBLINK } from '../../../constants';\nimport messages from '../messages';\n\nimport './IconCell.scss';\n\nexport interface IconCellProps {\n dimension: number;\n rowData: BoxItem;\n}\n\nconst IconCell = ({ rowData, dimension }: IconCellProps) => {\n const { formatMessage } = useIntl();\n const { type, extension, has_collaborations, is_externally_owned, archive_type }: BoxItem = rowData;\n const isArchive = archive_type === 'archive';\n const isArchiveFolder = archive_type === 'folder_archive';\n switch (type) {\n case TYPE_FILE:\n return <FileIcon dimension={dimension} extension={extension} />;\n case TYPE_FOLDER:\n if (isArchive) {\n return <Archive aria-label={formatMessage(messages.archive)} height={dimension} width={dimension} />;\n }\n if (isArchiveFolder) {\n return (\n <FolderArchive\n aria-label={formatMessage(messages.archivedFolder)}\n height={dimension}\n width={dimension}\n />\n );\n }\n return <FolderIcon dimension={dimension} isCollab={has_collaborations} isExternal={is_externally_owned} />;\n case TYPE_WEBLINK:\n return <FileBookmark aria-label={formatMessage(messages.bookmark)} height={dimension} width={dimension} />;\n default:\n return <FileIcon dimension={dimension} />;\n }\n};\n\nexport default IconCell;\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,QAAQ,YAAY;AAEpC,SAASC,OAAO,EAAEC,aAAa,EAAEC,YAAY,QAAQ,yCAAyC;AAC9F,OAAOC,QAAQ,MAAM,mCAAmC;AACxD,OAAOC,UAAU,MAAM,uCAAuC;AAI9D,SAASC,WAAW,EAAEC,SAAS,EAAEC,YAAY,QAAQ,oBAAoB;AACzE,OAAOC,QAAQ,MAAM,aAAa;AAElC,OAAO,iBAAiB;AAOxB,MAAMC,QAAQ,GAAGA,CAAC;EAAEC,OAAO;EAAEC;AAAyB,CAAC,KAAK;EACxD,MAAM;IAAEC;EAAc,CAAC,GAAGb,OAAO,CAAC,CAAC;EACnC,MAAM;IAAEc,IAAI;IAAEC,SAAS;IAAEC,kBAAkB;IAAEC,mBAAmB;IAAEC;EAAsB,CAAC,GAAGP,OAAO;EACnG,MAAMQ,SAAS,GAAGD,YAAY,KAAK,SAAS;EAC5C,MAAME,eAAe,GAAGF,YAAY,KAAK,gBAAgB;EACzD,QAAQJ,IAAI;IACR,KAAKP,SAAS;MACV,oBAAOR,KAAA,CAAAsB,aAAA,CAACjB,QAAQ;QAACQ,SAAS,EAAEA,SAAU;QAACG,SAAS,EAAEA;MAAU,CAAE,CAAC;IACnE,KAAKT,WAAW;MACZ,IAAIa,SAAS,EAAE;QACX,oBAAOpB,KAAA,CAAAsB,aAAA,CAACpB,OAAO;UAAC,cAAYY,aAAa,CAACJ,QAAQ,CAACa,OAAO,CAAE;UAACC,MAAM,EAAEX,SAAU;UAACY,KAAK,EAAEZ;QAAU,CAAE,CAAC;MACxG;MACA,IAAIQ,eAAe,EAAE;QACjB,oBACIrB,KAAA,CAAAsB,aAAA,CAACnB,aAAa;UACV,cAAYW,aAAa,CAACJ,QAAQ,CAACgB,cAAc,CAAE;UACnDF,MAAM,EAAEX,SAAU;UAClBY,KAAK,EAAEZ;QAAU,CACpB,CAAC;MAEV;MACA,oBAAOb,KAAA,CAAAsB,aAAA,CAAChB,UAAU;QAACO,SAAS,EAAEA,SAAU;QAACc,QAAQ,EAAEV,kBAAmB;QAACW,UAAU,EAAEV;MAAoB,CAAE,CAAC;IAC9G,KAAKT,YAAY;MACb,oBAAOT,KAAA,CAAAsB,aAAA,CAAClB,YAAY;QAAC,cAAYU,aAAa,CAACJ,QAAQ,CAACmB,QAAQ,CAAE;QAACL,MAAM,EAAEX,SAAU;QAACY,KAAK,EAAEZ;MAAU,CAAE,CAAC;IAC9G;MACI,oBAAOb,KAAA,CAAAsB,aAAA,CAACjB,QAAQ;QAACQ,SAAS,EAAEA;MAAU,CAAE,CAAC;EACjD;AACJ,CAAC;AAED,eAAeF,QAAQ","ignoreList":[]}
|
|
@@ -7,7 +7,8 @@ const ItemListIcon = ({
|
|
|
7
7
|
extension,
|
|
8
8
|
type,
|
|
9
9
|
hasCollaborations = false,
|
|
10
|
-
isExternallyOwned = false
|
|
10
|
+
isExternallyOwned = false,
|
|
11
|
+
dimension = 32
|
|
11
12
|
}) => {
|
|
12
13
|
const rowData = {
|
|
13
14
|
type,
|
|
@@ -17,7 +18,8 @@ const ItemListIcon = ({
|
|
|
17
18
|
archive_type: archiveType
|
|
18
19
|
};
|
|
19
20
|
return /*#__PURE__*/React.createElement(IconCell, {
|
|
20
|
-
rowData: rowData
|
|
21
|
+
rowData: rowData,
|
|
22
|
+
dimension: dimension
|
|
21
23
|
});
|
|
22
24
|
};
|
|
23
25
|
ItemListIcon.propTypes = {
|
|
@@ -4,7 +4,14 @@ import PropTypes from 'prop-types';
|
|
|
4
4
|
import { ItemTypePropType, ItemArchiveTypePropType } from '../prop-types';
|
|
5
5
|
import IconCell from '../../../elements/common/item/IconCell';
|
|
6
6
|
|
|
7
|
-
const ItemListIcon = ({
|
|
7
|
+
const ItemListIcon = ({
|
|
8
|
+
archiveType,
|
|
9
|
+
extension,
|
|
10
|
+
type,
|
|
11
|
+
hasCollaborations = false,
|
|
12
|
+
isExternallyOwned = false,
|
|
13
|
+
dimension = 32,
|
|
14
|
+
}) => {
|
|
8
15
|
const rowData = {
|
|
9
16
|
type,
|
|
10
17
|
extension,
|
|
@@ -12,7 +19,7 @@ const ItemListIcon = ({ archiveType, extension, type, hasCollaborations = false,
|
|
|
12
19
|
is_externally_owned: isExternallyOwned,
|
|
13
20
|
archive_type: archiveType,
|
|
14
21
|
};
|
|
15
|
-
return <IconCell rowData={rowData} />;
|
|
22
|
+
return <IconCell rowData={rowData} dimension={dimension} />;
|
|
16
23
|
};
|
|
17
24
|
|
|
18
25
|
ItemListIcon.propTypes = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ItemListIcon.js","names":["React","PropTypes","ItemTypePropType","ItemArchiveTypePropType","IconCell","ItemListIcon","archiveType","extension","type","hasCollaborations","isExternallyOwned","rowData","has_collaborations","is_externally_owned","archive_type","createElement","propTypes","string","bool"],"sources":["../../../../src/features/content-explorer/item-list/ItemListIcon.js"],"sourcesContent":["import * as React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { ItemTypePropType, ItemArchiveTypePropType } from '../prop-types';\nimport IconCell from '../../../elements/common/item/IconCell';\n\nconst ItemListIcon = ({
|
|
1
|
+
{"version":3,"file":"ItemListIcon.js","names":["React","PropTypes","ItemTypePropType","ItemArchiveTypePropType","IconCell","ItemListIcon","archiveType","extension","type","hasCollaborations","isExternallyOwned","dimension","rowData","has_collaborations","is_externally_owned","archive_type","createElement","propTypes","string","bool"],"sources":["../../../../src/features/content-explorer/item-list/ItemListIcon.js"],"sourcesContent":["import * as React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { ItemTypePropType, ItemArchiveTypePropType } from '../prop-types';\nimport IconCell from '../../../elements/common/item/IconCell';\n\nconst ItemListIcon = ({\n archiveType,\n extension,\n type,\n hasCollaborations = false,\n isExternallyOwned = false,\n dimension = 32,\n}) => {\n const rowData = {\n type,\n extension,\n has_collaborations: hasCollaborations,\n is_externally_owned: isExternallyOwned,\n archive_type: archiveType,\n };\n return <IconCell rowData={rowData} dimension={dimension} />;\n};\n\nItemListIcon.propTypes = {\n type: ItemTypePropType,\n extension: PropTypes.string,\n hasCollaborations: PropTypes.bool,\n isExternallyOwned: PropTypes.bool,\n archiveType: ItemArchiveTypePropType,\n};\n\nexport default ItemListIcon;\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,gBAAgB,EAAEC,uBAAuB,QAAQ,eAAe;AACzE,OAAOC,QAAQ,MAAM,wCAAwC;AAE7D,MAAMC,YAAY,GAAGA,CAAC;EAClBC,WAAW;EACXC,SAAS;EACTC,IAAI;EACJC,iBAAiB,GAAG,KAAK;EACzBC,iBAAiB,GAAG,KAAK;EACzBC,SAAS,GAAG;AAChB,CAAC,KAAK;EACF,MAAMC,OAAO,GAAG;IACZJ,IAAI;IACJD,SAAS;IACTM,kBAAkB,EAAEJ,iBAAiB;IACrCK,mBAAmB,EAAEJ,iBAAiB;IACtCK,YAAY,EAAET;EAClB,CAAC;EACD,oBAAON,KAAA,CAAAgB,aAAA,CAACZ,QAAQ;IAACQ,OAAO,EAAEA,OAAQ;IAACD,SAAS,EAAEA;EAAU,CAAE,CAAC;AAC/D,CAAC;AAEDN,YAAY,CAACY,SAAS,GAAG;EACrBT,IAAI,EAAEN,gBAAgB;EACtBK,SAAS,EAAEN,SAAS,CAACiB,MAAM;EAC3BT,iBAAiB,EAAER,SAAS,CAACkB,IAAI;EACjCT,iBAAiB,EAAET,SAAS,CAACkB,IAAI;EACjCb,WAAW,EAAEH;AACjB,CAAC;AAED,eAAeE,YAAY","ignoreList":[]}
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import type { BoxItem } from '../../../common/types/core';
|
|
3
3
|
import './IconCell.scss';
|
|
4
4
|
export interface IconCellProps {
|
|
5
|
-
dimension
|
|
5
|
+
dimension: number;
|
|
6
6
|
rowData: BoxItem;
|
|
7
7
|
}
|
|
8
8
|
declare const IconCell: ({ rowData, dimension }: IconCellProps) => React.JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "box-ui-elements",
|
|
3
|
-
"version": "23.1.0-beta.
|
|
3
|
+
"version": "23.1.0-beta.5",
|
|
4
4
|
"description": "Box UI Elements",
|
|
5
5
|
"author": "Box (https://www.box.com/)",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
@@ -278,7 +278,7 @@
|
|
|
278
278
|
"sass-lint": "^1.13.1",
|
|
279
279
|
"sass-loader": "^8.0.2",
|
|
280
280
|
"scroll-into-view-if-needed": "^2.2.20",
|
|
281
|
-
"semantic-release": "^
|
|
281
|
+
"semantic-release": "^24.2.3",
|
|
282
282
|
"sinon": "^2.3.7",
|
|
283
283
|
"source-map-loader": "^0.2.4",
|
|
284
284
|
"storybook": "^8.2.4",
|
|
@@ -4,7 +4,14 @@ import PropTypes from 'prop-types';
|
|
|
4
4
|
import { ItemTypePropType, ItemArchiveTypePropType } from '../prop-types';
|
|
5
5
|
import IconCell from '../../../elements/common/item/IconCell';
|
|
6
6
|
|
|
7
|
-
const ItemListIcon = ({
|
|
7
|
+
const ItemListIcon = ({
|
|
8
|
+
archiveType,
|
|
9
|
+
extension,
|
|
10
|
+
type,
|
|
11
|
+
hasCollaborations = false,
|
|
12
|
+
isExternallyOwned = false,
|
|
13
|
+
dimension = 32,
|
|
14
|
+
}) => {
|
|
8
15
|
const rowData = {
|
|
9
16
|
type,
|
|
10
17
|
extension,
|
|
@@ -12,7 +19,7 @@ const ItemListIcon = ({ archiveType, extension, type, hasCollaborations = false,
|
|
|
12
19
|
is_externally_owned: isExternallyOwned,
|
|
13
20
|
archive_type: archiveType,
|
|
14
21
|
};
|
|
15
|
-
return <IconCell rowData={rowData} />;
|
|
22
|
+
return <IconCell rowData={rowData} dimension={dimension} />;
|
|
16
23
|
};
|
|
17
24
|
|
|
18
25
|
ItemListIcon.propTypes = {
|
|
@@ -6,11 +6,18 @@ import { render, screen } from '../../../../test-utils/testing-library';
|
|
|
6
6
|
describe('features/content-explorer/item-list/ItemListIcon', () => {
|
|
7
7
|
const renderComponent = props => render(<ItemListIcon {...props} />);
|
|
8
8
|
|
|
9
|
+
const expectIconWithDefaultSize = icon => {
|
|
10
|
+
expect(icon).toBeVisible();
|
|
11
|
+
expect(icon).toHaveAttribute('width', '32');
|
|
12
|
+
expect(icon).toHaveAttribute('height', '32');
|
|
13
|
+
};
|
|
14
|
+
|
|
9
15
|
describe('render()', () => {
|
|
10
16
|
test('should render default file icon', () => {
|
|
11
17
|
renderComponent({});
|
|
12
18
|
|
|
13
|
-
|
|
19
|
+
const fileIcon = screen.getByLabelText('File');
|
|
20
|
+
expectIconWithDefaultSize(fileIcon);
|
|
14
21
|
});
|
|
15
22
|
|
|
16
23
|
test('should render archive icon', () => {
|
|
@@ -22,7 +29,8 @@ describe('features/content-explorer/item-list/ItemListIcon', () => {
|
|
|
22
29
|
};
|
|
23
30
|
renderComponent(rowData);
|
|
24
31
|
|
|
25
|
-
|
|
32
|
+
const archiveIcon = screen.getByLabelText('Archive');
|
|
33
|
+
expectIconWithDefaultSize(archiveIcon);
|
|
26
34
|
});
|
|
27
35
|
|
|
28
36
|
test('should render archived folder icon', () => {
|
|
@@ -34,7 +42,8 @@ describe('features/content-explorer/item-list/ItemListIcon', () => {
|
|
|
34
42
|
};
|
|
35
43
|
renderComponent(rowData);
|
|
36
44
|
|
|
37
|
-
|
|
45
|
+
const archivedFolderIcon = screen.getByLabelText('Archived Folder');
|
|
46
|
+
expectIconWithDefaultSize(archivedFolderIcon);
|
|
38
47
|
});
|
|
39
48
|
|
|
40
49
|
test.each([
|
|
@@ -68,7 +77,8 @@ describe('features/content-explorer/item-list/ItemListIcon', () => {
|
|
|
68
77
|
])('should render $label folder icon', ({ rowData, label }) => {
|
|
69
78
|
renderComponent(rowData);
|
|
70
79
|
|
|
71
|
-
|
|
80
|
+
const folderIcon = screen.getByLabelText(label);
|
|
81
|
+
expectIconWithDefaultSize(folderIcon);
|
|
72
82
|
});
|
|
73
83
|
|
|
74
84
|
test('should render correct file icon', () => {
|
|
@@ -76,14 +86,16 @@ describe('features/content-explorer/item-list/ItemListIcon', () => {
|
|
|
76
86
|
const rowData = { type: 'file', extension };
|
|
77
87
|
renderComponent(rowData);
|
|
78
88
|
|
|
79
|
-
|
|
89
|
+
const fileIcon = screen.getByLabelText('BOXNOTE File');
|
|
90
|
+
expectIconWithDefaultSize(fileIcon);
|
|
80
91
|
});
|
|
81
92
|
|
|
82
93
|
test('should render correct bookmark icon', () => {
|
|
83
94
|
const rowData = { type: 'web_link' };
|
|
84
95
|
renderComponent(rowData);
|
|
85
96
|
|
|
86
|
-
|
|
97
|
+
const bookmarkIcon = screen.getByLabelText('Bookmark');
|
|
98
|
+
expectIconWithDefaultSize(bookmarkIcon);
|
|
87
99
|
});
|
|
88
100
|
});
|
|
89
101
|
});
|