@vivliostyle/react
Version:
React component for Vivliostyle
6 lines (5 loc) • 2.63 kB
JavaScript
import e from"@emotion/styled";import{Navigation as t,PageViewMode as n,ReadyState as r,CoreViewer as o}from"@vivliostyle/core";import a,{useRef as i,useEffect as d}from"react";let s;const c=({source:e,page:s=1,zoom:c=1,bookMode:l=!0,fontSize:g=16,background:f="#ececec",renderAllPages:p=!0,autoResize:v=!0,pageViewMode:m=n.SINGLE_PAGE,defaultPaperSize:S,pageBorderWidth:L=1,fitToScreen:h=!1,userStyleSheet:y,authorStyleSheet:b,style:z,onMessage:P,onError:k,onReadyStateChange:w,onLoad:E,onNavigation:A,onHyperlink:M,children:R})=>{const T=i(null),W=i(void 0),G=a.useRef(void 0),[O,j]=a.useState(0);function x(){W.current.setOptions({fontSize:g,pageViewMode:m,renderAllPages:p,autoResize:v,defaultPaperSize:S,pageBorderWidth:L})}function B(){const t=W.current,n=Object.assign(Object.assign({},y?{userStyleSheet:[{[y.endsWith(".css")?"url":"text"]:y}]}:null),b?{authorStyleSheet:[{[b.endsWith(".css")?"url":"text"]:b}]}:null);l?t.loadPublication(e,n):t.loadDocument({url:e},n,{fontSize:g,pageViewMode:m,zoom:c,renderAllPages:p,autoResize:v,defaultPaperSize:S,pageBorderWidth:L,fitToScreen:h})}d(()=>{j(e=>e+1)},[]),d(()=>(W.current=new o({viewportElement:T.current}),x(),function(){const e=e=>{var t,n;return null!==(n=null===(t=e.content.error)||void 0===t?void 0:t.toString())&&void 0!==n?n:e.content.messages.join("\n")};function t(t,n){P&&P(e(t),n)}const n=e=>t(e,"debug"),o=e=>t(e,"info"),a=e=>t(e,"warn");function i(t){k&&k(e(t))}function d(){const{readyState:e}=W.current;w&&w(e)}function s(){E&&E(G.current)}function c(e){const{docTitle:t,epageCount:n,epage:r,metadata:o}=e,a={docTitle:t,epageCount:n,epage:r,metadata:o};G.current=a,A&&A(a)}function u(e){M&&M(e)}const l=W.current;return l.addListener("debug",n),l.addListener("info",o),l.addListener("warn",a),l.addListener("error",i),l.addListener("readystatechange",d),l.addListener("loaded",s),l.addListener("nav",c),l.addListener("hyperlink",u),()=>{w&&w(r.LOADING),l.removeListener("debug",n),l.removeListener("info",o),l.removeListener("warn",a),l.removeListener("error",i),l.removeListener("readystatechange",d),l.removeListener("loaded",s),l.removeListener("nav",c),l.removeListener("hyperlink",u)}}()),[O]),d(()=>{0!==O&&B()},[O,e,b,y,c,h,l]),d(()=>{x()},[g,m,p,v,S,L]),d(()=>{var e;null===(e=W.current)||void 0===e||e.navigateToPage(t.EPAGE,s-1)},[s]);const C=a.createElement(u,{key:O,ref:T,style:z,background:f});return"function"==typeof R&&R instanceof Function?R({container:C,reload:B}):C},u=e.div(s||(s=(e=>e)`
overflow: scroll;
background: ${0} !important;
`),({background:e})=>e);export{c as Renderer};
//# sourceMappingURL=react-vivliostyle.modern.mjs.map