fix(form): fix ProFormUploadButton listType=picture-card style error (#…

…2483) * fix(form): fix ProFormUploadButton listType=picture-card style error * fix test
ant-design · Apr 14, 2021 · e8aa155 · e8aa155
1 parent 8ea20ab
commit e8aa155
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 7 deletions.
diff --git a/packages/form/src/components/FieldSet/demos/components-other.tsx b/packages/form/src/components/FieldSet/demos/components-other.tsx
@@ -234,6 +234,20 @@ const Demo = () => (
         name="upload"
         label="Upload"
         max={2}
+        fieldProps={{
+          name: 'file',
+        }}
+        action="/upload.do"
+        extra="longgggggggggggggggggggggggggggggggggg"
+      />
+      <ProFormUploadButton
+        name="upload"
+        label="Upload"
+        max={2}
+        fieldProps={{
+          name: 'file',
+          listType: 'picture-card',
+        }}
         action="/upload.do"
         extra="longgggggggggggggggggggggggggggggggggg"
       />

diff --git a/packages/form/src/components/UploadButton/index.tsx b/packages/form/src/components/UploadButton/index.tsx
@@ -45,12 +45,14 @@ const ProFormUploadButton: React.ForwardRefRenderFunction<any, ProFormDraggerPro
   // 如果配置了 max ，并且 超过了文件列表的大小，就不展示按钮
   const showUploadButton =
     (max === undefined || !value || value?.length < max) && proFieldProps?.mode !== 'read';
+
+  const isPictureCard = fieldProps?.listType === 'picture-card';
   return (
     <Upload
       action={action}
       accept={accept}
       ref={ref}
-      //'fileList' 改成和 ant.design 文档中 Update 组件 默认 file字段一样
+      // 'fileList' 改成和 ant.design 文档中 Update 组件 默认 file字段一样
       name={name || 'file'}
       listType={listType || 'picture'}
       fileList={value}
@@ -64,12 +66,17 @@ const ProFormUploadButton: React.ForwardRefRenderFunction<any, ProFormDraggerPro
         }
       }}
     >
-      {showUploadButton && (
-        <Button disabled={disabled || fieldProps?.disabled} {...buttonProps}>
-          {icon}
-          {title}
-        </Button>
-      )}
+      {showUploadButton &&
+        (isPictureCard ? (
+          <span>
+            {icon} {title}
+          </span>
+        ) : (
+          <Button disabled={disabled || fieldProps?.disabled} {...buttonProps}>
+            {icon}
+            {title}
+          </Button>
+        ))}
     </Upload>
   );
 };

diff --git a/tests/form/__snapshots__/demo.test.ts.snap b/tests/form/__snapshots__/demo.test.ts.snap
@@ -1753,6 +1753,84 @@ exports[`form demos 📸 renders ./packages/form/src/components/FieldSet/demos/c
         </div>
       </div>
     </div>
+    <div
+      class="ant-row ant-form-item"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          for="validate_other_upload"
+          title="Upload"
+        >
+          Upload
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-upload-picture-card-wrapper"
+            >
+              <div
+                class="ant-upload-list ant-upload-list-picture-card"
+              >
+                <div
+                  class="ant-upload ant-upload-select ant-upload-select-picture-card"
+                >
+                  <span
+                    class="ant-upload"
+                    role="button"
+                    tabindex="0"
+                  >
+                    <input
+                      accept=""
+                      id="validate_other_upload"
+                      style="display: none;"
+                      type="file"
+                    />
+                    <span>
+                      <span
+                        aria-label="upload"
+                        class="anticon anticon-upload"
+                        role="img"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          data-icon="upload"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          viewBox="64 64 896 896"
+                          width="1em"
+                        >
+                          <path
+                            d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                          />
+                        </svg>
+                      </span>
+                       单击上传
+                    </span>
+                  </span>
+                </div>
+              </div>
+            </span>
+          </div>
+        </div>
+        <div
+          class="ant-form-item-extra"
+        >
+          longgggggggggggggggggggggggggggggggggg
+        </div>
+      </div>
+    </div>
     <div
       class="ant-row ant-form-item"
     >