From bfd5644ff0d85165f9fa40873091f98480d503d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=97=E5=B0=8F=E5=8C=97?= <nanxiaobei@gmail.com>
Date: Mon, 18 May 2020 19:22:45 +0800
Subject: [PATCH] Add crop image demo for Upload (#24174)

* chore: add antd-img-crop

* docs: add crop image demo for upload

* fix: move antd-img-crop to devDependencies

* fix: fix eslint warning

* test: update snapshot
---
 .../__tests__/__snapshots__/demo.test.js.snap | 117 ++++++++++++++++++
 components/upload/demo/crop-image.md          |  66 ++++++++++
 package.json                                  |   1 +
 3 files changed, 184 insertions(+)
 create mode 100644 components/upload/demo/crop-image.md

diff --git a/components/upload/__tests__/__snapshots__/demo.test.js.snap b/components/upload/__tests__/__snapshots__/demo.test.js.snap
index f31b48aa3f..3860ae03cf 100644
--- a/components/upload/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/upload/__tests__/__snapshots__/demo.test.js.snap
@@ -106,6 +106,123 @@ exports[`renders ./components/upload/demo/basic.md correctly 1`] = `
 </span>
 `;
 
+exports[`renders ./components/upload/demo/crop-image.md correctly 1`] = `
+<span
+  class="ant-upload-picture-card-wrapper"
+>
+  <div
+    class="ant-upload-list ant-upload-list-picture-card"
+  >
+    <div
+      class="ant-upload-list-picture-card-container"
+    >
+      <span>
+        <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>
+              <a
+                class="ant-upload-list-item-thumbnail"
+                href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <img
+                  alt="image.png"
+                  class="ant-upload-list-item-image"
+                  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+                />
+              </a>
+              <a
+                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+                href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+                rel="noopener noreferrer"
+                target="_blank"
+                title="image.png"
+              >
+                image.png
+              </a>
+            </span>
+          </div>
+          <span
+            class="ant-upload-list-item-actions"
+          >
+            <a
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="Preview file"
+            >
+              <span
+                aria-label="eye"
+                class="anticon anticon-eye"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="eye"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                  />
+                </svg>
+              </span>
+            </a>
+            <span
+              aria-label="delete"
+              class="anticon anticon-delete"
+              role="img"
+              tabindex="-1"
+              title="Remove file"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                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>
+        </div>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-upload ant-upload-select ant-upload-select-picture-card"
+  >
+    <span
+      class="ant-upload"
+      role="button"
+      tabindex="0"
+    >
+      <input
+        accept="image/*"
+        style="display:none"
+        type="file"
+      />
+      + Upload
+    </span>
+  </div>
+</span>
+`;
+
 exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
 <span
   class=""
diff --git a/components/upload/demo/crop-image.md b/components/upload/demo/crop-image.md
new file mode 100644
index 0000000000..13ebaa7772
--- /dev/null
+++ b/components/upload/demo/crop-image.md
@@ -0,0 +1,66 @@
+---
+order: 14
+title:
+  zh-CN: 上传前裁切图片
+  en-US: Crop image before uploading
+---
+
+## zh-CN
+
+配合 [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) 实现上传前裁切图片。
+
+## en-US
+
+Use [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) to crop image before uploading.
+
+```jsx
+import React, { useState } from 'react';
+import { Upload } from 'antd';
+import ImgCrop from 'antd-img-crop';
+
+const Demo = () => {
+  const [fileList, setFileList] = useState([
+    {
+      uid: '-1',
+      name: 'image.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    },
+  ]);
+
+  const onChange = ({ fileList: newFileList }) => {
+    setFileList(newFileList);
+  };
+
+  const onPreview = async file => {
+    let src = file.url;
+    if (!src) {
+      src = await new Promise(resolve => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file.originFileObj);
+        reader.onload = () => resolve(reader.result);
+      });
+    }
+    const image = new Image();
+    image.src = src;
+    const imgWindow = window.open(src);
+    imgWindow.document.write(image.outerHTML);
+  };
+
+  return (
+    <ImgCrop rotate>
+      <Upload
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        listType="picture-card"
+        fileList={fileList}
+        onChange={onChange}
+        onPreview={onPreview}
+      >
+        {fileList.length < 5 && '+ Upload'}
+      </Upload>
+    </ImgCrop>
+  );
+};
+
+ReactDOM.render(<Demo />, mountNode);
+```
diff --git a/package.json b/package.json
index c88d7d0cf3..23fbdbeea4 100644
--- a/package.json
+++ b/package.json
@@ -168,6 +168,7 @@
     "@types/warning": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^2.19.0",
     "@typescript-eslint/parser": "^2.19.0",
+    "antd-img-crop": "^3.1.1",
     "antd-pro-merge-less": "^3.0.3",
     "antd-theme-generator": "^1.1.6",
     "babel-eslint": "^10.0.1",