Skip to content

Commit

Permalink
fix(File): file prototype properties are lost with spread operator
Browse files Browse the repository at this point in the history
  • Loading branch information
MartinWeb committed Aug 1, 2023
1 parent 6cdea0a commit db5eaf4
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 47 deletions.
28 changes: 25 additions & 3 deletions packages/Form/Input/file/src/File.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,9 @@ const File = ({
);
};

export type CustomFile<T = File & { preview: string }> = {
export type FilePreview = File & { preview: string };

export type CustomFile<T = FilePreview> = {
id: string;
file: T;
};
Expand All @@ -89,11 +91,31 @@ const handlers = {
) => {
const values = acceptedFiles.map((file) => ({
id: createId(),
file: { ...file, preview: URL.createObjectURL(file) },
file: {
...file,
lastModified: file.lastModified,
name: file.name,
type: file.type,
size: file.size,
stream: file.stream,
arrayBuffer: file.arrayBuffer,
slice: file.slice,
text: file.text,
preview: URL.createObjectURL(file),
},
}));
const errors = rejectedFiles.map((error) => ({
id: createId(),
file: error,
file: {
errors: error.errors,
file: {
...error.file,
lastModified: error.file.lastModified,
name: error.file.name,
type: error.file.type,
size: error.file.size,
} as File,
},
}));
onChange &&
onChange({
Expand Down
23 changes: 19 additions & 4 deletions packages/Form/Input/file/src/__tests__/FileLine.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,20 @@ import React from 'react';
import { render, fireEvent } from '@testing-library/react';

import FileLine, { Preview } from '../FileLine';
import { FilePreview } from '../File';

describe('<File.FileInput>', () => {
it('renders File.FileInput correctly', () => {
const { asFragment } = render(
<FileLine
file={{ ...new File([], 'name'), name: 'name', size: 1, preview: '#' }}
file={
{
...new File([], 'name'),
name: 'name',
size: 1,
preview: '#',
} as FilePreview
}
id="id"
/>
);
Expand All @@ -18,7 +26,14 @@ describe('<File.FileInput>', () => {

const { getByRole } = render(
<FileLine
file={{ ...new File([], 'name'), name: 'name', size: 1, preview: '#' }}
file={
{
...new File([], 'name'),
name: 'name',
size: 1,
preview: '#',
} as FilePreview
}
id="id"
onClick={onClickMock}
/>
Expand All @@ -35,7 +50,7 @@ describe('<File.FileInput>', () => {
preview: '',
size: 2,
};
const { asFragment } = render(<Preview file={file} />);
const { asFragment } = render(<Preview file={file as FilePreview} />);
expect(asFragment()).toMatchSnapshot();
});
it('renders Preview correctly for other type', () => {
Expand All @@ -46,7 +61,7 @@ describe('<File.FileInput>', () => {
preview: '',
size: 2,
};
const { asFragment } = render(<Preview file={file} />);
const { asFragment } = render(<Preview file={file as FilePreview} />);
expect(asFragment()).toMatchSnapshot();
});
});
9 changes: 5 additions & 4 deletions packages/Form/Input/file/src/__tests__/FileTable.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { render } from '@testing-library/react';
import FileTable from '../FileTable';
import { FilePreview } from '../File';

describe('<File.FileTable>', () => {
it('renders File.FileTable correctly', () => {
Expand All @@ -12,7 +13,7 @@ describe('<File.FileTable>', () => {
...new File([], 'youhou.txt'),
name: 'youhou.txt',
size: 2,
},
} as File,
errors: [],
},
]}
Expand All @@ -23,7 +24,7 @@ describe('<File.FileTable>', () => {
name: 'superfile.pdf',
preview: '',
size: 2,
},
} as FilePreview,
id: 'id',
},
]}
Expand All @@ -41,7 +42,7 @@ describe('<File.FileTable>', () => {
...new File([], 'youhou.txt'),
name: 'youhou.txt',
size: 2,
},
} as File,
errors: [],
},
]}
Expand All @@ -63,7 +64,7 @@ describe('<File.FileTable>', () => {
name: 'youhou.txt',
size: 2,
preview: '',
},
} as FilePreview,
id: 'id',
},
]}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,22 @@ exports[`renders MultiSelect correctly 1`] = `
class="css-1f43avz-a11yText-A11yText"
/>
<div
class=" css-1s2u09g-control"
class=" css-13cymwt-control"
>
<div
class=" css-g1d714-ValueContainer"
class=" css-3w2yfm-ValueContainer"
>
<div
class="css-1rhbuit-multiValue"
class=" css-1p3m7a8-multiValue"
>
<div
class="css-12jo7m5"
class=" css-wsp0cs-MultiValueGeneric"
>
For fun
</div>
<div
aria-label="Remove For fun"
class="css-xb97g8"
class=" css-12a83d4-MultiValueRemove"
role="button"
>
<svg
Expand All @@ -49,16 +49,16 @@ exports[`renders MultiSelect correctly 1`] = `
</div>
</div>
<div
class="css-1rhbuit-multiValue"
class=" css-1p3m7a8-multiValue"
>
<div
class="css-12jo7m5"
class=" css-wsp0cs-MultiValueGeneric"
>
For drink
</div>
<div
aria-label="Remove For drink"
class="css-xb97g8"
class=" css-12a83d4-MultiValueRemove"
role="button"
>
<svg
Expand All @@ -76,7 +76,7 @@ exports[`renders MultiSelect correctly 1`] = `
</div>
</div>
<div
class=" css-6j8wv5-Input"
class=" css-qbdosj-Input"
data-value=""
>
<input
Expand All @@ -102,7 +102,7 @@ exports[`renders MultiSelect correctly 1`] = `
>
<div
aria-hidden="true"
class=" css-tlfecz-indicatorContainer"
class=" css-1xc3v61-indicatorContainer"
>
<svg
aria-hidden="true"
Expand All @@ -118,11 +118,11 @@ exports[`renders MultiSelect correctly 1`] = `
</svg>
</div>
<span
class=" css-1okebmr-indicatorSeparator"
class=" css-1u9des2-indicatorSeparator"
/>
<div
aria-hidden="true"
class=" css-tlfecz-indicatorContainer"
class=" css-1xc3v61-indicatorContainer"
>
<svg
aria-hidden="true"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,22 @@ exports[`renders MultiSelect correctly 1`] = `
class="css-1f43avz-a11yText-A11yText"
/>
<div
class=" css-1s2u09g-control"
class=" css-13cymwt-control"
>
<div
class=" css-g1d714-ValueContainer"
class=" css-3w2yfm-ValueContainer"
>
<div
class="css-1rhbuit-multiValue"
class=" css-1p3m7a8-multiValue"
>
<div
class="css-12jo7m5"
class=" css-wsp0cs-MultiValueGeneric"
>
For fun
</div>
<div
aria-label="Remove For fun"
class="css-xb97g8"
class=" css-12a83d4-MultiValueRemove"
role="button"
>
<svg
Expand All @@ -49,16 +49,16 @@ exports[`renders MultiSelect correctly 1`] = `
</div>
</div>
<div
class="css-1rhbuit-multiValue"
class=" css-1p3m7a8-multiValue"
>
<div
class="css-12jo7m5"
class=" css-wsp0cs-MultiValueGeneric"
>
For drink
</div>
<div
aria-label="Remove For drink"
class="css-xb97g8"
class=" css-12a83d4-MultiValueRemove"
role="button"
>
<svg
Expand All @@ -76,7 +76,7 @@ exports[`renders MultiSelect correctly 1`] = `
</div>
</div>
<div
class=" css-6j8wv5-Input"
class=" css-qbdosj-Input"
data-value=""
>
<input
Expand All @@ -102,7 +102,7 @@ exports[`renders MultiSelect correctly 1`] = `
>
<div
aria-hidden="true"
class=" css-tlfecz-indicatorContainer"
class=" css-1xc3v61-indicatorContainer"
>
<svg
aria-hidden="true"
Expand All @@ -118,11 +118,11 @@ exports[`renders MultiSelect correctly 1`] = `
</svg>
</div>
<span
class=" css-1okebmr-indicatorSeparator"
class=" css-1u9des2-indicatorSeparator"
/>
<div
aria-hidden="true"
class=" css-tlfecz-indicatorContainer"
class=" css-1xc3v61-indicatorContainer"
>
<svg
aria-hidden="true"
Expand Down Expand Up @@ -191,22 +191,22 @@ exports[`renders MultiSelectInput correctly 1`] = `
class="css-1f43avz-a11yText-A11yText"
/>
<div
class=" css-1s2u09g-control"
class=" css-13cymwt-control"
>
<div
class=" css-g1d714-ValueContainer"
class=" css-3w2yfm-ValueContainer"
>
<div
class="css-1rhbuit-multiValue"
class=" css-1p3m7a8-multiValue"
>
<div
class="css-12jo7m5"
class=" css-wsp0cs-MultiValueGeneric"
>
For fun
</div>
<div
aria-label="Remove For fun"
class="css-xb97g8"
class=" css-12a83d4-MultiValueRemove"
role="button"
>
<svg
Expand All @@ -224,16 +224,16 @@ exports[`renders MultiSelectInput correctly 1`] = `
</div>
</div>
<div
class="css-1rhbuit-multiValue"
class=" css-1p3m7a8-multiValue"
>
<div
class="css-12jo7m5"
class=" css-wsp0cs-MultiValueGeneric"
>
For drink
</div>
<div
aria-label="Remove For drink"
class="css-xb97g8"
class=" css-12a83d4-MultiValueRemove"
role="button"
>
<svg
Expand All @@ -251,7 +251,7 @@ exports[`renders MultiSelectInput correctly 1`] = `
</div>
</div>
<div
class=" css-6j8wv5-Input"
class=" css-qbdosj-Input"
data-value=""
>
<input
Expand All @@ -277,7 +277,7 @@ exports[`renders MultiSelectInput correctly 1`] = `
>
<div
aria-hidden="true"
class=" css-tlfecz-indicatorContainer"
class=" css-1xc3v61-indicatorContainer"
>
<svg
aria-hidden="true"
Expand All @@ -293,11 +293,11 @@ exports[`renders MultiSelectInput correctly 1`] = `
</svg>
</div>
<span
class=" css-1okebmr-indicatorSeparator"
class=" css-1u9des2-indicatorSeparator"
/>
<div
aria-hidden="true"
class=" css-tlfecz-indicatorContainer"
class=" css-1xc3v61-indicatorContainer"
>
<svg
aria-hidden="true"
Expand Down

0 comments on commit db5eaf4

Please sign in to comment.