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 { useField } from '@formily/react';
|
||||||
import { isString } from '@nocobase/utils/client';
|
import { isString } from '@nocobase/utils/client';
|
||||||
import { Button, Modal, Space } from 'antd';
|
import { Button, Modal, Space } from 'antd';
|
||||||
|
import useUploadStyle from 'antd/es/upload/style';
|
||||||
import cls from 'classnames';
|
import cls from 'classnames';
|
||||||
import { saveAs } from 'file-saver';
|
import { saveAs } from 'file-saver';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
@ -31,6 +32,8 @@ ReadPretty.File = function File(props: UploadProps) {
|
|||||||
const [fileType, setFileType] = useState<'image' | 'pdf'>();
|
const [fileType, setFileType] = useState<'image' | 'pdf'>();
|
||||||
const { size } = props;
|
const { size } = props;
|
||||||
const { wrapSSR, hashId, componentCls: prefixCls } = useStyles();
|
const { wrapSSR, hashId, componentCls: prefixCls } = useStyles();
|
||||||
|
// 加载 antd 的样式
|
||||||
|
useUploadStyle(prefixCls);
|
||||||
|
|
||||||
function closeIFrameModal() {
|
function closeIFrameModal() {
|
||||||
setVisible(false);
|
setVisible(false);
|
||||||
@ -43,7 +46,7 @@ ReadPretty.File = function File(props: UploadProps) {
|
|||||||
`${prefixCls}-wrapper`,
|
`${prefixCls}-wrapper`,
|
||||||
`${prefixCls}-picture-card-wrapper`,
|
`${prefixCls}-picture-card-wrapper`,
|
||||||
`nb-upload`,
|
`nb-upload`,
|
||||||
size ? `${prefixCls}-${size}` : null,
|
size ? `nb-upload-${size}` : null,
|
||||||
hashId,
|
hashId,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@ -174,6 +177,7 @@ ReadPretty.File = function File(props: UploadProps) {
|
|||||||
onCancel={closeIFrameModal}
|
onCancel={closeIFrameModal}
|
||||||
footer={[
|
footer={[
|
||||||
<Button
|
<Button
|
||||||
|
key={'download'}
|
||||||
style={{
|
style={{
|
||||||
textTransform: 'capitalize',
|
textTransform: 'capitalize',
|
||||||
}}
|
}}
|
||||||
@ -186,7 +190,7 @@ ReadPretty.File = function File(props: UploadProps) {
|
|||||||
>
|
>
|
||||||
{t('download')}
|
{t('download')}
|
||||||
</Button>,
|
</Button>,
|
||||||
<Button onClick={closeIFrameModal} style={{ textTransform: 'capitalize' }}>
|
<Button key={'close'} onClick={closeIFrameModal} style={{ textTransform: 'capitalize' }}>
|
||||||
{t('close')}
|
{t('close')}
|
||||||
</Button>,
|
</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', () => {
|
describe('Upload', () => {
|
||||||
it('basic', () => {
|
it('basic', () => {
|
||||||
const { container } = render(<App1 />);
|
render(<App1 />);
|
||||||
expect(container).toMatchSnapshot();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('uploading', () => {
|
it('uploading', () => {
|
||||||
const { container } = render(<App2 />);
|
render(<App2 />);
|
||||||
expect(container).toMatchSnapshot();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -5,6 +5,22 @@ export const useStyles = genStyleHook('upload', (token) => {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
[`${componentCls}-wrapper`]: {
|
[`${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': {
|
'&.nb-upload': {
|
||||||
[`${componentCls}-list-item${componentCls}-list-item-list-type-picture-card`]: {
|
[`${componentCls}-list-item${componentCls}-list-item-list-type-picture-card`]: {
|
||||||
padding: '3px !important',
|
padding: '3px !important',
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user