Skip to content

Commit 04baae5

Browse files
tangjinzhoutangjinzhou
authored
Refactor upload (#5290)
* refactor: vc-upload * refactor: vc-upload * refactor: upload * refactor: upload * refactor: upload
1 parent 3cf5d4f commit 04baae5

Some content is hidden

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

54 files changed

+2879
-1705
lines changed

‎components/components.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ export {
224224
TypographyTitle,
225225
} from './typography';
226226

227-
export type { UploadProps, UploadListProps, UploadChangeParam } from './upload';
227+
export type { UploadProps, UploadListProps, UploadChangeParam, UploadFile } from './upload';
228228

229229
export { default as Upload, UploadDragger } from './upload';
230230

‎components/form/__tests__/__snapshots__/demo.test.js.snap

+11-8
Original file line numberDiff line numberDiff line change
@@ -1535,8 +1535,10 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
15351535
</label></div>
15361536
<div class="ant-col ant-col-14 ant-form-item-control">
15371537
<div class="ant-form-item-control-input">
1538-
<div class="ant-form-item-control-input-content"><span><div class="ant-upload ant-upload-select ant-upload-select-picture"><span role="button" tabindex="0" class="ant-upload"><input id="validate_other_upload" type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Click to upload</span></button></span></div>
1539-
<div class="ant-upload-list ant-upload-list-picture"></div></span>
1538+
<div class="ant-form-item-control-input-content"><span><div class="ant-upload ant-upload-select ant-upload-select-picture"><span tabindex="0" class="ant-upload" role="button"><input id="validate_other_upload" type="file" style="display: none;" accept="" capture="false"><button class="ant-btn" type="button"><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Click to upload</span></button></span></div>
1539+
<div class="ant-upload-list ant-upload-list-picture">
1540+
<!---->
1541+
</div></span>
15401542
</div>
15411543
<!---->
15421544
</div>
@@ -1550,17 +1552,18 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
15501552
</label></div>
15511553
<div class="ant-col ant-col-14 ant-form-item-control">
15521554
<div class="ant-form-item-control-input">
1553-
<div class="ant-form-item-control-input-content"><span><div class="ant-upload ant-upload-drag"><span role="button" tabindex="0" class="ant-upload ant-upload-btn"><input id="validate_other_dragger" type="file" style="display: none;" accept=""><div class="ant-upload-drag-container"><p class="ant-upload-drag-icon"><span role="img" aria-label="inbox" class="anticon anticon-inbox"><svg focusable="false" class="" data-icon="inbox" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"></path></svg></span></p>
1555+
<div class="ant-form-item-control-input-content"><span><div class="ant-upload ant-upload-drag"><span tabindex="0" class="ant-upload ant-upload-btn" role="button"><input id="validate_other_dragger" type="file" style="display: none;" accept="" capture="false"><p class="ant-upload-drag-icon"><span role="img" aria-label="inbox" class="anticon anticon-inbox"><svg focusable="false" class="" data-icon="inbox" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"></path></svg></span></p>
15541556
<p class="ant-upload-text">Click or drag file to this area to upload</p>
1555-
<p class="ant-upload-hint">Support for a single or bulk upload.</p>
1557+
<p class="ant-upload-hint">Support for a single or bulk upload.</p></span>
1558+
</div>
1559+
<div class="ant-upload-list ant-upload-list-text">
1560+
<!---->
15561561
</div></span>
15571562
</div>
1558-
<div class="ant-upload-list ant-upload-list-text"></div></span>
1563+
<!---->
15591564
</div>
15601565
<!---->
1561-
</div>
1562-
<!---->
1563-
<!---->
1566+
<!---->
15641567
</div>
15651568
</div>
15661569
<div class="ant-row ant-form-item">

‎components/locale-provider/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import type { TransferLocale } from '../transfer';
99
import type { PickerLocale as DatePickerLocale } from '../date-picker/generatePicker';
1010
import type { PaginationLocale } from '../pagination/Pagination';
1111
import type { TableLocale } from '../table/interface';
12+
import type { UploadLocale } from '../upload/interface';
1213

1314
interface TransferLocaleForEmpty {
1415
description: string;
@@ -18,7 +19,6 @@ export interface Locale {
1819
Pagination?: PaginationLocale;
1920
Table?: TableLocale;
2021
Popconfirm?: Record<string, any>;
21-
Upload?: Record<string, any>;
2222
Form?: {
2323
optional?: string;
2424
defaultValidateMessages: ValidateMessages;
@@ -32,6 +32,7 @@ export interface Locale {
3232
Modal?: ModalLocale;
3333
Transfer?: Partial<TransferLocale>;
3434
Select?: Record<string, any>;
35+
Upload?: UploadLocale;
3536
Empty?: TransferLocaleForEmpty;
3637
global?: Record<string, any>;
3738
PageHeader?: { back: string };

‎components/space/__tests__/__snapshots__/demo.test.js.snap

+4-2
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,10 @@ exports[`renders ./components/space/demo/base.vue correctly 1`] = `
6161
<!----><span>Button</span>
6262
</button></div>
6363
<!---->
64-
<div class="ant-space-item" style="margin-right: 8px;"><span><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Click to Upload</span></button></span></div>
65-
<div class="ant-upload-list ant-upload-list-text"></div></span>
64+
<div class="ant-space-item" style="margin-right: 8px;"><span><div class="ant-upload ant-upload-select ant-upload-select-text"><span tabindex="0" class="ant-upload" role="button"><input type="file" style="display: none;" accept="" capture="false"><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Click to Upload</span></button></span></div>
65+
<div class="ant-upload-list ant-upload-list-text">
66+
<!---->
67+
</div></span>
6668
</div>
6769
<!---->
6870
<div class="ant-space-item">

‎components/style/themes/default.less

+4
Original file line numberDiff line numberDiff line change
@@ -965,6 +965,10 @@
965965
@typography-title-margin-top: 1.2em;
966966
@typography-title-margin-bottom: 0.5em;
967967

968+
// Upload
969+
// ---
970+
@upload-actions-color: @text-color-secondary;
971+
968972
// Image
969973
// ---
970974
@image-size-base: 48px;

‎components/upload/Dragger.tsx

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
import { defineComponent } from 'vue';
2-
import { getOptionProps, getSlot } from '../_util/props-util';
32
import Upload from './Upload';
43
import { uploadProps } from './interface';
54

65
export default defineComponent({
76
name: 'AUploadDragger',
87
inheritAttrs: false,
9-
props: uploadProps,
10-
render() {
11-
const props = getOptionProps(this);
12-
const { height, ...restProps } = props;
13-
const { style, ...restAttrs } = this.$attrs;
14-
const draggerProps = {
15-
...restProps,
16-
...restAttrs,
17-
type: 'drag',
18-
style: { ...(style as any), height },
19-
} as any;
20-
return <Upload {...draggerProps}>{getSlot(this)}</Upload>;
8+
props: uploadProps(),
9+
setup(props, { slots, attrs }) {
10+
return () => {
11+
const { height, ...restProps } = props;
12+
const { style, ...restAttrs } = attrs;
13+
const draggerProps = {
14+
...restProps,
15+
...restAttrs,
16+
type: 'drag',
17+
style: { ...(style as any), height: typeof height === 'number' ? `${height}px` : height },
18+
} as any;
19+
return <Upload {...draggerProps} v-slots={slots}></Upload>;
20+
};
2121
},
2222
});

0 commit comments

Comments
 (0)