docs(FileInput): 增加图片预览示例 #601 (#609)

uiwjs · Mar 4, 2022 · faf5ddc · faf5ddc
1 parent bbcd910
commit faf5ddc
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 6 deletions.
diff --git a/packages/react-file-input/README.md b/packages/react-file-input/README.md
@@ -107,6 +107,48 @@ ReactDOM.render(
 );
 ```
 
+### 图片预览
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { FileInput, Overlay } from 'uiw';
+
+const Demo=()=>{
+  const [visible,visibleSet]=React.useState(false)
+  const [curfile,curFileSet]=React.useState(null)
+  console.log('curfile',curfile)
+
+   return(
+     <>
+      <Overlay
+        isOpen={visible}
+        onClosed={()=>visibleSet(false)}
+      >
+        <img src={`${curfile?.dataURL}`} alt={`${curfile?.name}`} />
+      </Overlay>
+      <FileInput
+        uploadType="picture"
+        size="large"
+        onPreview={(file) =>{
+          visibleSet(true)
+          curFileSet(file)
+        }}
+        value={[
+          { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
+        ]}
+      >
+        <Icon type="plus" />
+      </FileInput>
+    </>
+   )
+}
+
+ReactDOM.render(<Demo/>   ,_mount_
+);
+```
+
 ### 图片列表样式
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
@@ -173,12 +215,12 @@ import { Form, Row, Col, Icon } from 'uiw';
 
 ReactDOM.render(
   <div>
-    <Form 
+    <Form
       fields={{
         picture1: {
           label: '图片墙',
           initialValue: [
-            { 
+            {
               dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'
             }
           ],
@@ -191,7 +233,7 @@ ReactDOM.render(
         picture2: {
           label: '图片列表',
           initialValue: [
-            { 
+            {
               dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'
             }
           ],
@@ -238,7 +280,7 @@ ReactDOM.render(
 );
 ```
 
-## Props 
+## Props
 
 - `uploadType: input` 基础输入框上传
 

diff --git a/website/src/routes/components/file-input/index.tsx b/website/src/routes/components/file-input/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { FileInput, Button, Icon, Form, Row, Col } from 'uiw';
+import { FileInput, Overlay, Button, Icon, Form, Row, Col } from 'uiw';
 import Markdown from '../../../components/Markdown';
 
 export default function Page() {
   return (
     <Markdown
       path="https://github.com/uiwjs/uiw/tree/master/packages/react-file-input/README.md"
-      dependencies={{ FileInput, Button, Icon, Form, Row, Col }}
+      dependencies={{ FileInput, Button, Overlay, Icon, Form, Row, Col }}
       renderPage={async () => {
         const md = await import('uiw/node_modules/@uiw/react-file-input/README.md');
         return md.default || md;