添加maskClosable开关

uxcore · Nov 30, 2018 · 7cb4bf7 · 7cb4bf7
1 parent 58cb80b
commit 7cb4bf7
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -76,6 +76,7 @@ Yes please! See the [CONTRIBUTING](https://github.com/uxcore/uxcore/blob/master/
 | height | number or string | no | '' | the default image cover's height |
 | current | number | no | 0 | the current shown photo index  |
 | enableKeyBoardControl | boolean | no | true | whether the album can be controlled by the keyboard navigation |
+| maskClosable | boolean | no | true | whether click mask to close, this prop will be ignored if set closable prop to false |
 | enableThumbs | boolean | no | false | whether the show thumbnail list|
 | thumbPlacement | string | no | right | the placement of thumbnail, you can set 'top'/'right'/'bottom'/'left'/ |
 | thumbBackground | string | no | #000 | if the image couldn't cover the gird, give it a background|

diff --git a/src/Album.jsx b/src/Album.jsx
@@ -94,7 +94,6 @@ class Album extends React.Component {
     }, () => {
       this.handleChange();
     });
-
   }
 
   next() {
@@ -120,7 +119,9 @@ class Album extends React.Component {
 
   renderAlbum() {
     const { current, open } = this.state;
-    const { enableKeyBoardControl, showButton, customButtons } = this.props;
+    const {
+      enableKeyBoardControl, showButton, customButtons, maskClosable,
+    } = this.props;
     let { children } = this.props;
     if (!Array.isArray(children)) {
       children = [children];
@@ -161,6 +162,7 @@ class Album extends React.Component {
               this.handleCloce();
             }
           }}
+          maskClosable={maskClosable}
           enableKeyBoardControl={enableKeyBoardControl}
           ref={(node) => { this.viewer = node; }}
           coordinate={coordinate}
@@ -397,6 +399,7 @@ Album.show = (option = {}) => {
           showButton={config.showButton}
           customButtons={config.customButtons}
           onChange={handleChange}
+          maskClosable={config.maskClosable}
         >
           {photos}
         </Viewer>

diff --git a/src/Photo.jsx b/src/Photo.jsx
@@ -17,8 +17,11 @@ export default class Photo extends React.Component {
 
   handleMaskClick(e) {
     const { target } = e;
-    if (target.className === 'album-item') {
-      const { onMaskClick } = this.props;
+    let { onMaskClick, maskClosable } = this.props;
+    if (maskClosable === undefined) {
+      maskClosable = true;
+    }
+    if (maskClosable === true && target.className === 'album-item') {
       if (typeof onMaskClick === 'function') {
         onMaskClick(e);
       }

diff --git a/src/Viewer.jsx b/src/Viewer.jsx
@@ -214,6 +214,7 @@ class Viewer extends React.Component {
     const { current } = this.state;
     const {
       children, hasControl, onClose, open, showButton,
+      maskClosable,
     } = this.props;
     const prevDisabled = current === 0;
     const nextDisabled = current === children.length - 1;
@@ -238,6 +239,7 @@ class Viewer extends React.Component {
             children[current] && React.cloneElement(children[current], {
               ref: (c) => { this.photo = c; },
               onMaskClick: onClose,
+              maskClosable: maskClosable
             })
           }
           {showButton ? this.renderFuncButtons() : null}