feature(preview): 增加水印示例和禁止下载示例(XiaoMi#2808)

xiamiao1121 · May 9, 2024 · 4906055 · 4906055
1 parent 9103ff9
commit 4906055
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 15 deletions.
diff --git a/packages/ui/preview/src/Preview.tsx b/packages/ui/preview/src/Preview.tsx
@@ -45,7 +45,7 @@ export const Preview = forwardRef<HTMLDivElement | null, PreviewProps>(
       onClose,
       src,
       previewWatermarkProps,
-      ifAllowDownload = false,
+      ifAllowDownload = true,
     },
     ref
   ) => {
@@ -319,20 +319,7 @@ export const Preview = forwardRef<HTMLDivElement | null, PreviewProps>(
                   </>
                 )}
               </div>
-              <Watermark
-                content={['HiUI', '做中台，就用 HiUI']}
-                style={{
-                  pointerEvents: 'none',
-                  position: 'fixed',
-                  top: 0,
-                  right: 0,
-                  bottom: 0,
-                  left: 0,
-                  zIndex: 2048,
-                }}
-                {...previewWatermarkProps}
-                container={waterMarkElement}
-              />
+              <Watermark {...previewWatermarkProps} container={waterMarkElement} />
             </>
           )}
         </div>

diff --git a/packages/ui/preview/stories/banned.stories.tsx b/packages/ui/preview/stories/banned.stories.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import Preview from '../src'
+import Grid from '@hi-ui/grid'
+
+/**
+ * @title 禁止右键下载
+ */
+export const Banned = () => {
+  const [showIndex, setShowIndex] = React.useState(-1)
+  const [images] = React.useState([
+    'http://i1.mifile.cn/f/i/hiui/docs/card/pic_1.png',
+    'http://i1.mifile.cn/f/i/hiui/docs/card/pic_2.png',
+    'http://i1.mifile.cn/f/i/hiui/docs/card/pic_3.png',
+    'http://i1.mifile.cn/f/i/hiui/docs/card/pic_4.png',
+  ])
+
+  return (
+    <>
+      <h1>Banned</h1>
+      <div className="preview-banned__wrap">
+        <Preview
+          title={`pic_${showIndex}.png`}
+          src={images[showIndex]}
+          visible={showIndex !== -1}
+          ifAllowDownload={false}
+          onClose={() => {
+            setShowIndex(-1)
+          }}
+        />
+
+        <Grid.Row gutter={true}>
+          {images.map((url, index) => {
+            return (
+              <Grid.Col span={4} key={index}>
+                <div>
+                  <img
+                    src={url}
+                    style={{ width: '100%', cursor: 'pointer' }}
+                    onClick={() => {
+                      setShowIndex(index)
+                    }}
+                  />
+                </div>
+              </Grid.Col>
+            )
+          })}
+        </Grid.Row>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/preview/stories/index.stories.tsx b/packages/ui/preview/stories/index.stories.tsx
@@ -3,6 +3,8 @@ import Preview from '../src'
 
 export * from './basic.stories'
 export * from './multiple.stories'
+export * from './watermark.stories'
+export * from './banned.stories'
 
 export default {
   title: 'Data Display/Preview',

diff --git a/packages/ui/preview/stories/watermark.stories.tsx b/packages/ui/preview/stories/watermark.stories.tsx
@@ -0,0 +1,62 @@
+import React from 'react'
+import Preview from '../src'
+import Grid from '@hi-ui/grid'
+
+/**
+ * @title 添加水印
+ */
+export const Watermark = () => {
+  const [showIndex, setShowIndex] = React.useState(-1)
+  const [images] = React.useState([
+    'http://i1.mifile.cn/f/i/hiui/docs/card/pic_1.png',
+    'http://i1.mifile.cn/f/i/hiui/docs/card/pic_2.png',
+    'http://i1.mifile.cn/f/i/hiui/docs/card/pic_3.png',
+    'http://i1.mifile.cn/f/i/hiui/docs/card/pic_4.png',
+  ])
+
+  return (
+    <>
+      <h1>Watermark</h1>
+      <div className="preview-watermark__wrap">
+        <Preview
+          title={`pic_${showIndex}.png`}
+          src={images[showIndex]}
+          visible={showIndex !== -1}
+          onClose={() => {
+            setShowIndex(-1)
+          }}
+          previewWatermarkProps={{
+            content: ['HiUI', '做中台，就用 HiUI'],
+            style: {
+              pointerEvents: 'none',
+              position: 'fixed',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              zIndex: 2048,
+            },
+          }}
+        />
+
+        <Grid.Row gutter={true}>
+          {images.map((url, index) => {
+            return (
+              <Grid.Col span={4} key={index}>
+                <div>
+                  <img
+                    src={url}
+                    style={{ width: '100%', cursor: 'pointer' }}
+                    onClick={() => {
+                      setShowIndex(index)
+                    }}
+                  />
+                </div>
+              </Grid.Col>
+            )
+          })}
+        </Grid.Row>
+      </div>
+    </>
+  )
+}