From f87be6bd4942573ba2e7c0af7524d0f13a61dec2 Mon Sep 17 00:00:00 2001
From: infeng <fzhihao@outlook.com>
Date: Wed, 19 Oct 2016 10:59:41 +0800
Subject: [PATCH] add zIndex prop

---
 README.md            |  1 +
 src/ViewerCavans.tsx |  6 ++++++
 src/ViewerCore.tsx   | 18 +++++++++++++++---
 src/ViewerProps.ts   |  2 ++
 src/style/index.less | 10 +++++-----
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 054cf31..f5e9c54 100644
--- a/README.md
+++ b/README.md
@@ -51,6 +51,7 @@ class App extends React.Component<any, any> {
 | onClose     | string       |  -      | Specify a function that will be called when Visible close   | true |
 | images      | {src: string, alt: string}[]     | []      | image source array | true  |
 | activeIndex | number       | 0       | active image index | false |
+| zIndex      | number       | 1000    | Viewer css z-index | false |
 
 ## License
 
diff --git a/src/ViewerCavans.tsx b/src/ViewerCavans.tsx
index 9a2476b..a5a8f52 100644
--- a/src/ViewerCavans.tsx
+++ b/src/ViewerCavans.tsx
@@ -12,6 +12,7 @@ export interface ViewerCavansProps {
   onChangeImgState: (width: number, height: number, top: number, left: number) => void;
   onResize: () => void;
   onZoom: (targetX: number, targetY: number, direct: number) => void;
+  zIndex: number;
 }
 
 export interface ViewerCavansState {
@@ -122,10 +123,15 @@ export default class ViewerCavans extends React.Component<ViewerCavansProps, Vie
       imgClass = `${this.props.prefixCls}-transition`;
     }
 
+    let style = {
+      zIndex: this.props.zIndex,
+    };
+
     return (
       <div
       className={`${this.props.prefixCls}-cavans`}
       onMouseDown={this.handleMouseDown}
+      style={style}
       >
         <img
         className={imgClass}
diff --git a/src/ViewerCore.tsx b/src/ViewerCore.tsx
index 348144a..ad12feb 100644
--- a/src/ViewerCore.tsx
+++ b/src/ViewerCore.tsx
@@ -25,6 +25,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     onClose: noop,
     images: [],
     activeIndex: 0,
+    zIndex: 1000,
   };
 
   private prefixCls: string;
@@ -187,10 +188,20 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
       activeImg = this.props.images[this.state.activeIndex];
     }
 
+    let zIndex = 1000;
+
+    if (this.props.zIndex) {
+      zIndex = this.props.zIndex;
+    }
+
     return (
       <div className={this.prefixCls} style={{display: this.props.visible ? 'block' : 'none'}}>
-        <div className={`${this.prefixCls}-mask`}></div>
-        <div className={`${this.prefixCls}-close ${this.prefixCls}-btn`} onClick={this.handleClose.bind(this)}>
+        <div className={`${this.prefixCls}-mask`} style={{zIndex: zIndex}}></div>
+        <div
+        className={`${this.prefixCls}-close ${this.prefixCls}-btn`}
+        onClick={this.handleClose.bind(this)}
+        style={{zIndex: zIndex + 10}}
+        >
           <Icon type={ActionType.close}/>
         </div>
         <ViewerCavans
@@ -205,8 +216,9 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
         onChangeImgState={this.handleChangeImgState}
         onResize={this.handleResize}
         onZoom={this.handleZoom}
+        zIndex={zIndex + 5}
         />
-        <div className={`${this.prefixCls}-footer`}>
+        <div className={`${this.prefixCls}-footer`} style={{zIndex: zIndex + 5}}>
           <ViewerToolbar
           prefixCls={this.prefixCls}
           onAction={this.handleAction}
diff --git a/src/ViewerProps.ts b/src/ViewerProps.ts
index b8c21e2..6829412 100644
--- a/src/ViewerProps.ts
+++ b/src/ViewerProps.ts
@@ -12,6 +12,8 @@ interface ViewerProps {
   images?: ImageDecorator[];
   /** 当前图像index */
   activeIndex?: number;
+  /** 自定义viewer组件的z-index */
+  zIndex?: number;
 }
 
 export default ViewerProps;
diff --git a/src/style/index.less b/src/style/index.less
index 191ff41..ce8bce6 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -13,7 +13,7 @@
 
 .@{viewer-prefix-cls} {
 
-  @zIndex: 1050;
+  @zIndex: 1000;
 
   @btn-background-color: rgba(0, 0, 0, .5);
   @btn-hover-background-color: rgba(0, 0, 0, .8);
@@ -37,7 +37,7 @@
     background-color: rgba(55, 55, 55, 0.6);
     height: 100%;
     filter: alpha(opacity=50);
-    z-index: 999;
+    z-index: @zIndex;
   }
 
   &-btn {
@@ -57,7 +57,7 @@
     height: 40px;
     border-radius: 0 0 0 40px;   
     cursor: pointer;
-    z-index: @zIndex;
+    z-index: @zIndex + 10;
   }
 
   &-close > i {
@@ -73,7 +73,7 @@
     left: 0;
     bottom: 0;
     overflow: hidden;
-    z-index: 1000;
+    z-index: @zIndex + 5;
   }
 
   &-cavans > img {
@@ -92,7 +92,7 @@
     left: 0;
     overflow: hidden;
     text-align: center;
-    z-index: 1000;
+    z-index: @zIndex + 5;
   }
 
   &-attribute {