diff --git a/.size-snapshot.json b/.size-snapshot.json
index bd3b0a3..a176763 100644
--- 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
index 6966220..c0b1ea9 100644
--- 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
index 0a5ef7f..0e556be 100644
--- a/src/Print.jsx
+++ b/src/Print.jsx
@@ -36,16 +36,27 @@ 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
+ })
+ }
};
}
}
@@ -53,7 +64,8 @@ export default class Print extends React.Component {
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
this.printElement = el } style={offset_} className={`${s.root} ${main_} ${excl_}`}>{children}
;
+ 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 this.printElement = el } style={offset_} className={className}>{children}
;
}
}
Print.propTypes = propTypes;
diff --git a/src/PrintProvider.css b/src/PrintProvider.css
index 92540cd..ca1316a 100644
--- 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
index 8d5ae57..09a6266 100644
--- 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 {this.props.children}
;
+ return {this.props.children}
;
}
}
PrintProvider.propTypes = propTypes;
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..bb299fd
--- /dev/null
+++ 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;
+ }
+}