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; + } +}