react-photo-view - npm Package Compare versions

Comparing version 0.3.4 to 0.3.5

dist/components/SlideWrap.d.ts

 import React from 'react';
 import './SlideWrap.less';
-declare const SlideWrap: React.FC<{
-    className?: string;
-}>;
+declare const SlideWrap: React.FC<React.HTMLAttributes<HTMLDivElement>>;
 export default SlideWrap;

dist/Photo.d.ts

@@ -6,8 +6,5 @@ import React from 'react';
     loaded: boolean;
-    naturalWidth: number;
-    naturalHeight: number;
     width: number;
     height: number;
     className?: string;
-    onPhotoResize?: () => void;
     onImageLoad: (PhotoParams: any, callback?: Function) => void;
@@ -17,19 +14,3 @@ loadingElement?: JSX.Element;
 }
-declare type PhotoState = {
-    broken: boolean;
-};
-export default class Photo extends React.PureComponent<IPhotoProps, PhotoState> {
-    static displayName: string;
-    readonly state: {
-        broken: boolean;
-    };
-    private isMount;
-    constructor(props: IPhotoProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    handleImageLoaded: (e: any) => void;
-    handleImageBroken: () => void;
-    handleResize: () => void;
-    render(): JSX.Element | null;
-}
-export {};
+declare const Photo: React.FC<IPhotoProps>;
+export default Photo;

dist/PhotoSlider.d.ts

@@ -15,2 +15,3 @@ import React from 'react';
     touched: boolean;
+    shouldTransition: boolean;
     lastClientX: number | undefined;
@@ -36,2 +37,3 @@ lastClientY: number | undefined;
     componentDidMount(): void;
+    componentWillUnmount(): void;
     handleClose: () => void;
@@ -41,5 +43,8 @@ handlePhotoTap: () => void;
     handleResize: () => void;
+    handleKeyDown: (evt: KeyboardEvent) => void;
     handleReachVerticalMove: (clientY: any, scale: any) => void;
     handleReachHorizontalMove: (clientX: any) => void;
-    handleIndexChange: (photoIndex: number) => void;
+    handleIndexChange: (photoIndex: number, shouldTransition?: boolean) => void;
+    handlePrevious: (shouldTransition?: boolean | undefined) => void;
+    handleNext: (shouldTransition?: boolean | undefined) => void;
     handleReachMove: (reachState: ReachTypeEnum, clientX: number, clientY: number, scale?: number | undefined) => void;
@@ -46,0 +51,0 @@ handleReachUp: (clientX: number, clientY: number) => void;

dist/PhotoView.d.ts

@@ -17,2 +17,3 @@ import React from 'react';
     onPhotoResize?: () => void;
+    isActive: boolean;
     showAnimateType?: ShowAnimateEnum;
@@ -68,2 +69,3 @@ originRect?: OriginRectType;
     handleImageLoad: (imageParams: any) => void;
+    handleResize: () => void;
     handleStart: (clientX: number, clientY: number, touchLength?: number) => void;
@@ -70,0 +72,0 @@ onMove: (newClientX: number, newClientY: number, touchLength?: number) => void;

package.json

 {
   "name": "react-photo-view",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "React photo preview.",
@@ -18,3 +18,4 @@ "author": "MinJieLiu",
     "photo",
-    "photo-view"
+    "photo-view",
+    "gallery"
   ],
@@ -21,0 +22,0 @@ "engines": {

README.md

 # react-photo-view
 
-### Usage
+一款基于 `React` 的图片预览组件
+
+[![npm](https://img.shields.io/npm/v/react-photo-view.svg?style=flat-square)](https://www.npmjs.com/package/react-photo-view)
+[![npm](https://img.shields.io/npm/dt/react-photo-view.svg?style=flat-square)](https://github.com/MinJieLiu/react-photo-view)
+
+Demo: [https://minjieliu.github.io/react-photo-view](https://minjieliu.github.io/react-photo-view)
+
+### 特性
+
+ 1. 支持基本手势：左右切换、下滑关闭、双击放大/缩小、双指控制、拖动平移、键盘控制、点击切换控件等
+ 1. 打开/关闭缩放动画
+ 1. 自适应图像适应
+ 1. 支持桌面端/移动端
+ 1. 轻量的体积
+ 1. 高度的扩展性
+ 1. 基于 typescript 友好的语法提示
+
+
+## 开始使用
+
+    yarn add react-photo-view
+
+基本:
+
+```js
+import { PhotoProvider, PhotoConsumer } from 'react-photo-view';
+import 'react-photo-view/dist/index.css';
+
+function ImageView() {
+  return (
+    <PhotoProvider>
+      {photoImages.map((item, index) => (
+        <PhotoConsumer key={index} src={item} intro={item}>
+          <img src={item} alt="" />
+        </PhotoConsumer>
+      ))}
+    </PhotoProvider>
+  );
+}
+```
+
+### API
+
+#### PhotoProvider
+
+| 名称 | 类型 | 必选 | 描述 |
+| :--- | :--- | :--- | :--- |
+| children | React.ReactNode | 是 |  |
+| maskClosable | boolean | 否 | 背景可点击关闭，默认 true |
+| photoClosable | boolean | 否 | 图片点击可关闭，默认 false |
+| bannerVisible | boolean | 否 | 导航条 visible，默认 true |
+| introVisible | boolean | 否 | 简介 visible，默认 true |
+| overlayRender | (overlayProps) => React.ReactNode | 否 | 自定义渲染 |
+| className | string | 否 | className |
+| maskClassName | string | 否 | 遮罩 className |
+| viewClassName | string | 否 | 图片容器 className |
+| imageClassName | string | 否 | 图片 className |
+| loadingElement | JSX.Element | 否 | 自定义 loading |
+| brokenElement | JSX.Element | 否 | 加载失败 Element |
+
+#### PhotoConsumer
+
+| 名称 | 类型 | 必选 | 描述 |
+| :--- | :--- | :--- | :--- |
+| src | string | 是 | 图片地址 |
+| intro | React.ReactNode | 否 | 图片介绍 |
+| children | React.ReactElement | 否 |  |
+
+#### PhotoSlider
+
+继承自 `PhotoProvider`。手动控制 `react-photo-view` 的展现与隐藏
+
+| 名称 | 类型 | 必选 | 描述 |
+| :--- | :--- | :--- | :--- |
+| images | dataType[] | 是 | 图片列表 |
+| index | number | 否 | 图片当前索引 |
+| visible | boolean | 是 | 可见 |
+| onClose | (evt) => void | 是 | 关闭事件 |
+| onIndexChange | Function | 否 | 索引改变回调 |

No alert changes

Improved metrics

Total package byte prevSize

397660

increased by0.66%

Number of package files

36

increased by12.5%

Lines of code

4072

increased by1.17%

Number of lines in readme file

82

increased by1950%

No dependency changes