Skip to content

Commit fd0d762

Browse files
marker-daomarker dao ®
marker-dao
and
marker dao ®
authored
Chat: Use getFileSize from FU to display size in File (#31471)
Co-authored-by: marker dao ® <[email protected]>
1 parent 0e74928 commit fd0d762

File tree

5 files changed

+124
-39
lines changed

5 files changed

+124
-39
lines changed

‎packages/devextreme/js/__internal/ui/chat/file_view/file.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import type { DOMComponentProperties } from '@ts/core/widget/dom_component';
1212
import DOMComponent from '@ts/core/widget/dom_component';
1313
import type { OptionChanged } from '@ts/core/widget/types';
1414
import type { ButtonProps as ButtonProperties } from '@ts/ui/button/button';
15-
import { getFileIconName } from '@ts/ui/file_uploader/file_uploader.utils';
15+
import { getFileIconName, getFileSize } from '@ts/ui/file_uploader/file_uploader.utils';
1616

1717
export type Properties = DOMComponentProperties<File> & {
1818
activeStateEnabled?: boolean;
@@ -109,7 +109,7 @@ class File extends DOMComponent<File, Properties> {
109109
const { data } = this.option();
110110
const { size } = data;
111111

112-
const text = `${size} B`;
112+
const text = getFileSize(size);
113113

114114
const $size = $('<div>')
115115
.addClass(CHAT_FILE_SIZE_CLASS)

‎packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts‎

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,10 @@ import type {
3434
LoadedFileData,
3535
MouseLikeEvent,
3636
} from '@ts/ui/file_uploader/file_uploader.types';
37-
import { getFileIconName } from '@ts/ui/file_uploader/file_uploader.utils';
37+
import {
38+
getFileIconName,
39+
getFileSize,
40+
} from '@ts/ui/file_uploader/file_uploader.utils';
3841

3942
const window = getWindow();
4043

@@ -705,7 +708,7 @@ class FileUploader extends Editor<FileUploaderProperties> {
705708
if (isDefined(value.size)) {
706709
$('<div>')
707710
.addClass(FILEUPLOADER_FILE_SIZE_CLASS)
708-
.text(this._getFileSize(value.size))
711+
.text(getFileSize(value.size))
709712
.appendTo($fileInfo);
710713
}
711714

@@ -915,26 +918,6 @@ class FileUploader extends Editor<FileUploaderProperties> {
915918
return files.some((file) => !file.isValid());
916919
}
917920

918-
_getFileSize(size: number): string {
919-
const labels = [
920-
messageLocalization.format('dxFileUploader-bytes'),
921-
messageLocalization.format('dxFileUploader-kb'),
922-
messageLocalization.format('dxFileUploader-Mb'),
923-
messageLocalization.format('dxFileUploader-Gb'),
924-
];
925-
926-
const count = labels.length - 1;
927-
let value = size;
928-
let i = 0;
929-
930-
while (i < count && value >= 1024) {
931-
value /= 1024;
932-
i += 1;
933-
}
934-
935-
return `${Math.round(value)} ${labels[i]}`;
936-
}
937-
938921
_renderSelectButton(): void {
939922
const $button = $('<div>')
940923
.addClass(FILEUPLOADER_BUTTON_CLASS)

‎packages/devextreme/js/__internal/ui/file_uploader/file_uploader.utils.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
/* eslint-disable spellcheck/spell-checker */
22

3+
import messageLocalization from '@js/common/core/localization/message';
4+
35
type IconName = 'image' | 'video' | 'music' | 'pdffile' | 'textdocument' | 'exportxlsx' | 'folder' | 'file';
46

57
const EXTENTIONS_MAP: Record<string, IconName> = {
@@ -48,3 +50,24 @@ export const getFileIconName = (filename = ''): IconName => {
4850
const extension = filename.slice(lastDotIndex + 1).toLowerCase();
4951
return EXTENTIONS_MAP[extension] || DEFAULT_ICON;
5052
};
53+
54+
export const getFileSize = (sizeInBytes: number): string => {
55+
const labels = [
56+
messageLocalization.format('dxFileUploader-bytes'),
57+
messageLocalization.format('dxFileUploader-kb'),
58+
messageLocalization.format('dxFileUploader-Mb'),
59+
messageLocalization.format('dxFileUploader-Gb'),
60+
];
61+
62+
const count = labels.length - 1;
63+
64+
let value = sizeInBytes;
65+
let i = 0;
66+
67+
while (i < count && value >= 1024) {
68+
value /= 1024;
69+
i += 1;
70+
}
71+
72+
return `${Math.round(value)} ${labels[i]}`;
73+
};

‎packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/file.markup.tests.js‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -89,18 +89,16 @@ QUnit.module('File', moduleConfig, () => {
8989
});
9090

9191
QUnit.test('size element should display correct text', function(assert) {
92-
const fileSize = 5120;
93-
9492
this.reinit({
9593
data: {
9694
name: 'image.png',
97-
size: fileSize,
95+
size: 5120,
9896
},
9997
});
10098

10199
const $size = this.$element.find(`.${CHAT_FILE_SIZE_CLASS}`);
102100

103-
assert.strictEqual($size.text(), `${fileSize} B`, 'size text is correct');
101+
assert.strictEqual($size.text(), '5 KB', 'size text is correct');
104102
});
105103

106104
QUnit.test('name element should have title attribute', function(assert) {
@@ -119,18 +117,16 @@ QUnit.module('File', moduleConfig, () => {
119117
});
120118

121119
QUnit.test('size element should have title attribute', function(assert) {
122-
const fileSize = 9999;
123-
124120
this.reinit({
125121
data: {
126122
name: 'file.txt',
127-
size: fileSize,
123+
size: 9999,
128124
},
129125
});
130126

131127
const $size = this.$element.find(`.${CHAT_FILE_SIZE_CLASS}`);
132128

133-
assert.strictEqual($size.attr('title'), `${fileSize} B`, 'title attribute is set');
129+
assert.strictEqual($size.attr('title'), '10 KB', 'title attribute is set');
134130
});
135131
});
136132

@@ -147,7 +143,7 @@ QUnit.module('File', moduleConfig, () => {
147143
const $size = this.$element.find(`.${CHAT_FILE_SIZE_CLASS}`);
148144

149145
assert.strictEqual($name.text(), newData.name, 'name is updated');
150-
assert.strictEqual($size.text(), `${newData.size} B`, 'size is updated');
146+
assert.strictEqual($size.text(), '10 KB', 'size is updated');
151147
});
152148
});
153149
});

‎packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/file.tests.js‎

Lines changed: 89 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,20 +86,103 @@ QUnit.module('File', moduleConfig, () => {
8686
assert.strictEqual($nameElement.attr('title'), fileName, 'file name is in title attribute');
8787
});
8888

89-
QUnit.test('should display file size correctly', function(assert) {
90-
const fileSize = 5120;
89+
QUnit.test('should display file size in bytes for small files (< 1 KB)', function(assert) {
90+
const fileSize = 512;
9191

9292
this.reinit({
9393
data: {
94-
name: 'image.png',
94+
name: 'small.txt',
9595
size: fileSize,
9696
},
9797
});
9898

9999
const $sizeElement = this.$element.find(`.${CHAT_FILE_SIZE_CLASS}`);
100-
const expectedText = `${fileSize} B`;
100+
const expectedText = `${fileSize} bytes`;
101101

102-
assert.strictEqual($sizeElement.text(), expectedText, 'file size is displayed');
102+
assert.strictEqual($sizeElement.text(), expectedText, 'file size is displayed in bytes');
103+
assert.strictEqual($sizeElement.attr('title'), expectedText, 'file size is in title attribute');
104+
});
105+
106+
QUnit.test('should display file size in KB for files >= 1 KB and < 1 MB', function(assert) {
107+
const fileSize = 1024 * 5.5; // 5.5 KB
108+
109+
this.reinit({
110+
data: {
111+
name: 'medium.txt',
112+
size: fileSize,
113+
},
114+
});
115+
116+
const $sizeElement = this.$element.find(`.${CHAT_FILE_SIZE_CLASS}`);
117+
const expectedText = '6 KB';
118+
119+
assert.strictEqual($sizeElement.text(), expectedText, 'file size is displayed in KB with rounding');
120+
assert.strictEqual($sizeElement.attr('title'), expectedText, 'file size is in title attribute');
121+
});
122+
123+
QUnit.test('should display file size in MB for files >= 1 MB and < 1 GB', function(assert) {
124+
const fileSize = 1024 * 1024 * 2.7; // 2.7 MB
125+
126+
this.reinit({
127+
data: {
128+
name: 'large.zip',
129+
size: fileSize,
130+
},
131+
});
132+
133+
const $sizeElement = this.$element.find(`.${CHAT_FILE_SIZE_CLASS}`);
134+
const expectedText = '3 MB';
135+
136+
assert.strictEqual($sizeElement.text(), expectedText, 'file size is displayed in MB with rounding');
137+
assert.strictEqual($sizeElement.attr('title'), expectedText, 'file size is in title attribute');
138+
});
139+
140+
QUnit.test('should display file size in GB for files >= 1 GB', function(assert) {
141+
const fileSize = 1024 * 1024 * 1024 * 1.3; // 1.3 GB
142+
143+
this.reinit({
144+
data: {
145+
name: 'huge.iso',
146+
size: fileSize,
147+
},
148+
});
149+
150+
const $sizeElement = this.$element.find(`.${CHAT_FILE_SIZE_CLASS}`);
151+
const expectedText = '1 GB';
152+
153+
assert.strictEqual($sizeElement.text(), expectedText, 'file size is displayed in GB with rounding');
154+
assert.strictEqual($sizeElement.attr('title'), expectedText, 'file size is in title attribute');
155+
});
156+
157+
QUnit.test('should display 0 B for zero size', function(assert) {
158+
this.reinit({
159+
data: {
160+
name: 'empty.txt',
161+
size: 0,
162+
},
163+
});
164+
165+
const $sizeElement = this.$element.find(`.${CHAT_FILE_SIZE_CLASS}`);
166+
const expectedText = '0 bytes';
167+
168+
assert.strictEqual($sizeElement.text(), expectedText, 'zero size is displayed as 0 bytes');
169+
assert.strictEqual($sizeElement.attr('title'), expectedText, 'zero size is in title attribute');
170+
});
171+
172+
QUnit.test('should display exactly 1 KB for 1024 bytes', function(assert) {
173+
const fileSize = 1024;
174+
175+
this.reinit({
176+
data: {
177+
name: 'exact-kb.txt',
178+
size: fileSize,
179+
},
180+
});
181+
182+
const $sizeElement = this.$element.find(`.${CHAT_FILE_SIZE_CLASS}`);
183+
const expectedText = '1 KB';
184+
185+
assert.strictEqual($sizeElement.text(), expectedText, 'exact 1024 bytes is displayed as 1 KB');
103186
assert.strictEqual($sizeElement.attr('title'), expectedText, 'file size is in title attribute');
104187
});
105188

@@ -115,7 +198,7 @@ QUnit.module('File', moduleConfig, () => {
115198
const $sizeElement = this.$element.find(`.${CHAT_FILE_SIZE_CLASS}`);
116199

117200
assert.strictEqual($nameElement.text(), newData.name, 'new file name is displayed');
118-
assert.strictEqual($sizeElement.text(), `${newData.size} B`, 'new file size is displayed');
201+
assert.strictEqual($sizeElement.text(), '10 KB', 'new file size is displayed with correct formatting');
119202
});
120203
});
121204

0 commit comments

Comments
 (0)