fix bugs

a-x- · Jun 20, 2018 · 7f88416 · 7f88416
1 parent 94d8c6f
commit 7f88416
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 31 deletions.
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -19,8 +19,8 @@
     "gzipped": 3314
   },
   "lib/umd/index.js": {
-    "bundled": 19581,
-    "minified": 8728,
-    "gzipped": 3258
+    "bundled": 22340,
+    "minified": 10399,
+    "gzipped": 3301
   }
 }
diff --git a/src/Print.css b/src/Print.css
@@ -6,8 +6,11 @@
   .root {
     visibility: visible; /* visible element even nested in the hidden one */
   }
-  ._main {
+  /* .hiddenAll._main{
     visibility: visible;
+  } */
+  .root._main {
+    visibility: visible ;
   }
   ._exclusive {
     display: block;

diff --git a/src/Print.jsx b/src/Print.jsx
@@ -36,24 +36,36 @@ export default class Print extends React.Component {
     if (this.props.main || this.props.single) {
 
       window.matchMedia('print').onchange = () => {
-        const bodyRect = document.body.getBoundingClientRect();
-        const elem = this.printElement;
-        const elemRect = elem && elem.getBoundingClientRect();
-        const printOffsetLeft = elemRect && (elemRect.left - bodyRect.left);
-        const printOffsetTop = elemRect && (elemRect.top - bodyRect.top);
+        const isPrint = window.matchMedia('print').matches;
 
-        this.setState({
-          printOffsetTop,
-          printOffsetLeft,
-        });
+        if(isPrint){
+          console.log('PRINT HERE');
+          const bodyRect = document.body.getBoundingClientRect();
+          const elem = this.printElement;
+          const elemRect = elem && elem.getBoundingClientRect();
+          const printOffsetLeft = elemRect && (elemRect.left - bodyRect.left);
+          const printOffsetTop = elemRect && (elemRect.top - bodyRect.top);
+
+          this.setState({
+            printOffsetTop,
+            printOffsetLeft,
+          });
+        }else{
+          console.log('print end');
+          this.setState({
+            printOffsetTop: 0,
+            printOffsetLeft: 0
+          })
+        }
       };
     }
   }
 
   componentWillUnmount() {
     if (this.props.name) {
       debug('remove printable', this.props.name);
-      this.context.printProvider && this.context.printProvider.unregPrintable(this.props.name);
+      const isSingle = (this.props.main || this.props.single);
+      this.context.printProvider && this.context.printProvider.unregPrintable(this.props.name, isSingle);
     }
 
     if (this.props.main || this.props.single) {
@@ -65,11 +77,15 @@ export default class Print extends React.Component {
 
     const { children, main, single, exclusive, printOnly } = this.props;
     const { printOffsetLeft, printOffsetTop } = this.state;
-    const main_ = (main || single) ? s.main : '';
+    const main_ = (main || single) ? s._main : '';
     const excl_ = (exclusive || printOnly) ? s.exclusive : '';
     const isPrint = window.matchMedia('print').matches;
-    const offset_ = ((printOffsetTop || printOffsetLeft ) && main_ && isPrint) ? { marginTop: -printOffsetTop, marginLeft: -printOffsetLeft} : {marginTop: 0, marginLeft: 0};
-    return <div ref={ (el) => this.printElement = el } style={offset_} className={`${s.root} ${main_} ${excl_}`}>{children}</div>;
+    const offset_ = ((printOffsetTop || printOffsetLeft ) && main_ && isPrint) ? { marginTop: -printOffsetTop, marginLeft: -printOffsetLeft} : {};
+    const globalClassName = 'react-easy-print-print'; // using in hiden all
+    const className = `${globalClassName} ${s.root} ${main_} ${excl_}`;
+    // this.state.printOffsetLeft = 0;
+    // this.state.printOffsetTop = 0;
+    return <div ref={ (el) => this.printElement = el } style={offset_} className={className}>{children}</div>;
   }
 }
 Print.propTypes = propTypes;

diff --git a/src/PrintProvider.css b/src/PrintProvider.css
@@ -9,9 +9,9 @@
     left: 0
   }
   .hiddenAll {
-    visibility: hidden;
+    visibility: hidden !important;
   }
-  .hiddenAll .print {
+  .hiddenAll :global(.react-easy-print-print) {
     visibility: hidden;
   }
   .wrap._loose:not(._invert) {

diff --git a/src/PrintProvider.jsx b/src/PrintProvider.jsx
@@ -24,13 +24,14 @@ export default class PrintProvider extends React.PureComponent {
     this.state = {
       isInPrintPreview: false,
       printableNodes: [],
-      hasSingle: false,
     };
     this.printableRegistry = {};
     window.matchMedia('print').onchange = () => {
       debug('toggle print mode', window.matchMedia('print').matches);
       this.setState({ isInPrintPreview: window.matchMedia('print').matches });
     };
+
+    this.hasSingle = false;
   }
 
   getChildContext() {
@@ -43,28 +44,46 @@ export default class PrintProvider extends React.PureComponent {
     };
   }
 
-  regPrintable(key, node, isSingle) {
+  regHiddenAll() {
+    document.body.classList.add(s.hiddenAll);
+    this.hasSingle = true;
+  }
+
+  unregHiddenAll() {
+    document.body.classList.remove(s.hiddenAll);
+    this.hasSingle = false;
+  }
+
+  regPrintable(key, node) {
     const loose = this.props.loose || this.props.invert;
-    debug('reg printable', key, node);
+    const isSingle = node.props.single || node.props.main;
+    const { hasSingle } = this;
 
-    this.setState({
-      hasSingle: this.state.hasSingle || isSingle
-    });
+    debug('reg printable', key, node);
 
-    if (this.printableRegistry[key] !== undefined || loose || isSingle) return;
+    if (this.printableRegistry[key] !== undefined || loose) return;
     setTimeout(() => this.setState({
       printableNodes: this.state.printableNodes.concat(node),
     }), 0);
     this.printableRegistry[key] = this.state.printableNodes.length;
+
+    if (isSingle && !hasSingle) {
+      this.regHiddenAll();
+    }else if(isSingle){
+      console.warn(new Error('react-easy-print warning \n\t you\'re using more than one `single` Print component'));
+    }
   }
 
-  unregPrintable(key) {
+  unregPrintable(key, isSingle) {
     const loose = this.props.loose || this.props.invert;
     if (this.printableRegistry[key] === undefined || this.state.isInPrintPreview || loose) return;
     this.setState({
       printableNodes: spliced(this.state.printableNodes, this.printableRegistry[key]),
     });
     this.printableRegistry = Object.assign({}, this.printableRegistry, { [key]: undefined });
+    if (isSingle) {
+      this.unregHiddenAll();
+    }
   }
 
   createRender(children) {
@@ -81,8 +100,9 @@ export default class PrintProvider extends React.PureComponent {
   }
 
   render() {
-    const { isInPrintPreview, printableNodes, hasSingle } = this.state;
+    const { isInPrintPreview, printableNodes } = this.state;
     const loose = this.props.loose || this.props.invert;
+    const { hasSingle } = this;
 
     if (isInPrintPreview && printableNodes.length && !loose && !hasSingle) {
       debug('render printable only', printableNodes);
@@ -97,9 +117,7 @@ export default class PrintProvider extends React.PureComponent {
     debug('render everything', isInPrintPreview, printableNodes.length, !loose);
     const loose_ = loose ? s.loose : '';
     const invert_ = this.props.invert ? s.invert : '';
-    const hiddenAll_ = hasSingle ? s.hiddenAll : '';
-
-    return <div className={`${s.wrap} ${loose_} ${invert_} ${hiddenAll_} `}>{this.props.children}</div>;
+    return <div className={`${s.wrap} ${loose_} ${invert_} `}>{this.props.children}</div>;
   }
 }
 PrintProvider.propTypes = propTypes;

diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,40 @@
+.print._exclusive {
+  display: none;
+}
+
+@media print {
+  .printRender {
+    width: 100%;
+    background-color: #fff;
+    z-index: 10000000;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0
+  }
+  .hiddenAll {
+    visibility: hidden !important;
+  }
+  .hiddenAll .print {
+    visibility: hidden;
+  }
+  .wrap._loose:not(._invert) {
+    visibility: hidden;
+  }
+  .print {
+    visibility: visible;
+    /* visible element even nested in the hidden one */
+  }
+  .print._main {
+    visibility: visible;
+  }
+  .print._exclusive {
+    display: block;
+  }
+  .no-print {
+    visibility: hidden;
+  }
+  .no-print._force {
+    display: none;
+  }
+}