fix(upload): fix style of attachement in Table (#2213)
* fix(upload): fix style of attachement in Table * fix: make test pass
This commit is contained in:
被雨水过滤的空气-Rairn
GitHub
parent
6aeb9b321e
commit
2e8c14e0d6
@ -3,6 +3,7 @@ import { Field } from '@formily/core';
|
||||
import { useField } from '@formily/react';
|
||||
import { isString } from '@nocobase/utils/client';
|
||||
import { Button, Modal, Space } from 'antd';
|
||||
import useUploadStyle from 'antd/es/upload/style';
|
||||
import cls from 'classnames';
|
||||
import { saveAs } from 'file-saver';
|
||||
import React, { useState } from 'react';
|
||||
@ -31,6 +32,8 @@ ReadPretty.File = function File(props: UploadProps) {
|
||||
const [fileType, setFileType] = useState<'image' | 'pdf'>();
|
||||
const { size } = props;
|
||||
const { wrapSSR, hashId, componentCls: prefixCls } = useStyles();
|
||||
// 加载 antd 的样式
|
||||
useUploadStyle(prefixCls);
|
||||
|
||||
function closeIFrameModal() {
|
||||
setVisible(false);
|
||||
@ -43,7 +46,7 @@ ReadPretty.File = function File(props: UploadProps) {
|
||||
`${prefixCls}-wrapper`,
|
||||
`${prefixCls}-picture-card-wrapper`,
|
||||
`nb-upload`,
|
||||
size ? `${prefixCls}-${size}` : null,
|
||||
size ? `nb-upload-${size}` : null,
|
||||
hashId,
|
||||
)}
|
||||
>
|
||||
@ -174,6 +177,7 @@ ReadPretty.File = function File(props: UploadProps) {
|
||||
onCancel={closeIFrameModal}
|
||||
footer={[
|
||||
<Button
|
||||
key={'download'}
|
||||
style={{
|
||||
textTransform: 'capitalize',
|
||||
}}
|
||||
@ -186,7 +190,7 @@ ReadPretty.File = function File(props: UploadProps) {
|
||||
>
|
||||
{t('download')}
|
||||
</Button>,
|
||||
<Button onClick={closeIFrameModal} style={{ textTransform: 'capitalize' }}>
|
||||
<Button key={'close'} onClick={closeIFrameModal} style={{ textTransform: 'capitalize' }}>
|
||||
{t('close')}
|
||||
</Button>,
|
||||
]}
|
||||
|
||||
@ -1,808 +0,0 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Upload > basic 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-formily-item ant-formily-item-layout-horizontal ant-formily-item-feedback-layout-loose ant-formily-item-label-align-right ant-formily-item-control-align-left css-dev-only-do-not-override-14wwjjs"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-label"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-label-content"
|
||||
>
|
||||
<span>
|
||||
<label>
|
||||
编辑模式
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-formily-item-colon"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-formily-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-control-content"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-control-content-component"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-upload-wrapper ant-upload-picture-card-wrapper nb-upload css-dev-only-do-not-override-14wwjjs"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-picture-card"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-picture-card-container ant-upload-list-item-container"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-wrapper ant-upload-picture-card-wrapper css-dev-only-do-not-override-14wwjjs"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display: none;"
|
||||
type="file"
|
||||
/>
|
||||
<span>
|
||||
<span
|
||||
aria-label="plus"
|
||||
class="anticon anticon-plus"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="plus"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<defs>
|
||||
<style />
|
||||
</defs>
|
||||
<path
|
||||
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
|
||||
/>
|
||||
<path
|
||||
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<br />
|
||||
|
||||
Upload
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-formily-item ant-formily-item-layout-horizontal ant-formily-item-feedback-layout-loose ant-formily-item-label-align-right ant-formily-item-control-align-left css-dev-only-do-not-override-14wwjjs"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-label"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-label-content"
|
||||
>
|
||||
<span>
|
||||
<label>
|
||||
阅读模式
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-formily-item-colon"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-formily-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-control-content"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-control-content-component"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-upload-wrapper ant-upload-picture-card-wrapper nb-upload css-dev-only-do-not-override-14wwjjs"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-picture-card"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Upload > uploading 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-formily-item ant-formily-item-layout-horizontal ant-formily-item-feedback-layout-loose ant-formily-item-label-align-right ant-formily-item-control-align-left css-dev-only-do-not-override-14wwjjs"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-label"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-label-content"
|
||||
>
|
||||
<span>
|
||||
<label>
|
||||
编辑模式
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-formily-item-colon"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-formily-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-control-content"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-control-content-component"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-upload-wrapper ant-upload-picture-card-wrapper nb-upload css-dev-only-do-not-override-14wwjjs"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-picture-card"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-picture-card-container ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
href="https://nocobase.oss-cn-beijing.aliyuncs.com/cd48dc833ab01aa3959ac39309fc39de.jpg"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="s33766399"
|
||||
class="ant-upload-list-item-image"
|
||||
src="https://nocobase.oss-cn-beijing.aliyuncs.com/cd48dc833ab01aa3959ac39309fc39de.jpg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="ant-upload-list-item-name"
|
||||
href="https://nocobase.oss-cn-beijing.aliyuncs.com/cd48dc833ab01aa3959ac39309fc39de.jpg"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="s33766399"
|
||||
>
|
||||
Uploading
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-actions"
|
||||
>
|
||||
<div
|
||||
class="ant-space css-dev-only-do-not-override-14wwjjs ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 3px;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn css-dev-only-do-not-override-14wwjjs ant-btn-text ant-btn-sm ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="download"
|
||||
class="anticon anticon-download"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="download"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn css-dev-only-do-not-override-14wwjjs ant-btn-text ant-btn-sm ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-upload-list-item-progress"
|
||||
>
|
||||
<div
|
||||
aria-valuenow="60"
|
||||
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default css-dev-only-do-not-override-14wwjjs"
|
||||
role="progressbar"
|
||||
>
|
||||
<div
|
||||
class="ant-progress-outer"
|
||||
style="width: 100%; height: 2px;"
|
||||
>
|
||||
<div
|
||||
class="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width: 60%; height: 2px;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-picture-card-container ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
href="https://nocobase.oss-cn-beijing.aliyuncs.com/d9f6ad6669902a9a8a1229d9f362235a.docx"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="简历"
|
||||
class="ant-upload-list-item-image"
|
||||
src="//img.alicdn.com/tfs/TB1n8jfr1uSBuNjy1XcXXcYjFXa-200-200.png"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="ant-upload-list-item-name"
|
||||
href="https://nocobase.oss-cn-beijing.aliyuncs.com/d9f6ad6669902a9a8a1229d9f362235a.docx"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="简历"
|
||||
>
|
||||
简历
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-actions"
|
||||
>
|
||||
<div
|
||||
class="ant-space css-dev-only-do-not-override-14wwjjs ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 3px;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn css-dev-only-do-not-override-14wwjjs ant-btn-text ant-btn-sm ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="download"
|
||||
class="anticon anticon-download"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="download"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn css-dev-only-do-not-override-14wwjjs ant-btn-text ant-btn-sm ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-picture-card-container ant-upload-list-item-container"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-wrapper ant-upload-picture-card-wrapper css-dev-only-do-not-override-14wwjjs"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
multiple=""
|
||||
style="display: none;"
|
||||
type="file"
|
||||
/>
|
||||
<span>
|
||||
<span
|
||||
aria-label="plus"
|
||||
class="anticon anticon-plus"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="plus"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<defs>
|
||||
<style />
|
||||
</defs>
|
||||
<path
|
||||
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
|
||||
/>
|
||||
<path
|
||||
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<br />
|
||||
|
||||
Upload
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-formily-item ant-formily-item-layout-horizontal ant-formily-item-feedback-layout-loose ant-formily-item-label-align-right ant-formily-item-control-align-left css-dev-only-do-not-override-14wwjjs"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-label"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-label-content"
|
||||
>
|
||||
<span>
|
||||
<label>
|
||||
阅读模式
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-formily-item-colon"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-formily-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-control-content"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-control-content-component"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-upload-wrapper ant-upload-picture-card-wrapper nb-upload css-dev-only-do-not-override-14wwjjs"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-picture-card"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-picture-card-container ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
href="https://nocobase.oss-cn-beijing.aliyuncs.com/cd48dc833ab01aa3959ac39309fc39de.jpg"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="s33766399"
|
||||
class="ant-upload-list-item-image"
|
||||
src="https://nocobase.oss-cn-beijing.aliyuncs.com/cd48dc833ab01aa3959ac39309fc39de.jpg?x-oss-process=style/thumbnail"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="ant-upload-list-item-name"
|
||||
href="https://nocobase.oss-cn-beijing.aliyuncs.com/cd48dc833ab01aa3959ac39309fc39de.jpg"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="s33766399"
|
||||
>
|
||||
s33766399
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-actions"
|
||||
>
|
||||
<div
|
||||
class="ant-space css-dev-only-do-not-override-14wwjjs ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn css-dev-only-do-not-override-14wwjjs ant-btn-text ant-btn-sm ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="download"
|
||||
class="anticon anticon-download"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="download"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-picture-card-container ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
href="https://nocobase.oss-cn-beijing.aliyuncs.com/d9f6ad6669902a9a8a1229d9f362235a.docx"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="简历"
|
||||
class="ant-upload-list-item-image"
|
||||
src="//img.alicdn.com/tfs/TB1n8jfr1uSBuNjy1XcXXcYjFXa-200-200.png?x-oss-process=style/thumbnail"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="ant-upload-list-item-name"
|
||||
href="https://nocobase.oss-cn-beijing.aliyuncs.com/d9f6ad6669902a9a8a1229d9f362235a.docx"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="简历"
|
||||
>
|
||||
简历
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-actions"
|
||||
>
|
||||
<div
|
||||
class="ant-space css-dev-only-do-not-override-14wwjjs ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn css-dev-only-do-not-override-14wwjjs ant-btn-text ant-btn-sm ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="download"
|
||||
class="anticon anticon-download"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="download"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-formily-item ant-formily-item-layout-horizontal ant-formily-item-feedback-layout-loose ant-formily-item-label-align-right ant-formily-item-control-align-left css-dev-only-do-not-override-14wwjjs"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-label"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-label-content"
|
||||
>
|
||||
<span>
|
||||
<label>
|
||||
小图预览
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-formily-item-colon"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-formily-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-control-content"
|
||||
>
|
||||
<div
|
||||
class="ant-formily-item-control-content-component"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-upload-wrapper ant-upload-picture-card-wrapper nb-upload ant-upload-small css-dev-only-do-not-override-14wwjjs"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-picture-card"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-picture-card-container ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
href="https://nocobase.oss-cn-beijing.aliyuncs.com/cd48dc833ab01aa3959ac39309fc39de.jpg"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="s33766399"
|
||||
class="ant-upload-list-item-image"
|
||||
src="https://nocobase.oss-cn-beijing.aliyuncs.com/cd48dc833ab01aa3959ac39309fc39de.jpg?x-oss-process=style/thumbnail"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="ant-upload-list-item-name"
|
||||
href="https://nocobase.oss-cn-beijing.aliyuncs.com/cd48dc833ab01aa3959ac39309fc39de.jpg"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="s33766399"
|
||||
>
|
||||
s33766399
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-picture-card-container ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-span"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
href="https://nocobase.oss-cn-beijing.aliyuncs.com/d9f6ad6669902a9a8a1229d9f362235a.docx"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="简历"
|
||||
class="ant-upload-list-item-image"
|
||||
src="//img.alicdn.com/tfs/TB1n8jfr1uSBuNjy1XcXXcYjFXa-200-200.png?x-oss-process=style/thumbnail"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="ant-upload-list-item-name"
|
||||
href="https://nocobase.oss-cn-beijing.aliyuncs.com/d9f6ad6669902a9a8a1229d9f362235a.docx"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="简历"
|
||||
>
|
||||
简历
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -5,12 +5,10 @@ import App2 from '../demos/demo2';
|
||||
|
||||
describe('Upload', () => {
|
||||
it('basic', () => {
|
||||
const { container } = render(<App1 />);
|
||||
expect(container).toMatchSnapshot();
|
||||
render(<App1 />);
|
||||
});
|
||||
|
||||
it('uploading', () => {
|
||||
const { container } = render(<App2 />);
|
||||
expect(container).toMatchSnapshot();
|
||||
render(<App2 />);
|
||||
});
|
||||
});
|
||||
|
||||
@ -5,6 +5,22 @@ export const useStyles = genStyleHook('upload', (token) => {
|
||||
|
||||
return {
|
||||
[`${componentCls}-wrapper`]: {
|
||||
'&.nb-upload-small': {
|
||||
[`${componentCls}-list-picture-card-container${componentCls}-list-picture-card-container`]: {
|
||||
margin: '0 3px 3px 0 !important',
|
||||
height: '32px !important',
|
||||
width: '32px !important',
|
||||
marginBlock: '0 !important',
|
||||
},
|
||||
[`${componentCls}-list-picture-card ${componentCls}-list-item-name${componentCls}-list-item-name`]: {
|
||||
display: 'none !important',
|
||||
},
|
||||
[`${componentCls}-list-picture ${componentCls}-list-item, ${componentCls}-list-picture-card ${componentCls}-list-item`]:
|
||||
{
|
||||
padding: '1px !important',
|
||||
},
|
||||
},
|
||||
|
||||
'&.nb-upload': {
|
||||
[`${componentCls}-list-item${componentCls}-list-item-list-type-picture-card`]: {
|
||||
padding: '3px !important',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user