From 0b450f0cdf5925975b28f9c630090e7e2fc3c6e6 Mon Sep 17 00:00:00 2001 From: imoctopus Date: Mon, 28 Mar 2022 12:35:33 +0800 Subject: [PATCH] docs: Upload demo add import React statement --- components/upload/demo/avatar.md | 5 +++-- components/upload/demo/basic.md | 1 + components/upload/demo/crop-image.md | 3 ++- components/upload/demo/customize-progress-bar.md | 1 + components/upload/demo/defaultFileList.md | 1 + components/upload/demo/directory.md | 1 + components/upload/demo/drag-sorting.md | 2 +- components/upload/demo/drag.md | 1 + components/upload/demo/file-type.md | 2 +- components/upload/demo/fileList.md | 3 ++- components/upload/demo/max-count.md | 1 + components/upload/demo/picture-card.md | 2 +- components/upload/demo/picture-style.md | 1 + components/upload/demo/preview-file.md | 1 + components/upload/demo/transform-file.md | 1 + components/upload/demo/upload-custom-action-icon.md | 1 + components/upload/demo/upload-manually.md | 2 +- components/upload/demo/upload-png-only.md | 1 + components/upload/demo/upload-with-aliyun-oss.md | 3 ++- 19 files changed, 24 insertions(+), 9 deletions(-) diff --git a/components/upload/demo/avatar.md b/components/upload/demo/avatar.md index bd64187fb17c..ee4eaaf5508f 100644 --- a/components/upload/demo/avatar.md +++ b/components/upload/demo/avatar.md @@ -18,6 +18,7 @@ Click to upload user's avatar, and validate size and format of picture with `bef > The return value of function `beforeUpload` can be a Promise to check asynchronously. [demo](https://upload-react-component.vercel.app/demo/before-upload#beforeupload) ```tsx +import React, { useState } from 'react'; import { Upload, message } from 'antd'; import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'; import type { UploadChangeParam } from 'antd/es/upload'; @@ -42,8 +43,8 @@ const beforeUpload = (file: RcFile) => { }; const App = () => { - const [loading, setLoading] = React.useState(false); - const [imageUrl, setImageUrl] = React.useState(); + const [loading, setLoading] = useState(false); + const [imageUrl, setImageUrl] = useState(); const handleChange: UploadProps['onChange'] = (info: UploadChangeParam) => { if (info.file.status === 'uploading') { diff --git a/components/upload/demo/basic.md b/components/upload/demo/basic.md index 8c27d505d389..0c9b6d3e3474 100644 --- a/components/upload/demo/basic.md +++ b/components/upload/demo/basic.md @@ -14,6 +14,7 @@ title: Classic mode. File selection dialog pops up when upload button is clicked. ```tsx +import React from 'react'; import { Upload, message, Button } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; import type { UploadProps } from 'antd'; diff --git a/components/upload/demo/crop-image.md b/components/upload/demo/crop-image.md index 8a813bfcccf8..415a1c17841c 100644 --- a/components/upload/demo/crop-image.md +++ b/components/upload/demo/crop-image.md @@ -14,12 +14,13 @@ title: Use [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) to crop image before uploading. ```tsx +import React, { useState } from 'react'; import { Upload } from 'antd'; import ImgCrop from 'antd-img-crop'; import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface'; const App = () => { - const [fileList, setFileList] = React.useState([ + const [fileList, setFileList] = useState([ { uid: '-1', name: 'image.png', diff --git a/components/upload/demo/customize-progress-bar.md b/components/upload/demo/customize-progress-bar.md index 2e3cea761134..5da40087ad82 100644 --- a/components/upload/demo/customize-progress-bar.md +++ b/components/upload/demo/customize-progress-bar.md @@ -14,6 +14,7 @@ title: Use `progress` for customize progress bar. ```tsx +import React from 'react'; import { Upload, message, Button } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; import type { UploadProps } from 'antd'; diff --git a/components/upload/demo/defaultFileList.md b/components/upload/demo/defaultFileList.md index f4a4bd1ee242..e836b8bc5c29 100644 --- a/components/upload/demo/defaultFileList.md +++ b/components/upload/demo/defaultFileList.md @@ -14,6 +14,7 @@ title: Use `defaultFileList` for uploaded files when page init. ```tsx +import React from 'react'; import { Upload, Button } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; import type { UploadProps } from 'antd'; diff --git a/components/upload/demo/directory.md b/components/upload/demo/directory.md index e3b53d8669eb..796fd0ede04c 100644 --- a/components/upload/demo/directory.md +++ b/components/upload/demo/directory.md @@ -14,6 +14,7 @@ title: You can select and upload a whole directory. ```tsx +import React from 'react'; import { Upload, Button } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; diff --git a/components/upload/demo/drag-sorting.md b/components/upload/demo/drag-sorting.md index 4f3294eb71e7..d660aff9fe2f 100644 --- a/components/upload/demo/drag-sorting.md +++ b/components/upload/demo/drag-sorting.md @@ -14,7 +14,7 @@ title: By using `itemRender`, we can integrate upload with react-dnd to implement drag sorting of uploadList. ```tsx -import { useState, useCallback, useRef } from 'react'; +import React, { useState, useCallback, useRef } from 'react'; import { Upload, Button, Tooltip } from 'antd'; import { DndProvider, useDrag, useDrop } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; diff --git a/components/upload/demo/drag.md b/components/upload/demo/drag.md index 4974ac3f4c8e..9e8280f0895f 100644 --- a/components/upload/demo/drag.md +++ b/components/upload/demo/drag.md @@ -18,6 +18,7 @@ You can drag files to a specific area, to upload. Alternatively, you can also up We can upload serveral files at once in modern browsers by giving the input the `multiple` attribute. ```tsx +import React from 'react'; import { Upload, message } from 'antd'; import { InboxOutlined } from '@ant-design/icons'; import type { UploadProps } from 'antd'; diff --git a/components/upload/demo/file-type.md b/components/upload/demo/file-type.md index 2793bacb251b..26721c919a5e 100644 --- a/components/upload/demo/file-type.md +++ b/components/upload/demo/file-type.md @@ -15,7 +15,7 @@ title: Displays the corresponding by default by type icon ```tsx -import { useState } from 'react'; +import React, { useState } from 'react'; import { Upload, Modal } from 'antd'; import { LoadingOutlined, diff --git a/components/upload/demo/fileList.md b/components/upload/demo/fileList.md index eb529afbb8e0..4e476d065052 100644 --- a/components/upload/demo/fileList.md +++ b/components/upload/demo/fileList.md @@ -22,13 +22,14 @@ You can gain full control over filelist by configuring `fileList`. You can accom 2. read from response and show file link. ```tsx +import React, { useState } from 'react'; import { Upload, Button } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; import type { UploadFile } from 'antd/es/upload/interface'; import type { UploadProps } from 'antd'; const App = () => { - const [fileList, setFileList] = React.useState([ + const [fileList, setFileList] = useState([ { uid: '-1', name: 'xxx.png', diff --git a/components/upload/demo/max-count.md b/components/upload/demo/max-count.md index 906fcac805dd..cd140b6a311d 100644 --- a/components/upload/demo/max-count.md +++ b/components/upload/demo/max-count.md @@ -14,6 +14,7 @@ title: Limit files with `maxCount`. Will replace current one when `maxCount` is `1`. ```tsx +import React from 'react'; import { Upload, Button, Space } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md index 860eff512cc2..fc18085bed09 100644 --- a/components/upload/demo/picture-card.md +++ b/components/upload/demo/picture-card.md @@ -14,7 +14,7 @@ title: After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation. ```tsx -import { useState } from 'react'; +import React, { useState } from 'react'; import { Upload, Modal } from 'antd'; import { PlusOutlined } from '@ant-design/icons'; import type { UploadFile } from 'antd/es/upload/interface'; diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md index 694e3f4c6862..ecdad478948a 100644 --- a/components/upload/demo/picture-style.md +++ b/components/upload/demo/picture-style.md @@ -14,6 +14,7 @@ title: If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not support local thumbnail show. Please use `thumbUrl` instead. ```tsx +import React from 'react'; import { Upload, Button } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; import type { UploadFile } from 'antd/es/upload/interface'; diff --git a/components/upload/demo/preview-file.md b/components/upload/demo/preview-file.md index dd92f19efcec..0b5070b5fed9 100644 --- a/components/upload/demo/preview-file.md +++ b/components/upload/demo/preview-file.md @@ -14,6 +14,7 @@ title: Customize local preview. Can handle with non-image format files such as video. ```tsx +import React from 'react'; import { Upload, Button } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; import type { UploadProps } from 'antd'; diff --git a/components/upload/demo/transform-file.md b/components/upload/demo/transform-file.md index c5a8923487e6..412ff3717d6e 100644 --- a/components/upload/demo/transform-file.md +++ b/components/upload/demo/transform-file.md @@ -14,6 +14,7 @@ title: Use `beforeUpload` for transform file before request such as add a watermark. ```tsx +import React from 'react'; import { Upload, Button } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; import type { UploadProps } from 'antd'; diff --git a/components/upload/demo/upload-custom-action-icon.md b/components/upload/demo/upload-custom-action-icon.md index efac645c9b1e..1c78c0d87f05 100644 --- a/components/upload/demo/upload-custom-action-icon.md +++ b/components/upload/demo/upload-custom-action-icon.md @@ -14,6 +14,7 @@ title: Use `showUploadList` for custom action icons of files. ```tsx +import React from 'react'; import { Upload, Button } from 'antd'; import { UploadOutlined, StarOutlined } from '@ant-design/icons'; import type { UploadProps } from 'antd'; diff --git a/components/upload/demo/upload-manually.md b/components/upload/demo/upload-manually.md index b3af6a41c30d..585b99ee30c8 100644 --- a/components/upload/demo/upload-manually.md +++ b/components/upload/demo/upload-manually.md @@ -14,7 +14,7 @@ title: Upload files manually after `beforeUpload` returns `false`. ```tsx -import { useState } from 'react'; +import React, { useState } from 'react'; import { Upload, Button, message } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface'; diff --git a/components/upload/demo/upload-png-only.md b/components/upload/demo/upload-png-only.md index db07867266ea..2b0143326a7f 100644 --- a/components/upload/demo/upload-png-only.md +++ b/components/upload/demo/upload-png-only.md @@ -14,6 +14,7 @@ title: `beforeUpload` only prevent upload behavior when return false or reject promise, the prevented file would still show in file list. Here is the example you can keep prevented files out of list by return `UPLOAD.LIST_IGNORE`. ```tsx +import React from 'react'; import { Upload, Button, message } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; import type { UploadProps } from 'antd'; diff --git a/components/upload/demo/upload-with-aliyun-oss.md b/components/upload/demo/upload-with-aliyun-oss.md index a9b1278491de..edaea7a4c444 100644 --- a/components/upload/demo/upload-with-aliyun-oss.md +++ b/components/upload/demo/upload-with-aliyun-oss.md @@ -14,6 +14,7 @@ title: Use Aliyun OSS upload example. ```tsx +import React, { useState } from 'react'; import { Form, Upload, message, Button } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; import type { UploadProps } from 'antd'; @@ -34,7 +35,7 @@ interface AliyunOSSUploadProps { } const AliyunOSSUpload = ({ value, onChange }: AliyunOSSUploadProps) => { - const [OSSData, setOSSData] = React.useState(); + const [OSSData, setOSSData] = useState(); // Mock get OSS api // https://help.aliyun.com/document_detail/31988.html