GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: migrate less to token for Upload (#42042) 

* feat: migrate less to token for Upload

* feat: recover less variables

* feat: add debug demo

* feat: rename token

* chore: update snapshot

* chore: update snap

---------

Co-authored-by: zhangjianxiong <zhangjx@tsintergy.com>
Co-authored-by: MadCcc <1075746765@qq.com>
pull/42390/merge
Zack Chang 2 years ago
committed by GitHub
parent
3bfb7ac2a0
commit
ccb7251384
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 680 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 298
      components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
  2. 279
      components/upload/__tests__/__snapshots__/demo.test.ts.snap
  3. 7
      components/upload/demo/component-token.md
  4. 53
      components/upload/demo/component-token.tsx
  5. 1
      components/upload/index.en-US.md
  6. 1
      components/upload/index.zh-CN.md
  7. 48
      components/upload/style/index.ts
  8. 2
      components/upload/style/list.ts
  9. 7
      docs/react/migrate-less-variables.en-US.md
  10. 7
      docs/react/migrate-less-variables.zh-CN.md

298
components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -163,6 +163,304 @@ exports[`renders components/upload/demo/basic.tsx extend context correctly 1`] =
</span>
`;
exports[`renders components/upload/demo/component-token.tsx extend context correctly 1`] = `
<span
class="ant-upload-wrapper"
>
<div
class="ant-upload ant-upload-select"
>
<span
class="ant-upload"
role="button"
tabindex="0"
>
<input
accept=""
style="display: none;"
type="file"
/>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="upload"
class="anticon anticon-upload"
role="img"
>
<svg
aria-hidden="true"
data-icon="upload"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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"
/>
</svg>
</span>
</span>
<span>
Upload
</span>
</button>
</span>
</div>
<div
class="ant-upload-list ant-upload-list-text"
>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-uploading"
>
<div
class="ant-upload-icon"
>
<span
aria-label="loading"
class="anticon anticon-loading anticon-spin"
role="img"
>
<svg
aria-hidden="true"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</span>
</div>
<a
class="ant-upload-list-item-name"
href="http://www.baidu.com/xxx.png"
rel="noopener noreferrer"
target="_blank"
title="xxx.png"
>
xxx.png
</a>
<span
class="ant-upload-list-item-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
title="Remove file"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="delete"
class="anticon anticon-delete"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</span>
</span>
</button>
</span>
</div>
</div>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-done"
>
<div
class="ant-upload-icon"
>
<span
aria-label="paper-clip"
class="anticon anticon-paper-clip"
role="img"
>
<svg
aria-hidden="true"
data-icon="paper-clip"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
/>
</svg>
</span>
</div>
<a
class="ant-upload-list-item-name"
href="http://www.baidu.com/yyy.png"
rel="noopener noreferrer"
target="_blank"
title="yyy.png"
>
yyy.png
</a>
<span
class="ant-upload-list-item-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
title="Remove file"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="delete"
class="anticon anticon-delete"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</span>
</span>
</button>
</span>
</div>
</div>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-error"
>
<div
class="ant-upload-icon"
>
<span
aria-label="paper-clip"
class="anticon anticon-paper-clip"
role="img"
>
<svg
aria-hidden="true"
data-icon="paper-clip"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
/>
</svg>
</span>
</div>
<a
class="ant-upload-list-item-name"
href="http://www.baidu.com/zzz.png"
rel="noopener noreferrer"
target="_blank"
title="zzz.png"
>
zzz.png
</a>
<span
class="ant-upload-list-item-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
title="Remove file"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="delete"
class="anticon anticon-delete"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</span>
</span>
</button>
</span>
</div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
>
Server Error 500
</div>
</div>
</div>
</div>
</div>
</span>
`;
exports[`renders components/upload/demo/customize-progress-bar.tsx extend context correctly 1`] = `
<span
class="ant-upload-wrapper"

279
components/upload/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -163,6 +163,285 @@ exports[`renders components/upload/demo/basic.tsx correctly 1`] = `
</span>
`;
exports[`renders components/upload/demo/component-token.tsx correctly 1`] = `
<span
class="ant-upload-wrapper"
>
<div
class="ant-upload ant-upload-select"
>
<span
class="ant-upload"
role="button"
tabindex="0"
>
<input
accept=""
style="display:none"
type="file"
/>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="upload"
class="anticon anticon-upload"
role="img"
>
<svg
aria-hidden="true"
data-icon="upload"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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"
/>
</svg>
</span>
</span>
<span>
Upload
</span>
</button>
</span>
</div>
<div
class="ant-upload-list ant-upload-list-text"
>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-uploading"
>
<div
class="ant-upload-icon"
>
<span
aria-label="loading"
class="anticon anticon-loading anticon-spin"
role="img"
>
<svg
aria-hidden="true"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</span>
</div>
<a
class="ant-upload-list-item-name"
href="http://www.baidu.com/xxx.png"
rel="noopener noreferrer"
target="_blank"
title="xxx.png"
>
xxx.png
</a>
<span
class="ant-upload-list-item-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
title="Remove file"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="delete"
class="anticon anticon-delete"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</span>
</span>
</button>
</span>
</div>
</div>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-done"
>
<div
class="ant-upload-icon"
>
<span
aria-label="paper-clip"
class="anticon anticon-paper-clip"
role="img"
>
<svg
aria-hidden="true"
data-icon="paper-clip"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
/>
</svg>
</span>
</div>
<a
class="ant-upload-list-item-name"
href="http://www.baidu.com/yyy.png"
rel="noopener noreferrer"
target="_blank"
title="yyy.png"
>
yyy.png
</a>
<span
class="ant-upload-list-item-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
title="Remove file"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="delete"
class="anticon anticon-delete"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</span>
</span>
</button>
</span>
</div>
</div>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-error"
>
<div
class="ant-upload-icon"
>
<span
aria-label="paper-clip"
class="anticon anticon-paper-clip"
role="img"
>
<svg
aria-hidden="true"
data-icon="paper-clip"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
/>
</svg>
</span>
</div>
<a
class="ant-upload-list-item-name"
href="http://www.baidu.com/zzz.png"
rel="noopener noreferrer"
target="_blank"
title="zzz.png"
>
zzz.png
</a>
<span
class="ant-upload-list-item-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
title="Remove file"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="delete"
class="anticon anticon-delete"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</span>
</span>
</button>
</span>
</div>
</div>
</div>
</span>
`;
exports[`renders components/upload/demo/customize-progress-bar.tsx correctly 1`] = `
<span
class="ant-upload-wrapper"

7
components/upload/demo/component-token.md
View File

@ -0,0 +1,7 @@
## zh-CN
Component Token Debug.
## en-US
Component Token Debug.

53
components/upload/demo/component-token.tsx
View File

@ -0,0 +1,53 @@
import React from 'react';
import { UploadOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';
import { Button, ConfigProvider, Upload } from 'antd';
const props: UploadProps = {
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
onChange({ file, fileList }) {
if (file.status !== 'uploading') {
console.log(file, fileList);
}
},
defaultFileList: [
{
uid: '1',
name: 'xxx.png',
status: 'uploading',
url: 'http://www.baidu.com/xxx.png',
percent: 33,
},
{
uid: '2',
name: 'yyy.png',
status: 'done',
url: 'http://www.baidu.com/yyy.png',
},
{
uid: '3',
name: 'zzz.png',
status: 'error',
response: 'Server Error 500', // custom error message to show
url: 'http://www.baidu.com/zzz.png',
},
],
};
const App: React.FC = () => (
<ConfigProvider
theme={{
components: {
Upload: {
actionsColor: 'yellow',
},
},
}}
>
<Upload {...props}>
<Button icon={<UploadOutlined />}>Upload</Button>
</Upload>
</ConfigProvider>
);
export default App;

1
components/upload/index.en-US.md
View File

@ -41,6 +41,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
<code src="./demo/drag-sorting.tsx">Drag sorting of uploadList</code>
<code src="./demo/crop-image.tsx">Crop image before uploading</code>
<code src="./demo/customize-progress-bar.tsx">Customize Progress Bar</code>
<code src="./demo/component-token.tsx" debug>Component Token</code>
## API

1
components/upload/index.zh-CN.md
View File

@ -42,6 +42,7 @@ demo:
<code src="./demo/drag-sorting.tsx">上传列表拖拽排序</code>
<code src="./demo/crop-image.tsx">上传前裁切图片</code>
<code src="./demo/customize-progress-bar.tsx">自定义进度条样式</code>
<code src="./demo/component-token.tsx" debug>组件 Token</code>
## API

48
components/upload/style/index.ts
View File

@ -8,7 +8,9 @@ import genRtlStyle from './rtl';
import { resetComponent } from '../../style';
import { genCollapseMotion } from '../../style/motion';
export interface ComponentToken {}
export interface ComponentToken {
actionsColor: string;
}
export interface UploadToken extends FullToken<'Upload'> {
uploadThumbnailSize: number;
@ -43,24 +45,30 @@ const genBaseStyle: GenerateStyle<UploadToken> = (token) => {
};
// ============================== Export ==============================
export default genComponentStyleHook('Upload', (token) => {
const { fontSizeHeading3, fontSize, lineHeight, lineWidth, controlHeightLG } = token;
const listItemHeightSM = Math.round(fontSize * lineHeight);
export default genComponentStyleHook(
'Upload',
(token) => {
const { fontSizeHeading3, fontSize, lineHeight, lineWidth, controlHeightLG } = token;
const listItemHeightSM = Math.round(fontSize * lineHeight);
const uploadToken = mergeToken<UploadToken>(token, {
uploadThumbnailSize: fontSizeHeading3 * 2,
uploadProgressOffset: listItemHeightSM / 2 + lineWidth,
uploadPicCardSize: controlHeightLG * 2.55,
});
const uploadToken = mergeToken<UploadToken>(token, {
uploadThumbnailSize: fontSizeHeading3 * 2,
uploadProgressOffset: listItemHeightSM / 2 + lineWidth,
uploadPicCardSize: controlHeightLG * 2.55,
});
return [
genBaseStyle(uploadToken),
genDraggerStyle(uploadToken),
genPictureStyle(uploadToken),
genPictureCardStyle(uploadToken),
genListStyle(uploadToken),
genMotionStyle(uploadToken),
genRtlStyle(uploadToken),
genCollapseMotion(uploadToken),
];
});
return [
genBaseStyle(uploadToken),
genDraggerStyle(uploadToken),
genPictureStyle(uploadToken),
genPictureCardStyle(uploadToken),
genListStyle(uploadToken),
genMotionStyle(uploadToken),
genRtlStyle(uploadToken),
genCollapseMotion(uploadToken),
];
},
(token) => ({
actionsColor: token.colorTextDescription,
}),
);

2
components/upload/style/list.ts
View File

@ -59,7 +59,7 @@ const genListStyle: GenerateStyle<UploadToken> = (token) => {
},
[iconCls]: {
color: token.colorTextDescription,
color: token.actionsColor,
transition: `all ${token.motionDurationSlow}`,
},

7
docs/react/migrate-less-variables.en-US.md
View File

@ -286,4 +286,9 @@ This document contains the correspondence between all the less variables related
| `@typography-title-margin-top` | `titleMarginTop` | - |
| `@typography-title-margin-bottom` | `titleMarginBottom` | - |
<!-- ### Upload -->
### Upload
<!-- prettier-ignore -->
| Less variables | Component Token | Note |
| --- | --- | --- |
| `@upload-actions-color` | `actionsColor` | - |

7
docs/react/migrate-less-variables.zh-CN.md
View File

@ -284,4 +284,9 @@ title: Less 变量迁移 Design Token
| `@typography-title-margin-top` | `titleMarginTop` | - |
| `@typography-title-margin-bottom` | `titleMarginBottom` | - |
<!-- ### Upload 上传 -->
### Upload 上传
<!-- prettier-ignore -->
| less 变量 | Component Token | 备注 |
| --- | --- | --- |
| `@upload-actions-color` | `actionsColor` | - |

Write Preview
Loading…
Cancel
Save