archive-gh-me/react-viewer
1
0
Fork 0
mirror of https://github.com/infeng/react-viewer.git synced 2025-12-08 17:36:40 +00:00
Code Issues Projects Releases Wiki Activity

refactor: rewrite image download

Browse Source
This commit is contained in:
infeng 2018-04-09 17:27:51 +08:00
parent 3793d014d9
commit 3dc9d466ae
6 changed files with 24 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -50,23 +50,25 @@ class App extends React.Component<any, any> {
|-------------|--------------|---------|-----------------------------|----------|
| visible | string | false | Viewer visible | true |
| onClose | string | - | Specify a function that will be called when Visible close | true |
| images | {src: string, alt: string}[] | [] | image source array | true |
| images | [ImageDecorator](#ImageDecorator)[] | [] | image source array | true |
| activeIndex | number | 0 | active image index | false |
| zIndex | number | 1000 | Viewer css z-index | false |
| container | HTMLElement | null | set parent node(inline mode) | false |
| drag | boolean | true | whether to drag image | false |
| attribute | boolean | true | whether to show image attribute | false |
| zoomable | boolean | true | whether to show 'zoom' buttom | false |
| zoomable | boolean | true | whether to show 'zoom' button | false |
| rotatable | boolean | true | whether to show 'rotate' button | false |
| scalable | boolean | true | whether to show 'scale' button | false |
| onMaskClick | (e) => void | - | callback function when mask is clicked |
| download | [Download](#Download) | - | download config |
| onMaskClick | (e) => void | - | callback function when mask is clicked | false |
| download | boolean | false | whether to show 'download' | false |
### Download
### ImageDecorator
| props | type | default | description | required |
|-------------|--------------|---------|-----------------------------|----------|
| onDownload | function(url: string) | - | callback when download is clicked | true |
| src | string | - | image source | true |
| alt | string | - | image description | false |
| downloadUrl | string | - | image downlaod url | false |
## Keyboard support

8
demo/index.tsx
View File

@ -47,15 +47,19 @@ class App extends React.Component<any, Partial<State>> {
let images = [{
src: img,
alt: 'lake',
downloadUrl: '',
}, {
src: img2,
alt: 'mountain',
downloadUrl: '',
}, {
src: img3,
alt: '',
downloadUrl: '',
}, {
src: img4,
alt: '',
downloadUrl: '',
}];
let inline = this.state.mode === 'inline';
@ -127,9 +131,7 @@ class App extends React.Component<any, Partial<State>> {
activeIndex={this.state.activeIndex}
attribute={false}
container={inline ? this.container : null}
download={{
onDownload: (url) => { console.log(url); },
}}
downloadable
/>
</div>
<div className="footer">

2
docs/index.html
View File

@ -1 +1 @@
<!DOCTYPE html> <html> <head> <title>react-viewer</title> <meta charset="utf-8"> <link href="/react-viewer/index.css?948d8626c3420d1645b4" rel="stylesheet"></head> <body> <div id="root"></div> <script type="text/javascript" src="/react-viewer/index.js?948d8626c3420d1645b4"></script></body> </html>
<!DOCTYPE html> <html> <head> <title>react-viewer</title> <meta charset="utf-8"> <link href="/react-viewer/index.css?b4bfa9e358dabb74740d" rel="stylesheet"></head> <body> <div id="root"></div> <script type="text/javascript" src="/react-viewer/index.js?b4bfa9e358dabb74740d"></script></body> </html>

6
docs/index.js
View File

File diff suppressed because one or more lines are too long

12
src/ViewerCore.tsx
View File

@ -268,8 +268,8 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
handleDownload = () => {
const activeImage = this.getActiveImage();
if (this.props.download && this.props.download.onDownload) {
this.props.download.onDownload(activeImage.src);
if (activeImage.downloadUrl) {
window.open(activeImage.downloadUrl);
}
}
@ -473,6 +473,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
let activeImg: ImageDecorator = {
src: '',
alt: '',
downloadUrl: '',
};
let images = this.props.images || [];
@ -514,11 +515,6 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
className += ` ${this.prefixCls}-inline`;
}
let downloadable = false;
if (this.props.download) {
downloadable = true;
}
return (
<div
ref="viewerCore"
@ -565,7 +561,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
rotatable={this.props.rotatable}
scalable={this.props.scalable}
changeable={true}
downloadable={downloadable}
downloadable={this.props.downloadable}
/>
<ViewerNav
prefixCls={this.prefixCls}

7
src/ViewerProps.ts
View File

@ -1,6 +1,7 @@
export interface ImageDecorator {
src: string;
alt?: string;
downloadUrl?: string;
}
interface ViewerProps {
@ -28,10 +29,8 @@ interface ViewerProps {
scalable?: boolean;
/** callback function when mask is clicked */
onMaskClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
/** 下载配置 */
download?: {
onDownload: (url) => void;
};
/** 是否显示下载按钮 */
downloadable?: boolean;
}
export default ViewerProps;