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:
		
							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