box-ui-elements 23.1.0-beta.4 → 23.1.0-beta.6
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/i18n/ja-JP.js +2 -2
- package/i18n/ja-JP.properties +2 -2
- 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/i18n/ja-JP.js
CHANGED
|
@@ -710,9 +710,9 @@ export default {
|
|
|
710
710
|
"boxui.readableTime.eventTime": "{time, date, medium}",
|
|
711
711
|
"boxui.readableTime.eventTimeDate": "{time, date, medium} {time, time, short}",
|
|
712
712
|
"boxui.readableTime.eventTimeDateShort": "{date} {time, time, short}",
|
|
713
|
-
"boxui.readableTime.eventTimeToday": "
|
|
713
|
+
"boxui.readableTime.eventTimeToday": "今日、{time, time, short}",
|
|
714
714
|
"boxui.readableTime.eventTimeWeekdayLong": "{weekday}、{time, date, medium}",
|
|
715
|
-
"boxui.readableTime.eventTimeYesterday": "
|
|
715
|
+
"boxui.readableTime.eventTimeYesterday": "昨日、{time, time, short}",
|
|
716
716
|
"boxui.searchForm.clearButtonTitle": "クリア",
|
|
717
717
|
"boxui.searchForm.searchButtonTitle": "検索",
|
|
718
718
|
"boxui.searchForm.searchLabel": "検索クエリ",
|
package/i18n/ja-JP.properties
CHANGED
|
@@ -1421,11 +1421,11 @@ boxui.readableTime.eventTimeDate = {time, date, medium} {time, time, short}
|
|
|
1421
1421
|
# The time that an event occurred at a given date without the year included
|
|
1422
1422
|
boxui.readableTime.eventTimeDateShort = {date} {time, time, short}
|
|
1423
1423
|
# The time that an event occurred today
|
|
1424
|
-
boxui.readableTime.eventTimeToday =
|
|
1424
|
+
boxui.readableTime.eventTimeToday = 今日、{time, time, short}
|
|
1425
1425
|
# The time that an event occurred at a given date with the weekday included
|
|
1426
1426
|
boxui.readableTime.eventTimeWeekdayLong = {weekday}、{time, date, medium}
|
|
1427
1427
|
# The time that an event occurred yesterday
|
|
1428
|
-
boxui.readableTime.eventTimeYesterday =
|
|
1428
|
+
boxui.readableTime.eventTimeYesterday = 昨日、{time, time, short}
|
|
1429
1429
|
# Title for a clear button
|
|
1430
1430
|
boxui.searchForm.clearButtonTitle = クリア
|
|
1431
1431
|
# Title for a search button
|
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.6",
|
|
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
|
});
|